/* /pricing/ only. Shared components live in /styles.css; page rules are prefixed pr-. */

/* ---------- page head: the promise + every price, beside the $400 vs $2.99 ledger ---------- */
.pr-head-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:end; gap:56px clamp(40px, 6vw, 112px); }
.pr-head .h1{ max-width:13ch; }
.pr-strip{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:36px; padding-top:18px; border-top:1px solid var(--line-2); font-size:var(--t-small); color:var(--ink-2); }
.pr-strip li{ white-space:nowrap; }
.pr-fig{ font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--ink); }
.pr-head-note{ margin-top:18px; }

.pr-example{ margin:0; }
.pr-ledger{ margin:0; border-top:1px solid var(--line-2); }
.pr-ledger > div{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:8px 32px; padding:22px 0; border-bottom:1px solid var(--line); }
.pr-ledger dt{ color:var(--ink-2); font-size:var(--t-small); max-width:28ch; }
.pr-ledger dd{ margin:0; font-size:clamp(2.75rem, 1.9rem + 2.4vw, 4.25rem); text-align:right; white-space:nowrap; }
.pr-charge{ color:var(--new); }
.pr-example-cap{ margin-top:20px; color:var(--ink-2); font-size:var(--t-small); max-width:46ch; }
.pr-ledger-note{ margin-top:12px; }

/* ---------- free vs paid, beside one phone ---------- */
.pr-split{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); align-items:start; gap:clamp(40px, 6vw, 112px); }
.pr-main{ max-width:720px; }
.pr-main .head{ margin-bottom:56px; }
.pr-device{ position:sticky; top:112px; justify-self:center; max-width:320px; }
.pr-list-title{ margin-bottom:20px; }
.pr-rows + .pr-list-title{ margin-top:56px; }
.pr-rows > div{ grid-template-columns:minmax(0,.8fr) minmax(0,2fr); padding:18px 0; }
.pr-rows dd{ font-size:var(--t-small); }
/* "Coming next" beside an item that isn't built yet (co-sign): hollow dot, never sold as live. */
.pr-next{ display:inline-flex; align-items:center; gap:8px; margin-left:12px; font-size:var(--t-micro); font-weight:500; color:var(--ink-3); white-space:nowrap; vertical-align:baseline; }
.pr-rows .pr-next{ display:flex; width:max-content; margin:8px 0 0; }

/* ---------- plans: one group per handoff, each plan a row ---------- */
.pr-group{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:24px clamp(32px, 5vw, 96px); padding-top:32px; border-top:1px solid var(--line-2); }
.pr-group + .pr-group{ margin-top:72px; }
.pr-group-head h3{ display:flex; align-items:center; gap:12px; }
.pr-group-head .i{ width:22px; height:22px; color:var(--ink-2); }
.pr-group-head p{ margin-top:10px; max-width:34ch; color:var(--ink-3); font-size:var(--t-small); }
.pr-plans{ list-style:none; }
.pr-plans > li{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:20px 40px; }
.pr-plans > li + li{ margin-top:32px; padding-top:32px; border-top:1px solid var(--line); }
.pr-plan-price .big-num{ margin-top:14px; font-size:clamp(2.75rem, 1.9rem + 2.4vw, 4.25rem); white-space:nowrap; }
.pr-plan-price .label{ margin-top:12px; }
.pr-price-text{ margin-top:14px; font:600 clamp(1.5rem, 1.2rem + .9vw, 2rem)/1.1 var(--font-display); letter-spacing:-.03em; color:var(--ink-3); }
.pr-later .h4, .pr-later .pr-plan-body p{ color:var(--ink-3); }
.pr-plan-body > p{ color:var(--ink-2); max-width:40ch; padding-top:2px; }
.pr-facts{ list-style:none; margin-top:18px; border-top:1px solid var(--line); }
.pr-facts li{ padding:10px 0; border-bottom:1px solid var(--line); font-size:var(--t-small); color:var(--ink-2); }

/* ---------- comparison table (+ a plan switch on phones, see js/pricing.js) ---------- */
.pr-matrix{ min-width:760px; }
table.data.pr-matrix thead th{ font:600 var(--t-small)/1.35 var(--font); letter-spacing:-.006em; text-transform:none; color:var(--ink); }
.pr-matrix tbody th{ padding:18px 16px 18px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font:600 var(--t-small)/1.55 var(--font); letter-spacing:-.006em; text-transform:none; color:var(--ink); white-space:nowrap; }
.pr-matrix th:first-child{ position:sticky; left:0; z-index:1; background:var(--bg); }
.pr-m-price td{ font-family:var(--mono); font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.pr-m-price .sub{ font-family:var(--font); font-weight:400; }
.pr-matrix .pr-n{ color:var(--ink-4); }
.pr-table-wrap:focus-visible{ outline-offset:6px; }
.pr-table-note{ margin-top:20px; }

.pr-switch{ display:none; }
.pr-switch button{ flex:1 1 0; min-height:44px; padding:0 6px; border:0; border-radius:999px; background:none; color:var(--ink-2); font:600 var(--t-micro)/1.1 var(--font); letter-spacing:-.006em; cursor:pointer; transition:background-color .15s, color .15s; }
.pr-switch button[aria-pressed="true"]{ background:var(--card-2); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); }

