/*
 * Bryn microsite ⬩ Fable Exploration v2 ⬩ shared styles
 * Direction: The High Ground (DESIGN-NOTES.md). v0.6 components carried
 * verbatim where canon defines them; extensions marked E1 to E7.
 * Consumes tokens.css only; no raw values outside documented one-offs.
 */

html {
  /* Edge instruments bleed off-frame by design (the terrain contours,
     the survey tick exiting the line). clip, not hidden: no scroll
     container, so the horizontal scrollbar can never flash and shift
     the page height mid-sweep. */
  overflow-x: clip;
}

body {
  letter-spacing: var(--track-body);
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }

a { color: inherit; }

.frame {
  width: 100%;
  max-width: var(--frame-max);
  margin: 0 auto;
  padding-left: var(--frame-pad);
  padding-right: var(--frame-pad);
}

/* ============================================================
 * Topbar ⬩ canon component 18
 * ============================================================ */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  background: rgba(3, 7, 17, 0.78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: var(--border-hairline);
}
@media (prefers-reduced-transparency: reduce) {
  .topbar { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.topbar-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-6);
  max-width: var(--frame-max);
  margin: 0 auto;
  padding: 14px var(--frame-pad);
}

/* Bryn-by-Civic lockup ⬩ canon component 26, deck cover form */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.brand .mark { width: 24px; height: 24px; color: var(--brand); flex-shrink: 0; }
.brand .word {
  font-family: var(--font-sans);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--track-default);
  font-size: 17px;
  line-height: 1;
}
.brand .sep {
  /* 1.9 (Chris Jun 16): the slash read too faint on his screen. Made
     more visible (lighter on dark = brighter) and a touch taller. */
  display: inline-block;
  width: 1px;
  height: 15px;
  background: var(--text-muted);
}
.brand .by {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: 12.5px;
  line-height: 1;
  color: var(--text);
}
/* 1.9: more air between "by" and "Civic" (was 3px). Chris Pass 2 (1.6):
   loosened a touch more (was 5px); the vertical slash separator stays. */
.brand .by .quiet { color: var(--text-muted); margin-right: 7px; font-weight: var(--weight-regular); }

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
}
.nav a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.5em;
}
/* Phase 2 IA slots ⬩ non-anchors so the dead-link check stays meaningful */
.nav .slot, footer .slot {
  color: var(--text-muted);
  cursor: default;
}
.nav .slot .p2, footer .slot .p2 {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
  color: var(--text-muted);
  border: var(--border-hairline);
  border-radius: var(--radius-soft);
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: 2px;
}
.topbar-cta { display: inline-flex; align-items: center; gap: 16px; }
.topbar-cta .walk {
  font-size: var(--step--1);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.topbar-cta .walk:hover { color: var(--text); }

/* ============================================================
 * Buttons ⬩ canon component 1
 * ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--step-0);
  padding: 12px 20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-tab);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.btn:hover { border-color: var(--brand); color: var(--brand-soft); }
.btn:active { background: var(--surface-alt); }
.btn .arrow { font-family: var(--font-mono); }
.btn.primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--text-inverse);
}
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--text-inverse); }
.btn.small { padding: 8px 14px; font-size: var(--step--1); border-radius: var(--radius-card); }

/* Inverted CTA inside the drench ⬩ canon component 6 */
.drench .btn.invert {
  background: #030711; /* documented one-off: canon drench CTA inverts to near-black */
  border-color: #030711;
  color: var(--text-inverse);
}
.drench .btn.invert:hover { color: var(--brand-soft); }

/* ============================================================
 * Type registers
 * ============================================================ */

.kicker {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--step--1);
  letter-spacing: var(--track-stamp-wide);
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: var(--sp-3);
}
.kicker.dim { color: var(--text-muted); }
.kicker .di { color: var(--text); }

h1 {
  font-weight: var(--weight-heavy);
  letter-spacing: var(--track-tight);
  line-height: var(--leading-display);
  font-size: var(--step-4);
}
h2 {
  font-weight: var(--weight-heavy);
  letter-spacing: var(--track-snug);
  line-height: var(--leading-tight);
  font-size: var(--step-3);
}
h3 {
  font-weight: var(--weight-strong);
  letter-spacing: var(--track-snug);
  line-height: var(--leading-snug);
  font-size: var(--step-1);
}
/* E6 ⬩ one summit statement per page maximum */
.summit { font-weight: var(--weight-black); }

/* Hand-set headline breaks: one sentence per line wherever .line is used */
h1 .line { display: block; }

h1 u, h2 u, .summit u {
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.14em;
}
h1 em, h2 em, h3 em { font-style: normal; color: var(--brand); }
h2 .quiet-em { font-style: normal; color: var(--text-muted); }

.lede {
  color: var(--text-secondary);
  font-size: var(--step-1);
  line-height: var(--leading-body);
  max-width: 58ch;
}
.lede b, p b { color: var(--text); font-weight: var(--weight-semibold); }
/* 1.12 (Chris Jun 16): thread the "minute" mentions in one color so the
   speed-to-act value reads as a through-line. Brand purple, upright, the
   canon noun color-fill register; works in both headings and prose. */
.minute { color: var(--brand); font-style: normal; font-weight: inherit; }
/* D6 (Brad Jun 17): the hero "so what" outcome line, above the lede. */
.hero-outcome { font-size: var(--step-1); font-weight: var(--weight-semibold); color: var(--text); line-height: 1.3; margin: 0 0 var(--sp-3) 0; }
p { color: var(--text-secondary); }

/* Diamond separator + arrow contrast ⬩ canon components 11, 12 */
.di { color: var(--brand); margin: 0 0.2em; display: inline-block; }
.kicker .di, .stamp .di, .pn-chip .di, .pn-display .di, .drench .di { color: var(--text); }
.ar { color: var(--brand); font-weight: var(--weight-regular); }
.pn-chip .ar, .pn-display .ar { color: var(--text); margin: 0 0.15em; }
h2 .ar, h3 .ar, .loop-line .ar { color: var(--brand); margin: 0 0.18em; }

/* Pattern-name pill ⬩ canon components 2, 7 */
.pn-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: 0.92em;
  color: var(--brand-soft);
  background: var(--brand-pill-bg);
  border: 1px solid var(--brand-pill-br);
  padding: 2px 8px;
  border-radius: var(--radius-soft);
  white-space: nowrap;
}
/* Chris Pass 2 (2.4a): a pattern-name chip set inline in flowing prose
   (e.g. the Queryable lede, the Plays hero) wraps like the surrounding body
   text instead of forcing an awkward break. Standalone chip-rows stay nowrap. */
.lede .pn-chip, p .pn-chip { white-space: normal; }
.pn-display {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--step-2);
  color: var(--brand);
  line-height: var(--leading-snug);
}
.pn-display .win { color: var(--brand-soft); }

/* E6 ⬩ the loop line as display mono */
.loop-line {
  font-family: var(--font-mono);
  font-size: var(--step-2);
  color: var(--text-secondary);
  letter-spacing: var(--track-mono-meta);
}
.loop-line u {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
}

/* Mono meta strip */
.meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
  letter-spacing: var(--track-mono-meta);
}
.meta b { color: var(--text); font-weight: var(--weight-semibold); }

/* Quote ⬩ deck idiom (statement bar), canon component 15 register */
.quote {
  border-left: 2px solid var(--brand);
  padding: 6px 0 6px 20px;
  color: var(--text-secondary);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  max-width: 64ch;
}
.quote b { color: var(--text); font-weight: var(--weight-semibold); }

/* ============================================================
 * E2 ⬩ Elevation bands. Sections declare an elevation; seams are
 * hairlines. Max one elev-3 and one elev-4 per page.
 * ============================================================ */

.band { padding: var(--rhythm-section) 0; }
.band.elev-0 { background: var(--elev-0); }
/* D5 / 1.2.3 (Chris Jun 16): the section shifts read as barely
   noticeable. Seams turned up from hairline to the stronger border so the
   elevation ladder is legible as you scroll. Conservative bump; the fuller
   texture/lightness pass is the queued palette-riff round. */
.band.elev-1 { background: var(--elev-1); border-top: var(--border-strong); border-bottom: var(--border-strong); }
.band.elev-2 { background: var(--elev-2); border-top: var(--border-strong); border-bottom: var(--border-strong); }
.band.elev-3 { background: var(--elev-3); border-top: var(--border-strong); border-bottom: var(--border-strong); }
.band.compact { padding: calc(var(--rhythm-section) * 0.55) 0; }

.band-head { margin-bottom: var(--rhythm-block); max-width: 70ch; }
.band-head .lede { margin-top: var(--sp-4); }

/* E1 ⬩ seam rule: short ticked survey rule at section seams */
/* Chris Pass 2 (1.1): the elevation seams read stronger this pass: the
   survey ticks are denser and taller (no glow/halo; the heavier texture
   round is parked). */
.seam-rule {
  display: flex;
  align-items: center;
  gap: 0;
  height: 10px;
  margin-bottom: var(--sp-6);
}
.seam-rule i {
  display: block;
  width: 1px;
  height: 10px;
  background: var(--border-strong);
  margin-right: 18px;
}
.seam-rule i:nth-child(4n+1) { height: 10px; }
.seam-rule i:nth-child(4n+2), .seam-rule i:nth-child(4n+3), .seam-rule i:nth-child(4n) { height: 6px; align-self: flex-end; }

/* ============================================================
 * E1 ⬩ Survey hero. Content stands on a drawn ground line; the horizon
 * mark stands on the line the way it stands in the logo. A read-head
 * tick travels the line (evidence of watching).
 * ============================================================ */

.hero {
  background: var(--elev-0);
  padding-top: clamp(var(--sp-9), 10vh, var(--sp-11));
  position: relative;
}
.hero .hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(var(--sp-7), 4vw, var(--sp-9));
  align-items: center;
  padding-bottom: clamp(var(--sp-9), 9vh, var(--sp-10));
}
.hero .hero-grid.solo { grid-template-columns: 1fr; }
.hero-copy { display: flex; flex-direction: column; gap: var(--sp-6); align-items: flex-start; }
.hero-copy .cta-row { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.hero-copy .terms { margin-top: calc(-1 * var(--sp-3)); }

/* Mono descriptor ⬩ canon §3 hierarchy */
.descriptor {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--track-mono-meta);
  color: var(--text-muted);
  line-height: var(--leading-snug);
}
.descriptor em { font-style: normal; color: var(--brand); }

