@font-face{ font-family:'Geist'; src:url(fonts/Geist-Variable.woff2) format('woff2'); font-weight:100 900; font-display:swap; }
@font-face{ font-family:'Geist Mono'; src:url(fonts/GeistMono-Variable.woff2) format('woff2'); font-weight:100 900; font-display:swap; }

:root{
  --bg:#F6F7F8; --surface:#FFFFFF; --surface-2:#ECEEF0;
  --ink:#121416; --muted:#565E66; --line:rgba(18,20,22,.11);
  --accent:#D43D0F; --on-accent:#FFFFFF;
  --shadow:0 1px 2px rgba(18,20,22,.05), 0 12px 32px -12px rgba(18,20,22,.16);

  --sans:'Geist',system-ui,-apple-system,sans-serif;
  --mono:'Geist Mono',ui-monospace,Menlo,monospace;

  /* Corners: controls 10px, surfaces 16px. */
  --r-c:10px; --r-s:16px;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);

  --gut:clamp(20px, 4vw, 40px);
  --sec:clamp(80px, 11vw, 148px);
  --nav:64px;
  --step:58px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#101214; --surface:#181B1E; --surface-2:#22262A;
    --ink:#F0F1F2; --muted:#A3ABB3; --line:rgba(255,255,255,.11);
    --accent:#FF6B3D; --on-accent:#1A0D07;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg); scroll-behavior:smooth; scroll-padding-top:calc(var(--nav) + 20px); -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.55 var(--sans); -webkit-font-smoothing:antialiased; text-wrap:pretty; overflow-x:clip; }
h1,h2,h3,p,ol,ul,dl,dd,figure,pre{ margin:0; padding:0; }
ol,ul{ list-style:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
::selection{ background:var(--accent); color:var(--on-accent); }
.skip{ position:fixed; left:12px; top:-60px; z-index:30; padding:10px 14px; background:var(--surface); border-radius:var(--r-c); }
.skip:focus{ top:12px; }

.wrap{ max-width:1200px; margin:0 auto; padding:0 var(--gut); }
.wrap--narrow{ max-width:calc(720px + var(--gut) * 2); }
.ic{ width:1em; height:1em; fill:currentColor; flex:none; }
.num{ font-variant-numeric:tabular-nums; letter-spacing:-.02em; }

h1{ font-size:clamp(42px, 4.5vw, 64px); font-weight:600; line-height:1.03; letter-spacing:-.04em; text-wrap:balance; }
h2{ font-size:clamp(32px, 3.8vw, 50px); font-weight:600; line-height:1.08; letter-spacing:-.032em; text-wrap:balance; max-width:20ch; }
h3{ font-size:18px; font-weight:600; letter-spacing:-.012em; }
.sub{ margin-top:16px; max-width:46ch; color:var(--muted); font-size:clamp(17px, 1.5vw, 19px); }
.note{ margin-top:18px; max-width:62ch; color:var(--muted); font-size:14px; line-height:1.5; }

/* ── buttons ── */
.btn{
  display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px;
  background:var(--accent); color:var(--on-accent); border-radius:var(--r-c);
  font-size:15.5px; font-weight:550; letter-spacing:-.01em; text-decoration:none; white-space:nowrap;
  transition:transform 160ms var(--ease-out), background-color 160ms ease;
}
.btn:active{ transform:scale(.97); }
.btn .ic{ transition:transform 200ms var(--ease-out); }
.btn--sm{ height:38px; padding:0 14px; font-size:14.5px; }
.btn--lg{ height:52px; padding:0 22px; font-size:17px; }
.btn--quiet{ background:var(--surface-2); color:var(--ink); }
@media (hover:hover) and (pointer:fine){
  .btn:hover{ background:color-mix(in srgb, var(--accent) 88%, var(--ink)); }
  .btn--quiet:hover{ background:color-mix(in srgb, var(--surface-2) 90%, var(--ink)); }
  .btn:hover .ic{ transform:translateX(2px); }
}

/* ── nav ── */
.nav{ position:fixed; inset:0 0 auto; z-index:20; height:var(--nav); background:color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%); box-shadow:0 1px 0 var(--line); }
.nav-in{ max-width:1200px; height:100%; margin:0 auto; padding:0 var(--gut); display:flex; align-items:center; gap:28px; }
.brand{ white-space:nowrap; font-weight:650; letter-spacing:-.02em; text-decoration:none; margin-right:auto; }
.nav-links{ display:flex; gap:24px; }
.nav-links a{ font-size:14.5px; color:var(--muted); text-decoration:none; transition:color 160ms ease; }
@media (hover:hover) and (pointer:fine){ .nav-links a:hover{ color:var(--ink); } }
.menu{ display:none; position:relative; width:44px; height:44px; margin-right:-10px; border-radius:var(--r-c); }
.menu .ic{ position:absolute; inset:0; margin:auto; width:22px; height:22px; transition:opacity 160ms ease, transform 160ms var(--ease-out); }
.menu .ic-close{ opacity:0; transform:scale(.8); }
.menu[aria-expanded="true"] .ic-open{ opacity:0; transform:scale(.8); }
.menu[aria-expanded="true"] .ic-close{ opacity:1; transform:none; }

