/* =========================================================
   PepPin landing · layered sheets, one scroll
   ========================================================= */

:root {
  /* surfaces */
  --bg: oklch(0.993 0.002 165);
  --bg-2: oklch(0.974 0.004 165);
  --mist: oklch(0.962 0.016 165);
  --stone: oklch(0.952 0.004 200);
  --line: oklch(0.905 0.008 165);
  --line-2: oklch(0.94 0.006 165);

  /* ink */
  --ink: oklch(0.2 0.012 165);
  --ink-2: oklch(0.42 0.012 165);
  --ink-3: oklch(0.5 0.01 165);
  --ink-fixed: oklch(0.2 0.012 165);   /* text on always-light fills */

  /* surfaces that follow the theme */
  --surface: oklch(1 0 0);
  --surface-2: oklch(1 0 0);
  --glass: oklch(1 0 0 / .82);
  --glass-line: oklch(0.2 0.01 165 / .07);
  --screen-bg: #fff;
  --accent-ink: oklch(0.38 0.065 165);
  --hero-top: oklch(1 0 0);
  --hero-pool: oklch(0.955 0.012 165 / .9);
  --hero-floor: oklch(0.978 0.005 165);
  --shadow-soft: oklch(0.25 0.03 165 / .45);
  --select: oklch(0.86 0.12 215);        /* the app's selected-site cyan */

  /* graphite stage */
  --graphite: oklch(0.165 0.006 165);
  --graphite-2: oklch(0.205 0.007 165);
  --graphite-3: oklch(0.27 0.008 165);
  --on-dark: oklch(0.965 0.004 165);
  --on-dark-2: oklch(0.78 0.008 165);
  --on-dark-3: oklch(0.63 0.008 165);

  /* brand + category accents (from the app) */
  --green: oklch(0.47 0.075 165);
  --green-deep: oklch(0.38 0.065 165);
  --mint: oklch(0.93 0.035 165);
  --mint-2: oklch(0.87 0.055 165);
  --peach: oklch(0.935 0.04 62);
  --peach-ink: oklch(0.5 0.1 48);
  --lav: oklch(0.925 0.035 295);
  --lav-ink: oklch(0.45 0.1 295);
  --sky: oklch(0.935 0.026 235);
  --sky-ink: oklch(0.45 0.075 240);
  --amber: oklch(0.58 0.12 52);
  --amber-soft: oklch(0.955 0.03 65);

  --font: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Albert Sans", system-ui, sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  --gutter: clamp(20px, 5.5vw, 96px);
  --radius-sheet: 32px;

  /* z scale */
  --z-stage-ui: 4;
  --z-rail: 40;
  --z-nav: 50;
  --z-skip: 60;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: oklch(0.115 0.004 165);
  --bg-2: oklch(0.2 0.006 165);
  --mist: oklch(0.13 0.012 165);
  --stone: oklch(0.14 0.005 200);
  --line: oklch(1 0 0 / .13);
  --line-2: oklch(1 0 0 / .08);
  --ink: oklch(0.96 0.004 165);
  --ink-2: oklch(0.8 0.008 165);
  --ink-3: oklch(0.68 0.008 165);
  --surface: oklch(0.19 0.006 165);
  --surface-2: oklch(0.26 0.007 165);
  --glass: oklch(0.2 0.006 165 / .72);
  --glass-line: oklch(1 0 0 / .1);
  --screen-bg: #000;
  --accent-ink: oklch(0.84 0.08 165);
  --hero-top: oklch(0.13 0.005 165);
  --hero-pool: oklch(0.24 0.012 165 / .9);
  --hero-floor: oklch(0.1 0.004 165);
  --shadow-soft: oklch(0 0 0 / .7);
  color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: oklch(0.115 0.004 165);
  --bg-2: oklch(0.2 0.006 165);
  --mist: oklch(0.13 0.012 165);
  --stone: oklch(0.14 0.005 200);
  --line: oklch(1 0 0 / .13);
  --line-2: oklch(1 0 0 / .08);
  --ink: oklch(0.96 0.004 165);
  --ink-2: oklch(0.8 0.008 165);
  --ink-3: oklch(0.68 0.008 165);
  --surface: oklch(0.19 0.006 165);
  --surface-2: oklch(0.26 0.007 165);
  --glass: oklch(0.2 0.006 165 / .72);
  --glass-line: oklch(1 0 0 / .1);
  --screen-bg: #000;
  --accent-ink: oklch(0.84 0.08 165);
  --hero-top: oklch(0.13 0.005 165);
  --hero-pool: oklch(0.24 0.012 165 / .9);
  --hero-floor: oklch(0.1 0.004 165);
  --shadow-soft: oklch(0 0 0 / .7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--graphite);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01";
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul, figure, fieldset { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
em { font-style: normal; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 8px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -60px; z-index: var(--z-skip); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; transition: top .3s var(--ease-out); }
.skip:focus { top: 16px; }

/* intro gate: hidden only until the intro script takes over (3.5s failsafe) */
.js:not(.is-ready) [data-intro], .js:not(.is-ready) [data-intro-line], .js:not(.is-ready) .nav { opacity: 0; }

/* ---------- type ---------- */
.h2 {
  font-size: clamp(2.3rem, 1.25rem + 3.1vw, 4.3rem);
  font-weight: 600;
  letter-spacing: -0.036em;
  line-height: 1;
  text-wrap: balance;
}
.lede {
  margin-top: 18px;
  font-size: clamp(1.06rem, 0.98rem + 0.32vw, 1.28rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 36ch;
  text-wrap: pretty;
}
.sheet--dark .lede { color: var(--on-dark-2); }
.split-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split-line > span { display: inline-block; will-change: transform; }

/* ---------- buttons + forms ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 26px; border-radius: 999px;
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap;
  transition: transform .5s var(--ease-out), background-color .3s, box-shadow .5s var(--ease-out);
}
.btn--ink { background: var(--ink); color: var(--bg); box-shadow: 0 1px 0 oklch(1 0 0 / .12) inset, 0 10px 22px -12px oklch(0.2 0.02 165 / .6); }
.btn--ink:hover { background: oklch(0.13 0.01 165); transform: translateY(-1px); }
.btn--light { background: var(--on-dark); color: var(--ink-fixed); }
.btn--light:hover { background: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }

.waitlist {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  width: min(540px, 100%);
  padding: 6px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -26px oklch(0.25 0.03 165 / .45), 0 2px 6px -3px oklch(0.25 0.03 165 / .08);
  transition: border-color .3s, box-shadow .4s var(--ease-out);
}
.waitlist:focus-within { border-color: oklch(0.78 0.02 165); box-shadow: 0 0 0 4px oklch(0.47 0.075 165 / .12), 0 18px 40px -26px oklch(0.25 0.03 165 / .45); }
.waitlist input {
  flex: 1; min-width: 0; height: 48px; padding: 0 8px 0 20px;
  border: 0; background: transparent; outline: none; font-size: 16px; color: var(--ink);
}
.waitlist input::placeholder { color: var(--ink-3); }
.waitlist__msg {
  position: absolute; left: 0; right: 0; top: calc(100% + 12px);
  font-size: 14px; font-weight: 500; color: var(--accent-ink); text-align: center;
  opacity: 0; transform: translateY(-4px); transition: opacity .4s, transform .5s var(--ease-out);
  pointer-events: none;
}
.waitlist.is-error .waitlist__msg { color: oklch(0.52 0.16 28); }
.waitlist.has-msg .waitlist__msg { opacity: 1; transform: none; }
.waitlist.has-msg + .fineprint { opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
/* Turnstile check: only visible when Cloudflare asks a visitor to confirm */
.waitlist__check { position: absolute; left: 50%; top: calc(100% + 40px); z-index: 5; transform: translateX(-50%); }
.waitlist__check:empty { display: none; }
.waitlist.is-done input { color: var(--ink-3); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.waitlist.is-busy .btn { opacity: .7; cursor: progress; }
.waitlist--dark { background: oklch(0.23 0.008 165); border-color: oklch(1 0 0 / .1); box-shadow: 0 30px 60px -30px oklch(0 0 0 / .8); }
.waitlist--dark input { color: var(--on-dark); }
.waitlist--dark input::placeholder { color: var(--on-dark-3); }
.waitlist--dark:focus-within { border-color: oklch(1 0 0 / .28); box-shadow: 0 0 0 4px oklch(1 0 0 / .06); }
.waitlist--dark .waitlist__msg { color: var(--mint-2); }
.fineprint { margin-top: 14px; font-size: 13px; color: var(--ink-3); transition: opacity .3s; }

/* =========================================================
   NAV + RAIL
   ========================================================= */
.nav {
  position: fixed; top: 16px; left: var(--gutter); right: var(--gutter);
  z-index: var(--z-nav);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  pointer-events: none;
  --nav-ink: var(--ink);
  --nav-pill: oklch(1 0 0 / .78);
  --nav-line: oklch(0.2 0.01 165 / .08);
  --nav-cta-bg: var(--ink);
  --nav-cta-ink: var(--bg);
  color: var(--nav-ink);
  transition: color .6s var(--ease-out);
}
.nav > * { pointer-events: auto; }
.nav.is-dark {
  --nav-ink: var(--on-dark);
  --nav-pill: oklch(0.22 0.008 165 / .72);
  --nav-line: oklch(1 0 0 / .1);
  --nav-cta-bg: var(--on-dark);
  --nav-cta-ink: var(--ink-fixed);
}
.nav__brand { justify-self: start; display: block; padding: 8px 4px; }
.nav__lockup { height: 40px; width: auto; aspect-ratio: 806 / 240; fill: currentColor; margin-left: -8px; }
.nav__pill {
  display: flex; align-items: center; gap: 2px;
  padding: 5px; border-radius: 999px;
  background: var(--nav-pill);
  border: 1px solid var(--nav-line);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 30px -18px oklch(0.2 0.02 165 / .35);
  transition: background-color .6s var(--ease-out), border-color .6s;
}
.nav__pill a { padding: 10px 18px; border-radius: 999px; font-size: 15px; font-weight: 500; transition: background-color .3s, color .3s; }
.nav__pill a:not(.nav__cta):hover { background: color-mix(in oklch, currentColor 8%, transparent); }
.nav__cta { background: var(--nav-cta-bg); color: var(--nav-cta-ink); padding: 10px 22px !important; font-weight: 600 !important; transition: background-color .6s var(--ease-out), color .6s !important; }
.nav__cta--solo { display: none; justify-self: end; border-radius: 999px; font-size: 15px; }

/* nav: grouped in one capsule at the top, spreading to its places on scroll */
.nav__capsule {
  position: absolute; left: 50%; top: 50%; z-index: -1;
  width: var(--cap-w, 0px); height: var(--cap-h, 58px);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--nav-pill); border: 1px solid var(--nav-line);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 16px 40px -22px oklch(0.2 0.02 165 / .4);
  pointer-events: none;
  transition: width .9s var(--ease-expo), opacity .6s var(--ease-out), background-color .6s var(--ease-out), border-color .6s;
}
.nav__brand, .nav__pill, .nav__end {
  transition: transform .9s var(--ease-expo), background-color .6s var(--ease-out), border-color .6s, box-shadow .6s, color .6s;
}
.nav.is-compact .nav__brand { transform: translateX(var(--dx-b, 0px)); }
.nav.is-compact .nav__pill { transform: translateX(var(--dx-p, 0px)); background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav.is-compact .nav__end { transform: translateX(var(--dx-e, 0px)); }
.nav.is-compact .theme-toggle { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav:not(.is-compact) .nav__capsule { width: var(--cap-w-open, 100%); opacity: 0; }
.nav.no-anim .nav__capsule, .nav.no-anim .nav__brand, .nav.no-anim .nav__pill, .nav.no-anim .nav__end { transition: none; }

.rail {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
  z-index: var(--z-rail);
  color: var(--ink);
  transition: color .6s var(--ease-out), opacity .6s;
}
.rail.is-dark { color: var(--on-dark); }
.rail ol { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.rail a { display: flex; align-items: center; justify-content: flex-end; gap: 12px; height: 18px; padding-left: 12px; }
.rail a::after {
  content: ""; width: 12px; height: 1.5px; border-radius: 2px; background: currentColor; opacity: .28;
  transition: width .6s var(--ease-expo), opacity .4s;
}
.rail a span { font-size: 12.5px; font-weight: 500; opacity: 0; transform: translateX(6px); transition: opacity .35s, transform .5s var(--ease-out); white-space: nowrap; }
.rail a.is-on::after { width: 26px; opacity: 1; }
.rail:hover a span, .rail a:focus-visible span { opacity: .7; transform: none; }
.rail a.is-on span { opacity: 1 !important; transform: none; }

/* =========================================================
   SHEETS · each section is a physical layer
   ========================================================= */
.sheet { position: relative; height: calc(var(--track, 300) * 1vh); }
.sheet + .sheet { margin-top: -100vh; }
.sheet:nth-of-type(1) { z-index: 1; } .sheet:nth-of-type(2) { z-index: 2; }
.sheet:nth-of-type(3) { z-index: 3; } .sheet:nth-of-type(4) { z-index: 4; }
.sheet:nth-of-type(5) { z-index: 5; } .sheet:nth-of-type(6) { z-index: 6; }
.sheet:nth-of-type(7) { z-index: 7; } .sheet:nth-of-type(8) { z-index: 8; }

.sheet--light { --sheet-bg: var(--bg); }
.sheet--mint { --sheet-bg: var(--mist); }
.sheet--stone { --sheet-bg: var(--stone); }
.sheet--dark { --sheet-bg: var(--graphite); color: var(--on-dark); }

.stage {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--sheet-bg);
  border-radius: var(--stage-r, var(--radius-sheet)) var(--stage-r, var(--radius-sheet)) 0 0;
  box-shadow: 0 -30px 60px -24px oklch(0.1 0.01 165 / .35), 0 -1px 0 oklch(1 0 0 / .6);
  isolation: isolate;
}
.sheet--dark .stage { box-shadow: 0 -40px 80px -30px oklch(0 0 0 / .55), 0 -1px 0 oklch(1 0 0 / .1); }
.sheet--hero .stage { border-radius: 0; box-shadow: none; }
.stage__inner { position: absolute; inset: 0; transform-origin: 50% 20%; }
.stage__shade { position: absolute; inset: 0; z-index: 10; background: oklch(0.1 0.006 165); opacity: 0; pointer-events: none; }

/* grain on graphite sheets, like a real photographic stage */
.sheet--dark .stage::after, .final::after {
  content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.loading-note {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  font-size: 12.5px; color: var(--on-dark-3); opacity: .8; transition: opacity .6s;
}
.sheet--light .loading-note, .sheet--stone .loading-note, .sheet--mint .loading-note { color: var(--ink-3); }
.loading-note.is-hidden { opacity: 0; }

/* =========================================================
   1 · HERO
   ========================================================= */
.hero {
  overflow: hidden;
  /* the phone fits whole in the room under the step copy (measured by JS
     into --copy-b), shrinking on short windows and never passing 410px */
  --copy-b: calc(166px + 1.4vh);
  --phone-top: calc(var(--copy-b) + 16px);
  --pw: max(160px, min(410px, 34vw, calc((100vh - 18px - var(--phone-top)) / 2.0565)));
  --phone-y: calc(var(--phone-top) + var(--pw) * 1.02825);
}
.hero__light {
  position: absolute; inset: 0;
  background:
    radial-gradient(55% 45% at 50% 100%, var(--hero-pool), transparent 72%),
    radial-gradient(80% 60% at 50% 0%, var(--hero-top), transparent 70%),
    linear-gradient(var(--bg), var(--hero-floor));
}
.hero__copy {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: clamp(96px, 13.5vh, 150px) var(--gutter) 0;
  transform-origin: 50% 0%;
  will-change: transform, opacity, filter;
}
.badge { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; color: var(--ink); }
.badge__tile {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: 0 1px 0 oklch(1 0 0 / .08) inset, 0 8px 16px -8px oklch(0.2 0.02 165 / .3), 0 2px 3px -1px oklch(0.2 0.02 165 / .08);
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
}
.hero__title {
  margin-top: 24px;
  font-size: clamp(2.75rem, 1.2rem + 5vw, 5.75rem);
  font-weight: 600; line-height: .97; letter-spacing: -0.04em;
}
.mask { display: block; overflow: hidden; padding: 0.02em 0.04em 0.1em; margin-bottom: -0.08em; }
.mask > span { display: inline-block; }
.hero__lede {
  margin-top: 24px; max-width: 34ch;
  font-size: clamp(1.06rem, 0.96rem + 0.4vw, 1.32rem); line-height: 1.5; color: var(--ink-2);
  text-wrap: balance;
}
.hero .waitlist { margin-top: 32px; }

.hero__hint {
  position: absolute; right: var(--gutter); bottom: 38px; z-index: 5;
  display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-3);
}
.hero__hint span { position: relative; width: 1.5px; height: 34px; background: var(--line); overflow: hidden; border-radius: 2px; }
.hero__hint span::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: var(--ink-2); animation: hint 2.4s var(--ease-inout) infinite; }
@keyframes hint { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(260%); } }

/* ---------- hero device: two hands reaching toward a floating iPhone ---------- */
.hero__device { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.device {
  --ph: calc(var(--pw) * 2.0565);
  /* hands image scale: today's size, but shrinking with the phone on short
     windows so they keep the proportion they have on a large screen */
  --s: min(calc(min(330px, 35vh) * 0.0029), calc(var(--pw) * 0.00255));
  --reach: 0.57;                               /* fingertip distance from centre, in phone widths */
  position: absolute; left: 50%; top: var(--phone-y); width: 0; height: 0;
  will-change: transform;
}
/* each hand is its own image (forearms extended so they always run off-screen),
   placed so its fingertip sits just off the phone's edge */
.hand {
  position: absolute; z-index: 1; height: auto; max-width: none;
  user-select: none; -webkit-user-drag: none;
  will-change: transform;
}
.hand--l { width: calc(2408 * var(--s)); left: calc(var(--pw) * var(--reach) * -1 - 2286 * var(--s)); top: calc(-212 * var(--s)); }
.hand--r { width: calc(2360 * var(--s)); left: calc(var(--pw) * var(--reach) - 58 * var(--s)); top: calc(-761 * var(--s)); }

/* the phone: graphite titanium frame, black bezel, glass */
.phone {
  position: absolute; z-index: 3;
  left: calc(var(--pw) / -2); top: calc(var(--ph) / -2);
  width: var(--pw); height: var(--ph);
  will-change: transform;
}
.phone__body {
  position: absolute; inset: 0; border-radius: calc(var(--pw) * 0.17);
  background:
    linear-gradient(90deg, oklch(1 0 0 / .18), transparent 3%, transparent 97%, oklch(1 0 0 / .14)),
    linear-gradient(160deg, #6a6e72 0%, #2c2f32 14%, #1b1d1f 48%, #2a2d30 84%, #5f6367 100%);
  box-shadow:
    inset 0 0 0 1px oklch(1 0 0 / .1),
    inset 0 0 0 calc(var(--pw) * 0.008) #26292b,
    0 calc(var(--pw) * .2) calc(var(--pw) * .32) calc(var(--pw) * -.12) oklch(0.12 0.01 165 / .55),
    0 calc(var(--pw) * .06) calc(var(--pw) * .1) calc(var(--pw) * -.05) oklch(0.12 0.01 165 / .35);
}
.phone__body::before {
  content: ""; position: absolute; inset: calc(var(--pw) * 0.017);
  border-radius: calc(var(--pw) * 0.153); background: #030303;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / .05);
}
.phone__key {
  position: absolute; width: calc(var(--pw) * 0.013); border-radius: calc(var(--pw) * 0.006);
  background: linear-gradient(90deg, #26292b, #6c7074 55%, #303336);
}
.phone__key--action { left: calc(var(--pw) * -0.009); top: 16.5%; height: 4.6%; }
.phone__key--up { left: calc(var(--pw) * -0.009); top: 25%; height: 8%; }
.phone__key--down { left: calc(var(--pw) * -0.009); top: 35%; height: 8%; }
.phone__key--power { right: calc(var(--pw) * -0.009); top: 28%; height: 12.5%; background: linear-gradient(270deg, #26292b, #6c7074 55%, #303336); }
.phone__screen {
  position: absolute; inset: calc(var(--pw) * 0.05);
  border-radius: calc(var(--pw) * 0.12); overflow: hidden;
  background: var(--screen-bg);
  isolation: isolate;
}
.phone__glare {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, oklch(1 0 0 / .13) 0%, oklch(1 0 0 / .04) 22%, transparent 38%);
}

/* in-phone app, laid out in the screen's own points (402 pt wide) */
.shot {
  position: absolute; inset: 0; container-type: inline-size;
  --u: calc(100cqw / 402);
  --ap-bg: #ffffff; --ap-ink: #0d0f0f; --ap-ink-2: #5c6261; --ap-ink-3: #9ba19f;
  --ap-card-a: #f7f8f8; --ap-card-b: #eef0f0; --ap-line: oklch(0.2 0.01 165 / .07);
  --ap-btn: #0d0f0f; --ap-btn-ink: #ffffff; --ap-chip: #e2e5e4; --ap-sel: #0a7fb5; --ap-sel-ink: #ffffff;
  --ap-tabbar: #ffffff;
  font-family: var(--font-ui); letter-spacing: -0.01em; color: var(--ap-ink);
}
:root[data-theme="dark"] .shot {
  --ap-bg: #000000; --ap-ink: #f4f6f5; --ap-ink-2: #a3a8a6; --ap-ink-3: #6a6f6d;
  --ap-card-a: #151617; --ap-card-b: #0c0d0e; --ap-line: oklch(1 0 0 / .08);
  --ap-btn: #ffffff; --ap-btn-ink: #0d0f0f; --ap-chip: #2a2d2c; --ap-sel: #6fdcff; --ap-sel-ink: #04222d;
  --ap-tabbar: #111213;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot {
    --ap-bg: #000000; --ap-ink: #f4f6f5; --ap-ink-2: #a3a8a6; --ap-ink-3: #6a6f6d;
    --ap-card-a: #151617; --ap-card-b: #0c0d0e; --ap-line: oklch(1 0 0 / .08);
    --ap-btn: #ffffff; --ap-btn-ink: #0d0f0f; --ap-chip: #2a2d2c; --ap-sel: #6fdcff; --ap-sel-ink: #04222d;
    --ap-tabbar: #111213;
  }
}
/* screen change: a quick dip, the old screen clears as the new one settles in */
.scr {
  position: absolute; inset: 0; background: var(--ap-bg); opacity: 0; transform: scale(1.018);
  transition: opacity .42s var(--ease-out) .1s, transform .7s var(--ease-expo) .1s;
}
.scr.is-active { opacity: 1; transform: none; z-index: 2; }
.scr.is-leaving { opacity: 0; transform: scale(.99); z-index: 1; transition: opacity .2s var(--ease-out), transform .3s var(--ease-out); }
.scr img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.scr__dark { display: none; }
:root[data-theme="dark"] .scr__dark { display: block; }
:root[data-theme="dark"] .scr__light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .scr__dark { display: block; }
  :root:not([data-theme="light"]) .scr__light { display: none; }
}
.shot__island { position: absolute; z-index: 5; left: 50%; top: calc(var(--u) * 11); width: calc(var(--u) * 124); height: calc(var(--u) * 36); transform: translateX(-50%); border-radius: 999px; background: #030303; }

/* status bar + home indicator */
.ap-status { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 56); display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * 4) calc(var(--u) * 30) 0 calc(var(--u) * 46); }
.ap-time { font-size: calc(var(--u) * 17); font-weight: 600; }
.ap-icons { display: flex; align-items: center; gap: calc(var(--u) * 7); }
.ap-dots { display: flex; gap: calc(var(--u) * 2.4); }
.ap-dots b { width: calc(var(--u) * 4); height: calc(var(--u) * 4); border-radius: 50%; background: var(--ap-ink-3); }
.ap-wifi { width: calc(var(--u) * 17); height: calc(var(--u) * 12); background: var(--ap-ink); clip-path: polygon(50% 100%, 0 32%, 16% 14%, 50% 0, 84% 14%, 100% 32%); border-radius: 2px; }
.ap-bat { position: relative; width: calc(var(--u) * 27); height: calc(var(--u) * 13); border-radius: calc(var(--u) * 4); background: var(--ap-ink); }
.ap-bat::after { content: ""; position: absolute; right: calc(var(--u) * -3); top: calc(var(--u) * 4); width: calc(var(--u) * 2); height: calc(var(--u) * 5); border-radius: 0 2px 2px 0; background: var(--ap-ink-3); }
.ap-home { position: absolute; left: 50%; bottom: calc(var(--u) * 9); width: calc(var(--u) * 138); height: calc(var(--u) * 5); margin-left: calc(var(--u) * -69); border-radius: 3px; background: var(--ap-ink); z-index: 4; }

/* Today */
.td-head { position: absolute; left: calc(var(--u) * 16); right: calc(var(--u) * 16); top: calc(var(--u) * 64); height: calc(var(--u) * 46); display: flex; align-items: center; gap: calc(var(--u) * 4); }
.td-logo { height: calc(var(--u) * 40); width: auto; aspect-ratio: 806 / 240; color: var(--ap-ink); margin-left: calc(var(--u) * -6); }
.td-streak { display: inline-flex; align-items: center; gap: calc(var(--u) * 2); font-size: calc(var(--u) * 16); font-weight: 600; }
.td-streak svg { width: calc(var(--u) * 19); height: calc(var(--u) * 19); color: #f05a28; }
.td-btn { display: grid; place-items: center; width: calc(var(--u) * 42); height: calc(var(--u) * 42); border-radius: calc(var(--u) * 13); background: var(--ap-card-a); border: 1px solid var(--ap-line); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 16) calc(var(--u) * -10) oklch(0 0 0 / .25); color: var(--ap-ink-2); }
.td-streak + .td-btn { margin-left: auto; }
.td-btn + .td-btn { margin-left: calc(var(--u) * 8); }
.td-btn svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.td-week {
  position: absolute; left: 0; right: 0; top: calc(var(--u) * 126); display: grid; grid-template-columns: repeat(9, 1fr); text-align: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.td-week span { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 8); }
.td-week i { font-style: normal; font-size: calc(var(--u) * 13.5); color: var(--ap-ink-2); height: calc(var(--u) * 18); }
.td-week b { display: grid; place-items: center; width: calc(var(--u) * 36); height: calc(var(--u) * 36); margin: calc(var(--u) * 4) 0; border-radius: 50%; font-size: calc(var(--u) * 15); font-weight: 500; }
.td-week .is-past b { box-shadow: inset 0 0 0 calc(var(--u) * 1.6) var(--ap-ink-2); }
.td-week .is-today i { color: var(--ap-ink); }
.td-week .is-today b { width: calc(var(--u) * 46); height: calc(var(--u) * 46); margin: calc(var(--u) * -1) 0; background: var(--ap-btn); color: var(--ap-btn-ink); font-size: calc(var(--u) * 16.5); box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 18) calc(var(--u) * -8) oklch(0 0 0 / .45); }
.td-week .is-fade { opacity: .55; }
.td-week .is-far { opacity: .2; }
.td-title { position: absolute; left: calc(var(--u) * 20); top: calc(var(--u) * 212); font-size: calc(var(--u) * 16); color: var(--ap-ink-2); }
.td-card {
  position: absolute; left: calc(var(--u) * 18); right: calc(var(--u) * 18); height: calc(var(--u) * 88);
  display: flex; align-items: center; gap: calc(var(--u) * 15); padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 24); border: 1px solid var(--ap-line);
  background: linear-gradient(180deg, var(--ap-card-a), var(--ap-card-b));
  box-shadow: 0 1px 2px oklch(0 0 0 / .04), 0 calc(var(--u) * 10) calc(var(--u) * 22) calc(var(--u) * -14) oklch(0 0 0 / .2);
}
.td-card[data-x="c1"] { top: calc(var(--u) * 244); }
.td-card[data-x="c2"] { top: calc(var(--u) * 344); }
.td-card[data-x="c3"] { top: calc(var(--u) * 444); }
.td-card[data-x="c4"] { top: calc(var(--u) * 544); }
.td-ico {
  --tile-bg: #eef0ef;
  display: grid; place-items: center; flex: none; width: calc(var(--u) * 48); height: calc(var(--u) * 48);
  border-radius: calc(var(--u) * 14); background: var(--tile-bg); border: 1px solid oklch(0 0 0 / .05);
}
.td-ico svg { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.td-ico--amber { --tile-bg: #f6e7d7; color: #a0663a; }
.td-ico--blue { --tile-bg: #dcebf6; color: #2c6d98; }
.td-ico--green { --tile-bg: #e1efe6; color: #3d7a5a; }
:root[data-theme="dark"] .td-ico--amber { --tile-bg: #37241a; color: #d99c6c; }
:root[data-theme="dark"] .td-ico--blue { --tile-bg: #12283a; color: #7dc2ec; }
:root[data-theme="dark"] .td-ico--green { --tile-bg: #142a1f; color: #80c4a0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .td-ico--amber { --tile-bg: #37241a; color: #d99c6c; }
  :root:not([data-theme="light"]) .td-ico--blue { --tile-bg: #12283a; color: #7dc2ec; }
  :root:not([data-theme="light"]) .td-ico--green { --tile-bg: #142a1f; color: #80c4a0; }
}
.td-txt { flex: 1; min-width: 0; }
.td-txt b { display: block; font-size: calc(var(--u) * 18); font-weight: 500; letter-spacing: -0.015em; white-space: nowrap; }
.td-txt span { display: block; margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 15); color: var(--ap-ink-2); white-space: nowrap; }
.td-log { display: grid; place-items: center; width: calc(var(--u) * 64); height: calc(var(--u) * 42); border-radius: 999px; background: var(--ap-btn); color: var(--ap-btn-ink); font-size: calc(var(--u) * 16); font-weight: 500; }
.td-card.is-done .td-txt b, .td-card.is-done .td-txt span { color: var(--ap-ink-3); }
.td-card.is-done .td-ico { opacity: .6; }
.td-when { text-align: right; color: var(--ap-ink-3); }
.td-when b { display: block; font-size: calc(var(--u) * 15); font-weight: 500; }
.td-when span { display: block; margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 14); }
.td-toast {
  position: absolute; left: calc(var(--u) * 24); right: calc(var(--u) * 24); top: calc(var(--u) * 550); height: calc(var(--u) * 76);
  display: flex; align-items: center; gap: calc(var(--u) * 13); padding: 0 calc(var(--u) * 18);
  border-radius: calc(var(--u) * 22); background: var(--ap-bg); border: 1px solid var(--ap-line); opacity: 0;
}
.td-toast svg { width: calc(var(--u) * 28); height: calc(var(--u) * 28); color: var(--ap-ink); flex: none; }
.td-toast div { flex: 1; min-width: 0; }
.td-toast b { display: block; font-size: calc(var(--u) * 16.5); font-weight: 600; }
.td-toast span { display: block; margin-top: calc(var(--u) * 3); font-size: calc(var(--u) * 13); color: var(--ap-ink-2); white-space: nowrap; }
.td-toast time { font-size: calc(var(--u) * 13); color: var(--ap-ink-3); }
.td-tabbar { position: absolute; left: calc(var(--u) * 16); right: calc(var(--u) * 16); bottom: calc(var(--u) * 34); display: flex; align-items: center; gap: calc(var(--u) * 12); }
.td-tabs {
  flex: 1; height: calc(var(--u) * 70); border-radius: 999px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;
  background: var(--ap-tabbar); border: 1px solid var(--ap-line);
  box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 30) calc(var(--u) * -14) oklch(0 0 0 / .28);
}
.td-tabs span { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 5); font-size: calc(var(--u) * 12); color: var(--ap-ink-3); }
.td-tabs svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); }
.td-tabs .on { color: var(--ap-ink); font-weight: 500; }
.td-day { position: relative; display: grid; place-items: center; }
.td-day em { position: absolute; top: 58%; left: 50%; transform: translate(-50%, -50%); font-size: calc(var(--u) * 9.5); font-weight: 600; font-style: normal; }
.td-plus { display: grid; place-items: center; flex: none; width: calc(var(--u) * 66); height: calc(var(--u) * 66); border-radius: 50%; background: var(--ap-btn); color: var(--ap-btn-ink); box-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 26) calc(var(--u) * -10) oklch(0 0 0 / .45); }
.td-plus svg { width: calc(var(--u) * 28); height: calc(var(--u) * 28); }

/* Log dose, with the live body map */
.lg-head { position: absolute; left: calc(var(--u) * 22); right: calc(var(--u) * 22); top: calc(var(--u) * 70); display: flex; align-items: center; justify-content: space-between; }
.lg-head b { font-size: calc(var(--u) * 35); font-weight: 700; letter-spacing: -0.03em; }
.lg-x { position: relative; width: calc(var(--u) * 44); height: calc(var(--u) * 44); border-radius: 50%; border: 1px solid var(--ap-chip); background: var(--ap-card-a); }
.lg-x::before, .lg-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 17); height: calc(var(--u) * 1.8); margin: calc(var(--u) * -0.9) 0 0 calc(var(--u) * -8.5); border-radius: 2px; background: var(--ap-ink-2); transform: rotate(45deg); }
.lg-x::after { transform: rotate(-45deg); }
.lg-fields { position: absolute; left: calc(var(--u) * 18); right: calc(var(--u) * 18); top: calc(var(--u) * 128); display: grid; grid-template-columns: 1.95fr 1fr; gap: calc(var(--u) * 10); }
.lg-field { position: relative; height: calc(var(--u) * 70); padding: calc(var(--u) * 12) calc(var(--u) * 16); border-radius: calc(var(--u) * 18); border: 1px solid var(--ap-line); background: linear-gradient(180deg, var(--ap-card-a), var(--ap-card-b)); }
.lg-field span { display: block; font-size: calc(var(--u) * 12); letter-spacing: .08em; text-transform: uppercase; color: var(--ap-ink-3); }
.lg-field b { display: block; margin-top: calc(var(--u) * 5); font-size: calc(var(--u) * 22); font-weight: 500; letter-spacing: -0.02em; }
.lg-field--dose i { position: absolute; right: calc(var(--u) * 16); top: 50%; width: calc(var(--u) * 8); height: calc(var(--u) * 18); margin-top: calc(var(--u) * -9); background: linear-gradient(var(--ap-ink-3), var(--ap-ink-3)) 50% 0 / 100% 0 no-repeat; }
.lg-field--dose i::before, .lg-field--dose i::after { content: ""; position: absolute; left: 0; width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-left: 1.5px solid var(--ap-ink-3); border-top: 1.5px solid var(--ap-ink-3); transform: rotate(45deg); }
.lg-field--dose i::before { top: calc(var(--u) * 1); }
.lg-field--dose i::after { bottom: calc(var(--u) * 1); transform: rotate(225deg); }
.lg-chips { position: absolute; left: calc(var(--u) * 18); top: calc(var(--u) * 212); display: flex; gap: calc(var(--u) * 8); }
.lg-chips span { display: grid; place-items: center; height: calc(var(--u) * 38); padding: 0 calc(var(--u) * 17); border-radius: 999px; border: 1px solid var(--ap-chip); font-size: calc(var(--u) * 15); }
.lg-chips .on { background: var(--ap-card-b); }
.lg-site { position: absolute; left: calc(var(--u) * 20); right: calc(var(--u) * 18); top: calc(var(--u) * 268); display: flex; align-items: center; gap: calc(var(--u) * 9); }
.lg-site > i { width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: 50%; background: var(--ap-sel); box-shadow: 0 0 calc(var(--u) * 10) var(--ap-sel); }
.lg-site b { font-size: calc(var(--u) * 19); font-weight: 500; }
.lg-seg { margin-left: auto; display: flex; padding: calc(var(--u) * 3); border-radius: 999px; border: 1px solid var(--ap-chip); }
.lg-seg em { font-style: normal; display: grid; place-items: center; height: calc(var(--u) * 32); padding: 0 calc(var(--u) * 15); border-radius: 999px; font-size: calc(var(--u) * 14.5); color: var(--ap-ink-2); }
.lg-seg .on { background: var(--ap-card-b); color: var(--ap-ink); box-shadow: inset 0 0 0 1px var(--ap-line); }
.lg-map { position: absolute; left: 0; right: 0; top: calc(var(--u) * 310); height: calc(var(--u) * 372); pointer-events: auto; cursor: grab; touch-action: pan-y; }
.lg-map:active { cursor: grabbing; }
.lg-map canvas { position: absolute; left: 17%; top: 0; width: 66%; height: 100%; }
.lg-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lg-lines line { stroke: var(--ap-ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.lg-lines line.is-sel { stroke: var(--ap-sel); }
.lg-tags { position: absolute; inset: 0; }
.tag {
  position: absolute; left: 0; top: 0; padding: calc(var(--u) * 6) calc(var(--u) * 9); border-radius: calc(var(--u) * 10);
  border: calc(var(--u) * 1.4) solid var(--ap-ink); background: var(--ap-bg); color: var(--ap-ink);
  font-size: calc(var(--u) * 13.5); line-height: 1.25; white-space: nowrap; transition: opacity .35s;
}
.tag b { display: block; font-weight: 500; }
.tag span { display: block; color: var(--ap-ink-2); }
.tag--recent { border-style: dashed; border-color: var(--ap-ink-3); }
.tag--rest { border-color: var(--ap-chip); }
.tag--sel { background: var(--ap-sel); border-color: var(--ap-sel); color: var(--ap-sel-ink); box-shadow: 0 0 calc(var(--u) * 18) color-mix(in oklch, var(--ap-sel) 55%, transparent); }
.tag--sel span { color: color-mix(in oklch, var(--ap-sel-ink) 80%, transparent); }
.lg-next { position: absolute; left: 50%; top: calc(var(--u) * 690); transform: translateX(-50%); display: inline-flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 42); padding: 0 calc(var(--u) * 18); border-radius: 999px; border: 1px solid var(--ap-chip); background: var(--ap-card-a); font-size: calc(var(--u) * 16); }
.lg-next svg { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.lg-legend { position: absolute; left: 0; right: 0; top: calc(var(--u) * 746); display: flex; justify-content: center; gap: calc(var(--u) * 12); font-size: calc(var(--u) * 12.5); color: var(--ap-ink-2); }
.lg-legend span { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); }
.lg-legend i { width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%; }
.lg-legend .k-sel { background: var(--ap-sel); }
.lg-legend .k-today { box-shadow: inset 0 0 0 calc(var(--u) * 2) var(--ap-ink); }
.lg-legend .k-recent { border: 1.5px dashed var(--ap-ink-2); }
.lg-legend .k-rest { background: var(--ap-ink-3); }
.lg-btn { position: absolute; left: calc(var(--u) * 18); right: calc(var(--u) * 18); bottom: calc(var(--u) * 30); height: calc(var(--u) * 58); display: grid; place-items: center; border-radius: 999px; background: var(--ap-btn); color: var(--ap-btn-ink); font-size: calc(var(--u) * 18); font-weight: 500; }

/* exploded view: a copy of Today lifts off the glass */
.explode {
  position: absolute; z-index: 4; inset: calc(var(--pw) * 0.05);
  perspective: 1500px; perspective-origin: 50% 40%;
  pointer-events: none; visibility: hidden;
}
.explode.is-on { visibility: visible; }
.shot--explode { transform-style: preserve-3d; }
.explode .scr { opacity: 1; transform: none; transition: none; background: none; transform-style: preserve-3d; }
.explode .scr > :not([data-x]) { visibility: hidden; }
.explode [data-x] { will-change: transform; }
.explode .td-card, .explode .td-week, .explode .td-toast, .explode .td-tabs {
  box-shadow: 0 calc(var(--lift, 0) * 44px) calc(var(--lift, 0) * 70px) calc(var(--lift, 0) * -18px) oklch(0.1 0.02 165 / calc(var(--lift, 0) * .4)), 0 1px 2px oklch(0 0 0 / .05);
}
.explode .td-week { background: var(--ap-bg); border-radius: calc(var(--u) * 24); -webkit-mask-image: none; mask-image: none; padding: calc(var(--u) * 8) 0; }
.explode .td-toast { opacity: var(--toast-o, 0); }
.phone__screen.is-exploding [data-x] { visibility: hidden; }

/* =========================================================
   2 · DOSE HISTORY
   ========================================================= */
.history__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(34% 60% at 64% 52%, oklch(0.29 0.012 165 / .85), transparent 72%),
    radial-gradient(26% 10% at 64% 90%, oklch(0.25 0.01 165 / .9), transparent 70%);
}
.history__canvas {
  cursor: grab; touch-action: pan-y; position: absolute; top: 0; bottom: 0; left: 34%; right: 0; }
.history__canvas.is-drag { cursor: grabbing; }
.body-hint {
  position: absolute; left: 0; right: 0; top: 7%; z-index: var(--z-stage-ui);
  text-align: center; font-size: 12.5px; color: var(--ink-3); pointer-events: none;
  transition: opacity .6s var(--ease-out);
}
.body-hint.is-gone { opacity: 0; }
.history__canvas canvas, .inventory__canvas, .calc__canvas, .progress__scene canvas { width: 100%; height: 100%; }
.history__copy { position: absolute; z-index: var(--z-stage-ui); left: var(--gutter); top: 50%; transform: translateY(-50%); width: min(470px, 38vw); }
.log { margin-top: 44px; }
.log__head { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid oklch(1 0 0 / .1); font-size: 12.5px; color: var(--on-dark-3); }
.log button {
  position: relative; width: 100%; display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: center;
  padding: 14px 0 14px 22px; text-align: left; color: var(--on-dark-3);
  border-bottom: 1px solid oklch(1 0 0 / .07);
  transition: color .45s var(--ease-out);
}
.log button::before {
  content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  border: 1.5px solid oklch(1 0 0 / .22); transition: background-color .4s, border-color .4s, box-shadow .6s;
}
.log button[aria-pressed="true"] { color: var(--on-dark); }
.log button[aria-pressed="true"]::before { background: var(--mint); border-color: var(--mint); box-shadow: 0 0 0 5px oklch(0.93 0.035 165 / .12); }
.log button:hover { color: var(--on-dark-2); }
.log button[aria-pressed="true"]:hover { color: var(--on-dark); }
.log time { grid-column: 1; font-size: 12.5px; opacity: .8; font-variant-numeric: tabular-nums; }
.log b { grid-column: 1; font-size: 16px; font-weight: 500; margin-top: 2px; }
.log b em { margin-left: 6px; opacity: .6; font-weight: 400; }
.log button > span { grid-column: 2; grid-row: 1 / 3; font-size: 14.5px; }

.annot { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .6s; }
.annot.is-on { opacity: 1; }
.annot__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.annot__line line { stroke: oklch(1 0 0 / .45); stroke-width: 1; }
.annot__line circle { fill: #fff; }
.annot__chip {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 12px; border-radius: 999px; white-space: nowrap;
  background: oklch(0.22 0.008 165 / .72); border: 1px solid oklch(1 0 0 / .14);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 14px; font-weight: 500; color: var(--on-dark);
  will-change: transform;
}
.annot__pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.annot__pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--mint); opacity: 0; animation: pulse 2.6s var(--ease-out) infinite; }
@keyframes pulse { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }

