/* start.css: the /start/ landing page. Built to the landing-page-design skill (elayadesign/ai-design-skills):
   Geist only, Tailwind type steps with their paired line heights, the spacing table below, Tailwind radii,
   flat backgrounds from the skill's dark list, one ease curve. Ember is the one accent. */

@font-face{font-family:Geist;src:url(/assets/fonts/geist-regular.ttf) format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Geist;src:url(/assets/fonts/geist-semibold.ttf) format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Geist;src:url(/assets/fonts/geist-bold.ttf) format("truetype");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* surfaces: only the skill's dark list */
  --bg:#131209; --surface:#1F1F1F; --surface-2:#272727; --deep:#000000;
  --text:#F2EFE9; --mute:#B8B8BC; --faint:#8A8A8E;
  --ember:#FF6024; --ember-hover:#FF732E; --ink:#131209;
  --line:rgba(255,255,255,.08); --wash:rgba(255,255,255,.06);
  /* spacing table */
  --s25:2px; --s50:4px; --s75:8px; --s100:12px; --s200:16px; --s300:24px; --s400:32px;
  --s500:40px; --s600:48px; --s700:64px; --s800:80px; --s900:96px;
  /* Tailwind radii */
  --r-lg:8px; --r-xl:12px; --r-2xl:16px; --r-3xl:24px; --r-full:9999px;
  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:var(--s200);
  color-scheme:dark;
}
@media (min-width:640px){:root{--gutter:var(--s300)}}
@media (min-width:1024px){:root{--gutter:var(--s400)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--s900)}
body{margin:0;background:var(--bg);color:var(--text);font-family:Geist,system-ui,sans-serif;font-weight:400;
  font-size:16px;line-height:24px;font-synthesis:none;-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
h1,h2,h3{text-wrap:balance;font-weight:600}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
em,i,cite,blockquote,address{font-style:normal}
:focus-visible{outline:2px solid var(--text);outline-offset:2px}
::selection{background:var(--ember);color:var(--ink)}
html{scrollbar-color:var(--surface-2) var(--bg);accent-color:var(--ember);caret-color:var(--ember)}

.skip{position:absolute;left:var(--s200);top:var(--s200);z-index:60;padding:var(--s75) var(--s100);border-radius:var(--r-full);
  background:var(--text);color:var(--ink);font-size:14px;line-height:20px;font-weight:600;text-decoration:none;transform:translateY(-200%)}
.skip:focus{transform:none}

.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--gutter)}
.fine{font-size:14px;line-height:20px;color:var(--faint)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.br-wide,.br-sm{display:none}
@media (min-width:640px){.br-sm{display:inline}}
@media (min-width:1024px){.br-wide{display:inline}}

/* buttons: 8px by 12px, semibold, base on the page and sm in the nav */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:var(--s75) var(--s100);border-radius:var(--r-full);
  background:var(--ember);color:var(--ink);font-size:16px;line-height:24px;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background-color 300ms var(--ease),transform 500ms var(--ease)}
.btn:hover{background:var(--ember-hover);transform:translateY(-2px)}
.btn:active{transform:scale(.98)}
.btn-sm{font-size:14px;line-height:20px}
.btn::after,.nav-toggle::after{content:"";position:absolute;inset:-4px 0}  /* a 44px touch target; the padding stays 8 by 12 */
.nav-toggle::after{inset:-4px}

/* floating nav */
.nav-shell{position:fixed;inset-inline:0;top:var(--s200);z-index:50;display:flex;justify-content:center;padding-inline:var(--s200);pointer-events:none}
.nav{pointer-events:auto;display:flex;align-items:center;gap:var(--s50);padding:var(--s75);border-radius:var(--r-full);
  background:rgba(31,31,31,.9);border:1px solid var(--line);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%)}
.nav-brand{display:flex;align-items:center;gap:var(--s75);padding-inline:var(--s50) var(--s100);border-radius:var(--r-full);
  font-size:16px;line-height:24px;font-weight:600;text-decoration:none}
