/* Gathermed design system. Channel colors carry clinical meaning:
   ecg green = physiologic (RPM), resp amber = therapeutic (RTM),
   spo2 blue = infrastructure, alarm red = escalation only. */
:root{
  /* Muted tones both carry small text — .small, .tiny, the 10.5px footer labels
     — so both are held to AA normal-text contrast, 4.5:1, not the 3:1 large-text
     allowance. --faint was 2.49:1 on --ground and failed outright. Darkening it
     alone would have landed it on top of the old --slate and flattened the two
     into one tone, so the whole muted pair steps down together and the tonal
     gap between them survives. Measured on --ground, the darker of the two
     light surfaces: --faint 4.51:1, --slate 6.77:1. */
  --ground:#E9ECEA; --paper:#F5F7F5; --ink:#131A18; --slate:#46534E; --faint:#5F6E68;
  --rule:rgba(19,26,24,.16); --rule-soft:rgba(19,26,24,.08);
  --ecg:#1B6E45; --resp:#9A6410; --spo2:#175F92; --alarm:#9E2E1C;
  --ecg-wash:rgba(27,110,69,.09); --resp-wash:rgba(154,100,16,.10);
  --spo2-wash:rgba(23,95,146,.09); --alarm-wash:rgba(158,46,28,.09);
  --f-display:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-edit:"Newsreader",ui-serif,Georgia,serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(20px,4vw,48px); --maxw:1180px;
  /* Corner radius scale. One place to tune the whole site's softness — every
     rounded block references these, none hardcodes a value.
       lg  outer panels: the grid, the calculator, the passport, the fork
       md  things inside a panel, and callouts
       sm  controls: buttons, inputs, chips, badges
     Data cells stay square on purpose. A 26px-tall transmission cell with
     rounded corners stops reading as an instrument and starts reading as a
     decoration, and the grid is the strongest thing on the site. */
  --r-lg:14px; --r-md:10px; --r-sm:6px; --r-pill:999px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--f-body);
  font-size:17px;line-height:1.55;font-weight:400;
  font-feature-settings:"ss01","cv05";-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--spo2);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* ---- utility type ---- */
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:500;color:var(--slate)}
.edit{font-family:var(--f-edit);font-weight:400}
.lead{font-size:clamp(19px,2vw,22px);line-height:1.5;color:#26302D;max-width:62ch}
.small{font-size:14.5px;line-height:1.5;color:var(--slate)}
.tiny{font-size:12.5px;line-height:1.5;color:var(--faint)}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;letter-spacing:-.022em;margin:0;
  line-height:1.08;text-wrap:balance}
h1{font-size:clamp(38px,6.2vw,68px)}
h2{font-size:clamp(27px,3.6vw,40px)}
h3{font-size:clamp(19px,2.1vw,23px);letter-spacing:-.012em;line-height:1.22}
h4{font-size:16px;letter-spacing:-.005em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

/* ---- eyebrow: encodes channel, not decoration ---- */
.eyebrow{display:flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--slate);margin-bottom:14px}
.eyebrow::before{content:"";width:22px;height:3px;background:var(--ink);flex:none}
.eyebrow.is-ecg::before{background:var(--ecg)}
.eyebrow.is-resp::before{background:var(--resp)}
.eyebrow.is-spo2::before{background:var(--spo2)}
.eyebrow.is-alarm::before{background:var(--alarm)}

/* ---- top bar ---- */
.bar{position:sticky;top:0;z-index:40;background:rgba(233,236,234,.92);
  backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--rule)}
.bar-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);height:56px;
  display:flex;align-items:center;gap:26px}
.logo{font-family:var(--f-mono);font-size:14px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap}
.logo b{color:var(--ecg);font-weight:600}
.bar-nav{display:flex;gap:22px;margin-left:auto;align-items:center}
.bar-nav a{font-size:14.5px;color:#2A3431;padding:4px 0;border-bottom:1.5px solid transparent}
.bar-nav a:hover{border-bottom-color:var(--ink)}
.bar-nav a.cta{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--ink);border-bottom-width:1px;padding:7px 13px;background:var(--ink);color:var(--paper)}
.bar-nav a.cta:hover{background:transparent;color:var(--ink)}
.bar-burger{display:none;margin-left:auto;font-family:var(--f-mono);font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;background:none;border:1px solid var(--rule);
  padding:7px 11px;cursor:pointer;color:var(--ink)}
@media (max-width:860px){
  .bar-nav{display:none;position:absolute;top:56px;left:0;right:0;background:var(--ground);
    border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 18px}
  .bar-nav.open{display:flex}
  .bar-nav a{padding:11px 0;border-bottom:1px solid var(--rule-soft)}
  .bar-nav a.cta{margin-top:12px;text-align:center;padding:11px}
  .bar-burger{display:block}
}

/* ---- sections ---- */
.sec{padding:clamp(52px,7vw,96px) 0;border-top:1px solid var(--rule)}
.sec.flush{border-top:none}
.sec.tint{background:var(--paper)}
.sec-head{max-width:70ch;margin-bottom:clamp(28px,4vw,44px)}
.sec-head p{margin-top:14px}

/* ---- hero: chart-paper column layout ---- */
.hero{padding:clamp(40px,6vw,74px) 0 clamp(44px,6vw,80px)}
.hero-grid{display:grid;grid-template-columns:132px minmax(0,1fr);gap:clamp(20px,4vw,44px)}
/* In the split hero the rail competes with the headline for a much narrower
   column, so it gives up width and gap it does not need. */
.hero-copy .hero-grid{grid-template-columns:126px minmax(0,1fr);gap:clamp(18px,2vw,30px)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-rail{display:none}}
.hero-rail{border-right:1px solid var(--rule);padding-right:18px}
.rail-item{padding:14px 0;border-bottom:1px solid var(--rule-soft)}
.rail-item:first-child{padding-top:0}
.rail-k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);display:block;margin-bottom:3px}
.rail-v{font-family:var(--f-mono);font-size:13px;font-weight:500;letter-spacing:.02em}
.rail-v.ecg{color:var(--ecg)}.rail-v.resp{color:var(--resp)}.rail-v.spo2{color:var(--spo2)}
.hero h1{margin-bottom:20px}
.hero h1 em{font-family:var(--f-edit);font-style:italic;font-weight:400;letter-spacing:-.01em}

