@font-face{font-family:'Syne';font-weight:700;font-display:swap;src:url(/assets/fonts/Syne-700.woff2) format('woff2')}
@font-face{font-family:'Syne';font-weight:800;font-display:swap;src:url(/assets/fonts/Syne-800.woff2) format('woff2')}
:root{
--paper:#ECEAE3; --ink:#141310; --sub:#5b574d; --line:#141310; --accent:#1B2AE0; --card:#F5F3EC;
--disp:'Syne',system-ui,sans-serif; --body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media(prefers-color-scheme:dark){:root{--paper:#121110;--ink:#EDEAE1;--sub:#9a958a;--line:#EDEAE1;--accent:#8f97ff;--card:#1a1917;}}
:root[data-theme="light"]{--paper:#ECEAE3;--ink:#141310;--sub:#5b574d;--line:#141310;--accent:#1B2AE0;--card:#F5F3EC;}
:root[data-theme="dark"]{--paper:#121110;--ink:#EDEAE1;--sub:#9a958a;--line:#EDEAE1;--accent:#8f97ff;--card:#1a1917;}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
a{color:inherit}
.disp{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:.9}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
hr.rule{border:0;border-top:1.5px solid var(--line);margin:0;opacity:.9}
/* nav */
nav{display:flex;align-items:center;gap:20px;padding:22px 0}
nav .mark{font-family:var(--disp);font-weight:800;font-size:26px;letter-spacing:-.04em}
nav .mark .d{color:var(--accent)}
nav .sp{flex:1}
nav a.link{text-decoration:none;color:var(--sub);font-size:14px;font-weight:600}
@media(max-width:640px){nav a.link{display:none}}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:var(--paper);
text-decoration:none;font-weight:700;font-size:15px;padding:11px 18px;border-radius:2px;border:1.5px solid var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
/* hero */
header.hero{padding:clamp(24px,6vw,80px) 0 clamp(40px,7vw,96px)}
.hero .eyebrow{color:var(--accent)}
/* `overflow-wrap:break-word` here allowed a break INSIDE "handled." — at ~1440px the
final full stop landed alone on a fourth line and read as a stray black block under
the headline. The headline is two deliberate lines (there is a
); it should never
break a word. 138px is the largest size at which both lines fit the 952px measure at
1440px, which is where it was overflowing. */
h1{font-family:var(--disp);font-weight:800;letter-spacing:-.045em;line-height:.86;
font-size:clamp(40px,11.4vw,138px);margin:.18em 0 .1em;
overflow-wrap:normal;text-wrap:balance}
.tag{font-family:var(--disp);font-weight:700;font-size:clamp(20px,3.6vw,34px);letter-spacing:-.02em;color:var(--ink);margin:0}
.lead{font-size:clamp(18px,2.2vw,22px);color:var(--sub);max-width:50ch;margin:20px 0 28px}
.herocta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.note{font-size:13px;color:var(--sub)}
section{padding:clamp(46px,7vw,92px) 0}
.kick{display:flex;gap:14px;align-items:baseline;margin-bottom:clamp(22px,3vw,40px)}
.kick .no{font-family:var(--disp);font-weight:800;color:var(--accent);font-size:14px}
/* At 320px the 32px floor cannot fit "automatically." in a 280px measure, and the page
scrolled sideways. Hyphenation only engages when a word genuinely will not fit — so
nothing changes at 390px and up — and a hyphenated break reads as typography where a
horizontally scrolling page reads as broken. */
h2{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:.98;font-size:clamp(32px,6vw,64px);margin:0;text-wrap:balance;
overflow-wrap:break-word;hyphens:auto}
p.big{font-size:clamp(19px,2.4vw,26px);color:var(--sub);max-width:34ch}
/* value rows — the money-first list, plain, no cards */
.val{display:grid;gap:0;margin-top:8px}
.v{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:26px 0;border-top:1.5px solid var(--line);align-items:start}
.v .n{font-family:var(--disp);font-weight:800;font-size:clamp(28px,4vw,44px);color:var(--accent);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.v h3{font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.6vw,27px);letter-spacing:-.02em;margin:.1em 0 .3em}
.v p{margin:0;color:var(--sub);max-width:60ch}
.v:last-child{border-bottom:1.5px solid var(--line)}
.cols{display:grid;gap:0}
@media(min-width:760px){.cols{grid-template-columns:repeat(3,1fr)}}
.col{padding:24px 0}
@media(min-width:760px){.col{padding:6px 34px 6px 0;border-right:1.5px solid var(--line)}.col:last-child{border-right:0}}
.col h4{font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:-.02em;margin:0 0 8px}
.col p{color:var(--sub);font-size:16px;margin:0}
.willwont{display:grid;gap:0}
@media(min-width:720px){.willwont{grid-template-columns:1fr 1fr}}
.wc{padding-top:10px}
@media(min-width:720px){.wc.a{padding-right:36px;border-right:1.5px solid var(--line)}.wc.b{padding-left:36px}}
.wc .hd{font-family:var(--disp);font-weight:800;font-size:clamp(30px,5vw,52px);letter-spacing:-.03em}
.wc.b .hd{color:var(--accent)}
.li{padding:12px 0;border-top:1.5px solid var(--line);font-size:15.5px}
/* pricing */
.price{display:grid;gap:16px;margin-top:12px}
@media(min-width:820px){.price{grid-template-columns:repeat(3,1fr)}}
.tier{border:1.5px solid var(--line);border-radius:3px;padding:22px}
.tier.feat{background:var(--ink);color:var(--paper)}
.tier .nm{font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:-.02em}
.tier .pr{font-family:var(--disp);font-weight:800;font-size:38px;letter-spacing:-.03em;margin:10px 0 4px}
.tier .pr small{font-size:15px;font-weight:600;color:var(--sub)}
.tier.feat .pr small{color:#c9cbe8}
.tier ul{list-style:none;padding:0;margin:12px 0 0;font-size:14.5px;color:var(--sub)}
.tier.feat ul{color:#d7d8e6}
.tier li{padding:5px 0;border-top:1px solid rgba(120,120,120,.25)}
/* faq */
.qa{border-top:1.5px solid var(--line);padding:22px 0}
.qa:last-of-type{border-bottom:1.5px solid var(--line)}
@media(min-width:820px){.qa{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:32px}}
.qa .q{font-family:var(--disp);font-weight:700;font-size:clamp(19px,2.2vw,24px);letter-spacing:-.02em}
.qa .a{color:var(--sub);max-width:58ch}
/* waitlist */
.cta{background:var(--ink);color:var(--paper);border-radius:4px;padding:clamp(28px,5vw,56px);margin:24px 0}
.cta h2{color:var(--paper)}
.form{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;max-width:520px}
.form input{flex:1;min-width:220px;background:transparent;border:1.5px solid var(--paper);color:var(--paper);
border-radius:2px;padding:13px 14px;font:inherit;font-size:16px}
.form input::placeholder{color:#b9b6ad}
.form button{background:var(--accent);color:#fff;border:0;border-radius:2px;padding:13px 20px;font:inherit;font-weight:700;cursor:pointer}
#msg{margin-top:12px;font-size:14px;color:#c9cbe8;min-height:1em}
footer{padding:40px 0 70px;color:var(--sub);font-size:13.5px;border-top:1.5px solid var(--line);display:flex;gap:16px;flex-wrap:wrap;align-items:baseline}
footer .sp{flex:1}
/* ══ MOTION ═══════════════════════════════════════════════════════════════
Rules this obeys, so that later edits keep obeying them:
1. Compositor-only properties — opacity, transform, clip-path. Never a shadow,
never a filter. Animating a shadow IS glossiness; it is banned structurally
rather than by taste, so there is nothing to argue about later.
2. Entrance travel is 10-16px. Never 40. Long travel is the clearest tell of a
template.
3. Two easings only. Entrances cubic-bezier(.2,.7,0,1); state changes
cubic-bezier(.4,0,.2,1). 160-220ms interaction, 420-700ms entrance.
4. No library. No GSAP, no Framer, and emphatically no smooth-scroll library —
they fight prefers-reduced-motion and break iOS momentum scrolling.
5. The hidden state is applied only under .js, which script adds. If the script
fails, is blocked, or is slow, the page renders complete rather than blank.
6. The vocabulary is the page's own: type being set and rules being ruled. The
signature move is a hairline drawing itself from the left, not a card floating.
════════════════════════════════════════════════════════════════════════ */
:root{--e-in:cubic-bezier(.2,.7,0,1);--e-state:cubic-bezier(.4,0,.2,1)}
/* ── interaction: there were ZERO :hover and ZERO :focus rules before this ── */
/* A real focus ring everywhere. Not negotiable, and previously absent entirely. */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}
nav a.link{background-image:linear-gradient(currentColor,currentColor);
background-size:0% 1.5px;background-position:0 100%;background-repeat:no-repeat}
/* NB: linear-gradient here is a 1.5px solid rule, not a gradient *look*. It is the
standard way to animate an underline's width. Do not "fix" it. */
.btn .arw{display:inline-block}
.qa summary::marker,.qa summary::-webkit-details-marker{content:"";display:none}
@media(hover:hover){
nav a.link:hover{background-size:100% 1.5px;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.accent:hover .arw{transform:translateX(3px)}
.tier:hover{border-color:var(--accent)}
.v:hover .n{transform:translateX(2px)}
}
/* A hover state stuck "on" after a tap is the commonest mobile animation bug, so
touch devices get a press response instead and no hover transforms at all. */
@media(hover:none){
.btn:active{opacity:.75}
.form button:active{opacity:.75}
}
@media(prefers-reduced-motion:no-preference){
html{scroll-behavior:smooth}
nav a.link,.btn,.btn .arw,.tier,.v .n,.form button,.form input{
transition:background-size .22s var(--e-state),background-color .16s var(--e-state),
color .16s var(--e-state),border-color .18s var(--e-state),
transform .18s var(--e-state),opacity .18s var(--e-state)}
/* ── scroll reveal ──
One shared IntersectionObserver, threshold 0 with a negative bottom margin.
Threshold 0 matters on mobile specifically: a tall row may never reach 25%
visibility inside a short viewport, and would then never reveal. */
.js .reveal{opacity:0;transform:translateY(14px);
transition:opacity .62s var(--e-in),transform .62s var(--e-in);
transition-delay:calc(var(--i,0) * 60ms)}
.js .reveal.in{opacity:1;transform:none}
/* The signature move: hairline rules draw themselves from the left. */
.js hr.rule{transform:scaleX(0);transform-origin:left;transition:transform .6s var(--e-in)}
.js hr.rule.in{transform:scaleX(1)}
/* Hero: the h1 is the LCP element, so it paints instantly at final position. A
per-line mask reveal would cost ~400-700ms of LCP on 4G for a nicety. Everything
around it staggers instead, which reads the same and costs nothing. */
.js .hero .eyebrow,.js .hero .tag,.js .hero .lead,
.js .hero .herocta,.js .hero .note{
opacity:0;transform:translateY(12px);
animation:heroIn .6s var(--e-in) forwards}
.js .hero .eyebrow{animation-delay:.05s}
.js .hero .tag {animation-delay:.12s}
.js .hero .lead {animation-delay:.19s}
.js .hero .herocta{animation-delay:.26s}
.js .hero .note {animation-delay:.33s}
@keyframes heroIn{to{opacity:1;transform:none}}
.qa[open] .marker{transform:rotate(45deg)}
.marker{transition:transform .2s var(--e-state)}
.navpanel{transition:clip-path .24s var(--e-in)}
.navpanel a{opacity:0;transform:translateY(10px);
transition:opacity .3s var(--e-in),transform .3s var(--e-in);
transition-delay:calc(var(--i,0) * 40ms)}
.navpanel.open a{opacity:1;transform:none}
#msg{transition:opacity .2s var(--e-state)}
}
/* ── FAQ accordion ──
Real / for free keyboard support and semantics. The panel
animates grid-template-rows 0fr -> 1fr; the max-height:999px hack eases visibly
wrongly and is not used. */
.qa{list-style:none}
.qa summary{list-style:none;cursor:pointer;display:flex;gap:16px;align-items:baseline}
.qa summary::-webkit-details-marker{display:none}
.qa .marker{font-family:var(--disp);font-weight:700;color:var(--accent);
font-size:22px;line-height:1;margin-left:auto;flex:none}
.qa .panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s var(--e-state)}
.qa[open] .panel{grid-template-rows:1fr}
.qa .panel > div{overflow:hidden}
@media(prefers-reduced-motion:reduce){.qa .panel{transition:none}}
/* Desktop reads as an editorial page, so every answer is open and the disclosure
control is hidden. Mobile collapses, because scrolling past four open answers to
reach the pricing is worse than one tap. */
@media(min-width:820px){
.qa .panel{grid-template-rows:1fr}
.qa .marker{display:none}
.qa summary{cursor:default}
}
/* ── mobile navigation ──
Previously `nav a.link{display:none}` below 640px with NO replacement: the mobile
site had no navigation at all. The control is a word, not a hamburger, because an
editorial design navigates with type. */
.navtoggle{display:none;background:none;border:0;padding:6px 0;margin-left:auto;
font:inherit;font-weight:700;font-size:14px;color:var(--ink);cursor:pointer;
font-family:var(--disp);letter-spacing:-.01em}
.navpanel{position:fixed;inset:0;background:var(--paper);z-index:60;
padding:78px clamp(20px,7vw,44px);display:flex;flex-direction:column;gap:4px;
clip-path:inset(0 0 100% 0)}
.navpanel.open{clip-path:inset(0 0 0 0)}
/* `display:flex` above beats the `hidden` attribute, which left the closed menu in
the accessibility tree — a screen reader announced every nav link twice, and the
links were reachable by Tab from behind a panel nobody could see. */
.navpanel[hidden]{display:none}
.navpanel a{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;
font-size:clamp(30px,8.5vw,52px);text-decoration:none;padding:8px 0;color:var(--ink)}
.navpanel .close{position:absolute;top:22px;right:clamp(20px,7vw,44px);
background:none;border:0;font:inherit;font-family:var(--disp);font-weight:700;
font-size:14px;color:var(--ink);cursor:pointer;padding:6px 0}
@media(max-width:640px){
.navtoggle{display:block}
nav .btn.ghost{display:none}
}
@media(min-width:641px){.navpanel{display:none}}
body.navopen{overflow:hidden}
/* ── reading progress: CSS scroll-driven, zero JS, degrades to nothing ── */
@supports (animation-timeline:scroll()){
@media(prefers-reduced-motion:no-preference){
.progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--accent);
transform-origin:left;transform:scaleX(0);z-index:70;
animation:prog linear;animation-timeline:scroll()}
@keyframes prog{to{transform:scaleX(1)}}
}
}
/* ── form states ── */
.form button[disabled]{opacity:.6;cursor:progress}
.form.err input{border-color:var(--accent)}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
padding:10px 16px;z-index:80}
.skip:focus{left:8px;top:8px}
/* ── legal pages ──────────────────────────────────────────────────────────
Same editorial language as the marketing page: hairline rules, Syne for
headings, one accent. A privacy policy nobody can read is a dark pattern
with extra steps, so the measure is capped and the type is the body size,
not the fine-print size. */
.legal{max-width:72ch;padding:clamp(28px,5vw,56px) 0 clamp(56px,8vw,96px)}
.legal h1{font-family:var(--disp);font-weight:800;letter-spacing:-.03em;line-height:.95;
font-size:clamp(34px,6vw,64px);margin:0 0 10px}
.legal .meta{color:var(--sub);font-size:14px;margin:0 0 28px}
.legal h2{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;
font-size:clamp(20px,2.6vw,27px);margin:40px 0 10px;padding-top:20px;
border-top:1.5px solid var(--line)}
.legal h3{font-size:17px;font-weight:700;margin:24px 0 6px}
.legal p,.legal li{color:var(--ink)}
.legal li{margin:6px 0}
.legal ul{padding-left:20px}
.legal a{color:var(--accent);text-underline-offset:3px}
.legal table{border-collapse:collapse;width:100%;margin:14px 0;font-size:15px;display:block;overflow-x:auto}
.legal th,.legal td{text-align:left;padding:9px 12px 9px 0;border-bottom:1px solid var(--line);
vertical-align:top}
.legal th{font-weight:700;white-space:nowrap}
.legal .callout{border-left:2px solid var(--accent);padding:2px 0 2px 16px;margin:18px 0;color:var(--sub)}
.legal .toc{font-size:15px;columns:2;column-gap:32px;margin:0 0 8px;padding-left:18px}
@media(max-width:640px){.legal .toc{columns:1}}
/* footer legal links */
footer .legal-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px;font-size:14px}
footer .legal-links a{color:var(--sub);text-decoration:none}