/* ===========================================================================
   crestnotch.app, the shared shell. Stage 1 of the 2026-09-28 redesign.

   Every page loads this file. Pages also carry their own inline styles written
   against the TOKEN NAMES below (--bg, --t1, --hair, --amber ...), so the names
   are kept from every previous shell and only their values change: a page that
   was never opened during the redesign still flips to the new look.

   The language: paper (#f5f5f7) and white, black where the product is shown,
   and the app's own amber (DS.amber, #F5B041) for the one thing to press. The
   system face for everything (the self-hosted display face is retired), tight
   headings, one idea per screen. Motion belongs to the product only: no
   reveals, no word-by-word headlines, no drifting glows.
   =========================================================================== */
:root{
  /* grounds */
  --bg:#F5F5F7; --bg2:#FFFFFF; --bg3:#E8E8ED;
  --panel:#FFFFFF; --inset:#ECECF0;
  --notch:#000000; --black:#000000;
  /* ink ladder + hairlines */
  --hair:rgba(29,29,31,.14); --hair2:rgba(29,29,31,.08); --hair3:rgba(29,29,31,.22);
  --t1:#1D1D1F; --t2:#424245; --t3:#6E6E73;
  --fill:rgba(29,29,31,.04); --fill2:rgba(29,29,31,.08);
  /* on-black ladder */
  --onb1:#F5F5F7; --onb2:#A1A1A6; --onb3:#86868B;
  --onb-hair:rgba(255,255,255,.1);
  /* accents. --amber is the app's colour (DS.amber); on paper it is a fill or a
     mark, never small text: text that wants the warmth uses --link. */
  --amber:#F5B041; --amber-live:#F5B041; --amber-ink:#1D1D1F; --amber-hi:#FFC05A; --link:#9A5600;
  --green:#1D7A3E; --red:#C5372B;
  --cob:#2563EB; --sage:#0F8B8B; --rec:#E0574A;
  --accent:var(--amber); --accent-ink:var(--amber-ink);
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --maxw:1180px; --wide:1320px; --r:18px; --reading:800px; --narrow:620px;
  --spring:cubic-bezier(.32,1.18,.36,1);
  --enter:cubic-bezier(.22,.8,.3,1); --reveal:cubic-bezier(.16,1,.3,1); --ease:cubic-bezier(.2,.8,.2,1);
  --hdr:52px;
}
[data-accent="cobalt"]{--accent:var(--cob);--accent-ink:#fff}
[data-accent="sage"]{--accent:var(--sage);--accent-ink:#fff}
[data-accent="amber"]{--accent:var(--amber);--accent-ink:var(--amber-ink)}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
/* the viewport clips sideways overflow; body stays overflow:visible so position:sticky sticks to the window */
html{scroll-behavior:smooth;background:var(--bg);overflow-x:hidden;-webkit-text-size-adjust:100%}
@supports (overflow-x:clip){html{overflow-x:clip}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--bg);color:var(--t2);font:17px/1.52 var(--text);letter-spacing:-.011em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:visible}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--amber-live);outline-offset:3px;border-radius:6px}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.wrap.wide{max-width:var(--wide)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:720px){.wrap{padding:0 20px}}

/* ------------------------------------------------------------ sections */
section{padding:110px 0;position:relative}
section.lift{background:var(--bg2)}
section.sunk{background:var(--bg3)}
section.tight{padding:84px 0}
section.center{text-align:center}
/* the header is fixed, so the first section on every page starts below it (after the modifiers, so it wins) */
section:first-of-type{padding-top:calc(var(--hdr) + 84px)}
main > .wrap:first-child{padding-top:calc(var(--hdr) + 84px)}
/* ...except the comparison and guide pages, whose own inline `main{padding:126px 0}` already
   clears the header: the two stacked into 266px of blank page above the headline, and pushed the
   try-or-buy box off the first screen (measured 2026-09-13) */