/* ---- signature: 30-day transmission grid ---- */
.tg{border:1px solid var(--ink);background:var(--paper);padding:0;margin:clamp(26px,4vw,38px) 0;
  border-radius:var(--r-lg);overflow:hidden}
.tg-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:13px 16px;border-bottom:1px solid var(--rule)}
.tg-title{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600}
.tg-hint{font-family:var(--f-mono);font-size:11px;color:var(--faint);margin-left:auto}
.tg-body{padding:18px 16px}
.tg-cells{display:grid;grid-template-columns:repeat(30,1fr);gap:3px}
@media (max-width:700px){.tg-cells{grid-template-columns:repeat(15,1fr)}
  .tg-axis .tg-mid{display:none}}
.tg-c{aspect-ratio:1;border:1px solid var(--rule);background:transparent;padding:0;cursor:default;
  transition:background .12s ease,border-color .12s ease}
.tg-c[data-on="1"]{background:var(--ecg);border-color:var(--ecg)}
.tg.is-resp .tg-c[data-on="1"]{background:var(--resp);border-color:var(--resp)}
.tg.is-live .tg-c{cursor:pointer}
.tg.is-live .tg-c:hover{border-color:var(--ink)}
.tg-axis{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;
  color:var(--faint);margin-top:7px;letter-spacing:.05em}
.tg-out{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rule)}
.tg-o{flex:1 1 150px;padding:14px 16px;border-right:1px solid var(--rule)}
.tg-o:last-child{border-right:none}
.tg-o-k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);display:block;margin-bottom:5px}
.tg-o-v{font-family:var(--f-mono);font-size:clamp(19px,2.4vw,26px);font-weight:600;letter-spacing:-.01em}
.tg-o-v.ecg{color:var(--ecg)}.tg-o-v.resp{color:var(--resp)}.tg-o-v.alarm{color:var(--alarm)}
.tg-o-sub{font-size:12.5px;color:var(--slate);margin-top:4px;display:block;line-height:1.4}

/* ---- fork: the two audiences ---- */
.fork{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--ink);margin-top:8px;
  border-radius:var(--r-lg);overflow:hidden}
@media (max-width:760px){.fork{grid-template-columns:1fr}}
.fork-a{padding:clamp(20px,3vw,28px);border-right:1px solid var(--ink);display:flex;flex-direction:column;
  background:var(--paper);transition:background .15s ease}
.fork-a:last-child{border-right:none}
@media (max-width:760px){.fork-a{border-right:none;border-bottom:1px solid var(--ink)}
  .fork-a:last-child{border-bottom:none}}
.fork-a:hover{background:#fff}
.fork-a h3{margin-bottom:8px}
.fork-a .small{flex:1;margin-bottom:18px}
.fork-go{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;display:inline-flex;align-items:center;gap:8px}
.fork-go::after{content:"→";transition:transform .15s ease}
.fork-a:hover .fork-go::after{transform:translateX(4px)}
.fork-a.is-clinic .fork-go{color:var(--ecg)}
.fork-a.is-infra .fork-go{color:var(--spo2)}

/* ---- buttons ---- */
.btn{display:inline-block;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:500;padding:13px 20px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);cursor:pointer;transition:background .15s,color .15s;
  border-radius:var(--r-sm)}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* ---- cards / lists ---- */
.cards{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  border-radius:var(--r-lg);overflow:hidden}
.cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.cards.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cards.c2,.cards.c3{grid-template-columns:1fr}}
.card{background:var(--paper);padding:clamp(18px,2.4vw,26px)}
.card h3{margin-bottom:9px}
.card h4{margin-bottom:7px}
.card-n{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;color:var(--faint);
  display:block;margin-bottom:10px}

/* ---- condition index ---- */
.cx{border-top:1px solid var(--ink)}
.cx-row{display:grid;grid-template-columns:minmax(0,2.1fr) 96px minmax(0,1.5fr) 128px;
  gap:18px;align-items:baseline;padding:17px 0;border-bottom:1px solid var(--rule);
  transition:background .12s ease}
.cx-row:hover{background:var(--paper)}
@media (max-width:820px){.cx-row{grid-template-columns:1fr auto;gap:6px 14px}
  .cx-spec{grid-column:1/-1}.cx-codes{grid-column:1/-1}}
.cx-name{font-family:var(--f-display);font-size:19px;font-weight:600;letter-spacing:-.015em}
.cx-name span{display:block;font-family:var(--f-body);font-size:13.5px;font-weight:400;
  color:var(--slate);letter-spacing:0;margin-top:3px;line-height:1.4}
.cx-track{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;font-weight:600}
.cx-track.ecg{color:var(--ecg)}.cx-track.resp{color:var(--resp)}
.cx-spec{font-size:13.5px;color:var(--slate)}
.cx-codes{font-family:var(--f-mono);font-size:11.5px;color:var(--faint);letter-spacing:.03em}

/* ---- data table ---- */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th{text-align:left;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);font-weight:500;padding:0 12px 9px 0;
  border-bottom:1px solid var(--ink)}
.tbl td{padding:12px 12px 12px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.tbl td:last-child,.tbl th:last-child{padding-right:0}
.tbl .c-code{font-family:var(--f-mono);font-weight:600;font-size:13.5px;white-space:nowrap}
.tbl .c-rate{font-family:var(--f-mono);white-space:nowrap}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-md)}
.new26{display:inline-block;border-radius:var(--r-sm);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;background:var(--spo2);color:#fff;padding:2px 5px;margin-left:7px;
  vertical-align:1px;font-weight:500}

/* ---- stream / threshold rows ---- */
.rows{border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.6fr);gap:22px;
  padding:18px 0;border-bottom:1px solid var(--rule)}
