/* ---------- the 3D phone ---------- */
.ph3{position:relative;width:100%;height:clamp(500px,74vh,700px)}
.ph3 canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .9s var(--e-std);cursor:grab;touch-action:pan-y;outline:0}
.ph3 canvas.grabbing{cursor:grabbing}
.ph3.on canvas{opacity:1}
.ph3-flat{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden}
.ph3.flat .ph3-flat{opacity:1;visibility:visible}
.ph3-flat img.ld{opacity:1}
.ph3.flat canvas{display:none}
.ph3-flat img{opacity:0;transition:opacity .35s var(--e-std);position:absolute;top:8%;left:50%;height:84%;width:auto;max-width:none;aspect-ratio:390/855;transform:translateX(-50%);border-radius:34px;background:var(--card);box-shadow:0 0 0 7px #0b0b0c,0 0 0 9px #8d8f94,0 30px 60px -30px rgba(17,17,17,.45)}
.ph3-credit{margin-top:14px;font:550 12px/1.4 var(--f);color:var(--ink3)}
.ph3-credit a{color:inherit}
@media (max-width:900px){.ph3{height:min(470px,58svh)}.ph3-flat img{border-radius:28px}}

/* secondary pages run a tighter section rhythm than the home */
:root{--sec:clamp(64px,11vh,112px);--pg-pane:#f4f4f6;--pg-sk:#e2e2e8;--pg-green:#13844f;--pg-green-s:#e3f5ec;--pg-blue:#3b74f0;--pg-x:rgba(17,17,17,.55);--pg-chip:#f2f2f5;--pg-chip-h:#e6e6ea;--pg-dim:rgba(17,17,17,.6);--pg-dim2:rgba(17,17,17,.64);--pg-row:#f6f6f8;--pg-row-h:#eeeef2;--pg-row-s:#f7f7f9;--pg-lil-s:#f2f2f4}
@media (max-width:900px){:root{--sec:72px}}

/* ---- page gutter = the header's (--pad: 20px on phones, ~55px on the 1290 laptop), so the H1 lines up with the logo ---- */
.wrap,.wrap-wide{width:min(var(--wrap),calc(100% - 2 * var(--pad)))}

/* ---- page top: H1 lands at nav bottom + breathing room ---- */
.pg-top{padding-top:var(--top)}
/* short laptop screens (1290x680): every marketing hero starts its H1 34px higher, at the home's 116px, so moving
   between nav pages never makes the heading jump (pages with cards tighten the cards themselves, not the top) */
@media (min-width:901px) and (max-height:760px){.pg-top{padding-top:calc(var(--top) - 34px)}}
@media (max-width:900px){
  .pg-top{transition:padding-top .35s var(--e-std)}
  html.kb .pg-top:focus-within{padding-top:calc(20px + env(safe-area-inset-top))}
}

/* ---- the home's type: heavy, tight, two-tone ---- */
.pg-h{max-width:none;text-wrap:balance}
/* the muted second line is drawn as ONE layer (ink at 42% opacity, like the home's .mute), so touching letters never
   print a darker join, and it sits .07em lower so line-1 descenders never cut into it */
.pg-h .ds-dim{display:block;color:var(--ink);opacity:.42;margin-top:.07em}
.pg-lead{margin-top:20px;max-width:42ch;font:560 clamp(17px,15.5px + .3vw,19px)/1.5 var(--f);letter-spacing:-.01em;color:var(--lead);text-wrap:pretty}
.pg-x{margin-top:18px;font:600 13.5px/1.45 var(--f);color:var(--pg-x);max-width:46ch}
.pg-facts{margin-top:16px;max-width:54ch;font:600 14.5px/1.5 var(--f);letter-spacing:-.005em;color:var(--pg-x);text-wrap:pretty}
.pg-facts a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.pg-label{font:800 12px/1.2 var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}

/* ---- cards, panes; a lit card (.on / .pg-glow) gets a 1px line, no colour glow (same as .evc / .cn on the home) ---- */
.pg-card{position:relative;border-radius:32px;background:var(--card);box-shadow:var(--sh);isolation:isolate;transition:box-shadow .9s var(--e-std)}
.pg-glow,.pg-card.on{box-shadow:0 0 0 1px var(--line2),var(--sh)}
.pg-pane{border-radius:24px;background:var(--pg-pane)}
.pg-sk{display:block;height:8px;border-radius:8px;background:var(--pg-sk)}
.pg-av{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:var(--mono);color:var(--on-mono);font:800 17px/1 var(--f)}
/* the small black "it happened" chip the home's minis use */
.pg-pop{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:999px;background:var(--ink);color:var(--on-ink);font:750 12px/1 var(--f);white-space:nowrap;box-shadow:0 10px 22px -10px rgba(17,17,17,.5);pointer-events:none}
.pg-pop svg{width:12px;height:12px}
.pg-pop.g{background:#13844f;color:#fff}

/* ---- handle field: the home's claim pill (filled, faint 1px line, grey prefix, bold handle, ink button) ---- */
.pg-claim{display:flex;align-items:center;gap:8px;width:min(560px,100%);height:68px;margin:0;padding:0 7px 0 24px;border-radius:999px;background:var(--fld);box-shadow:var(--fld-sh);text-align:left;transition:box-shadow .3s var(--e-std)}
.pg-claim:focus-within{box-shadow:var(--fld-sh-f)}
.pg-claim label{flex:1;min-width:0;display:flex;align-items:center;height:100%;font-size:19px;letter-spacing:-.03em;cursor:text}
.pg-pre{font-weight:500;color:var(--ink3);white-space:nowrap}
.pg-claim.tight .pg-pre-d{display:none}
.pg-claim.scr input{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px);mask-image:linear-gradient(90deg,transparent 0,#000 14px)}
.pg-claim input{flex:1;min-width:0;width:100%;height:100%;border:0;outline:0;background:none;color:var(--ink);font:800 1em/1 var(--f);letter-spacing:-.03em;padding:0;caret-color:var(--ink);text-overflow:ellipsis}
.pg-claim input:focus-visible{outline:0}
.pg-claim input::placeholder{color:var(--ink);opacity:.2}
.pg-claim button{flex:none;display:inline-flex;align-items:center;gap:8px;height:54px;padding:0 22px 0 24px;border:0;border-radius:999px;background:var(--ink);color:var(--on-ink);font:750 16.5px/1 var(--f);cursor:pointer;transition:transform .18s var(--e-std),background-color .2s}
.pg-claim button:active{transform:scale(.96)}
@media (hover:hover){.pg-claim button:hover{background:var(--ink-h)}}
.pg-claim-lg{width:min(820px,100%);height:92px;padding:0 10px 0 30px}
.pg-claim-lg label{font-size:clamp(22px,2.8vw,36px);letter-spacing:-.035em}
.pg-claim-lg button{height:72px;padding:0 28px 0 32px;font-size:19px;gap:10px}
@media (max-width:760px){
  /* phones: one row, like the home. The field, then a round button with the arrow (its word is still read aloud) */
  .pg-claim,.pg-claim-lg{flex-direction:row;align-items:center;height:60px;padding:0 6px 0 18px;border-radius:999px;gap:6px}
  .pg-claim label,.pg-claim-lg label{flex:1;height:100%;padding:0;font-size:clamp(17px,5vw,20px)}
  .pg-claim button,.pg-claim-lg button{flex:none;width:48px;height:48px;padding:0;justify-content:center;border-radius:50%;gap:0}
  .pg-claim button span,.pg-claim-lg button span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .pg-claim button svg,.pg-claim-lg button svg{width:21px;height:21px}
}
@media (pointer:coarse){.pg-claim input{font-size:max(16px,1em)}}

/* ---- accordion: big white rounded cards, round +/- that turns black when open ---- */
.pg-acc{display:grid;gap:12px}
.pg-q{border-radius:24px;background:var(--card);box-shadow:var(--sh)}
.pg-q > summary{padding:20px 20px 20px 26px;min-height:72px;font:750 clamp(17px,16px + .3vw,19.5px)/1.3 var(--f);letter-spacing:-.018em;border-radius:24px}
.pg-q > summary > span{text-wrap:pretty}
.pg-q .acc-i{width:34px;height:34px;background:var(--pg-chip)}
.pg-q .acc-i svg{display:block}
.pg-q[open]:not([data-acc]) .acc-i,.pg-q[data-acc=o] .acc-i{background:var(--ink);color:var(--on-ink)}
.pg-a p{padding:0 64px 24px 26px;color:var(--ink2);font:520 16.5px/1.55 var(--f);letter-spacing:-.006em;max-width:64ch}
.pg-a a{color:var(--ink);font-weight:750;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px;padding-block:11px}
@media (hover:hover){.pg-a a:hover{text-decoration-color:var(--ink)}.pg-q > summary:hover .acc-i{background:var(--pg-chip-h)}.pg-q[open] > summary:hover .acc-i{background:var(--ink-h)}}
@media (max-width:900px){.pg-q,.pg-q > summary{border-radius:22px}.pg-q > summary{padding:16px 14px 16px 20px;min-height:64px;font-size:17px}.pg-a p{padding:0 20px 20px;font-size:16px}}

/* ---- closing band: centred two-tone head, the big claim pill ---- */
.pg-band{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--sec) var(--pad) 0}
.ds-sec + .pg-band{padding-top:0}
.pg-band .ds-h2{margin:0 auto;max-width:14ch}
.pg-band-f{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;margin-top:clamp(28px,5vh,44px)}
.pg-band-m{font:650 15px/1.4 var(--f);color:var(--pg-x)}

/* ---- chip rows that scroll sideways on phones: soft edges ---- */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--pg-pane:var(--raised);--pg-sk:#3a3a3a;--pg-green:#3ecf8e;--pg-green-s:rgba(62,207,142,.14);--pg-blue:#7aa2ff;--pg-x:rgba(237,237,237,.58);
  --pg-chip:var(--raised);--pg-chip-h:var(--hover);--pg-dim:rgba(237,237,237,.6);--pg-dim2:rgba(237,237,237,.64);--pg-row:var(--raised);--pg-row-h:var(--hover);--pg-row-s:rgba(255,255,255,.03);--pg-lil-s:var(--raised);
  .pg-pop{box-shadow:0 10px 22px -10px rgba(0,0,0,.6)}}}:root[data-theme=dark]{--pg-pane:var(--raised);--pg-sk:#3a3a3a;--pg-green:#3ecf8e;--pg-green-s:rgba(62,207,142,.14);--pg-blue:#7aa2ff;--pg-x:rgba(237,237,237,.58);
  --pg-chip:var(--raised);--pg-chip-h:var(--hover);--pg-dim:rgba(237,237,237,.6);--pg-dim2:rgba(237,237,237,.64);--pg-row:var(--raised);--pg-row-h:var(--hover);--pg-row-s:rgba(255,255,255,.03);--pg-lil-s:var(--raised);
  .pg-pop{box-shadow:0 10px 22px -10px rgba(0,0,0,.6)}}
@media (max-width:900px){
  [data-fade]{--fl:0px;--fr:36px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent)}
}

