/* ==========================================================================
   KAIRS landing page
   Ported from the approved design file "KAIRS Landing.dc.html".
   Values here are a direct translation of that file's inline styles — treat
   the design file as the source of truth before changing anything.
   Tokens mirror KAIRS/DesignSystem/Theme.swift (see github.md screen map).
   ========================================================================== */

:root {
  /* palette */
  --bg:            #0B1426;
  --card:          #16213A;
  --card-2:        #1E2B47;
  --cyan:          #32ADE6;
  --blue:          #0A84FF;
  --green:         #30D158;
  --orange:        #FF9F0A;
  --text:          #ffffff;
  --muted:         #A8B1C2;
  --inactive:      #7C869B;
  --line:          rgba(255,255,255,.12);
  --hairline:      rgba(255,255,255,.08);
  --accent:        linear-gradient(90deg,#32ADE6,#0A84FF);

  /* type */
  --font-sans:    -apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-mono:    ui-monospace,Menlo,monospace;
  --font-rounded: ui-rounded,'SF Pro Rounded',-apple-system,Helvetica,sans-serif;

  /* rhythm */
  --gutter:    clamp(20px,5vw,72px);
  --section-y: clamp(80px,14vh,160px);

  /* motion */
  --ease-out: cubic-bezier(.2,.7,.2,1);
}

/* --------------------------------------------------------------- base --- */

html { scroll-behavior:smooth; scroll-padding-top:80px; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

* { box-sizing:border-box; }

/* The design file builds everything from divs and spans, so it carries no
   default margins. This page uses semantic elements instead — reset them back
   to the design's zero baseline and let the layout gaps do the spacing. */
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul { margin:0; }
ol, ul { padding:0; list-style:none; }

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  position:relative;
}

a { color:var(--cyan); text-decoration:none; }
a:hover { color:var(--blue); }

::selection { background:rgba(50,173,230,.35); }

img, svg, video { display:block; }

/* Visible focus for keyboard users, invisible to mouse users, so the design
   is untouched while the page stays keyboard-navigable. */
:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}

.visually-hidden {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Skip link — parked off-screen until focused. */
.skip-link {
  position:absolute; left:var(--gutter); top:-100px; z-index:100;
  height:40px; padding:0 18px; display:flex; align-items:center;
  border-radius:20px; background:var(--card-2); color:var(--text);
  font-size:14px; font-weight:600; transition:top .15s ease;
}
.skip-link:focus { top:12px; color:var(--text); }

/* ---------------------------------------------------- shared patterns --- */

.eyebrow {
  font-size:13px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--cyan);
}

.mono-label {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  color:var(--inactive); text-transform:uppercase;
}

.section-title {
  margin:0; font-size:clamp(34px,4.6vw,64px); line-height:1.02;
  letter-spacing:-.025em; font-weight:700; text-wrap:balance;
}

.lede {
  margin:0; font-size:clamp(17px,1.3vw,19px); line-height:1.55;
  color:var(--muted); max-width:460px; text-wrap:pretty;
}

/* Two-up heading block used by gap / data / clinicians / recognition / team */
.section-head {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));
  gap:clamp(24px,4vw,64px);
  align-items:end;
}
.section-head__title { display:flex; flex-direction:column; gap:16px; }

.section {
  padding:var(--section-y) var(--gutter);
  display:flex; flex-direction:column;
  border-top:1px solid var(--hairline);
}

.btn {
  display:flex; align-items:center; height:56px; border-radius:28px;
  font-size:17px; font-weight:600; font-family:inherit;
  transition:transform .12s ease;
}
.btn:active { transform:scale(.95); }

.btn--primary {
  padding:0 28px; border:0; background:var(--accent);
  color:var(--text); cursor:pointer;
}
.btn--primary:hover { transform:translateY(-1px); color:var(--text); }

.btn--secondary {
  padding:0 24px; gap:8px; background:var(--card-2);
  color:var(--text); font-size:15px;
}
.btn--secondary:hover { background:#243456; color:var(--text); }

/* ------------------------------------------------------------- navbar --- */

.site-nav {
  position:fixed; top:0; left:0; right:0; z-index:50; height:64px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter);
  background:rgba(11,20,38,.72);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid var(--hairline);
}
.site-nav__brand {
  display:flex; align-items:center; gap:10px; color:var(--text);
}
.site-nav__brand img { width:28px; height:28px; border-radius:8px; }
.site-nav__brand span { font-size:15px; font-weight:700; letter-spacing:.14em; }