@media (max-width:820px){.row{grid-template-columns:1fr;gap:6px}}
.row-a{font-family:var(--f-display);font-weight:600;font-size:16.5px;letter-spacing:-.01em}
.row-b{font-family:var(--f-mono);font-size:12.5px;color:var(--slate);line-height:1.5}
.row-c{font-size:14.5px;color:#2C3633;line-height:1.5}
.thr{display:grid;grid-template-columns:22px minmax(0,1.4fr) minmax(0,1fr);gap:16px;
  padding:15px 0;border-bottom:1px solid var(--rule);align-items:start}
@media (max-width:700px){.thr{grid-template-columns:22px 1fr;gap:10px}.thr-do{grid-column:2}}
.thr-dot{width:9px;height:9px;margin-top:6px;background:var(--slate)}
.thr.is-alert .thr-dot{background:var(--alarm)}
.thr.is-watch .thr-dot{background:var(--resp)}
.thr-if{font-family:var(--f-mono);font-size:13px;line-height:1.5}
.thr-do{font-size:14.5px;color:#2C3633}
.thr-do b{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  display:block;color:var(--faint);font-weight:500;margin-bottom:2px}

/* ---- steps: real sequence, so numbering is earned ---- */
.steps{counter-reset:s;border-top:1px solid var(--ink)}
.step{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:16px;padding:15px 0;
  border-bottom:1px solid var(--rule)}
.step::before{content:counter(s,decimal-leading-zero);font-family:var(--f-mono);font-size:12px;
  color:var(--faint);letter-spacing:.06em;padding-top:3px}

/* ---- callouts ---- */
.note{border-left:3px solid var(--ink);padding:16px 0 16px 18px;margin:26px 0;background:transparent;
  border-radius:0 var(--r-md) var(--r-md) 0}
.note.is-alarm{border-left-color:var(--alarm);background:var(--alarm-wash);padding-right:18px;
  border-radius:var(--r-md)}
.note.is-spo2{border-left-color:var(--spo2);background:var(--spo2-wash);padding-right:18px;
  border-radius:var(--r-md)}
.note.is-resp{border-left-color:var(--resp);background:var(--resp-wash);padding-right:18px;
  border-radius:var(--r-md)}
.note h4{margin-bottom:6px}
.note .small{color:#2C3633}

/* ---- faq ---- */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:17px 0;font-family:var(--f-display);font-weight:600;
  font-size:17px;letter-spacing:-.01em;display:flex;gap:14px;align-items:baseline;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-family:var(--f-mono);font-weight:400;
  color:var(--faint);flex:none}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 18px;max-width:75ch;color:#2C3633;font-size:15.5px}

/* ---- calculator ---- */
.calc{border:1px solid var(--ink);background:var(--paper);
  border-radius:var(--r-lg);overflow:hidden}
.calc-grid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr)}
@media (max-width:820px){.calc-grid{grid-template-columns:1fr}}
.calc-in{padding:clamp(18px,2.4vw,26px);border-right:1px solid var(--rule)}
@media (max-width:820px){.calc-in{border-right:none;border-bottom:1px solid var(--rule)}}
.calc-out{padding:clamp(18px,2.4vw,26px)}
.fld{margin-bottom:16px}
.fld label{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.fld input{width:100%;font-family:var(--f-mono);font-size:15px;padding:9px 11px;
  border:1px solid var(--rule);background:#fff;color:var(--ink);border-radius:var(--r-sm)}
.fld .tiny{margin-top:4px}
.calc-total{border-top:1px solid var(--ink);margin-top:18px;padding-top:16px;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.calc-total .tg-o-v{font-size:clamp(24px,3.4vw,34px)}
#calcLines .tbl td{font-size:14px}

/* ---- device passport: one serial, one quarter, three patients ---- */
.dvc{border:1px solid var(--ink);background:var(--paper);margin:clamp(24px,3.6vw,36px) 0;
  border-radius:var(--r-lg);overflow:hidden}
.dvc-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:13px 16px;
  border-bottom:1px solid var(--rule)}
.dvc-title{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600}
.dvc-hint{font-family:var(--f-mono);font-size:11px;color:var(--faint);margin-left:auto}
.dvc-body{padding:18px 16px 14px}
.dvc-cells,.dvc-binds{display:grid;grid-template-columns:repeat(90,1fr);gap:1px}
.dvc-c{height:26px;background:var(--rule-soft)}
@media (max-width:700px){.dvc-c{height:18px}}
.dvc-c.on{background:var(--ecg)}
.dvc-c.rk{background:repeating-linear-gradient(135deg,var(--faint) 0 2px,transparent 2px 5px)}
.dvc-binds{margin-top:8px}
.dvc-b{grid-row:1;border-top:2px solid var(--ink);padding-top:6px;padding-right:6px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.07em;color:var(--slate);
  line-height:1.45;min-width:0;overflow:hidden}
.dvc-b b{display:block;color:var(--ink);font-weight:600;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap}
.dvc-b .ecg{color:var(--ecg);font-weight:600}
.dvc-b.is-rk{border-top-color:var(--faint);color:var(--faint)}
.dvc-b.is-rk b{color:var(--faint);font-weight:500}
@media (max-width:820px){.dvc-b{font-size:8.5px}.dvc-b b{font-size:9px}
  .dvc-b.is-rk b{display:none}}
.dvc-axis{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;
  color:var(--faint);margin-top:10px;letter-spacing:.05em}

/* ---- intake walkthrough (/start/) ---- */
.iq{display:grid;grid-template-columns:26px minmax(0,1.3fr) minmax(0,1fr);gap:16px;
  padding:15px 0;border-bottom:1px solid var(--rule);align-items:start}
@media (max-width:760px){.iq{grid-template-columns:26px 1fr}.iq-why{grid-column:2}}
.iq input[type=checkbox]{width:17px;height:17px;margin:3px 0 0;accent-color:var(--ecg);border-radius:4px;
  cursor:pointer;flex:none}
.iq-q{font-family:var(--f-display);font-weight:600;font-size:15.5px;letter-spacing:-.01em;
  line-height:1.35;cursor:pointer;display:block}
.iq-why{font-size:13.5px;color:var(--slate);line-height:1.5}
.iq-why b{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);font-weight:500;display:block;margin-bottom:2px}
.intake-bar{position:sticky;top:56px;z-index:30;background:var(--paper);
  border-bottom:1px solid var(--rule);padding:10px 0}
.intake-bar-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.intake-bar .mono{color:var(--ink)}
.intake-meter{flex:1;min-width:120px;height:4px;background:var(--rule-soft);position:relative;
  border-radius:var(--r-pill);overflow:hidden}
.intake-meter i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ecg);
  transition:width .2s ease}
