/* ---------------------------------------------------------------------------
   INDEX CLINIC — clinical leadership introduction.

   ONE STYLESHEET FOR THE WHOLE ORIGIN, and that is deliberate, for the reason
   deploy-tech-brief/hub.css records: a page-local <style> block is a second
   design system, and six copies of a design system is six things to drift.

   Grounds: Bone, Cream, Charcoal only. Palette closed at the canonical ten.
   Weight ceiling 500. Hierarchy comes from size and tracking, never weight.

   BRAND TOKENS ARE NOT DECLARED IN THIS FILE. Palette, the three typefaces
   and their @font-face rules, space (--space-1..12), radius (--radius-*),
   bands (--band-full, --band-short), --measure, easing (--ease, --dur-*),
   and each canvas's ink ladder (--ink-1, --ink-2, --ink-3, --hair/--line),
   --ground, --surface, --focus and elevation (--e1, --e2, --edge) come from
   vendor/index-ds/index-ds.css, the canonical INDEX brand stylesheet,
   vendored byte-for-byte from index-clinic-core by tools/sync-brand.py and
   linked BEFORE this file. Until 2026-09-23 this file carried its own copy
   of each, and the copies had drifted (a white Cream surface, a Midnight or
   Persimmon focus ring, a custom shadow). Restating one here would silently
   override the canonical value again; this file only ADDS layout and the
   page's own roles.
--------------------------------------------------------------------------- */

:root{
  --chrome:56px;
}

/* The page's own roles, per canvas. index-ds.css already redeclares ink,
   line, surface, focus and elevation on .ic-light, .ic-cream and .ic-dark;
   these three are what this page adds, and they follow the accent rule:
   Wisteria and Midnight as words on the light grounds only, Persimmon as
   words on Charcoal only. On a light ground Persimmon is a rule or a fill
   behind Charcoal text, never the words. */
.ic-light, .ic-cream{
  --accent-text:var(--wisteria);
  --accent-deep:var(--midnight);
  --rule:var(--persimmon);
}
.ic-dark{
  --accent-text:var(--persimmon);
  --accent-deep:var(--persimmon);
  --rule:var(--persimmon);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html.is-locked{overflow:hidden;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--bone);
  color:var(--charcoal);
  font-family:var(--font-body);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.band{
  background:var(--ground);
  color:var(--ink-1);
  padding:var(--band-full) var(--space-6);
}
.band.short{ padding-block:var(--band-short); }
.wrap{ max-width:1080px; margin:0 auto; }

/* ---- type ---- */
.label{
  font-family:var(--font-mono);
  font-weight:400; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
  margin:0 0 var(--space-5);
}
.d-xl{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(40px, 6.4vw, 68px); letter-spacing:-.025em;
  line-height:1.04; margin:0;
}
.d-l{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(29px, 4vw, 42px); letter-spacing:-.02em;
  line-height:1.12; margin:0; max-width:20ch;
}
.lede{
  font-size:clamp(17px, 1.7vw, 20px); font-weight:300; line-height:1.55;
  color:var(--ink-2); max-width:60ch; margin:var(--space-5) 0 0;
}
p{ max-width:var(--measure); margin:0 0 var(--space-5); }
.small{ font-size:14px; line-height:1.6; color:var(--ink-3); }
.stack > * + *{ margin-top:var(--space-6); }

/* The 44px touch floor, applied by CLASS and only to controls a reader can
   press. Measured on the pitch deck at 390x844: 23 of 28 interactive elements
   sat under 44px before this rule existed. */
.ic-tap{
  min-height:44px; min-width:44px;
  display:inline-flex; align-items:center; justify-content:center;
}

/* ---- chrome ---- */
.chrome{
  position:sticky; top:0; z-index:40;
  background:var(--charcoal); color:var(--bone);
  height:var(--chrome);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--space-6);
  border-bottom:1px solid rgba(240,230,213,.45);
}
/* NOTHING IN THE BAR MAY WRAP. Measured on the live origin at 1024px: the nav
   showed from 980px, the bar needed 1097px to hold its nine links and the full
   label on one line, and BOTH wrapped to two lines inside a 56px chrome. The
   nav gained two entries when the record and the system sections were added,
   and the breakpoint was never remeasured against them.
   Two rules, so this cannot come back quietly: nowrap makes a future overflow
   visible instead of silently stacking, and the label sheds its second half
   below 1120px, which is what buys the nav room to appear on a laptop at all
   rather than being pushed to a wider breakpoint. */
