/* ===========================================================================
   crestnotch.app, the shared shell. September 2026 redesign ("Look up").

   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 the previous shell and only their values changed: a page that
   was never opened during the redesign still flips to the new palette.

   The language: an aluminium ground (#F1F2F4), white bands, black product
   surfaces, and amber only where the product itself speaks. Bricolage Grotesque
   for display type (self-hosted in /fonts), the system face for reading, a
   monospace for labels and numbers. Buttons are pills; primary is black.
   =========================================================================== */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;
  src:url("/fonts/bricolage-v9-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;
  src:url("/fonts/bricolage-v9-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* grounds */
  --bg:#F1F2F4; --bg2:#FFFFFF; --bg3:#E4E6EA;
  --panel:#FFFFFF; --inset:#E9EBEE;
  --notch:#000000; --black:#0D0D10;
  /* ink ladder + hairlines */
  --hair:rgba(11,12,16,.12); --hair2:rgba(11,12,16,.08); --hair3:rgba(11,12,16,.2);
  --t1:#0B0C10; --t2:rgba(11,12,16,.66); --t3:rgba(11,12,16,.46);
  --fill:rgba(11,12,16,.04); --fill2:rgba(11,12,16,.08);
  /* on-black ladder */
  --onb1:rgba(243,243,245,.96); --onb2:rgba(243,243,245,.64); --onb3:rgba(243,243,245,.4);
  --onb-hair:rgba(255,255,255,.09);
  /* accents. --amber is the product's colour; on the light ground it is used as
     a fill or a mark, never as small text. --amber-live is the exact app value. */
  --amber:#E09A00; --amber-live:#FFB000; --amber-ink:#0B0C10;
  --green:#1D7A3E; --red:#C5372B;
  --cob:#2563EB; --sage:#0F8B8B; --rec:#E0574A;
  --accent:var(--amber); --accent-ink:var(--amber-ink);
  --display:"Bricolage Grotesque",-apple-system,"SF Pro Display","Helvetica Neue",sans-serif;
  --text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --maxw:1180px; --wide:1320px; --r:14px; --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:56px;
}
[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.55 var(--text);-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:#000}
section.closer-black .btn-primary:hover{background:#FFBB22}
section.closer-black .btn-ghost{border-color:rgba(255,255,255,.24);color:var(--onb1);background:transparent}
section.closer-black .btn-ghost:hover{border-color:rgba(255,255,255,.6)}
section.closer-black + footer{border-top:1px solid var(--onb-hair)}

/* ---------------------------------------------------------------- type */
h1,h2,h3,h4{color:var(--t1);font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:.98;text-wrap:balance;font-variation-settings:"opsz" 96}
h1{font-size:clamp(42px,6.4vw,88px);font-weight:800;letter-spacing:-.045em}
h2{font-size:clamp(32px,4.4vw,56px)}
h3{font-family:var(--text);font-weight:600;letter-spacing:-.012em;font-size:20px;line-height:1.25}
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(18px,1.5vw,21px);line-height:1.5;color:var(--t2);max-width:56ch}
.eyebrow{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--t3);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex: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(--mono);font-size:9.5px;letter-spacing:.1em;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(--t2);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:10px;height:50px;padding:0 22px;border-radius:999px;font-weight:600;font-size:15.5px;letter-spacing:-.005em;white-space:nowrap;border:1px solid transparent;cursor:pointer;transition:transform .16s var(--ease),background .16s,border-color .16s,box-shadow .16s;will-change:transform}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--t1);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.12) inset}
.btn-primary:hover{background:#000;color:#fff}
.btn-ghost,.btn-line{background:transparent;border-color:var(--hair3);color:var(--t1)}
.btn-ghost:hover,.btn-line:hover{border-color:var(--t1);background:var(--fill)}
.btn-lg{height:54px;padding:0 26px;font-size:16px}
.btn-sm{height:40px;padding:0 16px;font-size:14px}
.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-family:var(--mono);font-weight:500;opacity:.72;font-size:13.5px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:34px}
.center .cta-row{justify-content:center}

/* -------------------------------------------------------------- header
   Fixed, transparent over the page, frosted once you scroll. The notch (the
   live app) is mounted by /notch.js at the top centre, so the links keep out
   of the middle: the optional ones fold away first, then suite.js's menu
   sheet takes over below 860px. */