.site-nav__links {
  display:flex; gap:clamp(14px,2.5vw,32px);
  font-size:14px; font-weight:500;
}
.site-nav__links a { color:var(--muted); }
.site-nav__links a:hover { color:var(--text); }

.site-nav__cta {
  height:40px; padding:0 18px; border-radius:20px; background:var(--accent);
  color:var(--text); font-size:14px; font-weight:600;
  display:flex; align-items:center; white-space:nowrap;
  transition:transform .12s ease;
}
.site-nav__cta:hover { transform:translateY(-1px); color:var(--text); }
.site-nav__cta:active { transform:scale(.95); }

/* The design shows the full link set; below that the links would collide with
   the CTA, so they scroll horizontally rather than wrap the 64px bar. */
@media (max-width:900px) {
  .site-nav__links {
    overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
    max-width:52vw;
  }
  .site-nav__links::-webkit-scrollbar { display:none; }
}
@media (max-width:640px) {
  .site-nav__links { display:none; }
}

/* --------------------------------------------------------------- hero --- */

.hero {
  min-height:100vh;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  align-items:center;
  gap:clamp(24px,4vw,64px);
  padding:clamp(112px,16vh,160px) var(--gutter) clamp(48px,8vh,96px);
  position:relative; overflow:hidden;
}
.hero__copy {
  position:relative; z-index:2;
  display:flex; flex-direction:column; gap:clamp(20px,3vh,32px);
  max-width:640px;
}
.hero__title {
  margin:0; font-size:clamp(44px,6.4vw,92px); line-height:.98;
  letter-spacing:-.03em; font-weight:700; text-wrap:balance;
}
.hero__lede {
  margin:0; font-size:clamp(17px,1.35vw,20px); line-height:1.5;
  color:var(--muted); max-width:480px; text-wrap:pretty;
}
.hero__actions { display:flex; flex-wrap:wrap; gap:12px; padding-top:4px; }

.hero__stage {
  position:relative; min-height:min(72vh,720px);
  display:flex; align-items:center; justify-content:center;
}
.hero__glow {
  position:absolute; inset:10% 0; pointer-events:none;
  background:radial-gradient(ellipse at 55% 55%,rgba(50,173,230,.16),rgba(11,20,38,0) 62%);
}
.hero__product {
  width:min(100%,560px); height:auto;
  mix-blend-mode:multiply;
  transform:translateY(0) rotate(-6deg);
  transition:transform .08s linear;
  position:relative; z-index:1;
  filter:contrast(1.05);
}
.hero__telemetry {
  position:absolute; left:clamp(0px,4%,40px); bottom:16%; z-index:2;
  display:flex; flex-direction:column; gap:8px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  color:var(--muted);
}
.hero__telemetry div { display:flex; align-items:center; gap:8px; }
.hero__dot { width:8px; height:8px; border-radius:50%; }
.hero__dot--green { background:var(--green); box-shadow:0 0 0 3px rgba(48,209,88,.2); }
.hero__dot--cyan  { background:var(--cyan);  box-shadow:0 0 0 3px rgba(50,173,230,.2); }

.hero__scroll {
  position:absolute; left:var(--gutter); bottom:28px; z-index:2;
  display:flex; align-items:center; gap:10px;
  font-size:12px; color:var(--inactive);
  letter-spacing:.06em; text-transform:uppercase;
}
.hero__scroll::before {
  content:''; width:28px; height:1px; background:var(--inactive);
}

/* ----------------------------------------------------------- data gap --- */