main > .wrap:first-child:has(> article.article){padding-top:0}
@media(max-width:700px){section{padding:72px 0}section.tight{padding:56px 0}section:first-of-type{padding-top:calc(var(--hdr) + 48px)}}
section.closer-black{background:var(--black);color:var(--onb2)}
section.closer-black h1,section.closer-black h2,section.closer-black h3{color:var(--onb1)}
section.closer-black .lead,section.closer-black .sec-head p{color:var(--onb2)}
section.closer-black .eyebrow{color:var(--onb3)}
section.closer-black .fine{color:var(--onb3)}
section.closer-black .fine a{color:var(--onb2)}
section.closer-black .fine a:hover{color:var(--onb1)}
section.closer-black .btn-primary{background:var(--amber-live);color:var(--amber-ink)}
section.closer-black .btn-primary:hover{background:var(--amber-hi)}
section.closer-black .btn-ghost{border-color:rgba(255,255,255,.5);color:var(--onb1);background:transparent}
section.closer-black .btn-ghost:hover{background:var(--onb1);color:#000;border-color:var(--onb1)}

/* ---------------------------------------------------------------- type */
h1,h2,h3,h4{color:var(--t1);font-family:var(--display);font-weight:600;letter-spacing:-.022em;line-height:1.06;text-wrap:balance}
h1{font-size:clamp(40px,6vw,80px);letter-spacing:-.028em;line-height:1.04}
h2{font-size:clamp(30px,4.2vw,56px);letter-spacing:-.025em}
h3{font-family:var(--text);font-weight:600;letter-spacing:-.016em;font-size:21px;line-height:1.24}
h4{font-family:var(--text);font-weight:600;letter-spacing:-.01em;font-size:16px;line-height:1.3}
p{max-width:62ch}
.center p,.center .lead{margin-left:auto;margin-right:auto}
.muted{color:var(--t3)}.dim{color:var(--t3)}
.lead,.lede{font-size:clamp(19px,1.6vw,23px);line-height:1.42;letter-spacing:-.016em;font-weight:500;color:var(--t3);max-width:56ch}
.eyebrow{font:600 17px/1.2 var(--text);letter-spacing:-.016em;color:var(--t1);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:none}
.sec-head{display:grid;gap:18px;margin-bottom:56px;max-width:820px}
.sec-head p{color:var(--t2)}
.center .sec-head,.sec-head.center{margin-left:auto;margin-right:auto}
.fine{font-size:13.5px;color:var(--t3);line-height:1.6}
/* A customer's words next to the claim they back. reviews.js fills these from
   approved reviews only; an empty slot stays hidden (see [data-voice]). */
.voice{margin:34px 0 0;padding:22px 26px 20px;border-left:3px solid var(--accent);background:var(--bg2);border-radius:0 var(--r) var(--r) 0;max-width:640px}
.voice-q{font-family:var(--display);font-weight:500;font-size:21px;line-height:1.38;letter-spacing:-.012em;color:var(--t1);margin:0 0 12px;text-wrap:balance}
.voice-who{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:12.5px;color:var(--t3)}
.voice-who b{color:var(--t1);font-weight:600;font-size:13px}
.voice .rev-badge{font-family:var(--text);font-weight:600;font-size:10px;letter-spacing:.04em;color:var(--green);border:1px solid color-mix(in srgb,var(--green) 40%,transparent);border-radius:4px;padding:2px 6px}
@media(max-width:640px){.voice{padding:18px 20px 16px}.voice-q{font-size:18px}}
.fine a{color:var(--link);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair3)}
.fine a:hover{color:var(--t1)}
.textlink{color:var(--t1);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair3)}
.textlink:hover{text-decoration-color:var(--t1)}

/* ------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 24px;border-radius:999px;font-weight:500;font-size:17px;letter-spacing:-.012em;white-space:nowrap;border:1px solid transparent;cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--amber-live);color:var(--amber-ink)}
.btn-primary:hover{background:var(--amber-hi);color:var(--amber-ink)}
.btn-ghost,.btn-line{background:transparent;border-color:var(--t1);color:var(--t1)}
.btn-ghost:hover,.btn-line:hover{background:var(--t1);color:#fff}
.btn-lg{height:50px;padding:0 28px;font-size:17px}
/* phones: a smaller eyebrow and large buttons, so the first screen of a 375x553 phone still
   holds the price and both doors (Scripts/site_layout.test.mjs, /minutes) */
@media(max-width:700px){.eyebrow{font-size:15px}.btn-lg{height:46px;font-size:16px}}
.btn-sm{height:32px;padding:0 15px;font-size:13.5px}
.btn.full{width:100%}
.btn svg{width:16px;height:16px;flex:none}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:default;transform:none}
.btn .price{font-weight:500;opacity:.72;font-size:.92em;font-variant-numeric:tabular-nums}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:34px}
.center .cta-row{justify-content:center}

/* -------------------------------------------------------------- header
   A translucent paper bar, always (the 2026-09-28 redesign retired the notch
   that used to sit at the top centre, and with it the links folding away to
   keep out of its way). Over a black section the bar goes dark: a page sets
   html[data-hdr="dark"] (the home page's script does, section by section).
   The markup is unchanged since September: suite.js builds the phone menu from
   header nav .navlinks and swaps [data-signin] for "Your account". */