/* The survey line itself */
.survey {
  position: relative;
  border-bottom: 1px solid var(--border-strong);
}
.survey-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  max-width: var(--frame-max);
  margin: 0 auto;
  padding: 0 var(--frame-pad);
}
.survey .standing-mark {
  width: 44px;
  height: 44px;
  color: var(--brand);
  display: block;
  margin-bottom: -2px; /* ground line of the mark sits on the survey line */
}
.survey .stamp {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 8px;
}
.survey .stamp b { color: var(--text); font-weight: var(--weight-semibold); }
.survey .tick {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 1px;
  height: 7px;
  background: var(--brand);
  animation: survey-tick var(--dur-survey) linear infinite;
}

/* E8 ⬩ split hero: sky / survey line / ground (riff B ingested,
   2026-06-10). The logo's geometry at viewport scale: statement above
   the line, working product standing astride it. */
.hero.split { display: flex; flex-direction: column; padding-top: clamp(var(--sp-9), 10vh, var(--sp-11)); }
.hero.split .sky {
  flex: 1.15 1 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* clearance ≥ the panel's pull-up, so the headline can never collide
     with the station straddling the line at any viewport width */
  padding-bottom: calc(clamp(90px, 12vh, 150px) + var(--sp-6));
  padding-top: 0; /* hero-level padding-top now owns the top rhythm (matches other pages) */
}
.hero.split .sky .frame { display: flex; flex-direction: column; gap: var(--sp-6); }
/* Chris Pass 2 (1.2, rev 2026-06-24): ONE hero heading size on every page.
   `.hero h1` is the single source of truth; the per-page inline font-size
   overrides were removed so index, Product, Plays, Integrations, Pricing,
   Trust, Demo, and Trial all render the same hero scale (harmonized down,
   Geist kept). Mobile collapses via the !important rule in the phone block. */
.hero h1 { font-size: clamp(2.4rem, 3.4vw, 3.9rem); }
.hero.split .sky h1 {
  line-height: var(--leading-display);
  max-width: none;
}
.hero.split .sky h1 .line { display: block; }
.hero.split .survey .standing-mark { width: 56px; height: 56px; }
/* On the split hero the panel straddles the line at the right, so the
   stamp sits beside the mark instead of under the panel */
.hero.split .survey .survey-inner { justify-content: flex-start; gap: var(--sp-6); position: relative; z-index: 1; }

/* Chris Pass 2 (1.5): the survey read-head IS the live signal. Recolored to
   the teal signal hue, made more prominent (a riding blip + soft halo), and
   raised so it threads up through the standing mark's neck instead of sitting
   on top of the line. The mark sits above it (survey-inner z-index) so the
   signal reads as threading through. A static "signal" label names it. */
.hero.split .survey .tick {
  bottom: 0;
  width: 2px;
  height: 32px;
  background: var(--signal);
  box-shadow: 0 0 8px var(--signal-glow);
  z-index: 0;
}
.hero.split .survey .tick::before {
  content: "";
  position: absolute;
  top: -4px; left: 50%;
  width: 8px; height: 8px;
  transform: translateX(-50%);
  border-radius: var(--radius-pip);
  background: var(--signal);
  box-shadow: 0 0 0 4px var(--signal-halo);
}
.hero.split .survey .sig-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
  color: var(--signal);
  padding-bottom: 8px;
}
.hero.split .survey .sig-label .sig-dot {
  width: 7px; height: 7px;
  border-radius: var(--radius-pip);
  background: var(--signal);
  box-shadow: 0 0 0 4px var(--signal-halo);
}
.hero.split .ground { flex: 1 1 0; background: var(--elev-1); }
.hero.split .ground .frame {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding-top: var(--sp-7);
  /* bottom rhythm mirrors the hero's top gap so the split hero no longer
     runs full-viewport; keeps the band's fill flush to its own edge */
  padding-bottom: clamp(var(--sp-9), 10vh, var(--sp-11));
}
.hero.split .ground .left { display: flex; flex-direction: column; gap: var(--sp-5); align-items: flex-start; }
.hero.split .ground .cta-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.hero.split .ground .live-panel {
  width: 100%;
  max-width: 520px;
  justify-self: end;
  margin-top: calc(-1 * clamp(90px, 12vh, 150px)); /* the station straddles the horizon */
}
@media (max-width: 980px) {
  .hero.split .ground .frame { grid-template-columns: 1fr; }
  .hero.split .ground .live-panel { margin-top: var(--sp-2); max-width: none; justify-self: stretch; }
  /* Chris Pass 2 (1.2): the desktop base clamp is already vw-responsive and
     lands smaller at tablet, so the old step-4 override (which rendered
     larger than the new desktop max here) is dropped. */
  /* the panel no longer straddles the survey line here, so the ~125px
     straddle-clearance just maroons the headline in empty space. Size the
     hero to content and match the standard mobile hero's --sp-8 top gap
     (hero owns the top rhythm; the sky's own top padding is zeroed to match
     the desktop split pattern and avoid a doubled gap). */
  .hero.split { padding-top: var(--sp-8); }
  .hero.split .sky { flex: 0 0 auto; padding-top: 0; padding-bottom: var(--sp-7); }
  .hero.split .ground { flex: 0 0 auto; }
  .hero.split .ground .frame { padding-bottom: var(--sp-8); }
  /* decorative contour backdrop: too small to read on mobile, and its
     right: -4vw bleed drives a horizontal scroll past the html clip. */
  .terrain { display: none; }
  /* the loop instrument stacks below the copy here and pushes the hero far
     past an acceptable height; the loop sections below carry it. */
  .loop-instrument { display: none; }
  /* match the homepage hero's top gap (--sp-8) on every other page; the
     standard hero's 10vh padding-top otherwise shoves content down
     inconsistently page to page. */
  .hero:not(.split) { padding-top: var(--sp-8); }
}

/* E8 ⬩ station ping: the read-head crosses the mark and the station
   answers; the survey stamp registers the pass. */
.station-ping {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--brand);
  border-radius: var(--radius-pip);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: station-ping 1600ms var(--ease-ring) forwards;
  z-index: var(--z-raised);
}
/* --ping-scale set per ping by JS: each hit answers louder than the
   last, resetting after four (the escalation ladder lives in site.js). */
@keyframes station-ping {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.9;  border-width: 2px; }
  70%  { opacity: 0.16; border-width: 1px; }
  100% { transform: translate(-50%, -50%) scale(var(--ping-scale, 9)); opacity: 0; border-width: 0.5px; }
}
.survey .stamp .di, .survey .stamp b { transition: color 300ms var(--ease); }
.survey .stamp.reg .di, .survey .stamp.reg b { color: var(--brand-soft); }

/* E8 ⬩ choreography pre-states. Applied by JS only, so no-JS and
   reduced-motion render the finished state. */
.score-block .pill { transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.score-block.pending .pill { opacity: 0; transform: translateY(6px); }
.dest-block .row .dmark, .dest-block .row .k, .dest-block .row .v {
  transition: color 350ms var(--ease), background 350ms var(--ease), border-color 350ms var(--ease), font-weight 0ms;
}
.dest-block .fired.pre .dmark { background: transparent; border: 1px solid var(--border-strong); }
.dest-block .fired.pre .k, .dest-block .fired.pre .v { color: var(--text-muted); font-weight: var(--weight-regular); }
.audit-render .row { transition: opacity 480ms var(--ease), transform 480ms var(--ease); }
.audit-render .row.pre { opacity: 0; transform: translateY(6px); }
.cap-render .cap-bar .fill { transition: width 1400ms var(--ease); }
.cap-render.pending .cap-bar .fill { width: 0%; }
.cap-render .cap-head .cstatus, .cap-render .cap-head .cstatus .dot { transition: color 300ms var(--ease), background 300ms var(--ease); }
.cap-render.standby .cap-head .cstatus { color: var(--text-muted); }
.cap-render.standby .cap-head .cstatus .dot { background: var(--border-strong); animation: none; }

/* E8 ⬩ loop instrument: the four-verb cycle made visible. A signal dot
   travels the baseline station to station; the return from learn to
   watch is an arc over the line: the loop drawn as the horizon mark's
   own geometry. Static (all stations lit, readouts shown) without JS
   or under reduced motion; .choreo is applied by JS only. */
.loop-instrument { width: 100%; max-width: 560px; justify-self: end; margin: 0; }
.loop-instrument .loop-stamp {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--track-stamp-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: var(--sp-2);
}
.loop-instrument .loop-svg { width: 100%; height: auto; display: block; }
.loop-svg .base { stroke: var(--border-strong); stroke-width: 1; }
.loop-svg .arc { stroke: var(--border); stroke-width: 1.5; fill: none; stroke-dasharray: 4 5; }
.loop-svg .station-dot { fill: var(--border-strong); transition: fill 300ms var(--ease); }
.loop-svg .station-dot.active { fill: var(--brand); }
.loop-svg .runner { fill: var(--brand); display: none; }
.loop-instrument.choreo .runner { display: block; }
.loop-stations { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: var(--sp-3); }
.loop-stations .st {
  text-align: center;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 2px 4px;
}
.loop-stations .st .v {
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--step-0);
  color: var(--text);
  transition: color 300ms var(--ease);
}
.loop-stations .st .r {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--text-secondary);
  letter-spacing: var(--track-mono-meta);
  min-height: 2.6em;
  transition: opacity 300ms var(--ease), color 300ms var(--ease);
}
.loop-instrument.choreo .st .v { color: var(--text-muted); }
.loop-instrument.choreo .st .r { opacity: 0; }
.loop-instrument.choreo .st.active .v {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.22em;
}
.loop-instrument.choreo .st.active .r { opacity: 1; }
.loop-stations .st:hover .v { color: var(--brand-soft); }
.loop-stations .st .r .di { color: var(--brand); }