/* ── hero ── */
.hero{ padding:calc(var(--nav) + clamp(40px, 7vh, 88px)) 0 clamp(48px, 7vh, 88px); }
.hero-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.08fr); gap:clamp(32px, 5vw, 72px); align-items:center; }
.lede{ margin-top:20px; max-width:34ch; color:var(--muted); font-size:clamp(18px, 1.6vw, 21px); line-height:1.45; }
.hero .btn{ margin-top:28px; }

@media (prefers-reduced-motion:no-preference){
  .in{ animation:rise 640ms var(--ease-out) both; animation-delay:calc(var(--i) * 70ms); }
  @keyframes rise{ from{ opacity:0; transform:translateY(12px); } }
}

/* before and after */
.compare{ position:relative; display:grid; overflow:hidden; border-radius:var(--r-s); background:var(--surface); box-shadow:var(--shadow), inset 0 0 0 1px var(--line); touch-action:pan-y; user-select:none; -webkit-user-select:none; cursor:ew-resize; }
.pane{ grid-area:1 / 1; display:flex; flex-direction:column; min-width:0; }
.pane--notes{ background:var(--surface-2); }
.pane--report{ background:var(--surface); clip-path:inset(0 0 0 30%); }
.pane-head{ display:flex; justify-content:space-between; gap:16px; padding:16px 20px 0; font-size:13.5px; font-weight:550; color:var(--muted); }
.pane--report .pane-head{ justify-content:flex-end; }
.pane--report .pane-head .num{ color:var(--accent); }
.pane pre{ padding:18px 20px 24px; font:400 clamp(13px, 1.15vw, 15px)/1.75 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; }
.report{ padding:16px 20px 24px calc(30% + 24px); font-size:clamp(14px, 1.2vw, 15.5px); line-height:1.5; }
.report p + p, .report ul + p{ margin-top:9px; }
.report-t{ font-size:1.2em; font-weight:600; letter-spacing:-.02em; margin-bottom:12px; }
.report b{ display:block; font-weight:600; }
.report ul{ margin-top:3px; }
.report li + li{ margin-top:3px; }
.seam{ position:absolute; inset:0; transform:translateX(30%); pointer-events:none; will-change:transform; }
.seam::before{ content:""; position:absolute; inset:0 auto 0 -1px; width:2px; background:var(--accent); }
.grip{ position:absolute; left:-22px; top:50%; width:44px; height:44px; margin-top:-22px; display:grid; place-items:center; pointer-events:auto; touch-action:none; cursor:ew-resize; background:var(--accent); color:var(--on-accent); border-radius:50%; font-size:20px; box-shadow:0 2px 8px rgba(18,20,22,.25); transition:transform 160ms var(--ease-out); }
.grip:active{ transform:scale(.94); }
.compare-fig figcaption{ margin-top:12px; font-size:14px; color:var(--muted); }

