/* Kaizin web. Page formula modelled on Atoms (atoms.jamesclear.com): centred wordmark,
   a two-voice headline, a dark slab of numbered steps, plain statements of difference.
   Palette: white paper, charcoal slate, one persimmon accent. */
:root {
  --paper: #ffffff;
  --paper-tint: #f4f2ee;
  --blob: #ece9e3;
  --ink: #15161b;
  --ink-muted: #474b5c;
  --ink-dim: #6b7085;
  --indigo: #3a3e46;
  --indigo-deep: #232529;
  --persimmon: #ff6a3d;
  --persimmon-ink: #d9481c;
  --on-deep: #ffffff;
  --on-deep-dim: rgba(255, 255, 255, 0.68);
  --line: #e4e6ef;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wrap: 1120px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 400; font-size: 18px; line-height: 1.65; }
a { color: var(--indigo); text-underline-offset: 4px; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
h1, h2, h3 { margin: 0; font-variant-numeric: lining-nums; }
em { font-family: var(--serif); font-style: italic; font-weight: 500; }

/* Announcement bar */
.announce { background: var(--paper-tint); text-align: center; padding: 11px 16px; font-size: 15px; font-weight: 600; }
.announce a { color: var(--ink); text-decoration: none; }
.announce em { font-size: 17px; }

/* Masthead: centred wordmark, subtitle beneath */
.masthead { text-align: center; padding: 36px 16px 0; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { width: 30px; height: 30px; }
.wm b { font-weight: 700; }
.brand span { font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; }
.masthead p { margin: 8px 0 0; font-size: 17px; color: var(--ink-muted); }
.subnav { display: flex; justify-content: center; gap: 24px; margin-top: 14px; }
.subnav a { font-size: 16px; color: var(--ink-dim); text-decoration: none; }
.subnav a:hover, .subnav a[aria-current="page"] { color: var(--ink); }

/* Hero */
.hero { padding: 72px 0 0; position: relative; z-index: 2; }
.hero .art { margin-bottom: -150px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(46px, 6.4vw, 80px); line-height: 1.02; letter-spacing: -0.025em; font-weight: 500; }
.hero h1 em { display: block; font-size: 1.12em; letter-spacing: -0.02em; color: var(--persimmon-ink); }
.hero .lead { font-size: 20px; color: var(--ink-muted); max-width: 500px; margin: 26px 0 0; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.store { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 12px; background: var(--ink); color: #fff; text-decoration: none; line-height: 1.15; }
.store svg { width: 24px; height: 24px; flex: none; }
.store small { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.72; }
.store b { font-size: 18px; font-weight: 600; }
.hero .note { font-size: 16px; color: var(--ink-dim); margin-top: 16px; }
.hero .note a { color: var(--ink-muted); }
.art { position: relative; aspect-ratio: 1 / 1; }
.art svg { width: 100%; height: 100%; }

/* Slab: the loop, as four giant numbered lines */
.slab { margin: 0 16px; border-radius: 32px; background: var(--indigo-deep); color: var(--on-deep); padding: 200px 0 104px; position: relative; z-index: 1; }
.slab .intro { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; max-width: 620px; margin: 0 0 72px; }
.slab .intro em { color: var(--persimmon); }
.laws { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 64px; }
.laws li { display: flex; align-items: flex-start; gap: 22px; position: relative; }
.laws .n { position: relative; font-family: var(--sans); font-size: clamp(92px, 11vw, 150px); font-weight: 400; line-height: 0.8; color: var(--persimmon); letter-spacing: -0.04em; flex: none; }
.laws .ring { position: absolute; left: -0.24em; top: -0.2em; width: 0.92em; height: 1.16em; pointer-events: none; }
.laws h3 { font-size: clamp(34px, 4.2vw, 56px); line-height: 0.98; font-weight: 700; letter-spacing: -0.03em; }
.laws p { margin: 14px 0 0; color: rgba(255,255,255,0.78); font-size: 18px; max-width: 360px; }

/* Difference */
.diff { padding: 120px 0 40px; }
.kicker { text-align: center; font-family: var(--serif); font-size: 30px; margin: 0 0 64px; }
.diff .wrap > .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.diff h2 { font-size: clamp(44px, 6vw, 78px); line-height: 0.98; font-weight: 700; letter-spacing: -0.035em; }
.diff h2 em { font-weight: 500; color: var(--persimmon-ink); letter-spacing: -0.02em; }
.points { list-style: none; padding: 0; margin: 0; }
.points li { padding: 22px 0; border-bottom: 1px solid var(--line); }
.points li:first-child { padding-top: 6px; }
.points b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.points span { color: var(--ink-muted); font-size: 18px; }

/* Wearables: tinted panel of cards */
.tools { padding: 96px 0 120px; }
.tools .head { max-width: 640px; margin-bottom: 44px; }
.tools h2 { font-size: clamp(36px, 4.6vw, 56px); line-height: 1.02; font-weight: 700; letter-spacing: -0.03em; }
.tools h2 em { font-weight: 500; color: var(--persimmon-ink); }
.tools .head p { color: var(--ink-muted); margin: 18px 0 0; font-size: 20px; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.card { background: var(--paper-tint); border-radius: 22px; padding: 26px 24px 30px; }
.card .tag { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--persimmon-ink); }
.card h3 { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.08; margin: 14px 0 10px; }
.card p { margin: 0; font-size: 17px; color: var(--ink-muted); }

/* Closing CTA */
.closer { margin: 0 16px 16px; border-radius: 32px; background: var(--paper-tint); padding: 96px 0; text-align: center; }
.closer h2 { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.02; font-weight: 700; letter-spacing: -0.03em; }
.closer h2 em { display: block; font-weight: 500; color: var(--persimmon-ink); }
.closer .stores { justify-content: center; }
.closer .note { font-size: 17px; color: var(--ink-muted); margin-top: 18px; }

/* Legal pages */
.doc { padding: 56px 0 104px; }
.doc .wrap { max-width: 760px; }
.doc .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--persimmon-ink); margin: 0 0 14px; }
.doc h1 { font-size: clamp(42px, 6vw, 64px); line-height: 1.02; font-weight: 700; letter-spacing: -0.03em; }
.doc .updated { margin: 18px 0 40px; font-size: 16px; color: var(--ink-dim); }
.doc h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 48px 0 12px; }
.doc h3 { font-size: 20px; font-weight: 700; margin: 28px 0 8px; }
.doc p, .doc li { color: var(--ink-muted); }
.doc ul { padding-left: 20px; }
.doc li { margin: 6px 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 16px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); }
.doc th { font-weight: 700; color: var(--ink); }
.callout { background: var(--paper-tint); border-radius: 16px; padding: 20px 24px; margin: 24px 0; }
.callout p { margin: 0; }

/* Footer */
.site-footer { padding: 56px 0 48px; font-size: 16px; color: var(--ink-dim); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: flex-end; }
.site-footer .word { font-family: var(--serif); font-size: 34px; color: var(--ink); line-height: 1; margin-bottom: 10px; }
.site-footer p { margin: 0; max-width: 560px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer a { color: var(--ink-muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }

@media (max-width: 900px) {
  body { font-size: 17px; }
  .wrap { padding: 0 18px; }
  .hero { padding: 48px 0 0; }
  .hero .art { margin-bottom: -110px; }
  .hero .wrap, .diff .wrap > .split { grid-template-columns: 1fr; gap: 40px; }
  .art { max-width: 420px; margin: 0 auto; width: 100%; }
  .slab, .closer { margin: 0 8px; border-radius: 24px; padding: 64px 0; }
  .slab { padding-top: 150px; }
  .closer { margin-bottom: 8px; }
  .slab .intro { margin-bottom: 48px; }
  .laws { grid-template-columns: 1fr; gap: 40px; }
  .diff { padding: 80px 0 24px; }
  .kicker { margin-bottom: 40px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tools { padding: 72px 0 88px; }
}
@media (max-width: 520px) {
  .cards { grid-template-columns: 1fr; }
}
.laws li:first-child .n { margin-left: 0.2em; margin-right: 0.22em; }

/* Hero phone */
.art { display: grid; place-items: center; }
.art .blob { position: absolute; inset: 0; width: 100%; height: 100%; }
.phone { position: relative; width: 70%; max-width: 330px; aspect-ratio: 9 / 19.2; background: #0e0f14; border-radius: 46px; padding: 10px; box-shadow: 0 30px 60px -24px rgba(18, 24, 64, 0.45); }
.screen { position: relative; height: 100%; background: #fff; border-radius: 37px; overflow: hidden; padding: 46px 16px 0; font-size: 13px; line-height: 1.35; }
.island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 84px; height: 24px; background: #0e0f14; border-radius: 14px; }
.status { position: absolute; top: 13px; left: 26px; font-size: 12px; font-weight: 700; }
.app-head { display: flex; align-items: center; gap: 8px; margin: 6px 0 14px; }
.app-head img { width: 16px; height: 16px; }
.app-head b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.focus { background: var(--indigo-deep); color: #fff; border-radius: 16px; padding: 14px 14px 12px; }
.focus small, .list-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.focus small { color: var(--persimmon); }
.focus p { margin: 6px 0 8px; font-family: var(--serif); font-size: 21px; line-height: 1.15; }
.focus .by { font-size: 12px; color: rgba(255, 255, 255, 0.66); }
.list-label { color: var(--ink-dim); margin: 16px 0 4px; }
.marker { padding: 9px 0; border-bottom: 1px solid var(--line); }
.marker > div { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.marker b { font-size: 14px; }
.marker em { font-family: var(--sans); font-style: normal; font-size: 12px; font-weight: 700; }
.marker em.ok { color: var(--indigo); }
.marker em.lo { color: var(--persimmon-ink); }
.bar { display: block; position: relative; height: 5px; border-radius: 3px; background: linear-gradient(90deg, #f3d9cf 0 22%, #e2dfd9 22% 78%, #f3d9cf 78%); }
.bar u { position: absolute; top: -3px; width: 11px; height: 11px; margin-left: -5px; border-radius: 50%; background: var(--ink); border: 2px solid #fff; }
.tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 10px 6px 22px; border-top: 1px solid var(--line); background: #fff; font-size: 11px; font-weight: 600; color: var(--ink-dim); }
.tabs .on { color: var(--indigo); }
.body-today { margin-top: 14px; background: var(--paper-tint); border-radius: 14px; padding: 11px 12px; }
.body-today small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
.body-today p { margin: 4px 0 0; font-size: 13px; color: var(--ink); }

/* Our doctor */
.doctor { padding: 40px 0 110px; }
.doctor .wrap { max-width: 760px; }
.kicker-left { font-family: var(--serif); font-size: 28px; margin: 0 0 14px; color: var(--ink-muted); }
.doctor h2 { font-size: clamp(38px, 4.8vw, 60px); line-height: 1.02; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 24px; }
.doctor h2 em { font-weight: 500; color: var(--persimmon-ink); }
.doctor p { color: var(--ink-muted); font-size: 19px; max-width: 560px; }
.doctor .sign { margin-top: 28px; font-family: var(--serif); font-size: 28px; color: var(--ink); }
.doctor .sign span { display: block; font-family: var(--sans); font-size: 16px; color: var(--ink-dim); }

/* FAQ */
.faq { padding: 40px 0 120px; }
.faq .wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.faq h2 { font-size: clamp(40px, 5vw, 64px); line-height: 1; font-weight: 700; letter-spacing: -0.03em; position: sticky; top: 32px; }
.faq h2 em { display: block; font-weight: 500; color: var(--persimmon-ink); }
.qs details { border-bottom: 1px solid var(--line); }
.qs details:first-child { border-top: 1px solid var(--line); }
.qs summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 24px 0; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.qs summary::-webkit-details-marker { display: none; }
.qs summary::after { content: "+"; font-size: 30px; font-weight: 300; color: var(--persimmon-ink); line-height: 1; flex: none; }
.qs details[open] summary::after { content: "\2212"; }
.qs p { margin: 0 0 26px; color: var(--ink-muted); font-size: 18px; max-width: 620px; }
@media (max-width: 900px) {
  .doctor .wrap, .faq .wrap { grid-template-columns: 1fr; gap: 32px; }
  .faq h2 { position: static; }
  .qs summary { font-size: 19px; }
}

/* Primary button. `.cta` is used on nine controls across /app and /account (sign in, upload,
   save goals, onboarding) and had no rule at all, so every one of them rendered as an unstyled
   native button. Slate fill with the persimmon accent on focus, matching the rest of the page. */
.cta {
  display: inline-block; font: inherit; font-weight: 600; line-height: 1.3;
  padding: 12px 20px; min-height: 44px; border: 1px solid var(--indigo-deep); border-radius: 10px;
  background: var(--indigo-deep); color: var(--on-deep); cursor: pointer; text-decoration: none;
}
.cta:hover { background: var(--indigo); border-color: var(--indigo); }
.cta:disabled { opacity: 0.55; cursor: default; }
.cta:focus-visible { outline: 3px solid var(--persimmon); outline-offset: 2px; }
/* In the subnav "Open Kaizin" carries .cta as a link, so keep it a compact pill rather than a
   full-size button sitting in a row of plain text links. */
.subnav .cta { padding: 6px 14px; min-height: 0; font-size: 15px; font-weight: 500; }

/* `.subnav a` (0,1,1) outranks `.cta` (0,1,0) on colour, which left "Open Kaizin" as grey text
   on a slate pill. Restate it at matching specificity. */
.subnav .cta, .subnav .cta:hover { color: var(--on-deep); }

/* Hero: the three inputs, readable in the first five seconds. */
.hero .tagline { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; color: var(--persimmon-ink); margin: 18px 0 0; }
.trio { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; max-width: 520px; }
.trio li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.trio .ico { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--paper-tint); color: var(--ink); display: grid; place-items: center; }
.trio .ico svg { width: 22px; height: 22px; }
.trio b { display: block; font-size: 17px; line-height: 1.3; }
.trio span:not(.ico) { display: block; font-size: 15px; line-height: 1.45; color: var(--ink-muted); }
.hero .lead { font-size: 18px; margin-top: 20px; }
.hero-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 24px; }
.hero-go span { font-size: 15px; color: var(--ink-dim); flex: 1 1 220px; }
.hero .stores { margin-top: 18px; }

/* Phone mock: a wearable card so the picture shows both signals. */
.wear { margin: 10px 0 4px; padding: 10px 12px; border-radius: 14px; background: var(--paper-tint); }
.wear small { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.wear div { display: flex; justify-content: space-between; margin-top: 6px; }
.wear span { font-size: 10px; color: var(--ink-dim); }
.wear span b { display: block; font-size: 14px; color: var(--ink); }

/* Hamburger. Hidden on desktop, where the full subnav fits. */
.menu, .cta-mobile { display: none; }
.menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; align-content: center; justify-items: center; gap: 5px; border-radius: 10px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
.menu[open] summary span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu[open] summary span:nth-child(2) { opacity: 0; }
.menu[open] summary span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu nav { position: absolute; left: 12px; right: 12px; top: calc(100% + 6px); z-index: 20; display: grid; padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 40px -18px rgba(21, 22, 27, 0.35); }
.menu nav a { padding: 13px 14px; border-radius: 10px; font-size: 17px; color: var(--ink); text-decoration: none; }
.menu nav a:active, .menu nav a:hover { background: var(--paper-tint); }

@media (max-width: 900px) {
  /* One compact row: wordmark left, Open Kaizin and the menu right. */
  .masthead { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 18px; text-align: left; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  .masthead .brand { margin-right: auto; gap: 8px; }
  .masthead .brand img { width: 22px; height: 22px; }
  .masthead .brand span { font-size: 28px; }
  .masthead > p, .subnav { display: none; }
  .menu { display: block; }
  .cta-mobile { display: inline-block; padding: 8px 14px; min-height: 0; font-size: 15px; font-weight: 600; }
  .announce { font-size: 14px; padding: 9px 12px; }
  .announce em { font-size: 15px; }
  .hero { padding-top: 28px; }
  .hero h1 { font-size: clamp(34px, 9vw, 46px); line-height: 1.06; }
  .hero h1 em { display: inline; font-size: 1.08em; }
  .hero .stores .store { padding: 7px 14px 7px 11px; }
  .hero .stores .store b { font-size: 15px; }
  .hero .stores .store svg { width: 20px; height: 20px; }
}

/* Add-to-home-screen sheet (install.js). Sits above the page, never blocks it. */
.install { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 20px 50px -16px rgba(21, 22, 27, 0.45); transform: translateY(140%); transition: transform .3s ease; }
.install.on { transform: none; }
.install[hidden] { display: none; }
.install img { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.install div { flex: 1; min-width: 0; }
.install b { display: block; font-size: 15px; line-height: 1.3; }
.install p { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-muted); }
.install .share { width: 15px; height: 15px; vertical-align: -2px; color: var(--indigo); }
.install .cta { padding: 9px 14px; min-height: 0; font-size: 15px; flex: none; }
.install-x { flex: none; width: 36px; height: 36px; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--ink-dim); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .install, .menu summary span { transition: none; } }
/* The headline is longer than "Kaizen for your biomarkers", so cap it lower on desktop. */
@media (min-width: 901px) { .hero h1 { font-size: clamp(46px, 5vw, 64px); } }

/* Phone: swipe the tiles and the four steps instead of scrolling past them, a thumb-reach button,
   and sections that ease in. home.js adds .js to <html> and builds the dots, so without JS the
   page is a plain readable list and nothing starts invisible. */
.dots { display: none; }
.dock { display: none; }
@media (max-width: 900px) {
  .trio, .laws { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-left: -18px; margin-right: -18px; padding: 0 18px; scroll-padding: 0 18px; gap: 12px; overscroll-behavior-x: contain; }
  .trio::-webkit-scrollbar, .laws::-webkit-scrollbar { display: none; }
  .trio { max-width: none; }
  .trio li { flex: 0 0 78%; scroll-snap-align: start; flex-direction: column; gap: 10px; padding: 18px; }
  .laws li { flex: 0 0 84%; scroll-snap-align: start; flex-direction: column; gap: 18px; padding: 26px 22px 28px; border-radius: 22px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }
  .laws .n { font-size: 72px; }
  .laws h3 { font-size: 30px; }
  .laws p { font-size: 16px; }
  .js .dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
  .dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--line); cursor: pointer; transition: width .25s ease, background .25s ease; }
  .dots button[aria-current="true"] { width: 22px; background: var(--ink); }
  .slab .dots button { background: rgba(255,255,255,0.28); }
  .slab .dots button[aria-current="true"] { background: var(--persimmon); }
  .js .dock { display: block; position: fixed; left: 16px; right: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30; text-align: center; padding: 15px 20px; border-radius: 99px; border: 1px solid rgba(255,255,255,0.24); box-shadow: 0 16px 40px -14px rgba(21, 22, 27, 0.5); transform: translateY(160%); transition: transform .3s ease; }
  .js .dock.on { transform: none; }
  /* The install sheet sits in the same spot; it wins while it is open. */
  .install-open .dock { transform: translateY(160%); }
  .js body { padding-bottom: 76px; }
}
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .dock, .dots button { transition: none; }
}

/* Partner laboratory line under the hero buttons. */
.hero .lab { font-size: 14px; line-height: 1.5; color: var(--ink-dim); margin: 16px 0 0; max-width: 500px; }

/* "Use it on your phone now" card inside the coming-soon section. */
.closer .now { max-width: 560px; margin: 36px auto 0; padding: 28px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; text-align: left; }
.closer .now h3 { font-size: 24px; line-height: 1.2; margin: 0; }
.closer .now p { font-size: 17px; color: var(--ink-muted); margin: 10px 0 0; }
.closer .now .how .share { width: 17px; height: 17px; vertical-align: -3px; color: var(--indigo); }
.now-go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.cta.ghost { background: transparent; color: var(--ink); }
.cta.ghost:hover { background: var(--paper-tint); color: var(--ink); }
.closer .kaizen { max-width: 560px; margin: 18px auto 28px; font-size: 18px; line-height: 1.5; color: var(--ink-muted); }
.closer .kaizen em { font-size: 1.25em; color: var(--persimmon-ink); }

/* Plans. Core is on sale; the rest collect a waitlist address. Same card grid as the wearables. */
.plans { padding: 0 0 120px; }
.plans .head { max-width: 640px; margin-bottom: 44px; }
.plans h2 { font-size: clamp(36px, 4.6vw, 56px); line-height: 1.02; font-weight: 700; letter-spacing: -0.03em; }
.plans h2 em { font-weight: 500; color: var(--persimmon-ink); }
.plans .head p { color: var(--ink-muted); margin: 18px 0 0; font-size: 20px; }
.card.plan { display: flex; flex-direction: column; }
.card.plan .price { font-weight: 700; font-size: 22px; color: var(--ink); margin: 0 0 12px; }
.card.plan .price small { display: block; font-weight: 400; font-size: 15px; color: var(--ink-dim); }
.card.plan .cta { margin-top: 22px; align-self: flex-start; }
.card.plan .cta.ghost { border-color: var(--indigo-deep); }
.wl { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; position: relative; }
.wl input[type="email"] { font: inherit; font-size: 16px; padding: 11px 14px; min-height: 48px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); width: 100%; box-sizing: border-box; }
.wl input[type="email"]:focus-visible { outline: 3px solid var(--persimmon); outline-offset: 2px; }
.wl .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wl .wl-q { display: block; font-size: 15px; color: var(--ink-muted); }
.wl .wl-q select { display: block; width: 100%; margin-top: 6px; font: inherit; font-size: 16px; min-height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); box-sizing: border-box; }
.wl .wl-msg { margin: 0; font-size: 15px; color: var(--ink-muted); min-height: 1.4em; }
.wl.done input, .wl.done button { display: none; }
.wl.done .wl-msg { color: var(--ink); font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.plans .note { font-size: 16px; color: var(--ink-dim); margin: 28px 0 0; }
.closer .wl { max-width: 440px; margin: 22px auto 0; text-align: left; }
.acc-plan .wl { margin-top: 12px; }