.gap { gap:clamp(40px,6vh,72px); }
.gap__head { align-items:end; }
.gap__viz { position:relative; display:flex; flex-direction:column; gap:14px; }
.gap__meta { display:flex; justify-content:space-between; }
.gap__grids { position:relative; }
.gap__grid {
  display:grid; grid-template-columns:repeat(24,1fr); gap:3px;
}
.gap__grid span { aspect-ratio:1; border-radius:2px; }
.gap__grid--fill {
  position:absolute; inset:0;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .1s linear;
}
.gap__legend {
  display:flex; flex-wrap:wrap; gap:20px;
  font-size:13px; font-weight:500; color:var(--muted);
}
.gap__legend span { display:flex; align-items:center; gap:6px; }
.gap__swatch { width:10px; height:10px; border-radius:2px; }
.gap__swatch--clinic     { background:#fff; }
.gap__swatch--unmeasured { background:var(--card); }
.gap__swatch--kairs      { background:var(--accent); }

/* ------------------------------------------------ pinned reveal shells --- */

.pinned { position:relative; border-top:1px solid var(--hairline); }
.pinned__stage {
  position:sticky; top:0; min-height:100vh;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));
  align-items:center; gap:clamp(16px,4vw,48px);
  padding:72px var(--gutter) 32px;
}
.pinned__figure {
  display:flex; align-items:center; justify-content:center;
  height:clamp(260px,50vh,640px);
}
.pinned__figure svg { height:100%; width:auto; max-width:100%; overflow:visible; }
.pinned__copy {
  display:flex; flex-direction:column; gap:clamp(18px,3vh,28px); max-width:520px;
}
.pinned__title {
  margin:0; font-size:clamp(28px,min(4vw,5.5vh),56px); line-height:1.04;
  letter-spacing:-.025em; font-weight:700; text-wrap:balance;
}

/* Numbered step list shared by the hardware and biomechanics reveals */
.steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.steps li {
  display:grid; grid-template-columns:32px 1fr; gap:14px;
  padding:clamp(8px,1.4vh,14px) 0;
  border-top:1px solid var(--hairline);
  opacity:.22; transition:opacity .35s ease;
}
.steps__n {
  font-family:var(--font-mono); font-size:12px;
  color:var(--inactive); padding-top:3px; transition:color .35s ease;
}
.steps__body { display:flex; flex-direction:column; gap:4px; }
.steps__title { font-size:clamp(15px,1.9vh,17px); font-weight:600; }
.steps__detail { font-size:15px; line-height:1.45; color:var(--muted); }

/* Only the active step shows its detail line, as in the design. Without JS
   every step stays fully legible. */
/* Step opacity is driven inline by JS (it is a continuous scroll value);
   these classes carry only the discrete active-state changes. */
.js .steps li:not(.is-active) .steps__detail { display:none; }
.js .steps li.is-active .steps__n { color:var(--cyan); }

/* Reveal groups inside the pinned SVGs */
.js .reveal-group { opacity:0; transition:opacity .4s ease; }

/* --------------------------------------------- biomechanics extra bits --- */

.biomech__stage { position:relative; display:flex; align-items:center; justify-content:center;
  height:clamp(260px,50vh,640px); }
.biomech__stage svg { height:100%; width:auto; max-width:100%; overflow:visible; }