/* ============================================================
 * E9 ⬩ canon relaxations, authorized by the keeper of canon
 * (2026-06-10). Each block names the rule it pushes.
 * ============================================================ */

/* E9a ⬩ the page watches back. A live self-session record: the beacon
   demoed on the visitor. Pushes §7 "Bryn does not stack" (one floating
   element, used deliberately). Logged locally, nothing sent. */
.self-session {
  position: fixed;
  /* top-right, not bottom-left: bottom-left reads as a chatbot dock.
     This corner is the future personalization surface, so it loads
     high in the viewport. --sp-8, because the rendered topbar runs
     ~6px past --topbar-h; this keeps ample clear air below the nav. */
  right: 18px;
  top: calc(var(--topbar-h) + var(--sp-8));
  z-index: var(--z-sticky);
  /* Chris Pass 2 (1.4): lightened within Palette D (was --surface) so the
     "Bryn this page" record reads lighter in its corner. */
  background: var(--border);
  border: var(--border-hairline);
  /* D7 (Brad Jun 17): the personalization surface is the one place the
     lighter brand-soft (#9993FF) is authorized to draw the eye. Outlined
     in brand-soft so it pops in its corner, within the purple family. */
  border-color: var(--brand-soft);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-elev);
  padding: 10px 14px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 280px;
}
.self-session .head {
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: var(--track-stamp);
  font-size: 9.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.self-session .head .pip {
  width: 7px; height: 7px;
  border-radius: var(--radius-pip);
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-pip-halo);
  animation: civic-pulse var(--dur-pulse) ease-in-out infinite;
}
.self-session .head .who { color: var(--brand-soft); font-weight: var(--weight-semibold); }
.self-session .head .close {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font: inherit;
  padding: 0 2px;
}
.self-session .head .close:hover { color: var(--text); }
.self-session b { color: var(--text); font-weight: var(--weight-semibold); }
.self-session .quietline { font-size: 9.5px; color: var(--text-muted); letter-spacing: var(--track-stamp); text-transform: uppercase; margin-top: 4px; }
/* 1.8a (Chris Jun 16): tie the live page-read to the value prop. The one
   CTA inside the chip, in brand-soft so it reads as the action. */
.self-session .ss-cta {
  display: inline-block;
  margin-top: 8px;
  color: var(--brand-soft);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  font-size: 10.5px;
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
}
.self-session .ss-cta:hover { color: var(--text); }
.self-session .ss-cta .arrow { margin-left: 4px; }
/* E9a (mobile) ⬩ on phones the top-right card would crowd the hero and
   collide with the hamburger overlay, so it reflows into a fixed bottom
   bar: same live record, edge to edge, thin. --z-topbar keeps it above
   content but below the --z-modal nav overlay, which covers it when open.
   The arrived line (2nd div) is dropped as the least-live datum; the pip
   and live counters carry the "watching now" read. Children are hidden,
   not removed, so the site.js scroll/IO updates and close handler run.
   The brand-soft border is inherited from the base rule, unmoved. */
@media (max-width: 980px) {
  .self-session {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    max-width: none;
    z-index: var(--z-topbar);
    border-width: 1px 0 0 0;
    border-radius: 0;
    padding: var(--sp-3) var(--frame-pad) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    line-height: 1.5;
  }
  .self-session > div:nth-of-type(2) { display: none; } /* arrived line */
  .self-session .head { margin-bottom: 0; }
  .self-session .ss-cta { margin-top: 0; }
}
/* True phones: drop the quietline too, keep the bar to head + counter + cta. */
@media (max-width: 640px) {
  .self-session .quietline { display: none; }
}

/* E9b ⬩ scroll read-head. Reading position as a brand line along the
   very top edge of the viewport (the deck's .progress precedent,
   promoted to the site). Sits over the topbar's top, not its seam. */
.readhead {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0;
  background: var(--brand);
  z-index: var(--z-topbar);
  pointer-events: none;
}

/* E9c ⬩ survey line draw-in on first paint. The page surveys itself
   before standing things on the line. Pushes §6's 1200ms load-stagger
   cap (total now ~1700ms). Cover-strip reveal; reduced-motion collapses
   it instantly via the global override. */
.survey.draw::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--bg);
  transform-origin: 100% 50%;
  animation: survey-draw 900ms var(--ease) 150ms forwards;
}
@keyframes survey-draw {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* E9d ⬩ hit glow. Signal moments carry light. Pushes §4 "no glow
   effects": relaxed for scope hits only, never chrome. */
.scope-svg .bar.hit { filter: drop-shadow(0 0 3px var(--signal-glow)); }
.scope-svg .bar.hit.new { animation: hit-land 900ms var(--ease); }
@keyframes hit-land {
  0%   { filter: drop-shadow(0 0 9px var(--signal)); }
  100% { filter: drop-shadow(0 0 3px var(--signal-glow)); }
}

/* E9e ⬩ terrain backdrop. Contour linework (hard-stepped, not a
   gradient) in the index sky at whisper opacity: the field being
   surveyed. Pushes §8 imagery minimalism. */
.sky { position: relative; }
.terrain {
  position: absolute;
  right: -4vw;
  /* The contour arcs terminate at the SVG's own baseline. The horizon is
     the survey rule (the .survey border-bottom), which sits one survey
     block below the sky's edge (the standing mark height, 56px in the
     split hero, plus the 1px rule). Drop the terrain by that much so the
     contours rest on the horizon instead of floating above it. The part
     that crosses below the rule is covered by the ground's elev-1 fill,
     so the arcs read as rising out of the line. */
  bottom: -57px;
  width: min(58vw, 980px);
  height: auto;
  pointer-events: none;
}
.terrain path { fill: none; stroke: var(--brand-soft); }

/* E4 (rebuilt) ⬩ pricing ascent. The tiers as stations on one rising
   ridge that stands on the survey line; the ridge draws itself on
   first paint, stations land in order, Growth holds the vantage.
   Replaces the orphaned corner contour. Hidden below 1200px (the tier
   cards carry everything). */
.hero-ascent {
  position: absolute;
  right: max(var(--frame-pad), calc((100vw - var(--frame-max)) / 2));
  bottom: -1px; /* the ground line merges into the survey line */
  width: min(46vw, 880px);
  margin: 0;
  pointer-events: none;
}
.hero-ascent svg { width: 100%; height: auto; display: block; }
.hero-ascent .ridge {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ridge-draw 1400ms var(--ease) 300ms forwards;
}
@keyframes ridge-draw { to { stroke-dashoffset: 0; } }
.hero-ascent .stn { opacity: 0; animation: bryn-reveal 600ms var(--ease) forwards; }
.hero-ascent .s-starter { animation-delay: 700ms; }
.hero-ascent .s-growth { animation-delay: 1100ms; }
.hero-ascent .s-scale { animation-delay: 1500ms; }
.hero-ascent .drop { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 5; }
.hero-ascent .sdot { fill: var(--border-strong); }
.hero-ascent .sdot.lead { fill: var(--brand); }
.hero-ascent .halo {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.5;
  opacity: 0.35;
  animation: hill-pulse var(--dur-hill-pulse) ease-in-out infinite;
}
.hero-ascent text { font-family: var(--font-mono); }
.hero-ascent .slabel { font-size: 14px; font-weight: var(--weight-semibold); fill: var(--text-secondary); letter-spacing: 0.04em; }
.hero-ascent .slabel.hi { fill: var(--brand-soft); }
.hero-ascent .ssub { font-size: 12px; fill: var(--text-muted); }
.hero-ascent .stag { font-size: 9.5px; letter-spacing: var(--track-stamp-wide); fill: var(--brand); font-weight: var(--weight-semibold); }
.hero-ascent .sep { fill: var(--text); }
@media (max-width: 1199px) { .hero-ascent { display: none; } }

/* E9f ⬩ product shots. Real surface captures in the canon shot frame
   (radius-shot, hairline, one elevation tier), mono figcaptions. */
.shot { margin: 0; }
.shot .frame-img {
  border: var(--border-hairline);
  border-radius: var(--radius-shot);
  overflow: hidden;
  box-shadow: var(--shadow-elev);
  background: var(--surface-alt);
}
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption {
  /* Chris Pass 2 (1.10): more space between the caption and the image box. */
  margin-top: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
  letter-spacing: var(--track-mono-meta);
}
.shot figcaption b { color: var(--text-secondary); font-weight: var(--weight-medium); }

/* E8 ⬩ stance audit line: flips get written down, visibly */
.stance-log {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-top: var(--sp-3);
  min-height: 1.5em;
}
.stance-log b { color: var(--brand-soft); font-weight: var(--weight-semibold); }

/* Ambient hero signal ⬩ canon motion */
.hero-signal {
  position: absolute;
  bottom: 18%;
  right: 8%;
  width: 160px;
  height: 160px;
  pointer-events: none;
}
.hero-signal .dot {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pip);
  background: var(--brand);
  opacity: 0.22;
  animation: hero-dot-breathe var(--dur-hero-dot) ease-in-out infinite;
}
.hero-signal .ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 160px; height: 160px;
  border: 2px solid var(--brand);
  border-radius: var(--radius-pip);
  opacity: 0.55;
  animation: hero-ring var(--dur-hero-ring) var(--ease-ring) infinite;
}

/* ============================================================
 * E5 ⬩ Ledger rows. Numbered mono index, hairline separators,
 * optional expand-in-place. Replaces card grids for mechanic,
 * Plays, documents, FAQ.
 * ============================================================ */

.ledger { border-top: var(--border-hairline); }
.lrow {
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) 1.3fr 2fr;
  gap: var(--sp-7);
  padding: var(--sp-6) var(--sp-1) var(--sp-6) var(--sp-5);
  border-bottom: var(--border-hairline);
  align-items: baseline;
}
.lrow .num {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--track-stamp-wide);
  text-transform: uppercase;
  color: var(--brand);
  font-weight: var(--weight-semibold);
}
.lrow .num .di { color: var(--text); }
.lrow h3 { font-size: var(--step-1); font-weight: var(--weight-heavy); line-height: 1.25; }
.lrow p { font-size: var(--step-0); line-height: var(--leading-body); }
.lrow.quiet .num, .lrow.quiet h3, .lrow.quiet p { color: var(--text-muted); }