.chrome .label{
  margin:0; color:rgba(240,230,213,.78); white-space:nowrap;
}
.chrome .label .long{ display:none; }
@media (min-width:1120px){ .chrome .label .long{ display:inline; } }
.chrome nav{ display:none; gap:var(--space-5); white-space:nowrap; }
@media (min-width:980px){ .chrome nav{ display:flex; } }
.chrome nav a{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(240,230,213,.62); text-decoration:none;
  padding:var(--space-3) var(--space-1); line-height:1; white-space:nowrap;
}
.chrome nav a:hover, .chrome nav a[aria-current="true"]{ color:var(--persimmon); }
.progress{
  position:fixed; top:var(--chrome); left:0; height:2px; width:0%;
  background:var(--persimmon); z-index:41;
}

/* ---- hero ---- */
.hero{ padding-top:var(--space-11); }
/* THE WORDMARK IS AN ASSET. BRAND.md's lockup rule is that it is never
   re-typeset as live text, so this rule sizes it and does nothing else. The
   Charcoal variant sits on Bone; the white variant exists for dark grounds and
   this page does not use it. */
.wordmark{
  /* THE ASSET IS A SQUARE BOX AROUND A WIDE LOCKUP, and the box is mostly
     empty. Measured with getBBox() on 2026-09-16: the ink is 1151 x 349 at
     (181, 582) inside a 1500 x 1500 viewBox, so 38.8% of the height sits empty
     above the mark and 37.9% below it. Rendered naively the hero got a mark
     that read small with a large hole under it.

     The dead space is pulled back HERE rather than by cropping the file,
     because the file is vendored from brand/logos/ and asserted byte-identical
     by check 2. The ratios are named so a change of width stays correct: edit
     --mark-w alone and the margins follow. */
  --mark-w:clamp(150px, 15vw, 200px);
  display:block; width:var(--mark-w); height:auto;
  margin-top:calc(var(--space-4) - (var(--mark-w) * 0.388));
  margin-bottom:calc(var(--space-5) - (var(--mark-w) * 0.379));
}
.meta{
  margin-top:var(--space-9); padding-top:var(--space-5);
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3);
}
@media (prefers-reduced-motion: no-preference){
  .reveal > *{ opacity:0; transform:translateY(10px); animation:rise .34s var(--ease) forwards; }
  .reveal > *:nth-child(1){ animation-delay:0ms; }
  .reveal > *:nth-child(2){ animation-delay:110ms; }
  .reveal > *:nth-child(3){ animation-delay:220ms; }
  .reveal > *:nth-child(4){ animation-delay:260ms; }
  .reveal > *:nth-child(5){ animation-delay:300ms; }
  .reveal > *:nth-child(6){ animation-delay:340ms; }
}
@keyframes rise{ to{ opacity:1; transform:none; } }

/* The hero's three claims, stated as a row rather than a paragraph, so the
   reader who scans gets the argument before deciding to read. */
.claims{
  display:grid; gap:var(--space-6); grid-template-columns:1fr;
  margin-top:var(--space-8);
}
@media (min-width:760px){ .claims{ grid-template-columns:repeat(3,1fr); } }
.claims div{ border-top:2px solid var(--rule); padding-top:var(--space-4); }
.claims strong{
  display:block; font-family:var(--font-display); font-weight:500;
  font-size:19px; letter-spacing:-.01em; margin-bottom:var(--space-2);
}
.claims p{ margin:0; font-size:14px; line-height:1.6; color:var(--ink-2); }


/* ---- section head ---- */
.head{ margin-bottom:var(--space-9); }
.head .lede{ margin-top:var(--space-4); }

/* ---- pathway ---- */
.controls{
  display:flex; flex-wrap:wrap; gap:var(--space-3);
  align-items:center; margin-bottom:var(--space-7);
}
.toggle{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  background:transparent; color:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--radius-pill);
  min-height:44px; padding:0 var(--space-6); cursor:pointer;
}
.toggle[aria-pressed="true"]{
  background:var(--persimmon); border-color:var(--persimmon); color:var(--on-persimmon);
}

/* THE SPINE STRIP. Eight nodes on one rail, three of them the doctor's. It is
   an at-a-glance above the list, not a replacement for it: the list carries
   the words and stays the accessible version. The SVG is aria-hidden for that
   reason -- a screen reader gets the <ol> beneath, which says the same thing
   in full sentences. Fixed viewBox, so it scales without reflowing. */