/* The app dial that takes over at the end of the sequence */
.biomech__dial {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.92);
  transition:opacity .5s ease,transform .5s ease;
  pointer-events:none;
}
.dial-card {
  background:var(--card); border-radius:20px; padding:16px;
  display:flex; flex-direction:column; gap:12px;
  width:min(100%,360px); box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.dial-card__head { display:flex; align-items:center; justify-content:space-between; }
.dial-card__head > span:first-child { font-size:17px; font-weight:600; }
.dial-card__trends {
  display:flex; align-items:center; gap:4px;
  color:var(--blue); font-size:14px; font-weight:600;
}
.dial-card__body { display:flex; align-items:center; gap:16px; }
.dial-card__aside { display:flex; flex-direction:column; gap:10px; flex:1; }
.dial-card__delta { display:flex; flex-direction:column; gap:2px; }
.dial-card__delta strong { font-size:20px; font-weight:700; color:var(--green); }
.dial-card__delta span { font-size:12px; color:var(--muted); }
.dial-card__note { font-size:12px; color:var(--muted); line-height:1.4; }

/* ------------------------------------------------- movement into data --- */

.data { gap:clamp(40px,6vh,64px); }

/* Hairline technical grid — deliberately not cards. */
.data__grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.data__cell {
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(20px,3vw,36px);
  display:flex; flex-direction:column;
}

.data__cell--hud {
  grid-row:span 2; gap:20px; align-items:center; justify-content:center;
  min-height:420px;
}
.hud__meta {
  align-self:flex-start; display:flex; justify-content:space-between; width:100%;
}
.hud__dial { max-width:100%; }
.hud__coach {
  min-height:44px; padding:0 16px; border-radius:22px; background:var(--card-2);
  display:flex; align-items:center; font-size:15px; font-weight:600;
}
.hud__stats { display:flex; gap:8px; width:100%; }
.hud__stat {
  flex:1; background:var(--card-2); border-radius:12px; padding:10px 12px;
  display:flex; flex-direction:column; gap:2px;
}
.hud__stat dt { font-size:11px; font-weight:500; color:var(--muted); margin:0; }
.hud__stat dd { margin:0; font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; }

.data__cell--reps { gap:14px; justify-content:space-between; min-height:200px; }
.reps__count {
  font-size:clamp(48px,4.5vw,64px); font-weight:700; letter-spacing:-.04em;
  line-height:1; font-variant-numeric:tabular-nums;
}
.reps__count span { color:var(--inactive); font-weight:600; }
.reps__caption { font-size:13px; font-weight:500; color:var(--muted); }
.reps__pips { display:flex; gap:4px; }
.reps__pips span {
  flex:1; height:6px; border-radius:3px;
  background:var(--card-2); transition:background .2s;
}

.data__cell--trace { gap:14px; min-height:200px; }
.trace__meta { display:flex; justify-content:space-between; }
.trace__scale {
  display:flex; justify-content:space-between; font-size:11px; color:var(--inactive);
}
.trace__scale .is-goal { color:var(--green); }

.data__cell--sensors { gap:20px; min-height:200px; }
.sensor-list { display:flex; flex-direction:column; gap:12px; margin:0; padding:0; list-style:none; }
.sensor { display:flex; align-items:center; gap:12px; }
.sensor svg { flex:none; }
.sensor__body { flex:1; display:flex; flex-direction:column; gap:2px; }
.sensor__name { font-size:15px; font-weight:600; }
.sensor__stat { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums; }
.sensor__bars { display:flex; align-items:flex-end; gap:2px; height:16px; }
.sensor__bars span { width:4px; border-radius:1px; background:var(--green); }
.sensor__bars span:nth-child(1) { height:5px; }
.sensor__bars span:nth-child(2) { height:8px; }
.sensor__bars span:nth-child(3) { height:12px; }
.sensor__bars span:nth-child(4) { height:16px; background:var(--line); }
.sensor__payload {
  font-family:var(--font-mono); font-size:11px; color:var(--inactive); letter-spacing:.02em;
}

.data__cell--trend { gap:14px; min-width:0; }
.trend__head {
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:12px; flex-wrap:wrap;
}
.trend__headings { display:flex; flex-direction:column; gap:4px; }
.trend__latest { display:flex; align-items:baseline; gap:6px; }
.trend__latest strong { font-size:28px; font-weight:700; font-variant-numeric:tabular-nums; }
.trend__latest span { font-size:15px; font-weight:500; color:var(--muted); }
.trend__delta {
  font-size:13px; font-weight:600; color:var(--green);
  background:rgba(48,209,88,.15); padding:4px 10px; border-radius:8px; white-space:nowrap;
}
.trend__plot { width:100%; height:auto; }
.trend__series {
  clip-path:inset(0 0 0 0);
  transition:clip-path 1.6s var(--ease-out);
}
.js .trend__series { clip-path:inset(0 100% 0 0); }
.js .trend__series.is-revealed { clip-path:inset(0 0 0 0); }
.trend__caption { font-size:12px; color:var(--muted); }

.data__footnote {
  margin:0; font-size:14px; line-height:1.5; color:var(--inactive); max-width:720px;
}

/* -------------------------------------------------- movement -> insight --- */

.insight { gap:clamp(48px,8vh,88px); }
.insight__title {
  margin:0; font-size:clamp(34px,4.6vw,64px); line-height:1.02;
  letter-spacing:-.025em; font-weight:700; max-width:820px; text-wrap:balance;
}
.flow { position:relative; padding-top:28px; }
.flow__rail {
  position:absolute; left:0; right:0; top:0; height:1px; background:rgba(255,255,255,.14);
}
.flow__pulse {
  position:absolute; top:-4px; left:0; width:9px; height:9px; margin-left:-4px;
  border-radius:50%; background:var(--cyan);
  box-shadow:0 0 0 4px rgba(50,173,230,.25),0 0 18px var(--cyan);
  animation:kFlow 6s linear infinite;
}
.flow__steps {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:clamp(20px,3vw,40px);
}
.flow__step { display:flex; flex-direction:column; gap:10px; position:relative; }
.flow__step::before {
  content:''; position:absolute; top:-32px; left:0;
  width:7px; height:7px; border-radius:50%; background:#fff;
}
.flow__n { font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--inactive); }
.flow__title {
  font-size:clamp(20px,1.7vw,24px); font-weight:700;
  letter-spacing:-.01em; line-height:1.15;
}
.flow__detail { font-size:15px; line-height:1.5; color:var(--muted); }