/* Play ledger ⬩ expandable rows */
.play-row { border-bottom: var(--border-hairline); }
.play-row > button {
  display: grid;
  grid-template-columns: minmax(110px, 0.7fr) 2.2fr 1.4fr auto;
  gap: var(--sp-6);
  align-items: center;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: var(--sp-5) var(--sp-1) var(--sp-5) var(--sp-5);
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background var(--dur-fast) var(--ease);
}
.play-row > button:hover { background: var(--surface-alt); }
.play-row .pid {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--weight-semibold);
}
.play-row .dest {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.play-row .dest b { color: var(--text-secondary); font-weight: var(--weight-medium); }
.play-row .chev {
  font-family: var(--font-mono);
  color: var(--brand);
  transition: transform var(--dur-base) var(--ease);
}
.play-row[data-open="true"] .chev { transform: rotate(90deg); }
/* Chris Pass 2 (1.11): the revealed detail sat flush against the row button.
   Add top room, and stagger the steps in on expand. */
.play-row .play-detail {
  display: none;
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
}
.play-row[data-open="true"] .play-detail { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-7); }
@media (prefers-reduced-motion: no-preference) {
  .play-row[data-open="true"] .play-detail > p { animation: seg-in var(--dur-seg-in) var(--ease) both; }
  .play-row[data-open="true"] .play-detail .audit-render > * { animation: seg-in var(--dur-seg-in) var(--ease) both; }
  .play-row[data-open="true"] .play-detail .audit-render > *:nth-child(1) { animation-delay: var(--stagger-1); }
  .play-row[data-open="true"] .play-detail .audit-render > *:nth-child(2) { animation-delay: var(--stagger-2); }
  .play-row[data-open="true"] .play-detail .audit-render > *:nth-child(3) { animation-delay: var(--stagger-3); }
  .play-row[data-open="true"] .play-detail .audit-render > *:nth-child(4) { animation-delay: var(--stagger-4); }
}
.play-row.quiet > button { cursor: default; }
.play-row.quiet .pid, .play-row.quiet .dest { color: var(--text-muted); opacity: 0.7; }

/* FAQ ⬩ ledger register with native details */
.faq details {
  border-bottom: var(--border-hairline);
}
.faq details summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-4);
  align-items: baseline;
  padding: var(--sp-5) var(--sp-2);
  font-weight: var(--weight-semibold);
  color: var(--text);
}
.faq details summary::-webkit-details-marker { display: none; }
.faq details summary .qn {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.faq details summary .chev { font-family: var(--font-mono); color: var(--brand); }
.faq details[open] summary .chev { transform: rotate(90deg); }
.faq details .a {
  padding: 0 var(--sp-2) var(--sp-5) calc(var(--sp-2) + 2.4em);
  color: var(--text-secondary);
  max-width: 70ch;
}
.faq details .a a { color: var(--brand-soft); }

/* ============================================================
 * Chips ⬩ integration names. No logos in chrome (canon §7).
 * ============================================================ */

.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  background: var(--surface);
  border: var(--border-hairline);
  border-radius: var(--radius-soft);
  padding: 3px 10px;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
a.chip:hover { border-color: var(--brand); color: var(--brand-soft); }
.chip.dim { color: var(--text-muted); border-style: dashed; }

/* SOC 2 credential tiles ⬩ Lane B (Brad, 2026-06-26): replaces the text chip
   on /bryn/trust. One rounded-square tile per type, the generic AICPA seal on a
   circular light inset, with a mono TYPE label underneath. Drench-purple per the
   approved Option A (riffs/soc2-badge.html); the seal artwork carries no type, so
   the label disambiguates. */
.soc2-set { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.soc2-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  width: 168px;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border-radius: var(--radius-block);
  text-align: center;
  background: var(--elev-4);
  box-shadow: var(--shadow-elev);
}
.soc2-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--drench-sheen);
  pointer-events: none;
}
.soc2-tile > * { position: relative; z-index: 1; }
.soc2-tile .seal-inset {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-pip);
  background: var(--text-inverse);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.soc2-tile .seal-inset img { width: 72px; height: 72px; display: block; }
.soc2-tile .type-label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--track-stamp-wide);
  line-height: var(--leading-snug);
  color: var(--on-brand);
}
.soc2-tile .type-scope {
  display: block;
  font-weight: var(--weight-regular);
  letter-spacing: var(--track-mono-meta);
  text-transform: none;
  margin-top: var(--sp-1);
  color: var(--on-brand-dim);
}

/* Chris Pass 2 (5.2 / 5.3): inline info popups defining pricing jargon
   (SSO, SCIM, Custom signals). The button carries the full definition as its
   accessible name; the visual pop shows on hover or keyboard focus. */
.info-tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; }
.info-tip > .info-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; padding: 0;
  border-radius: var(--radius-pip);
  border: 1px solid var(--border-strong);
  background: none;
  font-family: var(--font-mono); font-size: 10px; font-style: italic; line-height: 1;
  color: var(--text-muted); cursor: help;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.info-tip:hover > .info-i,
.info-tip:focus-within > .info-i { border-color: var(--brand-soft); color: var(--brand-soft); }
.info-tip > .info-pop {
  position: absolute; left: 0; bottom: calc(100% + 8px);
  width: max-content; max-width: 260px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-soft); box-shadow: var(--shadow-elev);
  padding: 8px 10px;
  font-family: var(--font-sans); font-size: var(--step--1); font-weight: var(--weight-regular);
  color: var(--text-secondary); line-height: 1.45;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
  z-index: var(--z-sticky);
}
.info-tip:hover > .info-pop,
.info-tip:focus-within > .info-pop { opacity: 1; visibility: visible; transform: translateY(0); }

/* Status pill ⬩ canon component 13 */
.status {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: var(--step--1);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--brand-pill-bg);
  border: 1px solid var(--brand-pill-br);
  color: var(--brand);
}
.status.held { background: var(--surface); border-color: var(--border); color: var(--text-muted); }

/* ============================================================
 * Panels ⬩ live panel, audit render, score block, play block.
 * One elevation tier. No nested cards.
 * ============================================================ */

.panel {
  background: var(--surface);
  border: var(--border-hairline);
  border-radius: var(--radius-block);
  box-shadow: var(--shadow-elev);
  overflow: hidden;
}

/* Live panel strip + session ⬩ canon component 8 + session loop */
.live-panel .strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: var(--border-hairline);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.live-panel .strip .live {
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--weight-semibold);
}
.live-panel .strip .live .pip {
  width: 7px; height: 7px;
  border-radius: var(--radius-pip);
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-pip-halo);
  animation: civic-pulse var(--dur-pulse) ease-in-out infinite;
}
.live-panel .strip .what { color: var(--text-secondary); }
.live-panel .strip .what b { color: var(--text); font-weight: var(--weight-semibold); }
.live-panel .strip .right-spacer { margin-left: auto; letter-spacing: var(--track-stamp); }

.live-panel .scope-wrap { padding: 14px 16px 4px; }
.live-panel .scope-svg { width: 100%; height: 72px; display: block; }
/* Chris Pass 2 (2.2): the product "01 Watch" scope reads larger and less
   letterboxed than the hero vignette. */
#loop-watch .scope-svg { height: 92px; }
.scope-svg .bar { fill: var(--border-strong); }
.scope-svg .bar.hit { fill: var(--signal); }
.scope-svg .dot { fill: var(--signal); }
.scope-svg .grid-l { stroke: var(--border); stroke-width: 1; }
.scope-svg .axis { stroke: var(--border-strong); stroke-width: 1; }
.scope-svg .axis-label {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.06em;
}
.scope-svg .sweep {
  stroke: var(--brand);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  animation: bryn-sweep var(--dur-sweep) linear infinite;
}

.live-panel .session {
  padding: 14px 16px 16px;
  border-top: var(--border-hairline);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: var(--leading-body);
  color: var(--text);
}
.live-panel .session .head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.live-panel .session .head .verb { color: var(--brand); font-weight: var(--weight-semibold); }
.live-panel .session .head .who { margin-left: auto; text-transform: none; letter-spacing: 0; }
.live-panel .session .body { min-height: 1.6em; }
.live-panel .session .body .seg {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  animation: seg-in var(--dur-seg-in) var(--ease) forwards;
}
.live-panel .session .caret {
  display: inline-block;
  width: 6px; height: 1em;
  margin-left: 2px;
  background: var(--brand);
  vertical-align: -2px;
  animation: caret-blink 1s steps(2) infinite;
}
.live-panel .session .route { margin-top: 6px; min-height: 1.55em; color: var(--text-secondary); font-size: 11.5px; }
.live-panel .session .route .to { color: var(--brand); font-weight: var(--weight-semibold); }
.live-panel .session .sfoot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px;
  font-size: 10px; color: var(--text-muted);
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
  background: none;
  border-top: 0;
  padding: 0;
}
.live-panel .session .sfoot .right { margin-left: auto; }
.live-panel .session .slots { display: inline-flex; gap: 4px; }
.live-panel .session .slot { width: 22px; height: 4px; background: var(--border-strong); border-radius: 2px; }
.live-panel .session .slot.fill { background: var(--brand); }

/* Audit render ⬩ deck/canon form */
.audit-render {
  border: var(--border-hairline);
  background: var(--surface);
  border-radius: var(--radius-panel);
  padding: 16px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: var(--leading-body);
  color: var(--text-secondary);
  box-shadow: var(--shadow-elev);
}
.audit-render .stamp {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.audit-render .stamp .di { color: var(--brand); }
.audit-render .name {
  display: inline-block;
  background: var(--brand-pill-bg);
  border: 1px solid var(--brand-pill-br);
  color: var(--brand-soft);
  padding: 2px 8px;
  border-radius: var(--radius-soft);
  font-weight: var(--weight-medium);
  font-size: 12.5px;
  margin-bottom: 10px;
}
.audit-render .row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--border);
  align-items: center;
}
.audit-render .row:last-of-type { border-bottom: 0; }
.audit-render .row .what { color: var(--text); font-family: var(--font-sans); font-weight: var(--weight-medium); }
.audit-render .row .src {
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
  font-size: 9.5px;
  color: var(--text-muted);
}
.audit-render .routed {
  margin-top: 8px;
  padding-top: 10px;
  border-top: var(--border-hairline);
  font-size: 11.5px;
}
.audit-render .routed b { color: var(--brand); font-weight: var(--weight-semibold); }
.audit-render .routed b .di { color: var(--text); }
.audit-render footer {
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
}

