/* ============================================================
   On-Device-Voice-Agent — start screen v3 (boot.js) · "connected-fitness premium"
   ONE VIEWPORT, no scroll. Brand bar · two columns — hero copy with
   the round Start button (progress ring + ETA) left, the machine
   silhouette with the "What you can say" carousel right · a bottom
   band — the four value-prop badges left, the per-model loading panel
   right (purpose + status, always visible). Plus the body-level
   "tap to resume audio" toast.

   The start screen's ONLY stylesheet (ui.css styles none of it): load
   after ui.css. Colours are token roles from tokens.css only.
   Sizing is container-driven (.start-screen is the container, size-
   contained so height queries work), so the same rules serve the
   scaled 1920×1080 console stage, an iPad in either orientation and
   a 390-px phone without presentation forks. A shrink ladder
   (container height/width queries, bottom of the file) keeps the
   three rows inside the viewport — nothing scrolls, nothing clips.
   ============================================================ */

.start-screen {
  position: absolute; inset: 0; z-index: 20;
  container-type: size;
  container-name: start;
  overflow: hidden;
  background:
    radial-gradient(70cqi 60cqi at 78% 40%, var(--coach-wash), transparent 70%),
    radial-gradient(80cqi 50cqi at 10% 110%, var(--user-wash), transparent 65%),
    linear-gradient(180deg, var(--bg-base), var(--bg-abyss));
  transition: opacity var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow);
}
.stage[data-screen="live"] .start-screen { opacity: 0; visibility: hidden; pointer-events: none; }
/* the desktop phone bezel (ui.css › body[data-presentation="phone"] .notch) draws its notch over the
   stage's top edge: reserve it the way a real phone's safe area is reserved. Padding the size container
   takes the room out of ITS height, so the shrink ladder below sees what is left. */
body[data-fit="phone-frame"] .start-screen { padding-top: 34px; }

.sv {
  width: 100%;
  max-width: 1680px;
  height: 100%;
  margin: 0 auto;
  padding: clamp(14px, 2.4cqi, 48px) clamp(16px, 4.4cqi, 88px);
  padding-top: max(clamp(14px, 2.4cqi, 48px), calc(env(safe-area-inset-top, 0px) + 10px));
  padding-bottom: max(clamp(14px, 2cqi, 40px), calc(env(safe-area-inset-bottom, 0px) + 10px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(12px, 1.8cqi, 32px);
  text-align: left;
}

/* ---------- brand bar ---------- */
.sv-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sv-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sv-mark {
  flex: none;
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  color: var(--coach); background: var(--coach-wash);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--coach) 40%, transparent), var(--glow-coach);
}
.sv-mark svg { width: 34px; height: 34px; }
.sv-names { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.sv-name { font-family: var(--font-display); font-size: 34px; letter-spacing: 0.06em; color: var(--ink); }
.sv-sub {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--coach); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sv-lang { flex: none; }
.sv-lang button { min-width: 48px; min-height: 44px; font-size: 14px; }

/* ---------- main: copy | visual ---------- */
.sv-main {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4cqi, 96px);
  min-height: 0;
}
.sv-copy, .sv-visual { min-height: 0; }
.sv-copy { min-width: 0; }
.sv-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-label);
}
.sv-eyebrow::before {
  content: ''; width: 28px; height: 3px; border-radius: 2px; background: var(--grad-voice);
}
.sv-tagline {
  margin-top: 16px;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(40px, 4.6cqi, 96px); line-height: 1.06; letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}
/* the tagline is two deliberate rows (strings startTaglineA/B) */
.sv-tag { display: block; }
.sv-lead {
  margin-top: 20px; max-width: 34em;
  font-size: clamp(18px, 1.3cqi, 22px); line-height: 1.5; color: var(--ink-dim);
}