@keyframes kFlow {
  0%   { left:0%;   opacity:0; }
  6%   { opacity:1; }
  94%  { opacity:1; }
  100% { left:100%; opacity:0; }
}
@keyframes kPulse {
  0%,100% { opacity:1;   transform:scale(1); }
  50%     { opacity:.35; transform:scale(.7); }
}

/* -------------------------------------------- patient and clinician --- */

.clinicians { gap:clamp(40px,6vh,72px); }
.clinicians__layout {
  position:relative; display:grid; grid-template-columns:repeat(12,1fr);
  gap:0; min-height:520px;
}
.clinicians__media {
  grid-column:1/9; grid-row:1; position:relative;
  border-radius:20px; overflow:hidden; background:var(--card); min-height:420px;
}
.clinicians__media video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.clinicians__badge {
  position:absolute; left:16px; top:16px;
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:8px;
  background:rgba(11,20,38,.6);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:#fff;
}
.clinicians__badge span {
  width:6px; height:6px; border-radius:50%; background:var(--green);
  animation:kPulse 1.2s ease-in-out infinite;
}

/* Therapist thread, layered over the video */
.clinicians__thread {
  grid-column:7/13; grid-row:1; align-self:end;
  margin-top:clamp(80px,14vh,160px);
  position:relative; z-index:2;
  transform:translateY(0); transition:transform .08s linear;
}
.thread {
  background:var(--bg); border-radius:20px; padding:16px;
  display:flex; flex-direction:column; gap:12px;
  box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px var(--hairline);
}
.thread__clinician {
  display:flex; align-items:center; gap:12px;
  padding-bottom:12px; border-bottom:1px solid var(--line);
}
.thread__avatar {
  width:44px; height:44px; border-radius:50%; background:var(--card-2);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:600; color:var(--muted);
}
.thread__who { display:flex; flex-direction:column; gap:1px; }
.thread__name { font-size:17px; font-weight:600; }
.thread__sla { font-size:13px; color:var(--muted); }
.thread__summary {
  background:var(--card); border-radius:14px; padding:14px;
  display:flex; flex-direction:column; gap:8px;
}
.thread__summary-label {
  font-size:12px; font-weight:600; letter-spacing:.72px;
  color:var(--muted); text-transform:uppercase;
}
.thread__metrics {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:8px 16px; margin:0;
}
.thread__metric { display:flex; align-items:baseline; gap:4px; }
.thread__metric dt { margin:0; font-size:17px; font-weight:600; font-variant-numeric:tabular-nums; order:1; }
.thread__metric dd { margin:0; font-size:13px; color:var(--muted); order:2; }
.thread__row { display:flex; padding-right:40px; }
.thread__row--out { justify-content:flex-end; padding-right:0; padding-left:40px; }
.thread__bubble {
  max-width:290px; padding:12px 14px; background:var(--card);
  border-radius:18px 18px 18px 6px; font-size:15px; line-height:22px;
}
.thread__bubble--out {
  background:var(--cyan); color:var(--bg); border-radius:18px 18px 6px 18px;
}
.thread__plan {
  align-self:flex-start; padding:10px 14px; border-radius:12px;
  background:rgba(50,173,230,.15); color:var(--cyan);
  font-size:15px; font-weight:600;
}

/* -------------------------------------------------------- recognition --- */

.recognition { gap:clamp(40px,6vh,64px); }