header{position:fixed;top:0;left:0;right:0;height:var(--hdr);z-index:60;background:transparent;transition:background .25s,box-shadow .25s}
header.scrolled{background:rgba(241,242,244,.84);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--hair2)}
/* the header runs the full width: the links must clear the notch at the centre, and a capped
   wrap would park them under it on every wide screen */
header .wrap,header .wrap.wide{height:100%;max-width:none}
nav{display:flex;align-items:center;justify-content:space-between;height:var(--hdr);gap:18px}
.brand{display:flex;align-items:center;gap:9px;font:800 21px/1 var(--display);letter-spacing:-.03em;color:var(--t1);flex:none;position:relative;z-index:1}
.brand .mark{width:16px;height:7px;border-radius:0 0 5px 5px;background:var(--notch);border:0;position:relative}
.brand .mark::after{content:none}
.navlinks{display:flex;align-items:center;gap:24px}
.navlinks a.link{font-size:14.5px;font-weight:500;color:var(--t2);transition:color .2s;white-space:nowrap;padding:10px 0}
.navlinks a.link:hover,.navlinks a.link[aria-current="page"]{color:var(--t1)}
.navlinks .btn{margin-left:4px}
.navlinks .nav-app .sq{display:none}
/* Take and Minutes stay in the header down to a 13-inch laptop; the brand link and Compare fold first */
/* opt4 is the free door, "Download free" (2026-09-13): it needs about 150px beside the
   notch, so it arrives at 1420px, and Crest and Compare wait until 1720px to make room for it.
   Scripts/site_layout.test.mjs measures the gap to the notch at every width. */
/* 2026-09-15: with every link shown, the row on /crest started 1px past the notch at
   1740; the two optional links wait until there is real room. */
@media(max-width:1790px){.navlinks .link.opt3{display:none}}
/* 2026-09-15: at 1440 (the MacBook Air) the closed notch (610 to 830px) sat on the
   first nav link; without "Download free" the row starts past it. The hero has
   the same button. */
@media(max-width:1500px){.navlinks .link.opt4{display:none}}
@media(max-width:1216px){.navlinks .link.opt{display:none}}
@media(max-width:1080px){.navlinks .link.opt2{display:none}}
@media(max-width:1000px){.navlinks .btn .price{display:none}}
/* suite.js's own NAV_CSS folds the links into a sheet below 860px; nothing to add here */
@media(max-width:600px){.has-navmenu .navlinks .btn{height:36px;padding:0 14px;font-size:13.5px}.has-navmenu .navlinks .btn .price{display:none}}
/* the hub hides its links while the hero panel is open; they arrive when it docks */
html.hub header .navlinks .link{opacity:0;pointer-events:none;transition:opacity .3s}
html.hub.docked header .navlinks .link{opacity:1;pointer-events:auto}
/* Sign in sits outside the hero stage, and somebody who came back for their
   download must find it on the first screen (2026-09-15 audit). */
html.hub header .navlinks .link[href="/account"]{opacity:1;pointer-events:auto}
.js html.hub header .cta,html.hub.js header .cta{opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .35s,transform .35s var(--ease)}
html.hub.past header .cta{opacity:1;transform:none;pointer-events:auto}

/* ---------------------------------------------------------------- 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:"";position:absolute;left:0;right:0;bottom:.02em;height:.08em;background:var(--accent);border-radius:2px;transform-origin:left;transform:scaleX(0);transition:transform .9s var(--reveal) .5s}
.js .loaded .hero h1 em::after{transform:scaleX(1)}
.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 */
.js .seq{opacity:0;transform:translateY(16px)}
.js .loaded .seq{opacity:1;transform:none;transition:opacity .8s var(--reveal),transform .9s var(--reveal)}
.js .loaded .seq.d2{transition-delay:.1s}.js .loaded .seq.d3{transition-delay:.2s}.js .loaded .seq.d4{transition-delay:.3s}.js .loaded .seq.d5{transition-delay:.4s}