/* ---------- the round Start button + ring ---------- */
.sv-cta-row {
  margin-top: clamp(24px, 2.8cqi, 52px);
  display: flex; align-items: center; gap: clamp(20px, 2.2cqi, 40px);
}
.sv-cta {
  --d: clamp(150px, 11.5cqi, 220px);
  position: relative; flex: none;
  width: var(--d); height: var(--d); border-radius: 50%;
  display: grid; place-items: center;
  color: var(--bg-abyss);
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--coach) 82%, var(--ink)), var(--coach) 60%, var(--coach-dim));
  box-shadow: var(--glow-coach), 0 18px 40px color-mix(in srgb, var(--coach) 30%, transparent),
              inset 0 -4px 0 color-mix(in srgb, var(--bg-abyss) 22%, transparent);
  transition: transform var(--t-fast) var(--ease-out), background var(--t-med), color var(--t-med), box-shadow var(--t-med);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sv-cta:hover:not([data-busy="1"]) { transform: translateY(-2px) scale(1.015); }
.sv-cta:active:not([data-busy="1"]) { transform: scale(0.97); }
.sv-cta:focus-visible { outline: 3px solid var(--cyan); outline-offset: 8px; }
.sv-pulse {
  position: absolute; inset: -10px; border-radius: 50%;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--coach) 50%, transparent);
  animation: sv-pulse 2.4s var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes sv-pulse { from { transform: scale(0.94); opacity: 1; } to { transform: scale(1.16); opacity: 0; } }