/* ---- what the money buys: three plain blocks ---- */
.pr-does{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(24px,4vh,40px)}
.pr-do{padding:26px 24px 28px;border-radius:28px;text-align:left}
.pr-do{padding:12px 12px 28px}
.pr-do h3,.pr-do p{padding-inline:14px}
.pr-do h3{margin-top:22px;font:800 22px/1.15 var(--d);letter-spacing:-.035em}
.pr-do p{margin-top:8px;font:560 16px/1.5 var(--f);color:var(--ink2);text-wrap:pretty}
@media (max-width:900px){.pr-does{grid-template-columns:1fr;gap:12px}.pr-do{padding:10px 10px 24px}.pr-do h3,.pr-do p{padding-inline:12px}}

/* ---- the small pictures: grey bars, the three assistants' marks, one pill. They move a little, in a loop ---- */
.pa{position:relative;height:176px;border-radius:18px;background:var(--pg-pane);overflow:hidden}
.pa-bar{display:block;width:var(--w,100%);height:8px;border-radius:99px;background:var(--pa-bar)}
.pa-bar.pa-dim{background:var(--pa-bar2)}
.pa-lg{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:9px;background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.pa-lg svg{width:16px;height:16px}
.pa-lgs{display:flex;gap:6px}
.pa-pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px 0 8px;border-radius:99px;background:var(--ink);color:var(--on-ink);font:700 12.5px/1 var(--f);white-space:nowrap}
/* 1: a question, and an answer that ends on you. The three marks light up in turn. */
.pa-ai{display:flex;flex-direction:column;gap:10px;padding:16px 18px}
.pa-q{align-self:flex-end;padding:8px 12px;border-radius:14px 14px 4px 14px;background:var(--pa-bar);color:var(--ink);font:650 13px/1.2 var(--f)}
.pa-a{display:grid;justify-items:start;gap:9px;width:78%;padding:12px;border-radius:16px;background:var(--card);box-shadow:0 0 0 1px var(--line),0 14px 28px -20px rgba(17,17,17,.35)}
.pa-a .pa-lg{width:24px;height:24px;border-radius:8px;background:var(--pg-pane);box-shadow:none;animation:pa-turn 6s infinite both}
.pa-a .pa-lg svg{width:14px;height:14px}
.pa-a .pa-lg:nth-child(2){animation-delay:2s}.pa-a .pa-lg:nth-child(3){animation-delay:4s}
.pa-a .pa-pill{animation:pa-pop 6s infinite both}
@keyframes pa-turn{0%,28%{background:var(--ink);color:var(--on-ink)}36%,100%{background:var(--pg-pane);color:var(--ink)}}
@keyframes pa-pop{0%,4%{transform:scale(.94)}10%,100%{transform:none}}
/* 2: this week's guide arrives on top of the pile */
.pa-new{padding:16px 18px 0}
.pa-stack{display:grid;gap:10px;animation:pa-drop 7s var(--e-out) infinite both}
.pa-row{display:flex;align-items:center;gap:12px;height:56px;padding:0 12px 0 8px;border-radius:14px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.pa-row > span{flex:1;display:grid;gap:8px}
.pa-th{flex:none;width:40px;height:40px;border-radius:10px;background:var(--pa-bar2)}
.pa-badge{flex:none;padding:4px 8px;border-radius:99px;background:var(--pg-green-s);color:var(--pg-green);font:750 11.5px/1 var(--f);font-style:normal;animation:pa-badge 7s infinite both}
@keyframes pa-drop{0%,6%{transform:translateY(-66px)}16%,100%{transform:none}}
@keyframes pa-badge{0%,14%{opacity:0;transform:scale(.8)}22%,88%{opacity:1;transform:none}100%{opacity:0}}
/* 3: three buttons, a tap on each in turn */
.pa-tap{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,26px)}
.pa-btn{display:grid;justify-items:center;gap:9px;font:650 12.5px/1 var(--f);color:var(--ink2)}
.pa-btn b{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line);animation:pa-press 6s infinite both;animation-delay:calc(var(--k) * 2s)}
.pa-btn b::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--ink);opacity:0;animation:pa-ring 6s infinite both;animation-delay:calc(var(--k) * 2s)}
@keyframes pa-press{0%{transform:none}4%{transform:scale(.92);background:var(--ink);color:var(--on-ink)}16%{transform:none;background:var(--ink);color:var(--on-ink)}26%,100%{background:var(--card);color:var(--ink)}}
@keyframes pa-ring{0%,3%{opacity:0;transform:scale(1)}6%{opacity:.5}24%,100%{opacity:0;transform:scale(1.45)}}
@media (prefers-reduced-motion:reduce){.pa *,.pa *::after,.pw-fl{animation:none!important}}
:root{--pa-bar:#dedee4;--pa-bar2:#e9e9ee}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--pa-bar:#3a3a3e;--pa-bar2:#2c2c30;}}:root[data-theme=dark]{--pa-bar:#3a3a3e;--pa-bar2:#2c2c30;}

/* ---- beside the head (wide screens only): a question on the left, the answer on the right, both drifting slowly ---- */
.pw{position:relative}
.pw-art{pointer-events:none}
.pw-fl{position:absolute;top:8px;display:none;text-align:left;background:var(--card);box-shadow:0 0 0 1px var(--line),0 24px 44px -28px rgba(17,17,17,.4);animation:pw-drift 8s ease-in-out infinite alternate}
.pw-fl-q{right:calc(50% + 454px);top:214px;align-items:center;gap:9px;width:150px;padding:9px 13px 9px 9px;border-radius:16px 16px 16px 5px;font:650 13px/1.25 var(--f);color:var(--ink);transform:rotate(-3deg)}
.pw-fl-a{left:calc(50% + 454px);top:340px;justify-items:start;gap:9px;width:150px;padding:12px;border-radius:16px;transform:rotate(3deg);animation-delay:-4s}
.pw-fl-a .pa-lg{width:24px;height:24px;border-radius:8px;background:var(--pg-pane);box-shadow:none}
.pw-fl-a .pa-lg svg{width:14px;height:14px}
@keyframes pw-drift{from{translate:0 -5px}to{translate:0 5px}}
@media (min-width:1250px){.pw-fl-q{display:flex}.pw-fl-a{display:grid}}
/* phones: the three marks in a small row above the head */
.pw-row{display:none;gap:6px;margin-bottom:14px}
.pw-row .pa-lg{width:34px;height:34px;border-radius:11px}
.pw-row .pa-lg svg{width:19px;height:19px}

/* ---- paywall: centred head, two selectable cards, one CTA (labels and lists follow the checked radio) ---- */
.pw{text-align:center}
.pw-h{margin-inline:auto;font-size:clamp(40px,4.2vw,56px);line-height:1;letter-spacing:-.05em}
.pw-lead{margin:12px auto 0;max-width:62ch;text-wrap:balance;font-size:clamp(16.5px,15.5px + .3vw,19px)}
.pw-plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:860px;margin:34px auto 0;padding:0;border:0;min-width:0;text-align:left}
.pw-card{position:relative;display:flex;flex-direction:column;padding:22px 24px 24px;border-radius:26px;background:var(--card);
  box-shadow:0 0 0 1px var(--line),var(--sh);transition:box-shadow .2s var(--e-std)}
