/* The pricing page knows the visitor's product (agent C, 2026-10-07, site-src/dm/PLAN.md; Anant: "the pricing page under the
   DM automation should first highlight all the important features of DM automation instead of the comment moderation, and
   vice versa"). Every plan holds both products. html[data-product] is the visitor's last choice (the header restores it,
   ?product= in pricing.html's head sets it), so everything here keys off it and is right at the first paint; the page's
   script then puts the DOM in the same order for the keyboard and screen readers. Tokens only, from system.css :root. */

/* a block written for one product shows only while that product is chosen (the hero lead, the comparison's lead, the credits head) */
html[data-product='dm'] [data-only='mod'], html:not([data-product='dm']) [data-only='dm'] { display: none !important; }

/* ── a plan card, on the lifetime page's pattern (Anant, 2026-10-08: "the call-to-action button on the top and on the bottom,
   and the list just kept growing as it was moving from left to right"): the trial button under the price, the plan's numbers in
   one boxed spec list (the same rows at the same height on every card), then everything the plan holds as one growing list in
   two quietly labelled runs, the visitor's product first, and the button again at the foot ── */
.plan .plan-buy-top { margin-top: var(--s-4); }
/* the spec box in three groups (PX, 2026-10-08; Anant: "comments a month can be a bit confusing because [it] is more about the
   moderation part ... people can misunderstand it"): the plan's one meter sits under its own "Comment moderation" caption, so it
   cannot be read as a cap on DM automation, whose rows say Unlimited under theirs; the rows both products share sit between them
   under "Workspace". The visitor's product leads (order here, the DOM by the page's sort script). Captions use the feature runs'
   grammar; a group is parted from the one above by a hairline the width of the box */
.plan-nums { --pn-pad: var(--s-4); margin: var(--s-4) 0 0; padding: 0; display: flex; flex-direction: column; border-radius: var(--r-md); background: var(--canvas); border: var(--hairline) solid var(--line-soft); }
.pn-g { order: 0; min-width: 0; padding: 0 var(--pn-pad) 2px; border-top: var(--hairline) solid var(--line); }
html:not([data-product='dm']) .pn-g[data-g='mod'], html[data-product='dm'] .pn-g[data-g='dm'] { order: -1; border-top: 0; }
html:not([data-product='dm']) .pn-g[data-g='dm'], html[data-product='dm'] .pn-g[data-g='mod'] { order: 1; }
.pn-h { margin: 0; padding: 12px 0 2px; font-size: 11.5px; font-weight: 600; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3c); }
[lang='ar'] .pn-h { letter-spacing: 0; text-transform: none; }
.pn-g dl { margin: 0; }
.pn-g dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); padding: 8px 0; border-top: var(--hairline) solid var(--line-soft); }
.pn-g dl > div:first-child { border-top: 0; }
.plan-nums dt { margin: 0; flex: none; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; font-size: var(--t-caption); color: var(--ink-2); }
.plan-nums dd { margin: 0; min-width: 0; text-align: end; font-size: var(--t-small); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); text-wrap: balance; }
.plan-nums .inc-eye { width: 20px; height: 20px; margin: -3px 0; }
.plan-nums .inc-eye .i { width: 13px; height: 13px; }
.plan-nums .pr-n { vertical-align: middle; }
/* the narrowest phones: a label never breaks (QF3: "Contacts and DMs" took two lines beside its value at 320px), so the card and
   the box give their side padding to the row instead */
@media (max-width: 380px) { .plan-nums { --pn-pad: var(--s-3); } }
@media (max-width: 340px) { .page-pricing .plan { padding-inline: var(--s-4); } .plan-nums { --pn-pad: var(--s-2); } }

/* ── the rail's rows are shared by every card (PX, 2026-10-08; QF3: a Support value on two lines made Pro's and Elite's boxes 22px
   taller, and a wrapped dollar line pushed Elite's button 23px down in the cheaper regions). Each card is a subgrid of the rail's
   twenty rows: name, who it is for, price, the dollar line, the period, the button, the spec box's three captions and nine rows, the feature runs, the
   button. A line that wraps on one card, in any language or currency, makes that row taller on all of them, so the buttons, the
   box and every spec row stay level. The card's 8px gap becomes margins (an empty dollar-line row must add nothing). Without
   subgrid the cards stay the flex columns they were ── */