.sv-ring {
  position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px);
  transform: rotate(-90deg);
  opacity: 0; transition: opacity var(--t-med);
  pointer-events: none;
}
.sv-ring circle { fill: none; stroke-width: 4; }
.sv-ring-track { stroke: var(--panel-edge); }
.sv-ring-fill {
  stroke: var(--coach); stroke-linecap: round;
  stroke-dasharray: 0 100;
  filter: drop-shadow(0 0 6px var(--coach-glow));
  transition: stroke-dasharray var(--t-slow) var(--ease-out);
}
.sv-cta-core {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  max-width: 78%; text-align: center;
}
.sv-cta-icon { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sv-cta .start-btn-lbl {
  font-size: clamp(16px, 1.05cqi, 20px); font-weight: 700; line-height: 1.2;
  white-space: normal; overflow: visible;
}
.sv-cta .start-btn-pct {
  font-family: var(--font-display); font-size: clamp(40px, 3.4cqi, 64px); line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.sv-cta .start-btn-pct::after { content: '%'; font-size: 0.42em; margin-left: 2px; color: var(--ink-dim); }
.sv-cta .start-btn-pct:empty { display: none; }

/* loading: a dark disc, the ring carries the progress */
.sv-cta[data-busy="1"] {
  cursor: progress;
  color: var(--ink-dim);
  background: radial-gradient(circle at 50% 30%, var(--bg-lift), var(--bg-base) 70%);
  box-shadow: var(--elev-2), 0 0 60px var(--coach-wash);
}
.sv-cta[data-busy="1"] .sv-ring { opacity: 1; }
.sv-cta[data-busy="1"] .sv-pulse,
.sv-cta[data-busy="1"] .sv-cta-icon { display: none; }
.sv-cta[data-busy="1"] .start-btn-lbl { font-size: 14px; font-weight: 600; color: var(--ink-faint); }
.sv-cta[data-err="1"] { box-shadow: var(--glow-amber); }
.start-screen[data-phase="ready"] .sv-ring { opacity: 1; }

.sv-cta-side { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sv-hint { font-size: clamp(16px, 1.1cqi, 19px); line-height: 1.45; color: var(--ink-dim); max-width: 28em; }
.start-screen[data-phase="error"] .sv-hint { color: var(--danger); }
.sv-eta {
  min-height: 1.4em;
  font-family: var(--font-mono); font-size: 14px; color: var(--coach);
  font-variant-numeric: tabular-nums;
}
.sv-eta:empty { visibility: hidden; }

/* ---------- value-prop badges (under Start) · the loader chip · the "runs on" row ---------- */
.sv-facts {
  list-style: none; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  margin: clamp(16px, 1.8cqi, 28px) 0 0; padding: 0;
  width: 100%; max-width: 44em; min-width: 0;
}
/* a card: the status dot + the title on line one, the description below, left-aligned under the title */
.sv-facts li {
  display: grid; grid-template-columns: 7px minmax(0, 1fr); column-gap: 8px; row-gap: 1px;
  align-content: start; min-width: 0;
  padding: 8px 14px; border-radius: 18px;
  font-size: 15px; line-height: var(--lh-snug); color: var(--ink-dim);
  background: var(--panel); box-shadow: var(--elev-1);
}
.sv-facts li b { grid-area: 1 / 2; font-weight: 700; color: var(--ink); }
.sv-facts li::before { content: ''; grid-area: 1 / 1; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok-wash); }
.sv-facts li span { grid-area: 2 / 2; min-width: 0; }

/* the loader chip: labelled, beside the download hint; its rows live in a popover */
.sv-boot-wrap { position: relative; margin-top: 4px; align-self: flex-start; }
.sv-boot-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  border-radius: var(--r-pill);
  color: var(--ink-dim); background: var(--panel); box-shadow: var(--elev-1);
  transition: background var(--t-fast), color var(--t-fast);
}
.sv-boot-toggle:hover { color: var(--ink); background: var(--panel-edge); }
.sv-boot-toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.sv-boot-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sv-boot-lbl { font-size: 14px; font-weight: 600; }
.sv-boot-toggle .boot-overall { font-size: 12px; }
.start-screen[data-phase="loading"] .sv-boot-toggle { color: var(--coach); }
.start-screen[data-phase="loading"] .sv-boot-toggle svg { animation: blink 1.1s steps(2, jump-none) infinite; }
.start-screen[data-phase="ready"] .sv-boot-toggle svg { color: var(--cyan); }
.start-screen[data-phase="error"] .sv-boot-toggle { color: var(--danger); }

/* where it runs — a quiet row for integrators */
.sv-runs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 0; color: var(--ink-faint); }
.sv-runs-lbl { font-size: 12px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.sv-runs ul { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.sv-runs li { padding: 4px 13px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--ink-dim); background: var(--panel); box-shadow: var(--elev-1); }

/* ---------- visual: the how-it-works card + the carousel ---------- */
.sv-visual {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; align-items: stretch;
  gap: clamp(12px, 1.4cqi, 20px);
}
/* the card: the drawing (left) + its five beats (right). The beats light in turn
   (boot.js › flow); every beat is a group of the drawing (.sv-p[data-p]) */
.sv-flow {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 6px clamp(14px, 1.6cqi, 26px); align-items: center;
  padding: 20px 22px 14px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--bg-lift) 82%, transparent);
  box-shadow: var(--elev-3);
}
.sv-machine { min-width: 0; }
.sv-machine svg { display: block; width: 100%; height: auto; overflow: visible; }
.sv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.sv-steps li { display: flex; gap: 10px; align-items: center; font-size: clamp(14px, 1.05cqi, 16px); font-weight: 600; line-height: 1.2; color: var(--ink-faint); transition: color var(--t-med); }
.sv-steps svg, .sv-steps .s { display: none; }   /* the phone tile's glyph + short label */
.sv-steps b { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--panel-edge); color: var(--ink-dim); transition: background var(--t-med), color var(--t-med); }
.sv-steps li.lit { color: var(--ink); }
.sv-steps li.lit b { background: var(--coach); color: var(--bg-abyss); }
.sv-steps li[data-tone="safe"].lit b { background: var(--danger); }
.sv-flow-foot {
  grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap;
  margin: 6px 0 0; padding-top: 10px; border-top: 1px solid var(--panel-edge);
  font-size: 13px; color: var(--ink-dim);
}
.sv-flow-foot i { font-style: normal; display: inline-flex; align-items: center; gap: 7px; }
.sv-flow-foot i::before { content: ''; width: 20px; border-top: 2px dashed var(--danger); }