.spine{
  width:100%; height:auto; display:block;
  margin:0 0 var(--space-7);
  overflow:visible;
}
.spine .rail{ stroke:var(--line); stroke-width:1; }
.spine .node{ fill:var(--ground); stroke:var(--line); stroke-width:1; }
.spine .node.is-mine{ fill:var(--persimmon); stroke:var(--persimmon); }
.spine .ring{ fill:none; stroke:var(--persimmon); stroke-width:1; opacity:.55; }
.spine text{
  font-family:var(--font-mono); font-size:7px; letter-spacing:.1em;
  text-transform:uppercase; fill:var(--ink-3);
}
.spine text.is-mine{ fill:var(--ink-1); }
.spine text.ord{ font-size:6.5px; fill:var(--ink-3); }
/* AND IT IS HIDDEN ON A PHONE. Measured at 390x844: the strip scaled to 342px
   wide, which put its 7px labels at roughly two and a half pixels on screen.
   An at-a-glance that cannot be glanced at is decoration, and this one costs a
   reader nothing to lose: it is aria-hidden already, and the list beneath says
   the same thing in full sentences. Found by looking. */
@media (max-width:760px){ .spine{ display:none; } }

.steps{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.step{ border-bottom:1px solid var(--line); }
.step.is-hidden{ display:none; }
.step-btn{
  width:100%; min-height:44px; display:grid;
  grid-template-columns:auto 1fr auto; gap:var(--space-5);
  align-items:center; text-align:left;
  background:transparent; border:0; cursor:pointer;
  padding:var(--space-6) 0; color:var(--ink-1); font:inherit;
}
.step-ord{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); width:5.5em;
}
.step-name{
  font-family:var(--font-display); font-weight:400; font-size:21px;
  line-height:1.3;
}
.step.mine .step-name{ font-weight:500; }
.step.mine .step-ord{ color:var(--ink-1); }
.mark{
  display:inline-block; margin-left:var(--space-3); vertical-align:2px;
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  background:var(--persimmon); color:var(--on-persimmon);
  border-radius:var(--radius-pill); padding:3px var(--space-3); line-height:1.4;
}
.chev{ color:var(--ink-3); transition:transform var(--dur-control) var(--ease); }
.step-btn[aria-expanded="true"] .chev{ transform:rotate(90deg); }
.step-body{ display:none; padding:0 0 var(--space-7) calc(5.5em + var(--space-5)); }
.step-btn[aria-expanded="true"] + .step-body{ display:block; }
.step-body p{ margin:0; color:var(--ink-2); }
@media (max-width:640px){
  .step-btn{ grid-template-columns:1fr auto; }
  .step-ord{ grid-column:1 / -1; width:auto; margin-bottom:var(--space-1); }
  .step-body{ padding-left:0; }
}

/* ---- prescribing: the four outcomes, as a 2x2 ---- */
/* The gate marker. Only the category that actually sits behind a second
   credential wears it, and the staircase beside it says which one and why.
   A gate drawn across two tiles would be a tidier picture and a false one. */
/* Only the category that actually sits behind a second credential is drawn in
   Persimmon. Found by looking: all four markers used to render in the accent,
   so the marker did not mark the gate. The text still tells every tile what it
   needs; the colour is reserved for the one that needs more. */

/* THE CREDENTIALING STAIRCASE. Three steps, each a hard gate, drawn from the
   suite's own credentialing table. No course or product is named: this tree is
   public copy and the suite names a certification whose title carries a word
   banned in public copy (compliance/rules/banned-terms.yml). */