.timeline {
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; position:relative;
}
.timeline__spine,
.timeline__spine-active {
  position:absolute; width:1px;
  top:calc(clamp(22px,3vh,34px) + 14px);
  bottom:calc(clamp(22px,3vh,34px) + 14px);
  left:calc(clamp(84px,7vw,104px) + clamp(16px,2.4vw,36px) + 11px);
}
.timeline__spine { background:rgba(255,255,255,.13); }
.timeline__spine-active {
  background:linear-gradient(180deg,#32ADE6,#0A84FF);
  transform:scaleY(0); transform-origin:top; will-change:transform;
}
/* Without JS the progress line simply reads as complete. */
html:not(.js) .timeline__spine-active { transform:scaleY(1); }

.timeline > li {
  display:grid;
  grid-template-columns:clamp(84px,7vw,104px) 24px minmax(0,1fr) clamp(240px,24vw,340px);
  gap:clamp(16px,2.4vw,36px);
  align-items:start;
  padding:clamp(22px,3vh,34px) 0;
}
.timeline__date { display:flex; flex-direction:column; gap:2px; padding-top:2px; }
.timeline__dm {
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--inactive);
}
.timeline__yr {
  font-family:var(--font-mono); font-size:15px; letter-spacing:.02em; color:#fff;
}
.timeline__rail { position:relative; width:24px; align-self:stretch; min-height:40px; }
.timeline__node {
  position:absolute; left:6px; top:9px; width:11px; height:11px;
  border-radius:50%; background:var(--bg);
  border:2px solid rgba(255,255,255,.26); box-shadow:none;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s var(--ease-out);
}
.timeline__node.is-on {
  border-color:var(--cyan);
  box-shadow:0 0 0 5px rgba(50,173,230,.16);
  transform:scale(1.18);
}
.timeline__body {
  display:flex; flex-direction:column; gap:9px; min-width:0; padding-top:1px;
}
.timeline__event {
  margin:0; font-size:clamp(18px,1.5vw,24px); line-height:1.18;
  letter-spacing:-.015em; font-weight:650; text-wrap:pretty;
}
.timeline__result { font-size:15px; font-weight:600; color:var(--cyan); }
.timeline__blurb {
  margin:0; font-size:14.5px; line-height:1.6; color:var(--muted);
  max-width:56ch; text-wrap:pretty;
}
.timeline__photo {
  margin:0; width:100%; aspect-ratio:16/10; border-radius:14px; overflow:hidden;
  background:var(--card); border:1px solid rgba(255,255,255,.07);
}
.timeline__photo img { width:100%; height:100%; object-fit:cover; }

@media (max-width:1040px) {
  .timeline > li {
    grid-template-columns:clamp(76px,9vw,100px) 24px minmax(0,1fr);
    grid-template-rows:auto auto;
  }
  /* The design file declares margin-top:4px here, but its figure carries an
     inline margin:0 that overrides it — the approved render has no offset, so
     neither does this. */
  .timeline > li > .timeline__photo {
    grid-column:3; grid-row:2; max-width:480px;
  }
  .timeline__spine,
  .timeline__spine-active {
    left:calc(clamp(76px,9vw,100px) + clamp(16px,2.4vw,36px) + 11px);
  }
}

/* ------------------------------------------------------ founding team --- */

.team { gap:clamp(44px,7vh,72px); }

.team__grid {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(18px,1.8vw,28px); align-items:stretch;
}
@media (max-width:900px) { .team__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .team__grid { grid-template-columns:minmax(0,1fr); } }

.founder {
  display:flex; flex-direction:column; gap:clamp(14px,1.4vw,18px);
  padding:clamp(14px,1.2vw,18px);
  border:1px solid rgba(255,255,255,.09); border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
  transition:transform .35s var(--ease-out),border-color .35s,background .35s;
}
.founder:hover {
  transform:translateY(-6px);
  border-color:rgba(50,173,230,.45);
  background:linear-gradient(180deg,rgba(50,173,230,.09),rgba(255,255,255,.012));
}
.founder__portrait {
  position:relative; width:100%; aspect-ratio:4/5;
  border-radius:14px; overflow:hidden; background:var(--card);
}
.founder__portrait img {
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform .5s var(--ease-out);
}
.founder:hover .founder__portrait img { transform:scale(1.045); }

