/* PayHook landing: one stylesheet for every page. Fonts, the tokens of both themes, the header, the home
   page (hero, inspector window, sections, waitlist form), the secondary pages, then all motion. Every
   animation and transition sits under html.motion, which theme.js sets only when reduced motion is off. */

/* ===== fonts: Latin subsets; Geist and Geist Mono are variable 100-900, the brand face holds "PayHook" only ===== */
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-latin.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/geist-mono-latin.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/brand-payhook.woff2) format("woff2")}

/* ===== base ===== */
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
body{position:relative;min-height:100svh;margin:0;background:radial-gradient(1200px 620px at 50% -180px,var(--bg-glow),transparent 72%) no-repeat,var(--bg);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
code{font:500 .92em var(--mono);padding:.08em .38em;border-radius:.35em;background:var(--surface-3);color:var(--ink);white-space:nowrap}

/* ===== tokens: light on :root; dark for a dark OS unless light is chosen, and again for an explicit dark
   choice. The two dark blocks are identical and all three declare the same tokens. ===== */
:root{color-scheme:light dark;
--bg:#fafafa;--bg-glow:rgba(9,9,11,.05);
--surface:#fff;--surface-2:#f8f8f9;--surface-3:#f2f2f4;
--line:#e7e7ea;--line-2:#dadade;
--ink:#09090b;--text-2:#3f3f46;--muted:#5f5f68;--dim:#6b6b75;--h1-soft:#86868f;
--green:#16a34a;--green-ink:#15803d;--green-bg:#eefaf1;--green-line:#c6ead1;
--red:#dc2626;--red-ink:#b91c1c;--red-bg:#fdf3f3;--red-line:#f3cfcf;
--amber:#b45309;--amber-bg:#fdf7ea;--amber-line:#efdcb2;
--sel:#fdf4f4;
--cta-bg:#15803d;--cta-ink:#fff;--cta-hi:rgba(255,255,255,.22);--cta-glow:rgba(21,128,61,.45);
--app-edge:rgba(9,9,11,.035);--app-shadow:rgba(9,9,11,.16);
--hdr-bg:rgba(255,255,255,.78);--hdr-line:#e7e7ea;
--hdr-shadow:0 8px 28px rgba(9,9,11,.06),0 1px 2px rgba(9,9,11,.04);
--hdr-bg-scrolled:rgba(255,255,255,.88);--hdr-line-scrolled:#dfdfe4;
--hdr-shadow-scrolled:0 12px 32px rgba(9,9,11,.1),0 1px 2px rgba(9,9,11,.06);
--hdr-bg-solid:rgba(255,255,255,.96);
--soft-bg:#fff;--soft-line:#e7e7ea;
--seg-track:#f3f3f5;--seg-active:#fff;--seg-active-shadow:0 1px 2px rgba(9,9,11,.12);
--primary-bg:#09090b;--primary-ink:#fff;
--primary-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 16px -6px rgba(9,9,11,.4);
--code-bg:#f8f8f9;
--bp-line:rgba(9,9,11,.075);--bp-mark:rgba(9,9,11,.34)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
--bg:#09090b;--bg-glow:rgba(255,255,255,.055);
--surface:#111113;--surface-2:#0d0d0f;--surface-3:#18181b;
--line:#1f1f23;--line-2:#2a2a2f;
--ink:#f4f4f5;--text-2:#d4d4d8;--muted:#a1a1aa;--dim:#8b8b94;--h1-soft:#6b6b74;
--green:#22c55e;--green-ink:#4ade80;--green-bg:rgba(34,197,94,.1);--green-line:rgba(34,197,94,.26);
--red:#f87171;--red-ink:#fca5a5;--red-bg:rgba(248,113,113,.08);--red-line:rgba(248,113,113,.28);
--amber:#fbbf24;--amber-bg:rgba(251,191,36,.08);--amber-line:rgba(251,191,36,.24);
--sel:rgba(248,113,113,.07);
--cta-bg:#22c55e;--cta-ink:#03170b;--cta-hi:rgba(255,255,255,.42);--cta-glow:rgba(34,197,94,.45);
--app-edge:rgba(255,255,255,.05);--app-shadow:transparent;
--hdr-bg:rgba(17,17,19,.72);--hdr-line:#232327;
--hdr-shadow:0 8px 28px transparent,0 1px 2px transparent;
--hdr-bg-scrolled:rgba(17,17,19,.84);--hdr-line-scrolled:#2c2c31;
--hdr-shadow-scrolled:0 12px 32px transparent,0 1px 2px transparent;
--hdr-bg-solid:rgba(17,17,19,.96);
--soft-bg:rgba(255,255,255,.04);--soft-line:#2a2a2f;
--seg-track:rgba(255,255,255,.04);--seg-active:#232327;--seg-active-shadow:0 1px 2px rgba(0,0,0,.5);
--primary-bg:#f4f4f5;--primary-ink:#09090b;
--primary-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px -6px transparent;
--code-bg:#0b0b0d;
--bp-line:rgba(255,255,255,.065);--bp-mark:rgba(255,255,255,.3)}}
:root[data-theme="dark"]{color-scheme:dark;
--bg:#09090b;--bg-glow:rgba(255,255,255,.055);
--surface:#111113;--surface-2:#0d0d0f;--surface-3:#18181b;
--line:#1f1f23;--line-2:#2a2a2f;
--ink:#f4f4f5;--text-2:#d4d4d8;--muted:#a1a1aa;--dim:#8b8b94;--h1-soft:#6b6b74;
--green:#22c55e;--green-ink:#4ade80;--green-bg:rgba(34,197,94,.1);--green-line:rgba(34,197,94,.26);
--red:#f87171;--red-ink:#fca5a5;--red-bg:rgba(248,113,113,.08);--red-line:rgba(248,113,113,.28);
--amber:#fbbf24;--amber-bg:rgba(251,191,36,.08);--amber-line:rgba(251,191,36,.24);
--sel:rgba(248,113,113,.07);
--cta-bg:#22c55e;--cta-ink:#03170b;--cta-hi:rgba(255,255,255,.42);--cta-glow:rgba(34,197,94,.45);
--app-edge:rgba(255,255,255,.05);--app-shadow:transparent;
--hdr-bg:rgba(17,17,19,.72);--hdr-line:#232327;
--hdr-shadow:0 8px 28px transparent,0 1px 2px transparent;
--hdr-bg-scrolled:rgba(17,17,19,.84);--hdr-line-scrolled:#2c2c31;
--hdr-shadow-scrolled:0 12px 32px transparent,0 1px 2px transparent;
--hdr-bg-solid:rgba(17,17,19,.96);
--soft-bg:rgba(255,255,255,.04);--soft-line:#2a2a2f;
--seg-track:rgba(255,255,255,.04);--seg-active:#232327;--seg-active-shadow:0 1px 2px rgba(0,0,0,.5);
--primary-bg:#f4f4f5;--primary-ink:#09090b;
--primary-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 6px 16px -6px transparent;
--code-bg:#0b0b0d;
--bp-line:rgba(255,255,255,.065);--bp-mark:rgba(255,255,255,.3)}
:root[data-theme="light"]{color-scheme:light}
/* the same in both themes */
:root{--sans:"Geist",-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;--mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
--brand-font:"Bricolage Grotesque","Geist",system-ui,sans-serif;--e:cubic-bezier(.2,.8,.2,1)}