.stair{
  display:grid; gap:var(--space-4); grid-template-columns:1fr;
  margin-top:var(--space-8); counter-reset:stair;
}
@media (min-width:900px){ .stair{ grid-template-columns:repeat(3,1fr); } }
.stair li{
  counter-increment:stair;
  list-style:none; border-top:2px solid var(--rule);
  padding-top:var(--space-4);
}
.stair li::before{
  content:"Step " counter(stair);
  display:block; font-family:var(--font-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:var(--space-2);
}
.stair h3{
  font-family:var(--font-display); font-weight:400; font-size:19px;
  margin:0 0 var(--space-2); line-height:1.25;
}
.stair p{ margin:0; font-size:14px; line-height:1.6; color:var(--ink-2); }

/* ---- what is built, and what is open ---- */
/* STAT TILES. Scott, 2026-09-14: the section led with what was missing. These
   lead with what exists. Every numeral is recomputed from source by
   tools/check-clinical-pack.py check 8, so a tile cannot drift away from the
   thing it counts. */
.stats{
  display:grid; gap:var(--space-6); grid-template-columns:repeat(2,1fr);
  margin:var(--space-8) 0 0; padding:0; list-style:none;
}
@media (min-width:900px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stats li{ border-top:2px solid var(--rule); padding-top:var(--space-4); }
.stats .n{
  display:block; font-family:var(--font-display); font-weight:500;
  font-size:clamp(36px,4.4vw,52px); line-height:1; letter-spacing:-.03em;
  margin-bottom:var(--space-3);
}
.stats .k{
  display:block; font-size:14px; line-height:1.5; color:var(--ink-2);
  max-width:22ch;
}

/* THE SUITE. Thirteen pills, no colour coding, no legend to decode. An earlier
   version marked six of them and said nothing about what the mark meant; a
   reader decodes a colour or does not, and no checker can tell the difference.
   The dot before each name reads as "this exists", which is the whole claim. */
.sop-chips{
  display:flex; flex-wrap:wrap; gap:var(--space-2);
  margin:0 0 var(--space-4); padding:0; list-style:none;
}
.sop-chips li{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--hair); border-radius:var(--radius-pill);
  padding:5px var(--space-3); color:var(--ink-2);
}
.sop-chips li::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--rule); flex:none;
}

/* THE SPLIT. Four and four, and the symmetry is the point: it is read off the
   register's own owner column, not chosen to look balanced. */
.split{
  display:grid; gap:var(--space-4); grid-template-columns:1fr; margin-top:var(--space-6);
}
@media (min-width:760px){ .split{ grid-template-columns:repeat(2,1fr); } }
.split-col{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:var(--space-7);
}
.split-col.is-yours{ border-color:var(--persimmon); }
.split-k{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin:0;
}
.split-n{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(40px,4.6vw,56px); line-height:1; letter-spacing:-.03em;
  margin:var(--space-2) 0 var(--space-5);
}
.split-col.is-yours .split-n{ color:var(--accent-text); }
.split-col ul{ margin:0; padding:0; list-style:none; }
.split-col li{
  padding:var(--space-3) 0; border-top:1px solid var(--hair);
  font-size:15px; line-height:1.5; color:var(--ink-2);
}

/* ---- safety: the clock, the tiers, the flags ---- */
/* A STEPPED TIMELINE IN CSS, not an SVG, and that is the lesson from the spine
   strip: a fixed-viewBox drawing scaled to 342px on a phone put its labels at
   two and a half pixels and had to be hidden. A list with a rail reflows, so
   this one is legible at every width and needs no breakpoint. */

/* THREE TIERS. A row per tier, with the response time as its own column so the
   reader compares the three times rather than reading three sentences. */

.flags{
  display:flex; flex-wrap:wrap; gap:var(--space-2);
  margin:0; padding:0; list-style:none;
}
.flags li{
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--rule); border-radius:var(--radius-pill);
  padding:5px var(--space-4); color:var(--accent-text);
}

/* ---- the founding team ---- */
/* NAME AND ROLE ONLY. Nothing in this repo records a qualification for anyone
   on this list, and BRAND.md's claims rule forbids inventing one, so the
   component has no slot for a credential to be typed into. If real
   qualifications are ever supplied, add the field here and assert it in
   check 9 at the same time. */