.toast {
  position: absolute; z-index: var(--z-stage-ui); right: 5vw; top: 16vh;
  display: flex; align-items: center; gap: 14px; padding: 16px 22px 16px 16px; border-radius: 20px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-2);
  box-shadow: 0 40px 70px -30px oklch(0 0 0 / .7), 0 2px 6px oklch(0 0 0 / .2);
}
.toast svg { width: 28px; height: 28px; color: var(--accent-ink); }
.toast b { display: block; font-size: 16px; font-weight: 600; }
.toast span { display: block; font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.segmented {
  position: absolute; z-index: var(--z-stage-ui); left: 67%; bottom: 6vh; transform: translateX(-50%);
  display: flex; padding: 4px; border-radius: 999px;
  background: oklch(1 0 0 / .06); border: 1px solid oklch(1 0 0 / .1);
}
.segmented button { position: relative; z-index: 1; width: 98px; height: 38px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--on-dark-2); transition: color .4s; }
.segmented button[aria-pressed="true"] { color: var(--ink-fixed); }
.segmented i { position: absolute; left: 4px; top: 4px; width: 98px; height: 38px; border-radius: 999px; background: var(--on-dark); transition: transform .6s var(--ease-expo); }
.segmented.is-back i { transform: translateX(98px); }

/* =========================================================
   3 · ASSISTANT
   ========================================================= */
