/* Pricing: the plans page (pricing.html), the plan cards, the pay card's own parts (pay-card.js; its frame is the
   offer card's, offer-card.css), the limit note on My Charts and the receipt. Tokens only.
   The look is the offer card's, which Mukul fixed: a warm-white half and a solid colour half. Each plan has its own
   solid colour (tokens/colors.css --plan-*); ?tone=plum on this Mac shows all three in the offer card's plum. */
:root {
  --pu: clamp(0.7px, min(100vw / 1440, 100svh / 880), 1.5px);   /* one design pixel: the page is drawn at 1440 × 880 and grows or shrinks with the screen */
  --pt: max(0.93px, calc(0.5px + var(--pu) / 2));               /* type moves half as fast, and never under 12px */
}
html[data-tone="plum"] { --plan-free: var(--plum-deep); --plan-pro: var(--plum-deep); --plan-report: var(--plum-deep); }

.pr-page { margin: 0; background: var(--black); color: var(--bone); font-family: var(--font-panel); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.pr-page a { color: inherit; }
.sky-back { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.pr-page::before { content: ''; position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: 56px; background: var(--black); }   /* nothing slides under the menu bar */
/* the screen's lines (12.5 / 50 / 87.5%), under the words and cards; they start below the menu bar */
.pr-lines { position: fixed; inset: 56px 0 0 0; z-index: 0; pointer-events: none; }
.pr-lines i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgb(var(--bone-rgb) / 0.11); }
.pr-lines i:nth-child(1) { left: 12.5vw; } .pr-lines i:nth-child(2) { left: 50vw; } .pr-lines i:nth-child(3) { left: 87.5vw; }

/* the house word-roll: a line rises into its own window */
.rl { display: block; clip-path: inset(-0.4em -3em -0.45em -3em); }
.rl > span { display: inline-block; }
/* the page's own words roll in by themselves (no script needed: a page that fails to run still shows its prices) */
@keyframes pr-roll { from { transform: translateY(165%); } }
.pr-head .rl > span { animation: pr-roll 1.05s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--i, 0) * 0.09s); }
/* a figure that changes (Pro's price, and how far ahead its calendar shows) rolls out and the new one rolls in */
.plan-price .rl > span, .plan-fact .rl > span { transform: translateY(165%); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.plan-price .rl.in > span, .plan-fact .rl.in > span { transform: none; }
.plan-price .rl.out > span, .plan-fact .rl.out > span { transform: translateY(-165%); transition-duration: 0.4s; }
.plan-fact .rl { clip-path: inset(-0.12em -0.4em -0.2em -0.4em); }

.pr { position: relative; z-index: 1; margin: 0 12.5vw; }
.pr .hd { margin: 0 0 0 -0.045em; font: 700 calc(104 * var(--pu))/0.9 var(--font-panel); letter-spacing: -0.045em; }
.pr .hd.sm { font-size: calc(60 * var(--pu)); }
.pr-page a.pr-go { color: var(--coral); font-weight: 600; text-decoration: none; white-space: nowrap; }   /* a way to another page: coral */
.pr-page a.pr-go:hover { text-decoration: underline; }

/* ---------- 1 · the first screen: the title, what every chart gets, the three plans ---------- */
/* one screen: the title row and the fine line take what they need; the cards take the rest, and inside them the
   drawn charts give way first (a short laptop) so the prices and buttons always fit */
.pr-first { box-sizing: border-box; min-height: max(100svh, 600px); padding: calc(56px + 26 * var(--pu)) 0 calc(20 * var(--pu)); display: grid; grid-template-rows: auto minmax(min-content, 1fr) auto; }
.pr-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; padding-bottom: calc(24 * var(--pu)); }
.pr-lead { margin: calc(14 * var(--pu)) 0 0; font-family: var(--font-prose); font-size: calc(24 * var(--pt)); line-height: 1.3; }
.pts { list-style: none; margin: 0; padding: 0; }
.pts li { padding: calc(10 * var(--pu)) 0; border-top: 1px solid rgb(var(--bone-rgb) / 0.14); font-family: var(--font-prose); font-size: calc(18 * var(--pt)); line-height: 1.38; color: rgb(var(--bone-rgb) / 0.88); }
.pts li:last-child { border-bottom: 1px solid rgb(var(--bone-rgb) / 0.14); }

