/* ============================================================================
   AutoSmile homepage pilot — v5
   ----------------------------------------------------------------------------
   COLOUR LAW (v4, per the brief)
   - #E11D48 is the primary brand colour and leads the page.
   - #E11D48 remains the focused brand accent.
   - #202124 is the primary neutral ink; #242126 is the warm dark field.
   - Grounds: #F3ECEF, #FFFFFF, #E11D48 and #242126.
   - No gradient, glow, glassmorphism, dark theme, box-shadow, or second red.
   ========================================================================== */

:root{
  --red:#E11D48;
  --red-press:#C41340;
  --charcoal:#202124;
  --warm-carbon:#242126;
  --pearl:#FAFAFF;
  --mist:#EEF0F2;
  --porcelain:#FFF9FA;
  --rose-fog:#F3ECEF;
  --plum:var(--warm-carbon);
  --paper:var(--porcelain);
  --white:#FFFFFF;
  --ink:var(--charcoal);
  --line:rgba(225,29,72,.16);
  --line-2:rgba(225,29,72,.34);
  --on-red:rgba(255,255,255,.44);
  --wrap:1240px;
  --gutter:56px;
  --display:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:800;margin:0;text-wrap:balance;letter-spacing:-.022em}
p,li{text-wrap:pretty}

h1{font-size:clamp(42px,6.1vw,94px);line-height:1}
h2{font-size:clamp(34px,4.4vw,66px);line-height:1.08}
h3{font-size:clamp(19px,1.5vw,23px);line-height:1.28;letter-spacing:-.012em}

.wrap{width:min(var(--wrap),calc(100% - (var(--gutter) * 2)));margin-inline:auto}
.section{padding:132px 0;position:relative}
.s-white{background:var(--white)}
.s-red{background:var(--red);color:var(--white)}
.s-red h2,.s-red h3,.s-red .eyebrow{color:var(--white)}

.eyebrow{
  font:600 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);margin:0 0 24px;display:flex;align-items:center;gap:12px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;flex:0 0 auto}
.lead{font-size:19px;line-height:1.6;margin:28px 0 0}
.note{font-size:14.5px;line-height:1.62}