.assistant { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 7vw; padding: 0 calc(var(--gutter) + 40px) 0 var(--gutter); }
.assistant__stack { position: relative; height: min(640px, 72vh); perspective: 1800px; perspective-origin: 50% 20%; }
.chat, .chat-ghost { position: absolute; inset: 0; border-radius: 30px; background: var(--surface); border: 1px solid var(--line-2); }
.chat-ghost { transform-origin: 50% 0; }
.chat-ghost { border-color: var(--line); box-shadow: 0 30px 60px -40px oklch(0.25 0.03 165 / .35); }
.chat-ghost--1 { transform: translate3d(0, -16px, -70px); opacity: .8; }
.chat-ghost--2 { transform: translate3d(0, -30px, -150px); opacity: .5; }
.chat {
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 1px 0 oklch(1 0 0 / .06) inset, 0 50px 90px -50px var(--shadow-soft), 0 16px 30px -18px oklch(0.25 0.03 165 / .18);
  transform-origin: 50% 100%;
  will-change: transform;
}
.chat__head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line-2); }
.chat__avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--mint); color: var(--green-deep); }
.chat__avatar svg { width: 22px; height: 22px; }
.chat__head b { display: block; font-size: 15.5px; font-weight: 600; }
.chat__head span { display: block; font-size: 13px; color: var(--ink-3); }
.chat__log {
  /* the demo scrolls the log itself, so the page keeps the wheel */
  flex: 1; overflow: hidden; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 18px; padding: 26px 22px 18px;
  -webkit-mask-image: linear-gradient(transparent, #000 28px); mask-image: linear-gradient(transparent, #000 28px);
}
.chat__log::-webkit-scrollbar { display: none; }
.msg { flex-shrink: 0; transition: opacity .5s var(--ease-out), transform .7s var(--ease-expo); }
.js .msg[data-step] { opacity: 0; transform: translateY(14px); }
.js .msg.is-shown { opacity: 1; transform: none; }
.msg p { font-size: 16.5px; line-height: 1.5; }
.msg--me { align-self: flex-end; max-width: 80%; padding: 13px 18px; border-radius: 22px 22px 6px 22px; background: var(--bg-2); border: 1px solid var(--line-2); font-weight: 500; }
.msg--bot { position: relative; align-self: flex-start; max-width: 92%; color: var(--ink-2); min-height: 26px; }
.msg--bot .w { opacity: .08; transition: opacity .35s; }
.msg--bot .w.on { opacity: 1; }
.typing { position: absolute; left: 0; top: 6px; display: flex; gap: 5px; opacity: 0; transition: opacity .3s; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: dot 1.2s var(--ease-inout) infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: none; opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }
.msg--bot.is-typing .typing { opacity: 1; }
.msg--bot.is-typing p { opacity: 0; }
.chat__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 22px 14px; }
.chat__chips button {
  padding: 9px 15px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line-2);
  transition: background-color .3s, border-color .3s, transform .5s var(--ease-out);
}
.chat__chips button:hover { background: var(--surface-2); border-color: var(--line); transform: translateY(-1px); }
.chat__chips button:disabled { opacity: .45; pointer-events: none; }
.chat__input { display: flex; align-items: center; gap: 8px; margin: 0 22px 18px; padding: 6px 6px 6px 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); transition: border-color .3s, box-shadow .3s; }
.chat__input:focus-within { border-color: oklch(0.78 0.02 165); box-shadow: 0 0 0 4px oklch(0.47 0.075 165 / .1); }
.chat__input input { flex: 1; min-width: 0; height: 40px; border: 0; background: none; outline: none; font-size: 16px; }
.chat__input input::placeholder { color: var(--ink-3); }
.chat__input button { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--bg); transition: transform .4s var(--ease-out); }
.chat__input button:hover { transform: scale(1.06); }
.chat__input svg { width: 20px; height: 20px; }
.assistant__copy .note { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); max-width: 36ch; font-size: 13.5px; color: var(--ink-3); }