@media (min-width: 1025px) { @supports (grid-template-rows: subgrid) {
  .page-pricing .plans[data-packs] { grid-template-rows: repeat(20, auto); row-gap: 0; }   /* one row of cards: the rail's own row gap would only open up around an empty row (the dollar line, when there is none) */
  .page-pricing .plans[data-packs] > .plan { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: 1 / span 20; gap: 0; align-content: start; }
  .page-pricing .plans[data-packs] > .plan > .plan-name { grid-row: 1; }
  .page-pricing .plans[data-packs] > .plan > .plan-for { grid-row: 2; margin-top: var(--s-2); }
  .page-pricing .plans[data-packs] > .plan > .plan-price { grid-row: 3; margin-top: calc(var(--s-3) + var(--s-2)); }
  .page-pricing .plans[data-packs] > .plan > .plan-fx { grid-row: 4; margin-top: var(--s-2); align-self: start; }
  .page-pricing .plans[data-packs] > .plan > .plan-sub { grid-row: 5; margin-top: var(--s-2); }
  .page-pricing .plans[data-packs] > .plan > .plan-buy-top { grid-row: 6; margin-top: calc(var(--s-4) + var(--s-2)); }
  .page-pricing .plans[data-packs] > .plan > .plan-nums { grid-row: 7 / span 12; margin-top: calc(var(--s-4) + var(--s-2)); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; }
  /* a group is its caption and its rows, each on a shared row: Workspace and DM automation have four rows, Comment moderation one */
  .page-pricing .plans[data-packs] .pn-g { grid-row: span 5; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; }
  .page-pricing .plans[data-packs] .pn-g[data-g='mod'] { grid-row: span 2; }
  .page-pricing .plans[data-packs] .pn-g dl { grid-row: span 4; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; }
  .page-pricing .plans[data-packs] .pn-g[data-g='mod'] dl { grid-row: span 1; }
  .page-pricing .plans[data-packs] > .plan > .pp-body { grid-row: 19; margin-top: var(--s-2); }
  .page-pricing .plans[data-packs] > .plan > .btn:not(.plan-buy-top) { grid-row: 20; margin-top: var(--s-2); align-self: end; }
} }
/* where the local figure is the price, the dollar line under it is the quiet one: the period line's size, so "$199 a month, charged
   in US dollars" and its note stay on one line in a rail card */
.page-pricing .plans.is-local .plan-fx { font-size: var(--t-caption); }

/* the rail's arrows sit at the head of the cards, just above the price, on the first screen also at 1280x800 with the country line
   showing: the rail is some 1,300px tall now and its middle is far below the fold (system.css reads this; the lifetime page sets
   nothing and keeps the middle) */
.page-pricing .plans-stage { --plans-arr-top: 112px; }

/* ── an explainer opened from the keyboard: the phone sheet's arrangement in the small card, the title at the head beside a Close
   that takes the focus ── */
.inc-pop.is-kbd:not([hidden]) { display: flex; flex-direction: column; }
.inc-pop.is-kbd .inc-pop-t { order: -1; margin-block: 2px 8px; margin-inline: 4px 36px; }
.inc-pop.is-kbd .inc-pop-x { display: grid; place-items: center; position: absolute; top: 5px; inset-inline-end: 5px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink-3); cursor: pointer; transition: color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease); }
.inc-pop.is-kbd .inc-pop-x:hover { color: var(--ink-2); background: var(--line-soft); }
.inc-pop.is-kbd .inc-pop-x:focus-visible { outline-offset: 0; }
.inc-pop.is-kbd .inc-pop-x .i { width: 15px; height: 15px; }
.inc-pop.is-kbd .inc-pop-a { align-self: flex-start; }

.pp-body { display: flex; flex-direction: column; margin: 0 0 var(--s-5, 20px); }
.pp-g { order: 0; min-width: 0; }
html:not([data-product='dm']) .pp-g[data-g='mod'], html[data-product='dm'] .pp-g[data-g='dm'] { order: -1; }
.pp-g .plan-inc { margin: 0; padding: 0; border-top: 0; }

/* the comparison's group heads keep the product's glyph on a small tile and the quiet "Also included" tag */
.pp-gh { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--s-3); font-size: 12.5px; font-weight: 600; line-height: 1.3; letter-spacing: 0.01em; color: var(--ink); }
.pp-ic { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); }
.pp-ic .i { width: 13px; height: 13px; }
.pp-gn { min-width: 0; }
.pp-also { flex: none; display: inline-flex; align-items: center; height: 18px; margin-inline-start: auto; padding-inline: 6px; border: var(--hairline) solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink-3c); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; white-space: nowrap; }
html:not([data-product='dm']) [data-g='mod'] .pp-also, html[data-product='dm'] [data-g='dm'] .pp-also { display: none; }
html:not([data-product='dm']) [data-g='dm'] .pp-ic, html[data-product='dm'] [data-g='mod'] .pp-ic { background: var(--line-soft); color: var(--ink-3c); }