.sv-st-a { stop-color: var(--bg-lift); }
.sv-st-b { stop-color: var(--orb-mid); }
.sv-m-deck { stroke: var(--hairline); stroke-width: 2; }
.sv-m-belt { stroke: var(--ink-faint); stroke-width: 3; }
.sv-m-speed { stroke: var(--cyan-dim); stroke-width: 4; opacity: 0.8; stroke-dasharray: 1 0; }
.sv-m-roller { fill: var(--bg-abyss); stroke: var(--hairline); stroke-width: 2; }
.sv-m-post { stroke: color-mix(in srgb, var(--ink) 22%, var(--bg-lift)); stroke-width: 11; }
.sv-m-rail { stroke: color-mix(in srgb, var(--ink) 30%, var(--bg-lift)); stroke-width: 6; }
.sv-m-console { fill: var(--bg-lift); stroke: color-mix(in srgb, var(--ink) 30%, var(--bg-lift)); stroke-width: 2; }
.sv-m-screen { fill: var(--coach-wash); stroke: var(--coach); stroke-width: 1.5; filter: drop-shadow(0 0 10px var(--coach-glow)); }
.sv-m-readout { fill: var(--coach); font-size: 20px; font-weight: 700; stroke: none; }
.sv-m-wave { stroke: var(--coach); stroke-width: 3.5; opacity: 0.25; animation: sv-wave 2.4s var(--ease-out) infinite; }
.sv-w2 { animation-delay: 0.25s; }
.sv-w3 { animation-delay: 0.5s; }
@keyframes sv-wave { 0%, 100% { opacity: 0.18; } 35% { opacity: 0.95; } }
.start-screen[data-phase="loading"] .sv-m-speed { stroke-dasharray: 18 14; animation: sv-belt 0.9s linear infinite; }
@keyframes sv-belt { to { stroke-dashoffset: 64; } }

/* the five beats: a beat dims until boot.js › flowSet lights it (.lit); all five lit under reduced
   motion. A dimmed beat's own loops stand down, and the whole card stands down on the live screen. */
.sv-p { opacity: 0.42; transition: opacity var(--t-med); }
.sv-p.lit { opacity: 1; filter: drop-shadow(0 0 6px var(--coach-glow)); }
.sv-p[data-tone="safe"].lit { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--danger) 80%, transparent)); }
.sv-p:not(.lit) :is(.sv-fx-act, .sv-fx-dot), .stage[data-screen="live"] .start-screen * { animation-play-state: paused; }
/* Words are never dimmed: a speech bubble appears on the beat that speaks it (1 "Faster", 5 "Okay."),
   and the console screen shows ONE thing — the thinking dots (3, deciding) or the readout (5, the
   result), which share its rect. The readout is hidden until beat 5, and the dots step aside whenever
   it shows (also under reduced motion, where all five are lit); the two swap instantly, never crossfade. */
.sv-bub { transition: opacity var(--t-med); }
.sv-p:not(.lit) :is(.sv-bub, .sv-m-readout),
.sv-machine svg:has(.sv-p[data-p~="5"].lit) .sv-fx-dots { opacity: 0; }

/* the voice loop over the silhouette: speech in (bubble → console), the command
   through the safety gate to the belt. Each keyframe offset is a whole multiple
   of its own dash period (seamless); a live mic overrides the speech path. */