/* the label's ::after covers the whole card, so a tap anywhere picks the plan */
.pw-pick{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"r name price" "r line price";column-gap:14px;row-gap:3px;align-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pw-pick::after{content:"";position:absolute;inset:0;border-radius:inherit}
.pw-radio{grid-area:r;position:relative;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line2);transition:box-shadow .15s var(--e-std)}
.pw-radio::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--ink);transform:scale(0);transition:transform .18s var(--e-out)}
.pw-name{grid-area:name;display:flex;align-items:center;gap:8px;font:800 22px/1.1 var(--d);letter-spacing:-.035em}
.pw-badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:var(--fill);color:var(--ink);font:750 12px/1 var(--f);letter-spacing:.01em}
.pw-line{grid-area:line;font:550 14.5px/1.35 var(--f);color:var(--ink2)}
.pw-price{grid-area:price;display:flex;align-items:baseline;gap:2px;white-space:nowrap;align-self:start}
.pw-price b{font:800 34px/1 var(--d);letter-spacing:-.05em}
.pw-price small{font:700 14px/1 var(--f);color:var(--ink3)}
/* checked: an ink ring and a filled radio; the badge turns ink too */
.pw-card:has(input:checked){box-shadow:0 0 0 2px var(--ink),var(--sh)}
.pw-card:has(input:checked) .pw-radio{box-shadow:inset 0 0 0 2px var(--ink)}
.pw-card:has(input:checked) .pw-radio::after{transform:none}
.pw-card:has(input:checked) .pw-badge{background:var(--ink);color:var(--on-ink)}
.pw-card:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:4px}
@media (hover:hover){.pw-card:not(:has(input:checked)):hover{box-shadow:0 0 0 1px var(--line2),var(--sh)}}
.pw-inc{list-style:none;display:grid;gap:8px;margin:0;padding:0;font:600 15px/1.35 var(--f);letter-spacing:-.01em;text-align:left}
/* the row lets taps through to the card (it picks the plan); only the (i) takes them */
.pw-inc li{position:relative;display:flex;align-items:center;gap:10px;pointer-events:none}
.pw-tip{pointer-events:auto;flex:none;display:grid;place-items:center;width:28px;height:28px;margin:-4px 0 -4px -6px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink3);cursor:help;opacity:.5;transition:color .2s,opacity .2s}
.pw-tip.on,.pw-tip:focus-visible{opacity:1}
@media (hover:hover){.pw-card:hover .pw-tip{opacity:1}}
@media (hover:none){.pw-tip{opacity:.8}}
.pw-tip > span{position:absolute;z-index:6;left:30px;bottom:calc(100% + 4px);width:max-content;max-width:min(270px,calc(100% - 30px));padding:10px 12px;border-radius:12px;background:var(--ink);color:var(--on-ink);
  font:560 13px/1.42 var(--f);letter-spacing:0;text-align:left;box-shadow:0 14px 30px -14px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .16s,transform .16s,visibility .16s}