header{position:fixed;top:0;left:0;right:0;height:var(--hdr);z-index:60;background:rgba(245,245,247,.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px 0 var(--hair2);transition:background .3s,box-shadow .3s,color .3s}
header.scrolled{background:rgba(245,245,247,.86)}
header .wrap,header .wrap.wide{height:100%;max-width:var(--wide)}
nav{display:flex;align-items:center;justify-content:space-between;height:var(--hdr);gap:18px}
.brand{display:flex;align-items:center;gap:9px;font:600 19px/1 var(--display);letter-spacing:-.022em;color:var(--t1);flex:none;position:relative;z-index:1}
/* the brand's mark is the app's own icon */
.brand .mark{width:24px;height:24px;border-radius:6px;background:url("/crest-icon-128.png") center/cover no-repeat;border:0;position:relative;flex:none}
.brand .mark::after{content:none}
.navlinks{display:flex;align-items:center;gap:26px}
.navlinks a.link{font-size:13.5px;font-weight:400;letter-spacing:-.01em;color:var(--t1);opacity:.8;transition:opacity .2s;white-space:nowrap;padding:10px 0}
.navlinks a.link:hover,.navlinks a.link[aria-current="page"]{opacity:1}
.navlinks .btn{margin-left:4px}
.navlinks .nav-app .sq{display:none}
/* Without the notch in the middle the row has room: everything shows on a laptop,
   the brand link and Compare fold first, then the free door, then the app links;
   below 860px suite.js's own NAV_CSS folds the links into its sheet. */
@media(max-width:1180px){.navlinks .link.opt3{display:none}}
@media(max-width:1060px){.navlinks .link.opt4{display:none}}
@media(max-width:960px){.navlinks .link.opt{display:none}}
@media(max-width:900px){.navlinks .link.opt2{display:none}}
@media(max-width:1000px){.navlinks .btn .price{display:none}}
@media(max-width:600px){.has-navmenu .navlinks .btn{height:32px;padding:0 14px;font-size:13.5px}.has-navmenu .navlinks .btn .price{display:none}}
/* over a black section */
html[data-hdr="dark"] header{background:rgba(0,0,0,.72);box-shadow:0 1px 0 rgba(255,255,255,.08)}
html[data-hdr="dark"] header .brand,html[data-hdr="dark"] header .navlinks a.link{color:var(--onb1)}
html[data-hdr="dark"] .navmenu-btn{color:var(--onb1)}

/* ---------------------------------------------------------------- hero */
.hero{padding-top:calc(var(--hdr) + 96px);padding-bottom:64px}
.hero h1{max-width:14ch}
.hero.center h1{margin-left:auto;margin-right:auto}
.hero h1 em{font-style:normal;color:var(--t1);position:relative;white-space:nowrap}
.hero h1 em::after{content:none}
.hero .lead{margin-top:26px}
.hero.center .lead{margin-left:auto;margin-right:auto}
.hero .badge{margin-bottom:20px}
@media(max-width:700px){.hero{padding-top:calc(var(--hdr) + 56px)}}
/* the arrival sequence: eyebrow, headline, lead, buttons, fine print */
/* the arrival sequence is retired: content is simply there */
.js .seq,.js .loaded .seq{opacity:1;transform:none}

/* --------------------------------------------------- pictures + films */
/* screenshot grids: one frame shape per grid, whatever each capture's own ratio is.
   Tall captures crop to their top (cover); wide strips sit whole on black (contain). */
.shots3 .shot,.shots2 .shot{aspect-ratio:4/3;background:#0b0b0d;display:grid;place-items:center}
.shots3 .shot img,.shots2 .shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.shots3 .shot.wide img,.shots2 .shot.wide img{object-fit:contain;object-position:center}
.shot{border-radius:var(--r);overflow:hidden;background:#000;box-shadow:0 24px 60px -34px rgba(0,0,0,.35)}
.shot img{width:100%;height:auto}
.shot-cap{font-size:13.5px;color:var(--t3);margin-top:14px;line-height:1.6;max-width:70ch}
.shot-cap b{color:var(--t2);font-weight:600}
.showcase{margin-top:56px}
.showcase.bleed{max-width:var(--wide);margin-left:auto;margin-right:auto}
.film{border:0;border-radius:22px;overflow:hidden;background:#000;padding:0;box-shadow:0 40px 90px -40px rgba(0,0,0,.55);margin-top:34px;position:relative}
.film video{display:block;width:100%;height:auto;border-radius:0;transition:opacity .2s ease}
.film-play{position:absolute;inset:0;width:100%;height:100%;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;border:0;padding:0;background:transparent;cursor:pointer;font-family:inherit;-webkit-appearance:none;appearance:none;color:#fff}
.film-ring{width:76px;height:76px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .25s var(--ease),background .25s}
.film-play:hover .film-ring{transform:scale(1.08);background:rgba(255,255,255,.22)}
.film-play:active .film-ring{transform:scale(.98)}
.film-play:focus-visible{outline:none}
.film-play:focus-visible .film-ring{outline:2px solid var(--amber-live);outline-offset:4px}
.film-tri{width:0;height:0;margin-left:5px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.film-hint{font-size:13px;font-weight:600;color:rgba(255,255,255,.9);letter-spacing:.01em;text-shadow:0 1px 12px rgba(0,0,0,.85);min-height:18px}
.film-loading video{opacity:.6}
.film-loading .film-tri{display:none}
.film-loading .film-ring{position:relative}
.film-loading .film-ring::after{content:"";width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:filmspin .8s linear infinite}
@keyframes filmspin{to{transform:rotate(360deg)}}
.film-on .film-play,.film-failed .film-play{display:none}
.film-note{position:absolute;left:0;right:0;bottom:14px;z-index:3;margin:0;text-align:center;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.8);text-shadow:0 1px 12px rgba(0,0,0,.85);padding:0 16px}
.film-note[hidden]{display:none}
.film-failed .film-note{display:block}
.film-esc{color:#fff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* ------------------------------------------------------- bands + grids */
.band{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.band.flip .band-copy{order:2}
.band.flip .band-art{order:1}
.band + .band{margin-top:clamp(72px,9vw,120px)}
.band-copy h2{margin-bottom:16px}
.band-copy .lead{margin-top:0}
.checks{list-style:none;display:grid;gap:12px;margin-top:22px}
.checks li{display:flex;gap:12px;font-size:15.5px;color:var(--t2);line-height:1.5}
.checks li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:10px}
.checks li b{color:var(--t1);font-weight:600}
.grid{display:grid;gap:16px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.grid > *{background:var(--bg2);border:0;border-radius:var(--r);padding:28px 26px}
section.lift .grid > *{background:var(--bg)}
.card h3{margin-bottom:10px;font-size:18px}
.card p{font-size:15px;color:var(--t2);line-height:1.55}
.card .ico{width:36px;height:36px;border-radius:10px;background:var(--fill);display:grid;place-items:center;margin-bottom:16px;color:var(--t1)}
@media(max-width:940px){.band{grid-template-columns:1fr;gap:34px}.band.flip .band-copy,.band.flip .band-art{order:0}.grid.c3,.grid.c4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}}

/* -------------------------------------------------------------- tables */
.tblwrap{overflow-x:auto;border:0;border-radius:22px;background:var(--bg2)}
table.cmp{border-collapse:collapse;width:100%;min-width:720px;font-size:15px}
table.cmp th,table.cmp td{padding:16px 20px;text-align:left;vertical-align:top;border-top:1px solid var(--hair2)}
table.cmp thead th{border-top:0;font:600 13px/1.3 var(--text);letter-spacing:-.005em;color:var(--t3);padding-top:20px;padding-bottom:14px}
table.cmp thead th.us{color:var(--t1);background:rgba(245,176,65,.12)}
table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp td:first-child{font-weight:600;color:var(--t1);width:24%}
table.cmp td.us{color:var(--t1);background:rgba(245,176,65,.12);font-weight:500}
table.cmp .yes{color:var(--t1);font-weight:500}
table.cmp .no{color:var(--t3)}
table.cmp .part{color:var(--t2)}
.cmp-note{font-size:13.5px;color:var(--t3);margin-top:14px;line-height:1.6}

/* ------------------------------------------------------------- pricing */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.plans.plans-3{grid-template-columns:repeat(3,1fr)}
.plans.plans-2{grid-template-columns:repeat(2,1fr);max-width:820px}
@media(max-width:980px){.plans,.plans.plans-3{grid-template-columns:1fr 1fr}}
@media(max-width:580px){.plans,.plans.plans-3,.plans.plans-2{grid-template-columns:1fr}}
.plan{background:var(--bg2);border:0;border-radius:28px;padding:32px 30px 28px;display:flex;flex-direction:column;gap:16px;min-height:360px;position:relative}
section.lift .plan{background:var(--bg)}
/* the black card stays black inside a lift section: `section.lift .plan` (0,2,1) used to
   beat `.plan.hero-plan` (0,2,0) and set its white text on a light card (/crest, 2026-09-13) */
section.lift .plan.hero-plan{background:var(--black)}
.plan h3{display:flex;align-items:center;gap:10px;font-size:17px}
.plan h3 .sq{width:9px;height:9px;border-radius:50%;flex:none}
.plan .tag{position:absolute;top:24px;right:24px;font:600 12px/1 var(--text);letter-spacing:0;background:#FFF3DC;color:#7A4300;padding:6px 10px;border-radius:999px}
.plan .amt{font-family:var(--display);font-weight:600;font-size:50px;line-height:1;letter-spacing:-.034em;color:var(--t1);font-variant-numeric:tabular-nums}
.plan .amt small{font:500 16px/1 var(--text);letter-spacing:-.01em;margin-left:8px;color:var(--t3)}
.plan .desc{font-size:14.5px;color:var(--t2);line-height:1.5}
.plan .why{font-size:14.5px;color:var(--t2);line-height:1.5;flex:1}
.plan .why b{color:var(--t1);font-weight:600}
.plan .btn{width:100%}
.plan .owned{display:inline-block;margin-top:6px;font:600 13px/1 var(--text);color:var(--green)}
.tryline{text-align:center;font-size:13.5px;color:var(--t3)}
.tryline a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair3);color:var(--link)}
.tryline a:hover{color:var(--t1)}
.plan.hero-plan{background:var(--black);color:var(--onb2)}
.plan.hero-plan h3{color:var(--onb1)}
.plan.hero-plan .amt{color:var(--onb1)}
.plan.hero-plan .amt small{color:var(--onb3)}
.plan.hero-plan .desc,.plan.hero-plan .why{color:var(--onb2)}
.plan.hero-plan .why b{color:var(--onb1)}
.plan.hero-plan .tryline{color:var(--onb3)}
.plan.hero-plan .tryline a{color:var(--onb2);text-decoration-color:rgba(255,255,255,.3)}
.plan.hero-plan .owned{color:#5BD27C}
.plan.hero-plan .btn-primary{background:var(--amber-live);color:var(--amber-ink)}
.plan.hero-plan .btn-primary:hover{background:var(--amber-hi)}
.plan.hero-plan .btn-ghost{border-color:rgba(255,255,255,.5);color:var(--onb1)}
.plan.hero-plan .btn-ghost:hover{background:var(--onb1);color:#000;border-color:var(--onb1)}

/* ----------------------------------------------------------------- faq */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--hair)}
.faq details:last-child{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--t1);display:flex;justify-content:space-between;align-items:center;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:300 28px/1 var(--text);color:var(--t2);transition:transform .25s var(--ease);flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p,.faq .a{padding:0 0 26px;color:var(--t2);font-size:16.5px;max-width:64ch;line-height:1.6}

/* -------------------------------------------------- modals + forms */
.modal{position:fixed;inset:0;z-index:220;display:flex;align-items:center;justify-content:center;background:rgba(11,12,16,.55);padding:20px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal[hidden]{display:none}
.modal-card{width:min(92vw,440px);background:var(--bg2);border:1px solid var(--hair2);border-radius:22px;padding:30px 28px;position:relative;box-shadow:0 50px 100px -30px rgba(11,12,16,.5)}
.modal-card h3{margin:0 0 8px;font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.03em;color:var(--t1)}
.modal-card p{margin:0 0 16px;font-size:14px;line-height:1.6;color:var(--t2)}
.modal-x{position:absolute;top:10px;right:10px;background:none;border:none;color:var(--t3);font-size:26px;cursor:pointer;line-height:1;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.modal-x:hover{background:var(--fill);color:var(--t1)}
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;color:var(--t3);margin-bottom:6px;font-weight:550}
input[type=email],input[type=password],input[type=text],textarea{width:100%;background:var(--bg);border:1px solid var(--hair);border-radius:12px;padding:13px 14px;color:var(--t1);font:inherit;font-size:15px;margin:0 0 12px;outline:none;transition:border-color .16s,box-shadow .16s}
input:focus,textarea:focus{border-color:var(--t1);box-shadow:0 0 0 3px rgba(11,12,16,.06)}
textarea{min-height:120px;resize:vertical}
input.locked{color:var(--t3);background:var(--inset)}
input.locked:focus{border-color:var(--hair)}
.colink{background:none;border:0;color:var(--t2);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin:-4px 0 12px;padding:0}
.colink:hover{color:var(--t1)}
.err{display:block;color:var(--red);font-size:13px;min-height:18px;margin:0 0 10px}
.ok-note{color:var(--green);font-size:13.5px}
.hintline{font-size:12.5px;color:var(--t3);margin:12px 0 0;line-height:1.55}
/* Sign in with a provider: /account's pane and the checkout box's sign-in-first
   row (2026-09-15) draw the same buttons. A white Google button is the mark
   people scan for, so it is deliberately the brightest thing in the box. */
.oauthbtn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#fff;color:#1f1f1f;border:1px solid #dadce0;border-radius:10px;padding:11px 16px;font:600 14.5px/1 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;cursor:pointer;transition:box-shadow .16s,background .16s;margin-bottom:10px}
.oauthbtn:hover{background:#f7f8f8;box-shadow:0 1px 6px rgba(0,0,0,.28)}
.oauthbtn svg{flex:none}
.oauthbtn.apple{background:#000;color:#fff;border-color:#3a3a3c}
.oauthbtn.apple:hover{background:#151517}
.ordiv{display:flex;align-items:center;gap:12px;margin:16px 0 18px;font-size:11.5px;color:var(--t3);text-transform:uppercase;letter-spacing:.08em}
.ordiv::before,.ordiv::after{content:"";flex:1;height:1px;background:var(--hair2)}
/* The checkout box's sign-in-first row sits between the price line and the
   email field; its divider is tighter than /account's so the box stays short. */
#coSignIn .ordiv{margin:8px 0 14px}
#coSignIn .hintline{margin:0 0 10px}
/* "How did you hear about us?" on the thank-you box (2026-09-14): one quiet
   question under the download, seven one-tap answers, never in the way. */
.hear{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--hair2)}
.modal-card p.hear-q{margin:0 0 10px;font-size:13.5px;line-height:1.4;color:var(--t1);font-weight:600}
.hear-opts{display:flex;flex-wrap:wrap;gap:6px}
.hear-opt{border:1px solid var(--hair3);background:transparent;color:var(--t2);border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;line-height:1.3;min-height:34px;cursor:pointer;transition:border-color .16s,background .16s,color .16s}
.hear-opt:hover{border-color:var(--t1);color:var(--t1);background:var(--fill)}
.hear-opt[aria-pressed="true"]{border-color:var(--t1);color:var(--t1);background:var(--fill2)}
.hear-other{display:flex;gap:8px;align-items:center;margin-top:10px}
.hear-other input[type=text]{margin:0;padding:8px 12px;font-size:16px;flex:1 1 auto;min-width:0}
.hear-other .btn{flex:none}
.modal-card p.hear-done{margin:0;font-size:13.5px;color:var(--t2)}
.hear+.hintline{margin-top:18px}
/* The question makes the thank-you box taller than a short phone (iPhone SE with
   Safari's bars, 360px Androids, any phone on its side). .modal is fixed and
   centred, so the overflow went off BOTH edges with no scroll: the close button
   and heading above the top, the support line below the bottom. Measured in
   headless Chrome at 320x568 (card top -72px) and 844x390 (-41px). Here the box
   scrolls, and margin:auto centres the card when it fits and pins it to the top
   when it does not (auto margins never go negative, unlike align-items:center). */
#paidModal{overflow-y:auto;overscroll-behavior:contain}
#paidModal .modal-card{margin:auto}

/* -------------------------------------------------------------- footer
   A quiet paper directory under every page. Every link stays: they are how
   search engines walk from any page to the comparison and guide pages. */
footer{background:var(--bg);color:var(--t3);padding:34px 0 38px;font-size:12.5px;line-height:1.5;border-top:1px solid var(--hair2)}
footer .brand{color:var(--t1);font-size:16px}
footer .brand .mark{width:20px;height:20px;border-radius:5px}
.foot{display:grid;grid-template-columns:1.2fr 2fr;gap:40px;align-items:start}
.foot > div:first-child p{font-size:12.5px;color:var(--t3);line-height:1.6;margin-top:12px;max-width:280px}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.foot-cols.c4{grid-template-columns:repeat(4,1fr);gap:24px}
.foot:has(> .foot-cols.c4){grid-template-columns:1fr 2.7fr}
.foot-col{display:grid;gap:4px;align-content:start}
.foot-col b{font:600 12.5px/1.3 var(--text);letter-spacing:-.01em;color:var(--t1);margin-bottom:6px;display:block}
.foot-col a{color:#424245;padding:3px 0}
.foot-col a:hover{color:var(--t1);text-decoration:underline;text-underline-offset:3px}
.foot-tail{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:34px;padding-top:18px;border-top:1px solid var(--hair2);font-size:12px;color:var(--t3)}
footer p{color:var(--t3)}
.foot > div:first-child p.maker{margin-top:10px}
footer .maker a{color:var(--t1);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair3)}
footer .maker a:hover{text-decoration-color:var(--t1)}
section.closer-black + footer{border-top:0}
@media(max-width:860px){.foot,.foot:has(> .foot-cols.c4){grid-template-columns:1fr}.foot-cols,.foot-cols.c4{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-cols,.foot-cols.c4{grid-template-columns:1fr}.foot-col a{padding:7px 0}}

/* ------------------------------------------------ article pages (2026-09-28)
   The comparison and guide pages carry their own inline styles from their
   generators. Two of those read as the old look in the new shell, and are
   corrected here (stronger selectors, no page edited, not a word changed):
   the dateline was monospace capitals, and the listicle template gave the
   headline no room above its lede. */
html body p.updated{font-family:var(--text);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--t3)}
article > h1 + p.lede{margin-top:16px}

/* ------------------------------------------------------- try or buy
   The box under the opening paragraph of every comparison and guide page
   (written by Scripts/site_reskin_2026_09.py). Search readers are still
   deciding, and the first download button used to sit 1,800 to 4,900px down.
   Every rule is two classes deep so the pages' own inline `.article p` loses. */
/* a dated, factual note inside an article (NotchNook's site going dark, 2026-09-13) */
.updated-note{border-left:3px solid var(--amber);padding:2px 0 2px 14px;margin:18px 0}
.trybox{background:var(--panel);border:0;border-radius:var(--r);padding:20px 22px;margin:18px 0 6px}
.trybox p.trybox-lead{font-size:15px;line-height:1.55;color:var(--t2);margin:0;max-width:none}
.trybox p.trybox-lead b{color:var(--t1);font-weight:600}
.trybox p.trybox-facts{font-size:13px;line-height:1.55;color:var(--t3);margin:8px 0 0;max-width:none}
.trybox p.trybox-ctas{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.trybox p.trybox-ctas a.btn{text-decoration:none}
.trybox p.trybox-ctas a.btn-primary,.trybox p.trybox-ctas a.btn-primary:hover{color:var(--amber-ink)}
@media(max-width:480px){.trybox p.trybox-ctas .btn{flex:1 1 100%}}

/* ------------------------------------------------------------- reveals
   Retired on 2026-09-28: scroll reveals and word-by-word headlines read as a
   template. The classes stay in the markup (pages and scripts still add them)
   and simply do nothing. */
.js .rv,.js .rv.in,.js .rv.shot,.js .rv.shot.in,.js .rvg>*,.js .rvg.in>*{opacity:1;transform:none;transition:none}
.w i{display:inline;overflow:visible;padding:0;margin:0;font-style:normal}
.w i span,.js .w i span,.js .w.in i span{display:inline;transform:none;transition:none}

/* ---------------------------------------------------------- odds + ends */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:rgba(29,29,31,.94);color:#fff;padding:14px 18px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease);z-index:2147483000;max-width:min(92vw,520px);text-align:center;box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.badge{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--text);letter-spacing:-.005em;color:var(--t2);background:var(--bg2);border-radius:999px;padding:8px 13px}
.badge::before{content:none}
.rule{border:0;border-top:1px solid var(--hair);margin:48px 0}
.stack{display:grid;gap:16px}
.row{display:flex;gap:12px;align-items:center}
/* the drifting glow is retired */
.glow{display:none}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .seq,.js .rv,.js .rvg>*,.js .w i span{opacity:1;transform:none}
}

/* ---------------------------------------------------------------- reviews
   The wall and the write-a-review modal, on the hub, the product pages and
   /support. Class names match /reviews.js, which builds the nodes client-side
   when the server did not (functions/_lib/reviews.js renders them first). */
.rev-sum{font-size:13.5px;color:var(--t2);margin-bottom:18px}
.rev-sum b{color:var(--t1);font-weight:650;font-variant-numeric:tabular-nums}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.revs{grid-template-columns:1fr}}
.rev-card{border:0;border-radius:22px;padding:22px 20px;background:var(--panel);
  display:flex;flex-direction:column;gap:11px}
.rev-stars{color:var(--amber);font-size:13.5px;letter-spacing:2.5px}
.rev-body{font-size:14px;color:var(--t2);line-height:1.62;overflow-wrap:anywhere}
.rev-meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:12px;color:var(--t3);margin-top:auto}
.rev-meta b{color:var(--t1);font-weight:600;font-size:12.5px}
.rev-badge{font-family:var(--text);font-weight:600;font-size:10px;letter-spacing:.04em;color:var(--green);
  border:1px solid color-mix(in srgb,var(--green) 40%,transparent);border-radius:4px;padding:2px 6px}
.rev-empty{border:1px dashed var(--hair);text-align:center;align-items:center;
  grid-column:1/-1;padding:36px 26px}
.rev-empty .rev-body{color:var(--t3);max-width:46ch}
.rev-empty .rev-stars{color:var(--t3)}
.rev-pick{display:flex;gap:2px}
.rev-pick button{background:none;border:none;color:var(--hair3);font-size:26px;line-height:1;
  cursor:pointer;width:44px;height:44px;padding:0;display:flex;align-items:center;
  justify-content:center;transition:color .14s}
.rev-pick button.on{color:var(--amber)}

.rev-card.rev-ssr{}

/* App names and screenshots are links (Scripts/link_app_names.py, Clarity dead clicks 2026-09-18):
   the name keeps the heading's look and shows it is a link on hover; a screenshot says it zooms. */
.nm a,.app h2 a.applink{color:inherit;text-decoration:none}
.nm a:hover,.app h2 a.applink:hover{text-decoration:underline;text-underline-offset:3px}
a.shotlink{display:block;cursor:zoom-in}

/* THE EVERYTHING CARD ON A PRODUCT PAGE (2026-09-22). /take and /minutes sell
   the suite (Take and Minutes come with Crest, never alone): the card the hub
   sells, and beside it what the one payment buys, with the app the page is
   about first and marked "this page". Shared here so both pages are one shape. */
.plans.suite-plan{grid-template-columns:minmax(0,420px) minmax(0,1fr);max-width:980px;gap:40px;align-items:start;margin:0 auto}
.suite-plan .inside{padding-top:10px}
.suite-plan .inside h4{font-size:16px;font-weight:600;color:var(--t1);margin:0 0 14px}
.suite-plan .inside h4+h4,.suite-plan .inside .owner+h4{margin-top:26px}
.suite-plan .inside>ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.suite-plan .inside>ul>li{display:flex;gap:12px;align-items:flex-start}
.suite-plan .inside>ul>li>i{flex:none;width:9px;height:9px;border-radius:50%;margin-top:7px}
.suite-plan .inside>ul>li b{font-size:15px;color:var(--t1);font-weight:600}
.suite-plan .inside>ul>li p{margin:3px 0 0;font-size:14.5px;line-height:1.5;color:var(--t2)}
.suite-plan .inside .here{display:inline-block;margin-left:6px;font:600 11px/1 var(--text);letter-spacing:0;color:var(--t3);border:1px solid var(--hair3);border-radius:999px;padding:4px 7px;vertical-align:2px}
.suite-plan .inside .owner{margin:18px 0 0;padding:14px 16px;border:0;border-radius:16px;background:var(--bg2);font-size:14.5px;line-height:1.5;color:var(--t2)}
.suite-plan .inside .owner b{color:var(--t1);font-weight:600}
@media(max-width:860px){.plans.suite-plan{grid-template-columns:1fr}.suite-plan .inside{padding-top:0}}

/* the screenshot viewer (suite.js, 2026-09-25): a click on a.shotlink opens the
   image over the page instead of leaving it for the bare .jpg */
html.shotview-lock{overflow:hidden}
dialog.shotview{border:0;padding:56px 16px 20px;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;cursor:zoom-out;box-sizing:border-box}
dialog.shotview:not([open]){display:none}
dialog.shotview::backdrop{background:rgba(8,9,11,.92)}
.shotview-img{display:block;max-width:min(1440px,100%);max-height:calc(100vh - 140px);width:auto;height:auto;object-fit:contain;border-radius:10px;box-shadow:0 18px 60px rgba(0,0,0,.5)}
.shotview-cap{margin:0;max-width:720px;color:rgba(255,255,255,.78);font-size:14px;line-height:1.45;text-align:center}
.shotview-err{margin:0;color:#fff;font-size:15px;text-align:center}
.shotview-err a{color:#F5B454;text-decoration:underline;cursor:pointer}
.shotview-x{position:absolute;top:14px;right:16px;font-family:inherit;font-size:14px;font-weight:600;line-height:1;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:9px 14px;cursor:pointer}
.shotview-x:hover{background:rgba(255,255,255,.24)}
.shotview-x:focus-visible{outline:2px solid #F5B454;outline-offset:2px}

/* ---- Reviews, 2026-09-25: the quote is the headline. The words are the
   proof, so they read in the display face at a size you notice, with the
   reviewer's initial in an amber mark beside their name. */
.revs{gap:16px}
.rev-card{padding:26px 26px 22px;gap:18px}
.rev-card:not(.rev-empty) .rev-body{font-family:var(--display);font-weight:500;font-size:19px;line-height:1.42;letter-spacing:-.012em;color:var(--t1);text-wrap:pretty}
.rev-card:not(.rev-empty) .rev-body::before{content:"\201C"}
.rev-card:not(.rev-empty) .rev-body::after{content:"\201D"}
.rev-av{flex:none;width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;
  background:color-mix(in srgb,var(--amber) 20%,transparent);color:var(--amber-ink);font-weight:650;font-size:13px;line-height:1}
.rev-meta b{font-size:14px}
.rev-sum{font-size:15px}
.rev-sum b{font-size:20px}
.voice{border-left:0;border-radius:var(--r);background:var(--bg2);border:0;padding:26px 28px 22px}
.voice-who{gap:10px;font-size:13px}
.voice-who b{font-size:14px}
@media(max-width:640px){.voice{padding:18px 20px 16px}.rev-card{padding:22px 20px 18px}.rev-card:not(.rev-empty) .rev-body{font-size:17px}}
/* ---- the team card (2026-09-25, team seats): one wide card under the plan cards.
   The plan card's own anatomy (h3, .desc, .why, .amt, a full-width pill, .tryline),
   split in two columns: what a team gets on the left, the count and the buy on the
   right. The stepper is the site's pill in outline, the count in the label mono. */
.plan.team-plan{margin-top:16px;min-height:0;display:grid;grid-template-columns:1.05fr 1fr;gap:22px 44px;align-items:start}
.plans-2 + .plan.team-plan{max-width:820px}
.plan.team-plan:hover{transform:none;box-shadow:none}
.team-copy,.team-buy{display:flex;flex-direction:column;gap:14px;min-width:0}
.team-lbl{font:600 13px/1 var(--text);letter-spacing:-.005em;color:var(--t3)}
.stepper{display:inline-flex;align-items:center;align-self:flex-start;height:50px;border:1px solid var(--hair3);border-radius:999px;background:transparent;transition:border-color .16s}
.stepper:focus-within{border-color:var(--t1)}
.stepper .step-btn{width:48px;height:48px;border-radius:999px;display:flex;align-items:center;justify-content:center;font:400 22px/1 var(--text);color:var(--t1);transition:background .16s}
.stepper .step-btn:hover:not([disabled]){background:var(--fill)}
.stepper .step-btn[disabled]{color:var(--t3);opacity:.45;cursor:default}
.stepper input[type=text]{width:62px;height:48px;margin:0;padding:0;border:0;border-radius:0;background:transparent;text-align:center;font:600 20px/1 var(--text);font-variant-numeric:tabular-nums;color:var(--t1)}
.stepper input[type=text]:focus{border:0;box-shadow:none}
.team-price .amt{font-size:46px}
.team-line{margin-top:10px;font:500 14px/1.4 var(--text);color:var(--t2);font-variant-numeric:tabular-nums}
.team-next{margin-top:4px;font-size:13.5px;color:var(--t3)}
.plan.team-plan .err{margin:0;min-height:0}
.team-bump{margin:6px 0 0;font-size:13.5px;color:var(--t1);min-height:32px}
.team-price{transition:opacity .16s}
.plan.team-plan[data-invalid] .team-price{opacity:.35}
.plan.team-plan .err:empty{display:none}
@media(prefers-reduced-motion:reduce){.stepper,.stepper .step-btn{transition:none}}
@media(max-width:760px){.plan.team-plan{grid-template-columns:1fr;padding:24px 20px 22px}}