.sv-fx-person { stroke: var(--ink-dim); stroke-width: 3.5; fill: none; stroke-linecap: round; }
.sv-bub rect, .sv-bub path { fill: var(--bg-lift); stroke-width: 2; }
.sv-bub-you rect, .sv-bub-you path { stroke: var(--cyan); }
.sv-bub-coach rect, .sv-bub-coach path { stroke: var(--coach); }
.sv-bub .sv-bub-cut { stroke: var(--bg-lift); stroke-width: 4; }
.sv-bub text { fill: var(--ink); font-size: 17px; font-weight: 700; stroke: none; }
.sv-fx-say { stroke: var(--cyan); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-dasharray: 3 9; opacity: 0.75; animation: sv-flow-a 3.2s linear infinite; }
.sv-fx-act { stroke: var(--danger); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-dasharray: 4 10; animation: sv-flow-b 3.6s linear infinite; }
.sv-ah-say, .sv-ah-act { fill: none; stroke-width: 2; }
.sv-ah-say { stroke: var(--cyan); } .sv-ah-act { stroke: var(--danger); }
.sv-shield { fill: color-mix(in srgb, var(--danger) 16%, var(--bg-abyss)); stroke: var(--danger); stroke-width: 2.5; }
.sv-shield-ck { fill: none; stroke: var(--danger); stroke-width: 3; }
.sv-badges circle { fill: var(--coach); }
.sv-badges .sv-bd-safe { fill: var(--danger); }
.sv-badges text { fill: var(--bg-abyss); font-size: 12px; font-weight: 700; stroke: none; }
.sv-fx-dot { fill: var(--coach); opacity: 0.45; animation: sv-dot 2.2s ease-in-out infinite; }
.start-screen[data-phase="loading"] .sv-fx-say { opacity: 0.9; animation: sv-flow-a 1.1s linear infinite; }
.start-screen[data-phase="loading"] .sv-fx-act { animation: sv-flow-b 1.2s linear infinite; }
.start-screen[data-phase="loading"] .sv-fx-dot { animation: sv-dot 1.2s ease-in-out infinite; }
.sv-fx-dots circle:nth-child(2) { animation-delay: 0.2s; }
.sv-fx-dots circle:nth-child(3) { animation-delay: 0.4s; }
@keyframes sv-flow-a { to { stroke-dashoffset: -12; } }
@keyframes sv-flow-b { to { stroke-dashoffset: -14; } }
@keyframes sv-dot { 0%, 100% { opacity: 0.2; } 40% { opacity: 1; } }
/* the mic is live (boot.js › micFx): the hearing arcs and the speech-in
   dashes are LEVEL now, not ambient — the keyframes stand down and the
   per-frame paints own opacity and the dash offset */
.start-screen[data-miclive] .sv-m-wave { animation: none; }
.start-screen[data-miclive] .sv-fx-say { animation: none; opacity: 0.9; }

.sv-say {
  position: relative;
  width: 100%;
  padding: 16px 22px 14px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--bg-lift) 96%, transparent);
  box-shadow: var(--elev-3);
}
.sv-say-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sv-say-title {
  font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-faint);
}
.sv-say-nav { display: flex; gap: 6px; margin-right: -10px; }
.sv-say-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-dim);
  transition: background var(--t-fast), color var(--t-fast);
}
.sv-say-btn:hover { background: var(--panel); color: var(--ink); }
.sv-say-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.sv-say-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* ONE left edge for the whole card. All slides share ONE grid cell, so the cell is as tall as the
   tallest slide in the current language and width: nothing is clipped and the dots row never moves. */