/* ===== header: sticky pill (18px radius), compact buttons, theme switch ===== */
.topbar{position:sticky;top:14px;z-index:20;display:flex;justify-content:center;padding:18px 16px 0}
.hdr{display:flex;align-items:center;gap:28px;width:min(100%,1000px);padding:7px 7px 7px 22px;border:1px solid var(--hdr-line);border-radius:18px;background:var(--hdr-bg);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:var(--hdr-shadow)}
.hdr nav{display:flex;gap:28px;align-items:center;margin-left:6px}
.hdr nav a{color:var(--text-2);text-decoration:none;font:500 14.5px/1 var(--sans)}
.hdr nav a:hover{color:var(--ink)}
.hdr .actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.brand{display:inline-flex;align-items:center;gap:.5em;font:800 19px/1 var(--brand-font);letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand svg{width:1.35em;height:1.35em;margin-left:-.35em;flex:none}
.mk{fill:none;stroke-width:12;stroke-linecap:round}.mk.h{stroke:currentColor}.mk.c{stroke:var(--green)}
.pill-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border-radius:11px;font:600 14.5px var(--sans);text-decoration:none;white-space:nowrap}
.pill-btn.primary{color:var(--primary-ink);background:var(--primary-bg);box-shadow:var(--primary-shadow)}
.theme-seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--soft-line);border-radius:11px;background:var(--seg-track)}
.theme-seg button,.theme-cycle{display:grid;place-items:center;padding:0;border:0;background:transparent;color:var(--muted);cursor:pointer;font:inherit}
.theme-seg button{width:32px;height:32px;border-radius:8px}
.theme-seg button:hover{color:var(--ink)}
.theme-seg button[aria-checked="true"]{background:var(--seg-active);color:var(--ink);box-shadow:var(--seg-active-shadow)}
.theme-seg svg,.theme-cycle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-cycle{display:none;width:38px;height:38px;border-radius:11px;border:1px solid var(--soft-line);background:var(--soft-bg);color:var(--ink)}
.theme-cycle svg{display:none}
.theme-cycle[data-mode="system"] .i-system,.theme-cycle[data-mode="light"] .i-light,.theme-cycle[data-mode="dark"] .i-dark{display:block}
html:not(.js) .theme-ctl{display:none!important}
/* the header gets denser once the page scrolls (motion.js watches this sentinel) */
.top-sentinel{position:absolute;top:0;left:0;width:1px;height:12px;pointer-events:none}
.topbar.scrolled .hdr{border-color:var(--hdr-line-scrolled);box-shadow:var(--hdr-shadow-scrolled)}
@media (min-width:901px){.topbar.scrolled .hdr{background:var(--hdr-bg-scrolled)}}
@media (max-width:900px){.hdr nav,.theme-seg{display:none}.theme-cycle{display:grid}.hdr{padding:6px 6px 6px 16px;gap:12px}.hdr .actions{gap:6px}.pill-btn{min-height:38px;padding:0 14px;font-size:14px}.topbar{padding:12px 12px 0;top:10px}}
/* phones: no backdrop blur, a near-opaque header is cheaper and just as readable */
@media (max-width:900px){.hdr{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--hdr-bg-solid)}}
@media (max-width:370px){.brand{font-size:17px}.pill-btn{padding:0 12px;font-size:13.5px}.hdr{padding-left:14px}}
@media (max-width:359px){.theme-cycle{display:none}}

/* ===== hero text ===== */
.hero{padding:clamp(44px,5.4vw,70px) 20px 0;text-align:center}
.hero h1{margin:0 auto;font:600 clamp(38px,5vw,64px)/1.03 var(--sans);letter-spacing:-.045em;text-wrap:balance}
.hero h1 span{display:block}.hero h1 .l1{color:var(--h1-soft)}
.lede{max-width:34em;margin:22px auto 0;font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--muted);text-wrap:pretty}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;margin-top:32px;padding:0 26px;border-radius:14px;background:var(--cta-bg);color:var(--cta-ink);font:600 16.5px var(--sans);text-decoration:none;box-shadow:inset 0 1px 0 var(--cta-hi),0 12px 30px -12px var(--cta-glow)}
.cta:hover{filter:brightness(1.06)}
.cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.honest{display:flex;justify-content:center;align-items:flex-start;gap:8px;max-width:64em;margin:18px auto 0;font-size:14px;line-height:1.5;color:var(--muted);text-align:left}
.honest svg{flex:none;width:17px;height:17px;margin-top:1px}.honest .mk.h{stroke:var(--dim)}