/* =========================================================
   4 · PROGRESS
   ========================================================= */
.progress__copy { position: absolute; z-index: var(--z-stage-ui); left: var(--gutter); top: clamp(110px, 17vh, 190px); width: min(460px, 36vw); }
.progress__scene { position: absolute; left: 30%; right: 2%; top: 6%; bottom: 6%; }
.progress__panel {
  position: absolute; left: 16%; right: 12%; top: 12%;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  pointer-events: none; will-change: transform, opacity;
}
.progress__panel b { display: block; font-size: 17px; font-weight: 600; }
.progress__panel span { display: block; font-size: 13.5px; color: var(--ink-3); }
.progress__week { padding: 6px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line-2); color: var(--ink-2) !important; font-size: 13px; }
.progress__days li { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; transform: translate(-50%, 0); pointer-events: none; will-change: transform; }
.progress__days b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.progress__days span { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.progress__days li.is-top b { color: var(--accent-ink); }
.health { position: absolute; z-index: var(--z-stage-ui); left: var(--gutter); bottom: clamp(70px, 12vh, 140px); display: flex; flex-direction: column; gap: 12px; }
.health li {
  display: flex; align-items: center; gap: 14px; min-width: 272px; padding: 12px 22px 12px 12px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: 0 24px 40px -28px var(--shadow-soft), 0 1px 2px oklch(0.3 0.04 165 / .06);
  will-change: transform;
}
.health__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--mint); color: var(--green-deep); }
.health__ico svg { width: 22px; height: 22px; }
.health span { display: block; font-size: 13px; color: var(--ink-3); }
.health b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.progress__src { position: absolute; left: var(--gutter); bottom: clamp(28px, 5vh, 56px); font-size: 12.5px; color: var(--ink-3); }