.sv-say-slides { display: grid; }
.sv-say-slide { grid-area: 1 / 1; visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; padding: 8px 0 2px; text-align: left; }
.sv-say-slide.on { visibility: visible; }
.sv-say-feat { font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em; color: var(--coach); }
.sv-say-main {
  font-size: clamp(22px, 1.6cqi, 30px); font-weight: 700; line-height: 1.25; color: var(--ink);
  quotes: '\201C' '\201D';
  text-wrap: balance;
}
.sv-say-main::before, .sv-say-main::after { color: var(--cyan); }
.sv-say-slide.sv-in { animation: rise var(--t-med) var(--ease-out); }   /* ui.css's rise */
/* the coach's REAL reply (the knowledge base's own answer / the memory ack) on two slides */
.sv-say-re {
  max-width: 100%; padding-left: 12px; border-left: 2px solid var(--coach);
  font-size: var(--fs-sm); line-height: 1.35; color: var(--ink-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* autoplay clock: the ACTIVE dot is a progress bar that fills over 5 s; its animationend advances the
   slide (boot.js › mountSay), so the picture and the timing cannot drift. Hover, or KEYBOARD focus
   (a mouse click on an arrow must not freeze it), pauses both. */
.sv-say-dots { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.sv-say-dot {
  position: relative; flex: none; width: 6px; height: 6px; border-radius: var(--r-pill);
  background: var(--panel-edge); cursor: pointer;
  transition: width var(--t-med) var(--ease-out);
}
.sv-say-dot::after { content: ''; position: absolute; inset: -12px -3px; }   /* a finger-sized hit area */
.sv-say-dot i { position: absolute; inset: 0; border-radius: inherit; background: var(--cyan); clip-path: inset(0 100% 0 0); }
.sv-say-dot.on { width: 28px; }
.sv-say-dot.on i { animation: sv-say-fill 5s linear forwards; }
@media (hover: hover) { .sv-say:hover .sv-say-dot.on i { animation-play-state: paused; } }
.sv-say:has(:focus-visible) .sv-say-dot.on i { animation-play-state: paused; }
@keyframes sv-say-fill { to { clip-path: inset(0 0 0 0); } }

/* ---------- the per-model loading panel: a popover over its toggle ---------- */
.sv-boot {
  position: absolute; z-index: 30;
  left: 0; top: calc(100% + 10px);
  width: min(520px, calc(100vw - 32px));
  display: flex; flex-direction: column;
  padding: 12px 14px 8px;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--bg-lift) 96%, transparent);
  box-shadow: var(--elev-3), 0 0 0 1px var(--panel-edge);
  transition: box-shadow var(--t-med);
}
.sv-boot[hidden] { display: none; }
/* a failed stage is shouted, not folded away — the rows are the retry handle */
.start-screen[data-phase="error"] .sv-boot {
  box-shadow: var(--elev-3), 0 0 0 1px color-mix(in srgb, var(--danger) 55%, transparent), var(--glow-amber);
}
.boot-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 0 4px 6px;
}
.boot-title { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-dim); }
.boot-overall { font-family: var(--font-mono); font-size: 13px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.boot-card {
  min-height: 0;
  padding: 2px 6px;
}
/* one row per stage (boot.js): dot · purpose · status · bar, on one line */
.boot-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto minmax(72px, 150px);
  grid-template-areas: "dot name stat bar";
  column-gap: var(--sp-3);
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid var(--panel-edge);
}
.boot-row:first-child { border-top: 0; }
.boot-dot { grid-area: dot; justify-self: center; width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); }
.boot-row[data-state="loading"] .boot-dot { background: var(--amber); animation: blink 1.1s steps(2, jump-none) infinite; }
.boot-row[data-state="ready"] .boot-dot { background: var(--cyan); box-shadow: 0 0 8px var(--cyan-glow); }
.boot-row[data-state="error"] .boot-dot { background: var(--danger); }
.boot-row[data-state="error"] { cursor: pointer; }
.boot-row-name { grid-area: name; min-width: 0; font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.boot-row-stat { grid-area: stat; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-dim); text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.boot-row[data-state="ready"] .boot-row-stat { color: var(--cyan); }
.boot-row[data-state="error"] .boot-row-stat { color: var(--danger); }
.boot-bar { grid-area: bar; height: 4px; border-radius: 2px; background: var(--panel-edge); overflow: hidden; }
.boot-bar-fill { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--coach); transition: width var(--t-med) var(--ease-out); }
.boot-row[data-state="ready"] .boot-bar-fill { background: var(--cyan); }
.boot-row[data-state="error"] .boot-bar-fill { background: var(--danger); }
/* unknown size: a highlight sweeps the bar (a translated pseudo-element —
   transform only, no background-position repaint) */