.skip{position:absolute;left:16px;top:-80px;z-index:60;background:var(--red);color:#fff;padding:12px 16px;border-radius:6px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
a:focus-visible,button:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
.s-red a:focus-visible,.s-red button:focus-visible{outline-color:#fff}
.s-control a:focus-visible,.s-control button:focus-visible{outline-color:var(--plum)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- buttons ------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 28px;border:1.5px solid transparent;border-radius:7px;
  font:700 16px/1 var(--body);text-decoration:none;cursor:pointer;
  transition:background-color .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-press)}
.btn-ghost{background:transparent;color:var(--red);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--red)}
.btn-white{background:#fff;color:var(--red)}
.btn-white:hover{background:#FFEDF1}
.btn-sm{min-height:46px;padding:0 20px;font-size:15px}
.btn .arrow{transition:transform .18s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- motion primitives -------------------------------------------- */
/* Reveals are an ENHANCEMENT. Every hidden start state is scoped to `.js`,
   which an inline script in <head> sets. With JavaScript off — or if this file
   loads and the script does not — the page renders fully visible, which is what
   a crawler and a screen reader get too. */
.rl{display:block;overflow:hidden}
.rl > i{display:block;font-style:normal}
.js .rl > i{
  transform:translateY(108%);
  transition:transform .86s var(--ease);transition-delay:var(--d,0s);
}
.js .is-in .rl > i{transform:none}

.js .fade{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.js .is-in.fade,.js .is-in .fade{opacity:1;transform:none}

/* Word-level kinetic reveal (the technique from the GSAP SplitText component). */
.js .kin > span{display:inline-block;opacity:0;transform:translateY(28%) rotate(5deg);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0s)}
.js .is-in .kin > span{opacity:1;transform:none}

/* Staggered clip-path badge reveal. */
.js .clipin{clip-path:polygon(0 0,0 0,0 100%,0 100%);opacity:0;transition:clip-path .8s var(--ease),opacity .3s linear;transition-delay:var(--d,0s)}
.js .is-in .clipin{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1}

/* ---------- header -------------------------------------------------------- */
.head{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
.head-row{height:88px;display:flex;align-items:center;gap:34px}
/* The brand mark is the amblem, not the horizontal lockup — on every breakpoint.
   The name still reaches crawlers and screen readers through alt + .sr-only. */
.brand{flex:0 0 auto;display:flex;align-items:center;text-decoration:none}
.brand img{width:49px;height:40px;object-fit:contain;transition:transform .34s var(--ease)}
.brand:hover img{transform:scale(1.06)}
.head[data-shrunk="true"] .brand img{transform:scale(.86)}
.head[data-shrunk="true"] .brand:hover img{transform:scale(.92)}
.nav{display:flex;align-items:center;gap:30px;margin-left:auto}
.nav a{font-size:15px;font-weight:600;color:var(--ink);text-decoration:none;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1.5px;background:var(--red);transition:right .28s var(--ease)}
.nav a:hover{color:var(--red)}
.nav a:hover::after{right:0}
.head-cta{display:flex;align-items:center;gap:16px}
.head-cta .signin{font-size:15px;font-weight:600;text-decoration:none;color:var(--ink)}
.head-cta .signin:hover{color:var(--red)}
.burger{display:none;align-items:center;justify-content:center;width:48px;height:48px;margin-left:auto;background:transparent;border:1.5px solid var(--line-2);border-radius:7px;color:var(--red);flex-direction:column;gap:5px;padding:0;cursor:pointer}
.burger .line{display:block;width:18px;height:2px;background:currentColor;transition:transform .3s ease,opacity .3s ease}
.burger .line:nth-child(1){transform:translateY(-7px)}
.burger .line:nth-child(2){opacity:1}
.burger .line:nth-child(3){transform:translateY(7px)}
.burger[aria-expanded="true"] .line:nth-child(1){transform:rotate(45deg)}
.burger[aria-expanded="true"] .line:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .line:nth-child(3){transform:rotate(-45deg)}
.mnav{display:none;border-top:1px solid var(--line);background:var(--paper);max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain}
.mnav[data-open="true"]{display:block}
.mnav ul{list-style:none;margin:0;padding:6px 0 20px}
.mnav a{display:flex;align-items:center;justify-content:space-between;padding:17px 0;font-size:18px;font-weight:700;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.mnav a span{color:var(--red)}
.mnav .mcta{padding-top:20px}
.mnav .mcta .btn{width:100%}
body[data-lock="true"]{overflow:hidden}

/* ---------- hero ---------------------------------------------------------- */
.hero{padding:56px 0 0;background:var(--paper)}
.hero h1{color:var(--red);max-width:17ch}
.hero-under{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,362px);gap:clamp(40px,4.4vw,64px);align-items:center;margin-top:40px}
.hero-lead .lead{max-width:50ch;margin-top:0}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero-where{margin:38px 0 0;font-size:14.5px;line-height:1.6;max-width:44ch;border-left:2px solid var(--red);padding-left:20px}
.hero-where b{display:block;font:600 11px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:7px}

/* The hero object. A canvas sphere: 520 points rotated in 3D, shaded only by
   depth, so there is no gradient, blur or shadow in it. Same object as the
   conversation orb further down. */
.orb{justify-self:end;width:100%;max-width:362px}
.orb-stage{position:relative;width:100%;aspect-ratio:1}
.orb-canvas{width:100%;height:100%;display:block}
.orb-core{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.orb-core img{width:17%;height:auto}
.orb-cap{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:9px;transition:border-color .2s var(--ease)}
.orb-cap:hover{border-color:var(--red)}
.orb-cap span{transition:transform .2s var(--ease)}
.orb-cap:hover span{transform:translateY(2px)}

/* One call, end to end — its own section, not a strip under the hero. */
/* The section is paper; the red is the block inside it, and that block is the
   thing that wanted to be bigger. It runs full-bleed into the next section. */
.bandsec{background:var(--paper);padding:clamp(88px,11vh,126px) 0 0}
.bandsec-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(26px,4vw,60px);align-items:end}
.bandsec-head h2{color:var(--red);max-width:15ch}
.bandsec-side p{margin:0;font-size:16px;line-height:1.62;max-width:46ch}
.bandsec-side{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.bandsec-tag{font:600 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--red);border:1px solid var(--line-2);border-radius:5px;padding:9px 12px}
.band{margin-top:clamp(40px,6vh,68px);background:var(--red);color:#fff;padding:clamp(58px,8vh,96px) 0}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:6px}
.step{padding:34px 30px 34px 0;border-right:1px solid var(--on-red);position:relative;transition:opacity .5s var(--ease)}
.step:not(:first-child){padding-left:30px}
.step:last-child{border-right:0;padding-right:0}
.step .n{font:600 11px/1 var(--mono);letter-spacing:.12em;display:flex;align-items:center;gap:9px}
.step .n::after{content:"";width:7px;height:7px;border-radius:50%;border:1px solid #fff;transition:background-color .4s var(--ease)}
.step small{display:block;font:600 11px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;opacity:.85;margin:20px 0 9px}
.step strong{display:block;font-family:var(--display);font-weight:800;font-size:clamp(19px,1.6vw,23px);line-height:1.24}
.step p{margin:11px 0 0;font-size:14.5px;line-height:1.6;opacity:.9}
.step:not(.on){opacity:.5}
.step.on .n::after{background:#fff}
/* The sweep line that walks the band, so the sequence reads as one motion. */
.band-rail{margin-top:34px;height:2px;background:var(--on-red);position:relative;overflow:hidden}
.band-rail i{position:absolute;inset-block:0;left:0;width:25%;background:#fff;transition:transform .6s var(--ease)}

/* ---------- problem ledger ------------------------------------------------ */
.ledger{margin-top:60px;border-top:2px solid var(--red)}
.lrow{display:grid;grid-template-columns:118px minmax(0,1fr) 200px;gap:34px;align-items:center;padding:28px 0;border-bottom:1px solid var(--line)}
.lrow time{font:600 18px/1 var(--mono);color:var(--red)}
.lrow .w{font-family:var(--display);font-weight:800;font-size:19px;color:var(--red);letter-spacing:-.012em}
.lrow .w span{display:block;font-family:var(--body);font-weight:400;font-size:15px;color:var(--ink);margin-top:6px}
.lrow .s{justify-self:end;font:600 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--red);border:1px solid var(--line-2);border-radius:5px;padding:9px 13px}
.lrow.hot .s{background:var(--red);border-color:var(--red);color:#fff}

/* ---------- conversation -------------------------------------------------- */
.voice-head{max-width:760px;margin-inline:auto;text-align:center}
.voice-head h2{color:var(--red)}
.voice-head .eyebrow{justify-content:center}
/* Centred composition: the orb is the subject of this section, not a column in
   it. Prompts sit under it as three cards, and the transcript replaces them the
   moment a real conversation starts. */
.voice-stage{margin-top:clamp(34px,5vh,58px)}
.vc{display:flex;flex-direction:column;align-items:center;text-align:center}

/* The ring: real amplitude, not decoration. Bars are driven by the live
   microphone analyser while a session is open, and breathe slowly at rest. */
.ring{position:relative;width:min(470px,80vw);aspect-ratio:1;display:grid;place-items:center;background:transparent;border:0;padding:0;cursor:pointer}
.ring-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* One expanding ring per speech onset. Never a permanent halo. */
.ring-pulse{position:absolute;left:50%;top:50%;width:62%;height:62%;margin:-31% 0 0 -31%;
  border:1.5px solid var(--red);border-radius:50%;opacity:0;pointer-events:none}
.ring-pulse.go{animation:ringPulse .82s var(--ease) forwards}
@keyframes ringPulse{from{transform:scale(.86);opacity:.5}to{transform:scale(1.42);opacity:0}}
.ring-core{
  position:relative;width:38%;aspect-ratio:1;border-radius:50%;
  background:var(--white);border:1.5px solid var(--line-2);
  display:grid;place-items:center;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.ring:hover .ring-core{transform:scale(1.03)}
.ring-core img{width:44%;height:auto;object-fit:contain;transition:opacity .22s var(--ease)}
.ring-core .ico{position:absolute;inset:0;display:none;place-items:center;color:var(--red)}
.ring-core .ico svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ring:hover[data-s="idle"] .ring-core img,
.ring:focus-visible[data-s="idle"] .ring-core img,
.ring:hover[data-s="ended"] .ring-core img,
.ring:focus-visible[data-s="ended"] .ring-core img{opacity:0}
.ring:hover[data-s="idle"] .ico-mic,
.ring:focus-visible[data-s="idle"] .ico-mic,
.ring:hover[data-s="ended"] .ico-mic,
.ring:focus-visible[data-s="ended"] .ico-mic{display:grid}

.v-status{margin:30px 0 0;display:flex;align-items:center;justify-content:center;gap:11px;font-weight:700;font-size:17px;color:var(--red);min-height:28px}
.v-status svg{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v-hint{margin:11px 0 0;font-size:14.5px;line-height:1.55;max-width:34ch;color:var(--ink)}

.prompts{margin-top:clamp(34px,5vh,54px);text-align:center}
.prompts .eyebrow{justify-content:center;margin-bottom:20px}
.prompts ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.prompts li{
  border:1px solid var(--line);border-radius:12px;padding:22px 20px;background:var(--white);
  font-family:var(--display);font-weight:800;letter-spacing:-.015em;
  font-size:clamp(17px,1.5vw,21px);line-height:1.32;color:var(--red);text-wrap:balance;
}
.prompts .prompts-note{margin:26px auto 0;max-width:62ch;font-size:15px;line-height:1.62;color:var(--ink)}

.tscript{margin:clamp(30px,4vh,46px) auto 0;max-width:840px;border:1px solid var(--line);border-radius:9px;background:var(--white);overflow:hidden}
.tscript-top{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1px solid var(--line)}
.tscript-top b{font:600 11px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--red);font-weight:600}
.tscript-top .meta{margin-left:auto;font:600 11px/1 var(--mono);letter-spacing:.1em;color:var(--ink)}
.tlines{padding:26px 22px;min-height:160px;max-height:340px;overflow-y:auto;display:flex;flex-direction:column;gap:17px;font-size:15px;line-height:1.6}
.tline{margin:0;padding-left:17px;border-left:2px solid var(--line-2)}
.tline b{display:block;font:600 11px/1.4 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--red);margin-bottom:6px;font-weight:600}
.tline.ai{border-left-color:var(--red)}
.tscript-foot{display:flex;flex-wrap:wrap;gap:8px 20px;padding:16px 22px;border-top:1px solid var(--line);font-size:14px}
.tscript-foot a{color:var(--red);font-weight:700}

/* Ring state map. Colour never carries a state on its own. */
.ring[data-s="listening"] .ring-core,
.ring[data-s="responding"] .ring-core{border-color:var(--red)}
.ring[data-s="responding"] .ring-core{background:var(--red)}
.ring[data-s="responding"] .ring-core .ico{color:#fff}
.ring[data-s="listening"] .ico-mic,
.ring[data-s="responding"] .ico-mic{display:none}
.ring[data-s="listening"] .ico-stop,
.ring[data-s="responding"] .ico-stop{display:grid}
.ring[data-s="listening"] .ring-core img,
.ring[data-s="responding"] .ring-core img{opacity:0}
.ring[data-s="denied"] .ring-canvas,
.ring[data-s="error"] .ring-canvas{opacity:.45}

/* ---------- scroll-pinned panel reveal ------------------------------------ */
/* The panel opens from a small disc to the full frame as the section scrolls.
   Pure sticky + clip-path; no library, no video. */
.pinwrap{position:relative;height:190vh;background:var(--white)}
.pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.pin-copy{position:absolute;inset-inline:0;top:clamp(64px,11vh,120px);text-align:center;z-index:3;padding-inline:24px;transition:opacity .4s linear}
.pin-copy h2{color:var(--red);max-width:18ch;margin-inline:auto}
.pin-copy .eyebrow{justify-content:center}
.pin-mark{position:absolute;z-index:2;width:74px;height:61px;object-fit:contain;transition:opacity .3s linear}
.pin-clip{width:min(1080px,calc(100% - 48px))}
.js .pin-clip{clip-path:circle(var(--r,17%) at 50% 50%);will-change:clip-path}
.pin-hint{position:absolute;bottom:clamp(22px,4vh,44px);left:50%;transform:translateX(-50%);z-index:3;font:600 11px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--red);display:flex;align-items:center;gap:10px;transition:opacity .3s linear}
.pin-hint i{display:block;width:1px;height:26px;background:var(--red);opacity:.5}

/* ---------- browser frame + panel ----------------------------------------- */
.safari{border:1.5px solid var(--line-2);border-radius:11px;overflow:hidden;background:var(--white)}
.safari-bar{display:grid;grid-template-columns:74px minmax(0,1fr) 74px;align-items:center;gap:14px;padding:13px 17px;border-bottom:1px solid var(--line);background:var(--paper)}
.safari-dots{display:flex;gap:7px}
.safari-dots i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line-2)}
.safari-url{justify-self:center;font:600 11px/1 var(--mono);letter-spacing:.06em;color:var(--red);background:var(--white);border:1px solid var(--line);border-radius:5px;padding:8px 16px}
.proof-picture{display:block;background:var(--paper);line-height:0}
.proof-shot{display:block;width:100%;height:auto}
.proof-external-cap{margin:0;padding:11px 16px;border-top:1px solid var(--line);background:var(--white);color:var(--red);font:600 11px/1.4 var(--mono);letter-spacing:.1em;text-align:center;text-transform:uppercase}
.panel{display:grid;grid-template-columns:186px minmax(0,1fr)}
.panel-side,.panel-main{min-width:0}
.panel-side{border-right:1px solid var(--line);padding:20px 0}
.panel-side .bl{display:flex;align-items:center;gap:10px;padding:0 18px 18px;border-bottom:1px solid var(--line)}
.panel-side .bl img{width:26px;height:21px;object-fit:contain}
.panel-side .bl b{font-family:var(--display);font-size:14px;color:var(--red)}
.panel-side ul{list-style:none;margin:16px 0 0;padding:0}
.panel-side li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 18px;font-size:13.5px}
.panel-side li.on{color:var(--red);font-weight:700;border-left:2px solid var(--red);padding-left:16px}
.panel-side li em{font-style:normal;font:600 11px/1 var(--mono);color:var(--red)}
.panel-main{padding:26px}
.panel-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.panel-h h3{color:var(--red)}
.panel-h .sub{font-size:14px}
.queue{border:1px solid var(--line);border-radius:7px;overflow:hidden}
.qrow{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) 148px;gap:18px;align-items:center;padding:16px 19px;border-bottom:1px solid var(--line);font-size:14px}
.qrow:last-child{border-bottom:0}
.qrow .who{font-weight:700;color:var(--red)}
.qrow .who span{display:block;font-weight:400;font-size:13px;color:var(--ink);margin-top:4px}
.qrow .st{justify-self:end;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line-2);border-radius:5px;padding:8px 11px;color:var(--red);white-space:nowrap}
.qrow.rev .st{background:var(--red);border-color:var(--red);color:#fff}
.panel-cap{margin:19px 0 0;font:600 11px/1.5 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--red)}

/* ---------- human control — the single warm-carbon section ---------------- */
/* No #E11D48 appears anywhere inside this block. */
.s-control{background:var(--paper);--red:var(--plum);--line:rgba(128,29,72,.16);--line-2:rgba(128,29,72,.34)}
.s-control .eyebrow,.s-control h2{color:var(--plum)}
.ctl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:76px;align-items:center}
.ctl h2 span{display:block}
.bound{border:1.5px solid var(--line-2);border-radius:9px;overflow:hidden;background:var(--white)}
.bound-col{display:grid;grid-template-columns:160px minmax(0,1fr);gap:26px;padding:28px;border-bottom:1px solid var(--line)}
.bound-col b{font:600 11px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--plum);font-weight:600}
.bound-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.bound-col.team{background:var(--paper)}
.bound-foot{padding:21px 28px;margin:0;font-size:14px;line-height:1.6}

/* ---------- founder + closing (kept — this is the part that worked) ------- */
.founder{text-align:center}
.founder .amb{width:60px;height:49px;object-fit:contain;margin-inline:auto}
.founder .eyebrow{justify-content:center;margin:28px 0 44px}
.portrait{width:210px;height:210px;margin:0 auto;border:3px solid #fff;border-radius:50%;padding:9px;position:relative}
.portrait img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 32%}
.fname{margin-top:26px}
.fname strong{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:28px;line-height:1.2}
/* Verified mark, drawn in white so no colour outside the system is introduced. */
.verified{width:23px;height:23px;flex:0 0 auto}
.fname span{display:block;font-weight:600;margin-top:8px}
.fname small{display:block;font:600 12px/1 var(--mono);letter-spacing:.09em;margin-top:9px;opacity:.9}
.founder blockquote{margin:36px auto 0;max-width:60ch;font-size:18px;line-height:1.65}
.slogan{margin-top:56px;font-size:clamp(32px,7vw,84px);line-height:1.1;font-family:var(--display);font-weight:800;letter-spacing:-.022em}
.slogan span{display:block;white-space:nowrap}
.fcta{margin-top:40px;display:flex;flex-direction:column;align-items:center;gap:20px}
.expect{display:flex;flex-wrap:wrap;justify-content:center;gap:11px 28px;margin:0;padding:0;list-style:none;font:600 11px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase}
.expect li{display:flex;align-items:center;gap:10px}
.expect li::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.family{margin-top:68px;border-top:1px solid var(--on-red);display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.family a{
  /* third column holds the Soon tag so it shares the row with the product
     name instead of wrapping onto a line of its own */
  display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:17px;align-items:center;
  padding:26px 24px;text-align:left;text-decoration:none;color:#fff;
  border-bottom:1px solid var(--on-red);border-right:1px solid var(--on-red);
  transition:background-color .2s var(--ease);
}
.family a:hover{background:rgba(255,255,255,.08)}
.family a:nth-child(3n){border-right:0}
.family a:nth-last-child(-n+3){border-bottom:0}
.family .ic{width:46px;height:46px;border:1.5px solid var(--on-red);border-radius:8px;display:grid;place-items:center;color:#fff}
.family .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.family span{font-weight:700;font-size:15px;line-height:1.34}

/* ---------- footer -------------------------------------------------------- */
.foot{background:var(--white);border-top:1px solid var(--line);padding:38px 0}
.foot-row{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.foot-row .brand img{width:41px;height:34px}
.foot-row nav{display:flex;gap:26px;margin-left:auto}
.foot-row nav a{font-size:14px;font-weight:600;color:var(--ink);text-decoration:none}
.foot-row nav a:hover{color:var(--red)}
.foot-row .c{font-size:13px}

/* ---------- responsive ----------------------------------------------------- */
@media (max-width:1120px){
  :root{--gutter:34px}
  .section{padding:108px 0}
  .ctl{gap:52px}
  .pinwrap{height:175vh}
}

@media (max-width:920px){
  .nav,.head-cta{display:none}
  .burger{display:flex}
  .section{padding:88px 0}
  .hero{padding:60px 0 0}
  .hero-under{grid-template-columns:1fr;gap:44px;align-items:start}
  .bandsec{padding:80px 0 0}
  .band{padding:52px 0}
  .bandsec-head{grid-template-columns:1fr;gap:20px}
  .bandsec-tag{position:static;display:inline-block;margin-top:4px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step{border-right:1px solid var(--on-red);border-bottom:1px solid var(--on-red);padding:28px 24px}
  .step:nth-child(2n){border-right:0}
  .step:nth-last-child(-n+2){border-bottom:0}
  .step:first-child{padding-left:0}
  .ctl{grid-template-columns:1fr;gap:46px}
  .prompts ul{grid-template-columns:1fr;gap:12px}
  .family{grid-template-columns:repeat(2,minmax(0,1fr))}
  .family a:nth-child(3n){border-right:1px solid var(--on-red)}
  .family a:nth-child(2n){border-right:0}
  .family a:nth-last-child(-n+3){border-bottom:1px solid var(--on-red)}
  .family a:nth-last-child(-n+2){border-bottom:0}
  .panel{grid-template-columns:1fr}
  .panel-side{border-right:0;border-bottom:1px solid var(--line);padding-bottom:12px}
  .panel-side ul{display:flex;overflow-x:auto;gap:4px;margin-top:12px}
  .panel-side li{white-space:nowrap;padding:10px 15px}
  .panel-side li.on{border-left:0;border-bottom:2px solid var(--red);padding-left:15px}
  .pinwrap{height:165vh}
}

@media (max-width:640px){
  :root{--gutter:20px}
  body{font-size:16px}
  .section{padding:72px 0}
  .hero{padding:44px 0 0}
  h1{font-size:clamp(36px,9.4vw,56px)}
  h2{font-size:clamp(30px,8vw,44px)}
  .lead{font-size:17px}
  .head-row{height:74px}
  .brand img{width:44px;height:36px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .hero-cta .btn{width:100%}
  .bandsec{padding:66px 0 0}
  .band{padding:44px 0}
  .steps{grid-template-columns:1fr}
  .step,.step:nth-child(2n){border-right:0;border-bottom:1px solid var(--on-red);padding:24px 0}
  .step:last-child{border-bottom:0}
  .lrow{grid-template-columns:80px minmax(0,1fr);gap:9px 18px}
  .lrow .s{grid-column:2;justify-self:start;margin-top:11px}
  .ring{width:min(320px,84vw)}
  .strip-rail{grid-template-columns:auto minmax(0,1fr);gap:16px}
  .strip-arrows{grid-column:1/-1;margin-left:0}
  .bound-col{grid-template-columns:1fr;gap:15px;padding:24px}
  .qrow{grid-template-columns:1fr;gap:11px}
  .qrow .st{justify-self:start}
  .portrait{width:176px;height:176px}
  .founder blockquote{font-size:16px}
  .family{grid-template-columns:1fr}
  .family a,.family a:nth-child(2n),.family a:nth-child(3n){border-right:0}
  .family a:nth-last-child(-n+3),.family a:nth-last-child(-n+2){border-bottom:1px solid var(--on-red)}
  .family a:last-child{border-bottom:0}
  .foot-row nav{margin-left:0;width:100%;order:3;flex-wrap:wrap;gap:17px}
  .foot-row .c{margin-left:auto}
  .pinwrap{height:155vh}
}

/* Motion is a layer, never a requirement: with it off, everything is simply
   in its final state. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rl > i{transform:none!important}
  .fade,.kin > span{opacity:1!important;transform:none!important}
  .clipin{clip-path:none!important;opacity:1!important}
  .card .rl-role,.card .go{opacity:1!important}
}

/* ============================================================================
   v4 additions
   ========================================================================== */

/* ---------- founder CTA rhythm ---------------------------------------------
   The button sat 40px under the slogan but only 20px above the expectations,
   so it read as attached to the list rather than centred in the gap. */
.slogan{margin:56px 0 0}
.fcta{margin-top:54px;gap:54px}

/* ---------- pinned panel reveal (revised) -----------------------------------
   The panel starts fully absent. The amblem scales up and fades out while the
   panel fades and opens in over the SAME scroll window, so the mark reads as
   becoming the panel rather than sitting on top of one already open. */
.js .pin-clip{opacity:0;transition:none}
.pin-mark{transform-origin:50% 50%}

/* ---------- devices ---------------------------------------------------------
   Flat line-drawn frames on the brand palette. Deliberately not photoreal:
   no Apple mark, no metal, no gloss. */
.devwrap{position:relative;height:230vh;background:var(--paper)}
.devpin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(20px,3.4vh,40px);overflow:hidden;padding:clamp(84px,11vh,116px) 0 clamp(28px,4vh,48px)}
.devcopy{text-align:center;max-width:820px;flex:0 0 auto}
.devcopy .eyebrow{justify-content:center;margin-bottom:16px}
.devcopy h2{color:var(--red);font-size:clamp(26px,3.2vw,46px)}

/* Sized from HEIGHT, not width: inside a pinned 100vh stage the vertical budget
   is the scarce one, and aspect-ratio derives the width from it. */
.devstage{position:relative;height:min(60vh,540px);display:flex;align-items:flex-end;justify-content:center}

/* Safari window */
.mac{position:relative;height:100%;will-change:transform,opacity;transform-origin:50% 88%}
/* The bar sits in the window's own top padding, so the screen keeps a definite
   height and derives its width from the ratio — the frame then hugs the screen
   instead of stretching to the container. */
.win{position:relative;height:100%;box-sizing:border-box;padding-top:44px;
  border:2px solid var(--red);border-radius:14px;background:var(--white);overflow:hidden}
.win-bar{position:absolute;left:0;right:0;top:0;height:44px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:9px 14px;border-bottom:1px solid var(--line);background:var(--paper)}
.win-left,.win-right{display:flex;align-items:center;gap:11px;color:var(--red)}
.win-dots{display:flex;gap:7px;margin-right:5px}
.win-dots i{width:9px;height:9px;border-radius:50%;border:1.4px solid var(--line-2)}
.win-nav{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.72}
.win-nav.dim{opacity:.32}
.win-url{justify-self:center;display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:70%;
  overflow:hidden;white-space:nowrap;
  font:600 11px/1 var(--mono);letter-spacing:.06em;color:var(--red);
  border:1px solid var(--line);border-radius:8px;padding:7px 16px;background:var(--white)}
.win-url svg{width:12px;height:12px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;opacity:.7}
.mac-screen{height:100%;aspect-ratio:16/10;overflow:hidden;background:var(--white)}

/* iPhone */
.phone{position:relative;height:86%;align-self:flex-end;margin-left:14px;margin-bottom:-3%;will-change:transform,opacity;transform-origin:50% 90%}
.phone-screen{position:relative;height:100%;aspect-ratio:9/19.5;border:2.5px solid var(--red);border-radius:34px;background:var(--white);overflow:hidden;display:flex;flex-direction:column}
/* A real status bar, so the Dynamic Island sits in the strip the OS reserves
   for it instead of on top of the app's own header. */
.phone-status{flex:0 0 auto;position:relative;height:7.4%;min-height:26px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:var(--paper);border-bottom:1px solid var(--line)}
/* No numerals: 9px type is not readable, and the strip reads as a status bar
   from the island and the marks alone. */
.ps-dots{display:flex;gap:3px}
.ps-dots i{width:3px;height:3px;border-radius:50%;background:var(--red);opacity:.55}
.ps-icons{display:flex;align-items:center;gap:4px}
.ps-icons i{display:block;background:var(--red);opacity:.7}
.ps-icons .sig{width:10px;height:7px;clip-path:polygon(0 100%,22% 100%,22% 62%,0 62%,0 100%,34% 100%,34% 40%,56% 40%,56% 100%,68% 100%,68% 18%,90% 18%,90% 100%,100% 100%,100% 0,0 0)}
.ps-icons .bat{width:14px;height:7px;border-radius:2px}
/* The Dynamic Island, drawn in the brand red rather than black — this page has
   no dark surface anywhere, and the silhouette is what makes it read. */
.island{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34%;height:64%;min-height:11px;border-radius:99px;background:var(--red);z-index:3}
/* Home indicator, the way the device actually renders it. */
.phone-screen::after{content:"";position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:34%;height:4px;border-radius:99px;background:var(--red);opacity:.55;z-index:3}
/* Side buttons, drawn on the frame rather than inside the screen. */
.phone::before,.phone::after{content:"";position:absolute;width:2.5px;border-radius:2px;background:var(--red);opacity:.55}
.phone::before{left:-2.5px;top:19%;height:7%;box-shadow:none}
.phone::after{right:-2.5px;top:25%;height:13%}
.phone-scale{flex:0 0 auto;width:390px;height:823px;padding:16px;display:flex;flex-direction:column;gap:11px;font-size:15px;transform:scale(var(--k,1));transform-origin:0 0}
.phone-bar{display:block;width:34%;height:9px;border-radius:99px;background:var(--red);margin:5px auto 12px;flex:0 0 auto}
.phone-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 6px;margin-top:6px;flex:0 0 auto}
.phone-h b{font-family:var(--display);font-size:19px;color:var(--red)}
.phone-h em{font-style:normal;font:600 14px/1 var(--mono);color:var(--ink)}
.phone-row{border:1px solid var(--line);border-radius:11px;padding:14px 15px;min-width:0;flex:0 0 auto}
.phone-row span{display:block;font-weight:700;color:var(--red);font-size:16px}
.phone-row em{display:block;font-style:normal;color:var(--ink);font-size:14px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phone-row u{display:inline-block;margin-top:10px;text-decoration:none;font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--red);border:1px solid var(--line-2);border-radius:6px;padding:8px 11px}
.phone-row.rev u{background:var(--red);border-color:var(--red);color:#fff}
.device-proof{padding:0;display:block}
.device-proof img{display:block;width:100%;height:100%;object-fit:cover}
.devcap{margin:0;flex:0 0 auto;text-align:center;max-width:64ch;font:600 11px/1.6 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--red)}

/* ---------- founder briefings ---------------------------------------------- */
.brief-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px;align-items:end}
.brief-head h2{color:var(--red);font-size:clamp(32px,3.8vw,54px)}
.brief-head p{margin:0;font-size:18px}
.briefs{margin-top:56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.brief h3{margin:22px 0 0;color:var(--red)}
.brief p{margin:11px 0 0;font-size:15px;line-height:1.6}
.brief-frame{
  position:relative;aspect-ratio:16/9;border:1.5px solid var(--line-2);border-radius:9px;
  background:var(--paper);display:grid;place-items:center;overflow:hidden;
}
.brief-frame video{width:100%;height:100%;object-fit:cover;display:block}
.brief-play{width:60px;height:60px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;color:var(--red);background:var(--white);transition:transform .2s var(--ease),background-color .2s var(--ease)}
.brief-play svg{width:22px;height:22px;fill:currentColor;margin-left:3px}
.brief-state{position:absolute;left:14px;bottom:14px;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--red);border:1px solid var(--line-2);border-radius:4px;padding:7px 9px;background:var(--white)}
/* Only a slot that actually has a file behaves like a button. */
.brief[data-video=""] .brief-frame{cursor:default}
.brief:not([data-video=""]) .brief-frame{cursor:pointer}
.brief:not([data-video=""]) .brief-frame:hover .brief-play{transform:scale(1.06);background:var(--red);color:#fff}
.brief:not([data-video=""]) .brief-state{display:none}

@media (max-width:1120px){
  .devwrap{height:210vh}
  .briefs{gap:24px}
}
@media (max-width:920px){
  .devwrap{height:190vh}
  .devstage{align-items:center}
  .devstage{height:min(46vh,400px)}
  .phone{height:80%;margin-left:-6%}
  .brief-head{grid-template-columns:1fr;gap:26px}
  .briefs{grid-template-columns:1fr;gap:34px;margin-top:44px}
  .brief-frame{max-width:520px}
}
@media (max-width:640px){
  .devwrap{height:170vh}
  .devpin{gap:14px;padding:88px 0 18px;justify-content:flex-start}
  .devstage{flex-direction:column;align-items:center;gap:0}
  /* On a phone the vertical budget stops being the binding constraint and width
     takes over, so both frames are sized from width and stacked. Overlapping
     them here would clip the panel's own rows. */
  .devstage{height:auto;width:100%;flex-direction:column;align-items:center;gap:18px}
  .mac{height:auto;width:100%}
  .win{height:auto;width:100%}
  .mac-screen{height:auto;width:100%;aspect-ratio:16/10}
  .phone{position:static;height:auto;width:34%;max-width:140px;align-self:center;margin:0}
  .phone-screen{height:auto;width:100%;aspect-ratio:9/19.5}
  .devcopy h2{font-size:clamp(24px,7vw,34px)}
}

@media (prefers-reduced-motion:reduce){
  /* Both pinned sections become ordinary blocks. */
  .devwrap{height:auto}
  .devpin{position:static;height:auto;padding:80px 0}
  .pin-clip{opacity:1!important;clip-path:none!important}
}

/* ============================================================================
   v5 additions — scroll presentation layer
   ----------------------------------------------------------------------------
   Three new pieces, each with its own responsive and reduced-motion rules kept
   next to it rather than in a distant block, so a section can be read, changed
   or removed in one place.
   ========================================================================== */

/* ---------- header: scroll progress + condense ------------------------------
   A 2px hairline that reports how far down the page the reader is. It sits on
   the header's own border line, so it adds a signal without adding furniture. */
.hprog{position:relative;height:2px;margin-top:-1px;z-index:1;overflow:hidden}
.hprog i{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:0 50%}
.head-row{transition:height .34s var(--ease)}
.head[data-shrunk="true"] .head-row{height:66px}

/* Magnetic primary CTA: pointer-following, capped at 6px, fine pointers only. */
.mag{will-change:transform}

/* ---------- the night shift — pinned horizontal scroll ----------------------
   The one section that argues the product's premise instead of describing it:
   the reader physically travels the window the clinic cannot staff. Full-bleed
   #E11D48, so the brand red leads in the first half of the page as well. */
.nightwrap{position:relative;height:250vh;background:var(--red);color:#fff}
.nightpin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,4vh,46px);overflow:hidden;padding:clamp(96px,12vh,124px) 0 clamp(30px,5vh,54px)}
.nightpin .eyebrow{color:#fff}
.night-head{flex:0 0 auto}
.night-head h2{color:#fff;max-width:16ch;font-size:clamp(28px,3.6vw,52px)}
.night-view{overflow:hidden;flex:0 0 auto}
.night-track{display:flex;gap:22px;padding-left:max(calc(50vw - var(--wrap) / 2),var(--gutter));padding-right:var(--gutter);will-change:transform}
.ncard{flex:0 0 clamp(300px,25vw,392px);border:1px solid var(--on-red);border-radius:13px;padding:28px 26px;display:flex;flex-direction:column;min-height:clamp(250px,34vh,306px)}
.ncard .nt{font:600 clamp(26px,2.4vw,32px)/1 var(--mono);letter-spacing:-.02em}
.ncard h3{color:#fff;margin:20px 0 0;font-size:20px}
.ncard p{margin:11px 0 0;font-size:14.5px;line-height:1.6;opacity:.9}
.ncard .nb{margin-top:auto;align-self:flex-start;font:600 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;border:1px solid var(--on-red);border-radius:5px;padding:9px 12px}
.ncard .nb.on{background:#fff;border-color:#fff;color:var(--red)}
.ncard.hot{background:#fff;border-color:#fff;color:var(--ink)}
.ncard.hot .nt,.ncard.hot h3{color:var(--red)}
.ncard.hot p{opacity:1}
.ncard.hot .nb{background:var(--red);border-color:var(--red);color:#fff}
.night-foot{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);gap:clamp(20px,3vw,40px);align-items:center}
.night-rail{height:2px;background:var(--on-red);position:relative;overflow:hidden}
.night-rail i{position:absolute;inset-block:0;left:0;width:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.night-foot p{margin:0;font-size:14px;line-height:1.6;opacity:.92}

/* ---------- statement — scroll-linked word reveal ---------------------------
   Each word carries its own opacity, driven by the scroll position of the
   section. With JavaScript off, every word is already at full strength. */
.stmtwrap{position:relative;height:215vh;background:var(--white)}
.stmt-paper{background:var(--paper)}
.stmtpin{position:sticky;top:0;height:100vh;display:flex;align-items:center}
.stmt{
  font-family:var(--display);font-weight:800;color:var(--red);
  font-size:clamp(30px,4.8vw,68px);line-height:1.1;letter-spacing:-.022em;
  margin:20px 0 0;max-width:17ch;text-wrap:balance;
}
.js .stmt > span{opacity:.13}

/* ---------- briefings: film-slot frame -------------------------------------- */
.brief-rule{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.brief-no{position:absolute;right:14px;top:14px;font:600 11px/1 var(--mono);letter-spacing:.12em;color:var(--red);opacity:.55}
.brief-play{position:relative;z-index:1}
.brief h3{font-size:20px}

@media (max-width:1120px){
  .nightwrap{height:240vh}
}
@media (max-width:920px){
  .orb{justify-self:start;max-width:340px}
  .nightwrap{height:235vh}
  .night-foot{grid-template-columns:1fr;gap:18px}
  .stmtwrap{height:200vh}
}
@media (max-width:640px){
  .orb{max-width:290px;margin-inline:auto;justify-self:center}
  .orb-cap{margin-top:22px}
  .hero-where{margin-top:30px}
  .nightwrap{height:255vh}
  .nightpin{padding:88px 0 26px;gap:20px;justify-content:flex-start}
  .night-track{gap:16px}
  .ncard{flex-basis:min(80vw,300px);min-height:auto;padding:24px 22px}
  .night-head h2{font-size:clamp(26px,7.6vw,36px)}
  .stmtwrap{height:190vh}
  .brief-no{display:none}
}

@media (prefers-reduced-motion:reduce){
  /* Both new pinned scenes become ordinary blocks, and every scroll-linked
     value is already at its finished state. */
  .nightwrap{height:auto}
  .nightpin{position:static;height:auto;padding:88px 0;overflow:visible}
  .night-view{overflow:visible}
  .night-track{flex-direction:column;gap:18px;padding-inline:max(calc(50vw - var(--wrap) / 2),var(--gutter));transform:none!important}
  .ncard{flex-basis:auto;min-height:0}
  .night-rail i{transform:scaleX(1)!important}
  .stmtwrap{height:auto}
  .stmtpin{position:static;height:auto;padding:88px 0}
  .stmt > span{opacity:1!important}
  .hprog{display:none}
  .mag{transform:none!important}
}

/* ============================================================================
   v6 — the product system rack
   ----------------------------------------------------------------------------
   Six products, six purpose-built mechanism diagrams, one scroll. Every diagram
   is drawn from the same primitives — a lane, a gate, travelling tokens, the
   panel edge — so the six read as one system rather than six icons. Each plays
   once when its stop becomes active and holds its finished state.
   Nothing in them stands for a real patient, a real number or a real outcome.
   ========================================================================== */
.rackwrap{position:relative;height:360vh;background:var(--white)}
/* #products used to sit on the filmstrip section; it now lands on the rack. */
.anchor{position:absolute;top:0;left:0;width:1px;height:1px}
.rackpin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden;padding:clamp(78px,9vh,104px) 0 clamp(24px,4vh,44px)}
.rack-head{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:end;margin-bottom:clamp(22px,3.6vh,44px)}
.rack-head h2{color:var(--red);font-size:clamp(28px,3.5vw,50px)}
.rack-head > p{margin:0;font-size:16px;line-height:1.6;max-width:52ch}

.rack-body{display:grid;grid-template-columns:minmax(0,286px) minmax(0,1fr);gap:clamp(30px,4vw,62px);align-items:start}

.rack-index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rack-index li{
  display:flex;align-items:center;gap:14px;padding:13px 0 13px 14px;
  border-bottom:1px solid var(--line);position:relative;
  color:var(--ink);opacity:.42;
  transition:opacity .42s var(--ease),color .42s var(--ease),padding-left .42s var(--ease);
}
/* The active rule grows out of the index edge instead of a dot appearing. */
.rack-index li::before{content:"";position:absolute;left:0;top:50%;width:2px;height:0;background:var(--red);transform:translateY(-50%);transition:height .42s var(--ease)}
.rack-index li i{font:600 11px/1 var(--mono);letter-spacing:.1em;color:var(--red);font-style:normal;flex:0 0 auto}
.rack-index li b{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.012em;min-width:0}
.rack-index li.on{opacity:1;color:var(--red);padding-left:20px}
.rack-index li.on::before{height:calc(100% - 18px)}

.rack-stage{position:relative;display:grid;align-items:center}
.mech{
  grid-area:1/1;display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);
  gap:clamp(22px,2.8vw,44px);align-items:center;
}
/* Asymmetric on purpose: the outgoing mechanism is gone before the incoming one
   arrives, so two products are never legible on top of each other. */
.js .mech{opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s linear .22s}
.js .mech.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease) .2s,transform .58s var(--ease) .2s,visibility 0s}
/* The sub-brand lockup: the master brand small, the product name large. Six
   products, one roof. */
.mech-lockup{display:flex;align-items:center;gap:13px;margin-top:18px;padding-left:2px}
.ml-mark{flex:0 0 auto;width:40px;height:40px;border-radius:11px;border:1.5px solid var(--red);display:grid;place-items:center;color:var(--red)}
.ml-mark svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ml-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.ml-txt small{font:600 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--red);opacity:.7}
.ml-txt b{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:-.015em;color:var(--red);line-height:1.1}
.mech-art{align-self:center}
/* Diagram labels live in HTML, positioned in percentages over the drawing, so
   they stay at a real 11px at every width instead of scaling with the viewBox. */
.mech-frame{position:relative}
.dlbl{
  position:absolute;left:var(--x);top:var(--y);transform:translateY(-50%);
  font:600 11px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--red);white-space:nowrap;pointer-events:none;
}
.dlbl.end{transform:translate(-100%,-50%)}
.js .dlbl.late{opacity:0}
.js .mech.on .dlbl.late{animation:m-in .4s var(--ease) 1.7s forwards}
.mech-art svg{width:100%;height:auto;display:block}
.mech-copy{align-self:center}
.mech-copy h3{color:var(--red);font-size:clamp(20px,1.9vw,27px);margin:0}
.mech-copy > p{margin:13px 0 0;font-size:15.5px;line-height:1.6}
.mech-note{color:var(--ink);border-left:2px solid var(--line-2);padding-left:16px;font-size:14.5px!important;margin-top:18px!important}
.mech-go{display:inline-flex;align-items:center;gap:9px;margin-top:22px;font:700 14px/1 var(--body);color:var(--red);text-decoration:none;border-bottom:1.5px solid var(--line-2);padding-bottom:8px;transition:border-color .2s var(--ease)}
.mech-go:hover{border-color:var(--red)}
.mech-go span{transition:transform .2s var(--ease)}
.mech-go:hover span{transform:translateX(3px)}

@media (max-width:1120px){
  .rackwrap{height:344vh}
  .rack-body{grid-template-columns:minmax(0,240px) minmax(0,1fr)}
  .rack-index li b{font-size:14px}
}
@media (max-width:920px){
  .mech-art{width:100%;max-width:520px;margin-inline:auto}
  /* Below the pin threshold the rack stops being a scene and becomes a list:
     every mechanism is present, and each plays when it enters the viewport. */
  .rackwrap{height:auto;background:var(--white)}
  .rackpin{position:static;height:auto;display:block;overflow:visible;padding:88px 0}
  .rack-head{grid-template-columns:1fr;gap:22px;align-items:start;margin-bottom:34px}
  .rack-body{grid-template-columns:1fr;gap:0}
  .rack-index{display:none}
  .rack-stage{display:block}
  .mech{grid-area:auto;grid-template-columns:1fr;gap:24px;padding:34px 0;border-top:1px solid var(--line)}
  .mech:first-child{border-top:0;padding-top:6px}
  .js .mech{opacity:0;visibility:visible;transform:translateY(16px)}
}
@media (max-width:640px){
  .rackpin{padding:72px 0}
  .mech-art{width:100%;max-width:420px}
  .mech-copy h3{font-size:21px}
  .mech-art{padding:12px}
}

@media (prefers-reduced-motion:reduce){
  /* No scene, no playback: every mockup is shown in its finished state. */
  .rackwrap{height:auto}
  .rackpin{position:static;height:auto;display:block;overflow:visible;padding:88px 0}
  .rack-index{display:none}
  .rack-body{grid-template-columns:1fr}
  .rack-stage{display:block}
  .mech{grid-area:auto;grid-template-columns:1fr;gap:24px;padding:34px 0;border-top:1px solid var(--line);opacity:1!important;visibility:visible!important;transform:none!important}
  .mk-bub,.mk-out,.mk-toast,.mk-tlrow,.mk-rev,.mk-ch,.mk-slot{opacity:1!important;transform:none!important}
}

/* ---------- v6 entry effects -----------------------------------------------
   Two small ones, both scoped to sections the reveal system already governs so
   nothing inside a pinned scene can be left in a half-drawn state. */
.js [data-io] .eyebrow::before{width:0;transition:width .7s var(--ease) var(--d,.04s)}
.js [data-io].is-in .eyebrow::before{width:22px}

.js .section[data-io]::before{
  content:"";position:absolute;top:0;left:0;height:1px;width:0;
  background:var(--line-2);transition:width 1.15s var(--ease);
}
.js .section[data-io].is-in::before{width:100%}
.js .s-red[data-io]::before{background:var(--on-red)}
.js .s-control[data-io]::before{background:rgba(128,29,72,.34)}

@media (prefers-reduced-motion:reduce){
  .eyebrow::before{width:22px!important}
  .section[data-io]::before{width:100%!important}
}

/* ---------- product mockups (v6.1) -----------------------------------------
   The animated mockups the six product pages already use — call transcript,
   week calendar with confirmation toasts, outreach timeline, review split and
   channel routing — rebuilt in this page's colour system. Same behaviour and
   staggering as the originals; every patient name, phone number and money
   figure removed, because a marketing page must not invent them.
   Each one plays when its stop becomes active and holds its finished state. */
.mk{display:flex;flex-direction:column;gap:9px;font-size:13px;line-height:1.42;
  border:1px solid var(--line);border-radius:15px;background:var(--paper);padding:clamp(12px,1.6vw,20px)}
.mk-bar{display:flex;align-items:center;gap:11px;border:1px solid var(--line-2);border-radius:10px;background:var(--white);padding:9px 13px}
.mk-bar > div,.mk-bar > b{flex:1 1 auto;min-width:0}
.mk-bar b{font-family:var(--display);font-weight:800;font-size:14px;color:var(--red);display:block}
.mk-bar small{display:block;font-size:12.5px;color:var(--ink);margin-top:2px}
.mk-ico{flex:0 0 auto;width:30px;height:30px;border-radius:8px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--red)}
.mk-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mk-bar > small{flex:0 0 auto;margin-left:auto;margin-top:0;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--red);opacity:.8;white-space:nowrap}

/* --- transcript --- */
.mk-thread{display:flex;flex-direction:column;gap:6px}
.mk-bub{max-width:90%;border:1px solid var(--line);border-radius:11px;padding:8px 11px;background:var(--white)}
.mk-bub b{display:block;font:600 11px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--red);margin-bottom:5px}
.mk-bub.a{align-self:flex-end;background:var(--red);border-color:var(--red);color:#fff}
.mk-bub.a b{color:rgba(255,255,255,.75)}
.mk-out{display:flex;align-items:center;gap:9px;border:1px solid var(--red);border-radius:9px;padding:9px 12px;color:var(--red);font-weight:700;font-size:12.5px}
.mk-out span{font-size:14px}

/* --- calendar + toasts --- */
.mk-cal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.mk-day small{display:block;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red);opacity:.75;margin-bottom:6px;text-align:center}
.mk-slot{display:block;border:1px solid var(--line);border-radius:8px;padding:10px 4px;text-align:center;font-weight:700;font-size:12.5px;color:var(--ink);background:var(--white);overflow:hidden}
.mk-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;font:600 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.mk-legend span{display:flex;align-items:center;gap:7px}
.mk-legend i{width:14px;height:14px;border-radius:4px;border:1px solid var(--red);flex:0 0 auto}
.mk-legend i.dash{border-style:dashed}
.mk-legend i.solid{background:var(--red)}
.mk-slot.risk{border-color:var(--red);border-style:dashed;color:var(--red)}
.mk-slot.fill{background:var(--red);border-color:var(--red);color:#fff}
.mk-toasts{display:flex;flex-direction:column;gap:7px}
.mk-toast{border:1px solid var(--line-2);border-left:3px solid var(--red);border-radius:9px;padding:9px 12px;background:var(--white)}
.mk-toast b{color:var(--red);font-size:13px}
.mk-toast span{display:block;font-size:12.5px;margin-top:2px}

/* --- outreach timeline --- */
.mk-tl{display:flex;flex-direction:column;gap:7px}
.mk-tlrow{display:grid;grid-template-columns:66px minmax(0,1fr);gap:10px;align-items:stretch}
.mk-day-chip{display:grid;place-items:center;border:1px solid var(--line-2);border-radius:8px;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--red);background:var(--white)}
.mk-day-chip.on{background:var(--red);border-color:var(--red);color:#fff}
.mk-card{border:1px solid var(--line);border-radius:9px;padding:9px 12px;background:var(--white);min-width:0}
.mk-card header{font:600 11px/1.25 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--red);margin-bottom:5px}
.mk-card p{margin:0;font-size:12.5px;line-height:1.45}
.mk-card.out{border-color:var(--red)}

/* --- review split --- */
.mk-revs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.mk-rev{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--white);min-width:0}
.mk-rev header{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.mk-rev em{font-style:normal;margin-left:auto;font:600 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--red)}
.mk-stars{color:var(--red);letter-spacing:2px;font-size:14px}
.mk-flag{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--red);color:var(--red);display:grid;place-items:center;font:700 12px/1 var(--body)}
.mk-rev p{margin:0;font-size:12.5px}
.mk-rev.alt{border-color:var(--line-2);background:var(--paper)}