.intake-print{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  background:none;border:1px solid var(--rule);padding:6px 11px;cursor:pointer;color:var(--ink);
  border-radius:var(--r-sm)}
.intake-print:hover{border-color:var(--ink)}
.intake-form .fld select,.intake-form .fld textarea{width:100%;font-family:var(--f-mono);
  font-size:14px;padding:9px 11px;border:1px solid var(--rule);background:#fff;color:var(--ink);
  border-radius:var(--r-sm)}
.intake-form .fld textarea{font-family:var(--f-body);min-height:74px;resize:vertical}
.intake-status{font-family:var(--f-mono);font-size:12.5px;margin-top:14px;display:none}
.intake-status.is-ok{display:block;color:var(--ecg)}
.intake-status.is-err{display:block;color:var(--alarm)}
.iphase{margin-bottom:clamp(34px,5vw,54px)}
.iphase-k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);display:block;margin-bottom:6px}
.iphase h3{margin-bottom:6px}
.iphase .small{max-width:70ch}
@media print{
  .bar,.foot,.btn-row,.void-bg,.hud,.cross-flash,.intake-bar{display:none!important}
  .void{background:#fff!important;color:#000!important}
  .void .lead{color:#222}
  .horizon{display:none}
  body{background:#fff}
}

/* ---- footer ---- */
.foot{border-top:1px solid var(--ink);padding:clamp(38px,5vw,58px) 0 30px;background:var(--paper)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));
  gap:28px;margin-bottom:36px}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot h2{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);font-weight:500;margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:8px;font-size:14.5px}
.foot li a:hover{text-decoration:underline;text-underline-offset:3px}
.legal{border-top:1px solid var(--rule);padding-top:20px;max-width:88ch}

/* ---- breadcrumb ---- */
.crumb{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--faint);
  padding:20px 0 0}
.crumb a:hover{color:var(--ink)}
.crumb span{margin:0 7px}

/* ================== deep-space art layer ==============================
   The site is a viewport onto the frontier. Chrome (bar, footer) and
   thresholds (hero bands) are void. Clinical content stays on paper,
   because dense code tables and threshold rows are what buyers actually
   read and dark-on-dark costs us there. You cross an event horizon to
   get from the claim to the evidence.

   Channel colors keep their clinical meaning — they are brightened for
   dark ground, not replaced. Green is still physiologic, amber still
   therapeutic, blue still infrastructure, red still escalation. */
:root{
  --void:#060A11; --void-2:#0A1018; --void-3:#111A26;
  /* Same rule on the dark surfaces. --void-faint was 4.24:1 on --void, close
     enough to pass a glance and not close enough to pass AA; it lands on .tiny
     and .mono, which are the smallest text on the site. Now 4.69:1.
     --void-slate is already 8.18:1 and does not move. */
  --void-ink:#EDF2F9; --void-slate:#97A8BE; --void-faint:#6D7C95;
  --void-rule:rgba(196,214,240,.18); --void-rule-soft:rgba(196,214,240,.085);
  --star:#EAF0F8;
  --ecg-lit:#43D98F; --resp-lit:#F2B44E; --spo2-lit:#5CB7F2; --alarm-lit:#FF6E55;
  --halo:#FFC07A; --halo-hot:#FFF1DC;
  /* One lead-II beat — P wave, QRS complex, T wave, baseline — carried as a
     MASK rather than a background image, so the trace colour stays a CSS
     variable that the horizon-hot state can brighten. 560x48 with the baseline
     on the tile's centre line, which is what lets the trace sit exactly where
     the old 1px rule sat. */
  /* --hz-rate is one beat, so it is also the sweep speed: one tile per period.
     4.4s over a 560px tile is ~127px/s, a slow drift rather than a monitor
     at bedside speed. Lower it to speed the trace up. */
  /* Trace colour matches the ECG on care.gathermed.com's login — a bright
     spring green, sampled at #00F088. Deliberately not --halo amber any
     more: the crossing should read as the same instrument as the app.
     --ecg-lit (#43D98F) is the design system's near neighbour if you want
     the site's own green instead. */
  --hz-trace:#00F088; --hz-trace-hot:#B6FFDC;
  --hz-tile:2600px; --hz-h:48px; --hz-rate:9s;
  /* The tile actually used. Held wider than the viewport so the repeat can
     never place a second beat on screen — on an ultrawide the vw term wins
     and the beat scales with it rather than gaining a twin. */
  --hz-span:max(var(--hz-tile),104vw);
  --hz-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2600' height='48'%3E%3Cpath d='M0 24H34Q46 14 58 24H67L71 30L77 4L83 40L88 24H107Q124 10 141 24H2600' fill='none' stroke='white' stroke-width='1.40' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* The same curve, closed to the tile's bottom edge and filled. This is what
     makes the waveform the actual boundary between the two sections rather
     than a line drawn across a straight one: the light half is painted with
     this mask, so it reaches up around every R spike, and the dark section
     shows through above it, so it reaches down into every S trough. */
  --hz-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2600' height='48'%3E%3Cpath d='M0 24H34Q46 14 58 24H67L71 30L77 4L83 40L88 24H107Q124 10 141 24H2600V48H0Z' fill='white'/%3E%3C/svg%3E");
}

/* ---- void bands ---- */
/* No overflow:hidden here: position:sticky (the orbit pin, the hero telemetry
   line) dies inside an overflow-hidden ancestor. All art clipping is done by
   .void-bg itself, which is the only thing that ever bleeds. */
.void{position:relative;background:var(--void);color:var(--void-ink);border-top:none}
.void-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.void-in{position:relative;z-index:2}
.void-hero{padding-bottom:0;padding-top:clamp(40px,6vw,72px)}
.void .crumb{color:var(--void-faint);padding-bottom:6px}
.void .crumb a:hover{color:var(--star)}