/* ── sections ── */
section:not(.hero){ padding-top:var(--sec); }
.js [data-r]{ opacity:0; transform:translateY(12px); transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.js [data-r].seen{ opacity:1; transform:none; }

.stats{ margin-top:clamp(36px, 5vw, 64px); display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:32px clamp(24px, 3.4vw, 48px); align-items:end; }
.stat dt{ font:600 clamp(40px, 4.4vw, 60px)/1 var(--sans); letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.stat--big dt{ font-size:clamp(84px, 11vw, 148px); color:var(--accent); }
.stat dd{ margin-top:12px; font-size:15.5px; color:var(--muted); line-height:1.45; }
.stat cite{ display:block; margin-top:6px; font-style:normal; font-size:13px; opacity:.85; }

.tools-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(36px, 6vw, 88px); align-items:center; }
.tray{ padding:14px; border:1px dashed var(--line); border-radius:calc(var(--r-s) + 6px); }
.stack{ position:relative; height:calc(var(--step) * 4 + 100px); }
.tool{ padding:14px 18px; background:var(--surface); border-radius:var(--r-s); box-shadow:var(--shadow), inset 0 0 0 1px var(--line); }
.tool-top{ display:flex; justify-content:space-between; gap:14px; font-size:16px; }
.tool-top b{ font-weight:600; letter-spacing:-.012em; }
.tool-top .num{ color:var(--accent); }
.tool p{ margin-top:12px; font-size:14.5px; color:var(--muted); transition:opacity 200ms ease; }
.js .tool:not(.front) p{ opacity:0; }
/* Without JS the tools are a plain list. */
.tool + .tool{ margin-top:8px; }
.js .stack .tool{ position:absolute; inset:0 0 auto; height:100px; margin:0; opacity:0; transform-origin:top center; transition:transform 460ms var(--ease-drawer), opacity 300ms ease; }
.js .stack .tool.on{ opacity:1; }
html:not(.js) .stack{ height:auto; }

.odo{ display:none; }
.js .odo{ display:flex; margin-top:28px; font:600 clamp(60px, 7.4vw, 96px)/1.05 var(--sans); letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.js .odo-fallback{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.odo-fallback{ margin-top:28px; font:600 clamp(40px, 5vw, 60px)/1.1 var(--sans); letter-spacing:-.04em; }
.digit{ display:block; height:1.05em; overflow:hidden; }
.reel{ display:block; transition:transform 560ms var(--ease-drawer); }
.reel span{ display:block; height:1.05em; }
.count{ margin-top:8px; font-size:15px; color:var(--muted); }
#build{ margin-top:22px; display:none; }
.js #build{ display:inline-flex; }
.swap{ display:grid; }
.swap > span{ grid-area:1 / 1; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:opacity 200ms ease, filter 200ms ease, transform 200ms var(--ease-out); }
.swap-b, #build.done .swap-a{ opacity:0; filter:blur(3px); transform:scale(.96); }
#build.done .swap-b{ opacity:1; filter:none; transform:none; }

/* tabs: the active copy is clipped to the tab, so the colour change is seamless */
.tabs{ margin-top:clamp(28px, 4vw, 44px); overflow-x:auto; scrollbar-width:none; margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut); }
.tabs::-webkit-scrollbar{ display:none; }
.tabs-in{ position:relative; width:max-content; }
.tablist{ display:flex; gap:4px; }
.tablist button, .tablist span{ display:block; padding:11px 16px; font-size:15.5px; font-weight:500; letter-spacing:-.01em; white-space:nowrap; border-radius:var(--r-c); }
.tablist button{ color:var(--muted); transition:color 160ms ease; }
@media (hover:hover) and (pointer:fine){ .tablist button:hover{ color:var(--ink); } }
.tablist--on{ position:absolute; inset:0; background:var(--ink); color:var(--bg); border-radius:var(--r-c); pointer-events:none; clip-path:inset(0 100% 0 0 round var(--r-c)); transition:clip-path 300ms var(--ease-in-out); }
.instant, .instant *{ transition:none !important; }
.panels{ margin-top:16px; display:grid; padding:clamp(24px, 3.4vw, 40px); background:var(--surface); border-radius:var(--r-s); box-shadow:var(--shadow), inset 0 0 0 1px var(--line); }
.panel{ grid-area:auto; display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(0, 1fr); gap:24px clamp(24px, 5vw, 72px); align-items:center; }
.panel + .panel{ margin-top:24px; }
.js .panel{ grid-area:1 / 1; margin:0; transition:opacity 220ms ease, filter 220ms ease, visibility 0s; }
.js .panel:not(.on){ opacity:0; filter:blur(4px); visibility:hidden; transition:opacity 150ms ease, filter 150ms ease, visibility 0s 150ms; }
.panel > p{ font-size:clamp(22px, 2.5vw, 32px); font-weight:500; line-height:1.22; letter-spacing:-.022em; }
.panel dl{ display:grid; grid-template-columns:auto 1fr; gap:24px; }
.panel dt{ font-size:14px; color:var(--muted); }
.panel dd{ margin-top:4px; font-size:26px; font-weight:600; line-height:1.15; letter-spacing:-.03em; }

.bento{ margin-top:clamp(32px, 4.4vw, 52px); display:grid; grid-template-columns:repeat(12, minmax(0, 1fr)); gap:12px; }
.cell{ grid-column:span 4; padding:clamp(22px, 2.6vw, 30px); background:var(--surface); border-radius:var(--r-s); box-shadow:inset 0 0 0 1px var(--line); font-size:15.5px; color:var(--muted); }
.cell h3{ color:var(--ink); }
.cell--lead{ grid-column:span 5; grid-row:span 2; display:flex; flex-direction:column; background:var(--accent); color:var(--on-accent); box-shadow:none; }
.cell--lead h3, .cell--lead .was{ color:inherit; }
.cell--lead .price{ margin-top:auto; padding-top:56px; font-size:clamp(60px, 7.2vw, 92px); }
.cell--lead > p:last-child{ font-size:17px; line-height:1.45; }
.cell--wide{ grid-column:span 7; }
.cell--tint{ grid-column:span 3; background:var(--surface-2); box-shadow:none; }
.price{ margin:14px 0 2px; color:var(--ink); font-size:38px; line-height:1.1; font-weight:600; letter-spacing:-.035em; }
.cell--lead .price{ color:inherit; }
.price--text{ font-family:var(--sans); font-size:17px; font-weight:600; letter-spacing:-.012em; line-height:1.3; }
.was{ font-size:14px; color:var(--muted); }
.cell > p:last-child{ margin-top:12px; }
.after{ margin-top:24px; max-width:66ch; color:var(--muted); font-size:15.5px; }

.promise h2{ max-width:17em; margin:0 auto; font-size:clamp(36px, 5.6vw, 72px); line-height:1.04; letter-spacing:-.04em; text-align:center; }
.terms{ max-width:980px; margin:clamp(32px, 5vw, 56px) auto 0; display:grid; grid-template-columns:1fr 1.7fr 1fr; gap:24px clamp(24px, 4vw, 56px); font-size:15.5px; color:var(--muted); }
.terms b{ display:block; color:var(--ink); font-weight:600; margin-bottom:4px; }

.math-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(32px, 6vw, 80px); align-items:center; }
.calc{ margin-top:28px; display:grid; gap:14px; }
.field{ display:grid; grid-template-columns:1fr auto; align-items:baseline; column-gap:12px; }
.field label{ font-size:15px; }
.field output{ font-size:17px; font-weight:600; }
.field input{ grid-column:1 / -1; width:100%; height:44px; margin:0; background:none; cursor:grab; -webkit-appearance:none; appearance:none; }
.field input:active{ cursor:grabbing; }
.field input::-webkit-slider-runnable-track{ height:4px; background:var(--surface-2); border-radius:2px; box-shadow:inset 0 0 0 1px var(--line); }
.field input::-moz-range-track{ height:4px; background:var(--surface-2); border-radius:2px; }
.field input::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; margin-top:-9px; border:0; border-radius:50%; background:var(--ink); transition:transform 160ms var(--ease-out); }
.field input::-moz-range-thumb{ width:22px; height:22px; border:0; border-radius:50%; background:var(--ink); }
.field input:active::-webkit-slider-thumb{ transform:scale(1.14); }
.result{ padding:clamp(24px, 3.4vw, 40px); background:var(--surface); border-radius:var(--r-s); box-shadow:var(--shadow), inset 0 0 0 1px var(--line); }
.result-l{ font-size:15px; color:var(--muted); }
.result-big{ margin:6px 0 22px; font-size:clamp(48px, 6.4vw, 80px); font-weight:600; line-height:1.05; letter-spacing:-.05em; color:var(--accent); }
.result-row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:12px 0; box-shadow:inset 0 1px 0 var(--line); font-size:15.5px; }
.result-row b{ font-size:19px; font-weight:600; white-space:nowrap; }