/* --------------------------------------------------- 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 40px 90px -40px rgba(11,12,16,.5)}
.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:1px solid var(--hair2);border-radius:var(--r);padding:26px 24px}
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:1px solid var(--hair);border-radius:18px;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 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--t3);padding-top:20px;padding-bottom:14px}
table.cmp thead th.us{color:var(--t1);background:rgba(255,176,0,.09)}
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(255,176,0,.09);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:1px solid var(--hair2);border-radius:22px;padding:28px 26px 26px;display:flex;flex-direction:column;gap:16px;min-height:360px;position:relative;transition:transform .4s var(--reveal),box-shadow .4s}
.plan:hover{transform:translateY(-4px);box-shadow:0 30px 60px -30px rgba(11,12,16,.3)}
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:22px;right:22px;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--amber-live);color:#000;padding:8px 10px;border-radius:999px}
.plan .amt{font-family:var(--display);font-weight:300;font-size:54px;line-height:1;letter-spacing:-.03em;color:var(--t1);font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 96}
.plan .amt small{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;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 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;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(--t2)}
.tryline a:hover{color:var(--t1)}
.plan.hero-plan{background:var(--black);color:var(--onb2);border-color:transparent}
.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:#000}
.plan.hero-plan .btn-primary:hover{background:#FFBB22}
.plan.hero-plan .btn-ghost{border-color:rgba(255,255,255,.24);color:var(--onb1)}
.plan.hero-plan .btn-ghost:hover{border-color:rgba(255,255,255,.6)}

/* ----------------------------------------------------------------- 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 30px/1 var(--display);color:var(--t3);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 */
footer{background:var(--black);color:var(--onb2);padding:64px 0 40px;font-size:14px}
footer .brand{color:var(--onb1)}
footer .brand .mark{background:#fff}
.foot{display:grid;grid-template-columns:1.2fr 2fr;gap:40px;align-items:start}
.foot > div:first-child p{font-size:13.5px;color:var(--onb3);line-height:1.65;margin-top:12px;max-width:280px}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* four columns where the shared footer carries the comparison links back (2026-09-13) */
.foot-cols.c4{grid-template-columns:repeat(4,1fr);gap:22px}
.foot:has(> .foot-cols.c4){grid-template-columns:1fr 2.7fr}
.foot-col{display:grid;gap:9px;align-content:start}
.foot-col b{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--onb3);margin-bottom:6px;display:block}
.foot-col a{color:var(--onb2)}
.foot-col a:hover{color:var(--onb1)}
.foot-tail{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:24px;border-top:1px solid var(--onb-hair);font-size:13px;color:var(--onb3)}
footer p{color:var(--onb3)}
.foot > div:first-child p.maker{margin-top:10px}
footer .maker a{color:var(--onb2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--onb-hair)}
footer .maker a:hover{color:var(--onb1)}
@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}}

/* ------------------------------------------------------- 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:2px solid var(--amber);padding:2px 0 2px 14px;margin:18px 0}
.trybox{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);padding:18px 20px;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:#fff}
@media(max-width:480px){.trybox p.trybox-ctas .btn{flex:1 1 100%}}

/* ------------------------------------------------------------- reveals */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--reveal),transform 1s var(--reveal);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .rv.shot{transform:translateY(34px) scale(.985)}
.js .rv.shot.in{transform:none}
.js .rvg>*{opacity:0;transform:translateY(14px);transition:opacity .7s var(--reveal),transform .8s var(--reveal)}
.js .rvg.in>*{opacity:1;transform:none}
.js .rvg.in>:nth-child(2){transition-delay:.08s}.js .rvg.in>:nth-child(3){transition-delay:.16s}.js .rvg.in>:nth-child(4){transition-delay:.24s}.js .rvg.in>:nth-child(5){transition-delay:.32s}.js .rvg.in>:nth-child(6){transition-delay:.4s}
/* word-by-word headline reveal: markup made by the page script from .w */
.w i{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em;font-style:normal}
.w i span{display:inline-block}
.js .w i span{transform:translateY(112%);transition:transform .8s var(--reveal);transition-delay:var(--d,0s)}
.js .w.in i span{transform:none}

/* ---------------------------------------------------------- odds + ends */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:var(--t1);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 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--t2);border:1px solid var(--hair);border-radius:999px;padding:8px 12px}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.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}
.glow{position:absolute;width:900px;height:900px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,176,0,.13),transparent 70%);top:-200px;right:-200px;pointer-events:none;animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(-160px,120px)}}

@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}
  html.hub header .cta{opacity:1;transform:none;pointer-events:auto}
}

/* ---------------------------------------------------------------- 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(--amber);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:1px solid var(--hair2);border-radius:12px;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(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--green);
  border:1px solid color-mix(in srgb,var(--green) 40%,transparent);border-radius:4px;padding:2px 6px}
.rev-empty{border-style:dashed;border-color: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 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;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:1px solid var(--hair2);border-radius:14px;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}}