.people{
  display:grid; gap:var(--space-4); grid-template-columns:1fr;
  margin:0; padding:0 0 var(--space-4); list-style:none;
}
@media (min-width:640px){ .people{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .people{ grid-template-columns:repeat(3,1fr); } }
.people li{ border-top:2px solid var(--rule); padding-top:var(--space-4); }
.people .pn{
  display:block; font-family:var(--font-display); font-weight:500;
  font-size:20px; letter-spacing:-.01em; line-height:1.25;
}
.people .pr{
  display:block; margin-top:var(--space-2);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ---- the network ---- */
/* THE STATE CHIP CARRIES THE MEANING, so it leads the row rather than trailing
   it. Three strengths, three treatments: a contracted route is solid, a
   partnership is outlined, an open conversation is dashed. A reader deciding
   whether to stake their registration on this needs to tell them apart at a
   glance, which one flat word like "partners" would prevent. */
.network{ margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.network li{
  display:grid; gap:var(--space-2) var(--space-6); padding:var(--space-5) 0;
  grid-template-columns:1fr; align-items:baseline;
  border-bottom:1px solid var(--hair);
}
@media (min-width:760px){
  .network li{ grid-template-columns:11rem minmax(0,15rem) 1fr; }
}
.network .ns{
  justify-self:start;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; border-radius:var(--radius-pill);
  padding:3px var(--space-3); line-height:1.5;
}
.network li[data-state="signed"] .ns{
  background:var(--persimmon); border:1px solid var(--persimmon); color:var(--on-persimmon);
}
.network li[data-state="partnership"] .ns{
  border:1px solid var(--persimmon); color:var(--accent-text);
}
.network li[data-state="talking"] .ns{
  border:1px dashed var(--line); color:var(--ink-3);
}
.network .nn{
  font-family:var(--font-display); font-weight:400; font-size:18px;
  line-height:1.3;
}
.network p{ margin:0; font-size:14px; line-height:1.6; color:var(--ink-2); }

/* ---- rows ---- */
.rows{ border-top:1px solid var(--line); margin-top:var(--space-7); }
.row{
  display:grid; gap:var(--space-3) var(--space-7); padding:var(--space-6) 0;
  grid-template-columns:1fr;
}
@media (min-width:760px){ .row{ grid-template-columns:minmax(0,14rem) 1fr; } }
.row + .row{ border-top:1px solid var(--hair); }
.row dt{
  font-family:var(--font-display); font-weight:400; font-size:21px;
  line-height:1.3;
}
.row dd{ margin:0; color:var(--ink-2); max-width:var(--measure); }

/* ---- trio ---- */

/* ---- panel ---- */
.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-card); padding:var(--space-7); margin-top:var(--space-7);
}
.panel .label{ margin-bottom:var(--space-4); }
.panel p:last-child{ margin-bottom:0; }

/* ---- interactive mounts ---- */
/* Standalone media role: BRAND.md's 22px radius, border first, tone absent,
   elevation only on interaction. Elevation FLOATS; the resting state carries
   none. */
.mount{
  margin-top:var(--space-7);
  border:1px solid var(--line); border-radius:var(--radius-media);
  min-height:min(60dvh,560px); position:relative; overflow:hidden;
  transition:box-shadow var(--dur-lift) var(--ease), transform var(--dur-lift) var(--ease);
}
.mount:hover, .mount:focus-within{
  box-shadow:var(--e2), var(--edge);
  transform:translateY(-2px);
}
.mount-fallback{
  position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; text-align:center; padding:var(--space-7);
  color:var(--ink-3); font-size:14px; line-height:1.6;
}
.seal-toggles{
  position:absolute; left:14px; bottom:14px;
  display:flex; gap:var(--space-2); flex-wrap:wrap;
}
.seal-toggle{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; padding:7px 11px; border-radius:var(--radius-pill);
  border:1px solid var(--line); background:transparent; color:inherit;
  cursor:pointer;
}
.seal-toggle[aria-pressed="false"]{ background:color-mix(in srgb, var(--charcoal) 25%, transparent); }

/* THE DASHBOARD OPENS OVER THE PAGE. The preview mounts into a page column and
   the mockup inside it was drawn for a browser window: legible there, not
   usable. These four rules are the whole overlay. */
.mount .dash-holder{ height:100%; overflow:auto; position:relative; }
/* THE DASHBOARD MOUNT IS A FRAME, so it takes a DEFINITE height rather than a
   minimum. Two faults, one cause, both found by looking:
     - with only a min-height, the mockup's own clamp(320px,50vh,620px) cap sat
       ninety pixels short of the frame and left dead ground under it;
     - making the preview fill instead let the frame grow to the mockup's full
       content height, which stopped being a frame at all.
   A definite height resolves the preview's `height:100%` against something, so
   the mockup fills the frame exactly and scrolls inside it. */
.mount:has(.dash-holder){ height:min(78dvh,700px); }
.mount .dash-holder #dash-preview{ height:100%; }
.mount .dash-holder.is-expanded{
  position:fixed; inset:0; z-index:80;
  height:100dvh; max-height:none;
  border-radius:0; background:var(--charcoal);
}
/* The mockup caps its own height. js/vendor/dashboard.html sets
   #dash-preview{height:clamp(320px,50vh,620px)}, which is right inside a
   section and wrong inside a full-window overlay. Overridden here rather than
   in the vendored file, which is asserted byte-identical to its source. */
.mount .dash-holder.is-expanded #dash-preview{ height:100%; }
/* AND THE BOX IT IS ESCAPING HAS TO LET GO. A transformed ancestor becomes the
   containing block for position:fixed, and .mount transforms on :hover, which
   is always true at the moment somebody clicks a button inside it. Without
   this the class lands, the button relabels itself, and the panel does not
   move a pixel. No checker in this repo can see that; only a browser can. */
.mount:has(.dash-holder.is-expanded){
  overflow:visible; transform:none; box-shadow:none;
}
.dash-expand{
  position:absolute; top:var(--space-3); right:var(--space-3); z-index:2;
  padding:0 var(--space-4);
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; color:var(--ink-1); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-media);
}
.dash-expand:hover, .dash-expand:focus-visible{ border-color:var(--ink-1); }
/* THE ONE LIVE CONTROL INSIDE THE VENDORED MOCKUP. Measured at 390x844: the
   patient/operator toggle rendered at 42px, two short of the floor.
   Everything else in that fragment is decoration -- static markup with no
   handler -- and sizing decoration to a touch floor would tell a reader it
   does something. This toggle is different: js/dashboard.js wires it, and a
   reader on a phone is meant to press it.
   Corrected HERE rather than in the fragment, which is vendored and asserted
   byte-identical to tools/pitch/dashboard-fragment.html. */