/* each plan's own colours, wherever it shows (a pricing card, the limit note, the pay card): --tone is its solid
   colour, --accent prints its name and emblem on the warm white, --btn is its button. The coral button and the warm
   print look right only beside the plum (Mukul, 2026-11-10), so Free and Pro take their own colour and a bone
   button. */
[data-plan="free"] { --tone: var(--plan-free); --accent: var(--plan-free); --btn: var(--bone); --btn-h: var(--ink); --btn-h-ink: var(--bone); }
[data-plan="plus"] { --tone: var(--plan-plus); --accent: var(--brick); }
[data-plan="pro"], [data-plan="pack"] { --tone: var(--plan-pro); --accent: var(--plan-pro); --btn: var(--bone); --btn-h: var(--ink); --btn-h-ink: var(--bone); }

/* the plans: three cards whose rows line up (subgrid), so the row of cards reads as one table */
.pr-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(calc(166 * var(--pu)), 1fr) repeat(4, auto); column-gap: calc(24 * var(--pu));
  align-self: center; height: min(100%, calc(620 * var(--pu))); }
.plan { grid-row: span 5; display: grid; grid-template-rows: subgrid; border-radius: 22px; overflow: hidden; background: var(--tone); color: var(--bone);
  --pad: calc(26 * var(--pu)); --rule: rgb(var(--bone-rgb) / 0.24);
  animation: pr-rise 1s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(var(--k, 0) * 0.11s); }   /* they arrive and settle, one after another */
@keyframes pr-rise { from { transform: translateY(calc(44 * var(--pu))); opacity: 0; } }
/* the warm-white top: the plan's name, how many charts it holds (large: Mukul, "clearly visible"), and beside them
   one of the sky's lights, printed like a woodblock (the Moon, the Sun, the stars: Jyotish is the study of the lights) */
.plan-top { position: relative; background: rgb(var(--warm-white-rgb)); color: var(--ink); padding: calc(16 * var(--pu)) var(--pad) calc(18 * var(--pu)); min-height: 0; container-type: size;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) calc(18 * var(--pt)); gap: calc(7 * var(--pu)) calc(12 * var(--pu)); }
/* the words sit low on the left, by the price; the emblem high on the right. The last row is one line kept for a
   note (Pro has one), on every card, so the three names stand on one line and the three counts on another */
.plan-id { grid-area: 1 / 1; min-width: 0; align-self: end; display: grid; gap: calc(7 * var(--pu)); }
.plan-name { margin: 0; font-family: var(--serif); font-weight: 500; font-size: calc(52 * var(--pu)); line-height: 1; color: var(--accent, var(--brick)); }
.plan-charts { margin: 0; font: 700 calc(32 * var(--pu))/1 var(--font-panel); letter-spacing: -0.04em; color: var(--ink); white-space: nowrap; }
.plan-note { grid-area: 2 / 1 / 3 / -1; margin: 0; font: 500 calc(13 * var(--pt))/calc(18 * var(--pt)) var(--font-panel); color: var(--ink-dim); }
/* the emblem is a print: its file is the ink's coverage only (assets/plans), so it takes the plan's own colour */
.plan-art { grid-area: 1 / 2; display: block; align-self: start; justify-self: end; aspect-ratio: 1; height: min(calc(100cqh - 41 * var(--pu) - 18 * var(--pt)), calc(190 * var(--pu)), 46cqw); margin: 0 calc(-6 * var(--pu)) 0 0;
  background: var(--accent, var(--brick)); -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat; }