.who-list{ margin-top:clamp(28px, 4vw, 44px); border-top:1px solid var(--line); }
.who-list > div{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2fr); gap:6px 32px; padding:22px 0; }
.who-list h3{ font-size:clamp(20px, 2vw, 24px); letter-spacing:-.022em; }
.who-list p{ max-width:60ch; color:var(--muted); }

.versus table{ width:100%; margin-top:clamp(28px, 4vw, 44px); border-collapse:collapse; font-size:15.5px; }
.versus th, .versus td{ padding:14px 16px; text-align:left; vertical-align:top; font-weight:400; }
.versus thead th{ padding-block:0 10px; font-size:13.5px; color:var(--muted); }
.versus tbody th{ font-weight:600; width:27%; }
.versus td{ color:var(--muted); }
.versus tbody tr:not(.us) > *{ box-shadow:inset 0 1px 0 var(--line); }
.versus .us > *{ background:var(--surface-2); color:var(--ink); font-weight:550; }
.versus .us > :first-child{ border-radius:var(--r-c) 0 0 var(--r-c); }
.versus .us > :last-child{ border-radius:0 var(--r-c) var(--r-c) 0; }

.qs{ margin-top:clamp(24px, 3.4vw, 36px); border-top:1px solid var(--line); }
.q{ border-bottom:1px solid var(--line); }
.q h3 button{ width:100%; min-height:60px; padding:14px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; text-align:left; font-size:17px; font-weight:550; letter-spacing:-.012em; }
.q .ic{ color:var(--muted); font-size:18px; transition:transform 220ms var(--ease-out); }
.q button[aria-expanded="true"] .ic{ transform:rotate(45deg); }
.a{ display:grid; grid-template-rows:1fr; }
.js .a{ grid-template-rows:0fr; transition:grid-template-rows 240ms var(--ease-in-out); }
.js .q.open .a{ grid-template-rows:1fr; }
.a > div{ overflow:hidden; min-height:0; }
.js .q:not(.open) .a > div{ visibility:hidden; transition:visibility 0s 240ms; }
.a p{ padding-bottom:18px; color:var(--muted); max-width:60ch; }