/* Score block ⬩ deck slide 05 form */
.score-block {
  border: var(--border-hairline);
  border-radius: var(--radius-panel);
  background: var(--surface);
  padding: clamp(20px, 3vw, 36px) clamp(22px, 3.4vw, 40px);
  font-family: var(--font-mono);
  font-size: var(--step-0);
  color: var(--text-secondary);
  line-height: 1.5;
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  column-gap: clamp(20px, 2.2vw, 36px);
  row-gap: 18px;
  align-items: baseline;
}
.score-block .k { color: var(--text-muted); }
.score-block .num {
  color: var(--brand);
  font-weight: var(--weight-semibold);
  font-size: var(--step-2);
  letter-spacing: var(--track-snug);
}
.score-block .ctx { color: var(--text-muted); }
.score-block .pill {
  color: var(--brand);
  background: var(--brand-tint);
  border: 1px solid var(--brand-pill-br);
  padding: 7px 18px;
  border-radius: var(--radius-pill);
  display: inline-block;
  justify-self: start;
  font-weight: var(--weight-semibold);
  font-size: var(--step-2);
}
.score-block .span-2 { grid-column: 2 / -1; }

/* Destination block ⬩ deck slide 06 form */
.dest-block {
  border: var(--border-hairline);
  border-radius: var(--radius-panel);
  background: var(--surface);
  padding: 24px 28px;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dest-block .row {
  display: grid;
  grid-template-columns: 18px minmax(90px, max-content) minmax(0, 1fr);
  column-gap: clamp(16px, 1.8vw, 24px);
  align-items: baseline;
  padding: 6px 0;
}
.dest-block .dmark {
  width: 8px; height: 8px;
  border-radius: 2px;
  transform: rotate(45deg);
  align-self: center;
}
.dest-block .fired .dmark { background: var(--brand); }
.dest-block .fired .k { color: var(--brand); font-weight: var(--weight-semibold); }
.dest-block .fired .v { color: var(--text); font-weight: var(--weight-semibold); }
.dest-block .idle .dmark { background: transparent; border: 1px solid var(--border-strong); }
.dest-block .idle .k, .dest-block .idle .v { color: var(--text-muted); }

/* Learn block ⬩ deck slide 08 form */
.learn-horizon {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  column-gap: clamp(14px, 1.6vw, 24px);
  row-gap: 10px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-secondary);
  line-height: 1.5;
  padding: 16px 22px;
  border: var(--border-hairline);
  border-radius: var(--radius-panel);
  background: var(--surface);
}
.learn-horizon .ver { color: var(--brand); font-weight: var(--weight-semibold); letter-spacing: var(--track-stamp); }
.learn-horizon .ver.next { color: var(--text-muted); }
.learn-horizon .k { color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--track-stamp-wide); font-size: var(--step--2); }
.learn-horizon .v { color: var(--text); }
.learn-horizon .v.dim { color: var(--text-muted); }

/* Kill block ⬩ deck slide 09 form + canon toggle */
.kill-block {
  border: var(--border-hairline);
  border-radius: var(--radius-panel);
  background: var(--surface);
  padding: 12px 28px;
}
.kill-block .region {
  display: grid;
  grid-template-columns: 14px 80px 1fr max-content;
  column-gap: 20px;
  align-items: center;
  padding: 18px 4px;
  border-bottom: var(--border-hairline);
}
.kill-block .region:last-child { border-bottom: none; }
.kill-block .pip { width: 10px; height: 10px; border-radius: var(--radius-pill); background: var(--brand); }
.kill-block .row-off .pip { background: transparent; border: 1.5px solid var(--text-muted); }
.kill-block .label {
  font-family: var(--font-mono);
  font-size: var(--step-0);
  color: var(--text);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
}
.kill-block .state { font-size: var(--step-0); color: var(--brand); font-weight: var(--weight-semibold); }
.kill-block .row-off .state { color: var(--text-muted); }

.toggle {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 48px; height: 26px;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: background var(--dur-toggle), border-color var(--dur-toggle);
  margin: 0;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: var(--radius-pill);
  background: #ffffff; /* documented one-off: toggle knob, canon component 3 */
  transition: transform var(--dur-toggle) var(--ease);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.toggle:checked { background: var(--brand); border-color: var(--brand); }
.toggle:checked::after { transform: translateX(22px); }
.toggle:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 2px; box-shadow: none; }

/* Cap render ⬩ deck slide 10 form */
.cap-render {
  border: var(--border-hairline);
  border-radius: var(--radius-panel);
  background: var(--surface);
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cap-render .cap-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-bottom: 14px;
  border-bottom: var(--border-hairline);
}
.cap-render .cap-head .cstatus { color: var(--brand); font-weight: var(--weight-semibold); display: inline-flex; align-items: center; gap: 8px; }
.cap-render .cap-head .cstatus .dot { width: 8px; height: 8px; background: var(--brand); border-radius: var(--radius-pill); }
.cap-render .cap-head .plan { color: var(--text); font-weight: var(--weight-semibold); }
.cap-render .cap-meter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  font-family: var(--font-mono);
  font-size: var(--step-0);
  color: var(--text-muted);
}
.cap-render .cap-meter-row .count {
  color: var(--brand);
  font-weight: var(--weight-strong);
  font-size: var(--step-3);
  letter-spacing: var(--track-snug);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cap-render .cap-meter-row .of { color: var(--text-secondary); }
.cap-render .cap-meter-row .cycle { margin-left: auto; font-size: var(--step--1); }
.cap-render .cap-meter-row .cycle b { color: var(--text); font-weight: var(--weight-semibold); }
.cap-render .cap-bar {
  width: 100%; height: 10px;
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: 10px;
}
.cap-render .cap-bar .fill { display: block; width: 100%; height: 100%; background: var(--brand); }
.cap-render .cap-explain { font-size: var(--step--1); line-height: var(--leading-body); }

/* ============================================================
 * Tier cards ⬩ canon component 5 + E4 ascent placement
 * ============================================================ */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  align-items: stretch;
}
/* E4 ⬩ tiers stand at increasing elevation on the cross-section */
.pricing-grid.hero-ascent .tier:nth-child(1) { margin-top: var(--sp-9); }
.pricing-grid.hero-ascent .tier:nth-child(2) { margin-top: var(--sp-5); }
.pricing-grid.hero-ascent .tier:nth-child(3) { margin-top: 0; }

/* Chris Pass 2 (1.16): the homepage pricing teaser shows all four tiers
   (Explore, Bootstrap, Growth, Scale) to match the pricing page. */
.pricing-grid.ascent { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .pricing-grid.ascent { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .pricing-grid.ascent { grid-template-columns: 1fr; } }

.tier {
  border: var(--border-hairline);
  border-radius: var(--radius-block);
  background: var(--surface);
  padding: var(--sp-7) 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tier.lead {
  background: var(--brand-tint);
  border-color: var(--brand-pill-br);
  box-shadow: var(--shadow-tier-lead);
}
/* Chris Pass 2 (1.14): the wedge "Vantage" box reads as the clear focal
   tier: a full brand border and a lifted brand shadow, beyond a plain lead. */
.tier.lead.vantage {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 24px 50px -24px var(--brand-glow);
}
.tier .tlabel {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--track-stamp-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--weight-semibold);
}
/* Chris Pass 2 (5.1): the "Recommended" label reads bigger and is lifted
   higher to draw the eye to the Growth tier. */
.tier.lead .tlabel {
  color: var(--brand-soft);
  font-size: var(--step-0);
  font-weight: var(--weight-strong);
  margin-top: calc(-1 * var(--sp-4));
}
.tier .tname {
  font-weight: var(--weight-heavy);
  font-size: var(--step-2);
  letter-spacing: var(--track-snug);
  color: var(--text);
}
.tier .tnote { font-size: var(--step--1); line-height: 1.5; color: var(--text-muted); }
.tier .tprice {
  font-family: var(--font-mono);
  font-size: var(--step-2);
  color: var(--text);
  font-weight: var(--weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tier.lead .tprice { color: var(--brand-soft); }
.tier .tprice .per { font-size: var(--step-0); color: var(--text-muted); margin-left: 4px; font-weight: var(--weight-regular); }
.tier .tcap { font-family: var(--font-mono); font-size: var(--step--1); color: var(--text-secondary); }
.tier .tcap .capnum { color: var(--text); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.tier .tcap .capsub { display: block; margin-top: var(--sp-1); font-size: var(--step--2); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tier ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 8px; }
.tier li {
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--text-secondary);
  padding-left: 16px;
  position: relative;
}
.tier li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.5em;
  width: 6px; height: 6px;
  background: var(--brand);
  border-radius: 1px;
  transform: rotate(45deg);
}
.tier .tfoot {
  margin-top: auto;
  padding-top: 12px;
  border-top: var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tier .tfoot .meta { font-size: 10px; letter-spacing: var(--track-stamp); text-transform: uppercase; }

/* Billing toggle */
.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-muted);
}
.billing-toggle .on { color: var(--text); font-weight: var(--weight-semibold); }

/* Trial tier selector ⬩ chips drive the single primary CTA (cadence via the
   shared #billing-toggle). Reuses .billing-toggle / .btn / .meta registers. */
.tier-pick { margin: var(--sp-2) 0 var(--sp-5); }
.tier-pick-row {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.chipset { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); }
.tier-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--step--1);
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.tier-chip:hover { border-color: var(--brand); color: var(--brand-soft); }
.tier-chip[aria-checked="true"] {
  border-color: var(--brand);
  background: var(--brand-pill-bg);
  color: var(--text);
}
.tier-chip .cprice { color: var(--text-muted); font-weight: var(--weight-medium); font-family: var(--font-mono); }
.tier-chip[aria-checked="true"] .cprice { color: var(--text-secondary); }
.tier-chip .cper { color: var(--text-muted); }
.tier-chip .crec {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
  color: var(--brand-soft);
}
/* Explore cadence is monthly only; the annual toggle reads as unavailable. */
.tier-pick.cadence-locked .billing-toggle .lab[data-side="annual"] { opacity: 0.4; }
.tier-pick.cadence-locked .billing-toggle .toggle { opacity: 0.45; pointer-events: none; }