/* the plan this account is on: a bone tab on the seam between the two halves, and a ring round the card */
.plan-now { display: none; position: absolute; z-index: 1; right: var(--pad); bottom: 0; transform: translateY(50%); margin: 0; padding: calc(6 * var(--pt)) calc(12 * var(--pt)); border-radius: var(--r-pill);
  background: var(--bone); color: var(--ink); font: 700 calc(13 * var(--pt))/1 var(--font-panel); letter-spacing: 0.01em; white-space: nowrap; }
.plan[data-current] .plan-now { display: block; }
.plan[data-current] { box-shadow: 0 0 0 3px var(--black), 0 0 0 5px var(--bone); }
.plan-price { margin: 0; padding: calc(20 * var(--pu)) var(--pad) calc(14 * var(--pu)); display: flex; align-items: baseline; gap: calc(10 * var(--pu)); }
.plan-price b { font: 700 calc(62 * var(--pu))/1 var(--font-panel); letter-spacing: -0.045em; }
.plan-price .rl { display: inline-block; clip-path: inset(-0.1em -0.4em -0.12em -0.4em); }
.plan-price .per { font: 500 calc(15 * var(--pt)) var(--font-panel); color: rgb(var(--bone-rgb) / 0.9); }
.plan-fact { margin: 0 var(--pad); padding: calc(10 * var(--pu)) 0; border-top: 1px solid var(--rule); display: grid; gap: 3px; align-content: start; }
.plan-fact .k { font: 600 calc(12 * var(--pt)) var(--font-panel); letter-spacing: 0.02em; color: rgb(var(--bone-rgb) / 0.76); }
.plan-fact .v { font-family: var(--font-prose); font-size: calc(18.5 * var(--pt)); line-height: 1.25; }
.plan-foot { padding: calc(8 * var(--pu)) var(--pad) calc(24 * var(--pu)); display: grid; align-content: end; }
.plan-go { appearance: none; cursor: pointer; display: grid; place-items: center; width: 100%; min-height: 48px; box-sizing: border-box; border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--btn, var(--coral)); color: var(--ink); font: 700 calc(15 * var(--pt)) var(--font-panel); text-decoration: none; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.pr-page a.plan-go { color: var(--ink); }
.plan-go:hover, .pr-page a.plan-go:hover { background: var(--btn-h, var(--bone)); color: var(--btn-h-ink, var(--ink)); }
.plan-go:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.plan-go.ghost, .pr-page a.plan-go.ghost { background: transparent; color: var(--bone); border-color: rgb(var(--bone-rgb) / 0.5); }
.plan-go.ghost:hover, .pr-page a.plan-go.ghost:hover { border-color: var(--bone); background: rgb(var(--bone-rgb) / 0.08); color: var(--bone); }
.plan-yours { margin: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; font: 600 calc(14 * var(--pt))/1.3 var(--font-panel); border-top: 1px solid var(--rule); }
.plan-yours .sub { flex-basis: 100%; font-weight: 500; font-size: calc(13 * var(--pt)); color: rgb(var(--bone-rgb) / 0.86); }   /* Plus: until when its calendar is open */
.plan-yours + .plan-go { min-height: 40px; }
/* Pro's month | year: a pill that slides (the Studio's pills), in ink on the warm white */
.seg { position: relative; display: inline-flex; padding: 3px; border-radius: var(--r-pill); border: 1px solid rgb(var(--ink-rgb) / 0.3); }
.seg button { position: relative; z-index: 1; flex: 1; white-space: nowrap; appearance: none; border: 0; background: transparent; cursor: pointer; color: rgb(var(--ink-rgb) / 0.7);
  font: 600 12px var(--font-panel); letter-spacing: 0.02em; padding: 7px 13px; border-radius: var(--r-pill); transition: color 0.32s ease; }
.seg button[aria-pressed="true"] { color: var(--bone); }
.seg i { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: var(--r-pill); background: var(--ink); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1); }
.seg[data-on="year"] i { transform: translateX(100%); }
.seg button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.seg.on-tone { border-color: rgb(var(--bone-rgb) / 0.4); }
.seg.on-tone button { color: rgb(var(--bone-rgb) / 0.8); } .seg.on-tone button[aria-pressed="true"] { color: var(--ink); } .seg.on-tone i { background: var(--bone); }
.pr-fine { margin: calc(18 * var(--pu)) 0 0; font: 500 calc(13 * var(--pt))/1.5 var(--font-panel); letter-spacing: 0.02em; color: rgb(var(--bone-rgb) / 0.78); }