.close{ padding-bottom:var(--sec); }
.close h2{ font-size:clamp(44px, 7.4vw, 96px); letter-spacing:-.045em; line-height:1; max-width:none; }
.close .sub{ margin-top:20px; }
.close .btn{ margin-top:28px; }
.mail{ margin-top:16px; font-size:15px; color:var(--muted); }
.mail a{ color:var(--ink); text-underline-offset:3px; }

.foot{ padding:28px 0 36px; box-shadow:inset 0 1px 0 var(--line); font-size:13.5px; color:var(--muted); }
.foot p + p{ margin-top:6px; }

/* ── collapse ── */
@media (max-width:960px){
  .hero-grid, .tools-grid, .math-grid{ grid-template-columns:minmax(0, 1fr); }
  .stats{ grid-template-columns:1fr 1fr; }
  .stat--big{ grid-column:1 / -1; }
  .cell, .cell--lead, .cell--wide, .cell--tint{ grid-column:span 12; grid-row:auto; }
  .cell--lead .price{ padding-top:32px; }
  .terms{ grid-template-columns:1fr; }
  .promise h2{ text-align:left; margin:0; }
  .terms{ margin-inline:0; }
}
@media (max-width:760px){
  .nav-in{ gap:6px; }
  .menu{ display:block; }
  /* Opens from the button, and leaves faster than it arrives. */
  .nav-links{
    position:absolute; top:calc(var(--nav) - 6px); right:var(--gut); width:210px; padding:6px;
    flex-direction:column; gap:0; background:var(--surface); border-radius:var(--r-s); box-shadow:var(--shadow), inset 0 0 0 1px var(--line);
    transform-origin:top right; opacity:0; transform:scale(.96); visibility:hidden;
    transition:opacity 120ms ease, transform 120ms var(--ease-out), visibility 0s 120ms;
  }
  .nav-links.open{ opacity:1; transform:none; visibility:visible; transition:opacity 180ms ease, transform 180ms var(--ease-out); }
  .nav-links a{ padding:12px; font-size:16px; color:var(--ink); }
  .panel, .who-list > div{ grid-template-columns:minmax(0, 1fr); }
  .versus table, .versus tbody, .versus tr, .versus th, .versus td{ display:block; }
  .versus thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .versus tbody tr{ padding:14px 0; }
  .versus tbody tr:not(.us){ box-shadow:inset 0 1px 0 var(--line); }
  .versus tbody tr:not(.us) > *{ box-shadow:none; }
  .versus tbody th{ width:auto; }
  .versus th, .versus td{ padding:0; }
  .versus .us{ padding:14px; background:var(--surface-2); border-radius:var(--r-c); }
  .versus .us > *{ background:none; border-radius:0 !important; }
}
@media (max-width:480px){
  h1{ font-size:10.7vw; }
}
@media (max-width:360px){
  .nav .btn--sm{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js [data-r]{ opacity:1; transform:none; transition:none; }
  .js .stack .tool, .reel, .tablist--on, .js .a, .seam{ transition:none; }
  .js .panel{ filter:none !important; }
}