.nav-brand img{width:32px;height:32px;border-radius:var(--r-lg)}
.nav-links{display:none;gap:var(--s25)}
.nav-links a{padding:var(--s75) var(--s100);border-radius:var(--r-full);color:var(--mute);font-size:14px;line-height:20px;font-weight:600;
  text-decoration:none;transition:color 300ms var(--ease),background-color 300ms var(--ease)}
.nav-links a:hover{color:var(--text);background:var(--wash)}
.nav-links a[aria-current="true"]{color:var(--text);background:var(--line)}
.nav-toggle{position:relative;width:36px;height:36px;margin-left:var(--s50);border:0;border-radius:var(--r-full);background:transparent;color:var(--text);cursor:pointer;
  transition:background-color 300ms var(--ease)}
.nav-toggle:hover{background:var(--wash)}
.nav-toggle:active{transform:scale(.98)}
.nav-toggle i{position:absolute;inset:0;margin:auto;width:16px;height:2px;border-radius:var(--r-full);background:currentColor;transition:transform 500ms var(--ease)}
.nav-toggle i:first-child{transform:translateY(-4px)}
.nav-toggle i:last-child{transform:translateY(4px)}
.nav-toggle[aria-expanded="true"] i:first-child{transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] i:last-child{transform:rotate(-45deg)}
@media (min-width:768px){.nav-links{display:flex}.nav-toggle{display:none}}

/* depth readout: the layer the middle of the screen is in, and how deep that is, from the app's own relic depths.
   The gauge is the six layers stacked, Topsoil on top; passed layers dim, the current one is ember. */
.depth{display:none;align-items:center;gap:var(--s75);padding-inline:var(--s100);font-size:14px;line-height:20px;font-weight:600;white-space:nowrap}
.depth-gauge{display:grid;gap:1px;width:12px;flex:none}
.depth-gauge i{display:block;height:2px;border-radius:var(--r-full);background:rgba(255,255,255,.16);transition:background-color 300ms var(--ease)}
.depth-gauge i.past{background:var(--faint)}
.depth-gauge i.now{background:var(--ember)}
.depth-name{color:var(--text)}
.depth-name.swap{animation:depth-in 500ms var(--ease)}
@keyframes depth-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.depth-m{display:none;min-width:9ch;color:var(--mute);font-weight:400;font-variant-numeric:tabular-nums}
@media (min-width:768px){.nav .depth{display:flex;min-width:136px}}  /* room for the longest layer name and number: the pill must not resize as they change */
@media (min-width:1024px){.nav .depth{min-width:216px}}
@media (min-width:1024px){.nav .depth-m{display:inline}}

/* phone dock: the depth and the one action, in thumb reach once the hero has scrolled away */
.dock{position:fixed;z-index:30;left:var(--s200);right:var(--s200);bottom:calc(var(--s200) + env(safe-area-inset-bottom));display:flex;align-items:center;
  justify-content:space-between;gap:var(--s75);padding:var(--s75);border-radius:var(--r-full);background:rgba(31,31,31,.9);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  opacity:0;transform:translateY(calc(100% + var(--s300)));transition:opacity 300ms var(--ease),transform 500ms var(--ease)}
.dock.show{opacity:1;transform:none}
.dock .depth{display:flex;min-width:0;padding-inline:var(--s75) 0}
.dock .depth-m{display:inline}
@media (max-width:359px){.dock .depth-m{display:none}}
@media (min-width:768px){.dock{display:none}}
@media (max-width:767px){.nav .btn-sm{display:none}}  /* on a phone the hero, the dock and the final section each hold the one button in turn */

/* mobile menu: full height panel */
.menu{position:fixed;inset:0;z-index:40;background:rgba(19,18,9,.94);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  opacity:0;transition:opacity 300ms var(--ease)}
.menu.open{opacity:1}
.menu nav{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s75);padding:var(--s900) var(--s300) var(--s400)}
.menu a{font-size:30px;line-height:36px;font-weight:600;text-decoration:none;padding-block:var(--s75);
  opacity:0;transform:translateY(24px);transition:opacity 500ms var(--ease),transform 500ms var(--ease)}