/* --- channel routing --- */
.mk-chan{display:flex;flex-direction:column;gap:7px}
.mk-ch{display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);align-items:center;gap:10px;border:1px solid var(--line);border-radius:9px;padding:10px 13px;background:var(--white)}
.mk-ch b{font-size:13px;color:var(--ink)}
.mk-ch i{font-style:normal;color:var(--red);text-align:center}
.mk-ch span{font:600 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--red);text-align:right}
.mk-ch.join{background:var(--red);border-color:var(--red);margin-top:2px}
.mk-ch.join b,.mk-ch.join i,.mk-ch.join span{color:#fff}

/* --- playback: everything enters on its own delay, once, then holds --- */
.js .mk-bub,.js .mk-out,.js .mk-toast,.js .mk-tlrow,.js .mk-rev,.js .mk-ch,.js .mk-slot{opacity:0}
/* A mockup plays when its rack stop becomes active (.mech.on) or, on a product
   page where there is no rack, when the mockup itself enters the viewport
   (.mk.play). Same animation, two triggers. */
.js .mech.on .mk-bub,.js .mech.on .mk-out,.js .mech.on .mk-toast,
.js .mech.on .mk-tlrow,.js .mech.on .mk-rev,.js .mech.on .mk-ch,
.js .mk.play .mk-bub,.js .mk.play .mk-out,.js .mk.play .mk-toast,
.js .mk.play .mk-tlrow,.js .mk.play .mk-rev,.js .mk.play .mk-ch{
  animation:mk-in .5s var(--ease) var(--d,0s) forwards;
}
.js .mech.on .mk-slot,.js .mk.play .mk-slot{animation:mk-pop .42s var(--ease) var(--d,0s) forwards}
@keyframes mk-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes mk-pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}