/* =========================================================
   5 · INVENTORY
   ========================================================= */
.inventory__canvas { position: absolute; inset: 0; }
.inventory__copy { position: absolute; z-index: var(--z-stage-ui); left: var(--gutter); top: 50%; transform: translateY(-50%); width: min(440px, 34vw); }
.stock {
  position: absolute; z-index: var(--z-stage-ui); right: calc(var(--gutter) + 30px); top: 50%; margin-top: -90px;
  width: min(390px, 30vw); padding: 22px; border-radius: 24px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2);
  box-shadow: 0 50px 90px -40px oklch(0 0 0 / .8), 0 2px 8px oklch(0 0 0 / .25);
  will-change: transform;
}
.stock__top { display: flex; align-items: center; gap: 12px; }
.stock__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--mint); color: var(--green-deep); }
.stock__ico svg { width: 22px; height: 22px; }
.stock__top b { font-size: 21px; font-weight: 600; color: var(--accent-ink); letter-spacing: -0.02em; }
.stock__pct { margin-left: auto; font-size: 15px; color: var(--ink-2); }
.stock__pct em { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.stock__bar { position: relative; height: 10px; margin: 20px 0 16px; border-radius: 6px; background: var(--bg-2); overflow: hidden; }
.stock__bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--accent-ink); transform-origin: 0 50%; transform: scaleX(var(--s, 1)); }
.stock__meta { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-3); }
.stock__meta span { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.stock__meta svg { width: 16px; height: 16px; }
.stock-mini {
  position: absolute; z-index: var(--z-stage-ui); right: calc(var(--gutter) + 90px); top: 50%; margin-top: 110px;
  display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; border-radius: 18px;
  background: oklch(0.26 0.008 165 / .6); border: 1px solid oklch(1 0 0 / .1);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  will-change: transform;
}
.stock-mini svg { width: 22px; height: 22px; color: var(--mint-2); }
.stock-mini b { display: block; font-size: 14.5px; font-weight: 600; }
.stock-mini span { display: block; font-size: 13px; color: var(--on-dark-3); }

/* =========================================================
   6 · LIBRARY
   ========================================================= */
.library__copy { position: absolute; z-index: var(--z-stage-ui); left: var(--gutter); top: 50%; transform: translateY(-50%); width: min(380px, 29vw); }
.deck { position: absolute; left: 35%; right: 4%; top: 0; bottom: 0; perspective: 1900px; perspective-origin: 50% 40%; }
.goal {
  --gw: clamp(180px, 15vw, 250px);
  position: absolute; left: 50%; top: 50%;
  width: var(--gw); height: calc(var(--gw) * 1.3);
  margin: calc(var(--gw) * -0.65) 0 0 calc(var(--gw) * -0.5);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 22px; border-radius: 30px;
  box-shadow: 0 1px 0 oklch(1 0 0 / .8) inset, 0 50px 70px -40px oklch(0.3 0.03 165 / .45), 0 6px 14px -8px oklch(0.3 0.03 165 / .18);
  transform-style: preserve-3d; will-change: transform;
  transition: box-shadow .6s var(--ease-out);
  cursor: default;
}
.goal--peach { background: linear-gradient(160deg, oklch(0.955 0.03 62), oklch(0.915 0.05 58)); color: var(--peach-ink); }
.goal--mint { background: linear-gradient(160deg, oklch(0.955 0.028 165), oklch(0.91 0.045 165)); color: var(--green-deep); }
.goal--lav { background: linear-gradient(160deg, oklch(0.948 0.026 295), oklch(0.905 0.045 295)); color: var(--lav-ink); }
.goal--sky { background: linear-gradient(160deg, oklch(0.955 0.02 235), oklch(0.915 0.035 238)); color: var(--sky-ink); }
.goal__pill { align-self: flex-start; padding: 9px 16px; border-radius: 999px; background: oklch(1 0 0 / .72); font-size: 16px; font-weight: 600; box-shadow: 0 1px 0 #fff inset, 0 6px 14px -8px oklch(0.3 0.03 165 / .3); }
.goal__art { display: grid; place-items: center; flex: 1; }
.goal__art svg { width: 58%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.1; opacity: .5; }
.goal__foot b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.goal__foot span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; opacity: .82; }

/* =========================================================
   7 · CALCULATOR
   ========================================================= */
.calc__canvas { position: absolute; inset: 0; }
.calc__copy { position: absolute; z-index: var(--z-stage-ui); left: var(--gutter); top: clamp(110px, 16vh, 180px); width: min(440px, 34vw); }
.calc__panel {
  position: absolute; z-index: var(--z-stage-ui); left: var(--gutter); bottom: clamp(40px, 9vh, 100px);
  width: min(400px, 32vw); padding: 22px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line-2);
  box-shadow: 0 40px 70px -40px oklch(0.25 0.02 200 / .45), 0 2px 6px oklch(0.25 0.02 200 / .06);
  will-change: transform;
}
.calc__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.calc__head b { font-size: 17px; font-weight: 600; }
.calc__head span { font-size: 13px; color: var(--ink-3); }
.calc__panel fieldset { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.calc__panel legend { float: left; font-size: 14px; color: var(--ink-2); }
.chips { display: flex; padding: 3px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-2); }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: grid; place-items: center; height: 32px; padding: 0 13px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); transition: background-color .3s, color .3s, box-shadow .3s; }
.chips input:checked + span { background: var(--surface-2); color: var(--ink); font-weight: 600; box-shadow: 0 2px 6px -2px oklch(0.2 0.02 165 / .25); }
.chips input:focus-visible + span { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.calc__dose { display: grid; grid-template-columns: 1fr auto; row-gap: 12px; padding: 12px 0 6px; }
.calc__dose label { font-size: 14px; color: var(--ink-2); }
.calc__dose output { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.calc__dose input { grid-column: 1 / -1; width: 100%; height: 22px; margin: 0; background: none; -webkit-appearance: none; appearance: none; --fill: 20%; }
.calc__dose input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ink) var(--fill), var(--line-2) var(--fill)); }
.calc__dose input::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ink) var(--fill), var(--line-2) var(--fill)); }
.calc__dose input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 4px 10px -3px oklch(0.2 0.02 165 / .4); }
.calc__dose input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 4px 10px -3px oklch(0.2 0.02 165 / .4); }
.calc__result { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 12px; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.calc__result > span:first-child { font-size: 14px; color: var(--ink-2); }
.calc__result b { justify-self: end; font-size: 30px; font-weight: 600; letter-spacing: -0.03em; }
.calc__result b em { font-variant-numeric: tabular-nums; }
.calc__result > span:last-child { grid-column: 1 / -1; justify-self: end; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.calc__labels li { position: absolute; left: 0; top: 0; z-index: var(--z-stage-ui); display: flex; flex-direction: column; align-items: center; transform: translate(-50%, 0); pointer-events: none; transition: opacity .4s; will-change: transform; }
.calc__labels b { font-size: 15px; font-weight: 600; }
.calc__labels span { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.calc__labels li.is-over b::after { content: " · too small"; font-weight: 500; color: var(--ink-3); }
.calc__labels li.is-over { opacity: .55; }
.calc__fine { margin-top: 14px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }

/* =========================================================
   8 · HOW IT WORKS + JOIN
   ========================================================= */
.sheet--final { height: auto; }
.final {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100vh;
  padding: clamp(110px, 18vh, 200px) var(--gutter) 40px;
  background:
    radial-gradient(60% 40% at 50% 64%, oklch(0.24 0.01 165), transparent 70%),
    var(--graphite);
  color: var(--on-dark);
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  box-shadow: 0 -40px 80px -30px oklch(0 0 0 / .55), 0 -1px 0 oklch(1 0 0 / .1);
}
.how { max-width: 1180px; margin: 0 auto; }
.how .h2 { max-width: 16ch; }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 64px); margin-top: clamp(48px, 8vh, 90px); padding-top: 42px; }
.steps li:not(.steps__rail) { position: relative; }
.steps__n {
  position: absolute; top: -56px; left: 0;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--graphite); border: 1px solid oklch(1 0 0 / .22);
  font-size: 13px; font-weight: 600; color: var(--on-dark-2); font-variant-numeric: tabular-nums;
  transition: background-color .5s, color .5s, border-color .5s;
}
.steps li.is-on .steps__n { background: var(--on-dark); color: var(--ink-fixed); border-color: var(--on-dark); }
.steps h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); font-weight: 600; letter-spacing: -0.02em; }
.steps p { margin-top: 10px; max-width: 30ch; color: var(--on-dark-2); font-size: 16px; line-height: 1.55; }
.steps__rail { position: absolute; left: 15px; right: 0; top: 0; height: 1px; background: oklch(1 0 0 / .12); z-index: -1; }
.steps__rail i { position: absolute; inset: 0; background: var(--on-dark-2); transform-origin: 0 50%; transform: scaleX(var(--r, 0)); }