/* ============================================================
 * E3 ⬩ Contour register ⬩ shared SVG styling
 * ============================================================ */

.contour-svg { width: 100%; height: auto; display: block; }
.contour-svg .ground { stroke: var(--border-strong); stroke-width: 1; }
.contour-svg .c-line { stroke: var(--border); stroke-width: 1.5; fill: none; }
.contour-svg .c-line.hi { stroke: var(--brand); }
.contour-svg .c-label {
  fill: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.contour-svg .c-label.hi { fill: var(--brand-soft); }
.contour-svg .c-dot { fill: var(--brand); }
.contour-svg .c-dot.dim { fill: var(--border-strong); }

/* ============================================================
 * Forms ⬩ demo request, email capture, integration request
 * ============================================================ */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
  color: var(--text-muted);
}
.field input, .field select, .field textarea {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  padding: 10px 12px;
  transition: border-color var(--dur-fast) var(--ease);
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--brand-soft); }
.field input::placeholder { color: var(--text-muted); }

.capture {
  display: flex;
  gap: var(--sp-3);
  align-items: stretch;
  max-width: 480px;
}
.capture input {
  flex: 1 1 auto;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  padding: 10px 12px;
}

/* ============================================================
 * Closing offer block ⬩ plan §3.9, standardized dual CTA
 * ============================================================ */

.closing {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
.closing .ctas { display: flex; gap: var(--sp-4); flex-wrap: wrap; justify-content: flex-end; }

/* ============================================================
 * Drench ⬩ canon component 6 ⬩ one per page
 * ============================================================ */

.drench {
  background: var(--elev-4);
  color: var(--text-inverse);
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 13vh, 144px) 0;
}
.drench::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--drench-sheen);
  pointer-events: none;
}
.drench .frame { position: relative; z-index: 1; }
.drench h2 { color: var(--text-inverse); }
.drench p { color: var(--on-brand-dim); }
.drench .meta { color: var(--on-brand-dim); }
.drench .meta b { color: var(--text-inverse); }
.drench .glyph {
  position: absolute;
  bottom: -40px;
  right: -60px;
  width: clamp(220px, 26vw, 340px);
  height: clamp(220px, 26vw, 340px);
  color: #ffffff; /* documented one-off: drench glyph is white at 18% per canon */
  opacity: 0.18;
  pointer-events: none;
}
.drench .glyph .signal-group { animation: signal-bounce var(--dur-bounce) ease-in-out infinite; transform-origin: 150px 63px; }

/* ============================================================
 * Footer
 * ============================================================ */

.foot {
  border-top: var(--border-hairline);
  background: var(--elev-1);
  padding: var(--sp-9) 0 var(--sp-7);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-8);
}
.foot h4 {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--track-stamp-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--step--1);
  transition: color var(--dur-fast) var(--ease);
}
.foot a:hover { color: var(--text); }
.foot .slot { font-size: var(--step--1); }
.foot .relation {
  margin-top: var(--sp-4);
  color: var(--text-muted);
  font-size: var(--step--1);
  max-width: 36ch;
}
.foot-bottom {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: var(--border-hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

/* ============================================================
 * Reveal-in ⬩ canon motion, first paint only
 * ============================================================ */

.reveal { opacity: 0; animation: bryn-reveal var(--dur-reveal) var(--ease) forwards; }
.reveal.s1 { animation-delay: var(--stagger-1); }
.reveal.s2 { animation-delay: var(--stagger-2); }
.reveal.s3 { animation-delay: var(--stagger-3); }
.reveal.s4 { animation-delay: var(--stagger-4); }

/* ============================================================
 * Utility-page register (thank-you, legal, 404)
 * ============================================================ */

.util-main { min-height: 60vh; display: flex; align-items: center; }
.util-main .inner { max-width: 60ch; display: flex; flex-direction: column; gap: var(--sp-5); align-items: flex-start; }

.prose { max-width: 68ch; display: grid; gap: var(--sp-4); }
.prose h3 { margin-top: var(--sp-5); }

/* ============================================================
 * Responsive ⬩ single 980px breakpoint per canon §11
 * ============================================================ */

@media (max-width: 980px) {
  .nav { display: none; }
  [data-collapse] { grid-template-columns: 1fr !important; }
  /* Product loop: sections 02/04 and the record band lead with the diagram
     on desktop (it sits on the opposite side). Stacked on mobile that reads
     diagram then text; reorder so each reads text then diagram. */
  #loop-score [data-collapse] > :first-child,
  #loop-learn [data-collapse] > :first-child,
  [data-section="audit-deep"] [data-collapse] > :first-child { order: 1; }
  .hero .hero-grid,
  .closing,
  .play-row[data-open="true"] .play-detail,
  .foot-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .pricing-grid.hero-ascent .tier { margin-top: 0 !important; }
  .lrow { grid-template-columns: 1fr; gap: var(--sp-2); }
  .play-row > button { grid-template-columns: 1fr auto; }
  .play-row .pid, .play-row .dest { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .closing .ctas { justify-content: flex-start; }
  .hero-signal { display: none; }
}

/* ============================================================
 * Large desktop (>= 1600px). At 1920x1080 the 1200px frame reads
 * as a narrow island with ~360px of dead black each side: the
 * "floaty" effect. Widen the frame so content anchors in the
 * viewport. This is lever 1 (horizontal density); the vertical
 * dials, if still needed, are the hero's 100vh sky and the
 * section rhythm (clamp on --rhythm-section).
 * ============================================================ */
@media (min-width: 1600px) {
  :root { --frame-max: 1440px; }
}
@media (min-width: 1900px) {
  :root { --frame-max: 1520px; }
}

/* ============================================================
 * Problem section ⬩ two-track timeline (replaces the row ledger,
 * 2026-06-17). The signal's short live window (top) vs the team's
 * late weekly-review response (bottom); the bracketed gap between
 * them is the lost minute. Lanes are decorative (aria-hidden); the
 * captions carry the meaning. Percent-positioned for robustness.
 * ============================================================ */
.problem-tracks { margin-top: var(--rhythm-block); }
/* framed as an instrument panel so the tracks read as a readout, not
   two bare lines on the void (Brad: "feels really stark"). */
.pt-panel {
  background: var(--surface);
  border: var(--border-hairline);
  border-radius: var(--radius-block);
  box-shadow: var(--shadow-elev);
  padding: clamp(22px, 3vw, 40px);
  overflow: hidden; /* the response range runs off the right edge by design */
}
.pt-axis {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: var(--track-stamp); text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--sp-6);
}
.pt-grid { position: relative; }
.pt-name {
  display: block; font-family: var(--font-mono); font-size: var(--step--1);
  letter-spacing: var(--track-stamp); text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary); margin-bottom: 10px;
}
/* track names carry their semantic color so the labels are a hierarchy,
   not one undifferentiated grey register (the axis labels stay the faint
   tier). */
.pt-name.is-signal { color: var(--signal); }
.pt-name.is-response { color: var(--warn); }
.pt-lane { position: relative; height: 46px; border-bottom: 1px solid var(--border-strong); }
/* measured ruler: short ticks along the axis so the empty span reads as
   time, not blank. */
.pt-lane.ruled {
  background-image: repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 36px);
  background-size: 100% 9px;
  background-repeat: no-repeat;
  background-position: left bottom;
}
.pt-row + .pt-row { margin-top: var(--sp-4); }
.pt-window {
  position: absolute; top: 8px; bottom: 0;
  background: var(--signal-tint); border-left: 2px solid var(--signal);
  display: flex; align-items: flex-end; gap: 3px;
  padding: 0 7px 5px; overflow: hidden;
}
.pt-window i { flex: 0 0 3px; width: 3px; border-radius: 1px; background: var(--signal); }
.pt-window i:nth-child(1) { height: 38%; }
.pt-window i:nth-child(2) { height: 64%; }
.pt-window i:nth-child(3) { height: 48%; }
.pt-window i:nth-child(4) { height: 82%; }
.pt-window i:nth-child(5) { height: 56%; }
.pt-window i:nth-child(6) { height: 70%; }
.pt-spike {
  position: absolute; bottom: -6px; width: 12px; height: 12px;
  border-radius: var(--radius-pip); background: var(--signal);
  transform: translateX(-50%); box-shadow: 0 0 0 4px var(--signal-halo);
}
/* The typical response is a fixed line bookended by a dot at each end,
   with an axis-style break (two slashes) mid-line meaning an
   indeterminate, arbitrarily long stretch of elapsed time. */
.pt-resp {
  /* the response comes AFTER the minute is lost: left dot starts where the
     "minute you lose" bracket ends (45%), right dot near the weekly review
     (92%), with the break between. Reads as 1 minute to never, later. */
  position: absolute; left: 45%; right: 8%; bottom: -6px;
  height: 12px; display: flex; align-items: center;
}
.pt-resp .r-dot {
  flex: 0 0 12px; width: 12px; height: 12px;
  border-radius: var(--radius-pip); background: var(--warn);
}
.pt-resp .r-seg { flex: 1 1 auto; height: 0; border-top: 2px solid var(--warn); }
.pt-resp .r-break { position: relative; flex: 0 0 16px; height: 12px; }
.pt-resp .r-break::before, .pt-resp .r-break::after {
  content: ""; position: absolute; top: 1px; bottom: 1px; width: 2px;
  background: var(--warn); transform: skewX(-24deg);
}
.pt-resp .r-break::before { left: 4px; }
.pt-resp .r-break::after  { left: 9px; }
.pt-gaprow { position: relative; height: 32px; }
.pt-bracket {
  position: absolute; top: 4px; bottom: 4px;
  border-left: 1px dashed var(--warn);
  border-right: 1px dashed var(--warn);
  display: flex; align-items: center; justify-content: center;
}
.pt-gap-lbl {
  font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: var(--track-stamp); text-transform: uppercase;
  color: var(--warn); background: var(--surface); padding: 0 12px;
}
/* Chris Pass 2 (1.8): more air between the instrument panel and the captions. */
.pt-caps {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px); margin-top: var(--sp-8);
}
.pt-cap { font-size: var(--step--1); color: var(--text-secondary); line-height: 1.6; max-width: 52ch; }
.pt-cap b { color: var(--text); font-weight: var(--weight-semibold); }
/* Chris Pass 2 (1.8): the caption titles read bigger and bolder. */
.pt-tag {
  display: block; font-family: var(--font-mono); font-size: var(--step-0);
  letter-spacing: var(--track-stamp); text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--text); margin-bottom: 10px;
}
@media (prefers-reduced-motion: no-preference) {
  .pt-spike { animation: civic-pulse var(--dur-pulse) ease-in-out infinite; }
}
@media (max-width: 760px) { .pt-caps { grid-template-columns: 1fr; } }