/* ---------- FAQ ---------- */
.pr-faq{ display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:40px clamp(40px, 6vw, 112px); align-items:start; }
.pr-faq > .h2{ position:sticky; top:120px; }
.pr-more{ margin-top:32px; color:var(--ink-3); font-size:var(--t-small); }
.pr-more a{ color:var(--ink); }

/* ---------- closing: the next step ---------- */
.pr-close{ padding-block:clamp(56px, 2rem + 4vw, 112px); }
.pr-close-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px 48px; }
.pr-close-line{ font:600 var(--t-h3)/1.3 var(--font-display); letter-spacing:-.022em; max-width:30ch; }
.pr-close-cta{ display:grid; gap:12px; justify-items:start; }

/* ---------- responsive ---------- */
@media (max-width: 1020px){
  .pr-head-grid{ grid-template-columns:minmax(0,1fr); }
  .pr-example{ max-width:560px; }
  .pr-group{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 860px){
  .pr-split, .pr-faq{ grid-template-columns:minmax(0,1fr); }
  .pr-faq > .h2{ position:static; }
  .pr-split{ gap:56px; }
  .pr-device{ position:static; max-width:240px; }
  .pr-rows > div{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 560px){
  .pr-strip{ margin-top:28px; gap:8px 20px; }
  .pr-plans > li{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .pr-group + .pr-group{ margin-top:56px; }
  .pr-ledger > div{ padding:18px 0; }
  .pr-ledger dd{ font-size:2.5rem; }
  .pr-close-cta, .pr-close-cta .btn{ width:100%; }
}
/* Comparison table. Up to 720px the six columns can't sit side by side, so phones and small tablets get the
   plan switch (with JS) or a scrolling table with a fade cue (without). From 721px to 860px the table fits
   by letting cells wrap; above that it has room as is. */
@media (min-width: 721px) and (max-width: 860px){
  .pr-matrix{ min-width:0; table-layout:fixed; }
  .pr-matrix th:first-child{ width:17%; }
  .pr-matrix tbody th{ white-space:normal; }
  .pr-matrix :is(th, td){ padding-right:12px; }
  .pr-m-price td{ white-space:normal; }
}
@media (max-width: 720px){
  /* Without JS: the full table scrolls, row labels stay put, and the right edge fades as a scroll cue. */
  .pr-matrix{ min-width:640px; }
  .pr-matrix tbody th{ min-width:104px; white-space:normal; }
  .pr-table-wrap{ -webkit-mask-image:linear-gradient(90deg, #000 82%, transparent); mask-image:linear-gradient(90deg, #000 82%, transparent); }

  /* With JS: a plan switch above a three-column table (row label | Free | the chosen plan). */
  .js .pr-switch{ position:relative; isolation:isolate; display:flex; gap:2px; margin-bottom:20px; padding:3px; border-radius:999px; background:var(--card); box-shadow:inset 0 0 0 1px var(--line); }
  /* One thumb slides under the chosen plan, like a segmented control, instead of the fill jumping between
     buttons. Four equal buttons: each step is the thumb's own width plus the 2px gap. */
  .js .pr-switch::before{ content:""; position:absolute; z-index:-1; top:3px; bottom:3px; left:3px; width:calc((100% - 12px) / 4); border-radius:999px; background:var(--card-2); box-shadow:inset 0 0 0 1px var(--line-2); }
  .js .pr-cmp[data-col="4"] .pr-switch::before{ transform:translateX(calc(100% + 2px)); }
  .js .pr-cmp[data-col="5"] .pr-switch::before{ transform:translateX(calc(200% + 4px)); }
  .js .pr-cmp[data-col="6"] .pr-switch::before{ transform:translateX(calc(300% + 6px)); }
  .js .pr-switch button[aria-pressed="true"]{ background:none; box-shadow:none; }
  .js .pr-cmp .pr-table-wrap{ overflow:visible; -webkit-mask-image:none; mask-image:none; }
  .js .pr-cmp .pr-matrix{ min-width:0; table-layout:fixed; }
  .js .pr-cmp .pr-matrix th:first-child{ position:static; width:31%; }
  .js .pr-cmp .pr-matrix tbody th{ min-width:0; }
  .js .pr-cmp .pr-matrix :is(th, td){ padding-right:12px; }
  .js .pr-cmp .pr-m-price td{ white-space:normal; }
  .js .pr-cmp[data-col="3"] .pr-matrix tr > :is(:nth-child(4), :nth-child(5), :nth-child(6)),
  .js .pr-cmp[data-col="4"] .pr-matrix tr > :is(:nth-child(3), :nth-child(5), :nth-child(6)),
  .js .pr-cmp[data-col="5"] .pr-matrix tr > :is(:nth-child(3), :nth-child(4), :nth-child(6)),
  .js .pr-cmp[data-col="6"] .pr-matrix tr > :is(:nth-child(3), :nth-child(4), :nth-child(5)){ display:none; }
}
/* The thumb glides (a transition, so quick taps retarget); the chosen plan's column fades in as it appears. */
@media (max-width: 720px) and (prefers-reduced-motion: no-preference){
  .js .pr-switch::before{ transition:transform .24s var(--ease-out); }
  .js .pr-cmp .pr-matrix tr > :nth-child(n+3){ transition:opacity .18s var(--ease-out); }
  @starting-style{
    .js .pr-cmp .pr-matrix tr > :nth-child(n+3){ opacity:0; }
  }
}
@media (hover: hover) and (pointer: fine){
  .pr-switch button[aria-pressed="false"]:hover{ color:var(--ink); }
}