.founder__meta { display:flex; flex-direction:column; gap:5px; }
.founder__index {
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--inactive);
}
.founder__name {
  margin:0; font-size:clamp(20px,1.55vw,25px); line-height:1.08;
  letter-spacing:-.02em; font-weight:650;
}
.founder__role { font-size:14px; font-weight:600; color:var(--cyan); }
.founder__affiliation {
  font-size:12px; line-height:1.4; color:var(--inactive); text-wrap:pretty;
}
.founder__bio {
  margin:0; font-size:13.5px; line-height:1.55; color:var(--muted); text-wrap:pretty;
}
.founder__tags { display:flex; flex-wrap:wrap; gap:6px; padding-top:2px; }
.founder__tags span {
  padding:5px 10px; border:1px solid rgba(255,255,255,.14); border-radius:999px;
  font-size:11.5px; line-height:1.3; color:var(--muted);
}

.team__status {
  display:grid; grid-template-columns:minmax(0,120px) minmax(0,1fr);
  gap:clamp(12px,2vw,28px);
  padding-top:clamp(16px,2.4vh,24px);
  border-top:1px solid var(--line);
  max-width:900px;
}
.team__status dt {
  margin:0; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.08em; color:var(--inactive); padding-top:3px;
}
.team__status dd {
  margin:0; font-size:15px; line-height:1.55; color:var(--muted); text-wrap:pretty;
}

/* ------------------------------------------------------------ closing --- */

.closing {
  min-height:90vh;
  padding:clamp(96px,16vh,200px) var(--gutter) clamp(48px,8vh,96px);
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(40px,7vh,80px);
  border-top:1px solid var(--hairline);
  position:relative; overflow:hidden;
}
.closing__arc {
  position:absolute; right:clamp(-120px,-6vw,0px); top:50%;
  width:min(60vw,560px); height:auto;
  transform:translateY(-50%); opacity:.9; pointer-events:none;
}
.closing__arc-progress { transition:stroke-dasharray 2s var(--ease-out); }
.closing__copy {
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:clamp(20px,3vh,28px); max-width:820px;
}
.closing__title {
  margin:0; font-size:clamp(40px,6vw,88px); line-height:.98;
  letter-spacing:-.03em; font-weight:700; text-wrap:balance;
}
.closing__lede {
  margin:0; font-size:clamp(17px,1.3vw,19px); line-height:1.55;
  color:var(--muted); max-width:520px; text-wrap:pretty;
}
.waitlist {
  position:relative; z-index:1;
  display:flex; flex-wrap:wrap; gap:12px; max-width:560px;
}
.waitlist input[type=email] {
  flex:1; min-width:220px; height:56px; padding:0 20px; border-radius:28px;
  background:var(--card); border:1px solid var(--line);
  color:var(--text); font-size:17px; font-family:inherit; outline:none;
}
.waitlist input[type=email]:focus {
  border-color:var(--cyan); box-shadow:0 0 0 3px rgba(50,173,230,.25);
}
.waitlist__done {
  display:flex; align-items:center; gap:10px; height:56px; padding:0 20px;
  border-radius:28px; background:var(--card); border:1px solid var(--line);
  font-size:15px; font-weight:600;
}
.waitlist[data-joined=true] .waitlist__fields { display:none; }
.waitlist:not([data-joined=true]) .waitlist__done { display:none; }
.waitlist__fields { display:contents; }

/* Only shown if the EmailJS request fails. */
.waitlist__error {
  flex-basis:100%; margin:0; font-size:14px; line-height:1.5; color:#FF453A;
}
.waitlist__error[hidden] { display:none; }

.waitlist button[disabled] { opacity:.6; cursor:default; }
.waitlist button[disabled]:hover { transform:none; }

/* ------------------------------------------------------------- footer --- */

.site-footer {
  padding:32px var(--gutter) 40px;
  border-top:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px; font-size:13px; color:var(--inactive);
}
.site-footer__brand { display:flex; align-items:center; gap:10px; }
.site-footer__brand img { width:22px; height:22px; border-radius:6px; }
.site-footer__brand span {
  font-weight:700; letter-spacing:.14em; color:#fff; font-size:13px;
}
.site-footer nav { display:flex; flex-wrap:wrap; gap:20px; }
.site-footer nav a { color:var(--inactive); }
.site-footer nav a:hover { color:#fff; }

/* ---------------------------------------------------- reduced motion --- */

@media (prefers-reduced-motion:reduce) {
  .flow__pulse,
  .clinicians__badge span { animation:none; }
  .hero__product,
  .clinicians__thread { transform:none !important; }
  .founder,
  .founder__portrait img,
  .timeline__node,
  .trend__series,
  .closing__arc-progress { transition:none; }
}