/* photoreal backdrop: homepage hero only. The scrim protects the text column
   on the left and blends the top edge under the bar; the horizon crossing
   below handles the bottom. Interior pages keep the lighter SVG art. */
.vs-pic{display:contents}

/* ---- the hero frame -------------------------------------------------------
   Type owns the left, the sphere owns the right, and the divide is a real
   edge that neither crosses. The previous composition had no frame at all:
   the photo was positioned against the viewport while the type sat in a
   centred 1180px column, so every extra pixel of window width walked the
   accretion disk further into the headline.

   The art column is a percentage of the frame with hard stops, so the split
   holds its proportions from a laptop to an ultrawide. */
.hero-split{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,33vw,720px);
  align-items:center;height:100%}
/* Align the copy with the site's centred content column rather than the raw
   left edge, so the hero's first character sits on the same axis as every
   section below it. */
.hero-copy{padding-left:max(var(--gut),calc((100vw - var(--maxw)) / 2));
  padding-right:clamp(24px,3vw,56px);min-width:0}
.hero-art{position:relative;height:100%;overflow:hidden}
.hero-art .vs-photo{position:absolute;inset:0;width:100%;height:100%;
  /* 50% is not a guess: the source is portrait, so cover crops width only, and
     the convergence point is centred in the frame. The 88% this replaced was
     compensating for a landscape image whose subject sat far right. */
  object-fit:cover;object-position:50% 50%;
  /* No base scale any more. 1.22 existed to enlarge a subject that cover had
     cropped down to a speck; a portrait source fills the panel at 1:1, and
     starting at 1:1 keeps the whole composition and every pixel sharp. */
  transform-origin:50% 42%;will-change:transform,opacity}
/* A short bleed into the void so the crop is a frame edge and not a torn
   rectangle, and the luminous rule sits on the join. */
.hero-art::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--void) 0,rgba(6,10,17,.55) 12%,rgba(6,10,17,0) 34%)}
/* The edge itself: one hairline in the trace colour, brightest where the
   sphere is, falling off top and bottom. The only ornament in the section. */
.hero-edge{position:absolute;left:0;top:0;bottom:0;width:1px;z-index:2;
  background:linear-gradient(180deg,transparent,rgba(0,240,136,.30) 14%,
    rgba(67,217,143,.92) 50%,rgba(0,240,136,.30) 86%,transparent);
  box-shadow:0 0 10px rgba(0,240,136,.55),0 0 28px rgba(0,240,136,.20)}

@media (max-width:900px){
  /* No room to sit side by side: the sphere becomes a band above the copy. */
  .hero-split{grid-template-columns:1fr;align-items:start;height:auto;
    gap:clamp(22px,5vw,38px)}
  .hero-art{order:-1;height:min(52vw,280px)}
  .hero-art::before{background:linear-gradient(180deg,rgba(6,10,17,0) 40%,var(--void))}
  .hero-edge{left:0;right:0;top:auto;bottom:0;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,rgba(0,240,136,.75),transparent)}
  .hero-copy{padding-left:var(--gut);padding-right:var(--gut)}
  /* .hero-copy .hero-grid outranks the generic .hero-grid{1fr} mobile rule, so
     without this it kept reserving 126px for a rail that display:none has
     already removed — which left the headline about 240px to wrap into. */
  .hero-copy .hero-grid{grid-template-columns:1fr}
}

.hud-state{position:sticky;bottom:18px;z-index:3;display:inline-flex;align-items:center;
  gap:9px;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--void-faint);margin-top:26px}
.hud-state b{width:6px;height:6px;border-radius:50%;background:var(--ecg-lit);flex:none;
  box-shadow:0 0 8px rgba(67,217,143,.8)}
@media (max-width:700px){.hud-state{display:none}}
@media (prefers-reduced-motion:no-preference){
  .hud-state b{animation:hudPulse 1.5s ease-in-out infinite}
  @keyframes hudPulse{0%,100%{opacity:1}50%{opacity:.25}}
}
.horizon-line{transition:filter .4s ease,opacity .4s ease}
/* Crossing the horizon drives the trace hot: the glow opens up and the whole
   waveform goes to the hot cream instead of amber-to-cream. */
.horizon-hot .horizon-line{filter:drop-shadow(0 0 8px rgba(0,240,136,.85))
  drop-shadow(0 0 26px rgba(0,240,136,.4))}
.horizon-hot .horizon-line::before{background:var(--hz-trace-hot)}
.horizon-hot .horizon-tag{color:#D6FFEC}
.cross-flash{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent 36%,rgba(255,241,220,.92) 50%,
    rgba(255,192,122,.55) 55%,transparent 68%)}
@media (prefers-reduced-motion:no-preference){
  .crossed .cross-flash{animation:crossFlash .85s cubic-bezier(.2,.6,.3,1) both}
  @keyframes crossFlash{0%{opacity:0;transform:scaleY(.05)}16%{opacity:1}
    100%{opacity:0;transform:scaleY(1.7)}}
}
.vs-scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,var(--void) 0%,rgba(6,10,17,.45) 40%,rgba(6,10,17,0) 72%)}
@media (max-width:900px){.vs-photo{width:150vw;right:-42vw;top:0}
  .vs-scrim{background:linear-gradient(180deg,rgba(6,10,17,.35) 0%,rgba(6,10,17,.75) 60%,rgba(6,10,17,.9) 100%)}}

/* starfield. Baked deterministically at build time, so it is identical on
   every deploy and costs no script. */
.vs-stars{position:absolute;inset:0;width:100%;height:100%;display:block}
.vs-bright{filter:drop-shadow(0 0 3px rgba(255,255,255,.85))}
.vs-drift{animation:vsDrift 240s linear infinite}
@keyframes vsDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-2.5%,1.2%,0)}}

/* ---- the black hole: every signal falls into one backend ---- */
.bh{position:absolute;pointer-events:none;display:block}
/* Positioned to clear the headline entirely rather than sit behind it: the
   disk arc crosses above the h1 and the sphere's lower rim stops short of it.
   The mask fades the object out toward the text column so a bright accretion
   edge can never land on a word. */