/* ===== product window ===== */
.app{--u:1px;position:relative;width:min(100% - 40px,1180px);margin:clamp(44px,4.6vw,64px) auto 0;font-size:calc(14*var(--u));line-height:1.45;text-align:left;border-radius:1.15em;background:var(--surface);border:1px solid var(--line);box-shadow:0 0 0 1px var(--app-edge),0 50px 110px -46px var(--app-shadow),0 18px 40px -26px var(--app-shadow);overflow:hidden}
.bar{display:flex;align-items:center;gap:1em;height:3.4em;padding:0 1.1em;border-bottom:1px solid var(--line);background:var(--surface-2)}
.proj{display:flex;align-items:center;gap:.55em;font-weight:600;white-space:nowrap}
.proj svg{width:1.25em;height:1.25em;margin-left:-.2em;color:var(--ink)}
.proj .sep{color:var(--line-2);font-weight:400}.proj .env{color:var(--muted);font-weight:500}
.url{display:flex;align-items:center;gap:.5em;margin-left:.8em;padding:.32em .7em;border:1px solid var(--line);border-radius:.6em;background:var(--surface);font:.86em var(--mono);color:var(--muted);white-space:nowrap}
.url b{color:var(--ink);font-weight:500}.url svg{width:1.05em;height:1.05em;fill:none;stroke:var(--dim);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.live{margin-left:auto;display:flex;align-items:center;gap:.5em;font:500 .86em var(--mono);color:var(--muted)}
.live i{width:.55em;height:.55em;border-radius:50%;background:var(--green);box-shadow:0 0 0 .25em var(--green-bg)}
.body{display:grid;grid-template-columns:24.5em minmax(0,1fr)}
.list{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line);background:var(--surface-2);contain:size}
.lh{display:flex;align-items:center;justify-content:space-between;padding:1em 1.1em .7em}
.lh b{font-weight:600}
.seg2{display:flex;gap:.15em;padding:.18em;border-radius:.6em;background:var(--surface-3);font-size:.84em;color:var(--muted)}
.seg2 span{padding:.2em .65em;border-radius:.45em}.seg2 .on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px var(--app-edge),0 0 0 1px var(--line)}
.seg2 em{font-style:normal;color:var(--red)}
.clip{flex:1;overflow:hidden;padding:0 .55em .8em}
.rows{list-style:none;margin:0;padding:0}
.row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.8em;align-items:center;height:3.85em;margin-bottom:.2em;padding:0 .75em;border:1px solid transparent;border-radius:.75em}
.row .st{width:.5em;height:.5em;border-radius:50%;background:var(--green)}
.row .st.err{background:var(--red)}.row .st.warn{background:var(--amber)}
.row b{display:block;overflow:hidden;font:500 .93em/1.35 var(--mono);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.row small{display:block;overflow:hidden;font-size:.84em;color:var(--dim);white-space:nowrap;text-overflow:ellipsis}
.code{font:500 .8em/1 var(--mono);padding:.4em .5em;border-radius:.45em;color:var(--green-ink);background:var(--green-bg);border:1px solid var(--green-line)}
.code.err{color:var(--red-ink);background:var(--red-bg);border-color:var(--red-line)}
.code.warn{color:var(--amber);background:var(--amber-bg);border-color:var(--amber-line)}
.row.sel{background:var(--sel);border-color:var(--red-line)}
.row.sel::before{content:"";position:absolute;left:-.55em;top:.9em;bottom:.9em;width:.2em;border-radius:0 .2em .2em 0;background:var(--red)}
.row.new::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--green-bg);box-shadow:inset 0 0 0 1px var(--green-line);pointer-events:none}
.row.new.bad::after{background:var(--red-bg);box-shadow:inset 0 0 0 1px var(--red-line)}
/* the three stories share one grid cell: the window keeps the height of the tallest, only .on is shown */
.detail{display:grid;min-width:0;padding:1.3em 1.6em 1.6em}
.story{grid-area:1/1;min-width:0}
.story:not(.on){visibility:hidden}
.dh{display:flex;align-items:center;justify-content:space-between;gap:1em;flex-wrap:wrap}
.dt{display:flex;align-items:center;gap:.7em;flex-wrap:wrap;min-width:0}
.dt b{font:600 1.22em var(--mono);letter-spacing:-.01em}
.chip{padding:.18em .6em;border-radius:99em;border:1px solid var(--line-2);font-size:.82em;font-weight:500;color:var(--text-2)}
.dt .id{font:.84em var(--mono);color:var(--dim)}
.da{display:flex;gap:.5em}
.b1,.b2{display:inline-flex;align-items:center;gap:.45em;height:2.35em;padding:0 .95em;border-radius:.65em;font-weight:600;font-size:.93em;white-space:nowrap}
.b1{position:relative;overflow:hidden;color:var(--cta-ink);background:var(--cta-bg);box-shadow:inset 0 1px 0 var(--cta-hi)}
.b2{color:var(--ink);border:1px solid var(--line-2);background:var(--surface)}
.b1 svg,.b2 svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tabs{display:flex;gap:1.5em;margin:1.1em 0 1.2em;border-bottom:1px solid var(--line);font-size:.93em;color:var(--muted)}
.tabs span{padding:.2em 0 .75em}.tabs .on{color:var(--ink);font-weight:500;box-shadow:inset 0 -2px 0 var(--ink)}
.verdicts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7em}
.v{padding:.85em 1em .9em;border:1px solid var(--line);border-radius:.85em;background:var(--surface)}
.v small,.dsec small{display:block;font:500 .72em/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.v b{display:flex;align-items:center;gap:.45em;margin:.6em 0 .25em;font-size:1.05em;font-weight:600}
.v b svg{flex:none;width:1.1em;height:1.1em;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.v>span{display:block;font-size:.86em;color:var(--dim)}
.v.ok b svg{stroke:var(--green)}.v.err{border-color:var(--red-line);background:var(--red-bg)}.v.err b svg{stroke:var(--red)}
.v.warn{border-color:var(--amber-line);background:var(--amber-bg)}.v.warn b svg{stroke:var(--amber)}
.dsec{margin-top:1.35em}
.dsec p{margin:.65em 0 0;font-size:1.02em;line-height:1.62;color:var(--text-2);text-wrap:pretty}
.dsec p b{color:var(--ink);font-weight:600}
.fix{margin-top:.7em;border:1px solid var(--line);border-radius:.85em;background:var(--code-bg);overflow:hidden}
.fix pre{position:relative;margin:0;padding:.95em 1.1em 1.05em;font:.86em/1.7 var(--mono);color:var(--text-2);white-space:pre-wrap}
.fix pre .k{color:var(--dim)}
.fa{display:flex;align-items:center;gap:.5em;padding:.7em .8em;border-top:1px solid var(--line);background:var(--surface)}
.fa .note{margin-left:auto;font-size:.84em;color:var(--dim)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:1em}

/* big screens: everything grows smoothly from 1280 to 1920 */
@media (min-width:1280px){
 .hero{padding-top:clamp(56px,calc(2.1875vw + 28px),70px)}
 .hero h1{font-size:clamp(64px,calc(3.75vw + 16px),88px)}
 .lede{font-size:clamp(19px,calc(.46875vw + 13px),22px)}
 .cta{height:clamp(52px,calc(.9375vw + 40px),58px);padding:0 clamp(26px,calc(.9375vw + 14px),32px);font-size:clamp(16.5px,calc(.3125vw + 12.5px),18.5px)}
 .honest{font-size:clamp(14px,calc(.15625vw + 12px),15px)}
 .app{--u:clamp(1px,calc(.0234375vw + .7px),1.15px);width:min(100% - 64px,clamp(1180px,calc(28.125vw + 820px),1360px))}
}
@media (max-width:1180px){.body{grid-template-columns:21em minmax(0,1fr)}}
@media (max-width:1100px){.url{display:none}}
@media (max-width:860px){
 .body{grid-template-columns:minmax(0,1fr)}
 .list{border-right:0;border-bottom:1px solid var(--line);contain:none}
 .clip{max-height:calc(3*4.05em + .8em);flex:none}
 /* verdicts become one compact table: label and explanation on the left, the result on the right */
 .verdicts{grid-template-columns:minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:.85em;overflow:hidden;background:var(--surface)}
 .v{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1em;align-items:center;padding:.8em .95em;border:0;border-radius:0}
 .v+.v{border-top:1px solid var(--line)}
 .v small{grid-column:1;grid-row:1}
 .v b{grid-column:2;grid-row:1 / span 2;justify-content:flex-end;margin:0;font-size:.98em;white-space:nowrap}
 .v>span{grid-column:1;grid-row:2;margin-top:.35em}
 .detail{padding:1.2em 1.1em 1.3em}
 .fa .note{display:none}
}
@media (max-width:560px){
 .hero{padding-top:36px}
 .app{--u:.94px;width:calc(100% - 24px);border-radius:1em}
 .cta{width:100%;max-width:420px}
 .honest{font-size:13.5px}
 .da{width:100%}.da .b1{flex:1;justify-content:center}
 .dt .id{display:none}
 .live span{display:none}
 .fa .cf{display:none}
 .fa .b1,.fa .b2{flex:1;justify-content:center}
 .tabs{gap:1.1em;overflow:hidden;white-space:nowrap}
 .dsec p{font-size:.98em}
 /* the prompt is a preview on phones: five lines, then it fades out */
 .fix pre{max-height:10.6em;overflow:hidden}
 .fix pre::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3.2em;background:linear-gradient(transparent,var(--code-bg))}
}

/* ===== background: blueprint grid, a static SVG pattern (no filters, no blend modes). The box ends with the
   page and keeps the grid's geometry; a short page is still a screen tall (body min-height), so the grid is
   cut by the screen's edge, not in the middle of it ===== */
.bg{position:absolute;left:0;right:0;top:0;height:min(1700px,100%);z-index:-1;overflow:hidden;pointer-events:none}
.bg-bp{position:absolute;left:50%;top:0;width:3840px;height:1700px;margin-left:-1920px;color:var(--bp-line);
 -webkit-mask-image:radial-gradient(ellipse 1100px 760px at 50% 26%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 1100px 760px at 50% 26%,#000 30%,transparent 80%)}
.bp-mark{stroke:var(--bp-mark)}
/* service pages keep the grid lines but drop the corner marks, which would cross their text */
.bg-plain .bp-mark{display:none}

/* ===== pain: the problem, as five recognisable scenes ===== */
.sec{padding:clamp(88px,10vw,150px) 20px 0}
.sec-in{--u:1px;width:min(100% - 40px,1180px);margin:0 auto;font-size:calc(14*var(--u));line-height:1.45}
.kicker{display:flex;align-items:center;gap:10px;margin:0 0 18px;font:500 12.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kicker i{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px var(--red-bg)}
.sec h2{margin:0;font:600 clamp(32px,3.9vw,46px)/1.06 var(--sans);letter-spacing:-.04em;text-wrap:balance}
.sec h2 span{display:block}.sec h2 .soft{color:var(--h1-soft)}
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.15em;margin-top:clamp(36px,4vw,56px)}
.card{display:flex;flex-direction:column;min-width:0;padding:1.1em 1.1em 1.5em;border:1px solid var(--line);border-radius:1.3em;background:var(--surface)}
.card.wide{grid-column:span 2}
.card h3{margin:0 .3em;font:600 1.22em/1.3 var(--sans);letter-spacing:-.015em;color:var(--ink)}
.card p{margin:.5em .3em 0;font-size:1em;line-height:1.55;color:var(--muted);text-wrap:pretty}
.viz{position:relative;display:flex;flex-direction:column;justify-content:center;height:13.5em;margin-bottom:1.4em;padding:1.2em;border:1px solid var(--line);border-radius:.9em;background:var(--surface-2);overflow:hidden}
.viz .lab{font:500 .74em/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
/* 1. paid but inactive */
.v-gap{display:grid;grid-template-columns:minmax(0,1fr) minmax(7em,.55fr) minmax(0,1.15fr);align-items:center}
.payc{padding:1em 1.1em;border:1px solid var(--line);border-radius:.8em;background:var(--surface)}
.payc .top{display:flex;align-items:center;justify-content:space-between;gap:.6em;font-size:.86em;color:var(--muted)}
.chip-ok,.chip-bad{font:500 .9em/1 var(--mono);padding:.32em .5em;border-radius:.45em;border:1px solid;white-space:nowrap}
.chip-ok{color:var(--green-ink);background:var(--green-bg);border-color:var(--green-line)}
.chip-bad{color:var(--red-ink);background:var(--red-bg);border-color:var(--red-line)}
.payc b{display:block;margin-top:.5em;font:600 1.95em/1.1 var(--sans);letter-spacing:-.025em;color:var(--ink)}
.payc small{display:block;margin-top:.35em;font-size:.84em;color:var(--dim)}
.gapl{position:relative;height:2px;margin:0 .5em;background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px)}
.gapl i{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:2.1em;height:2.1em;margin:-1.05em 0 0 -1.05em;border-radius:50%;background:var(--surface);border:1px solid var(--red-line);color:var(--red)}
.gapl svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.gapl span{position:absolute;left:50%;top:1.7em;transform:translateX(-50%);font:500 .76em/1.3 var(--mono);color:var(--red);text-align:center;white-space:nowrap}
.dbc{border:1px solid var(--line);border-radius:.8em;background:var(--surface);overflow:hidden;font-size:.86em}
.dbc .cap{display:flex;justify-content:space-between;padding:.6em .9em;border-bottom:1px solid var(--line);font:500 .95em var(--mono);color:var(--muted)}
.dbc .cap span{color:var(--dim)}
.dbc .th,.dbc .tr{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.6fr) minmax(0,.9fr);gap:.6em;align-items:center;padding:.55em .9em}
.dbc .th{border-bottom:1px solid var(--line);font:500 .78em var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.dbc .tr{font:.95em var(--mono);color:var(--text-2)}.dbc .tr+.tr{border-top:1px solid var(--line)}
.dbc .tr.hit{background:var(--red-bg)}
.dbc .tr>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbc .ok{color:var(--green-ink)}.dbc .bad{color:var(--red-ink);font-weight:500}
/* 2. cryptic error */
.v-err{justify-content:flex-start;gap:.8em}
.v-err pre{margin:0;font:.84em/1.7 var(--mono);color:var(--text-2);white-space:pre-wrap}
.v-err pre .e{display:flex;align-items:center;gap:.45em;margin-bottom:.35em;color:var(--red-ink);font-weight:500}
.v-err pre .e svg{flex:none;width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.v-err .at{color:var(--dim)}
/* 3. five signing schemes */
.v-hdr ul{list-style:none;margin:.9em 0 0;padding:0;display:grid;gap:.45em;font-size:.86em}
.v-hdr li{display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:.6em;align-items:center}
.v-hdr li>span{color:var(--muted);white-space:nowrap}
.v-hdr code{justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis;padding:.22em .5em;border:1px solid var(--line);border-radius:.4em;background:var(--surface);font:500 .92em var(--mono);color:var(--ink);white-space:nowrap}
/* 4. no localhost */
.v-tun{gap:.55em;align-items:flex-start}
.v-tun .u{max-width:100%;overflow:hidden;text-overflow:ellipsis;padding:.4em .65em;border:1px solid var(--line);border-radius:.55em;background:var(--surface);font:.82em var(--mono);color:var(--text-2);white-space:nowrap}
.v-tun .old{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--red)}
.v-tun .new{color:var(--amber);border-color:var(--amber-line);background:var(--amber-bg)}
.v-tun .note{font:500 .76em var(--mono);color:var(--dim)}
.v-tun .plats{display:flex;flex-wrap:wrap;align-items:center;gap:.4em;margin-top:.45em}
.v-tun .plats b{padding:.3em .6em;border:1px solid var(--line-2);border-radius:99em;font-size:.8em;font-weight:600;color:var(--ink);background:var(--surface)}
.v-tun .plats em{font:normal 500 .76em var(--mono);color:var(--red)}
/* 5. the AI is guessing */
.v-ai{gap:.6em}
.bub{max-width:90%;padding:.65em .85em;border-radius:1em;font-size:.86em;line-height:1.45}
.bub.me{align-self:flex-end;border-bottom-right-radius:.3em;background:var(--ink);color:var(--bg)}
.bub.ai{align-self:flex-start;border-bottom-left-radius:.3em;border:1px solid var(--line);background:var(--surface);color:var(--text-2)}
.bub.ai .who{display:flex;align-items:center;gap:.35em;margin-bottom:.3em;font:600 .86em var(--sans);color:var(--muted)}
.bub.ai .who svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.bub.ai mark{background:none;color:var(--amber);font-weight:500}
@media (min-width:1280px){
 .sec-in{--u:clamp(1px,calc(.0234375vw + .7px),1.15px);width:min(100% - 64px,clamp(1180px,calc(28.125vw + 820px),1360px))}
 .sec h2{font-size:clamp(46px,calc(2.1875vw + 18px),60px)}
 .kicker{font-size:clamp(12.5px,calc(.15625vw + 10.5px),13.5px)}
}
@media (max-width:1024px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
 .bento{grid-template-columns:minmax(0,1fr)}
 .card.wide{grid-column:auto}
 .viz{height:auto;min-height:11em}
 .v-gap{grid-template-columns:minmax(0,1fr);row-gap:0}
 .gapl{justify-self:center;width:2px;height:5.6em;margin:.3em 0;background:repeating-linear-gradient(180deg,var(--line-2) 0 5px,transparent 5px 10px)}
 .gapl span{left:2.2em;top:50%;transform:translateY(-50%);text-align:left}
}
@media (max-width:560px){.sec-in{--u:.94px}}

/* ===== solution: how it works, three steps and what comes after launch ===== */
.kicker.ok i{background:var(--green);box-shadow:0 0 0 4px var(--green-bg)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.15em;margin:clamp(36px,4vw,56px) 0 0;padding:0;list-style:none}
.steps .viz{height:15.5em}
.step{position:relative}
.step .num{display:flex;align-items:center;gap:.65em;margin:0 .3em .9em;font:500 .8em/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.step .num b{display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:50%;border:1px solid var(--green-line);background:var(--green-bg);color:var(--green-ink);font-weight:600;letter-spacing:0}
.step .arrow{position:absolute;z-index:1;top:1.05em;right:calc(-1.15em / 2 - 1em);display:grid;place-items:center;width:2em;height:2em;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--dim)}
.step .arrow svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* 1. connect */
.v-connect{justify-content:flex-start}
.urlf{display:flex;align-items:center;justify-content:space-between;gap:.6em;margin-top:.75em;padding:.65em .8em;border:1px solid var(--green-line);border-radius:.6em;background:var(--surface);box-shadow:0 0 0 3px var(--green-bg);font:.84em var(--mono);color:var(--muted);white-space:nowrap}
.urlf b{color:var(--ink);font-weight:500}
.urlf svg{flex:none;width:1.1em;height:1.1em;fill:none;stroke:var(--dim);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.provs{display:flex;flex-wrap:wrap;gap:.35em;margin-top:.9em}
.provs span{display:inline-flex;align-items:center;gap:.4em;padding:.28em .6em;border:1px solid var(--line);border-radius:99em;background:var(--surface);font-size:.78em;font-weight:500;color:var(--text-2);white-space:nowrap}
.provs span::before{content:"";width:.45em;height:.45em;border-radius:50%;background:var(--green)}
.relay{display:flex;align-items:center;gap:.45em;margin-top:auto;padding-top:.8em;font:.78em var(--mono);color:var(--dim);white-space:nowrap;overflow:hidden}
.relay b{color:var(--text-2);font-weight:500;overflow:hidden;text-overflow:ellipsis}
.relay svg{flex:none;width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* 2. check */
.v-check{justify-content:flex-start}
.v-check ul{list-style:none;display:grid;gap:.4em;margin:.75em 0 0;padding:0;font-size:.82em}
.v-check li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25em .6em;align-items:center;padding:.5em .65em;border:1px solid var(--line);border-radius:.6em;background:var(--surface)}
.v-check li b{overflow:hidden;font:500 1em var(--mono);color:var(--ink);white-space:nowrap;text-overflow:ellipsis}
.v-check li em{grid-column:1;font-style:normal;color:var(--dim)}
.v-check .sg{grid-column:2;grid-row:1;justify-self:end}
.v-check .rc{grid-column:2;grid-row:2;justify-self:end;font-family:var(--mono);color:var(--dim)}
.v-check .sg,.v-check .rc{font-size:.92em;white-space:nowrap}
.v-check .sg{font:500 .9em var(--mono);padding:.15em .45em;border-radius:.4em;border:1px solid}
.v-check .sg.ok{color:var(--green-ink);background:var(--green-bg);border-color:var(--green-line)}
.v-check .sg.bad{color:var(--red-ink);background:var(--red-bg);border-color:var(--red-line)}
.v-check .rc.bad{color:var(--red)}.v-check .rc.warn{color:var(--amber)}
/* 3. fix */
.v-fix{justify-content:flex-start}
.v-fix .dg{display:flex;align-items:center;gap:.45em;margin:.8em 0 0;font-size:1.02em;font-weight:600;color:var(--ink)}
.v-fix .dg svg{flex:none;width:1.1em;height:1.1em;fill:none;stroke:var(--amber);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.v-fix .dg .t span{font-weight:400;color:var(--muted)}
.v-fix .why{margin:.45em 0 0;font-size:.88em;line-height:1.5;color:var(--text-2)}
.v-fix .why code{font-size:.92em}
.v-fix .acts{display:flex;gap:.45em;margin-top:auto;padding-top:.8em}
.v-fix .b1,.v-fix .b2{height:2.3em;font-size:.84em}
/* after launch */
.later{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1.2em 2em;margin-top:1.15em;padding:1.1em 1.4em;border:1px dashed var(--line-2);border-radius:1.3em}
.later-t{margin:0;font:500 .8em/1.4 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.later ul{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8em 1.4em;margin:0;padding:0}
.later li{display:flex;align-items:flex-start;gap:.6em;font-size:.94em;line-height:1.4;color:var(--muted)}
.later li b{color:var(--ink);font-weight:600}
.later li svg{flex:none;width:1.25em;height:1.25em;margin-top:.05em;fill:none;stroke:var(--dim);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.later li em{margin-left:.35em;padding:.05em .45em;border:1px solid var(--line-2);border-radius:99em;font:normal 500 .78em var(--mono);color:var(--dim);white-space:nowrap}
@media (max-width:1180px){.later{grid-template-columns:minmax(0,1fr)}.later ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1024px){
 .steps{grid-template-columns:minmax(0,1fr);gap:2.2em}
 .step .arrow{top:auto;right:auto;bottom:calc(-2.2em / 2 - 1em);left:50%;transform:translateX(-50%) rotate(90deg)}
 .step .viz{height:auto;min-height:12em}
}
@media (min-width:761px) and (max-width:1024px){
 .step{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:1.8em}
 .step>.num{grid-column:1 / -1}
 .step>.viz{grid-column:1;grid-row:2 / 4;margin-bottom:0}
 .step>h3{grid-column:2;grid-row:2;align-self:end;margin-top:.6em}
 .step>p:not(.num){grid-column:2;grid-row:3;align-self:start}
}
@media (max-width:560px){.later ul{grid-template-columns:minmax(0,1fr)}.later{padding:1em 1.1em}}

/* ===== pricing: free, pro, and the lifetime early bird (featured) ===== */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.15em;margin-top:clamp(36px,4vw,56px)}
.plan{position:relative;display:flex;flex-direction:column;min-width:0;padding:1.6em 1.6em 1.8em;border:1px solid var(--line);border-radius:1.3em;background:var(--surface)}
.plan .ph{display:flex;align-items:center;justify-content:space-between;gap:.8em;min-height:1.9em}
.plan h3{margin:0;font:600 1.15em/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.plan .badge{padding:.35em .7em;border:1px solid var(--green-line);border-radius:99em;background:var(--green-bg);color:var(--green-ink);font:500 .78em/1 var(--mono);white-space:nowrap}
.price{display:flex;align-items:baseline;gap:.45em;margin:1em 0 0}
.price b{font:600 3.2em/1 var(--sans);letter-spacing:-.045em;color:var(--ink)}
.price span{font-size:.95em;color:var(--muted)}
.pd{margin:.75em 0 0;min-height:3em;font-size:.98em;line-height:1.5;color:var(--muted);text-wrap:pretty}
.pbtn{display:flex;align-items:center;justify-content:center;gap:.5em;height:3em;margin-top:1.3em;border:1px solid var(--line-2);border-radius:.8em;background:var(--surface);color:var(--ink);font:600 1em var(--sans);text-decoration:none}
.pbtn.primary{border-color:transparent;background:var(--cta-bg);color:var(--cta-ink);box-shadow:inset 0 1px 0 var(--cta-hi),0 12px 30px -14px var(--cta-glow)}
.pbtn.primary:hover{filter:brightness(1.06)}
.pbtn svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* the honesty line reads at the size of the plan description next to it, never smaller */
.plan .hl{display:flex;align-items:flex-start;gap:.5em;margin:.9em 0 0;font-size:.98em;line-height:1.5;color:var(--muted)}
.plan .hl svg{flex:none;width:1.3em;height:1.3em;margin-top:.05em}.plan .hl .mk.h{stroke:var(--dim)}
.feat{list-style:none;display:grid;align-content:start;gap:.75em;margin:1.5em 0 0;padding:1.4em 0 0;border-top:1px solid var(--line)}
.feat li{display:flex;align-items:flex-start;gap:.6em;font-size:.97em;line-height:1.45;color:var(--text-2)}
.feat li svg{flex:none;width:1.15em;height:1.15em;margin-top:.15em;fill:none;stroke:var(--green);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.feat li em{margin-left:.35em;padding:.05em .45em;border:1px solid var(--line-2);border-radius:99em;font:normal 500 .78em var(--mono);color:var(--dim);white-space:nowrap}
.plan.best{border-color:var(--green-line);background:radial-gradient(120% 55% at 50% 0%,var(--green-bg),transparent 62%),var(--surface);box-shadow:0 0 0 4px var(--green-bg)}
.pnote{margin:1.6em 0 0;font-size:.9em;line-height:1.5;color:var(--dim);text-align:center}
@media (max-width:900px){.plans{grid-template-columns:minmax(0,1fr)}.plan.best{order:-1}.pd{min-height:0}.pnote{text-align:left;padding:0 var(--ti,0)}}

/* ===== providers ===== */
section[id]{scroll-margin-top:96px}
.provgrid{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.15em;margin:clamp(36px,4vw,56px) 0 0;padding:0}
.provgrid li{display:flex;flex-direction:column;align-items:flex-start;gap:.65em;min-width:0;padding:1.3em 1.3em 1.2em;border:1px solid var(--line);border-radius:1.2em;background:var(--surface)}
.provgrid b{font:600 1.2em/1.2 var(--sans);letter-spacing:-.015em;color:var(--ink)}
.provgrid code{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:.84em}
.provgrid span{font:.8em/1.45 var(--mono);color:var(--muted)}
.provgrid small{display:flex;align-items:center;gap:.45em;align-self:stretch;margin-top:auto;padding-top:.75em;border-top:1px solid var(--line);font:500 .8em var(--sans);color:var(--green-ink)}
.provgrid small::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--green)}

/* ===== faq ===== */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,96px);align-items:start}
.faq-head{position:sticky;top:120px}
.faq-more{margin:1.4em 0 0;font-size:1em;line-height:1.55;color:var(--muted)}
/* links inside running text stay underlined */
.faq-more a,.wl-err a,.wl-privacy a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.faq-list{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:1.2em;padding:1.25em .2em;list-style:none;cursor:pointer;font:600 1.1em/1.4 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ic{flex:none;display:grid;place-items:center;width:1.9em;height:1.9em;border:1px solid var(--line-2);border-radius:50%;color:var(--muted)}
.qa summary .ic svg{width:.9em;height:.9em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.qa[open] summary .ic{transform:rotate(45deg);background:var(--surface-3)}
.qa .a{padding:0 3.4em 1.4em .2em;font-size:1em;line-height:1.65;color:var(--muted)}
.qa .a p{margin:0}.qa .a p+p{margin-top:.7em}
.qa .a b{color:var(--text-2);font-weight:600}
@media (hover:hover){.qa summary:hover .ic{background:var(--surface-3);color:var(--ink)}}
@supports selector(::details-content){
 :root{interpolate-size:allow-keywords}
 .qa::details-content{height:0;overflow:clip}
 .qa[open]::details-content{height:auto}
 .motion .qa::details-content{transition:height .3s ease,content-visibility .3s allow-discrete}
}

/* ===== waitlist: the closing call to action and the form ===== */
.wl-card{position:relative;overflow:hidden;padding:clamp(48px,6vw,88px) clamp(20px,5vw,64px);padding-bottom:max(.6em,calc(clamp(48px,6vw,88px) - 5em));border:1px solid var(--line);border-radius:1.6em;background:radial-gradient(60% 70% at 50% 0%,var(--green-bg),transparent 70%),var(--surface);text-align:center}
.wl-grid{position:absolute;inset:0;width:100%;height:100%;color:var(--bp-line);pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000 15%,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000 15%,transparent 75%)}
.wl-card>:not(.wl-grid){position:relative}
.wl .kicker{justify-content:center}
.wl h2{margin:0 auto;max-width:18em}
.wl-sub{max-width:34em;margin:1.2em auto 0;font-size:1.1em;line-height:1.6;color:var(--muted);text-wrap:pretty}
/* fake door: the early-bird note (#fake-door) shows until #cta-lifetime carries a live checkout link */
body:has(#cta-lifetime[href^="https://"]) #fake-door{display:none}
/* the form: a visible label, the capsule (email + button), the optional provider, then the privacy line (one
   line with its link on wide screens) and the status area. The status keeps room for the longest answer at every
   width, so a late answer never moves the page: one line on a wide card (3.8em, taken from the card's bottom
   padding), then two, three and four lines as the card narrows (the media rules below the footer) */
.wl-form{margin:2em auto 0}
.wl-label{display:block;max-width:32em;margin:0 auto .55em;padding-left:1em;font:500 .9em/1.3 var(--sans);color:var(--muted);text-align:left}
.wl-cap{display:flex;gap:.5em;max-width:32em;margin:0 auto;padding:.4em;border:1px solid var(--line-2);border-radius:1em;background:var(--bg)}
.wl-cap:focus-within{border-color:var(--green-line);box-shadow:0 0 0 4px var(--green-bg)}
.wl-cap input[type=email]{flex:1;min-width:0;height:3em;padding:0 1em;border:0;border-radius:.7em;background:transparent;color:var(--ink);font:500 1.02em var(--sans)}
.wl-cap input::placeholder{color:var(--dim)}
.wl-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:.5em;height:3em;padding:0 1.3em;border:0;border-radius:.7em;background:var(--cta-bg);color:var(--cta-ink);font:600 1em var(--sans);cursor:pointer;box-shadow:inset 0 1px 0 var(--cta-hi)}
.wl-btn:hover{filter:brightness(1.06)}
.wl-btn svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wl-prov{display:flex;flex-wrap:wrap;align-items:center;gap:.5em .9em;max-width:32em;margin:.9em auto 0;text-align:left}
.wl-prov label{flex:0 1 auto;padding-left:1em;font-size:.9em;line-height:1.4;color:var(--muted)}
.wl-prov select{flex:1 1 9em;min-width:9em;min-height:2.6em;padding:0 .8em;border:1px solid var(--line-2);border-radius:1em;background:var(--bg);color:var(--ink);font:500 1em var(--sans)}
.hp{display:none}
.wl-privacy{max-width:54em;margin:1.2em auto 0;font-size:.9em;line-height:1.5;color:var(--dim)}
.wl-privacy svg{display:inline-block;width:1.1em;height:1.1em;margin-right:.45em;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wl-note{margin:1em 0 0;font-size:.9em;color:var(--muted)}
.wl-status{min-height:3.8em;margin:1.2em auto 0}
.wl-ok,.wl-err{display:flex;align-items:flex-start;gap:.6em;width:fit-content;max-width:100%;margin:0 auto;padding:1em 1.2em;border-radius:1em;font-size:1.02em;line-height:1.55;text-align:left;color:var(--ink)}
.wl-ok{border:1px solid var(--green-line);background:var(--green-bg)}
.wl-err{border:1px solid var(--red-line);background:var(--red-bg)}
.wl-ok svg,.wl-err svg{flex:none;width:1.2em;height:1.2em;margin-top:.15em;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.wl-ok svg{stroke:var(--green)}.wl-err svg{stroke:var(--red)}

/* ===== footer ===== */
.foot{margin-top:clamp(96px,10vw,150px);padding:0 20px;border-top:1px solid var(--line);font-size:15px;overflow:hidden}
.foot-in{position:relative;width:min(100% - 40px,1180px);margin:0 auto;padding-top:clamp(40px,5vw,64px)}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3em}
.foot-brand p{max-width:24em;margin:1em 0 0;font-size:.95em;line-height:1.55;color:var(--muted)}
.foot-nav{display:flex;gap:clamp(40px,6vw,96px)}
.foot-nav div{display:flex;flex-direction:column;gap:.75em}
.foot-nav b{margin-bottom:.2em;font:500 .78em var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.foot-nav a{color:var(--text-2);text-decoration:none;font-size:.95em}
.foot-nav a:hover{color:var(--ink)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6em 1.5em;margin-top:3em;padding-top:1.4em;border-top:1px solid var(--line);font-size:.88em;color:var(--dim)}
.foot-mark{margin:.25em 0 -.24em;font:800 clamp(88px,19.5vw,300px)/1 var(--brand-font);letter-spacing:-.05em;text-align:center;white-space:nowrap;color:transparent;background:linear-gradient(180deg,var(--line-2),transparent 82%);-webkit-background-clip:text;background-clip:text;user-select:none}
@media (min-width:1280px){.foot-in{width:min(100% - 64px,clamp(1180px,calc(28.125vw + 820px),1360px))}}
@media (max-width:1180px){.provgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.faq-grid{grid-template-columns:minmax(0,1fr)}.faq-head{position:static}.qa .a{padding-right:.2em}}
@media (max-width:760px){.provgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-top{grid-template-columns:minmax(0,1fr)}}
/* answer room by width. Measured in Chrome, the error fits one line from 840 px, two from 441, three from 363;
   each switch below sits 5-15% wider, for renderers that set the text a little wider */
@media (max-width:960px){.wl-card{padding-bottom:1em}.wl-status{max-width:32em;min-height:5.5em}}
@media (max-width:460px){.wl-status{min-height:7.1em}}
@media (max-width:380px){.wl-status{min-height:8.7em}}
@media (max-width:560px){.wl-cap{flex-direction:column;padding:.5em}.wl-cap input[type=email]{text-align:center}.wl-btn{width:100%}.wl-prov{justify-content:center}.wl-label,.wl-prov label{padding-left:0;text-align:center}}
/* ===== one grid with the header: below 1032px the header is not capped, so boxes take its edges and text takes the logo line ===== */
@media (max-width:1032px){
 :root{--g:16px;--ti:22px}
 .hero,.sec{padding-left:var(--g);padding-right:var(--g)}
 .app,.sec-in{width:100%}
 .hero h1,.lede,.honest,.sec-in>.kicker,.sec-in>h2{padding-left:var(--ti);padding-right:var(--ti)}
 .faq-head,.pnote{padding-left:var(--ti);padding-right:var(--ti)}
 .faq-list{margin-left:var(--ti);margin-right:var(--ti)}
 .foot{padding-left:var(--g);padding-right:var(--g)}
 .foot-in{width:100%;padding-left:var(--ti);padding-right:var(--ti)}
}
@media (max-width:900px){:root{--g:12px;--ti:16px}}
@media (max-width:560px){.cta{max-width:none}}

/* ===== secondary pages (404, thanks, privacy...): one column on the header's grid, the text on the logo line ===== */
.page{padding:clamp(56px,7vw,96px) var(--g,16px) clamp(96px,10vw,150px)}
.page-in{width:min(100%,1000px);margin:0 auto;padding:0 var(--ti,22px)}
.page h1{max-width:18em;margin:0;font:600 clamp(32px,3.9vw,46px)/1.06 var(--sans);letter-spacing:-.04em;text-wrap:balance}
.page p{max-width:34em;margin:22px 0 0;font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--muted);text-wrap:pretty}
.page a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.page .back{margin-top:36px}
@media (min-width:1280px){.page h1{font-size:clamp(46px,calc(2.1875vw + 18px),60px)}.page p{font-size:clamp(19px,calc(.46875vw + 13px),22px)}}
/* the provider poll on /thanks-waitlist (poll.js): five capsules for one answer, then a thank-you that already
   holds its line, so nothing moves when it shows. Without JavaScript there is no poll, as there is no theme switch */
html:not(.js) .poll{display:none!important}
.poll{margin-top:34px}
.page .poll-q{margin:0;color:var(--ink);font-weight:500}
.poll-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.poll button{position:relative;min-height:44px;padding:0 18px;border:1px solid var(--line-2);border-radius:99em;background:var(--surface);color:var(--ink);font:500 15.5px/1 var(--sans);white-space:nowrap;cursor:pointer}
@media (hover:hover){.poll button:hover:not(:disabled):not([aria-pressed="true"]){border-color:var(--muted)}}
/* the answer: green ink and a drawn check, so the state does not rest on colour alone. The check takes padding from
   the right, so the capsule keeps its width and nothing around it moves. The tint lies on the surface, not on the
   page: --green-bg is translucent in the dark theme, and the grid would show through */
.poll button[aria-pressed="true"]{padding:0 12px 0 24px;border-color:var(--green-ink);background:linear-gradient(var(--green-bg),var(--green-bg)),var(--surface);color:var(--green-ink);cursor:default}
.poll button[aria-pressed="true"]::before{content:"";position:absolute;left:.7em;top:50%;width:.3em;height:.56em;margin-top:-.36em;border:solid currentColor;border-width:0 .13em .13em 0;transform:rotate(45deg)}
.poll button:disabled{opacity:.45;cursor:default}
.page .poll-thanks{margin:14px 0 0;color:var(--green-ink);visibility:hidden}
.poll.done .poll-thanks{visibility:visible}

/* ===== motion: one-shot scenes on transform and opacity. Everything below needs html.motion, so none of it
   runs for reduced motion, where every element simply stands in its final place. ===== */
html.motion{scroll-behavior:smooth}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
/* the first screen's text: a slide only, opaque from the first frame (a text at opacity 0 is not an LCP candidate) */
@keyframes lift{from{transform:translateY(14px)}}
@keyframes drop{from{opacity:0;transform:translateY(-12px)}}
@keyframes fade{from{opacity:0}}
@keyframes fadeOut{to{opacity:0}}
@keyframes slideR{from{opacity:0;transform:translateX(-12px)}}
@keyframes slideL{from{opacity:0;transform:translateX(12px)}}
@keyframes pop{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1)}}
@keyframes drawX{from{transform:scaleX(0)}}
@keyframes drawY{from{transform:scaleY(0)}}
@keyframes blip{0%,100%{opacity:0}35%{opacity:.2}}
@keyframes press{0%,100%{transform:scale(1)}40%{transform:scale(.93)}}
@keyframes nudgeX{0%,100%{translate:0 0}50%{translate:4px 0}}
@keyframes nudgeY{0%,100%{translate:0 0}50%{translate:0 4px}}
@keyframes sweep{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
@keyframes bob{0%,100%{transform:none}50%{transform:translateY(-3px)}}
@keyframes dots{0%{opacity:0}15%,80%{opacity:1}100%{opacity:0}}
@keyframes markUp{from{opacity:0;transform:translateY(40%)}}
@keyframes blink{50%{opacity:.35}}
@keyframes bar{from{opacity:0;transform:scaleY(.3)}}
@keyframes ping{40%{transform:scale(1.7);opacity:1}}
@keyframes show{to{opacity:1;transform:none}}
@keyframes shine{to{transform:translateX(120%)}}
/* delays: the stagger of the approved design, by structure (--d on entrance, --ds when a story swaps in) */
.rows>.row:nth-child(1){--d:.04s}.rows>.row:nth-child(2){--d:.06s}.rows>.row:nth-child(3){--d:.08s}.rows>.row:nth-child(4){--d:.11s}.rows>.row:nth-child(5){--d:.13s}
.rows>.row:nth-child(6){--d:.15s}.rows>.row:nth-child(7){--d:.17s}.rows>.row:nth-child(8){--d:.2s}.rows>.row:nth-child(9){--d:.22s}
.story>.dh{--d:.22s;--ds:0s}.story>.tabs{--d:.26s;--ds:.04s}
.story .verdicts>.v:nth-child(1){--d:.32s;--ds:.12s}.story .verdicts>.v:nth-child(2){--d:.38s;--ds:.26s}.story .verdicts>.v:nth-child(3){--d:.43s;--ds:.4s}
.story>.dsec.what{--d:.52s;--ds:.58s}.story>.dsec.fixp{--d:.61s;--ds:.76s}
[data-section] h2[data-reveal]{--d:.05s}
.bento>:nth-child(1){--d:.1s}.bento>:nth-child(2){--d:.17s}.bento>:nth-child(3){--d:.24s}.bento>:nth-child(4){--d:.31s}.bento>:nth-child(5){--d:.38s}
.steps>:nth-child(1){--d:.1s}.steps>:nth-child(2){--d:.18s}.steps>:nth-child(3){--d:.26s}.later{--d:.34s}
.provgrid>:nth-child(1){--d:.1s}.provgrid>:nth-child(2){--d:.15s}.provgrid>:nth-child(3){--d:.2s}.provgrid>:nth-child(4){--d:.25s}.provgrid>:nth-child(5){--d:.3s}
.plans>:nth-child(1){--d:.1s}.plans>:nth-child(2){--d:.17s}.plans>:nth-child(3){--d:.24s}
.faq-list{--d:.1s}
/* first screen */
.motion .topbar{animation:drop .5s var(--e) backwards}
.motion .hero h1 .l1{animation:lift .55s var(--e) backwards}
.motion .hero h1 .l2{animation:lift .55s var(--e) .05s backwards}
.motion .hero .lede{animation:lift .55s var(--e) .1s backwards}
.motion .hero .cta{animation:rise .55s var(--e) .14s backwards}
.motion .hero .honest{animation:rise .55s var(--e) .18s backwards}
.motion .hero .app{animation:rise .7s var(--e) .2s backwards}
.motion .page-in{animation:rise .55s var(--e) .05s backwards}
/* state changes that ease instead of jump */
.motion .hdr{transition:background-color .25s ease,box-shadow .25s ease,border-color .25s ease}
.motion .hdr nav a{transition:color .15s}
.motion .pill-btn{transition:transform .15s}
.motion .cta{transition:transform .15s,filter .15s}
.motion .cta svg{transition:transform .15s}
.motion .pbtn{transition:transform .15s,filter .15s}
.motion .qa summary .ic{transition:transform .25s ease,background-color .2s}
.motion .wl-cap{transition:border-color .15s,box-shadow .15s}
.motion .wl-btn{transition:filter .15s,transform .15s}
.motion .poll button{transition:border-color .15s,color .15s,opacity .15s}
/* the window: entrance once it is on screen (motion.js adds .play), then the live loop */
.motion .app [data-in]{opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .5s var(--e);transition-delay:var(--d,0s)}
.motion .app.play [data-in]{opacity:1;transform:none}
.motion .rows{transition:transform .65s var(--e)}
.motion .row{transition:background-color .35s ease,border-color .35s ease}
.motion .row.new::after{animation:fadeOut 2.2s ease-out forwards}
.motion .row.sel::before{animation:bar .35s ease both}
.motion .live i{animation:blink 2.4s ease-in-out infinite}
.motion .live i.ping{animation:ping .8s ease-out}
.motion .app .b1::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%)}
.motion .app.play .dh .b1::after{animation:shine 1.1s ease-in-out 1.25s both}
/* a story swap: the shown story fades out (.hide); the next takes .on and enters with --ds (.swapping);
   a story that is not shown waits in its start position, so its entrance replays each time it returns */
.motion .app .story.swapping [data-in]{transition-delay:var(--ds,0s)}
.motion .app.play .story.hide [data-in]{opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease;transition-delay:0s}
.motion .app.play .story:not(.on) [data-in]{opacity:0;transform:translateY(6px);transition:none}
.motion .app .dh .b1.shine::after{animation:shine 1.1s ease-in-out .9s both}
/* off screen the window's loops pause */
.app.off *{animation-play-state:paused!important}
/* sections: entrance once the section is on screen (motion.js adds .in) */
.motion [data-section] [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .45s ease var(--d,0s),transform .6s var(--e) var(--d,0s),translate .25s var(--e),border-color .2s ease}
.motion [data-section].in [data-reveal]{opacity:1;transform:none}
/* insurance: if motion.js never runs (blocked, failed, no IntersectionObserver), the window and the sections
   still appear after 4 s. For sections it stands down once motion.js watches them (html.io), so a section
   revealed later by scrolling still plays its entrance. */
.motion .app:not(.play) [data-in]{animation:show .01s 4s forwards}
.motion:not(.io) [data-section]:not(.in) [data-reveal]{animation:show .01s 4s forwards}
/* pain: each scene plays once when its section comes in */
.v-gap .gapl{background:none}
.gapl::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--line-2) 0 6px,transparent 6px 12px);transform-origin:0 50%}
.dbc .tr.hit{position:relative}
.dbc .tr.hit::after{content:"";position:absolute;inset:0;background:var(--red);opacity:0;pointer-events:none}
.motion .pain.in .payc{animation:slideR .6s var(--e) .35s backwards}
.motion .pain.in .dbc{animation:slideL .6s var(--e) .45s backwards}
.motion .pain.in .gapl::before{animation:drawX .5s var(--e) .6s backwards}
.motion .pain.in .gapl i{animation:pop .5s var(--e) .95s backwards}
.motion .pain.in .gapl span{animation:fade .4s ease 1.1s backwards}
.motion .pain.in .dbc .tr.hit::after{animation:blip 1.2s ease 1.15s}
.v-err pre .msg,.v-err pre .at{display:block}
.motion .pain.in .v-err .lab{animation:fade .4s ease .3s backwards}
.motion .pain.in .v-err .e{animation:slideR .5s var(--e) .45s backwards}
.motion .pain.in .v-err .msg{animation:fade .6s ease .65s backwards}
.motion .pain.in .v-err .at{animation:fade .5s ease .9s backwards}
.motion .pain.in .v-hdr li{animation:slideR .45s var(--e) backwards}
.motion .pain.in .v-hdr li:nth-child(1){animation-delay:.45s}.motion .pain.in .v-hdr li:nth-child(2){animation-delay:.52s}.motion .pain.in .v-hdr li:nth-child(3){animation-delay:.59s}.motion .pain.in .v-hdr li:nth-child(4){animation-delay:.66s}.motion .pain.in .v-hdr li:nth-child(5){animation-delay:.73s}
.v-tun .old{position:relative;text-decoration:none}
.v-tun .old::after{content:"";position:absolute;left:.65em;right:.65em;top:50%;height:1.5px;margin-top:-.75px;background:var(--red);transform-origin:0 50%}
.motion .pain.in .v-tun .old{animation:fade .4s ease .5s backwards}
.motion .pain.in .v-tun .old::after{animation:drawX .45s var(--e) .85s backwards}
.motion .pain.in .v-tun .note{animation:fade .4s ease 1.1s backwards}
.motion .pain.in .v-tun .new{animation:pop .5s var(--e) 1.25s backwards}
.motion .pain.in .v-tun .plats{animation:rise .5s var(--e) 1.5s backwards}
.bub.ai{position:relative}
.bub.ai .txt{display:block}
.bub.ai .dots{position:absolute;left:.95em;top:50%;display:flex;gap:.3em;margin-top:-.22em;opacity:0}
.bub.ai .dots i{width:.45em;height:.45em;border-radius:50%;background:var(--dim)}
.motion .pain.in .bub.me{animation:slideL .5s var(--e) .55s backwards}
.motion .pain.in .bub.ai{animation:rise .5s var(--e) .9s backwards}
.motion .pain.in .bub.ai .dots{animation:dots 1s ease .9s}
.motion .pain.in .bub.ai .dots i{animation:bob .45s ease-in-out .95s 2}
.motion .pain.in .bub.ai .dots i:nth-child(2){animation-delay:1.03s}.motion .pain.in .bub.ai .dots i:nth-child(3){animation-delay:1.11s}
.motion .pain.in .bub.ai .txt{animation:fade .45s ease 1.85s backwards}
/* how it works */
.motion .sol.in .v-connect .urlf{animation:rise .5s var(--e) .35s backwards}
.motion .sol.in .provs span{animation:pop .4s var(--e) backwards}
.motion .sol.in .provs span:nth-child(1){animation-delay:.55s}.motion .sol.in .provs span:nth-child(2){animation-delay:.61s}.motion .sol.in .provs span:nth-child(3){animation-delay:.67s}.motion .sol.in .provs span:nth-child(4){animation-delay:.73s}.motion .sol.in .provs span:nth-child(5){animation-delay:.79s}
.motion .sol.in .relay{animation:fade .5s ease .95s backwards}
.motion .sol.in .v-check li{animation:slideR .45s var(--e) backwards}
.motion .sol.in .v-check li:nth-child(1){animation-delay:.45s}.motion .sol.in .v-check li:nth-child(2){animation-delay:.62s}.motion .sol.in .v-check li:nth-child(3){animation-delay:.79s}
.motion .sol.in .v-check .sg,.motion .sol.in .v-check .rc{animation:fade .35s ease backwards}
.motion .sol.in .v-check li:nth-child(1) .sg,.motion .sol.in .v-check li:nth-child(1) .rc{animation-delay:.72s}
.motion .sol.in .v-check li:nth-child(2) .sg,.motion .sol.in .v-check li:nth-child(2) .rc{animation-delay:.89s}
.motion .sol.in .v-check li:nth-child(3) .sg,.motion .sol.in .v-check li:nth-child(3) .rc{animation-delay:1.06s}
.motion .sol.in .v-fix .dg{animation:rise .5s var(--e) .55s backwards}
.motion .sol.in .v-fix .why{animation:fade .5s ease .72s backwards}
.motion .sol.in .v-fix .acts{animation:rise .5s var(--e) .9s backwards}
.motion .sol.in .v-fix .b1{animation:press .35s ease 1.55s}
.motion .sol.in .step .arrow{animation:nudgeX .6s ease-in-out 1.15s 2}
/* pricing and the final call to action: one light sweep across the green buttons */
.plan .badge,.pbtn.primary,.wl-btn{position:relative;overflow:hidden}
.plan .badge::after,.pbtn.primary::after,.wl-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.motion .pricing.in .plan .badge::after{animation:sweep 1s ease-in-out .9s}
.motion .pricing.in .pbtn.primary::after{animation:sweep 1.1s ease-in-out 1.3s}
.motion .wl.in .wl-btn::after{animation:sweep 1.1s ease-in-out 1.1s}
.motion .wl.in .wl-grid{animation:fade 1.2s ease .1s backwards}
.motion .wl.in .wl-card>.kicker{animation:rise .5s var(--e) .2s backwards}
.motion .wl.in .wl-card>h2{animation:rise .6s var(--e) .28s backwards}
.motion .wl.in .wl-card>.wl-sub{animation:rise .6s var(--e) .36s backwards}
.motion .wl.in .wl-card>.wl-form{animation:rise .6s var(--e) .44s backwards}
.motion .wl.in .wl-privacy{animation:fade .6s ease .6s backwards}
.motion .wl-ok:not([hidden]){animation:pop .45s var(--e)}
.motion .foot.in .foot-mark{animation:markUp 1.1s var(--e) .1s backwards}
/* hover lift only where there is a hover, then touch feedback (after it, so a press wins over a hover) */
@media (hover:hover){
 .motion .pill-btn:hover,.motion .cta:hover,.motion .pbtn:hover{transform:translateY(-1px)}
 .motion .cta:hover svg{transform:translateX(2px)}
 .motion .card:hover,.motion .plan:not(.best):hover,.motion .provgrid li:hover{translate:0 -3px;border-color:var(--line-2)}
 .motion .plan.best:hover{translate:0 -3px}
}
.motion .cta:active,.motion .pbtn:active,.motion .wl-btn:active,.motion .pill-btn:active{transform:scale(.98)}
@media (max-width:1024px){.motion .sol.in .step .arrow{animation-name:nudgeY}}
@media (max-width:760px){.gapl::before{background:repeating-linear-gradient(180deg,var(--line-2) 0 5px,transparent 5px 10px);transform-origin:50% 0}.motion .pain.in .gapl::before{animation-name:drawY}}