.menu.open a{opacity:1;transform:none}
.menu.open a:nth-child(2){transition-delay:60ms}
.menu.open a:nth-child(3){transition-delay:120ms}
.menu.open a:nth-child(4){transition-delay:180ms}

/* sections */
.section{padding-block:var(--s700)}
@media (min-width:1024px){.section{padding-block:var(--s900)}}
.h2{font-size:30px;line-height:36px;letter-spacing:-.02em}
@media (min-width:1024px){.h2{font-size:36px;line-height:40px}}
.lede{margin-top:var(--s200);font-size:18px;line-height:28px;color:var(--mute)}
h3{font-size:18px;line-height:28px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2xl);padding:var(--s300)}
@media (min-width:1024px){.card{padding:var(--s400)}}
.card p{color:var(--mute)}

/* split: heading on the left, content on the right, from 1024 up */
.split{display:grid;gap:var(--s200)}
.split-aside{min-width:0}
.lede{max-width:680px}
@media (min-width:1024px){
  .split{grid-template-columns:5fr 7fr;column-gap:var(--s700);align-items:start}
  .split > .lede{margin-top:0;padding-top:var(--s50)}
  .split-aside{align-self:stretch}
  .sticky{position:sticky;top:var(--s900)}
}
.card h3 + p{margin-top:var(--s75)}