/* ============================================================
 * v3.5 un-mush sweep ⬩ semantic color (Palette D ruleset).
 * Teal = live signal / caught / scored. Coral = cost / risk,
 * used scarcely. Purple stays the brand and action. The teal
 * eyebrow tier marks signal/data sections (.k-signal); default
 * eyebrows stay purple, utility ones use .dim.
 * ============================================================ */
.kicker.k-signal { color: var(--signal); }
/* coral eyebrow: operator-authorized extension of --warn beyond cost/risk, used for the
 * "Coming soon" connectors register so it reads warm against the teal "Live" eyebrow. */
.kicker.k-warn { color: var(--warn); }

/* named pattern chips: the caught signal, named by its parts */
.pn-chip { border-left: 2px solid var(--signal); padding-left: 12px; }
.pn-chip .ar { color: var(--signal); }

/* audit log: the routed destinations are the signal acted on */
.audit-render .routed b { color: var(--signal); }

/* at-cap is a cost/limit state, not a brand moment */
.cap-render .cap-head .cstatus { color: var(--warn); }
.cap-render .cap-head .cstatus .dot { background: var(--warn); }

/* product shots ⬩ larger framed showcase: fill the frame, centered,
   with a window chrome bar so they read as the product surface. */
.shot { margin: 0 auto; }
.shot .frame-img { position: relative; padding-top: 38px; }
.shot .frame-img::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 38px;
  background: var(--surface); border-bottom: var(--border-hairline);
  z-index: 1;
}
.shot .frame-img::after {
  content: ""; position: absolute; top: 15px; left: 18px;
  width: 8px; height: 8px; border-radius: var(--radius-pip);
  background: var(--border-strong);
  box-shadow: 15px 0 0 var(--border-strong), 30px 0 0 var(--border-strong);
  z-index: 2;
}

/* ============================================================
 * Mobile navigation (2026-06-19 mobile pass). Hamburger in the
 * topbar (shown <=980px, where .nav is hidden) toggles a full-screen
 * overlay. Show/hide is instant (no animation): robust and reduced-
 * motion-safe by construction. Desktop (>=981px) is unaffected.
 * ============================================================ */
.nav-toggle {
  display: none;                       /* shown only <=980px (below) */
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;           /* >=44px tap target */
  margin-right: -8px;                  /* optical: align icon to frame edge */
  background: none; border: 0; padding: 0;
  color: var(--text); cursor: pointer;
}
.nav-toggle .bars,
.nav-toggle .bars::before,
.nav-toggle .bars::after {
  content: ""; display: block;
  width: 20px; height: 2px;
  background: currentColor; border-radius: 1px;
}
.nav-toggle .bars { position: relative; }
.nav-toggle .bars::before { position: absolute; top: -6px; left: 0; }
.nav-toggle .bars::after  { position: absolute; top:  6px; left: 0; }

.mobile-nav {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: var(--bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--sp-7);
  padding: var(--frame-pad);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav-close {
  position: absolute; top: 12px; right: var(--frame-pad);
  width: 44px; height: 44px;
  background: none; border: 0; padding: 0;
  color: var(--text); font-size: 26px; line-height: 1; cursor: pointer;
}
.mobile-nav nav { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); }
.mobile-nav nav a {
  color: var(--text-secondary); text-decoration: none;
  font-size: var(--step-2); font-weight: var(--weight-medium);
  padding: var(--sp-2) var(--sp-4);
}
.mobile-nav nav a:hover,
.mobile-nav nav a[aria-current="page"] { color: var(--text); }
.mobile-nav nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.5em;
}
body.nav-open { overflow: hidden; }     /* scroll-lock while overlay open */

@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  /* topbar CTA is redundant with the overlay's "Start free" and wraps at
     narrow widths; the hamburger carries it on mobile. */
  .topbar-cta .btn { display: none; }
  /* nav is hidden, so collapse the 3-col grid to brand | cta; otherwise
     grid auto-placement floats the hamburger into the empty middle track
     instead of flush right. */
  .topbar-inner { grid-template-columns: 1fr auto; }
}

/* ============================================================
 * Phone tiers (2026-06-19 mobile pass). The 980 block already
 * collapses hero/play-detail/lrow/form/pricing grids; these handle
 * the dense micro-grids it does not, plus form sizing and tap
 * targets. Desktop (>=981px) is unaffected.
 * ============================================================ */
@media (max-width: 768px) {
  /* Desktop vertical rhythm leaves phones with near-empty scroll states.
     Scale the section/block rhythm down (~half) so bands breathe without
     stranding whitespace. Proportional, so .band.compact scales too. */
  :root {
    --rhythm-section: clamp(48px, 8vh, 72px);
    --rhythm-block: var(--sp-7);
  }

  /* All hero headlines share one size on phones; scaled so the homepage's
     two .line sentences each hold one line (2 lines total) from ~360px up,
     landing ~36px on larger phones. !important overrides the per-page
     inline font-size on product/pricing/demo. */
  .hero h1, .hero.split .sky h1 { font-size: clamp(28px, 8.4vw, 38px) !important; }
  /* hero descriptor drops to the eyebrow/kicker scale */
  .descriptor { font-size: var(--step--1); }

  /* iOS zoom-on-focus guard: form controls must be >=16px */
  .field input, .field select, .field textarea { font-size: 16px; }

  /* tap targets -> >=44px (topbar .btn.small is hidden <=980, so only .chip remains) */
  .chip { padding: 7px 12px; }

  /* long pattern-name chips wrap instead of clipping past overflow-x: clip */
  .pn-chip { white-space: normal; overflow-wrap: anywhere; }

  /* dense multi-column blocks the 980 block misses */
  /* Score block as a phone scorecard: each axis is label + big brand score
     on one line, context on its own line beneath, with space between axes
     so the three parts read as one unit (the flat 1-col stack didn't). */
  .score-block { grid-template-columns: 1fr auto; column-gap: var(--sp-4); row-gap: 2px; }
  .score-block .num { justify-self: end; }
  .score-block .ctx { grid-column: 1 / -1; margin-bottom: var(--sp-4); }
  .score-block .span-2 { grid-column: 2 / -1; justify-self: end; }
  .learn-horizon { grid-template-columns: 1fr; row-gap: 6px; }
  /* keep the kill-switch row on one line: pip + label left, state + toggle
     grouped at the right. The 3-col version wrapped the toggle to its own
     line, orphaned from its "on" state. */
  .kill-block .region { grid-template-columns: auto 1fr auto auto; column-gap: var(--sp-3); }
  .audit-render .row { grid-template-columns: 1fr; gap: var(--sp-1); }
}

@media (max-width: 480px) {
  .loop-stations { grid-template-columns: 1fr; }
  .dest-block .row { grid-template-columns: 18px 1fr; }
  .dest-block .row .v { grid-column: 2; }
  .capture { flex-direction: column; align-items: stretch; }
}

/* ============================================================
 * "Minute you lose" timeline (problem-tracks) on phones. The desktop
 * panel is a horizontal time axis with percent-positioned lanes; below
 * ~600px the absolute labels collide. Restack it vertically: label
 * above each lane, a dashed "minute you lose" connector between, time
 * reading top to bottom. Inline left/width on the lane elements are
 * neutralized with !important; the panel is decorative (aria-hidden).
 * ============================================================ */
@media (max-width: 600px) {
  .pt-axis { display: none; }                 /* horizontal axis doesn't map to vertical */
  .pt-grid { display: flex; flex-direction: column; }
  .pt-row, .pt-row + .pt-row { margin: 0; }
  .pt-name { margin-bottom: var(--sp-2); }

  .pt-lane { height: auto; border-bottom: 0; }
  .pt-lane.ruled { background-image: none; }   /* drop the horizontal time ruler */

  /* the signal window becomes a small in-flow bar cluster */
  .pt-window {
    position: static; left: auto !important; width: auto !important;
    display: inline-flex; height: 40px; gap: 4px;
    background: transparent; border-left: 0; padding: 0;
  }
  .pt-window i { width: 5px; }
  .pt-spike { display: none; }

  /* the gap becomes a vertical dashed connector carrying the label */
  .pt-gaprow { height: auto; }
  .pt-bracket {
    position: static; inset: auto; left: auto !important; width: auto !important;
    border: 0; border-left: 1px dashed var(--warn);
    margin: var(--sp-2) 0 var(--sp-2) 7px;
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
    justify-content: flex-start;
  }
  .pt-gap-lbl { background: transparent; padding: 0; }

  /* the response collapses to a short line under its label */
  .pt-resp {
    position: static; inset: auto; left: auto; right: auto; bottom: auto;
    width: 100%; max-width: 260px; margin-top: var(--sp-1);
  }
}

/* E9 ⬩ Connectors logo grid (integrations only). Operator-authorized canon §7 override:
 * integration marks render here as inline mono SVGs tinted via currentColor, so the page
 * still loads zero external image assets. A ruled matrix in the .ledger register (hairline
 * graph paper), not bento cards. Marks normalize by optical height; gaps fall back to a
 * mono monogram tile. Logos stay in the neutral text register, never --brand-soft/signal/warn. */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: var(--border-hairline);
  border-left: var(--border-hairline);
}
.logo-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--sp-10);
  padding: var(--sp-5);
  border-right: var(--border-hairline);
  border-bottom: var(--border-hairline);
}
.logo-cell.soon { opacity: 0.5; }
.logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  color: var(--text-secondary);
}
.logo-mark svg { height: 28px; width: auto; display: block; fill: currentColor; }
/* monogram fallback (brands with no clean mono mark): a rounded tile so the letter
 * carries the same optical weight as the icon marks beside it. */