.join { display: flex; flex-direction: column; align-items: center; text-align: center; margin: clamp(120px, 22vh, 240px) auto 0; }
.join__mark { width: 64px; height: auto; color: var(--on-dark); margin-bottom: 22px; }
.join__title { font-size: clamp(2.6rem, 1.3rem + 4.4vw, 5.5rem); font-weight: 600; letter-spacing: -0.04em; line-height: .98; text-wrap: balance; }
.join .waitlist { margin-top: 40px; }
.join .fineprint { color: var(--on-dark-3); }

.footer {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px 24px;
  max-width: 1180px; margin: clamp(120px, 20vh, 220px) auto 0; padding-top: 28px;
  border-top: 1px solid oklch(1 0 0 / .1);
}
.footer__lockup { height: 34px; width: auto; aspect-ratio: 806 / 240; color: var(--on-dark); margin-left: -6px; }
.footer nav { display: flex; gap: 26px; font-size: 14.5px; color: var(--on-dark-2); }
.footer nav a { transition: color .3s; }
.footer nav a:hover { color: var(--on-dark); }
.footer p { grid-column: 1 / -1; font-size: 13px; color: var(--on-dark-3); }

/* =========================================================
   THEME TOGGLE + NAV END
   ========================================================= */
.nav__end { justify-self: end; display: flex; align-items: center; gap: 8px; }
.theme-toggle {
  position: relative; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--nav-pill); border: 1px solid var(--nav-line); color: var(--nav-ink);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 10px 30px -18px oklch(0.2 0.02 165 / .35);
  transition: background-color .6s var(--ease-out), border-color .6s, color .6s, transform .5s var(--ease-out);
}
.theme-toggle:hover { transform: rotate(-12deg); }
.theme-toggle svg { grid-area: 1 / 1; width: 20px; height: 20px; transition: opacity .35s, transform .6s var(--ease-expo); }
.theme-toggle__sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
:root[data-theme="dark"] .theme-toggle__sun { opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(.6); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__sun { opacity: 1; transform: none; }
  :root:not([data-theme="light"]) .theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(.6); }
}