/* ---------- 2 · payment, and what else has a price ---------- */
.pr-more { display: grid; grid-template-columns: 1fr 1fr; align-items: start; padding: calc(96 * var(--pu)) 0 calc(40 * var(--pu)); }
.pr-more > div:first-child { padding-right: calc(56 * var(--pu)); }
.pr-more .pts { margin-top: calc(26 * var(--pu)); }
.pr-extra { display: grid; gap: calc(24 * var(--pu)); }
/* a wide card, the offer card's two halves: what it is on warm white, its price on the colour */
.strip { display: grid; grid-template-columns: 1.15fr 1fr; border-radius: 22px; overflow: hidden; background: rgb(var(--warm-white-rgb)); color: var(--ink); }
.strip[hidden] { display: none; }
.strip-l { padding: calc(24 * var(--pu)) calc(26 * var(--pu)); display: grid; gap: calc(10 * var(--pu)); align-content: start; }
.strip .plan-name { font-size: calc(40 * var(--pu)); }
.strip-l p { margin: 0; font-family: var(--font-prose); font-size: calc(17 * var(--pt)); line-height: 1.4; color: var(--ink-dim); }
.strip-r { background: var(--tone); color: var(--bone); padding: calc(24 * var(--pu)) calc(26 * var(--pu)); display: grid; gap: calc(10 * var(--pu)); align-content: center; }
.strip-r .plan-price { padding: 0; flex-wrap: wrap; }
.strip-r .plan-price b { font-size: calc(48 * var(--pu)); }
.strip-r .note { margin: 0; font: 500 calc(13 * var(--pt))/1.45 var(--font-panel); color: rgb(var(--bone-rgb) / 0.9); }

/* ---------- 3 · who runs purnika ---------- */
.pr-about { display: grid; grid-template-columns: 1fr 1fr; padding: calc(56 * var(--pu)) 0 calc(110 * var(--pu)); }
.pr-about p { margin: 0 0 calc(18 * var(--pu)); max-width: 30em; font-family: var(--font-prose); font-size: calc(19 * var(--pt)); line-height: 1.5; color: rgb(var(--bone-rgb) / 0.88); }

/* ---------- the pay card (pay-card.js), in the offer card's frame ---------- */
.oc.pay .oc-co { background: var(--tone, var(--plum-deep)); }
.oc.pay .ttl { font-size: 40px; }
.oc.pay .oc-co ul { margin: 0; padding: 0; }
.oc.pay .lines .q { color: rgb(var(--bone-rgb) / 0.86); }
.oc.pay .oc-co .lines { column-gap: 0; }   /* the rule over Total runs unbroken */
.oc.pay .lines > :nth-child(even) { text-align: right; padding-left: 14px; }
.oc.pay .fine a, .oc.pay .oc-co a.lnk { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }
.oc.pay .fine { line-height: 1.6; color: rgb(var(--bone-rgb) / 0.86); }
.oc.pay a.oc-pay { display: block; text-decoration: none; color: var(--ink); }
/* the plan's label (the card's left half), made like a product label (purnika-design, references/labels.md): a frame
   line with a four-point star on each corner, the maker and the plan's number, its name beside its emblem (printed in
   the plan's own colour), a ruled table of what it changes for this account, and a band with a barcode computed
   from the plan's code (barcode.js) and who sells it. After payment a Paid stamp is pressed on it. */