.logo-mono {
  box-sizing: border-box;
  width: 28px;
  border: var(--border-strong-l);
  border-radius: 7px;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: var(--weight-heavy);
  line-height: 1;
}
.logo-name {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}
/* live + coming-soon register labels: a mono eyebrow above a ticked seam rule, one per grid */
.grid-seam { margin-top: var(--rhythm-block); }
.grid-seam .kicker { display: block; margin-bottom: var(--sp-3); }

@media (max-width: 1199px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 980px)  { .logo-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
 * MCP chat mock ⬩ integrations #mcp lane
 * A static "inside Claude desktop" chat: band-head copy on the
 * left, the chat panel on the right (two-column, data-collapse
 * stacks it on mobile). The conversation renders the way MCP
 * actually renders: the operator types plain text, Bryn's tool
 * output comes back as plain text Claude formats itself. No
 * brand spans in the message stream. The titlebar, action icons,
 * sparkle, and composer reproduce Claude desktop's own chrome.
 * Dark-only, Palette D.
 * ============================================================ */

/* Left column: let the band-head sit top-aligned in the grid */
.mcp-head { margin-bottom: 0; }
.mcp-head .mcp-cta { margin-top: var(--sp-6); }

.mcp-chat {
  background: var(--surface);
  border: var(--border-hairline);
  border-radius: var(--radius-block);
  box-shadow: var(--shadow-elev);
  overflow: hidden;
}

/* Titlebar ⬩ echoes .live-panel .strip */
.mcp-chat-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: var(--border-hairline);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
  color: var(--text-muted);
}
.mcp-chat-bar .dots { display: inline-flex; gap: 5px; }
.mcp-chat-bar .dots i {
  width: 7px; height: 7px;
  border-radius: var(--radius-pip);
  background: var(--border-strong);
}
.mcp-chat-bar .title { color: var(--text-secondary); }
.mcp-chat-bar .title .di { color: var(--text-muted); }
.mcp-chat-bar .tools { margin-left: auto; color: var(--signal); }

/* Body ⬩ one operator turn, one Bryn turn */
.mcp-chat-body {
  padding: clamp(16px, 2.4vw, 22px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mcp-chat .turn { display: flex; flex-direction: column; }

/* User turn ⬩ right-aligned dark pill, plain text (no chip, no brand) */
.mcp-chat .turn.ask { align-items: flex-end; }
.mcp-chat .turn.ask .bubble {
  max-width: 84%;
  background: var(--surface-alt);
  border: var(--border-hairline);
  border-radius: var(--radius-panel);
  padding: 11px 15px;
  color: var(--text);
  font-size: var(--step-0);
  line-height: var(--leading-snug);
}

/* Bryn turn ⬩ plain text the way Claude renders MCP tool output */
.mcp-chat .turn.answer { gap: 12px; }

/* Collapsible summary line with chevron (Claude's "Synthesized …" row) */
.mcp-chat .mcp-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
}
.mcp-chat .mcp-summary .chev { color: var(--text-muted); font-size: 1.1em; line-height: 1; }

/* Answer body ⬩ Bryn sans (no serif import), near-white, paragraph spacing */
.mcp-chat .mcp-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--text);
  font-size: var(--step-0);
  line-height: var(--leading-body);
}
.mcp-chat .mcp-body p { margin: 0; }

/* Claude sparkle + action icon row */
.mcp-chat .mcp-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}
.mcp-chat .mcp-actions .claude-mark {
  display: inline-flex;
  color: var(--text-muted); /* neutral default; coral (--warn) is the realistic Claude mark, pending Brad sign-off (locked coral semantic) */
  margin-right: 2px;
}
.mcp-chat .mcp-actions button {
  display: inline-flex;
  padding: 0;
  background: none;
  border: 0;
  color: var(--text-muted);
  cursor: default;
}

/* Composer ⬩ Claude desktop's input chrome */
.mcp-chat .mcp-composer {
  margin: 0 clamp(16px, 2.4vw, 22px) clamp(16px, 2.4vw, 22px);
  background: var(--surface-alt);
  border: var(--border-hairline);
  border-radius: var(--radius-block);
  padding: 13px 15px 11px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mcp-chat .mcp-composer .ph {
  color: var(--text-muted);
  font-size: var(--step-0);
  line-height: var(--leading-snug);
}
.mcp-chat .mcp-composer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mcp-chat .mcp-composer .plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border: var(--border-hairline);
  border-radius: var(--radius-pip);
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1;
}
.mcp-chat .mcp-composer .ctrls {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text-muted);
}
.mcp-chat .mcp-composer .model {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-secondary);
}
.mcp-chat .mcp-composer .model .cv { color: var(--text-muted); }

@media (max-width: 980px) {
  /* data-collapse already drops to one column; chat sits below the copy */
  .mcp-head { margin-bottom: 0; }
}
@media (max-width: 640px) {
  .mcp-chat .turn.ask .bubble { max-width: 100%; }
  .mcp-chat-bar .tools { display: none; }
  .mcp-chat .mcp-body { font-size: 14px; }
  .mcp-chat .mcp-actions { gap: 14px; }
  .mcp-chat .mcp-composer .model { font-size: 11px; }
}

/* ============================================================
 * Warehouse lane ⬩ /bryn/integrations §5 ⬩ a Snowflake result panel.
 * Stacked + full-width to contrast the #mcp two-column block above.
 * Reuses: .matrix cell grammar (page-local in pricing.html, so re-stated
 * here), .live-panel .strip vocabulary, .panel shell. Color doctrine:
 * teal --signal = score/matched, purple --brand = account/Play/SQL.
 * ============================================================ */

.wh-panel {
  background: var(--surface);
  border: var(--border-hairline);
  border-radius: var(--radius-block);
  box-shadow: var(--shadow-elev);
  overflow: hidden;
}

/* Titlebar strip ⬩ echoes .live-panel .strip */
.wh-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: var(--border-hairline);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
}
.wh-strip .wh-live {
  color: var(--signal);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--weight-semibold);
}
.wh-strip .wh-live .pip {
  width: 7px; height: 7px;
  border-radius: var(--radius-pip);
  background: var(--signal);
  box-shadow: 0 0 0 4px var(--signal-halo);
  animation: civic-pulse var(--dur-pulse) ease-in-out infinite;
}
.wh-strip .wh-loc { color: var(--text-secondary); text-transform: none; letter-spacing: 0; }
.wh-strip .wh-count { margin-left: auto; letter-spacing: var(--track-stamp); }
.wh-strip .wh-count b { color: var(--signal); font-weight: var(--weight-semibold); }
.wh-strip .wh-count .di { color: var(--text); }

/* SQL snippet ⬩ mono, dim, on the surface-alt shelf */
.wh-sql {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  background: var(--surface-alt);
  border-bottom: var(--border-hairline);
  padding: 12px 16px;
  white-space: pre-wrap;
}
.wh-sql .kw  { color: var(--brand-soft); font-weight: var(--weight-semibold); }
.wh-sql .tbl { color: var(--brand-soft); }

/* Data grid ⬩ .matrix cell grammar re-stated (page-local in pricing.html) */
.wh-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wh-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.wh-table th,
.wh-table td {
  border-bottom: var(--border-hairline);
  padding: 11px 16px;
  text-align: left;
  white-space: nowrap;
}
.wh-table thead th {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--track-stamp-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--weight-semibold);
}
.wh-table tbody tr:last-child td { border-bottom: 0; }
.wh-table td { color: var(--text); }
.wh-table th.num,
.wh-table td.num { text-align: right; font-family: var(--font-mono); }
.wh-table td.acct { font-family: var(--font-mono); color: var(--brand-soft); }
.wh-table td.play { font-family: var(--font-mono); color: var(--brand-soft); }
.wh-table td.t { color: var(--text-secondary); letter-spacing: var(--track-mono-meta); }
.wh-table td.score { color: var(--signal); font-weight: var(--weight-semibold); }
.wh-table td.st {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.wh-table td.st .pip {
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: 7px;
  border-radius: var(--radius-pip);
  background: var(--signal);
  vertical-align: 1px;
}
.wh-table td.st.held { color: var(--text-muted); }
.wh-table tr.wh-lead td { background: var(--brand-tint); }
.wh-table tr.wh-lead td.acct,
.wh-table tr.wh-lead td.play { color: var(--brand-soft); }

@media (max-width: 980px) {
  .wh-strip { flex-wrap: wrap; row-gap: 6px; }
  .wh-strip .wh-count { margin-left: 0; }
  .wh-sql { font-size: var(--step--2); }
  .wh-table th,
  .wh-table td { padding: 9px 12px; font-size: var(--step--2); }
}
@media (max-width: 640px) {
  .wh-strip .wh-loc { display: none; }
  .wh-table th,
  .wh-table td { padding: 8px 10px; }
}

/* ============================================================
 * Stack fit ⬩ homepage logo strip (teaser echo of /bryn/integrations
 * connectors grid). Reuses .logo-mark / .logo-mono / .logo-name; this is
 * the lighter, borderless, linked variant for the homepage band.
 * ============================================================ */
.sf-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-7) var(--sp-9);
  align-items: flex-start;
}
.sf-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease);
}
.sf-cell .logo-mark { color: var(--text-secondary); transition: color var(--dur-fast) var(--ease); }
.sf-cell .logo-name { transition: color var(--dur-fast) var(--ease); }
a.sf-cell:hover { transform: translateY(-2px); }
a.sf-cell:hover .logo-mark,
a.sf-cell:hover .logo-name { color: var(--brand-soft); }

@media (max-width: 980px) { .sf-strip { gap: var(--sp-6) var(--sp-7); justify-content: center; } }
@media (max-width: 640px) { .sf-strip { gap: var(--sp-5) var(--sp-6); } }