/* SOMA V2. Built from Figma "Page 8" (final screens), 1280 x 832 frames.
   Screens are drawn on a 1280 x 832 board that is scaled to fit the window (--k) and centred
   (--ox, --oy). Footage and the frame rules run full bleed. Frame geometry is in design pixels
   and animates between screens, so the lines slide, grow and retract as sections change. */

@font-face { font-family: "Satoshi"; src: url("../assets/fonts/Satoshi-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../assets/fonts/Satoshi-Medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("../assets/fonts/Satoshi-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
/* Manrope (variable, latin) for headlines, figures and titles */
@font-face { font-family: "Manrope"; src: url("../assets/fonts/Manrope-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  /* SOMA / Color: six colours, nothing else.
     White and black; a muted pair; a muted white for subtext; a muted white for card fills.
     Lines, ticks and the data bars use the muted white at an opacity rather than extra colours. */
  --white: #F2F1ED;
  --black: #000000;
  --white-muted: #9A9996;
  --black-muted: #1D1C19;
  --white-sub: #B1B0AD;
  --white-card: rgb(242 241 237 / 0.08);

  --ease: cubic-bezier(0.76, 0, 0.24, 1);
  --slide: 900ms;
  --fade: 450ms;
  --out: 350ms;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--black); }
body { font-family: "Satoshi", system-ui, sans-serif; color: var(--white); -webkit-font-smoothing: antialiased; }
h1, h2, p, ol { margin: 0; padding: 0; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- Type ramp (SOMA text styles, as set on Page 8) ----------
   Manrope: headlines, figures and titles. Satoshi: everything else; Bold for UI, caps and
   labels, Medium for body, Regular only for the confirmation line. */
.t-display { font-family: "Manrope", sans-serif; font-size: 84px; line-height: 1.2; font-weight: 500; letter-spacing: -1.5px; } /* Display/84 */
.t-fig     { font-family: "Manrope", sans-serif; font-size: 64px; line-height: 1.2; font-weight: 500; letter-spacing: -1.5px; }   /* Figure/64 */
.t-title   { font-family: "Manrope", sans-serif; font-size: 40px; line-height: 1; font-weight: 500; letter-spacing: -1.5px; }   /* Heading/40 Medium */
.t-title-s { font-family: "Manrope", sans-serif; font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: -1.5px; }   /* Heading/40 SemiBold */
.t-d56     { font-size: 56px; line-height: 1; font-weight: 500; letter-spacing: -1.5px; }   /* Display/56 */
.t-logo    { font-size: 24px; line-height: 1; font-weight: 500; letter-spacing: -1.5px; }   /* Logo/24 */
.t-lead    { font-size: 24px; line-height: 36px; font-weight: 500; }                        /* Lead/24 */
.t-b24m    { font-size: 24px; line-height: 32px; font-weight: 500; }                        /* Body/24 Medium */
.t-l24     { font-size: 24px; line-height: 24px; font-weight: 500; }                        /* Label/24 */
.t-caps18  { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
.t-b16b    { font-size: 16px; line-height: 22px; font-weight: 700; }                        /* Body/16 Bold */
.t-caps16  { font-size: 16px; line-height: 22px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
.t-nav16   { font-size: 16px; line-height: 22px; font-weight: 700; text-transform: uppercase; }
.t-b16m    { font-size: 16px; line-height: 24px; font-weight: 500; }                        /* Body/16 Medium */
.t-b16     { font-size: 16px; line-height: 24px; font-weight: 400; }                        /* Body/16 Regular */
.t-nav14   { font-size: 14px; line-height: 20px; font-weight: 700; text-transform: uppercase; }
.t-btn14   { font-size: 14px; line-height: 20px; font-weight: 700; }                        /* Button/14 */
.t-caps14  { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
.t-l14     { font-size: 14px; line-height: 20px; font-weight: 500; }                        /* Label/14 */
.t-b14     { font-size: 14px; line-height: 20px; font-weight: 400; }
.t-caps12  { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
.t-caps12m { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.6px; text-transform: uppercase; }
.t-cap12   { font-size: 12px; line-height: 16px; font-weight: 700; }                        /* Caption/12 */
.c-sec { color: var(--white-sub); }
.c-muted { color: var(--white-muted); }
.c-dis { color: var(--white-muted); }

.btn { display: inline-flex; align-items: center; justify-content: center; background: var(--white); color: var(--black-muted); font-weight: 700; white-space: nowrap; transition: background-color 200ms ease; }
.btn:hover { opacity: 0.9; }
.btn--16 { font-size: 16px; line-height: 22px; padding: 16px 24px; }
.btn--14 { font-size: 14px; line-height: 20px; padding: 10px 16px; }
.btn--block { width: 100%; border-radius: 4px; }
.btn.is-disabled { cursor: default; }
.btn.is-disabled:hover { background: var(--white); }
:focus-visible { outline: 1px solid var(--white); outline-offset: 4px; }

/* ---------- Stage ---------- */
/* The frame geometry is placed with transforms by main.js, so moving between sections only
   animates on the compositor and never restyles the page. */
.stage { position: fixed; inset: 0; height: 100svh; overflow: hidden; background: var(--black); touch-action: none; }

/* ---------- Media ---------- */
.media-layer { position: absolute; inset: 0; z-index: 1; }
/* Changing section never overlaps two screens: the old footage and copy fade out first
   (--out), then the new ones fade in. */
.media, .media-group { position: absolute; inset: 0; opacity: 0; overflow: hidden; background: var(--black); transition: opacity var(--out) ease; }
.media-group > .media { opacity: 1; }
.media.is-on, .media-group.is-on { opacity: 1; z-index: 2; transition: opacity var(--fade) ease var(--out); }
.media--tl { inset: 0 50% 50% 0; }
.media--tr { inset: 0 0 50% 50%; }
.media--bottom { inset: 50% 0 0 0; }

/* Each clip keeps its Figma crop whole and covers its box (see V1 notes). */
.media { --cx: 0; --cy: 0; --cw: 1; --ch: 1; --ar: 1.7778; container-type: size; }
.media video {
  --vw: 100cqw; --vh: 100cqh;
  --W: max(min(calc(var(--vw) / var(--cw)), calc(var(--vh) * var(--ar) / var(--ch))), var(--vw), calc(var(--vh) * var(--ar)));
  position: absolute; width: var(--W); height: calc(var(--W) / var(--ar)); max-width: none; display: block; object-fit: cover;
  left: clamp(calc(var(--vw) - var(--W)), calc(var(--vw) / 2 - var(--W) * (var(--cx) + var(--cw) / 2)), 0px);
  top: clamp(calc(var(--vh) - var(--W) / var(--ar)), calc(var(--vh) / 2 - var(--W) / var(--ar) * (var(--cy) + var(--ch) / 2)), 0px);
}
.spec-vid { opacity: 0; transition: opacity 300ms ease; }
.spec-vid.is-shown { opacity: 1; }

.scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none; transition: opacity var(--fade) ease;
  background: linear-gradient(180deg, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.6) 100%), rgb(0 0 0 / 0.4); }

/* A 1 x 1 square scaled to the column, so it moves on the compositor */
.panel { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: var(--white-card);
  transition: transform var(--slide) var(--ease), width var(--slide) var(--ease), height var(--slide) var(--ease), opacity var(--slide) ease; }

/* ---------- Board ----------
   Screens are drawn at 1280 x 832 and scaled by --k, the smaller of the two fits. The board then
   stretches in the other direction, by --dx or --dy design px, so the rules keep their Figma inset
   from every window edge. Elements anchor like Figma constraints:
   .ay follows the bottom, .ax the right, .axc the right and the middle, .ac the centre. */
.board { position: absolute; left: 0; top: 0; width: calc(var(--bw, 1280) * 1px); height: calc(var(--bh, 832) * 1px); z-index: 5;
  transform-origin: 0 0; transform: scale(var(--k, 1)); --dx: 0px; --dy: 0px; }
.ay  { translate: 0 var(--dy); }
.ax  { translate: var(--dx) 0; }
.axc { translate: var(--dx) calc(var(--dy) / 2); }
.ac  { translate: calc(var(--dx) / 2) calc(var(--dy) / 2); }
.scene { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity var(--fade) ease, visibility 0s linear var(--fade); pointer-events: none; }
.scene.is-active { visibility: visible; opacity: 1; transition: opacity var(--fade) ease; pointer-events: auto; }
.scene.is-leaving { visibility: visible; }
.head { position: absolute; display: flex; flex-direction: column; align-items: flex-start; }
.band { position: absolute; top: 784px; display: flex; align-items: center; gap: 32px; }
.band--wide { width: calc(1070px + var(--dx)); }

/* Chrome */
.logo { position: absolute; top: 28px; left: 0; color: var(--white); text-decoration: none; transform: translateX(calc(var(--logo-x, 105) * 1px)); transition: transform var(--slide) var(--ease); }
.nav { position: absolute; top: 21px; right: 0; display: flex; align-items: center; gap: 32px; transform: translateX(calc(var(--nav-x, -107) * 1px)); transition: transform var(--slide) var(--ease); }
.nav__link { color: var(--white-sub); text-decoration: none; transition: color 200ms ease; }
.nav__link:hover, .nav__link.is-current { color: var(--white); }
.btn { text-decoration: none; }

.rail { position: absolute; left: 81px; top: 105px; transition: opacity 400ms ease 200ms; }
.stage.no-rail .rail { opacity: 0; pointer-events: none; transition-delay: 0ms; }
.rail__list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.rail__item { display: flex; align-items: center; gap: 12px; height: 16px; color: var(--white); }
.rail__item::before { content: ""; width: 4px; height: 1px; background: var(--white-muted); flex: none; transition: width 250ms ease, background-color 250ms ease; }
.rail__label { max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap; transition: max-width 300ms ease, opacity 200ms ease; }
.rail__item:hover .rail__label { max-width: 240px; opacity: 0.6; }
.rail__item.is-current::before { width: 8px; background: var(--white); }
.rail__item.is-current .rail__label { max-width: 240px; opacity: 1; }

/* Spans the frame by default; the form screens move it to their box (--backed-x, --backed-w),
   and the sample form stacks the network line above the logos. */
.backed { position: absolute; left: var(--backed-x, 113px); top: 772px; width: var(--backed-w, calc(1055px + var(--dx))); height: 40px; display: flex; align-items: center; justify-content: space-between; opacity: 0; pointer-events: none; transition: opacity var(--fade) ease; }
.stage.show-backed .backed { opacity: 1; }
.stage.backed-stack .backed { top: 742px; height: 70px; flex-direction: column-reverse; align-items: flex-start; justify-content: flex-end; gap: 8px; }
.backed__group { display: flex; align-items: center; gap: 32px; }
.backed__logos { display: flex; align-items: center; gap: 24px; }
.backed__logos img { display: block; object-fit: contain; }

/* ---------- Frame ----------
   Rules, column rules, row rules and crosses sit at 0,0 and are moved by main.js with
   translate, snapped to device pixels. Column and row rules take their real length and draw in
   or retract with a 0 to 1 scale. */
.frame { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.frame > * { position: absolute; left: 0; top: 0; transform-origin: 0 0;
  transition: transform var(--slide) var(--ease), width var(--slide) var(--ease), height var(--slide) var(--ease), opacity var(--slide) var(--ease); }
.frame > [data-f^="r"] { transform-origin: 100% 0; }
.rule { background: var(--white-muted); opacity: 0.66; }
.rule--v { width: 1px; height: 100%; }
.rule--h { height: 1px; width: 100%; }
.rule--s { width: 1px; height: 0; }
.rule--faint { opacity: 0.33; }

.cross { position: absolute; width: 0; height: 0; }
.cross::before, .cross::after { content: ""; position: absolute; background: var(--white); }
.cross::before { left: -8px; width: 17px; top: 0; height: 1px; }
.cross::after { top: -8px; height: 17px; left: 0; width: 1px; }
/* 09 Custom: the footage behind the rows is blurred (Figma background blur 32) */
.stage.panel-blur .panel { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.stage.is-resizing .frame > *, .stage.is-resizing .panel, .stage.is-resizing .logo, .stage.is-resizing .nav { transition: none; }

/* ---------- 02 Specimen ---------- */
.spec-time { position: absolute; right: 104px; top: 105px; text-align: right; display: flex; flex-direction: column; gap: 4px; }
.toggles { position: absolute; left: 105px; top: 703px; display: flex; gap: 32px; align-items: flex-start; }
.toggle { position: relative; display: flex; flex-direction: column; gap: 4px; color: var(--white-muted); font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; transition: color 200ms ease; text-align: left; }
.toggle:hover { color: var(--white-sub); }
.toggle.is-active { color: var(--white); }
.toggle__bar { display: block; height: 1px; width: 100%; background: transparent; overflow: hidden; }
.toggle__bar i { display: block; height: 100%; width: 100%; background: var(--white); transform: scaleX(0); transform-origin: 0 50%; }
.toggle.is-active .toggle__bar i { transform: scaleX(var(--progress, 0)); }
.band .metrics { display: flex; gap: 32px; margin-left: auto; }
.metrics > span { display: inline-flex; align-items: baseline; gap: 8px; }
.metrics b { font-weight: 700; }
.metrics i { font-style: normal; }
.scene--specimen .band { justify-content: space-between; }


/* What the layer adds, under the clock */
.readout { position: absolute; right: 104px; top: 185px; width: 240px; height: 120px; }
.readout__item { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right;
  opacity: 0; transform: translateY(8px); transition: opacity 350ms ease, transform 350ms ease; }
.readout__item.is-on { opacity: 1; transform: none; transition-delay: 120ms; }
.keys { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.keys li { display: flex; align-items: center; gap: 8px; color: var(--white); }
.said { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.said li { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; color: var(--white-muted); transition: color 200ms ease; }
.said li.is-said { color: var(--white-sub); }
.said li.is-now { color: var(--white); }
.keys i { width: 8px; height: 8px; background: var(--sw); flex: none; }

/* ---------- 04 Hear (and the Specimen transcript) ----------
   As in Figma, right aligned to 1180 with an 8 px tick on the rule; the line being said is 24 px,
   the others 14.
   The current line is white, its neighbours soft, the rest dim; rows 16 apart (pitch 58). */
.transcript { position: absolute; right: 80px; top: 105px; width: 360px; }
.transcript__list { list-style: none; display: flex; flex-direction: column; gap: 16px; align-items: flex-end; }
.transcript li { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-right: 20px; text-align: right;
  color: #636260; transition: color 300ms ease; }                                  /* Figma: dim */
.transcript .t-caps12 { line-height: 16px; }
.transcript .line { font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: -0.5px; transition: font-size 250ms ease, line-height 250ms ease; }
.transcript li.is-active .line { font-size: 24px; line-height: 32px; }             /* the line being said is 24, the rest 14 */
.transcript .tick { position: absolute; right: 0; top: 8px; width: 8px; height: 1px; background: #ECECEC; transition: background-color 300ms ease; }
.transcript li.is-near { color: #7F7E7B; }                                         /* Figma: soft */
.transcript li.is-active { color: var(--white); }
.transcript li.is-active .tick { background: var(--white); }
@keyframes fadeIn { from { opacity: 0; } }

.wave { position: absolute; left: 97px; top: 770px; width: calc(1088px + var(--dx)); }
.wave__speakers { position: relative; height: 16px; }
.wave__speakers span { position: absolute; top: 0; white-space: nowrap; color: var(--white-muted); transition: color 250ms ease; }
.wave__speakers span.is-active { color: var(--white); }
.wave__bars { height: 26px; margin-top: 2px; display: flex; align-items: center; gap: 3px; }
.wave__bars i { flex: none; width: 2px; background: var(--white-muted); }
.wave__bars i.is-played { background: var(--white); }
.playhead { position: absolute; top: 752px; left: 97px; width: 1px; height: 80px; background: var(--white); will-change: transform; }
.playhead__time { position: absolute; left: 6px; top: 0; padding: 3px 6px; background: var(--white); color: var(--black-muted); white-space: nowrap; }

/* ---------- 05 Understand ---------- */
.phase-box { position: absolute; left: 905px; top: 105px; width: 270px; }
.phase-track { position: relative; height: 3px; margin-top: 4px; }
.phase-track::before { content: ""; position: absolute; left: 0; right: 0; top: 1px; height: 1px; background: var(--white-muted); }
.phase-track i { position: absolute; left: 0; top: 0; width: 40px; height: 3px; background: var(--white); transform: translateX(var(--seg, 0px)); transition: transform 600ms var(--ease); }
.phase-track--wide { margin-top: 4px; }
.steps { top: 782px; gap: 32px; }
.steps .step { color: var(--white-muted); transition: color 300ms ease; }
.steps .step.is-done { color: var(--white-sub); }
.steps .step.is-active, .steps .step:hover { color: var(--white); }

/* ---------- 06 and 07 rows ---------- */
/* Column rule at 365 on both, as in Figma; the rows share the height between the rules */
.rows { position: absolute; top: 81px; left: 366px; width: calc(834px + var(--dx)); height: calc(670px + var(--dy)); display: flex; flex-direction: column; }
.row { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex: 1 1 0; min-height: 0; }
.row > .t-l24 { width: 333px; }
.detail { width: 333px; display: flex; flex-direction: column; gap: 16px; }

/* ---------- 08 Delivery ---------- */
.tree { position: absolute; left: 721px; top: 105px; width: 239px; }
.tree__head { padding-left: 24px; }
.tree__rows { margin-top: 16px; display: flex; flex-direction: column; }
.file { display: flex; align-items: center; height: 28px; padding-left: 44px; font-size: 16px; line-height: 22px; font-weight: 700; color: var(--white-sub); text-align: left; position: relative; transition: background-color 150ms ease, color 150ms ease; }
.file.is-folder, .file.is-root { padding-left: 24px; }
.file.is-folder { color: var(--white); }
.file.gap { margin-top: 4px; }
.file::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: transparent; }
.file.is-selected, .file:hover { background: var(--white-card); color: var(--white); }
.file.is-selected::before, .file:hover::before { background: var(--white); }
.tree:hover .file.is-selected:not(:hover) { background: transparent; color: var(--white-sub); }
.tree:hover .file.is-selected:not(:hover)::before { background: transparent; }
.tree:hover .file.is-folder.is-selected:not(:hover) { color: var(--white); }
.preview { position: absolute; left: 985px; top: 105px; width: 195px; }
.preview__body { margin-top: 24px; display: flex; flex-direction: column; gap: 20px; }
.preview__body .line { display: flex; gap: 16px; }
.preview__body .k { height: 8px; background: var(--white-muted); opacity: 0.45; }
.preview__body .v { height: 8px; background: var(--white-muted); opacity: 0.28; }
.preview__thumb { width: 195px; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.preview__wave { display: flex; align-items: center; gap: 2px; height: 60px; }
.preview__wave i { width: 2px; background: var(--white-sub); }
.scene--delivery .band { gap: 32px; }

/* ---------- 09 Custom ---------- */
.stages { position: absolute; left: 723px; top: 81px; width: 477px; height: calc(670px + var(--dy)); display: flex; flex-direction: column; }
.stage-row { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; gap: 8px; }
.stage-row > .t-b24m { width: 167px; }

/* The 09 rows rise in one after another once the old screen has cleared (see go()). */
.scene.is-active .stage-row { animation: rise 600ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--late, 0ms) + 120ms + var(--i) * 70ms); }
@keyframes rise { from { opacity: 0; transform: translateY(32px); } }
.scene.is-active { transition-delay: var(--late, 0ms); }
.scene.is-leaving { opacity: 0; transition: opacity var(--out) ease, visibility 0s linear var(--out); }

/* ---------- Forms ----------
   12 Request a sample: one column in a 548 wide box (v1 366, v2 914, h1 172, fold 660).
   Hospitals assessment: two columns in a 786 wide box (v1 247, v2 1033, h1 192, fold 615).
   Both boxes centre on the window, so the form anchors with .ac. */
.form { position: absolute; display: flex; flex-direction: column; }
.form--sample { left: 391px; top: 197px; width: 499px; }
.form--assess { left: 271px; top: 216px; width: 738px; }
.form__head p { margin-top: 16px; }
.form__fields { display: flex; flex-direction: column; margin-top: 32px; }
.form--sample .form__fields { gap: 24px; }
.form--assess .form__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; }
.form .btn--block { margin-top: 24px; }
.form--assess .btn--block { margin-top: 40px; }
.field { display: flex; flex-direction: column; border: 0; margin: 0; padding: 0; min-width: 0; }
.form--sample .field { gap: 12px; }
.form--assess .field { gap: 8px; }
.field__input { position: relative; display: block; border-bottom: 1px solid var(--white); padding-bottom: 8px; }
.form--assess .field__input { padding-bottom: 4px; }
.field input, .field select { width: 100%; background: transparent; border: 0; padding: 0; outline: none; font-size: 16px; line-height: 22px; color: var(--white); appearance: none; -webkit-appearance: none; border-radius: 0; }
.form--sample .field input { font-weight: 400; }
.form--assess .field input, .form--assess .field select { font-weight: 500; line-height: 24px; }
.field input::placeholder { color: var(--white-muted); opacity: 1; }
.field select { cursor: pointer; padding-right: 24px; }
.field select:invalid { color: var(--white-muted); }
.field select option { color: var(--black); }
.field--select .field__input::after { content: ""; position: absolute; right: 4px; top: 6px; width: 8px; height: 8px; border-right: 1.3px solid var(--white); border-bottom: 1.3px solid var(--white); transform: rotate(45deg); pointer-events: none; }
.field.is-invalid .field__input { border-bottom: 2px solid var(--white); padding-bottom: 7px; }
.form--assess .field.is-invalid .field__input { padding-bottom: 3px; }
.btn--block { width: 100%; }
.form__status { margin-top: 16px; color: var(--white-sub); }
.form__status:empty { display: none; }
.form-done { position: absolute; display: flex; flex-direction: column; gap: 16px; }
.form-done[hidden], .form[hidden] { display: none; }
.form-done--sample { left: 391px; top: 197px; width: 499px; }
.form-done--assess { left: 271px; top: 216px; width: 738px; }

/* ---------- 13 Footer ---------- */
.footer-brand { position: absolute; left: 105px; top: 537px; display: flex; flex-direction: column; gap: 25px; }
.footer-links { position: absolute; right: 105px; top: 537px; display: flex; gap: 32px; }
.footer-links > * { color: var(--white-sub); text-decoration: none; text-transform: inherit; transition: color 200ms ease; }
.footer-links > a:hover, .footer-links > button:hover, .footer-links .is-current { color: var(--white); }
.footer-links [aria-disabled] { cursor: default; }
.footer-links [aria-disabled]:hover { color: var(--white-sub); }

/* ======================================================================
   For Hospitals (hospitals.html). The right hand column sits between the
   722 rule and v2 (723 to 1200) and follows the right edge (.ax).
   ====================================================================== */
.hcol { position: absolute; left: 723px; top: 81px; width: 477px; height: calc(670px + var(--dy)); display: flex; flex-direction: column; }

/* Infrastructure: four equal rows on the paper wash; the last one, the AI data pipeline, is paper */
.hrow { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 0 24px; }
.hrow.is-paper { background: var(--white); color: var(--black-muted); }
.hrow.is-paper .c-sec { color: var(--black-muted); }

/* Opportunity: hospital today merges into SOMA, which splits into what it enables */
.hblock { background: var(--white-card); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.hgrid { display: grid; grid-template-columns: 1fr 1fr; }
.hgrid > span { padding: 8px 0; border-top: 1px solid rgb(154 153 150 / 0.66); }
.hgrid > span:nth-child(odd) { padding-right: 24px; }
.hnode { background: var(--white); color: var(--black-muted); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.conn { position: relative; flex: 1 1 0; min-height: 24px; }
.conn i { position: absolute; background: var(--white); }
.conn .a { width: 0; height: 0; background: none; border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-top: 6px solid var(--white); transform: translateX(-4px); bottom: 0; }

/* Start small: one department lit, the footprint grows out of its corner to hospital wide */
.footprint { position: relative; flex: 1 1 0; min-height: 0; background: var(--white-card); }
.footprint .box { position: absolute; left: 24px; bottom: 24px; border: 1px solid rgb(154 153 150 / 0.66);
  width: calc(136px + (100% - 48px - 136px) * var(--i) / 6); height: calc(52px + (100% - 48px - 52px) * var(--i) / 6); }
.footprint .box span { position: absolute; left: 12px; top: 12px; white-space: nowrap; color: var(--white-sub); }
.footprint .box.is-start { background: var(--white); border-color: var(--white); }
.footprint .box.is-start span { top: 50%; transform: translateY(-50%); color: var(--black-muted); }
.footprint .box.is-all { border-color: var(--white); }
.footprint .box.is-all span { color: var(--white); }
.hstages { display: flex; flex-direction: column; }
.hstage { display: flex; gap: 16px; padding: 14px 24px; height: 77px; background: var(--white-card); border-top: 1px solid rgb(154 153 150 / 0.66); }
.hstage > :nth-child(1) { width: 24px; flex: none; }
.hstage > :nth-child(2) { width: 80px; flex: none; }
.hstage > :nth-child(3) { flex: 1 1 0; }

/* Columns draw in once the old screen has cleared */
.scene.is-active .hcol > * { animation: rise 600ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--late, 0ms) + 120ms + var(--i, 0) * 70ms); }
.scene.is-active .hcol > .conn { animation-name: fadeIn; }

/* ---------- Loader ---------- */
.loader { position: absolute; inset: 0; z-index: 10; background: var(--black); --p: 0; transition: opacity 700ms ease, visibility 0s linear 700ms;
  --lv1: 80; --lv2: 1200; --lh1: 80; --lfold: 751; }
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loaded-once .loader { display: none; }                  /* the loader runs once per visit */
.seg { position: absolute; background: var(--white-muted); opacity: 0.66; will-change: transform; }
.seg--h { height: 1px; transform: scaleX(var(--p)); }
.seg--v { width: 1px; transform: scaleY(var(--p)); }
.loader__count { position: absolute; left: 0; top: 0; font-size: calc(84px * var(--k, 1)); line-height: 1.2; letter-spacing: calc(-1.5px * var(--k, 1)); font-variant-numeric: tabular-nums; }

/* ?still: no transitions, for screenshots */
.stage.no-anim, .stage.no-anim * { transition: none !important; animation: none !important; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .frame > *, .panel, .scrim { transition-duration: 1ms !important; }
  .scene, .media, .media-group, .rail, .loader { transition-duration: 1ms !important; }
}

/* ======================================================================
   Phones. Page 8 has no phone frames, so this follows the V1 phone layout:
   rules at 20 from each edge, top rule at 64, fold 96 above the bottom,
   headlines at 32, one idea per screen. The board stops scaling (k = 1)
   and takes the viewport size; JS sets the phone geometry in pixels.
   ====================================================================== */
@media (max-width: 760px) {
  .board { width: 100vw; height: 100svh; transform: none; }
  .t-display, .t-fig { font-size: 32px; line-height: 1.1; letter-spacing: -1px; }
  .t-title, .t-title-s { font-size: 22px; letter-spacing: -0.8px; }
  .t-lead { font-size: 15px; line-height: 22px; }
  .t-l24, .t-b24m { font-size: 14px; line-height: 20px; }
  .head { left: 36px !important; top: auto !important; bottom: 120px; width: calc(100vw - 72px); }
  .head > * { width: 100% !important; }
  .head .btn { width: auto !important; margin-top: 20px !important; }
  .head p { margin-top: 16px !important; font-size: 15px; line-height: 22px; }
  .logo { top: 22px; left: 36px; font-size: 20px; }
  .nav { top: 16px; right: 36px; gap: 0; }
  .nav .nav__link { display: none; }
  .btn--14 { font-size: 13px; padding: 8px 12px; }
  .rail { left: 20px; top: 76px; }
  /* Phones show the rail as ticks only; the section names would sit on the content. */
  .rail__item .rail__label, .rail__item:hover .rail__label, .rail__item.is-current .rail__label { max-width: 0; opacity: 0; }
  .scene--delivery .band > .c-muted { display: none; }
  .scene--delivery .band { gap: 14px; }
  .backed { left: 36px; top: auto; bottom: 24px; width: calc(100vw - 72px); height: 32px; }
  .backed > :last-child { display: none; }
  .backed .t-caps16 { font-size: 12px; line-height: 16px; white-space: nowrap; }
  .backed__group { gap: 16px; }
  .backed__logos img:first-child { width: 88px; height: 18px; }
  .backed__logos img:last-child { width: 96px; height: 30px; }
  .band { left: 36px !important; width: calc(100vw - 72px) !important; top: auto; bottom: 40px; flex-wrap: wrap; row-gap: 6px; gap: 16px; }

  /* 02 */
  .spec-time { right: 36px; top: 76px; }
  .toggles { left: 36px; top: auto; bottom: 120px; width: calc(100vw - 56px); overflow-x: auto; gap: 22px; padding-bottom: 4px; scrollbar-width: none; }
  .toggles::-webkit-scrollbar { display: none; }
  .toggle { flex: none; }
  .readout { display: none; }
  .scene--specimen .band .metrics { display: none; }

  /* 03 */
  .media--tl { inset: 0 0 66.66% 0; }
  .media--tr { inset: 33.33% 0 33.33% 0; }
  .media--bottom { inset: 66.66% 0 0 0; }

  /* 04 */
  .transcript { right: 20px; top: 76px; width: calc(100vw - 40px); }
  .wave { left: 20px; top: auto; bottom: 24px; width: calc(100vw - 40px); }
  .wave__speakers { display: none; }
  .playhead { display: none; }

  /* 05 */
  .phase-box { left: auto; right: 36px; top: 76px; width: 190px; }
  .steps { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .steps .step { flex: none; }

  /* 06, 07 */
  .rows { left: 20px; top: 65px; width: calc(100vw - 40px); height: calc(100svh - 161px); }
  .row { flex: 1 1 0; height: auto !important; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 0 16px 0 44px; }
  .row > .t-l24, .detail { width: auto; font-size: 14px; line-height: 20px; }
  .detail { gap: 6px; }
  .detail .t-b16 { font-size: 13px; line-height: 18px; }

  /* 08 */
  .tree { left: 36px; top: 84px; width: calc(100vw - 72px); }
  .preview { display: none; }

  /* 09 */
  .stages { left: 20px; top: 65px; width: calc(100vw - 40px); height: auto; }
  .stage-row { flex: none; height: 56px; padding: 0 16px 0 44px; }
  .stage-row > .t-b24m { width: auto; font-size: 13px; line-height: 18px; max-width: 45%; }

  /* 12 forms */
  .form { left: 36px !important; top: 84px; width: calc(100vw - 72px) !important; max-height: calc(100svh - 120px); overflow-y: auto; padding-bottom: 24px; }
  .form .t-title-s { font-size: 28px; }
  .form__head p { font-size: 15px; line-height: 22px; }
  .form--assess .form__fields { grid-template-columns: 1fr; gap: 20px; }
  .form-done { left: 36px !important; top: 96px; width: calc(100vw - 72px) !important; }
  .form-done .t-d56 { font-size: 36px; }
  .stage.backed-stack .backed { top: auto; bottom: 24px; height: 32px; flex-direction: row; align-items: center; }

  /* 13 */
  .footer-brand { left: 36px; top: auto; bottom: 200px; gap: 12px; }
  .footer-brand .t-fig { font-size: 40px; }
  .footer-brand .t-lead { font-size: 16px; line-height: 24px; }
  .footer-links { left: 36px; right: auto; top: auto; bottom: 120px; flex-wrap: wrap; gap: 12px 24px; width: calc(100vw - 72px); }

  /* For Hospitals: the column fills the top, the headline sits under it */
  .hcol { left: 20px; top: 65px; width: calc(100vw - 40px); height: calc(100svh - 65px - 230px); }
  .scene--h .head { bottom: 120px; }
  .scene--h .head--sub { display: none; }
  .hrow { gap: 4px; padding: 0 16px; }
  .hrow .t-title-s { font-size: 20px; letter-spacing: -0.6px; }
  .hrow .t-b16m { font-size: 13px; line-height: 18px; }
  .hblock { padding: 12px 16px; gap: 6px; }
  .hblock .t-caps14 { font-size: 11px; line-height: 14px; }
  .hgrid > span { padding: 3px 0; font-size: 12px; line-height: 16px; }
  .hnode { padding: 10px 16px; gap: 4px; }
  .hnode .t-logo { font-size: 18px; }
  .hnode .t-b16m { font-size: 12px; line-height: 16px; }
  .conn { min-height: 14px; }
  .footprint .box { left: 12px; bottom: 12px; width: calc(110px + (100% - 24px - 110px) * var(--i) / 6); height: calc(30px + (100% - 24px - 30px) * var(--i) / 6); }
  .footprint .box span { left: 8px; top: 6px; font-size: 10px; line-height: 12px; }
  .hstage { height: auto; padding: 8px 16px; gap: 10px; font-size: 13px; }
  .hstage > * { font-size: 13px !important; line-height: 18px !important; }
  .hstage > :nth-child(3) { display: none; }

  .loader__count { left: 36px; top: auto; bottom: 120px; font-size: 32px; letter-spacing: -1px; }
}