.mount #dash-preview [data-view-toggle] button{ min-height:44px; }

/* ---- cta ---- */
.cta{
  display:inline-flex; align-items:center; min-height:52px;
  padding:0 var(--space-8); border-radius:var(--radius-button);
  background:var(--charcoal); color:var(--bone);
  text-decoration:none; font-family:var(--font-display); font-weight:400;
  font-size:18px; letter-spacing:-.01em; border:1px solid var(--charcoal);
}
.cta:hover{ background:transparent; color:var(--ink-1); }
.cta-note{
  display:inline-block; margin-left:var(--space-4); color:var(--ink-3);
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}
footer{
  margin-top:var(--space-10); padding-top:var(--space-5);
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3);
}

/* :focus-visible is index-ds.css's: 2px solid var(--focus), Charcoal on
   the light grounds and Bone on Charcoal, offset 3px. */

/* ---- the gate (gate.html) ----
   Added 2026-09-28 when the page moved behind a password and a signed
   confidentiality agreement. Layout only; the fields, choice and buttons are
   index-ds.css components (.ic-field, .ic-input, .ic-choice, .ic-btn). */
.gate{ min-height:100vh; }
.gate-wrap{ max-width:760px; }
.gate .wordmark{ display:block; margin-bottom:var(--space-6); }
.gate .d-l{ max-width:none; margin-bottom:var(--space-6); }
.gate-step{ display:grid; gap:var(--space-5); justify-items:start; }
.gate-step[hidden]{ display:none; }
.gate-step > .lede, .gate-step > .agreement, .gate-step > .gate-fields, .gate-step > .signature, .gate-step > .ic-field{ justify-self:stretch; }
.gate-step .lede{ margin-top:0; }
.gate-error[hidden]{ display:none; }
.agreement{
  max-height:min(60vh, 520px); overflow-y:auto;
  padding:var(--space-6); border:1px solid var(--line);
  border-radius:var(--radius-card); background:var(--surface);
  font-size:15px; line-height:1.6;
}
.agreement:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; }
.agreement h2{
  font-family:var(--font-display); font-weight:500;
  font-size:22px; letter-spacing:-.01em; margin:0 0 var(--space-4);
}
.agreement h3{
  font-family:var(--font-display); font-weight:500;
  font-size:17px; margin:var(--space-6) 0 var(--space-3);
}
.agreement p, .agreement li{ max-width:none; }
.agreement strong{ font-weight:500; }
.agreement ul{ margin:0 0 var(--space-5); padding-left:var(--space-6); }
.agreement ul.purpose{ list-style:none; padding-left:0; }
.agreement ul.purpose li{ display:flex; gap:var(--space-3); }
.agreement ul.purpose li.is-marked{ font-weight:400; }
.gate-fields{
  border:0; padding:0; margin:0;
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5);
}
.gate-fields legend{ padding:0; }
.gate-fields .ic-field{ max-width:none; }
.gate-wide{ grid-column:1 / -1; }
@media (max-width:600px){ .gate-fields{ grid-template-columns:1fr; } }
.signature-head{ display:flex; justify-content:space-between; align-items:center; }
.signature canvas{
  display:block; width:100%; height:180px; margin-top:var(--space-2);
  border:1px solid var(--ink-h); border-radius:var(--radius-button);
  background:var(--surface); color:var(--ink-1); touch-action:none; cursor:crosshair;
}
.gate-agree{ align-items:flex-start; }
.gate-agree input{ margin-top:2px; }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}