/* hero */
.hero{padding-top:var(--s900);padding-bottom:var(--s700);text-align:center;overflow:clip}
@media (min-width:640px){.hero{padding-bottom:var(--s900)}}
.hero-copy{display:flex;flex-direction:column;align-items:center}
@media (min-width:1024px){.hero-copy{padding-top:var(--s200)}}  /* keeps the headline clear of the floating nav */
.hero-title{max-width:680px;padding-bottom:var(--s50);font-size:36px;line-height:40px;font-weight:600;letter-spacing:-.03em;
  background:linear-gradient(90deg,#FFFFFF,#9B9B9B);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (min-width:640px){.hero-title{font-size:60px;line-height:1}}  /* 72px fit the cap too, but a 40 character sentence that large pushed the stage below a 900px fold */
.hero-sub{margin-top:var(--s300);max-width:680px;font-size:18px;line-height:28px;color:var(--mute)}
.cta{margin-top:var(--s400);display:flex;flex-direction:column;align-items:center;gap:var(--s100)}
.cta-note{font-size:14px;line-height:20px;color:var(--mute)}  /* availability: read before the tap, so not faint */
.hero-visual{margin-top:var(--s500);display:flex;justify-content:center;align-items:flex-end;position:relative;isolation:isolate;--stage-w:760px}
@media (min-width:640px){.hero-visual{--stage-w:1280px}}
@media (min-width:1024px){.hero-visual{--stage-w:1680px}}
.hero-device-col{display:flex;flex-direction:column;align-items:center;gap:var(--s100);flex:none}
.hero-visual .device{width:240px;flex:none;transition:width 300ms var(--ease)}
.hero-visual .device.is-watch{width:200px}
.hero-visual .device.is-watch img{aspect-ratio:416/496}
.hero-magnus{width:128px;margin-left:calc(-1 * var(--s300));position:relative}
@media (min-width:640px){.hero-visual .device{width:320px}.hero-visual .device.is-watch{width:236px}.hero-magnus{width:224px;margin-left:calc(-1 * var(--s400))}}
.start-hero-tabs{display:inline-flex;gap:var(--s50);padding:var(--s50);border-radius:var(--r-full);background:var(--surface);border:1px solid var(--line)}
.start-hero-tabs button{padding:var(--s50) var(--s100);border:0;border-radius:var(--r-full);background:transparent;color:var(--mute);font:inherit;font-size:12px;line-height:16px;font-weight:600;cursor:pointer;transition:background-color 300ms var(--ease),color 300ms var(--ease)}
.start-hero-tabs button:hover{color:var(--text)}
.start-hero-tabs button[aria-selected="true"]{background:var(--ember);color:var(--ink)}

/* device frame: outer 24, 8 of padding, inner 16 */
.device{padding:var(--s75);border-radius:var(--r-3xl);background:var(--deep);
  box-shadow:0 0 0 1px #313131,0 0 0 3px #181818,0 0 0 4px rgba(255,255,255,.12),0 32px 64px -16px rgba(0,0,0,.72),0 12px 24px -8px rgba(0,0,0,.5)}
.device img{width:100%;border-radius:var(--r-2xl);background:var(--surface-2);aspect-ratio:560/1217}

/* Stage plates: painted backdrops the phone and Magnus stand on. Each plate is placed so its ledge (70% down the
   painting) meets their feet, and every edge feathers out so no rectangle shows against the page. The plates are
   pictures, not background fills: the page background itself stays flat. */
.stage{position:absolute;z-index:-1;max-width:none;height:auto;pointer-events:none;user-select:none;--fade-from:68%;--fade-to:83%;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),linear-gradient(to bottom,transparent,#000 24%,#000 var(--fade-from),rgba(0,0,0,.62) calc(var(--fade-from) + (var(--fade-to) - var(--fade-from)) * .3),rgba(0,0,0,.28) calc(var(--fade-from) + (var(--fade-to) - var(--fade-from)) * .6),rgba(0,0,0,.08) calc(var(--fade-from) + (var(--fade-to) - var(--fade-from)) * .85),transparent var(--fade-to));
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 16%,#000 84%,transparent),linear-gradient(to bottom,transparent,#000 24%,#000 var(--fade-from),rgba(0,0,0,.62) calc(var(--fade-from) + (var(--fade-to) - var(--fade-from)) * .3),rgba(0,0,0,.28) calc(var(--fade-from) + (var(--fade-to) - var(--fade-from)) * .6),rgba(0,0,0,.08) calc(var(--fade-from) + (var(--fade-to) - var(--fade-from)) * .85),transparent var(--fade-to));
  mask-composite:intersect}
.stage-hero{width:var(--stage-w);left:50%;margin-left:calc(var(--stage-w) / -2);bottom:calc(var(--stage-w) * -.1286)}  /* 30% of a 1916:821 plate sits below the feet */
/* The bottom fade must finish inside the hero's bottom padding (the hero clips), so a smaller plate gets a longer fade. */
.stage-hero{--fade-from:64%;--fade-to:89%}
@media (min-width:640px){.stage-hero{--fade-from:66%;--fade-to:87%}}
@media (min-width:1024px){.stage-hero{--fade-from:68%;--fade-to:83%}}
.stage-final{--fade-from:66%;--fade-to:80%;width:calc(var(--mag) * 7);left:calc(var(--mag) * .5 - var(--mag) * 7 * .74);bottom:calc(var(--mag) * 7 * -.1286)}
.final-art .final-magnus{width:100%}
.device-art{position:relative}
.device-art .plate{object-fit:cover;object-position:50% 0}
.device-art .trophy{position:absolute;left:50%;top:68%;width:64%;aspect-ratio:1;border-radius:0;background:none;translate:-50% -50%}

/* Strata: a slice of each layer painting from the app, met on the way down. Each band feathers out on every edge and
   tucks into the padding of the sections around it, so the page reads as one cross section rather than a stack of
   banners. Where the browser supports scroll timelines the painting drifts slower than the page. */
.stratum{position:relative;width:100%;max-width:960px;height:180px;margin:calc(-1 * var(--s400)) auto;overflow:clip;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.25) 6%,rgba(0,0,0,.7) 12%,#000 20%,#000 80%,rgba(0,0,0,.7) 88%,rgba(0,0,0,.25) 94%,transparent),
    linear-gradient(to bottom,transparent,rgba(0,0,0,.2) 10%,rgba(0,0,0,.62) 20%,#000 34%,#000 66%,rgba(0,0,0,.62) 80%,rgba(0,0,0,.2) 90%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.25) 6%,rgba(0,0,0,.7) 12%,#000 20%,#000 80%,rgba(0,0,0,.7) 88%,rgba(0,0,0,.25) 94%,transparent),
    linear-gradient(to bottom,transparent,rgba(0,0,0,.2) 10%,rgba(0,0,0,.62) 20%,#000 34%,#000 66%,rgba(0,0,0,.62) 80%,rgba(0,0,0,.2) 90%,transparent);
  mask-composite:intersect}
.stratum img{position:absolute;left:0;top:-8%;width:100%;height:116%;max-width:none;object-fit:cover}
@media (min-width:640px){.stratum{height:256px}}
@media (min-width:1024px){.stratum{height:320px;margin-block:calc(-1 * var(--s700))}}
.tagline + .stratum{margin-top:0}  /* starts below the black band, so its feathered top never crosses that edge */
@keyframes stratum-drift{from{transform:translateY(-6%)}to{transform:translateY(6%)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .stratum img{animation:stratum-drift 1ms var(--ease) both;animation-timeline:view();animation-range:cover}
  }
}

/* benefits */
.rest-art{margin-top:var(--s300)}
.rest-art img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 60%;border-radius:var(--r-2xl);background:var(--surface-2)}
.rest-art figcaption{margin-top:var(--s75);font-size:14px;line-height:20px;color:var(--faint)}
.benefits{margin-top:var(--s400);display:grid;gap:var(--s400)}
.benefits h3{font-size:20px;line-height:28px}
.benefits h3 + p{margin-top:var(--s75);color:var(--mute)}
@media (min-width:640px) and (max-width:1023px){.benefits{grid-template-columns:repeat(2,1fr);column-gap:var(--s300)}.benefits li:last-child{grid-column:1/-1}}
@media (min-width:1024px){.rest-art{margin-top:var(--s400)}.rest-art img{aspect-ratio:4/3}.benefits{margin-top:0;gap:var(--s500)}}

/* tagline reveal */
.tagline{background:var(--deep);padding:var(--s700) var(--s300)}
@media (min-width:1024px){.tagline{padding:var(--s900) var(--s400)}}
.tagline-text{max-width:680px;font-size:36px;line-height:40px;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
@media (min-width:1024px){.tagline-text{font-size:48px;line-height:1}}
.js .tagline-text .w{opacity:.3;transition:opacity 500ms var(--ease)}
.js .tagline-text .w.on{opacity:1}
.tagline-grid{display:grid;gap:var(--s600)}
@media (min-width:1280px){.tagline-grid{grid-template-columns:1fr auto;column-gap:var(--s700);align-items:end}}  /* below 1280 the arc sits under the words, so the 680px measure never wraps early */
/* the arc: the first number and the second, counted up by the same scroll that lights the tagline */
.arc-row{display:flex;align-items:flex-start;gap:var(--s300)}
.arc-n{display:flex;flex-direction:column;gap:var(--s75)}
.arc-v{font-size:72px;line-height:1;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--faint)}
.arc-second .arc-v{color:var(--text);transition:color 500ms var(--ease)}
.arc.done .arc-second .arc-v{color:var(--ember)}
.arc-l{font-size:14px;line-height:20px;font-weight:600;color:var(--faint)}
.arc-to{flex:none;margin-top:var(--s300);color:var(--faint)}
.arc figcaption{max-width:280px;margin-top:var(--s300)}
@media (min-width:1024px){.arc-to{margin-top:var(--s300)}}

/* how it works */
.steps{margin-top:var(--s400);display:grid;gap:var(--s600)}
@media (min-width:768px){.steps{grid-template-columns:repeat(3,1fr);gap:var(--s300)}}
.steps .device{max-width:280px}
.steps h3{margin-top:var(--s300)}
.step-n{display:inline-block;margin-right:var(--s100);color:var(--faint);font-variant-numeric:tabular-nums}
.steps h3 + p{margin-top:var(--s75);color:var(--mute)}
.steps + .fine{margin-top:var(--s600)}
.start-sim{margin-top:var(--s500)}
.start-sim-grid{margin-top:var(--s300);display:grid;gap:var(--s400)}
@media (min-width:1024px){.start-sim-grid{grid-template-columns:1fr 1.15fr;align-items:start}}
.start-sim-controls{display:grid;gap:var(--s200)}
.start-sim-field{display:grid;gap:var(--s75)}
.start-sim-label,.start-sim-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s75)}
.start-sim-label b{color:var(--text);font-variant-numeric:tabular-nums}
.start-sim-pills{display:flex;flex-wrap:wrap;gap:var(--s75)}
.start-sim-pills button{display:inline-flex;align-items:center;gap:var(--s75)}
.start-sim-pills button img{width:24px;height:24px;border-radius:var(--r-lg)}
.start-sim-pills button,.start-sim-grades button,.start-watch-tabs button,.start-chips li{padding:var(--s75) var(--s100);border-radius:var(--r-full);border:1px solid var(--line);background:var(--surface-2);color:var(--mute);font:inherit;font-size:14px;line-height:20px;font-weight:600;cursor:pointer;transition:background-color 300ms var(--ease),color 300ms var(--ease)}
.start-sim-pills button:hover,.start-sim-grades button:hover,.start-watch-tabs button:hover,.start-chips li:hover{color:var(--text);background:#313131}
.start-sim-pills button.active,.start-sim-grades button.active,.start-watch-tabs button.active,.start-chips li.active{background:var(--ember);color:var(--ink);border-color:transparent}
.start-sim-grades{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s75)}
.start-sim-grades button{display:flex;flex-direction:column;align-items:center;gap:var(--s25)}
.start-sim-grades button span{font-size:12px;line-height:16px;font-weight:400}
.start-sim-range{width:100%;accent-color:var(--ember);cursor:pointer}
.start-sim-out{padding:var(--s300);border-radius:var(--r-xl);background:var(--surface-2);border:1px solid var(--line)}
.start-sim-out .fine,.start-dossier .fine{color:var(--mute)}
.start-sim-top{display:grid;grid-template-columns:56px 1fr 52px;align-items:center;gap:var(--s100);padding-bottom:var(--s100);border-bottom:1px solid var(--line)}
.start-sim-art,.start-sim-cup{width:52px;height:52px;border-radius:var(--r-lg);background:var(--surface);object-fit:contain;padding:var(--s50)}
.start-sim-top h4{margin:0;font-size:16px;line-height:24px;color:var(--text)}
.start-sim-sets-wrap{margin-top:var(--s200)}
.start-sim-sets{margin-top:var(--s75);display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s75);text-align:center}
.start-sim-sets li{padding:var(--s100) var(--s50);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s25)}
.start-sim-sets span{font-size:12px;line-height:16px;color:var(--mute)}
.start-sim-sets b{font-size:18px;line-height:28px;color:var(--text);font-variant-numeric:tabular-nums}
.start-sim-stats{margin:var(--s200) 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s100);padding-top:var(--s100);border-top:1px solid var(--line)}
.start-sim-stats div{display:flex;flex-direction:column;gap:var(--s25)}
.start-sim-stats b{font-size:16px;line-height:24px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.start-sim-stats b.hot{color:var(--ember)}

/* proof */
.proof{margin-top:var(--s400);display:grid;gap:var(--s200)}
@media (min-width:1024px){.proof{grid-template-columns:repeat(2,1fr);gap:var(--s300)}}
.sources{margin-top:var(--s300);display:grid;gap:var(--s75)}
.sources a{display:grid;gap:var(--s25);padding:var(--s100) var(--s200);border-radius:var(--r-xl);
  background:var(--surface-2);text-decoration:none;transition:background-color 300ms var(--ease),transform 500ms var(--ease)}
.sources a:hover{background:#313131}
.sources a:active{transform:scale(.98)}
.src-find{font-weight:600;color:var(--text)}
.src-ref{font-size:14px;line-height:20px;color:var(--mute);font-variant-numeric:tabular-nums}
.series{display:grid;gap:var(--s300)}
@media (min-width:640px){.series{grid-template-columns:160px 1fr;align-items:start}}
.series-poster{display:block;max-width:160px;border-radius:var(--r-xl);overflow:hidden;transition:transform 500ms var(--ease)}
.series-poster:hover{transform:translateY(-2px)}
.series-poster img{aspect-ratio:9/16;object-fit:cover;background:var(--surface-2)}
.series blockquote{margin-top:var(--s200);font-size:18px;line-height:28px;color:var(--text)}
.text-link{display:inline-block;margin-top:var(--s200);color:var(--text);font-weight:600;text-decoration:underline;text-decoration-color:var(--line);
  text-underline-offset:4px;transition:text-decoration-color 300ms var(--ease)}
.text-link:hover{text-decoration-color:currentColor}
.start-watch-card{margin-top:var(--s300);display:grid;gap:var(--s300);align-items:center}
@media (min-width:768px){.start-watch-card{grid-template-columns:1fr 220px}}
.start-watch-tabs{margin-top:var(--s200);display:flex;flex-wrap:wrap;gap:var(--s75)}
.start-watch-card .fine{margin-top:var(--s100)}
.start-watch-fig{justify-self:center;padding:var(--s75);border-radius:var(--r-3xl);background:var(--deep);border:1px solid var(--line);max-width:190px}
.start-watch-fig img{border-radius:var(--r-2xl);aspect-ratio:416/496;background:var(--surface-2)}

/* plans */
.plans{margin-top:var(--s400);display:grid;gap:var(--s200)}
@media (min-width:768px){.plans{grid-template-columns:repeat(2,1fr);gap:var(--s300)}}
.plan-name{font-size:24px;line-height:32px}
.card .plan-line{margin-top:var(--s50)}
.list{margin-top:var(--s300);display:grid;gap:var(--s100)}
.list li{position:relative;padding-left:var(--s300);color:var(--mute)}
.list li::before{content:"";position:absolute;left:var(--s50);top:var(--s75);width:8px;height:8px;border-radius:var(--r-full);background:var(--faint)}
.plans .fine{margin-top:var(--s300)}
.plans + .fine,.start-catalog + .fine{margin-top:var(--s300)}
.start-catalog{margin-top:var(--s300)}
.start-chips{margin-top:var(--s200);display:flex;flex-wrap:wrap;gap:var(--s75)}
.start-chips li{display:inline-flex;align-items:center;gap:var(--s75)}
.start-chips li span{font-size:12px;line-height:16px;opacity:.85}
.start-dossier{margin-top:var(--s300);padding:var(--s200);border-radius:var(--r-xl);background:var(--surface-2);border:1px solid var(--line);display:grid;gap:var(--s200);align-items:center}
@media (min-width:640px){.start-dossier{grid-template-columns:auto 1fr}}
.start-dossier-art{display:flex;gap:var(--s100);align-items:center}
.start-dossier-art img{width:88px;height:88px;border-radius:var(--r-lg);background:var(--surface);object-fit:contain;padding:var(--s50)}
.start-dossier-body{display:grid;gap:var(--s50)}
.start-dossier-body h4{margin:0;font-size:18px;line-height:28px;font-weight:600;color:var(--text)}

/* faq */
.aside-note{margin-top:var(--s200);color:var(--mute)}
.aside-note a{color:var(--text);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;transition:text-decoration-color 300ms var(--ease)}
.aside-note a:hover{text-decoration-color:currentColor}
.start-faq-btn{margin-top:var(--s200);padding:var(--s75) var(--s200);border-radius:var(--r-full);border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;font-size:14px;line-height:20px;font-weight:600;cursor:pointer;transition:background-color 300ms var(--ease)}
.start-faq-btn:hover{background:var(--surface-2)}
.relic{display:none}
@media (min-width:1024px){
  .relic{display:flex;align-items:center;gap:var(--s200);margin-top:var(--s600)}
  .relic img{width:128px;flex:none;margin-left:calc(-1 * var(--s200))}  /* the render has its own transparent margin */
  .relic figcaption{font-size:14px;line-height:20px;color:var(--faint)}
  .relic b{display:block;margin-bottom:var(--s50);font-weight:600;color:var(--text)}
}
.faq{margin-top:var(--s400);display:grid;gap:var(--s75)}
@media (min-width:1024px){.faq{margin-top:0}}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2xl);transition:background-color 300ms var(--ease)}
.faq details:hover{background:var(--surface-2)}
.faq summary{position:relative;display:block;padding:var(--s200) var(--s600) var(--s200) var(--s300);font-weight:600;cursor:pointer;list-style:none;border-radius:var(--r-2xl)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;right:var(--s300);top:0;bottom:0;margin-block:auto;width:12px;height:2px;border-radius:var(--r-full);background:var(--mute);
  transition:transform 500ms var(--ease)}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(0deg)}