.bh-home{right:-20%;top:-30%;width:min(860px,78vw);opacity:.95;
  -webkit-mask-image:linear-gradient(102deg,transparent 4%,rgba(0,0,0,.3) 26%,#000 56%);
  mask-image:linear-gradient(102deg,transparent 4%,rgba(0,0,0,.3) 26%,#000 56%)}
@media (max-width:900px){.bh-home{right:-40%;top:-12%;width:135vw;opacity:.62}}
.bh-bloom{animation:bhBreathe 16s ease-in-out infinite}
@keyframes bhBreathe{0%,100%{opacity:.5}50%{opacity:.72}}
.bh-ring{animation:bhRing 11s ease-in-out infinite}
@keyframes bhRing{0%,100%{opacity:.72}50%{opacity:1}}
/* infall streaks, colored by clinical channel — the four signal families
   converging on a single horizon is the whole architecture argument. */
.bh-fall{stroke-linecap:round;fill:none;stroke-dasharray:14 210;opacity:.85;
  animation:bhFall 7s linear infinite}
.bh-fall:nth-of-type(2){animation-delay:1.15s}
.bh-fall:nth-of-type(3){animation-delay:2.4s}
.bh-fall:nth-of-type(4){animation-delay:3.7s}
.bh-fall:nth-of-type(5){animation-delay:5.1s}
@keyframes bhFall{from{stroke-dashoffset:224}to{stroke-dashoffset:0}}

/* ---- the orbit: pinned scroll sequence. The event-horizon line drops from
   the dark, bends around the sphere, and as it wraps, four feature stations
   light in turn — adherence, devices, community, professional services.
   Scroll progress drives the line draw (dashoffset) and the active station.
   Without JS or under reduced motion, everything renders lit and static. */
/* The landing infall, pinned on the same pattern as .orbit below.

   The scroll range used to be whatever the copy happened to make the section.
   Measured on a 1440x757 window that was 541px — the entire infall,
   all three telemetry states and the crossing fired in the first 40% of the
   section and then sat frozen for the remaining 757px. Worse, `span` is
   height - innerHeight, so on any viewport taller than the section it clamped
   to 1 and the whole animation completed in a single pixel of scroll. That is
   the "broken" everyone was seeing, and no amount of easing would have fixed
   it: the range was a side effect of how long the lead paragraph was.

   A declared height makes it a design decision. 260vh gives 160vh of travel
   after the 100vh pin, identical on every screen. */
.hero-fall{position:relative;height:260vh;padding:0;border-top:none}
/* No overflow:hidden, unlike .orbit-pin — .void-bg already clips its own
   artwork, and clipping here would guillotine the fork on a short laptop
   instead of letting it overhang harmlessly. */
.hero-pin{position:sticky;top:56px;height:calc(100vh - 56px);display:block}
.hero-stage{width:100%}
/* The column now sets the measure, so the ch caps are gone — they were a
   workaround for type and art sharing one unbounded column.

   The italic becomes a block so text-wrap:balance can balance it on its own.
   Inline after a <br> it was balanced together with the roman clause above it
   and settled on "One backend reads all / of them.", leaving two words hanging.
   Balanced alone it breaks evenly. */
.hero-stage h1{font-size:clamp(33px,3.5vw,56px)}
.hero-stage h1 em{display:block}
.hero-stage .lead{max-width:48ch}
@media (max-width:900px){.hero-stage .lead{max-width:none}}
/* Telemetry rides in flow under the fork now. It was sticky to the bottom of a
   section that no longer scrolls independently of its content. */
.hero-pin .hud-state{position:static;margin-top:clamp(18px,2.4vw,30px)}
/* Below either threshold there is not a viewport to pin into: the fork stacks,
   the rail is gone, and the content is taller than the frame. Fall back to a
   normal section — the JS drops the transforms to match. */
@media (max-width:900px),(max-height:700px){
  .hero-fall{height:auto}
  .hero-pin{position:static;height:auto;
    padding:clamp(40px,6vw,72px) 0 clamp(44px,6vw,80px)}
}
.orbit{position:relative;height:440vh}
.orbit-pin{position:sticky;top:56px;height:calc(100vh - 56px);overflow:hidden}
/* The crossing band belongs at the END of the scroll sequence, not one viewport
   into it. In normal flow it sits directly after the pin — about 100vh down a
   440vh section — so it rides up across the pinned headline and panels and
   washes them out for the next three viewports of scroll. Pinning it to the
   section's bottom edge puts the crossing where the copy says it is: after the
   line has finished wrapping the sphere. */
.orbit > .horizon{position:absolute;bottom:0;left:0;right:0;margin-top:0}
.orbit-grid{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;
  padding:clamp(20px,3vw,44px) var(--gut);height:100%;
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(16px,3vw,40px);align-items:center}
.orbit-art{width:100%;height:auto;max-height:calc(100vh - 150px)}
.orbit-line{fill:none;stroke-width:4.5;
  filter:drop-shadow(0 0 7px rgba(255,192,122,.65))}
.orbit-node{opacity:.22;transition:opacity .35s ease}
.orbit-node.on{opacity:1}
.orbit-node text{font-family:var(--f-mono);font-size:21px;letter-spacing:.14em;
  text-transform:uppercase;fill:var(--void-slate)}
.orbit-node.on text{fill:var(--void-ink)}
.orbit-copy{position:relative;min-height:280px}
.orbit-panel{position:absolute;top:0;left:0;right:0;opacity:0;transform:translateY(16px);
  transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.orbit-panel.on{opacity:1;transform:none;pointer-events:auto}
.orbit-panel h3{font-size:clamp(24px,3vw,34px);margin-bottom:12px}
.orbit-panel .small{max-width:44ch}
@media (max-width:900px){
  .orbit{height:420vh}
  .orbit-grid{grid-template-columns:1fr;align-items:start;align-content:start;
    gap:6px;padding-top:16px}
  .orbit-art{max-height:52vh;order:-1}
  .orbit-copy{min-height:230px}
  .orbit-panel h3{font-size:21px}
}

/* limb: the horizon seen up close, for interior page heads. Same object,
   different distance — cheaper than repeating the full black hole 23 times. */
.bh-limb{right:-30%;top:-64%;width:min(880px,92vw);opacity:.82}
@media (max-width:900px){.bh-limb{right:-52%;top:-30%;width:120vw;opacity:.5}}

/* ---- EVA instrumentation: visor curve + HUD registration marks ---- */
.visor{position:absolute;left:50%;top:-46%;transform:translateX(-50%);
  width:190%;height:170%;border-radius:50%;pointer-events:none;
  border:1px solid rgba(196,214,240,.09);
  box-shadow:inset 0 40px 120px rgba(0,0,0,.62),inset 0 -20px 90px rgba(0,0,0,.4)}
.hud{position:absolute;inset:clamp(10px,1.6vw,20px);z-index:1;pointer-events:none}
.hud i{position:absolute;width:13px;height:13px;border:1px solid var(--void-rule)}
.hud i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.hud i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.hud i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.hud i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
/* tether: the line an EVA never lets go of. Used to connect a claim to its
   evidence, never as filler. */
.tether{display:flex;align-items:center;gap:10px;margin:clamp(22px,3.4vw,34px) 0}
.tether i{display:block;width:clamp(30px,6vw,64px);height:1px;flex:none;
  background:linear-gradient(90deg,var(--halo),rgba(255,192,122,0))}
.tether b{width:5px;height:5px;border-radius:50%;background:var(--halo);flex:none;
  box-shadow:0 0 8px rgba(255,192,122,.8)}
.tether span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--void-faint)}

/* ---- the crossing ---- */
/* A hard seam, not a fade. The gradient that used to live here was 78-122px
   tall and started transparent, so the void carried on well past the trace and
   read as black bleeding under the line. With no band, the dark section's own
   background stops at the seam and the next section's ground starts, with the
   ECG baseline centred exactly on it. */
/* The band is one beat tall and sits inside the void section, so the dark
   background covers all of it. On top of that dark, ::before paints the NEXT
   section's ground masked to everything below the curve. The result is that the
   two sections meet along the waveform: black fills down into the S troughs,
   light fills up around the R spikes, and the glowing stroke sits exactly on
   the join. --hz-to is the ground the seam hands off to. */
.horizon{--hz-to:var(--ground);position:relative;z-index:3;
  height:var(--hz-h);margin-top:clamp(26px,4.4vw,50px)}
.horizon.on-paper{--hz-to:var(--paper)}
/* The ground half of the seam: the next section's colour, masked to everything
   below the curve. One tile, sliding. */
.horizon::before{content:"";position:absolute;inset:0;background:var(--hz-to);
  -webkit-mask-image:var(--hz-fill);-webkit-mask-repeat:repeat-x;
  -webkit-mask-size:var(--hz-span) var(--hz-h);
  mask-image:var(--hz-fill);mask-repeat:repeat-x;
  mask-size:var(--hz-span) var(--hz-h);
  animation:hzDrift var(--hz-rate) linear infinite}
/* No trace: a plain hard seam. height:1px rather than 0 because a zero-height
   last child with no padding or border collapses its margin THROUGH the
   section, which drags the seam below the dark background entirely. */
.horizon.no-trace{height:1px}
.horizon.no-trace::before,.horizon.no-trace .horizon-line{display:none}
/* The crossing is ONE beat travelling a flat horizon, right to left.

   Two earlier attempts are worth recording, because both failed for reasons
   that are not obvious.

   First it was a 1000px tile, repeated. At any desktop width that repeat put
   two or three beats on screen moving in perfect lockstep, which reads as
   wallpaper scrolling rather than a signal.

   Then it was a bedside-monitor sweep: waveform held still, a blanking gap and
   a bright cursor travelling across it. That is genuinely how a monitor works,
   and it was wrong here. A monitor's trace is dense, so the gap always has
   something to blank. This trace is mostly flat baseline with one beat in it,
   so the gap was invisible for most of its crossing and then, on the one
   occasion it met the beat, deleted it. The effect was not a sweep. It was a
   beat that randomly vanished.

   So: nothing is ever hidden. --hz-span is held wider than the viewport, which
   is what guarantees the repeat never puts a second beat on screen, and the
   whole mask slides. One deflection travels an otherwise unbroken line, which
   is the only one of the three that actually reads as a wave moving.

   Also worth knowing before editing:
     - the waveform is the mask and the colour is the background, so one
       variable reflows the whole trace;
     - the glow is a filter on the PARENT, because a filter on a masked element
       is applied before the mask and would only halo a rectangle. */
.horizon-line{position:absolute;inset:0;filter:drop-shadow(0 0 3px rgba(0,240,136,.34))}
.horizon-line::before{content:"";position:absolute;inset:0;
  /* Flat, not a gradient. The old amber rule had a luminous centre; the app's
     trace is one saturated green end to end, and a pale midpoint is the most
     visible way this drifts away from it. --hz-trace-hot is kept for the
     horizon-hot crossing state only. */
  background:var(--hz-trace);
  -webkit-mask-image:var(--hz-wave);-webkit-mask-repeat:repeat-x;
  -webkit-mask-size:var(--hz-span) var(--hz-h);
  mask-image:var(--hz-wave);mask-repeat:repeat-x;
  mask-size:var(--hz-span) var(--hz-h);
  animation:hzDrift var(--hz-rate) linear infinite}
/* The mask slides, not the element. An overwide element translated by one tile
   is cheaper to composite, but it overflowed the band by a tile and put 280px
   of horizontal scroll on every page — and it cannot be clipped with
   overflow:hidden here, because that would also cut the trace's glow off dead
   at the band edge. Sliding the mask keeps both layers exactly in step (same
   property, same duration) and leaves the glow free to spill.

   Translating by exactly one span is what makes the loop seamless: the tile
   lands back on itself. Under prefers-reduced-motion the global animation reset
   freezes this at `from`, which is a complete static trace — the right
   fallback, and the reason nothing special is needed for it. */
@keyframes hzDrift{
  from{-webkit-mask-position:0 top;mask-position:0 top}
  to{-webkit-mask-position:calc(var(--hz-span) * -1) top;
     mask-position:calc(var(--hz-span) * -1) top}}
/* Narrower band and a shorter crossing; the tile is still wider than the
   viewport it has to beat, which here is at most 700px. */
@media (max-width:700px){.horizon{--hz-tile:900px;--hz-h:34px;
  --hz-rate:4.5s;--hz-wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='34'%3E%3Cpath d='M0 17H24.08Q32.58 9.92 41.08 17H47.46L50.29 21.25L54.54 2.83L58.79 28.33L62.33 17H75.79Q87.83 7.08 99.88 17H900' fill='none' stroke='white' stroke-width='0.99' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");--hz-fill:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='34'%3E%3Cpath d='M0 17H24.08Q32.58 9.92 41.08 17H47.46L50.29 21.25L54.54 2.83L58.79 28.33L62.33 17H75.79Q87.83 7.08 99.88 17H900V34H0Z' fill='white'/%3E%3C/svg%3E")}}
.horizon-tag{position:absolute;bottom:calc(var(--hz-h) + 6px);left:50%;transform:translateX(-50%);
  background:var(--void);padding:0 13px;font-family:var(--f-mono);font-size:9.5px;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(122,244,187,.9);white-space:nowrap}

/* ---- type and components on void ground ---- */
.void .lead{color:#C7D5E7}
.void .small{color:var(--void-slate)}
.void .tiny,.void .mono{color:var(--void-faint)}
.void .eyebrow{color:var(--void-slate)}
.void .eyebrow::before{background:var(--star)}
.void .eyebrow.is-ecg::before{background:var(--ecg-lit);box-shadow:0 0 9px rgba(67,217,143,.7)}
.void .eyebrow.is-resp::before{background:var(--resp-lit);box-shadow:0 0 9px rgba(242,180,78,.7)}
.void .eyebrow.is-spo2::before{background:var(--spo2-lit);box-shadow:0 0 9px rgba(92,183,242,.7)}
.void .eyebrow.is-alarm::before{background:var(--alarm-lit);box-shadow:0 0 9px rgba(255,110,85,.7)}
.void .hero-rail{border-right-color:var(--void-rule)}
.void .rail-item{border-bottom-color:var(--void-rule-soft)}
.void .rail-k{color:var(--void-faint)}
.void .rail-v{color:var(--void-ink)}
.void .rail-v.ecg{color:var(--ecg-lit)}
.void .rail-v.resp{color:var(--resp-lit)}
.void .rail-v.spo2{color:var(--spo2-lit)}
.void .btn{background:var(--star);color:var(--void);border-color:var(--star)}
.void .btn:hover{background:transparent;color:var(--star)}
.void .btn.ghost{background:transparent;color:var(--star)}
.void .btn.ghost:hover{background:var(--star);color:var(--void)}
.void .fork{border-color:var(--void-rule)}
.void .fork-a{background:rgba(190,214,245,.04);border-right-color:var(--void-rule)}
.void .fork-a:hover{background:rgba(190,214,245,.085)}
.void .fork-a.is-clinic .fork-go{color:var(--ecg-lit)}
.void .fork-a.is-infra .fork-go{color:var(--spo2-lit)}
@media (max-width:760px){.void .fork-a{border-bottom-color:var(--void-rule)}}
.void .note{border-left-color:var(--star)}
.void .cards{background:var(--void-rule-soft);border-color:var(--void-rule)}
.void .card{background:rgba(190,214,245,.04)}
.void .card-n{color:var(--void-faint)}

/* ---- transmission grid on void: telemetry, not decoration ---- */
.void .tg{border-color:var(--void-rule);background:rgba(190,214,245,.035)}
.void .tg-head,.void .tg-out,.void .tg-o{border-color:var(--void-rule)}
.void .tg-title{color:var(--void-ink)}
.void .tg-hint,.void .tg-o-k,.void .tg-axis{color:var(--void-faint)}
.void .tg-c{border-color:var(--void-rule-soft)}
.void .tg-c[data-on="1"]{background:var(--ecg-lit);border-color:var(--ecg-lit);
  box-shadow:0 0 10px rgba(67,217,143,.5)}
.void .tg.is-resp .tg-c[data-on="1"]{background:var(--resp-lit);border-color:var(--resp-lit);
  box-shadow:0 0 10px rgba(242,180,78,.45)}
.void .tg.is-live .tg-c:hover{border-color:var(--star)}
.void .tg-o-v{color:var(--void-ink)}
.void .tg-o-v.ecg{color:var(--ecg-lit)}
.void .tg-o-v.resp{color:var(--resp-lit)}
.void .tg-o-v.alarm{color:var(--alarm-lit)}
.void .tg-o-sub{color:var(--void-slate)}

/* ---- chrome: bar and footer are the capsule, always void ---- */
.bar{background:rgba(10,16,24,.88);border-bottom-color:var(--void-rule);color:var(--void-ink)}
.bar-nav a{color:#C4D3E5}
.bar-nav a:hover{border-bottom-color:var(--star)}
.bar-nav a.cta{background:var(--star);color:var(--void);border-color:var(--star)}
.bar-nav a.cta:hover{background:transparent;color:var(--star)}
.logo b{color:var(--ecg-lit)}
.bar-burger{color:var(--void-ink);border-color:var(--void-rule)}
@media (max-width:860px){
  .bar-nav{background:var(--void-2);border-bottom-color:var(--void-rule)}
  .bar-nav a{border-bottom-color:var(--void-rule-soft)}
}
.foot.void{background:var(--void);border-top:none}
.foot.void h2{color:var(--void-faint)}
.foot.void .legal{border-top-color:var(--void-rule)}
.foot.void li a:hover{color:var(--star)}

/* ---- motion ---- */
@media (prefers-reduced-motion:no-preference){
  .tg.is-anim .tg-c[data-on="1"]{animation:fill .34s ease both}
  @keyframes fill{from{background:transparent;border-color:var(--rule)}}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}