.boot-bar-fill.indeterminate { width: 100% !important; position: relative; overflow: hidden; background: none; }
.boot-bar-fill.indeterminate::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent 0, var(--coach) 50%, transparent 100%);
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer { from { transform: translateX(-60%); } to { transform: translateX(210%); } }

/* ---------- shrink ladder: keep the rows inside the viewport ---------- */
/* short landscape (1180×820, 1366×1024): trim the tallest pieces first */
@container start (max-height: 940px) {
  .sv-tagline { font-size: clamp(36px, 4.3cqi, 76px); }
  .sv-lead { margin-top: 16px; font-size: clamp(16px, 1.2cqi, 21px); }
  .sv-flow { padding: 16px 18px 12px; }
  .sv-steps { gap: 11px; }
  .sv-say { padding: 14px 18px 12px; }
  .sv-say-main { font-size: clamp(20px, 1.6cqi, 29px); }
  .sv-cta { --d: clamp(130px, 9.5cqi, 180px); }
  .sv-cta-row { margin-top: clamp(20px, 2.4cqi, 40px); }
  .sv-facts { margin-top: 20px; }
  .boot-row { padding: 5px 0; }
}
@container start (max-height: 940px) or (max-width: 1100px) {
  .sv-facts li { padding: 6px 12px; font-size: 14px; }
}
/* phone, or a portrait tablet / window: one column, the drawing card above the carousel. A landscape
   container keeps the two columns at any width (one column cannot fit a 1024x768 landscape) */