/* theme switch: a circular reveal from the toggle (View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: theme-reveal .9s var(--ease-expo) both; }
@keyframes theme-reveal {
  from { clip-path: circle(0 at var(--vt-x, 90%) var(--vt-y, 5%)); }
  to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 90%) var(--vt-y, 5%)); }
}

/* =========================================================
   BODY MAP · callouts and legend in the app's own language
   ========================================================= */
.callouts { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.callouts__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.callouts__lines line { stroke: oklch(1 0 0 / .42); stroke-width: 1; stroke-dasharray: 3 4; transition: opacity .4s; }
.callouts__lines line.is-sel { stroke: var(--select); stroke-dasharray: 4 3; }
.callout {
  position: absolute; left: 0; top: 0;
  min-width: 96px; padding: 8px 12px; border-radius: 13px;
  border: 1.5px solid oklch(1 0 0 / .72); background: oklch(0.13 0.005 165 / .74);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--on-dark); line-height: 1.25; white-space: nowrap;
  transition: opacity .45s var(--ease-out), background-color .45s, border-color .45s, color .45s, box-shadow .6s;
  will-change: transform;
}
.callout b { display: block; font-size: 14px; font-weight: 600; }
.callout span { display: block; font-size: 13px; color: var(--on-dark-2); transition: color .45s; }
.callout.is-recent { border-style: dashed; border-color: oklch(1 0 0 / .5); }
.callout.is-rest { border-color: oklch(1 0 0 / .22); color: var(--on-dark-2); }
.callout.is-sel {
  background: var(--select); border-color: var(--select); color: oklch(0.2 0.04 220);
  box-shadow: 0 0 0 1px oklch(0.86 0.12 215 / .4), 0 0 34px oklch(0.8 0.13 215 / .45);
}
.callout.is-sel span { color: oklch(0.28 0.05 220); }

.body-controls {
  position: absolute; z-index: var(--z-stage-ui); left: 67%; bottom: 4.5vh; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.body-controls .segmented { position: relative; left: auto; bottom: auto; transform: none; }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 13px; color: var(--on-dark-2); }
.legend li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.lg { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.lg--sel { background: var(--select); box-shadow: 0 0 10px var(--select); }
.lg--today { border: 2px solid var(--on-dark); }
.lg--recent { border: 1.5px dashed var(--on-dark-2); }
.lg--rest { background: oklch(0.6 0.006 165); }

/* =========================================================
   ASSISTANT · sources and compound names, as in the app
   ========================================================= */
.cmp { color: var(--accent-ink); font-style: normal; }
.sources { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease-out), transform .6s var(--ease-expo); }
.msg--bot.is-done .sources { opacity: 1; transform: none; }
.sources li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); font-size: 13px; color: var(--ink-2); }
.sources i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-ink); }
.sources .is-lib i { background: var(--ink-3); }

.health b small { margin-left: 6px; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.calc__head { gap: 10px; align-items: center; }
.calc__head b { flex: 1; }
.calc__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--bg-2); color: var(--ink); }
.calc__ico svg { width: 18px; height: 18px; }



.body-controls__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.segmented--body.is-back i { transform: translateX(98px); }
.segmented[data-bodysex].is-male i { transform: translateX(98px); }

/* inventory: GHK-Cu is the one blue peptide */
.stock__ico { background: oklch(0.93 0.035 235); color: oklch(0.42 0.1 240); }
.stock__top b { color: oklch(0.42 0.1 240); }
.stock__bar i { background: oklch(0.55 0.13 240); }
:root[data-theme="dark"] .stock__ico { background: oklch(0.3 0.06 240); color: oklch(0.85 0.08 230); }
:root[data-theme="dark"] .stock__top b { color: oklch(0.85 0.08 230); }
:root[data-theme="dark"] .stock__bar i { background: oklch(0.72 0.12 235); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stock__ico { background: oklch(0.3 0.06 240); color: oklch(0.85 0.08 230); }
  :root:not([data-theme="light"]) .stock__top b { color: oklch(0.85 0.08 230); }
  :root:not([data-theme="light"]) .stock__bar i { background: oklch(0.72 0.12 235); }
}


