/* LiftWrite site. Geist (OFL, self-hosted). No external requests. */
@font-face { font-family: "Geist LW"; src: url("assets/fonts/geist.woff2") format("woff2-variations"), url("assets/fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: dark light;
  --black: #000;
  --ink-d: #f4f2ee;               /* text on the dark stage */
  --muted-d: rgba(244, 242, 238, .64);
  --faint-d: rgba(244, 242, 238, .14);
  --line-d: rgba(255, 255, 255, .12);
  --mint: #5cccba;                /* the one accent on dark: actions, active, hover */
  --mint-hi: #84dccd;
  --mark: #38b2a9;
  --heat: #d9544a;
  /* theme surfaces */
  --paper: #fff; --bone: #f9f8f5; --ink: #0d0c0c; --graphite: #5f5b56; --line: rgba(13,12,12,.12);
  --teal: #0f766e; --teal-hi: #0b5d57; --on-teal: #fff;
  --font: "Geist LW", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --gutter: clamp(20px, 4.5vw, 64px);
  --out: cubic-bezier(.16, 1, .3, 1);
  --inout: cubic-bezier(.65, 0, .35, 1);
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #000; --bone: #0b0b0a; --ink: #f4f2ee; --graphite: #a39e97; --line: rgba(255,255,255,.12); --teal: #5cccba; --teal-hi: #84dccd; --on-teal: #04231f; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: #000; scroll-padding-top: 64px; }
body { margin: 0; background: #000; color: var(--ink-d); font: 400 1.0625rem/1.55 var(--font); letter-spacing: -.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; font-feature-settings: "ss01", "cv11"; }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
ol, ul { list-style: none; padding: 0; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(100% - 2 * var(--gutter), 1280px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: 12px; z-index: 80; padding: 10px 14px; border-radius: 10px; background: #fff; color: #000; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* ---------- Type scale (one family, weight and tracking do the work) ---------- */
.h2 { font-size: clamp(2.3rem, 4.6vw, 4.25rem); line-height: 1.02; letter-spacing: -.042em; font-weight: 560; text-wrap: balance; }
.h2--xl { font-size: clamp(2.6rem, 6vw, 5.6rem); }
.lede { font-size: clamp(1.0625rem, 1.35vw, 1.25rem); line-height: 1.5; color: var(--muted-d); max-width: 30em; text-wrap: pretty; }
.label { font-size: .875rem; font-weight: 500; letter-spacing: -.005em; color: var(--muted-d); }
.label--accent { color: var(--mint); }
.fine { font-size: .8125rem; line-height: 1.5; color: var(--muted-d); }
.text-link { font-weight: 500; color: var(--teal); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: color .3s var(--out); }
.text-link:hover { color: var(--teal-hi); }

/* ---------- Buttons ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 18px; border-radius: 999px; background: var(--mint); color: #04231f; font: 550 .9375rem/1 var(--font); letter-spacing: -.01em; text-decoration: none; transition: background-color .35s var(--out), transform .5s var(--out); }
.pill:hover { background: var(--mint-hi); }
.pill:active { transform: scale(.97); }
.pill--lg { min-height: 52px; padding: 0 26px; font-size: 1rem; }
.pill--light { background: #fff; color: #000; }
.pill--light:hover { background: #fff; }
.cta .pill--light { cursor: default; }
.trust { display: inline-flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--muted-d); }
.trust svg { width: 14px; height: 14px; flex: none; }

/* ---------- Header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 60; color: var(--ink-d); border-bottom: 1px solid transparent; transition: background-color .5s var(--out), border-color .5s var(--out), color .5s var(--out); }
.site-header.is-solid { background: rgba(0,0,0,.66); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); border-bottom-color: var(--line-d); }
.site-header.is-paper { background: color-mix(in srgb, var(--paper) 84%, transparent); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); color: var(--ink); border-bottom-color: var(--line); }
.site-header.is-paper .pill { background: var(--teal); color: var(--on-teal); }
.header-inner { display: flex; align-items: center; gap: 28px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1.0625rem; letter-spacing: -.025em; }
.tile { width: 32px; height: 32px; border-radius: 8px; background: #000; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); flex: none; }
.tile svg { width: 25px; color: var(--mark); }
.is-opening .brand .tile, .is-opening .brand__name, .is-opening .header-inner > .pill { opacity: 0; pointer-events: none; }
.header-inner > .pill { transition: opacity .5s var(--out), background-color .35s var(--out); }
.brand .tile, .brand__name { transition: opacity .5s var(--out); }
.site-nav { display: flex; gap: 28px; margin-left: auto; }
.site-nav a { font-size: .875rem; text-decoration: none; opacity: .7; transition: opacity .3s var(--out); }
.site-nav a:hover { opacity: 1; }
@media (max-width: 860px) { .site-nav { display: none; } .header-inner > .pill { margin-left: auto; } }

/* ---------- Film grain (dark sections only) ---------- */
.grain { position: absolute; inset: -50%; pointer-events: none; opacity: .055; z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.4s steps(5) infinite; }
@keyframes grain { 0% { transform: translate(0,0) } 25% { transform: translate(-3%,2%) } 50% { transform: translate(2%,-3%) } 75% { transform: translate(-2%,-1%) } 100% { transform: translate(0,0) } }

/* ---------- 1 · Opening ---------- */
.open { position: relative; height: 240vh; background: #000; }
.open__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.open__glow { position: absolute; left: 50%; top: 44%; width: 70vmax; height: 70vmax; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(56,178,169,.15), rgba(56,178,169,.04) 55%, transparent); pointer-events: none; }
.open__stage { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 6vh; }
.open__mark { width: min(46vw, 560px); height: auto; overflow: visible; will-change: transform; }
.open__mark path, .cta__mark path { fill: var(--mark); fill-opacity: 0; stroke: var(--mark); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.open__nib { fill: #fff; }
.open__name { margin-top: clamp(22px, 4vh, 40px); font-size: clamp(3.4rem, 8.4vw, 8.4rem); line-height: .95; letter-spacing: -.055em; font-weight: 600; will-change: transform, opacity; }
.open__tag { margin-top: 14px; font-size: clamp(1.125rem, 1.6vw, 1.4rem); font-weight: 400; letter-spacing: -.02em; color: var(--muted-d); }
.open__name, .open__tag { opacity: 0; transform: translateY(18px); transition: opacity 1.4s var(--out), transform 1.6s var(--out); }
.is-written .open__name { opacity: 1; transform: none; }
.is-written .open__tag { opacity: 1; transform: none; transition-delay: .18s; }
.open__foot { position: absolute; left: 0; right: 0; bottom: clamp(24px, 5.5vh, 60px); display: flex; justify-content: space-between; align-items: end; gap: 32px; opacity: 0; transition: opacity 1.2s var(--out) .4s; }
.is-written .open__foot { opacity: 1; }
.open__sub { max-width: 27em; font-size: 1rem; line-height: 1.5; color: var(--muted-d); }
.open__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
@media (max-width: 760px) {
  .open { height: 225vh; }
  .open__stage { padding-bottom: 18vh; }
  .open__mark { width: 72vw; }
  .open__name { font-size: 17vw; }
  .open__foot { flex-direction: column; align-items: flex-start; gap: 16px; }
  .open__sub { font-size: .9375rem; }
  .open__actions { align-items: flex-start; }
}

/* ---------- 2 · Demo (3D body) ---------- */
.demo { position: relative; z-index: 2; margin-top: -55vh; height: 360vh; background: #000; }
.demo__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.demo__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo__layout { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; padding: 110px 0 clamp(28px, 7vh, 72px); pointer-events: none; }
.demo__copy { grid-column: 1; align-self: start; max-width: 26rem; }
.demo__copy .lede { margin-top: 18px; }
.demo__note { grid-column: 1; grid-row: 2; }
.demo__lines { margin-top: 10px; font-size: clamp(1.125rem, 1.5vw, 1.375rem); line-height: 1.6; letter-spacing: -.015em; min-height: 4.8em; }
.demo__lines div { white-space: nowrap; }
.demo__lines .done { color: var(--muted-d); }
.caret { display: inline-block; width: 2px; height: 1.05em; vertical-align: -.16em; background: var(--mint); margin-left: 1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.demo__callouts { position: absolute; inset: 0; pointer-events: none; }
.callout { position: absolute; display: flex; align-items: center; opacity: 0; transition: opacity .8s var(--out); white-space: nowrap; }
.callout b { width: 7px; height: 7px; border-radius: 50%; background: var(--heat); box-shadow: 0 0 0 5px rgba(217,84,74,.2), 0 0 18px rgba(217,84,74,.9); flex: none; }
.callout i { display: block; height: 1px; width: 0; background: rgba(255,255,255,.55); transition: width 1s var(--out); }
.callout em { font-style: normal; font-size: .8125rem; font-weight: 500; padding: 5px 11px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.callout.is-on { opacity: 1; }
.callout.is-on i { width: 56px; }
.demo__fallback { position: absolute; left: 50%; top: 50%; height: 80%; transform: translate(-50%, -50%); }
@media (max-width: 760px) {
  .demo { height: 330vh; }
  .demo__layout { grid-template-columns: 1fr; padding-top: 88px; }
  .demo__copy .lede { display: none; }
  .demo__lines { font-size: 1rem; min-height: 4.9em; }
  .callout em { font-size: .75rem; }
}

/* ---------- Statement ---------- */
.statement { background: #000; padding: 22vh 0 26vh; }
.statement__text { font-size: clamp(2.1rem, 5.2vw, 5.1rem); line-height: 1.06; letter-spacing: -.045em; font-weight: 520; max-width: 16em; text-wrap: pretty; }
.statement__text .w { color: #fff; opacity: .15; transition: opacity .7s var(--out); }
.statement__text .w.is-lit { opacity: 1; }

/* ---------- Phone ---------- */
.phone { --w: 320px; width: var(--w); padding: calc(var(--w) * .03); border-radius: calc(var(--w) * .165); background: #0b0b0b; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 0 0 calc(var(--w) * .012) #1d1d1d; flex: none; }
.phone__screen { position: relative; container-type: inline-size; aspect-ratio: 780 / 1695; border-radius: calc(var(--w) * .137); overflow: hidden; background: #000; }
.phone__screen > img, .phone__screen > picture, .phone__screen picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone__screen::after { content: ""; position: absolute; top: 2.2%; left: 50%; transform: translateX(-50%); width: 31%; height: 3.3%; border-radius: 99px; background: #000; z-index: 3; }
.phone__status { position: absolute; inset: 0 0 auto; height: 5.75%; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 1.6% 9% 0 12.5%; font: 600 4.3cqw/1 -apple-system, BlinkMacSystemFont, var(--font); color: #000; pointer-events: none; }
.phone__status::before { content: "9:41"; }
.phone__status::after { content: ""; width: 19cqw; height: 3.4cqw; background: currentColor; -webkit-mask: var(--status-icons) right center / contain no-repeat; mask: var(--status-icons) right center / contain no-repeat; }
.phone--dark .phone__status, .phone.is-dark-screen .phone__status { color: #fff; }
:root { --status-icons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 14'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='9' width='3' height='4' rx='1'/%3E%3Crect x='4.5' y='6.5' width='3' height='6.5' rx='1'/%3E%3Crect x='9' y='4' width='3' height='9' rx='1'/%3E%3Crect x='13.5' y='1.5' width='3' height='11.5' rx='1'/%3E%3Cpath d='M30 2.2c3 0 5.8 1.1 7.9 3l-1.5 1.6A9.3 9.3 0 0 0 30 4.4a9.3 9.3 0 0 0-6.4 2.4l-1.5-1.6c2.1-1.9 4.9-3 7.9-3Zm0 4c1.9 0 3.6.7 4.9 1.9l-1.6 1.6A4.8 4.8 0 0 0 30 8.4c-1.3 0-2.4.5-3.3 1.3l-1.6-1.6A7 7 0 0 1 30 6.2Zm0 4c.8 0 1.4.3 1.9.8L30 13l-1.9-2c.5-.5 1.1-.8 1.9-.8Z'/%3E%3Crect x='46' y='1.5' width='26' height='11' rx='3.4' fill='none' stroke='%23000' stroke-opacity='.4' stroke-width='1.2'/%3E%3Crect x='48' y='3.5' width='20' height='7' rx='1.8'/%3E%3Crect x='73.5' y='5' width='1.6' height='4' rx='.8' fill-opacity='.45'/%3E%3C/g%3E%3C/svg%3E"); }

/* ---------- 3 · Story (pinned phone) ---------- */
.story { height: 330vh; background: #000; }
.story__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.story__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 8vw, 140px); align-items: center; }
.story__steps { position: relative; margin-top: 22px; min-height: 19rem; }
.story__step { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateY(30px); transition: opacity .9s var(--out), transform 1.1s var(--out); }
.story__step.is-active { opacity: 1; transform: none; }
.story__step.is-past { opacity: 0; transform: translateY(-30px); }
.story__step h3 { font-size: clamp(2.8rem, 6vw, 6rem); line-height: .98; letter-spacing: -.05em; font-weight: 560; }
.story__step p { margin-top: 24px; font-size: clamp(1.0625rem, 1.4vw, 1.3125rem); line-height: 1.5; color: var(--muted-d); max-width: 25em; }
.story__bars { display: flex; gap: 8px; }
.story__bars i { position: relative; width: 32px; height: 2px; border-radius: 2px; background: var(--faint-d); overflow: hidden; }
.story__bars i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(var(--p, 0)); transform-origin: left; }
.story__phone .phone { --w: min(340px, 26vw); transform: translate3d(0, var(--lift, 0), 0); }
.shot { opacity: 0; transition: opacity .8s var(--out); }
.shot.is-active { opacity: 1; }
@media (max-width: 760px) {
  .story { height: 320vh; }
  .story__pin { align-items: flex-start; padding-top: 80px; }
  .story__grid { grid-template-columns: 1fr; gap: 14px; }
  .story__steps { min-height: 12.5rem; margin-top: 10px; }
  .story__step h3 { font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
  .story__step p { margin-top: 12px; font-size: 1rem; }
  .story__phone { display: flex; justify-content: center; }
  .story__phone .phone { --w: min(230px, 58vw, calc((100svh - 390px) * .44)); }
}

/* ---------- 4 · Live map ---------- */
.map { position: relative; background: #000; padding: clamp(110px, 16vh, 190px) 0 clamp(80px, 12vh, 150px); overflow: hidden; }
.map::before { content: ""; position: absolute; right: -10%; top: 50%; width: 90vmax; height: 90vmax; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(217,84,74,.09), transparent 70%); pointer-events: none; }
.map__grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.map__side .lede { margin-top: 18px; }
.chips { display: flex; gap: 8px; margin-top: 34px; }
.chip { font: 500 .9375rem/1 var(--font); color: var(--ink-d); background: transparent; border: 1px solid var(--line-d); border-radius: 999px; padding: 10px 18px; min-height: 40px; cursor: pointer; transition: background-color .4s var(--out), color .4s var(--out), border-color .4s var(--out); }
.chip:hover { border-color: var(--mint); }
.chip.is-active { background: var(--mint); color: #04231f; border-color: var(--mint); }
.map__input { display: block; width: 100%; margin-top: 22px; padding: 2px 0 16px; resize: none; min-height: 10.5em; font: 400 1.125rem/1.6 var(--font); letter-spacing: -.012em; color: #fff; background: transparent; border: 0; border-bottom: 1px solid var(--line-d); border-radius: 0; caret-color: var(--mint); }
.map__input:focus { outline: none; border-bottom-color: var(--mint); }
.lifts { margin-top: 4px; }
.lift { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 13px 0; border-bottom: 1px solid var(--line-d); animation: liftIn .7s var(--out) both; }
.lift__name { font-weight: 500; }
.lift__sets { font-variant-numeric: tabular-nums; color: var(--muted-d); font-size: .9375rem; text-align: right; }
.lift__muscles { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.lift__muscles span { font-size: .75rem; font-weight: 500; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.07); color: var(--muted-d); }
.lift__muscles span.is-main { background: rgba(217,84,74,.2); color: #f2a59b; }
.lift--note .lift__name { font-weight: 400; color: var(--muted-d); font-style: italic; }
@keyframes liftIn { from { opacity: 0; transform: translateY(8px); } }
.map__side .fine { margin-top: 18px; }
.map__stage { position: relative; height: min(84vh, 820px); }
.map__gl { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.map__gl:active { cursor: grabbing; }
.map__tip { position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - 14px)); padding: 6px 12px; border-radius: 999px; white-space: nowrap; pointer-events: none; background: #fff; color: #000; font-size: .8125rem; font-weight: 550; }
.map__readout { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; pointer-events: none; }
.map__readout p { min-height: 1.5em; font-size: .9375rem; max-width: 34em; }
.legend { display: flex; gap: 18px; font-size: .8125rem; color: var(--muted-d); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot--fresh { box-shadow: inset 0 0 0 1.5px var(--muted-d); }
.dot--some { background: #eea197; }
.dot--hard { background: var(--heat); box-shadow: 0 0 10px rgba(217,84,74,.8); }
@media (max-width: 900px) {
  .map__grid { grid-template-columns: 1fr; }
  .map__stage { order: -1; height: 70vh; }
}

/* ---------- 5 · Features ---------- */
.features { position: relative; background: #000; }
.rail { display: flex; flex-direction: column; }
.panel { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; padding: 96px var(--gutter) 64px; isolation: isolate; }
.panel__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .55; transform: scale(1.06); transition: transform 2s var(--out); }
.panel.is-in .panel__bg { transform: scale(1); }
.panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,0,0,.9), rgba(0,0,0,.55) 45%, rgba(0,0,0,.2)); }
.panel--video::after { background: linear-gradient(0deg, rgba(0,0,0,.85), rgba(0,0,0,.1) 55%); }
.panel--video { align-items: end; }
.panel--video .panel__bg { opacity: 1; }
.panel__copy { max-width: 32rem; }
.panel__copy .h2 { margin-top: 14px; }
.panel__copy p:not(.label):not(.fine) { margin-top: 20px; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.5; color: rgba(244,242,238,.8); }
.panel__copy .fine { margin-top: 18px; }
.panel__device { display: flex; gap: 22px; justify-content: center; }
.panel__device .phone { --w: min(300px, 21vw); }
.panel__device--pair .phone:first-child { transform: translateY(8%); }
.panel__copy, .panel__device { opacity: 0; transform: translateY(44px); transition: opacity 1.2s var(--out), transform 1.4s var(--out); }
.panel.is-in .panel__copy, .panel.is-in .panel__device { opacity: 1; transform: none; }
.panel.is-in .panel__device { transition-delay: .14s; }
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .features.is-rail .rail__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .features.is-rail .rail { flex-direction: row; height: 100vh; will-change: transform; }
  .features.is-rail .panel { flex: 0 0 100vw; }
}
@media (max-width: 760px) {
  .panel { grid-template-columns: 1fr; align-items: start; min-height: 0; padding: 96px var(--gutter) 64px; gap: 36px; }
  .panel::after { background: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.6) 50%, rgba(0,0,0,.85)); }
  .panel__device .phone { --w: min(230px, 56vw); }
  .panel__device--pair .phone:first-child { display: none; }
  .panel--video { min-height: 90svh; align-items: end; }
}

/* ---------- Theme surfaces ---------- */
.privacy { background: var(--paper); color: var(--ink); padding: clamp(110px, 16vh, 200px) 0 clamp(80px, 12vh, 140px); }
.privacy .h2 { max-width: 12em; }
.privacy__lede { margin-top: 28px; max-width: 34em; font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.5; color: var(--graphite); }
.privacy__list { margin: 56px 0 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.privacy__list li { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; position: relative; }
.privacy__list li::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--out); }
.privacy.is-in .privacy__list li::before { transform: scaleX(1); }
.privacy.is-in .privacy__list li:nth-child(2)::before { transition-delay: .1s; }
.privacy.is-in .privacy__list li:nth-child(3)::before { transition-delay: .2s; }
.privacy.is-in .privacy__list li:nth-child(4)::before { transition-delay: .3s; }
.privacy__list strong { font-size: 1.1875rem; font-weight: 550; letter-spacing: -.02em; }
.privacy__list span { color: var(--graphite); }
@media (max-width: 900px) { .privacy__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .privacy__list { grid-template-columns: 1fr; gap: 24px; } }
.later { background: var(--paper); color: var(--ink); padding: 0 0 clamp(80px, 12vh, 140px); }
.later__inner { display: grid; grid-template-columns: 14em 1fr 1fr; gap: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.later .label { color: var(--graphite); }
.later p { color: var(--graphite); }
.later strong { color: var(--ink); font-weight: 550; }
@media (max-width: 800px) { .later__inner { grid-template-columns: 1fr; gap: 14px; } }
.faq { background: var(--bone); color: var(--ink); padding: clamp(100px, 14vh, 170px) 0; }
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 100px); align-items: start; }
.faq__list details { border-top: 1px solid var(--line); }
.faq__list details:last-child { border-bottom: 1px solid var(--line); }
.faq__list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-size: 1.1875rem; font-weight: 500; letter-spacing: -.02em; transition: color .3s var(--out); }
.faq__list summary:hover { color: var(--teal); }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: ""; flex: none; width: 13px; height: 13px; background: linear-gradient(currentColor, currentColor) center / 13px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 13px no-repeat; transition: transform .6s var(--out); }
.faq__list details[open] summary::after { transform: rotate(135deg); }
.faq__list details p { padding: 0 0 24px; color: var(--graphite); max-width: 38em; }
.faq__list a { color: var(--teal); }
@media (max-width: 900px) { .faq__grid { grid-template-columns: 1fr; } }

/* ---------- Final call to action ---------- */
.cta { position: relative; overflow: hidden; background: #000; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; }
.cta::before { content: ""; position: absolute; left: 50%; top: 40%; width: 70vmax; height: 70vmax; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(56,178,169,.14), transparent 70%); pointer-events: none; }
.cta__inner { position: relative; display: flex; flex-direction: column; align-items: center; padding: 120px 0; }
.cta__mark { width: min(34vw, 380px); height: auto; overflow: visible; }
.cta__name { margin-top: 30px; font-size: clamp(3rem, 7vw, 6.6rem); line-height: .95; letter-spacing: -.055em; font-weight: 600; }
.cta__tag { margin-top: 12px; font-size: clamp(1.125rem, 1.6vw, 1.4rem); letter-spacing: -.02em; color: var(--muted-d); }
.cta__soon { margin-top: 30px; font-size: 1rem; color: var(--muted-d); }
.cta .pill--lg { margin-top: 18px; }
.cta__contact { margin-top: 26px; font-size: .9375rem; color: var(--muted-d); }
.cta__contact a { color: var(--mint); }
@media (max-width: 760px) { .cta__mark { width: 62vw; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); padding: 36px 0 44px; }
.footer-inner { display: grid; grid-template-columns: auto 1fr; gap: 18px 40px; align-items: center; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: flex-end; }
.footer-nav a { color: var(--graphite); text-decoration: none; font-size: .9375rem; transition: color .3s var(--out); }
.footer-nav a:hover { color: var(--teal); }
.footer-legal { grid-column: 1 / -1; font-size: .8125rem; color: var(--graphite); padding-top: 18px; border-top: 1px solid var(--line); }
@media (max-width: 700px) { .footer-inner { grid-template-columns: 1fr; } .footer-nav { justify-content: flex-start; } }

/* ---------- Legal and credits pages ---------- */
.legal-page { background: var(--paper); color: var(--ink); }
.legal-page .site-header { position: sticky; background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: var(--ink); border-bottom-color: var(--line); }
.legal-page .site-header .pill { background: var(--teal); color: var(--on-teal); margin-left: auto; }
.legal { width: min(100% - 2 * var(--gutter), 720px); margin: 0 auto; padding: 56px 0 96px; }
.legal h1 { font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.08; letter-spacing: -.04em; font-weight: 560; margin-bottom: 20px; }
.legal h2 { font-size: 1.3125rem; letter-spacing: -.025em; font-weight: 560; margin: 2.4em 0 .6em; padding-top: 1.2em; border-top: 1px solid var(--line); }
.legal p, .legal li { color: color-mix(in srgb, var(--ink) 88%, transparent); }
.legal p + p { margin-top: 1em; }
.legal ul { list-style: disc; padding-left: 1.3em; margin: 1em 0; }
.legal li + li { margin-top: .5em; }
.legal a { color: var(--teal); }
.legal pre { white-space: pre-wrap; font-size: .8125rem; color: var(--graphite); }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.legal-nav a { font-size: .875rem; font-weight: 500; color: var(--graphite); text-decoration: none; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); }
.legal-nav a[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .open { height: 100vh; } .demo { height: 100vh; }
  .story { height: auto; } .story__pin { position: relative; height: auto; padding: 120px 0; }
  .story__steps { min-height: 0; } .story__step { position: relative; opacity: 1; transform: none; margin-bottom: 44px; }
  .story__bars { display: none; }
  .statement__text .w { opacity: 1; }
  .grain { display: none; }
}