@container start (max-width: 600px) or ((max-width: 1100px) and (orientation: portrait)) {
  .sv-main { grid-template-columns: minmax(0, 1fr); align-items: start; gap: clamp(10px, 1.6cqi, 18px); }
  .sv-copy { display: contents; }
  .sv-eyebrow { order: 1; }
  .sv-tagline { order: 2; margin-top: 0; font-size: clamp(32px, 5.6cqi, 52px); }
  .sv-lead { order: 3; margin-top: 0; font-size: clamp(16px, 2cqi, 19px); }
  .sv-cta-row { order: 4; margin-top: 0; }
  .sv-visual { order: 5; }
  .sv-facts { order: 6; margin-top: 0; max-width: none; }
  .sv-flow { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); padding: 10px 16px 8px; }
  .sv-steps { gap: 8px; }
  .sv-cta { --d: clamp(110px, 13.5cqi, 150px); margin-left: 12px; }
  .sv-say-main { font-size: clamp(19px, 2.8cqi, 25px); }
}
/* phone: compact brand; the drawing becomes a five-tile strip (the same list, glyph + short label) */
@container start (max-width: 600px) {
  .sv { gap: 10px; }
  .sv-mark { width: 40px; height: 40px; border-radius: 12px; }
  .sv-mark svg { width: 25px; height: 25px; }
  .sv-name { font-size: 22px; }
  .sv-sub { font-size: 10px; letter-spacing: 0.1em; white-space: normal; line-height: 1.25; }
  .sv-lang button { min-width: 44px; min-height: 40px; font-size: 13px; }
  .sv-eyebrow { font-size: var(--fs-micro); letter-spacing: 0.2em; }
  .sv-tagline { font-size: clamp(26px, 8cqi, 36px); }
  .sv-lead { font-size: 14px; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sv-flow { display: block; padding: 0; background: none; box-shadow: none; }
  .sv-machine, .sv-flow-foot, .sv-steps b, .sv-steps .f { display: none; }
  .sv-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .sv-steps li { flex-direction: column; justify-content: flex-start; gap: 4px; padding: 8px 2px 6px; border-radius: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--panel-edge); text-align: center; font-size: 11px; line-height: 1.15; color: var(--ink-dim); }
  .sv-steps li.lit { color: var(--ink); box-shadow: inset 0 0 0 1px var(--coach); }
  .sv-steps li[data-tone="safe"].lit { box-shadow: inset 0 0 0 1px var(--danger); }
  .sv-steps svg, .sv-steps .s { display: block; }
  .sv-steps svg { width: 22px; height: 22px; fill: none; stroke: var(--coach); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .sv-steps li[data-tone="safe"] svg { stroke: var(--danger); }
  .sv-say { padding: 10px 14px 8px; }
  .sv-say-slide { gap: 3px; }
  .sv-say-feat { font-size: 14px; }
  .sv-say-main { font-size: 17px; }
  .sv-say-re { font-size: 12.5px; }
  .sv-say-btn { width: 40px; height: 40px; }
  .sv-cta-row { gap: 14px; margin-top: 0; }
  .sv-cta { --d: 108px; }
  .sv-cta .start-btn-pct { font-size: 28px; }
  .sv-cta-side { gap: 4px; }
  .sv-hint { font-size: 12.5px; }
  .sv-eta:empty { display: none; }
  .sv-boot-wrap { margin-top: 0; }
  .sv-boot-toggle { min-height: 40px; padding: 0 12px; }
  .sv-boot-lbl { font-size: 12.5px; }
  .sv-facts { gap: 6px; }
  /* phone: the headline rides over its line — a 2-col grid of compact cards */
  .sv-facts li { grid-template-columns: minmax(0, 1fr); padding: 6px 10px; font-size: 11.5px; border-radius: var(--r-md); }
  .sv-facts li::before { display: none; }
  .sv-facts li b, .sv-facts li span { grid-column: 1; }
  .sv-runs { gap: 8px; }
  .sv-runs li { font-size: 12px; padding: 3px 10px; }
  .sv-boot { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; padding: 10px 12px 6px; }
  .boot-row { padding: 4px 0; column-gap: 10px; }
  .boot-row-name { font-size: 12px; }
  .boot-bar { height: 3px; }
  .boot-title, .boot-overall { font-size: 12px; }
}
/* a short phone: the platform row is the first to go */
@container start (max-height: 900px) and (max-width: 600px) {
  .sv-runs { display: none; }
}

/* ---------- the "tap to resume audio" toast (body-level, fixed) ---------- */
.audio-toast {
  position: fixed; z-index: 1000;
  left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  transform: translate(-50%, 20px);
  display: flex; align-items: center; gap: 14px;
  min-height: 56px; max-width: calc(100vw - 32px);
  padding: 10px 22px 10px 16px;
  border-radius: var(--r-pill);
  text-align: left;
  color: var(--ink);
  background: color-mix(in srgb, var(--bg-lift) 92%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: var(--elev-3), 0 0 0 1px color-mix(in srgb, var(--coach) 45%, transparent), var(--glow-coach);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out), visibility 0s linear var(--t-med);
}
.audio-toast[data-show="1"] {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.audio-toast svg {
  flex: none; width: 26px; height: 26px; padding: 8px; box-sizing: content-box;
  border-radius: 50%; background: var(--coach); color: var(--bg-abyss);
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.audio-toast-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.audio-toast-txt b { font-size: 16px; font-weight: 700; }
.audio-toast-txt small { font-size: 13px; color: var(--ink-faint); }
.audio-toast:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* ---------- reduced motion: ui.css's global rule stops every loop; the waves then rest at
   the static level they need to read ---------- */
@media (prefers-reduced-motion: reduce) {
  .sv-m-wave { opacity: 0.6; }
  .start-screen[data-miclive] .sv-fx-say { opacity: 0.55; }   /* no marching — the arcs still breathe with the voice */
  .sv-say-dot.on i { animation: none; clip-path: inset(0 0 0 0); }   /* no autoplay (animationend never fires): a plain "you are here" pill */
}