/* ---------- hero steps: heading on top, notes floating beside the phone ---------- */
.hsteps { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hstep { position: absolute; inset: 0; visibility: hidden; }
.hstep__copy {
  position: absolute; left: 0; right: 0; top: calc(76px + 1.4vh);
  padding: 0 var(--gutter); text-align: center; opacity: 0; will-change: transform, opacity;
}
.hstep__h { font-size: clamp(1.6rem, min(3vw, 4.8vh), 2.85rem); font-weight: 600; letter-spacing: -0.032em; line-height: 1.05; text-wrap: balance; }
.hstep__p { margin: 12px auto 0; max-width: 62ch; font-size: clamp(.98rem, .9rem + .25vw, 1.08rem); line-height: 1.5; color: var(--ink-2); text-wrap: balance; }
.fcard, .fchips {
  position: absolute; opacity: 0; will-change: transform, opacity;
  width: clamp(210px, 17vw, 270px);
}
.fcard {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px 13px 13px; border-radius: 18px;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink);
  box-shadow: 0 26px 50px -30px var(--shadow-soft), 0 2px 6px -3px oklch(0.2 0.02 165 / .1);
}
.fcard--l { right: calc(50% + var(--pw) / 2 + 2.6vw); }
.fcard--r { left: calc(50% + var(--pw) / 2 + 2.6vw); }
.fcard--a { top: calc(var(--phone-y) - var(--pw) * 0.62); }
.fcard--b { top: calc(var(--phone-y) + var(--pw) * 0.18); }
.fcard--r.fcard--a + .fcard--r.fcard--b { top: calc(var(--phone-y) + var(--pw) * 0.02); }
.fcard__ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--bg-2); color: var(--ink); }
.fcard__ico svg { width: 20px; height: 20px; }
.fcard__ico--sel { background: color-mix(in oklch, var(--select) 22%, var(--surface)); position: relative; }
.fcard__ico--sel::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: oklch(0.55 0.13 225); box-shadow: 0 0 12px oklch(0.7 0.14 220); }
.fcard b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.fcard div > span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--ink-3); }
.fcard--stat div > span { margin: 0 0 2px; }
.fcard--stat b { font-size: 19px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fcard--stat small { margin-left: 4px; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); }
.fchips { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.fchips li {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-2); font-size: 13.5px; color: var(--ink-2);
  box-shadow: 0 18px 34px -24px var(--shadow-soft);
}
.fchips i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-ink); }
.fchips .is-lib i { background: var(--ink-3); }

/* the scrollbar stays hidden; the chapter rail shows where you are */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1180px) {
  .rail { display: none; }
  .assistant { padding-right: var(--gutter); }
}

@media (max-width: 900px) {
  :root { --radius-sheet: 24px; }
  .nav { top: 12px; grid-template-columns: 1fr auto; }
  .nav__pill { display: none; }
  .nav__cta--solo { display: inline-flex; align-items: center; height: 40px; padding: 0 18px !important; }
  .nav__lockup { height: 34px; }
  .hero { --phone-top: calc(var(--copy-b) + 12px); --pw: min(86vw, 360px, calc((100vh - 12px - var(--phone-top)) / 2.0565)); }
  /* on phones, size against the viewport with the browser's toolbars showing */
  @supports (height: 100svh) {
    .hero { --pw: min(86vw, 360px, calc((100svh - 12px - var(--phone-top)) / 2.0565)); }
  }
  /* hands stay small, fingertips tucked behind the phone's edges */
  .device { --s: min(calc(min(78vw, 330px, 42vh) * 0.0021), calc(var(--pw) * 0.00195)); --reach: 0.4; }
  .hstep__copy { top: 72px; }
  .hstep__h { font-size: 1.4rem; }
  .hstep__p { margin-top: 6px; font-size: .9rem; max-width: 32ch; }
  .fcard, .fchips { display: none; }
  .segmented[data-bodysex].is-male i { transform: translateX(84px); }
  .body-controls__row { gap: 8px; }
  .theme-toggle { width: 40px; height: 40px; }

  .hero__copy { padding-top: 92px; }
  .hero__title { margin-top: 18px; }
  .hero__lede { margin-top: 16px; font-size: 1.02rem; max-width: 30ch; }
  .hero .waitlist { margin-top: 22px; }
  .hero__hint { display: none; }

  /* dose history */
  .history__copy { top: 84px; transform: none; width: auto; right: var(--gutter); }
  .history__copy .lede { margin-top: 10px; }
  .history__canvas { left: 0; top: 30%; }
  .log { margin-top: 18px; }
  .log__head { display: none; }
  .log li { display: none; }
  .log li:has([aria-pressed="true"]) { display: block; }
  .log button { border-bottom: 0; border-top: 1px solid oklch(1 0 0 / .08); padding-top: 12px; }
  .toast { display: none; }
  .body-controls { left: 50%; bottom: 2.5vh; gap: 10px; width: calc(100% - 2 * var(--gutter)); }
  .legend { gap: 4px 12px; font-size: 12px; }
  .callout { min-width: 0; padding: 6px 9px; border-radius: 10px; }
  .callout b { font-size: 12.5px; } .callout span { font-size: 11.5px; }
  .segmented button, .segmented i { width: 84px; height: 34px; }
  .segmented.is-back i { transform: translateX(84px); }

  /* assistant */
  .assistant { display: block; padding: 0 var(--gutter); }
  .assistant__copy { position: absolute; left: var(--gutter); right: var(--gutter); top: 84px; }
  .assistant__copy .note { display: none; }
  .assistant__stack { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 3vh; height: 60vh; }
  .msg p { font-size: 15px; }
  .chat__chips { padding: 0 14px 10px; gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .chat__chips button { flex: none; font-size: 13px; padding: 8px 12px; }
  .chat__head { padding: 14px 16px; }
  .chat__log { padding: 20px 16px 12px; }

  /* progress */
  .progress__copy { top: 84px; width: auto; right: var(--gutter); }
  .progress__scene { left: 0; right: 0; top: 25%; bottom: 22%; }
  .progress__panel { left: 8%; right: 8%; top: 4%; }
  .health { left: 0; right: 0; bottom: 7vh; flex-direction: row; gap: 10px; padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .health li { min-width: 200px; flex: none; }
  .progress__src { bottom: 3vh; }

  /* inventory */
  .inventory__copy { top: 84px; transform: none; width: auto; right: var(--gutter); }
  .stock { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: 5vh; margin: 0; padding: 18px; }
  .stock-mini { display: none; }

  /* library */
  .library__copy { top: 84px; transform: none; width: auto; right: var(--gutter); }
  .deck { left: 0; right: 0; top: 24%; bottom: 2%; }
  .goal { --gw: min(200px, 43vw); padding: 16px; border-radius: 24px; }
  .goal__pill { font-size: 14px; padding: 7px 12px; }
  .goal__foot b { font-size: 18px; }
  .goal__foot span { font-size: 12.5px; }

  /* calculator */
  .calc__copy { top: 84px; width: auto; right: var(--gutter); }
  .calc__canvas { top: 200px; bottom: auto; height: calc(100% - 496px); }
  .calc__labels b { font-size: 13.5px; }
  .calc__labels span { font-size: 12px; }
  .calc__panel { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 12px 16px 14px; border-radius: 22px; }
  .calc__head { display: none; }
  .calc__panel fieldset { padding: 3px 0; }
  .calc__panel legend { font-size: 13.5px; }
  .chips span { height: 30px; }
  .calc__dose { padding: 8px 0 2px; row-gap: 6px; }
  .calc__result { margin-top: 4px; padding-top: 8px; }
  .calc__result b { font-size: 22px; }
  .calc__fine { display: none; }

  /* final */
  .steps { grid-template-columns: 1fr; padding-top: 0; padding-left: 52px; gap: 40px; }
  .steps__n { top: 0; left: -52px; }
  .steps__rail { left: 15px; top: 8px; bottom: 8px; right: auto; width: 1px; height: auto; }
  .steps__rail i { transform-origin: 50% 0; transform: scaleY(var(--r, 0)); }
  .footer { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .waitlist { flex-direction: column; align-items: stretch; gap: 8px; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 0; }
  .waitlist:focus-within { box-shadow: none; }
  .waitlist input { flex: none; height: 52px; padding: 0 20px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 30px -24px oklch(0.25 0.03 165 / .5); transition: border-color .3s, box-shadow .3s; }
  .waitlist input:focus { border-color: oklch(0.78 0.02 165); box-shadow: 0 0 0 4px oklch(0.47 0.075 165 / .12); }
  .waitlist .btn { height: 52px; }
  .waitlist--dark input { background: oklch(0.23 0.008 165); border-color: oklch(1 0 0 / .12); }
  .waitlist--dark input:focus { border-color: oklch(1 0 0 / .3); box-shadow: 0 0 0 4px oklch(1 0 0 / .06); }
  .waitlist__msg { position: static; margin-top: 4px; }
  .waitlist:not(.has-msg) .waitlist__msg { display: none; }
  .hero .waitlist { width: min(360px, 100%); }
}

@media (max-width: 420px) {
  .calc__panel legend { font-size: 13px; }
  .chips span { padding: 0 10px; font-size: 12.5px; height: 30px; }
}

@media (max-height: 760px) and (min-width: 901px) {
  .hero__copy { padding-top: 88px; }
  .hero__title { font-size: clamp(2.6rem, 1rem + 4.2vw, 4.6rem); margin-top: 16px; }
  .hero__lede { margin-top: 14px; }
  .hero .waitlist { margin-top: 20px; }
  .log button { padding-top: 10px; padding-bottom: 10px; }
  .h2 { font-size: clamp(2.1rem, 0.9rem + 2.6vw, 3.4rem); }
  .history__copy { top: calc(50% + 30px); }
  .log { margin-top: 26px; }
}

/* =========================================================
   REDUCED MOTION · static, complete, calm
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; }
  .js .msg[data-step] { opacity: 1; transform: none; }
  .msg--bot .w { opacity: 1; }
  .hero__hint { display: none; }
}