/* ============================================================================
   v7 additions
   ----------------------------------------------------------------------------
   Three patterns the founder liked on the old site, rebuilt here. The originals
   used glossy 3D icons, third-party brand colours and an invented "$3,200
   example case value" beside a made-up patient name and phone number. All of
   that is gone: flat line marks in one red, and a request card that shows the
   fields without inventing what fills them.
   ========================================================================== */

/* ---------- after the call, everyone is in sync ----------------------------- */
.sync{background:var(--white)}
.syncrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:0 14px;margin-top:clamp(38px,5vh,60px)}
.syncard{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--white);padding:24px 22px;min-width:0}
.sc-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1.5px solid var(--red);color:var(--red);margin-bottom:18px}
.sc-mark svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sc-mark img{width:20px;height:17px;object-fit:contain}
.syncard b{display:block;font-family:var(--display);font-weight:800;font-size:18px;color:var(--red);letter-spacing:-.015em}
.syncard p{margin:9px 0 0;font-size:14.5px;line-height:1.58}
/* The arrows live between the cards, on the grid gap. */
.syncarrow{display:none}
.syncrow > .syncard + .syncard::before{content:"→";position:absolute;left:-14px;top:50%;transform:translate(-50%,-50%);color:var(--red);opacity:.55;font-size:15px}
.syncbar{display:flex;flex-wrap:wrap;align-items:center;gap:22px 30px;margin-top:22px;border:1px solid var(--line-2);border-radius:14px;background:var(--white);padding:22px 24px}
.syncbar p{margin:0;flex:1 1 340px;font-size:16px;line-height:1.6;font-weight:600;color:var(--ink)}
.syncbar .btn{flex:0 0 auto}