.oc.pay .oc-cc { display: block; padding: 20px; container-type: inline-size; }
.pl { position: relative; box-sizing: border-box; height: 100%; border: 1px solid var(--hair); padding: 24px 28px 22px; color: var(--ink);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 18px; --hair: rgb(var(--ink-rgb) / 0.62);
  --spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.6 7.4 16.6 11.4 24 12C16.6 12.6 12.6 16.6 12 24C11.4 16.6 7.4 12.6 0 12C7.4 11.4 11.4 7.4 12 0Z'/%3E%3C/svg%3E"); }
.pl-sp { position: absolute; width: 25px; height: 25px; background: rgb(var(--warm-white-rgb)); }   /* the frame line stops short of each star */
.pl-sp::before { content: ''; position: absolute; inset: 4px; background: var(--ink); -webkit-mask: var(--spark) center / contain no-repeat; mask: var(--spark) center / contain no-repeat; }
.pl-sp:nth-child(1) { left: -13px; top: -13px; } .pl-sp:nth-child(2) { right: -13px; top: -13px; }
.pl-sp:nth-child(3) { left: -13px; bottom: -13px; } .pl-sp:nth-child(4) { right: -13px; bottom: -13px; }
.pl-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pl-wm { display: flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 23px; line-height: 1; }
.pl-wm img { width: 27px; height: 27px; filter: invert(1) brightness(0.22) contrast(1.5); }
.pl-no { display: flex; align-items: baseline; gap: 7px; font: 600 12px/1 var(--font-panel); letter-spacing: 0.14em; text-transform: uppercase; }
.pl-no b { font: 700 30px/0.9 var(--font-panel); letter-spacing: -0.04em; }
.pl-main { position: relative; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px; }
.pl-name { margin: 0 0 -0.05em -0.03em; font-family: var(--serif); font-weight: 500; font-size: clamp(64px, 19cqi, 132px); line-height: 0.86; color: var(--accent, var(--brick)); }
.pl.long .pl-name { font-size: clamp(46px, 12cqi, 84px); }
.pl-art { display: block; align-self: center; aspect-ratio: 1; width: clamp(96px, 29cqi, 208px); background: var(--accent, var(--brick));
  -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat; }
.pl-tab { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 1.1fr); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.pl-tab > span { display: flex; align-items: center; padding: 9px 14px; border-top: 1px solid var(--line); border-left: 1px solid var(--hair); }
.pl-tab > span:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
.pl-tab > span:nth-child(-n + 3) { border-top: 0; }
.pl-tab .h { font: 600 11.5px/1.2 var(--font-panel); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.pl-tab .k { font: 600 13px/1.3 var(--font-panel); }
.pl-tab .a { font-family: var(--font-prose); font-size: 18px; line-height: 1.25; color: var(--mute); }
.pl-tab .b { font-family: var(--font-prose); font-size: 19.5px; line-height: 1.25; }
.pl-tab [translate="no"] { white-space: nowrap; }   /* a date stays in one piece */
.pl-band { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; }
.pl-code { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.pl-code .bc { display: block; max-width: calc(100% + 10px); height: 38px; margin-left: -10px; fill: var(--ink); }   /* its clear margin hangs outside, so the first bar stands on the table's edge */
.pl-code span { font: 500 11px/1 var(--mono); letter-spacing: 0.16em; white-space: nowrap; }
.pl-by { margin: 0; display: grid; gap: 2px; max-width: 20em; text-align: right; font: 500 11.5px/1.4 var(--font-panel); color: var(--mute); }
.pl-by b { font-weight: 700; font-size: 13px; color: var(--ink); }
/* paid: a round stamp pressed on the label, by the emblem */
.pl-stamp { position: absolute; right: clamp(74px, 24.5cqi, 186px); top: 4%; width: 118px; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 4px;
  border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: -8px; color: rgb(var(--ink-rgb) / 0.86); text-align: center; transform: rotate(-11deg);
  animation: pl-press 0.42s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.pl-stamp b { font: 800 23px/1 var(--font-panel); letter-spacing: 0.1em; text-transform: uppercase; }
.pl-stamp span { max-width: 84px; font: 600 10px/1.25 var(--font-panel); letter-spacing: 0.06em; text-transform: uppercase; }
@keyframes pl-press { from { transform: rotate(-11deg) scale(1.55); opacity: 0; } }
html[data-lang="hi"] .pl-tab .h, html[data-lang="hi"] .pl-stamp b, html[data-lang="hi"] .pl-stamp span { letter-spacing: 0; }
/* right: the price leads (the label names the plan), as on the pricing cards; the button takes the plan's own colour */
.oc.pay .oc-co .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; padding-right: 34px; font: 700 56px/1 var(--font-panel); letter-spacing: -0.045em; }
.oc.pay .oc-co .price small { font: 500 15px/1.2 var(--font-panel); letter-spacing: 0; }
.oc.pay .oc-co .price .seg { align-self: center; letter-spacing: 0; }
.oc.pay .oc-pay { background: var(--btn, var(--coral)); transition: background 0.25s ease, color 0.25s ease; }
.oc.pay .oc-pay:hover { background: var(--btn-h, var(--bone)); color: var(--btn-h-ink, var(--ink)); }
.oc.pay .oc-pay:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.oc.pay .oc-co .lines { margin-top: auto; }   /* the bill, Pay and the fine print stand at the foot, level with the label's band */
/* this Mac only: the stand-in for the gateway asks how the payment ends */
.pay-test { display: grid; gap: 8px; padding: 12px; border: 1px dashed rgb(var(--bone-rgb) / 0.5); border-radius: 14px; font-size: 13px; }
.pay-test div { display: flex; gap: 8px; }
.pay-test button { flex: 1; min-height: 44px; appearance: none; cursor: pointer; border-radius: var(--r-pill); border: 1px solid rgb(var(--bone-rgb) / 0.5); background: transparent; color: var(--bone); font: 600 13px var(--font-panel); }
.pay-test button:hover { background: rgb(var(--bone-rgb) / 0.1); }

/* ---------- the limit note on My Charts (charts.js): the same two halves, low and wide ---------- */
.wall { margin-top: 28px; display: grid; grid-template-columns: 1.2fr 1fr; border-radius: var(--r-card); overflow: hidden; background: rgb(var(--warm-white-rgb)); color: var(--ink); }
.wall[hidden] { display: none; }
.wall-l { padding: 26px 30px; display: grid; gap: 8px; align-content: center; }
.wall-l .plan-name { font-size: 44px; }
.wall-l p { margin: 0; font-family: var(--font-prose); font-size: 18px; line-height: 1.4; color: var(--ink-dim); }
.wall-r { background: var(--tone); color: var(--bone); padding: 24px 30px; display: grid; gap: 12px; align-content: center; }
.wall-r .plan-price { padding: 0; } .wall-r .plan-price b { font-size: 46px; } .wall-r .plan-price .per { font-size: 14px; }
.wall-r .plan-go { font-size: 15px; }
.wall-r .fine { font: 500 12.5px/1.5 var(--font-panel); color: rgb(var(--bone-rgb) / 0.86); }
.wall-r .fine a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- phones: one column; each card keeps its two halves ---------- */
@media (max-width: 900px) {
  .pr { margin: 0 20px; }
  .pr-lines i:nth-child(1), .pr-lines i:nth-child(3) { display: none; }
  .pr .hd { font-size: clamp(56px, 17vw, 96px); } .pr .hd.sm { font-size: clamp(40px, 11vw, 60px); }
  .pr-first { min-height: 0; padding-top: 96px; display: block; }
  .pr-head { grid-template-columns: 1fr; gap: 22px; }
  .pr-lead { font-size: 21px; } .pts li { font-size: 17px; padding: 11px 0; }
  .pr-plans { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 22px; height: auto; }
  .plan { grid-row: auto; grid-template-rows: none; --pad: 22px; }
  .plan-top { padding: 20px 22px; container-type: normal; grid-template-rows: auto; gap: 8px 14px; } .plan-id { gap: 8px; } .plan-name { font-size: 48px; }
  .plan-charts { font-size: 32px; } .plan-note { font-size: 13px; line-height: 1.35; } .plan-art { height: 112px; max-width: 40vw; }
  .plan-price { padding: 20px 22px 14px; flex-wrap: wrap; row-gap: 8px; } .plan-price b { font-size: 56px; } .plan-price .per { font-size: 15px; }   /* Pro's pill goes under the price when a narrow phone has no room beside it (Hindi) */
  .plan-fact { padding: 11px 0; } .plan-fact .k { font-size: 12.5px; } .plan-fact .v { font-size: 18px; }
  .plan-foot { padding: 14px 22px 22px; } .plan-go { font-size: 15px; }
  .seg button { min-height: 44px; padding: 0 16px; font-size: 13px; }
  .pr-fine { font-size: 13px; margin-top: 20px; }
  .pr-more, .pr-about { grid-template-columns: minmax(0, 1fr); padding: 72px 0 24px; }
  .pr-more > div:first-child { padding-right: 0; } .pr-more .pts { margin-top: 20px; }
  .pr-extra { margin-top: 40px; gap: 20px; }
  .strip { grid-template-columns: minmax(0, 1fr); }
  .strip-l, .strip-r { padding: 20px 22px; } .strip .plan-name { font-size: 36px; } .strip-l p { font-size: 17px; }
  .strip-r .plan-price b { font-size: 44px; } .strip-r .note { font-size: 13px; }
  .pr-about { padding-bottom: 72px; } .pr-about p { font-size: 18px; margin-top: 18px; }
  .wall { grid-template-columns: minmax(0, 1fr); }
  .wall-l, .wall-r { padding: 20px 22px; } .wall-l .plan-name { font-size: 38px; } .wall-l p { font-size: 17px; }
  .oc.pay .ttl { font-size: 34px; }
  .oc.pay .oc-co .price { font-size: 48px; }
  .oc.pay .fine a { display: inline-block; padding: 13px 8px; min-width: 44px; text-align: center; }   /* a finger's tap on the policy link */
}
/* the pay card in one column (offer-card.css, 980px): the cross has the paper above the label to itself */
@media (max-width: 980px) {
  .oc.pay .oc-cc { padding-top: 58px; }
  .pl { height: auto; }
}
/* a phone: the label's table puts each fact over its two values; the band stacks; Paid takes the emblem's place */
@media (max-width: 560px) {
  .oc.pay .oc-cc { padding: 62px 14px 14px; }
  .pl { padding: 16px 16px 14px; gap: 14px; }
  .pl-wm { font-size: 21px; } .pl-wm img { width: 24px; height: 24px; } .pl-no b { font-size: 26px; }
  .pl-name { font-size: clamp(52px, 19cqi, 132px); } .pl.long .pl-name { font-size: clamp(40px, 12cqi, 84px); line-height: 0.94; }
  .pl-art { width: clamp(72px, 29cqi, 208px); }
  .pl.paid .pl-art { display: none; }
  .pl-stamp { position: static; width: 104px; }
  .pl-stamp b { font-size: 20px; } .pl-stamp span { font-size: 9.5px; max-width: 76px; }
  .pl-tab { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .pl-tab > span:first-child { display: none; }
  .pl-tab > span { padding: 8px 12px; }
  .pl-tab .k { grid-column: 1 / -1; padding: 10px 0 0; border-left: 0; }
  .pl-tab .a, .pl-tab .b { border-top: 0; padding-top: 2px; padding-bottom: 10px; }
  .pl-tab .a, .pl-tab .h:nth-child(2) { padding-left: 0; border-left: 0; }
  .pl-band { flex-direction: column; align-items: flex-start; gap: 12px; }
  .pl-by { text-align: left; max-width: none; font-size: 12px; }
  .pl-tab .h, .pl-code span { font-size: 12px; }   /* phones: no reader-visible text under 12px (the phone check) */
}
@media (prefers-reduced-motion: reduce) {
  .pl-stamp { animation: none; }
  .pr-head .rl > span, .plan { animation: none; }
  .plan-price .rl > span, .plan-fact .rl > span { transition: none; }
  .seg i { transition: none; }
}