.faq summary:active{transform:translateY(1px)}
.faq details p{padding:0 var(--s300) var(--s300);color:var(--mute)}
.faq details[open] p{animation:faq-in 500ms var(--ease)}
@keyframes faq-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* final cta */
.final{position:relative;isolation:isolate;overflow:clip;padding-bottom:var(--s900)}
.final-grid{display:grid;gap:var(--s600);align-items:center}
.final-copy{position:relative;z-index:1}
.final .cta{align-items:flex-start}
.final-art{position:relative;isolation:isolate;--mag:160px;width:var(--mag);justify-self:center}
@media (min-width:1024px){.final-grid{grid-template-columns:1fr 280px}.final .lede{max-width:560px}.final-art{--mag:240px}}

/* footer (markup shared with the home page, written by build-pages.py) */
.foot{background:var(--deep);padding-block:var(--s700) var(--s400);font-size:14px;line-height:20px;color:var(--mute)}
.foot-grid{display:grid;gap:var(--s400)}
@media (min-width:768px){.foot-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.foot-grid{grid-template-columns:1.2fr 1fr 1.4fr .9fr}}  /* legal is widest so no link wraps into what reads as a second link */
.foot-brand{display:flex;gap:var(--s100);align-items:flex-start}
.foot-brand img{border-radius:var(--r-xl)}
.foot-name{font-size:16px;line-height:24px;font-weight:600;color:var(--text)}
.foot .micro{margin-bottom:var(--s75);font-weight:600;color:var(--text)}
.foot p + p{margin-top:var(--s75)}
.foot a{color:var(--mute);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px;transition:color 300ms var(--ease)}
.foot a:hover{color:var(--text)}
.foot-grid > div:nth-child(3) a,.foot-grid > div:nth-child(2) p:last-child a{display:inline-block;padding-block:var(--s100)}  /* 44px rows */
.foot-social{display:flex;gap:var(--s75)}
.foot-social a{display:inline-flex;padding:var(--s75);border-radius:var(--r-full);border:1px solid var(--line);transition:color 300ms var(--ease),transform 500ms var(--ease)}
.foot-social a:hover{transform:translateY(-2px)}
.foot-social a:active{transform:scale(.98)}
.foot-social svg{width:20px;height:20px}
.small-print{margin-top:var(--s600)}

/* reveals: rise 32px and fade, once */
.js .reveal{opacity:0;transform:translateY(32px);transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.js :is(.steps,.proof,.plans) > .reveal:nth-child(2){transition-delay:80ms}
.js :is(.steps,.proof,.plans) > .reveal:nth-child(3){transition-delay:160ms}
.js .device img{opacity:0;transition:opacity 500ms var(--ease)}
.js .device img.loaded{opacity:1}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.menu a{transform:none}
  .btn:hover,.sources a:hover,.series-poster:hover,.foot-social a:hover{transform:none}
  .nav-toggle i,.faq summary::before,.faq summary::after{transition:none}
  .faq details[open] p{animation:none}
  .js .tagline-text .w{opacity:1}
  .dock{transform:none}
  .depth-name.swap{animation:none}
}