/* ---------- the structured request ------------------------------------------ */
.req{background:var(--paper)}
.reqgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(38px,5vw,76px);align-items:center}
.reqcard{border:1px solid var(--line-2);border-radius:16px;background:var(--paper);overflow:hidden}
.rc-top{display:flex;align-items:center;gap:14px;padding:15px 22px;border-bottom:1px solid var(--line);background:var(--white)}
.rc-top span{font:600 11px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--red)}
.rc-top em{margin-left:auto;font-style:normal;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red);opacity:.72}
.rc-headline{padding:24px 22px 20px;border-bottom:1px solid var(--line)}
.rc-headline small{display:block;font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red);opacity:.75;margin-bottom:10px}
.rc-headline strong{font-family:var(--display);font-weight:800;font-size:clamp(24px,2.4vw,32px);letter-spacing:-.022em;color:var(--red);line-height:1.1}
.rc-row{display:flex;align-items:baseline;gap:18px;padding:14px 22px;border-bottom:1px solid var(--line)}
.rc-row span{flex:0 0 40%;font-size:14px;color:var(--ink)}
.rc-row b{min-width:0;font-size:15px;font-weight:700;color:var(--red)}
.rc-row.hot{background:var(--red)}
.rc-row.hot span{color:rgba(255,255,255,.78)}
.rc-row.hot b{color:#fff}
.rc-foot{margin:0;padding:16px 22px;font-size:13.5px;line-height:1.55;background:var(--white)}

/* Static reading order when scripting is disabled or the behaviour file fails. */
html:not(.js) .rackwrap,html:not(.js) .nightwrap,html:not(.js) .stmtwrap,html:not(.js) .pinwrap,html:not(.js) .devwrap{height:auto}
html:not(.js) .rackpin,html:not(.js) .nightpin,html:not(.js) .stmtpin,html:not(.js) .pin,html:not(.js) .devpin{position:static;height:auto;overflow:visible;padding:88px 0}
html:not(.js) .rack-index,html:not(.js) .pin-mark,html:not(.js) .pin-hint,html:not(.js) .burger{display:none}
html:not(.js) .rack-body{grid-template-columns:1fr}
html:not(.js) .rack-stage{display:block}
html:not(.js) .mech{grid-area:auto;margin-bottom:36px}
html:not(.js) .night-view{overflow:visible}
html:not(.js) .night-track{flex-direction:column;padding-inline:var(--gutter)}
html:not(.js) .ncard{flex-basis:auto;min-height:0}
html:not(.js) .pin-copy{position:static;margin-bottom:32px}
@media(max-width:920px){html:not(.js) .mnav{display:block;max-height:none}html:not(.js) .head{position:relative}}

/* ---------- the common question, inside human control ----------------------- */
.qcard{border:1px solid rgba(128,29,72,.34);border-radius:14px;padding:24px;background:var(--white);margin-top:16px}
.qcard .eyebrow{margin-bottom:14px}
.qcard p:last-child{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(17px,1.5vw,21px);line-height:1.34;letter-spacing:-.015em;color:var(--red);text-wrap:pretty}
.qcard b{font-weight:800}

@media (max-width:1120px){
  .syncrow{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .syncrow > .syncard + .syncard::before{display:none}
}
@media (max-width:920px){
  .reqgrid{grid-template-columns:1fr;gap:36px}
}
@media (max-width:640px){
  .syncrow{grid-template-columns:1fr}
  .syncbar{padding:20px}
  .syncbar .btn{width:100%}
  .rc-row{flex-direction:column;gap:5px}
  .rc-row span{flex:none}
}

/* ── SOON TAG ───────────────────────────────────────────────────────────────
   Call Recovery and Appointment Automation are the two products a clinic can
   buy today. Inside the product family grid the other four carry this tag, so
   the roadmap is readable without touching the footer or the navigation. */
.family a .soon-tag{
  grid-column:3;justify-self:end;display:inline-block;margin-left:0;padding:3px 7px;border-radius:5px;
  border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;
  font:600 11px/1.25 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  vertical-align:middle;white-space:nowrap
}