.pw-tip.on{color:var(--ink)}
.pw-tip.on > span,.pw-tip:focus-visible > span{opacity:1;visibility:visible;transform:none}
.pw-tip:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}
@media (hover:hover){.pw-tip:hover{color:var(--ink)}.pw-tip:hover > span{opacity:1;visibility:visible;transform:none}}
@media (pointer:coarse){.pw-tip{width:36px;height:36px;margin:-8px 0 -8px -8px}}
/* Basic: plain grey ticks. Pro: one soft line for what it shares with Basic, then green ticks on what it adds */
.pw-inc i{flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:0;border-radius:50%;color:var(--ink3)}
.pw-x-pro li:not(.pw-base) i{background:var(--pg-green-s);color:var(--pg-green)}
.pw-inc li.pw-base{margin:0 -10px 4px;padding:9px 10px;border-radius:12px;background:var(--pg-pane);color:var(--ink2)}
.pw-base i{color:var(--ink2)}
.pw-inc-card{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.pw-bar{max-width:420px;margin:24px auto 0}
.pw-go .btn{width:100%}
.pw-fine{margin-top:12px;font:550 13px/1.5 var(--f);color:var(--pg-dim2)}
.pw-links{white-space:nowrap}
.pw-links span{margin:0 6px}
.pw-fine a{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
@media (hover:hover){.pw-fine a:hover{text-decoration-color:var(--ink)}}
/* the CTA (and on phones the list) of the plan that is not checked hides; without :has() both stay, both work */
@supports selector(:has(*)){
  .pw:has(#pw-basic:checked) .pw-go-pro,.pw:has(#pw-pro:checked) .pw-go-basic{display:none}
}
/* short laptop screens (1290x680): head, both cards, the CTA and the fine print fit the first screen */
@media (min-width:701px) and (max-height:760px){.pw-fl-q{top:190px}.pw-fl-a{top:300px}.pw-plans{margin-top:24px}.pw-card{padding:18px 22px 20px}.pw-inc-card{margin-top:14px;padding-top:14px}.pw-inc{gap:6px}.pw-bar{margin-top:20px}}

/* ---- phones: the paywall. Stacked cards, the checked plan's list under them, CTA in a sticky bottom bar ---- */
@media (max-width:700px){
  .pr-top.pg-top{padding-top:calc(var(--nav-h) + 36px)}
  /* the first screen is the whole paywall, as in an app: head and plans on top, the CTA bar on the bottom edge */
  .pw{text-align:left;display:flex;flex-direction:column;min-height:calc(100svh - var(--nav-h) - 36px)}
  .pw-h{margin-inline:0;font-size:clamp(34px,9.6vw,42px)}
  .pw-lead{margin:8px 0 0;font-size:16.5px}
  .pw-plans{grid-template-columns:1fr;gap:10px;margin:22px 0 0;width:100%}
  .pw-card{padding:15px 16px;border-radius:20px}
  /* the tagline runs under name and price, so "Everything in Basic, plus growth tools." stays on one line */
  .pw-pick{column-gap:12px;row-gap:2px;grid-template-areas:"r name price" "r line line"}
  .pw-radio{align-self:center}
  .pw-name{font-size:18.5px}
  .pw-line{font-size:13.5px}
  .pw-price{align-self:end}
  .pw-price b{font-size:26px}
  .pw-price small{font-size:13px}
  /* the checked card opens its own list (grid rows 0fr -> 1fr); the other stays a one-line row */
  .pw-row{display:flex}
  .pw-more{display:grid;grid-template-rows:1fr}
  .pw-more > div{min-height:0}
  .pw-inc-card{margin-top:14px;padding-top:14px}
  .pw-inc{gap:10px;font-size:15.5px}
  .pw-plans{margin-bottom:18px}
  @supports selector(:has(*)){
    .pw-more{transition:grid-template-rows .32s var(--e-out)}
    .pw-card:not(:has(input:checked)) .pw-more{grid-template-rows:0fr}
    .pw-card:not(:has(input:checked)) .pw-more > div{overflow:hidden;visibility:hidden}
  }
  /* sticky at the end of the paywall: on the first screen it rides the bottom edge, then it parks under the list */
  .pw-bar{position:sticky;bottom:0;z-index:5;max-width:none;margin:auto calc(-1 * var(--pad)) 0;padding:12px var(--pad) max(12px,env(safe-area-inset-bottom));
    background:var(--paper);box-shadow:0 -1px 0 var(--line);text-align:center}
  .pw-go .btn{height:56px;font-size:17px}
  .pw-fine{margin-top:8px;font-size:12.5px;line-height:1.45}
}

/* ---- compare table: one card, the Pro column a quiet grey ---- */
.pr-cmp-go{display:none}
.pr-sent{display:block;height:1px;margin-bottom:-1px;pointer-events:none}
.pr-tbl-wrap{border-radius:28px;overflow:hidden;box-shadow:0 0 0 1px var(--line),var(--sh)}
.pr-tbl{width:100%;border-collapse:collapse;font:600 16px/1.4 var(--f);letter-spacing:-.01em}
.pr-tbl th,.pr-tbl td{padding:12px 28px;text-align:left;border-bottom:1px solid var(--pr-rule)}
.pr-tbl tbody th{font-weight:650}
.pr-tbl td{width:22%;text-align:center}
.pr-tbl td b{font-weight:750}
.pr-tbl thead td{border-bottom:0}
.pr-tbl thead th{padding:26px 24px 18px;text-align:center;font:800 22px/1 var(--d);letter-spacing:-.04em;width:22%;border-bottom:0}
.pr-tbl thead small{display:block;margin-top:8px;font:700 13.5px/1 var(--f);color:var(--ink3);letter-spacing:0}
.pr-tbl .pr-tp,.pr-tbl tr > :nth-child(3),.pr-tbl .pr-tg td{background:var(--pr-tp)}
.pr-tg > *{border-bottom:0}
.pr-vs{display:none}
.pr-tg th{padding:24px 28px 8px;font:800 12px/1.2 var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);background:var(--card)}
.pr-yes{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--pg-green-s);color:var(--pg-green)}
.pr-no{display:inline-block;width:14px;height:2px;border-radius:2px;background:var(--line2);vertical-align:middle}
.pr-tbl tbody:last-of-type tr:last-child > *{border-bottom:0}
.pr-tbl tfoot td{border-bottom:0;padding:18px 24px 24px}
.pr-tbl tfoot .btn{width:100%;max-width:200px;padding-inline:14px}
.pr-fn{margin-top:18px;font:600 13.5px/1.45 var(--f);color:var(--pg-dim2)}
.pr-note{display:block;margin-top:2px;font-size:13px;font-weight:550}

/* ---- questions before you pick: one centred column, head on top ---- */
.pr-bq{max-width:760px;margin-inline:auto}
.pr-bq-h{display:flex;align-items:last baseline;justify-content:space-between;gap:12px 24px;margin-bottom:clamp(22px,3.6vh,32px)}
.pr-bq-h .lnk{flex:none}

@media (max-width:900px){
  /* the label takes the room, Basic and Pro are two narrow centred columns (Pro a quiet grey) */
  .pr-tbl{font-size:15px}
  .pr-tbl th,.pr-tbl td{padding:13px 10px}
  .pr-tbl tbody th{padding-left:18px}
  .pr-tbl td{width:60px;padding-inline:0;text-align:center}
  .pr-tbl tr > td:last-child{width:64px;padding-right:6px}
  .pr-tbl thead th{width:60px;padding:18px 0 12px;font:800 16px/1 var(--d);letter-spacing:-.03em}
  .pr-tbl thead th:last-child{width:64px;padding-right:6px}
  .pr-tbl thead small{margin-top:6px;font-size:12px;color:var(--ink2)}
  .pr-vl{display:none}
  .pr-vs{display:flex;flex-direction:column;align-items:center;gap:3px}
  .pr-vs b{font:800 17px/1 var(--f)}
  .pr-vs small{font:650 12px/1 var(--f);color:var(--ink2);white-space:nowrap}
  .pr-yes{width:24px;height:24px}
  .pr-tg th{padding:20px 18px 6px}
  .pr-tbl tbody:first-of-type .pr-tg th{padding-top:6px}
  .pr-tbl-wrap{border-radius:22px;overflow:clip}
  /* a long table on a phone: the Basic / Pro header row stays pinned under the nav while its rows scroll by
     (overflow:clip, not hidden, so the card keeps its round corners without becoming the sticky's scroller) */
  .pr-tbl thead > tr > *{position:sticky;top:var(--nav-h);z-index:2;background:var(--card);box-shadow:0 1px 0 var(--pr-rule)}
  .pr-tbl thead > tr > .pr-tp{background:var(--pr-tp)}
  /* pinned: a hairline under the header row (drawn by a pseudo-element: Chrome paints a collapsed table cell's
     box-shadow under the rows that scroll by) */
  .pr-tbl thead > tr > *::after{content:"";position:absolute;left:0;right:0;top:100%;height:1px;pointer-events:none;opacity:0;transition:opacity .15s var(--e-std);background:var(--line)}
  .pr-tbl thead.is-stuck > tr > *::after{opacity:1}
  .pr-tbl tfoot{display:none}
  .pr-cmp-go{display:grid;gap:8px;margin-top:14px}
  .pr-cmp-go .btn{width:100%}
  .pr-bq-h{flex-direction:column;align-items:flex-start;gap:6px}
  /* one section gap (72px) between the table and the billing questions, not two */
  .pr-cmp{padding-bottom:0}
}
:root{--pr-rule:rgba(17,17,17,.06);--pr-tp:#f8f8f9}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--pr-rule:rgba(255,255,255,.07);--pr-tp:#242424;}}:root[data-theme=dark]{--pr-rule:rgba(255,255,255,.07);--pr-tp:#242424;}