/* a run's label: the product's name as a small caption (the lifetime card's "Included"), and on the other product the same
   caption says it is also included; no tile, no chip */
.plan .pp-gh { display: block; margin: var(--s-5, 20px) 0 var(--s-3); font-size: 11.5px; font-weight: 600; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3c); }
.plan .pp-ic { display: none; }
.plan .pp-also { display: inline; height: auto; margin: 0; padding: 0; border: 0; background: none; font-size: var(--t-caption); font-weight: 500; letter-spacing: 0; text-transform: lowercase; color: var(--ink-3c); }
.plan .pp-also::before { content: ' · '; }
/* Spanish and French: "Automatización de DM · también incluye" is wider than a plan card, and broke inside the name ("…DE / DM · también incluye"). The name keeps its line and the note takes the next, without the dot (LF, 2026-10-10) */
html:is([lang='es'], [lang='fr']) .plan .pp-gn { white-space: nowrap; }
html:is([lang='es'], [lang='fr']) .plan .pp-also { display: block; margin-top: 1px; }
html:is([lang='es'], [lang='fr']) .plan .pp-also::before { content: none; }
html:not([data-product='dm']) .plan [data-g='mod'] .pp-also, html[data-product='dm'] .plan [data-g='dm'] .pp-also { display: none; }

/* ── the comparison: one group per product, the visitor's first (the script moves the tbody), then the workspace ── */
.pr-cmp tr.pr-grp th .pp-gh { position: sticky; inset-inline-start: var(--s-4); display: inline-flex; margin: 0; font-size: inherit; letter-spacing: inherit; color: inherit; }
.pr-cmp tr.pr-grp th .pp-gh span { position: static; }
.pr-cmp tr.pr-grp th .pp-ic { width: 20px; height: 20px; }
.pr-cmp tr.pr-grp th .pp-ic .i { width: 12px; height: 12px; }
.pr-cmp tr.pr-grp th .pp-also { margin-inline-start: 4px; letter-spacing: 0.02em; }
.pr-cmp tr.pr-grp th .pp-gh:not(:has(.pp-ic)) { padding-inline-start: 0; }
.pr-mob .pr-acc-grp .pp-gh { margin: 0; font-size: inherit; letter-spacing: inherit; color: inherit; }
.pr-mob .pr-acc-grp .pp-also { margin-inline-start: 6px; }
.pr-cmp-note + .pr-cmp-note { margin-top: var(--s-2); }

/* ── the credits section: the visitor's meter first (the script sorts the DOM too) ── */
html:not([data-product='dm']) .cred-row[data-g='mod'], html[data-product='dm'] .cred-row[data-g='dm'] { order: -1; }
.cred-row[data-g='room'] { order: 1; }

/* the phone comparison's rows sit in one <dl> per group (H0, 2026-10-07): the list adds no box of its own, and the first row
   under a group heading keeps no rule above it (system.css's .pr-acc-grp + .pr-row, one level down) */
.pr-dl { margin: 0; }
@media (max-width: 720px) { .pr-acc-grp + .pr-dl > .pr-row:first-child { border-top: 0; } }

/* ── with DM automation chosen the regional packs are not shown, in any country (Anant, 2026-10-08: Mini and Lite hold only the
   7-day pass, "no point showcasing a pass"). The script keeps them [hidden]; this is the first paint's guarantee, and the
   comparison drops their two columns the same way (group rows span the table and stay). The phone comparison's tabs follow the
   cards. The country line then speaks of Starter, with one quiet link to the cheaper moderation plans ── */
html[data-product='dm'] .plan-pack { display: none !important; }
html[data-product='dm'] .pr-cmp tr > :is(:nth-child(2), :nth-child(3)):not([colspan]) { display: none; }
html[data-product='dm'] .pr-cmp thead th:nth-child(n + 4) { width: 18.5%; }   /* the group rows still span seven, so the fixed layout kept two empty columns on the right: the four plans take the whole 74% and those two get none */
html[data-product='dm'] .pr-cmp { min-width: 640px; }   /* four plans fit a tablet whole: the 880px floor is for six, and it pushed Elite off the side between 721 and 930px */
.geo-alt { display: block; width: fit-content; margin-top: 2px; font-size: var(--t-small); font-weight: 500; color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.geo-alt:hover { text-decoration-color: currentColor; }
.geo-alt[hidden] { display: none; }