/* ============================================================
   base9health — Corporate v1
   Brand system: Navy anchor, Signal Blue accent, Paper surface.
   Typography: Inter for display & body, JetBrains Mono for
   telemetry/IDs, Source Serif 4 only for the customer pull-quote.
   No greens, no reds. Status is signaled with navy tints + blue.
   ============================================================ */

:root {
  /* Brand palette */
  --navy:        #021935;
  --navy-2:      #061F3E;
  --navy-deep:   #010E22;
  --navy-700:    #0E2C53;
  --navy-500:    #1F3F6B;
  --navy-300:    #4A6488;

  --signal:      #5279AE;
  --signal-2:    #7E9FCC;
  --signal-soft: #B7CAE2;

  --paper:       #F4F6FA;
  --paper-2:     #ECF0F7;
  --white:       #FFFFFF;

  --ink:         #0A0F1A;
  --ink-2:       #1F2738;
  --ink-3:       #4D5670;
  --ink-4:       #6B7794;
  --ink-5:       #97A0B5;

  --slate-100:   #EEF1F7;
  --slate-200:   #E4E9F2;
  --slate-300:   #CFD6E4;

  /* On-navy */
  --on-navy:     #DCE4F2;
  --on-navy-2:   #9BACC6;
  --on-navy-3:   #5E7191;

  /* Layout */
  --maxw:        1320px;
  --maxw-tight:  920px;
  --pad:         clamp(20px, 4vw, 56px);

  /* Type */
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radius (corporate: small, consistent) */
  --r:           6px;
  --r-lg:        10px;

  /* Shadow */
  --shadow-sm:   0 1px 2px rgba(2,25,53,.04), 0 1px 1px rgba(2,25,53,.03);
  --shadow:      0 6px 24px -8px rgba(2,25,53,.12), 0 2px 6px -2px rgba(2,25,53,.06);
  --shadow-lg:   0 24px 60px -20px rgba(2,25,53,.18), 0 8px 20px -8px rgba(2,25,53,.08);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11','ss01','ss03';
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--signal); color: var(--white); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
.wrap-t { max-width: var(--maxw-tight); margin: 0 auto; padding: 0 var(--pad); }
section { padding: clamp(48px, 5vw, 80px) 0; position: relative; }

.surf-paper { background: var(--paper); color: var(--ink); }
.surf-paper-2 { background: var(--paper-2); color: var(--ink); }
.surf-white { background: var(--white); color: var(--ink); }
.surf-navy  { background: var(--navy); color: var(--on-navy); }
.surf-deep  { background: var(--navy-deep); color: var(--on-navy); }
.surf-navy h1, .surf-navy h2, .surf-navy h3, .surf-navy h4,
.surf-deep h1, .surf-deep h2, .surf-deep h3, .surf-deep h4 { color: var(--white); }

/* ===== Folio (top utility bar) ===== */
.folio {
  background: var(--navy-deep);
  color: var(--on-navy-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--navy-700);
}
.folio-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 9px var(--pad);
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 24px; align-items: center;
}
.folio-inner > :nth-child(2) { color: var(--on-navy); justify-self: center; letter-spacing: 0.22em; }
.folio-inner > :last-child   { justify-self: end; }
.folio a { color: var(--on-navy); border-bottom: 1px solid transparent; transition: border-color .15s; }
.folio a:hover { border-color: var(--signal-2); color: var(--white); }
.folio .live { display: inline-flex; align-items: center; gap: 9px; }
.folio .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(82,121,174,.55); }
  60%      { box-shadow: 0 0 0 7px rgba(82,121,174,0); }
}
@media (max-width: 800px) {
  .folio-inner { grid-template-columns: 1fr 1fr; }
  .folio-inner > :nth-child(2) { display: none; }
}

/* ===== Ticker ===== */
.ticker {
  background: var(--navy);
  color: var(--on-navy-2);
  border-bottom: 1px solid var(--navy-700);
  overflow: hidden;
  position: relative;
}
.ticker-track {
  display: flex; gap: 56px;
  padding: 9px 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  animation: tick 70s linear infinite;
  width: max-content;
}
.ticker-item { display: inline-flex; align-items: center; gap: 10px; }
.ticker-item .tk-t  { color: var(--signal-2); }
.ticker-item .tk-id { color: var(--signal); font-weight: 600; }
.ticker-item .tk-sep { color: var(--on-navy-3); }
.ticker-item .tk-msg { color: var(--on-navy); }
@keyframes tick {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker:hover .ticker-track { animation-play-state: paused; }

/* ===== Top bar — clean, quiet, lockup-first ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--slate-200);
}
.topbar-shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 88px;
}

.tb-plate-logo { display: flex; align-items: center; flex-shrink: 0; }
.tb-plate-logo a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--navy);
  line-height: 1;
}
.tb-plate-logo .tb-mark {
  display: block;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.tb-plate-logo .tb-word {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.028em;
  color: var(--navy);
  display: inline-flex;
  align-items: baseline;
  line-height: 0.9;
}
.tb-plate-logo .tb-word .nine { color: var(--signal); }
.tb-plate-logo .tb-word .tag {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid var(--slate-300);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--signal);
  align-self: center;
}
@media (max-width: 980px) {
  .tb-plate-logo .tb-mark { width: 36px; height: 36px; }
  .tb-plate-logo .tb-word { font-size: 24px; }
  .tb-plate-logo .tb-word .tag { font-size: 9.5px; margin-left: 8px; padding-left: 8px; }
}

.tb-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tb-links a {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: -0.005em;
  padding: 8px 12px;
  position: relative;
  transition: color .15s;
}
.tb-links a:hover { color: var(--navy); }
.tb-links a.active { color: var(--navy); font-weight: 600; }
.tb-links a.active::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -2px;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--signal);
}

.tb-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.tb-cta .tb-ghost {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-3);
  padding: 8px 12px;
  transition: color .15s;
}
.tb-cta .tb-ghost:hover { color: var(--navy); }

.tb-cta .tb-pri {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
  background: var(--navy);
  padding: 9px 16px;
  border-radius: var(--r);
  transition: background .15s;
}
.tb-cta .tb-pri:hover { background: var(--navy-700); }
.tb-cta .tb-pri .tb-arrow {
  color: var(--signal-2);
  transition: transform .15s;
}
.tb-cta .tb-pri:hover .tb-arrow { transform: translateX(2px); }

/* === Hamburger button — desktop hidden, mobile visible === */
.tb-burger {
  display: none;
  background: transparent;
  border: 1px solid var(--slate-200);
  border-radius: var(--r);
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: border-color .15s, background .15s;
  flex-shrink: 0;
}
.tb-burger:hover { border-color: var(--navy); background: var(--slate-100); }
.tb-burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--navy);
  border-radius: 1px;
  transition: transform .25s ease, opacity .15s ease;
  transform-origin: center;
}
.topbar.is-open .tb-burger span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.topbar.is-open .tb-burger span:nth-child(2) { opacity: 0; }
.topbar.is-open .tb-burger span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 980px) {
  .topbar-shell { height: 72px; gap: 12px; }
  .tb-burger { display: flex; }

  /* Hide ghost (Sign in) on mobile but keep primary CTA visible */
  .tb-cta .tb-ghost { display: none; }
  .tb-cta { padding-left: 0; }

  /* Convert .tb-links into a slide-down mobile menu */
  .tb-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--pad) 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--slate-200);
    box-shadow: 0 8px 24px -12px rgba(2,25,53,0.12);
    /* Hidden by default on mobile */
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .2s ease;
    display: flex;
  }
  .topbar.is-open .tb-links {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .tb-links a {
    padding: 14px 12px;
    font-size: 16px;
    border-bottom: 1px solid var(--slate-200);
    border-radius: 0;
  }
  .tb-links a:last-child { border-bottom: 0; }
  .tb-links a.active::after { display: none; }
  .tb-links a.active {
    color: var(--signal);
  }
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px; font-size: 14px; font-weight: 600;
  border: 1px solid transparent;
  letter-spacing: -0.005em;
  font-family: var(--sans);
  border-radius: var(--r);
  transition: background .15s, color .15s, border-color .15s, transform .12s, box-shadow .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-pri { background: var(--navy); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-pri:hover { background: var(--navy-700); box-shadow: var(--shadow); }
.btn-pri .arrow { color: var(--signal-2); }
.btn-sec { border-color: var(--slate-300); color: var(--navy); background: var(--white); }
.btn-sec:hover { border-color: var(--navy); }
.btn-ghost { color: var(--navy); }
.btn-ghost:hover { background: var(--slate-100); }
.btn-on-navy { border: 1px solid rgba(255,255,255,.25); color: var(--white); }
.btn-on-navy:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }
.btn-paper { background: var(--white); color: var(--navy); }
.btn-paper:hover { background: var(--paper); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn .arrow { transition: transform .15s; }
.btn:hover .arrow { transform: translateX(3px); }

/* ===== Type ===== */
.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.kicker::before {
  content: '';
  width: 18px; height: 1px;
  background: var(--signal);
  display: inline-block;
}
.kicker.on-navy { color: var(--signal-2); }
.kicker.on-navy::before { background: var(--signal-2); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
}

.display {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--navy);
  text-wrap: balance;
  margin: 0;
}
.display em {
  font-style: normal;
  color: var(--signal);
  font-weight: 600;
}
h1 { font-family: var(--sans); font-weight: 600; color: var(--navy); margin: 0; letter-spacing: -0.022em; }
h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
}
h2 em { font-style: normal; color: var(--signal); }
h3 {
  font-family: var(--sans);
  font-size: 19px; font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3; margin: 0;
  color: var(--navy);
}
h4 {
  font-family: var(--sans);
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0; color: var(--navy);
}
.lead {
  font-size: clamp(16.5px, 1.2vw, 19px);
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0;
  text-wrap: pretty;
  font-family: var(--sans);
}
.surf-navy .lead, .surf-deep .lead { color: var(--on-navy); }
.muted { color: var(--ink-4); }
.tnum { font-variant-numeric: tabular-nums; }

/* ===== Section header (corporate) ===== */
.sec-head {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: clamp(28px, 3vw, 40px);
  max-width: 720px;
}
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; align-items: center; }
.sec-head .lead { max-width: 640px; }

/* ===== Chapter mark (subtle, replaces roman numerals) ===== */
.chapter {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--signal); font-weight: 600;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--slate-200);
}
.chapter .ch-no { color: var(--ink-4); }
.chapter.on-navy { color: var(--signal-2); border-bottom-color: var(--navy-700); }
.chapter.on-navy .ch-no { color: var(--on-navy-3); }

/* ===== HERO ===== */
.hero {
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 72px);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--slate-200) 1px, transparent 1px),
    linear-gradient(90deg, var(--slate-200) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  opacity: .35;
  mask-image: radial-gradient(ellipse at 70% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, black 30%, transparent 75%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; align-items: start; } }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 600;
  padding: 6px 12px;
  border: 1px solid var(--slate-200);
  background: var(--white);
  border-radius: 999px;
  margin-bottom: 28px;
}
.hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }

.hero h1.display { font-size: clamp(40px, 5.4vw, 72px); }

.trust-row {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--slate-200);
}
.trust-row .tr-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-4); font-weight: 600;
  margin-bottom: 16px;
}
.trust-row .tr-list {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 8px;
}
.trust-row .tr-list span {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--navy); font-weight: 600;
  background: var(--white);
  border: 1px solid var(--slate-200);
  padding: 7px 12px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1;
}
.trust-row .tr-list span::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--signal);
  flex-shrink: 0;
}

/* ===== Live floor widget (replaces hero terminal) ===== */
.floor {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.floor-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--slate-200);
  background: var(--paper);
}
.floor-head .fh-l {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-4); font-weight: 600;
}
.floor-head .fh-l b { color: var(--navy); }
.floor-head .fh-r {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--signal); font-weight: 600;
}
.floor-head .fh-r .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); animation: pulse 2.4s infinite; }

.floor-grid {
  display: grid;
  grid-template-columns: 96px repeat(6, 1fr);
  background: var(--slate-200);
  gap: 1px;
}
.floor-grid > div {
  background: var(--white);
  padding: 10px 12px;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.04em;
}
.floor-grid .fg-h {
  background: var(--paper-2);
  color: var(--ink-4);
  font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; font-size: 10px;
}
.floor-grid .fg-name { font-weight: 600; color: var(--navy); }
.floor-grid .fg-cell { color: var(--navy-300); font-size: 11px; }
.floor-grid .fg-cell.filled { color: var(--navy); }
.floor-grid .fg-cell.gap {
  background: var(--paper-2);
  color: var(--navy-300);
  font-weight: 600;
}
.floor-grid .fg-cell.live {
  background: var(--signal);
  color: var(--white);
  font-weight: 700;
  position: relative;
}
.floor-grid .fg-cell.live::after {
  content: '';
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 2px var(--white);
  animation: pulse 2.4s infinite;
}

.floor-log {
  background: var(--navy-deep);
  color: var(--on-navy);
  padding: 14px 18px;
  font-family: var(--mono); font-size: 12px;
  border-top: 1px solid var(--slate-200);
}
.floor-log .fl-row { display: grid; grid-template-columns: 70px 96px 1fr; gap: 14px; padding: 4px 0; }
.floor-log .fl-row .fl-t  { color: var(--signal-2); }
.floor-log .fl-row .fl-id { color: var(--signal); font-weight: 600; }
.floor-log .fl-row .fl-msg { color: var(--on-navy); }

/* ===== Interstitial thesis line ===== */
.builtfor {
  background: var(--white);
  border-top: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
  padding: clamp(56px, 7vw, 96px) 0;
  position: relative;
}
.builtfor::before,
.builtfor::after {
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 36px; height: 1px;
  background: var(--signal);
}
.builtfor::before { top: 32px; }
.builtfor::after  { bottom: 32px; }
.builtfor .bf-inner {
  max-width: 980px; margin: 0 auto;
  padding: 0 var(--pad);
  text-align: center;
}
.builtfor .bf-line {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(24px, 2.8vw, 38px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 auto;
  max-width: 880px;
  text-wrap: balance;
}
.builtfor .bf-line em { font-style: normal; color: var(--signal); }

/* ===== Pillars (3-up value props) ===== */
.pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--slate-200);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.pillars .pl {
  background: var(--white);
  padding: 36px 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.pillars .pl-icon {
  width: 36px; height: 36px;
  border: 1px solid var(--slate-200);
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  color: var(--signal);
  font-family: var(--mono); font-weight: 700; font-size: 14px;
  background: var(--paper);
}
.pillars .pl h3 { font-size: 22px; letter-spacing: -0.018em; }
.pillars .pl p { color: var(--ink-3); margin: 0; font-size: 15px; line-height: 1.6; }
@media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } }

/* ===== Stat strip ===== */
.statstrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--navy);
  border-bottom: 1px solid var(--slate-200);
}
.statstrip .stat {
  padding: 20px 24px 20px 0;
  border-right: 1px solid var(--slate-200);
  display: flex; flex-direction: column; gap: 8px;
}
.statstrip .stat:last-child { border-right: 0; padding-right: 0; }
.statstrip .stat:not(:first-child) { padding-left: 24px; }
.statstrip .stk {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-4); font-weight: 600;
}
.statstrip .stv {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(34px, 4.2vw, 56px); line-height: 1;
  letter-spacing: -0.025em; color: var(--navy);
}
.statstrip .stv .unit {
  font-size: 0.5em; color: var(--ink-4); margin-left: 4px; font-weight: 500;
}
.statstrip .stl { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.statstrip .stl .stsrc {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
}
.statstrip.on-navy { border-top-color: var(--signal); border-bottom-color: var(--navy-700); }
.statstrip.on-navy .stat { border-right-color: var(--navy-700); }
.statstrip.on-navy .stv { color: var(--white); }
.statstrip.on-navy .stk { color: var(--signal-2); }
.statstrip.on-navy .stl { color: var(--on-navy); }
@media (max-width: 800px) {
  .statstrip { grid-template-columns: 1fr 1fr; }
  .statstrip .stat:nth-child(2) { border-right: 0; padding-right: 0; }
  .statstrip .stat:nth-child(3) { padding-left: 0; }
  .statstrip .stat:nth-child(3), .statstrip .stat:nth-child(4) { border-top: 1px solid var(--slate-200); padding-top: 28px; }
}

/* ===== Walkthrough (alternating product panels) ===== */
.walk { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 96px); }
.walk-row {
  display: grid; grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.walk-row.flip { grid-template-columns: 7fr 5fr; }
.walk-row.flip .walk-copy { order: 2; }
.walk-copy { display: flex; flex-direction: column; gap: 18px; }
.walk-copy .step {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--signal); font-weight: 600;
}
.walk-copy h3 { font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.02em; line-height: 1.15; }
.walk-copy p { color: var(--ink-3); font-size: 16px; line-height: 1.65; margin: 0; }
.walk-copy ul { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 10px; }
.walk-copy ul li {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px;
  font-size: 14.5px; color: var(--ink-2);
  padding: 8px 0; border-top: 1px solid var(--slate-200);
}
.walk-copy ul li:last-child { border-bottom: 1px solid var(--slate-200); }
.walk-copy ul li::before {
  content: '+'; color: var(--signal); font-weight: 700; font-family: var(--mono);
}
.walk-vis {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-height: 320px;
}
.walk-vis .wv-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--slate-200);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-4); font-weight: 600;
}
.walk-vis .wv-head b { color: var(--navy); }
.walk-vis .wv-body { padding: 22px 24px; }
@media (max-width: 900px) {
  .walk-row, .walk-row.flip { grid-template-columns: 1fr; }
  .walk-row.flip .walk-copy { order: 0; }
}

/* Walkthrough visualizations */
.wv-bars { display: flex; flex-direction: column; gap: 10px; }
.wv-bars .bar { display: grid; grid-template-columns: 80px 1fr 48px; gap: 14px; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; }
.wv-bars .bar .bn { color: var(--navy); font-weight: 600; }
.wv-bars .bar .bv { background: var(--slate-100); border-radius: 4px; height: 10px; position: relative; overflow: hidden; }
.wv-bars .bar .bv::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; background: var(--navy); border-radius: 4px; }
.wv-bars .bar.b1 .bv::after { width: 92%; }
.wv-bars .bar.b2 .bv::after { width: 68%; background: var(--signal); }
.wv-bars .bar.b3 .bv::after { width: 81%; }
.wv-bars .bar.b4 .bv::after { width: 54%; }
.wv-bars .bar.b5 .bv::after { width: 76%; background: var(--signal); }

.wv-match { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.wv-match .mc {
  border: 1px solid var(--slate-200);
  padding: 14px;
  border-radius: var(--r);
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
}
.wv-match .mc .mn { color: var(--navy); font-weight: 700; font-size: 13px; font-family: var(--sans); letter-spacing: -0.005em; }
.wv-match .mc .ms { color: var(--signal); font-weight: 600; }
.wv-match .mc.top { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.wv-match .mc.top .mn { color: var(--white); }
.wv-match .mc.top .ms { color: var(--signal-2); }
@media (max-width: 600px) { .wv-match { grid-template-columns: 1fr 1fr; } }

.wv-rule {
  font-family: var(--mono); font-size: 12px; line-height: 1.7; color: var(--ink-2);
  background: var(--paper); border-left: 3px solid var(--signal);
  padding: 14px 16px; border-radius: 0 var(--r) var(--r) 0;
}
.wv-rule .rk { color: var(--signal); font-weight: 600; }
.wv-rule .rv { color: var(--navy); }

.wv-pay { display: flex; flex-direction: column; gap: 8px; font-family: var(--mono); font-size: 12.5px; }
.wv-pay .pr { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; padding: 8px 0; border-top: 1px solid var(--slate-200); align-items: center; }
.wv-pay .pr:first-child { border-top: 0; }
.wv-pay .pr .pl { color: var(--ink-3); }
.wv-pay .pr .pa { color: var(--navy); font-weight: 600; }
.wv-pay .pr .pd { color: var(--signal); font-weight: 600; }
.wv-pay .pr.total { border-top: 2px solid var(--navy); margin-top: 6px; padding-top: 12px; }
.wv-pay .pr.total .pa { color: var(--navy); font-size: 14px; }

.wv-audit { font-family: var(--mono); font-size: 12px; }
.wv-audit .ar { display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding: 6px 0; color: var(--ink-3); }
.wv-audit .ar .at { color: var(--signal-2); }
.wv-audit .ar .am b { color: var(--navy); font-weight: 600; }
.wv-audit .sig { margin-top: 14px; padding: 10px 12px; background: var(--paper); border-radius: var(--r); color: var(--ink-3); font-size: 11px; word-break: break-all; }
.wv-audit .sig b { color: var(--signal); }

/* ===== Asymmetric editorial ===== */
.asym {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.asym.flip { grid-template-columns: 7fr 5fr; }
@media (max-width: 900px) { .asym, .asym.flip { grid-template-columns: 1fr; } }

/* ===== Pull-quote (the one place serif lives) ===== */
.pullquote {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--navy);
  text-wrap: balance;
  position: relative; padding-left: 0;
}
.pullquote .qm {
  display: block;
  font-family: var(--serif);
  color: var(--signal);
  font-size: 1.4em;
  line-height: 0.6;
  margin-bottom: 14px;
}
.pullquote .attr {
  display: block; margin-top: 28px;
  font-family: var(--mono); font-style: normal;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-4); font-weight: 600;
}
.surf-navy .pullquote, .surf-deep .pullquote { color: var(--white); }
.surf-navy .pullquote .qm, .surf-deep .pullquote .qm { color: var(--signal-2); }
.surf-navy .pullquote .attr, .surf-deep .pullquote .attr { color: var(--on-navy-2); }

/* ===== Thesis spread (creative card-index tiles) ===== */
.thesis {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--slate-200);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: clamp(48px, 6vw, 72px);
}
.thesis .th-cell {
  background: var(--white);
  padding: 36px 30px 32px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 220px;
  position: relative;
  overflow: hidden;
  transition: background .25s ease;
  cursor: default;
}
/* Big watermark numeral, bottom-right, very faint */
.thesis .th-cell::before {
  content: attr(data-mark);
  position: absolute;
  right: -10px; bottom: -34px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 180px;
  line-height: 1;
  color: var(--slate-100);
  letter-spacing: -0.04em;
  pointer-events: none;
  transition: color .3s ease, transform .4s ease;
  z-index: 0;
}
/* Top hairline accent — like a card-index tab */
.thesis .th-cell::after {
  content: '';
  position: absolute;
  top: 0; left: 30px;
  width: 32px; height: 3px;
  background: var(--signal);
  transition: width .3s ease;
}
.thesis .th-cell > * { position: relative; z-index: 1; }

.thesis .th-cell:hover { background: var(--paper); }
.thesis .th-cell:hover::before {
  color: var(--slate-200);
  transform: translate(-4px, -4px);
}
.thesis .th-cell:hover::after { width: 64px; }

.thesis .th-cell .th-num {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--signal); font-weight: 700;
  display: inline-flex; align-items: center; gap: 10px;
}
.thesis .th-cell .th-num::before {
  content: '';
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(82,121,174,.18);
  flex-shrink: 0;
}
.thesis .th-cell h3 {
  font-size: 22px; letter-spacing: -0.018em; line-height: 1.22;
  margin-top: 4px;
}
.thesis .th-cell p {
  color: var(--ink-3); font-size: 14.5px; line-height: 1.6; margin: 0;
}

/* Dark variant — solid navy, light watermark, lighter hover */
.thesis .th-cell.dark { background: var(--navy); color: var(--on-navy); }
.thesis .th-cell.dark::before { color: rgba(255,255,255,.04); }
.thesis .th-cell.dark::after { background: var(--signal-2); }
.thesis .th-cell.dark h3 { color: var(--white); }
.thesis .th-cell.dark p { color: var(--on-navy); }
.thesis .th-cell.dark .th-num { color: var(--signal-2); }
.thesis .th-cell.dark .th-num::before { background: var(--signal-2); box-shadow: 0 0 0 3px rgba(126,159,204,.2); }
.thesis .th-cell.dark:hover { background: var(--navy-700); }
.thesis .th-cell.dark:hover::before { color: rgba(255,255,255,.06); }

/* Note variant — for the trailing "summary" tile */
.thesis .th-cell.note {
  background: var(--paper-2);
  border: 0;
}
.thesis .th-cell.note::before {
  content: '∎';
  font-size: 120px;
  right: 16px; bottom: -24px;
  color: var(--slate-200);
}
.thesis .th-cell.note .th-num { color: var(--ink-4); }
.thesis .th-cell.note .th-num::before {
  background: transparent;
  box-shadow: 0 0 0 1px var(--ink-4);
}
.thesis .th-cell.note::after {
  background: var(--ink-4);
  width: 18px;
}

@media (max-width: 1100px) { .thesis:not(.bento) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .thesis:not(.bento) { grid-template-columns: 1fr; } .thesis .th-cell::before { font-size: 140px; bottom: -26px; } }

/* ===== Bento variant — modest height variation, content fills the box ===== */
/* Strategy: bento earns its asymmetry through *width* variation (s/wide/full) and one
   modest height bump (tall = 1.4× s). No 2× heights — those create voids. Content
   sits flush from the top in every tile, so nothing floats. */
.thesis.bento {
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 170px;
  grid-auto-flow: row dense;
  background: var(--slate-200);
  gap: 1px;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.thesis.bento .th-cell {
  min-height: 0;
  padding: 18px 22px;
  gap: 6px;
  justify-content: flex-start;
  border: 0;
  background: var(--white);
}
.thesis.bento .th-cell.dark { background: var(--navy); }
.thesis.bento .th-cell.note { background: var(--paper-2); }

/* Watermark numeral */
.thesis.bento .th-cell::before {
  font-size: 120px;
  right: -8px; bottom: -22px;
  color: var(--slate-100);
  z-index: 0;
}
.thesis.bento .th-cell.dark::before { color: rgba(255,255,255,.05); }

/* (snake outline now lives on .th-cell border itself — see above) */

.thesis.bento .th-cell .th-num { font-size: 10.5px; letter-spacing: 0.2em; }
.thesis.bento .th-cell h3 { font-size: 17px; line-height: 1.22; margin-top: 2px; }
.thesis.bento .th-cell p { font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.thesis.bento .th-cell.dark p { color: var(--on-navy); }
.thesis.bento .th-cell .th-top { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }

/* Sizes — width variation + modest tall bump */
.thesis.bento .th-cell.s     { grid-column: span 4; grid-row: span 1; }
.thesis.bento .th-cell.wide  { grid-column: span 8; grid-row: span 1; }
.thesis.bento .th-cell.tall  { grid-column: span 4; grid-row: span 1; }
.thesis.bento .th-cell.xl    { grid-column: span 8; grid-row: span 1; }
.thesis.bento .th-cell.full  { grid-column: span 12; grid-row: span 1; }

/* Statement — bigger headline, no watermark, slightly more breathing */
.thesis.bento .th-cell.statement { padding: 24px 26px; }
.thesis.bento .th-cell.statement::before { content: none; }
.thesis.bento .th-cell.statement h3 {
  font-size: clamp(20px, 1.9vw, 26px);
  letter-spacing: -0.02em;
  line-height: 1.18;
}
.thesis.bento .th-cell.statement p { font-size: 14px; line-height: 1.55; max-width: 580px; }

.thesis.bento .th-cell.wide p { max-width: 720px; }

/* Statement tile uses default snake outline */

.thesis.bento .th-cell.note { padding: 26px 28px; background: var(--paper-2); }
.thesis.bento .th-cell.note::before { font-size: 90px; bottom: -14px; right: 16px; color: var(--slate-200); }
.thesis.bento .th-cell.note .th-num { color: var(--ink-4); }
/* Note tile — no animated outline, it's the footer */
.thesis.bento .th-cell.note::after {
  background: none;
  border: 1px solid var(--slate-200);
  padding: 0;
  -webkit-mask: none;
          mask: none;
  -webkit-mask-composite: source-over;
          mask-composite: add;
  animation: none;
  opacity: 1;
}

/* Reduced motion — keep the gradient but stop the rotation */
@media (prefers-reduced-motion: reduce) {
  .thesis.bento .th-cell::after { animation: none; }
}

/* The actual height variation: every other ROW (rows 1, 3, 5...) gets a deliberate offset
   via `tall` if the user opts in — but we keep grid-auto-rows fixed. To get true bento
   asymmetry without voids, we use grid-row spans only on tiles whose CONTENT is long
   enough to fill: that means xl (statement) and wide note. They stay 1-row.
   Bento feel comes from width variation: s (4) | wide (8) | full (12). */

@media (max-width: 1100px) {
  .thesis.bento { grid-template-columns: repeat(8, 1fr); grid-auto-rows: 200px; }
  .thesis.bento .th-cell.s    { grid-column: span 4; }
  .thesis.bento .th-cell.wide { grid-column: span 8; }
  .thesis.bento .th-cell.tall { grid-column: span 4; }
  .thesis.bento .th-cell.xl   { grid-column: span 8; }
  .thesis.bento .th-cell.full { grid-column: span 8; }
}
@media (max-width: 700px) {
  .thesis.bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .thesis.bento .th-cell { grid-column: span 1 !important; grid-row: span 1 !important; min-height: 180px; padding: 24px 24px; }
  .thesis.bento .th-cell::before { font-size: 100px; bottom: -16px; }
}

/* ===== Case study cards (legacy — kept for other pages) ===== */
.cases {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.case {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
  transition: box-shadow .2s, transform .2s;
}
.case:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.case .c-tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-4); font-weight: 600;
}
.case .c-stat {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(36px, 4vw, 52px); line-height: 1;
  letter-spacing: -0.025em; color: var(--navy);
}
.case .c-stat .unit { color: var(--signal); }
.case .c-q { color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.case .c-link {
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  color: var(--signal); display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px;
}
.case .c-link .arrow { transition: transform .15s; }
.case:hover .c-link .arrow { transform: translateX(3px); }
@media (max-width: 800px) { .cases { grid-template-columns: 1fr; } }

/* ===== TERMINAL — the live ledger console ===== */
.terminal {
  background: var(--navy-deep);
  border: 1px solid var(--navy-700);
  border-radius: var(--r-lg);
  font-family: var(--mono);
  color: var(--on-navy);
  font-size: 13px;
  line-height: 1.65;
  position: relative;
  overflow: hidden;
}
.terminal-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--navy-700);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--on-navy-2);
  background: var(--navy);
}
.terminal-head .th-id { color: var(--signal); font-weight: 600; }
.terminal-head .th-stat { display: inline-flex; align-items: center; gap: 8px; color: var(--signal-2); }
.terminal-head .th-stat .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); animation: pulse 2.4s infinite; }
.terminal-body { padding: 18px 22px; }
.terminal-line {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 18px;
  padding: 7px 0;
  cursor: pointer;
  border-radius: 4px;
  transition: background .12s;
}
.terminal-line:hover { background: rgba(126,159,204,.06); }
.terminal-line .tl-t { color: var(--signal-2); }
.terminal-line .tl-msg { color: var(--on-navy); }
.terminal-line .tl-msg .actor { color: var(--white); font-weight: 600; }
.terminal-line .tl-msg .tag { color: var(--signal); font-weight: 600; }
.terminal-line.expanded .tl-detail {
  display: block; margin-top: 10px;
  padding: 12px 14px;
  background: var(--navy); border-left: 2px solid var(--signal);
  color: var(--on-navy-2); font-size: 12px; line-height: 1.55;
  white-space: pre-wrap;
  border-radius: 0 var(--r) var(--r) 0;
}
.terminal-line .tl-detail { display: none; }
.terminal-line .tl-msg::after {
  content: '▸'; margin-left: 8px; color: var(--on-navy-3); transition: transform .15s, color .15s;
  display: inline-block;
}
.terminal-line.expanded .tl-msg::after { transform: rotate(90deg); color: var(--signal); }

/* ===== Architecture (4 stacked planes) ===== */
.planes {
  display: flex; flex-direction: column;
  border: 1px solid var(--navy-700);
  background: var(--navy);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.plane {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-bottom: 1px solid var(--navy-700);
}
.plane:last-child { border-bottom: 0; }
.plane-k {
  padding: 26px 22px;
  background: var(--navy-deep);
  border-right: 1px solid var(--navy-700);
  display: flex; flex-direction: column; gap: 6px;
}
.plane-k .pk-no {
  font-family: var(--mono);
  font-size: 11px; color: var(--signal-2);
  letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
}
.plane-k .pk-name {
  font-family: var(--sans); font-size: 20px; font-weight: 600;
  color: var(--white); letter-spacing: -0.012em;
}
.plane-v {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--navy-700); gap: 1px;
}
.plane-cell {
  background: var(--navy); padding: 20px 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.plane-cell .pc-t { color: var(--white); font-size: 14px; font-weight: 600; letter-spacing: -0.005em; }
.plane-cell .pc-d { color: var(--on-navy-2); font-size: 12.5px; line-height: 1.5; }
.plane.engine .plane-cell { background: var(--navy-700); }
.plane.engine .plane-k { background: var(--signal); }
.plane.engine .plane-k .pk-no { color: rgba(255,255,255,.7); }
.plane.engine .plane-k .pk-name { color: var(--white); }
@media (max-width: 900px) {
  .plane { grid-template-columns: 1fr; }
  .plane-k { border-right: 0; border-bottom: 1px solid var(--navy-700); }
  .plane-v { grid-template-columns: 1fr 1fr; }
}

/* ===== Trust shields ===== */
.shields {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--slate-200); gap: 1px;
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.shields > div {
  background: var(--white);
  padding: 26px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.shields .sh-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal); font-weight: 600; }
.shields .sh-t { font-family: var(--sans); font-size: 19px; font-weight: 600; color: var(--navy); letter-spacing: -0.012em; }
.shields .sh-d { font-size: 13px; color: var(--ink-3); line-height: 1.55; }
.shields .sh-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal); font-weight: 600; }
.shields .sh-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }
@media (max-width: 1000px) { .shields { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .shields { grid-template-columns: 1fr; } }

/* ===== Integration table ===== */
.integ {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--slate-200); background: var(--slate-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  gap: 1px;
}
.integ > div {
  padding: 22px 20px;
  background: var(--white);
  display: flex; flex-direction: column; gap: 8px;
}
.integ .it-cat { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--signal); font-weight: 600; }
.integ .it-name { font-family: var(--sans); font-size: 19px; font-weight: 600; color: var(--navy); letter-spacing: -0.012em; }
.integ .it-desc { font-size: 13px; color: var(--ink-3); line-height: 1.55; }
@media (max-width: 1000px) { .integ { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .integ { grid-template-columns: 1fr; } }

/* ===== CTA strip ===== */
.cta-strip {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px; align-items: center;
  padding: clamp(28px, 4vw, 48px);
  background: var(--navy);
  color: var(--white);
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(135deg, transparent 60%, rgba(82,121,174,.12));
  pointer-events: none;
}
.cta-strip > * { position: relative; }
.cta-strip h2 { color: var(--white); }
.cta-strip p { color: var(--on-navy); margin: 14px 0 0; max-width: 640px; }
.cta-strip .cta-actions { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 800px) { .cta-strip { grid-template-columns: 1fr; align-items: start; } }

/* ===== Footer ===== */
.footer {
  background: var(--navy-deep);
  color: var(--on-navy);
  padding: clamp(40px, 5vw, 64px) 0 20px;
}
.footer-anchor {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 28px; align-items: center;
  padding-bottom: 28px; margin-bottom: 28px;
  border-bottom: 1px solid var(--navy-700);
}
.footer-anchor .fa-mono { width: 48px; height: 48px; }
.footer-anchor .fa-line {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.3; letter-spacing: -0.015em;
  color: var(--white);
  max-width: 720px;
}
.footer-anchor .fa-stat {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--signal-2); font-weight: 600;
  display: inline-flex; align-items: center; gap: 10px;
}
.footer-anchor .fa-stat .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); animation: pulse 2.4s infinite; }
@media (max-width: 800px) { .footer-anchor { grid-template-columns: 1fr; } }

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: 36px;
}
.footer-grid h5 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--signal-2);
  margin: 0 0 16px; font-weight: 600;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-grid ul a { color: var(--on-navy); font-size: 14px; transition: color .15s; }
.footer-grid ul a:hover { color: var(--white); }
.footer-grid .footer-tag { color: var(--on-navy-2); font-size: 13.5px; line-height: 1.6; max-width: 280px; margin-top: 16px; }
.footer-grid .footer-logo img { height: 30px; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr 1fr; } .footer-grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 600px)  { .footer-grid { grid-template-columns: 1fr 1fr; } }

.footer-legal {
  margin-top: 24px; padding-top: 18px;
  border-top: 1px solid var(--navy-700);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-navy-3);
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
.footer-legal .fl-links { display: flex; gap: 22px; }
.footer-legal a:hover { color: var(--white); }

/* ===== Form ===== */
.contact-form { display: flex; flex-direction: column; gap: 22px; max-width: 720px; }
.contact-form .ff-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.contact-form label {
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal);
  font-weight: 600;
}
.contact-form input, .contact-form select, .contact-form textarea {
  font-family: var(--sans); font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid var(--slate-200);
  border-radius: var(--r); padding: 12px 14px;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px rgba(82,121,174,.15);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form button { align-self: flex-start; margin-top: 8px; }
@media (max-width: 700px) { .contact-form .ff-row { grid-template-columns: 1fr; } }

/* ===== Reveal ===== */
html.js .reveal { opacity: 0; transform: translateY(8px); }
html.js .reveal.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

/* ============================================================
   CHAPTER SPREAD — distinctive section opener
   Outlined serif numeral on the left, kicker + h2 on the right
   ============================================================ */
.chapter-spread {
  display: grid;
  grid-template-columns: minmax(80px, 120px) 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  margin-bottom: clamp(24px, 3vw, 36px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--slate-200);
  position: relative;
}
.chapter-spread .cs-num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(64px, 8vw, 120px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--navy);
          text-stroke: 1.5px var(--navy);
  font-style: italic;
}
.chapter-spread .cs-title { display: flex; flex-direction: column; gap: 6px; }
.chapter-spread .cs-title h2 { margin: 0; font-size: clamp(24px, 2.6vw, 36px); }
.chapter-spread.on-navy { border-bottom-color: var(--navy-700); }
.chapter-spread.on-navy .cs-num { -webkit-text-stroke-color: var(--signal-2); text-stroke-color: var(--signal-2); }
.chapter-spread.on-navy .cs-title h2 { color: var(--white); }

@media (max-width: 760px) {
  .chapter-spread { grid-template-columns: 1fr; gap: 4px; padding-bottom: 16px; margin-bottom: 24px; }
  .chapter-spread .cs-num { font-size: 64px; }
}

/* ============================================================
   FOOTER WORDMARK — etched watermark across the footer band
   ============================================================ */
.footer { position: relative; overflow: hidden; }
.footer-mark {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(64px, 11vw, 180px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: rgba(255,255,255,.035);
  text-align: center;
  margin: 32px 0 -24px;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
}
.footer .wrap { position: relative; z-index: 1; }
.footer-mark { position: relative; z-index: 0; }

/* ============================================================
   CURSOR-AWARE GLOW on bento tiles
   Uses a CSS @property for the cursor position; tiles glow
   subtly toward the mouse. Falls back gracefully without JS.
   ============================================================ */
@property --mx { syntax: '<percentage>'; initial-value: 50%; inherits: false; }
@property --my { syntax: '<percentage>'; initial-value: 50%; inherits: false; }

.thesis.bento .th-cell {
  --mx: 50%;
  --my: 50%;
  background-image: radial-gradient(
    circle 280px at var(--mx) var(--my),
    rgba(82,121,174,.08) 0%,
    transparent 70%
  );
  background-position: 0 0;
  background-repeat: no-repeat;
  background-color: var(--white);
  transition: background-color .2s ease;
}
.thesis.bento .th-cell.dark {
  background-image: radial-gradient(
    circle 280px at var(--mx) var(--my),
    rgba(126,159,204,.18) 0%,
    transparent 70%
  );
  background-color: var(--navy);
}
.thesis.bento .th-cell.note {
  background-image: none;
  background-color: var(--paper-2);
}

/* ============================================================
   MANIFESTO PAGE
   ============================================================ */
.manifesto-hero {
  padding: clamp(48px, 6vw, 88px) 0 clamp(36px, 4vw, 56px);
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.manifesto-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--slate-200) 1px, transparent 1px);
  background-size: 100% 64px;
  background-position: 0 -1px;
  opacity: .4;
  mask-image: linear-gradient(180deg, black 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 70%);
  pointer-events: none;
}
.manifesto-hero .wrap { position: relative; }
.mh-rule {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
  padding-bottom: 18px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--slate-200);
}
.mh-rule-l { color: var(--signal); font-family: var(--serif); font-size: 22px; font-style: italic; line-height: 0; }
.mh-rule-c { justify-self: start; }
.mh-rule-r { color: var(--signal); font-size: 14px; }
.mh-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
}
.mh-title em {
  font-style: italic;
  color: var(--signal);
  font-weight: 400;
}
.mh-sub {
  font-family: var(--sans);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--ink-3);
  margin-top: 24px;
  max-width: 720px;
  text-wrap: pretty;
}
.mh-sub strong { color: var(--navy); font-weight: 600; }
@media (max-width: 760px) { .mh-rule { gap: 16px; } .mh-rule-c { font-size: 10px; } }

.ch-section { padding: clamp(40px, 5vw, 72px) 0; }

.ch-prose { max-width: 820px; }
.ch-prose .lead {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.ch-prose .lead em { font-style: italic; color: var(--signal); }
.ch-prose .lead:last-child { margin-bottom: 0; }
.surf-navy .ch-prose .lead, .surf-deep .ch-prose .lead { color: var(--on-navy); }

/* Principles list — distinctive numbered editorial */
.principles {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.principles li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 28px;
  padding: 24px 0;
  border-top: 1px solid var(--slate-200);
  align-items: start;
  position: relative;
  transition: padding-left .25s ease;
}
.principles li:last-child { border-bottom: 1px solid var(--slate-200); }
.principles li:hover { padding-left: 12px; }
.principles li:hover::before {
  content: '';
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 60%;
  background: var(--signal);
}
.principles .pr-no {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--signal);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding-top: 6px;
}
.principles h3 {
  grid-column: 2;
  font-family: var(--sans);
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.18;
  color: var(--navy);
  margin: 0 0 8px;
}
.principles p {
  grid-column: 2;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
  max-width: 720px;
}
@media (max-width: 760px) {
  .principles h3, .principles p { grid-column: 1; }
}
@media (max-width: 760px) {
  .principles li { grid-template-columns: 1fr; gap: 12px; padding: 32px 0; }
}

/* "What this is not" — the negation moment */
.negation {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}
.ng-line {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--on-navy);
  padding: 12px 0;
  border-bottom: 1px solid var(--navy-700);
  text-wrap: balance;
}
.ng-line .ng-x {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.42em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal-2);
  font-weight: 600;
  padding: 4px 10px;
  margin-right: 18px;
  border: 1px solid var(--signal-2);
  vertical-align: middle;
  display: inline-block;
}
.ng-line.is-affirm {
  color: var(--white);
  font-style: italic;
  border-bottom: 0;
  padding-top: 22px;
  font-size: clamp(42px, 6vw, 80px);
  letter-spacing: -0.03em;
}

/* Colophon section */
.colophon-section {
  padding: clamp(36px, 4vw, 56px) 0;
  border-top: 1px solid var(--slate-200);
}
.colophon {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.col-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  padding: 10px 0;
  border-top: 1px solid var(--slate-200);
  align-items: baseline;
  font-size: 14px;
}
.col-row:last-child { border-bottom: 1px solid var(--slate-200); }
.col-k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
}
.col-v { color: var(--ink-2); }

/* ============================================================
   BUILD STATUS RULE — above hero headline
   ============================================================ */
.hero-build {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-4);
  margin-bottom: 24px;
  padding: 8px 0;
  position: relative;
}
.hero-build::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--signal);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(82,121,174,.18);
}
.hero-build .hb-sep { color: var(--slate-300); }
.hero-build .hb-v { color: var(--navy); }

/* ============================================================
   THE FLOOR — design language v1
   A hospital schedule grid is the metaphor and the visual
   chassis of the site. Hero is a live grid. Section breaks are
   shift bars. Tiles are shift cells. Everything reads as one
   continuous schedule.
   ============================================================ */

/* === Floor hero === */
.floor-hero {
  background: var(--paper);
  padding: clamp(24px, 3vw, 40px) 0 0;
  position: relative;
  overflow: hidden;
}
.floor-hero .wrap { position: relative; z-index: 2; }

.floor-hero-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
  padding-bottom: 14px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--slate-200);
}
.floor-hero-meta .fhm-l { display: inline-flex; align-items: center; gap: 10px; color: var(--signal); }
.floor-hero-meta .fhm-l::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 0 4px rgba(82,121,174,.18);
  animation: pulse 2.4s infinite;
}
.floor-hero-meta .fhm-c {
  color: var(--navy);
  flex: 1 1 auto;
  min-width: 0;
}
.floor-hero-meta .fhm-r {
  color: var(--ink-4);
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
@media (max-width: 800px) {
  .floor-hero-meta .fhm-c { display: none; }
  .floor-hero-meta .fhm-r { margin-left: auto; }
}

.floor-hero-title {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  margin-bottom: 32px;
}
.floor-hero-title h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(36px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.028em;
  color: var(--navy);
  text-wrap: balance;
  margin: 0;
}
.floor-hero-title h1 em { font-style: normal; color: var(--signal); }
.floor-hero-title .fht-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 8px;
}
.floor-hero-title .fht-side p {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
  max-width: 480px;
}
.floor-hero-title .fht-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 980px) {
  .floor-hero-title { grid-template-columns: 1fr; gap: 24px; }
  .floor-hero-title .fht-side { padding-top: 0; }
}

/* === The big floor — animated schedule grid === */
.bigfloor {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-top: 2px solid var(--navy);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  position: relative;
}
.bigfloor-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 12px 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--slate-200);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
}
.bigfloor-bar b { color: var(--navy); }
.bigfloor-bar .bb-r { color: var(--signal); display: inline-flex; align-items: center; gap: 8px; }
.bigfloor-bar .bb-r::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal); animation: pulse 2.4s infinite;
}

.bigfloor-grid {
  display: grid;
  grid-template-columns: 110px repeat(12, 1fr);
  background: var(--slate-200);
  gap: 1px;
}
.bigfloor-grid > div {
  background: var(--white);
  padding: 9px 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  min-height: 38px;
  display: flex;
  align-items: center;
}
.bigfloor-grid .bg-h {
  background: var(--paper-2);
  color: var(--ink-4);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  justify-content: center;
}
.bigfloor-grid .bg-name {
  background: var(--paper);
  color: var(--navy);
  font-weight: 600;
  font-size: 11.5px;
  font-family: var(--sans);
  letter-spacing: -0.01em;
}
.bigfloor-grid .bg-cell {
  justify-content: center;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-300);
}
.bigfloor-grid .bg-cell.filled { color: var(--navy); }
.bigfloor-grid .bg-cell.empty { color: var(--slate-300); font-weight: 400; }
.bigfloor-grid .bg-cell.gap {
  background: var(--paper-2);
  color: var(--navy-300);
  position: relative;
  animation: bgflash 6s ease-in-out infinite;
}
.bigfloor-grid .bg-cell.live {
  background: var(--signal);
  color: var(--white);
  position: relative;
  animation: bglive 6s ease-in-out infinite;
}
.bigfloor-grid .bg-cell.live::after {
  content: '';
  position: absolute; inset: 0;
  border: 1.5px solid var(--white);
  animation: bglivepulse 1.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bgflash {
  0%, 32%   { background: var(--paper-2); color: var(--navy-300); }
  40%, 60%  { background: var(--signal); color: var(--white); }
  68%, 100% { background: var(--white); color: var(--navy); }
}
@keyframes bglive {
  0%, 32%   { opacity: 0; }
  40%, 100% { opacity: 1; }
}
@keyframes bglivepulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

.bigfloor-log {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--slate-200);
  border-top: 1px solid var(--slate-200);
}
.bigfloor-log .bf-row {
  background: var(--navy-deep);
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--on-navy);
  letter-spacing: 0.04em;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bigfloor-log .bf-row .t { color: var(--signal-2); font-weight: 600; }
.bigfloor-log .bf-row .id { color: var(--signal); font-weight: 700; letter-spacing: 0.1em; }
.bigfloor-log .bf-row .msg { color: var(--white); font-family: var(--sans); font-size: 12.5px; letter-spacing: -0.005em; margin-top: 2px; }
@media (max-width: 760px) { .bigfloor-log { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .bigfloor-grid { grid-template-columns: 80px repeat(6, 1fr); font-size: 9px; }
  .bigfloor-grid .bg-h:nth-child(n+8), .bigfloor-grid .bg-cell:nth-child(7n+1) { display: none; }
}

/* === Shift bar — section divider with fixed columns ===
   Fixed-width left fields (dot + time + id) so every section aligns
   vertically down the page, like rows in an actual schedule grid. */
.shiftbar {
  display: grid;
  grid-template-columns: 14px 64px 80px 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding: 16px 22px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r);
  margin-bottom: clamp(24px, 3vw, 36px);
  position: relative;
}
.shiftbar::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgba(82,121,174,.2);
  margin-left: 0;
}
.shiftbar .sb-time {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.shiftbar .sb-id {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
}
.shiftbar .sb-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--navy);
}
.shiftbar .sb-status {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 11px;
  border: 1px solid var(--slate-300);
  border-radius: 999px;
  color: var(--ink-3);
  white-space: nowrap;
}
.shiftbar .sb-arrow {
  font-family: var(--mono);
  color: var(--signal);
  font-size: 14px;
  text-align: center;
  width: 14px;
}

.surf-navy .shiftbar, .surf-deep .shiftbar {
  background: var(--navy-700);
  border-color: var(--navy-700);
}
.surf-navy .shiftbar::before, .surf-deep .shiftbar::before { background: var(--signal-2); box-shadow: 0 0 0 3px rgba(126,159,204,.2); }
.surf-navy .shiftbar .sb-time, .surf-deep .shiftbar .sb-time { color: var(--white); }
.surf-navy .shiftbar .sb-id, .surf-deep .shiftbar .sb-id { color: var(--signal-2); }
.surf-navy .shiftbar .sb-title, .surf-deep .shiftbar .sb-title { color: var(--white); }
.surf-navy .shiftbar .sb-status, .surf-deep .shiftbar .sb-status { border-color: var(--navy-500); color: var(--on-navy-2); }
.surf-navy .shiftbar .sb-arrow, .surf-deep .shiftbar .sb-arrow { color: var(--signal-2); }

@media (max-width: 900px) {
  .shiftbar {
    grid-template-columns: 14px 64px 1fr auto;
    gap: 14px;
    padding: 14px 18px;
  }
  .shiftbar .sb-id, .shiftbar .sb-arrow { display: none; }
  .shiftbar .sb-title { font-size: 15px; }
}
@media (max-width: 600px) {
  .shiftbar { grid-template-columns: 14px 1fr; padding: 12px 16px; }
  .shiftbar .sb-time, .shiftbar .sb-status { display: none; }
}

/* === Schedule cards — replaces bento === */
.schedlist {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--slate-200);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.schedrow {
  display: grid;
  grid-template-columns: 88px 92px minmax(0, 1.4fr) minmax(0, 2fr) 110px 28px;
  gap: 22px;
  align-items: center;
  padding: 18px 22px;
  background: var(--white);
  position: relative;
  transition: background .18s ease, padding .18s ease;
}
.schedrow:hover { background: var(--paper); padding-left: 28px; }
.schedrow.dark { background: var(--navy); color: var(--on-navy); }
.schedrow.dark:hover { background: var(--navy-700); }

.schedrow .sr-time {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--signal);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.schedrow.dark .sr-time { color: var(--signal-2); }

.schedrow .sr-id {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
}
.schedrow.dark .sr-id { color: var(--on-navy-2); }

.schedrow .sr-title {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.schedrow.dark .sr-title { color: var(--white); }

.schedrow .sr-body {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.schedrow.dark .sr-body { color: var(--on-navy); }

.schedrow .sr-status {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--slate-300);
  color: var(--ink-3);
  text-align: center;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.schedrow .sr-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--slate-300);
}
.schedrow .sr-status.live { border-color: var(--signal); color: var(--signal); }
.schedrow .sr-status.live::before { background: var(--signal); }
.schedrow .sr-status.done { border-color: var(--navy); color: var(--navy); }
.schedrow .sr-status.done::before { background: var(--navy); }
.schedrow.dark .sr-status { border-color: var(--navy-500); color: var(--on-navy); }
.schedrow.dark .sr-status::before { background: var(--signal-2); }

.schedrow .sr-arrow {
  font-family: var(--mono);
  color: var(--signal);
  font-size: 16px;
  text-align: right;
  transition: transform .18s ease;
}
.schedrow:hover .sr-arrow { transform: translateX(4px); }
.schedrow.dark .sr-arrow { color: var(--signal-2); }

@media (max-width: 980px) {
  .schedrow { grid-template-columns: 70px 1fr 100px; gap: 14px; }
  .schedrow .sr-id, .schedrow .sr-body, .schedrow .sr-arrow { display: none; }
}

/* === End of shift — section transition band === */
.endofshift {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 22px 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
  position: relative;
}
.endofshift::before, .endofshift::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--slate-200);
}
.endofshift .arrow { color: var(--signal); }
.surf-navy .endofshift, .surf-deep .endofshift { color: var(--on-navy-3); }
.surf-navy .endofshift::before, .surf-navy .endofshift::after,
.surf-deep .endofshift::before, .surf-deep .endofshift::after { background: var(--navy-700); }
.surf-navy .endofshift .arrow, .surf-deep .endofshift .arrow { color: var(--signal-2); }

/* === Footer shift band — replaces footer-mark === */
.shiftband {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  gap: 22px;
  align-items: center;
  padding: 18px 24px;
  margin: 32px 0 -8px;
  background: var(--navy);
  border: 1px solid var(--navy-700);
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--on-navy-2);
  font-weight: 600;
}
.shiftband::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--signal-2);
  box-shadow: 0 0 0 3px rgba(126,159,204,.18);
}
.shiftband .sb-l { color: var(--signal-2); font-weight: 700; }
.shiftband .sb-c { color: var(--white); font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: -0.005em; text-transform: none; }
.shiftband .sb-r { color: var(--on-navy-3); font-variant-numeric: tabular-nums; }

@media (max-width: 800px) { .shiftband { grid-template-columns: auto 1fr; padding: 14px 18px; } .shiftband .sb-l, .shiftband .sb-r { display: none; } }

/* ============================================================
   v12 — LIVE OPERATING CONSOLE design language
   The website is a live operating console. Console panels carry
   product chrome and motion. Everything else is calm prose,
   well-typeset H2s, and product visuals that respond to cursor.
   ============================================================ */

/* === Hero v2 — title + Console === */
.hero-v2 {
  padding: clamp(40px, 5vw, 80px) 0 clamp(48px, 6vw, 88px);
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.hero-v2::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--slate-200) 1px, transparent 1px),
    linear-gradient(90deg, var(--slate-200) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .25;
  mask-image: radial-gradient(ellipse 60% 70% at 75% 30%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 75% 30%, black 0%, transparent 100%);
  pointer-events: none;
}
.hero-v2 .wrap { position: relative; z-index: 1; }

.hero-v2-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
.hero-v2-copy h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--navy);
  text-wrap: balance;
  margin: 0 0 18px;
}
.hero-v2-copy h1 em { font-style: normal; color: var(--signal); }
.hero-v2-copy p.lead {
  font-size: clamp(15.5px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 0 22px;
  max-width: 480px;
}
.hero-v2-actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 980px) {
  .hero-v2-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-v2-copy h1 { font-size: clamp(34px, 8vw, 44px); }
}

/* === Console — the central product chrome === */
.console {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}
.console-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 12px 18px;
  background: var(--navy);
  border-bottom: 1px solid var(--navy-700);
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--on-navy);
  font-weight: 500;
}
.console-head .ch-l { color: var(--on-navy); }
.console-head .ch-l b { color: var(--white); font-weight: 600; }
.console-head .ch-c {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-navy-3);
  justify-self: center;
}
.console-head .ch-r {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal-2);
  font-weight: 700;
}
.console-head .ch-r .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--signal-2);
  animation: pulse 2.4s infinite;
}
@media (max-width: 700px) {
  .console-head .ch-c { display: none; }
}

.console-body { padding: 0; }

/* ============================================================
   HERO ANIMATION — 12-second product loop
   Call-out → Match → Accept → Close, with stepper, ranked list,
   schedule grid changes, and event log appearing progressively.
   ============================================================ */

.console.hero-anim { position: relative; }

/* Step indicator bar — tracks where in the cycle we are */
.ha-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
}
.ha-step {
  background: var(--paper);
  padding: 9px 10px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-4);
  position: relative;
  transition: color .25s, background .25s;
}
.ha-step.is-active {
  background: var(--white);
  color: var(--signal);
}
.ha-step.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--signal);
}
.ha-step.is-done { color: var(--navy); }

/* === Driveable demo controller ===
   The trick: a paused CSS animation with `animation-delay: calc(--ha-t * -28s)`
   renders the frame at exactly --ha-t. So one number (0..1) drives every
   animation in the subtree.

   - JS rAF loop ticking --ha-t from 0→1 over 28s = normal playback.
   - Stop the rAF, leave --ha-t at its current value = pause.
   - Snap --ha-t to N = scrub to that frame.
   - Snap --ha-t to 0 + restart rAF = replay.

   No `is-playing` mode needed. No animation-fill-mode juggling. The
   animations are *always* paused — JS just changes which frame is shown.

   The cascade `*` selector applies the delay override to every descendant,
   then `!important` wins against the per-rule `animation-delay: calc(...)`
   declarations spread through this file. */
.hero-anim {
  --ha-t: 0;
  --ha-d: 28s;
  --ha-stagger: 0s;
}
/* Apply driver to every animated element EXCEPT chrome/poster/transport
   (those have their own infinite decorative animations like the live-dot
   pulse and the eyebrow pulse on the poster). */
.hero-anim *:not(.ha-poster):not(.ha-poster *):not(.ha-transport):not(.ha-transport *):not(.console-head):not(.console-head *),
.hero-anim *:not(.ha-poster):not(.ha-poster *):not(.ha-transport):not(.ha-transport *):not(.console-head):not(.console-head *)::before,
.hero-anim *:not(.ha-poster):not(.ha-poster *):not(.ha-transport):not(.ha-transport *):not(.console-head):not(.console-head *)::after {
  animation-play-state: paused !important;
  animation-delay: calc(var(--ha-t) * var(--ha-d) * -1 + var(--ha-stagger, 0s)) !important;
}

/* === Schedule cell animations === */

/* Alvarez's cell — starts CHG, then call-out (red/amber), then resolved (greyed) at ~9s.
   Add a label badge ("CALL OUT") that appears with the state for clarity. */
@keyframes ha-callout {
  0%, 16%   { background: var(--white); color: var(--navy); }
  17%, 80%  { background: #FEE2E2; color: #B91C1C; box-shadow: inset 0 0 0 2px #DC2626; }
  82%, 100% { background: var(--paper-2); color: var(--slate-300); box-shadow: inset 0 0 0 1px var(--slate-200); }
}
.ha-grid .ha-callout {
  animation: ha-callout  28s ease-in-out infinite;
  font-weight: 700;
  position: relative;
  text-indent: -9999px;
  overflow: hidden;
}
.ha-grid .ha-callout::after {
  content: 'CHG';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-indent: 0;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  font-weight: 700;
  animation: ha-callout-label  28s steps(1) infinite;
}
@keyframes ha-callout-label {
  0%, 16%   { content: 'CHG'; }
  17%, 80%  { content: 'CALL'; }
  82%, 100% { content: '—'; }
}
.ha-grid .ha-callout::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  animation: ha-callout-pulse  28s ease-in-out infinite;
}
@keyframes ha-callout-pulse {
  0%, 16%, 80%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
  17%      { box-shadow: 0 0 0 0 rgba(220,38,38,.55); }
  24%      { box-shadow: 0 0 0 12px rgba(220,38,38,0); }
  30%      { box-shadow: 0 0 0 0 rgba(220,38,38,.4); }
  37%      { box-shadow: 0 0 0 10px rgba(220,38,38,0); }
}

/* Kim R.'s cell — multi-stage on the 28sloop:
     0–32%    : empty (—)
     32–55%   : MATCHING (Signal Blue, pulsing) — engine ranking candidates
     55–78%   : ACCEPTED (green flash, sustained green tint) — nurse said yes
     80–100%  : COMMITTED (solid navy) — schedule updated */
@keyframes ha-fill {
  0%, 32%   { background: var(--white); color: var(--slate-300); }
  35%, 53%  { background: var(--signal); color: var(--white); }
  56%, 77%  { background: #DCFCE7; color: #166534; box-shadow: inset 0 0 0 2px #16A34A; }
  80%, 100% { background: var(--navy); color: var(--white); box-shadow: none; }
}
@keyframes ha-fill-label {
  0%, 32%   { content: '—'; }
  35%, 53%  { content: 'MATCH'; }
  56%, 77%  { content: '✓ KIM'; }
  80%, 100% { content: 'CHG'; }
}
.ha-grid .ha-fill {
  animation: ha-fill  28s ease-in-out infinite;
  font-weight: 700;
  position: relative;
  text-indent: -9999px;
  overflow: hidden;
}
.ha-grid .ha-fill::after {
  content: '—';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-indent: 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  font-weight: 700;
  animation: ha-fill-label  28s steps(1) infinite;
  white-space: nowrap;
}
.ha-grid .ha-fill::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  animation: ha-fill-pulse  28s ease-in-out infinite;
}
@keyframes ha-fill-pulse {
  0%, 32%   { box-shadow: 0 0 0 0 rgba(82,121,174,0); }
  35%       { box-shadow: 0 0 0 0 rgba(82,121,174,.55); }
  42%       { box-shadow: 0 0 0 10px rgba(82,121,174,0); }
  56%       { box-shadow: 0 0 0 0 rgba(22,163,74,.6); }
  64%       { box-shadow: 0 0 0 12px rgba(22,163,74,0); }
  80%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

/* === Step indicator timing === */
.ha-step[data-step="callout"] {
  animation: ha-step-callout  28s ease-in-out infinite;
}
.ha-step[data-step="match"] {
  animation: ha-step-match  28s ease-in-out infinite;
}
.ha-step[data-step="accept"] {
  animation: ha-step-accept  28s ease-in-out infinite;
}
.ha-step[data-step="close"] {
  animation: ha-step-close  28s ease-in-out infinite;
}
@keyframes ha-step-callout {
  0%, 16%   { background: var(--paper); color: var(--ink-4); }
  17%, 32%  { background: #FEE2E2; color: #B91C1C; }
  33%, 100% { background: var(--paper); color: var(--navy); }
}
@keyframes ha-step-match {
  0%, 32%   { background: var(--paper); color: var(--ink-4); }
  33%, 55%  { background: #DBEAFE; color: var(--signal); }
  56%, 100% { background: var(--paper); color: var(--navy); }
}
@keyframes ha-step-accept {
  0%, 55%   { background: var(--paper); color: var(--ink-4); }
  56%, 78%  { background: #DCFCE7; color: #166534; }
  79%, 100% { background: var(--paper); color: var(--navy); }
}
@keyframes ha-step-close {
  0%, 78%   { background: var(--paper); color: var(--ink-4); }
  79%, 92%  { background: #DCFCE7; color: #166534; }
  93%, 100% { background: var(--paper); color: var(--ink-4); }
}

/* Active underline for current step — colored per phase */
.ha-step[data-step="callout"]::after,
.ha-step[data-step="match"]::after,
.ha-step[data-step="accept"]::after,
.ha-step[data-step="close"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
}
.ha-step[data-step="callout"]::after { background: #DC2626; animation: ha-bar-callout  28s ease-in-out infinite; }
.ha-step[data-step="match"]::after   { background: var(--signal); animation: ha-bar-match  28s ease-in-out infinite; }
.ha-step[data-step="accept"]::after  { background: #16A34A; animation: ha-bar-accept  28s ease-in-out infinite; }
.ha-step[data-step="close"]::after   { background: #16A34A; animation: ha-bar-close  28s ease-in-out infinite; }
@keyframes ha-bar-callout {
  0%, 16%   { transform: scaleX(0); }
  17%, 32%  { transform: scaleX(1); }
  33%, 100% { transform: scaleX(0); }
}
@keyframes ha-bar-match {
  0%, 32%   { transform: scaleX(0); }
  33%, 55%  { transform: scaleX(1); }
  56%, 100% { transform: scaleX(0); }
}
@keyframes ha-bar-accept {
  0%, 55%   { transform: scaleX(0); }
  56%, 78%  { transform: scaleX(1); }
  79%, 100% { transform: scaleX(0); }
}
@keyframes ha-bar-close {
  0%, 78%   { transform: scaleX(0); }
  79%, 92%  { transform: scaleX(1); }
  93%, 100% { transform: scaleX(0); }
}

/* === Match panel — multi-stage AI workflow ===
   Stage A: scan candidate pool (chips light up, ineligible grey out)
   Stage B: eligibility rules tick through
   Stage C: ranked list reveals + bars grow
   Stage D: top pick is crowned (Signal Blue ring + checkmark)
   All retimed within the 32–55% Match phase. */
.ha-match {
  position: absolute;
  left: 18px; right: 18px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r);
  box-shadow: 0 16px 40px -16px rgba(2,25,53,.25);
  padding: 14px 16px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  height: 220px;
  animation: ha-match-show  28s ease-in-out infinite;
}
@keyframes ha-match-show {
  0%, 32%   { opacity: 0; transform: translateY(-40%); }
  35%, 53%  { opacity: 1; transform: translateY(-50%); }
  56%, 100% { opacity: 0; transform: translateY(-60%); }
}
.ha-match-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--slate-200);
}
.ha-match-head .ham-k {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}
.ham-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 rgba(82,121,174,0.45);
  animation: ha-ham-pulse 1.6s ease-out infinite;
}
@keyframes ha-ham-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(82,121,174,0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(82,121,174,0); }
  100% { box-shadow: 0 0 0 0 rgba(82,121,174,0); }
}
.ha-match-head .ham-r {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
  position: relative;
  min-width: 180px;
  height: 14px;
  display: inline-block;
}
.ham-st {
  position: absolute;
  right: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
}
.ham-st[data-st="scan"] { animation: ha-st-scan 28s steps(1, end) infinite; color: var(--ink-3); }
.ham-st[data-st="rank"] { animation: ha-st-rank 28s steps(1, end) infinite; color: var(--navy); }
.ham-st[data-st="pick"] { animation: ha-st-pick 28s steps(1, end) infinite; color: var(--signal); }
@keyframes ha-st-scan { 0%, 32% { opacity: 0; } 33% { opacity: 1; } 43% { opacity: 0; } }
@keyframes ha-st-rank { 0%, 43% { opacity: 0; } 44% { opacity: 1; } 50% { opacity: 0; } }
@keyframes ha-st-pick { 0%, 50% { opacity: 0; } 51% { opacity: 1; } 55% { opacity: 1; } 56% { opacity: 0; } }

/* Stage label that sits above each stage block */
.hst-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 700;
  margin-bottom: 8px;
}

/* Each stage block is positioned in the same place, fades in/out cleanly */
.ha-stage {
  position: absolute;
  left: 16px; right: 16px;
  top: 48px;
  bottom: 14px;
  opacity: 0;
  pointer-events: none;
}
.ha-stage[data-stage="filter"] { animation: ha-stage-filter 28s ease-in-out infinite; }
.ha-stage[data-stage="rank"]   { animation: ha-stage-rank   28s ease-in-out infinite; }
@keyframes ha-stage-filter {
  0%, 32%   { opacity: 0; transform: translateY(4px); }
  34%, 42%  { opacity: 1; transform: translateY(0); }
  44%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes ha-stage-rank {
  0%, 43%   { opacity: 0; transform: translateY(4px); }
  45%, 55%  { opacity: 1; transform: translateY(0); }
  56%, 100% { opacity: 0; transform: translateY(-4px); }
}

/* Stage 1: funnel rows — 3 filter rules, each ticks and reveals new count */
.ha-funnel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hfn {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-3);
  padding: 8px 10px;
  border: 1px solid var(--slate-200);
  border-radius: 8px;
  background: var(--white);
  opacity: 0;
  transform: translateX(-6px);
  animation: ha-fn-in 28s ease-out infinite;
  --ha-stagger: calc(var(--i) * 320ms);
}
@keyframes ha-fn-in {
  0%, 33%   { opacity: 0; transform: translateX(-6px); border-color: var(--slate-200); }
  35%       { opacity: 1; transform: translateX(0); border-color: rgba(82,121,174,0.5); background: rgba(82,121,174,0.06); }
  38%, 42%  { opacity: 1; transform: translateX(0); border-color: var(--slate-200); background: var(--white); }
  44%, 100% { opacity: 0; }
}
.hfn-k { color: var(--navy); font-weight: 600; }
.hfn-v {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.hfn-v .hfn-from { color: var(--ink-4); font-weight: 600; }
.hfn-v .hfn-to   { color: var(--signal); font-weight: 700; font-size: 13px; }
.hfn-v .hfn-arr  { color: var(--ink-4); font-weight: 400; }
.hfn-tick {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--signal);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  transform: scale(0);
  animation: ha-fn-tick 28s ease-out infinite;
  --ha-stagger: calc(var(--i) * 320ms);
}
@keyframes ha-fn-tick {
  0%, 34%   { transform: scale(0); }
  36%, 42%  { transform: scale(1); }
  44%, 100% { transform: scale(0); }
}

/* Stage 2 + 3: ranked list */
.ha-match-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hml-row {
  display: grid;
  grid-template-columns: 70px 1fr 44px;
  gap: 10px;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px solid transparent;
  position: relative;
  opacity: 0;
  transform: translateY(3px);
  animation: ha-row-in 28s ease-out infinite;
  --ha-stagger: calc(var(--i) * 140ms);
}
@keyframes ha-row-in {
  0%, 44%   { opacity: 0; transform: translateY(3px); }
  46%, 55%  { opacity: 1; transform: translateY(0); }
  56%, 100% { opacity: 0; }
}
.hml-name { color: var(--navy); font-weight: 600; }
.hml-bar {
  height: 6px;
  background: var(--slate-100);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.hml-bar::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--navy);
  border-radius: 3px;
  animation: ha-bar-grow  28s ease-out infinite;
}
.hml-row:first-child .hml-bar::after { background: var(--signal); }
@keyframes ha-bar-grow {
  0%, 47%   { width: 0; }
  51%       { width: var(--score); }
  55%, 100% { width: var(--score); }
}
.hml-score {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--navy);
}
.hml-row:first-child .hml-score { color: var(--signal); }
/* Crown the top pick during stage 3 (51–55%) */
.hml-row:first-child {
  animation: ha-row-in 28s ease-out infinite, ha-row-crown 28s ease-out infinite;
}
@keyframes ha-row-crown {
  0%, 50%   { background: transparent; border-color: transparent; }
  52%, 55%  { background: rgba(82,121,174,0.10); border-color: rgba(82,121,174,0.5); }
  56%, 100% { background: transparent; border-color: transparent; }
}
.hml-row:first-child::after {
  content: '✓';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--signal);
  color: var(--white);
  font-size: 9px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  animation: ha-pick-tick 28s ease-out infinite;
}
.hml-row:first-child .hml-score { display: none; }
@keyframes ha-pick-tick {
  0%, 50%   { transform: translateY(-50%) scale(0); opacity: 0; }
  52%, 55%  { transform: translateY(-50%) scale(1); opacity: 1; }
  56%, 100% { transform: translateY(-50%) scale(0); opacity: 0; }
}

/* === Mobile phone mockup with base9health nurse app ===
   Appears during the Accept step. Full phone frame with notch,
   status bar, app header (logo + greeting), bottom tabs, and a
   notification card that animates in/out with a tap + confirmation. */
.ha-push {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translate(30px, -50%) rotate(2deg);
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  animation: ha-push-show  28s ease-in-out infinite;
}
@keyframes ha-push-show {
  0%, 53%   { opacity: 0; transform: translate(30px, -50%) rotate(4deg); }
  56%, 60%  { opacity: 1; transform: translate(0, -50%) rotate(-2deg); }
  76%, 78%  { opacity: 1; transform: translate(0, -50%) rotate(-2deg); }
  80%, 100% { opacity: 0; transform: translate(30px, -50%) rotate(4deg); }
}

/* === The phone frame === */
.ha-phone {
  width: 240px;
  height: 460px;
  background: var(--navy-deep);
  border-radius: 36px;
  padding: 8px;
  box-shadow:
    0 32px 64px -20px rgba(2,25,53,0.45),
    0 12px 24px -8px rgba(2,25,53,0.2),
    inset 0 0 0 2px rgba(255,255,255,0.06);
  position: relative;
}
/* Volume buttons on the side */
.ha-phone::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 100px;
  width: 3px; height: 36px;
  background: var(--navy-deep);
  border-radius: 2px 0 0 2px;
  box-shadow: 0 50px 0 0 var(--navy-deep), 0 95px 0 0 var(--navy-deep);
}
/* Power button */
.ha-phone::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 130px;
  width: 3px; height: 50px;
  background: var(--navy-deep);
  border-radius: 0 2px 2px 0;
}
/* The notch at the top */
.ha-phone-notch {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 90px; height: 22px;
  background: var(--navy-deep);
  border-radius: 0 0 14px 14px;
  z-index: 3;
}
.ha-phone-notch::before {
  content: '';
  position: absolute;
  right: 16px; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  box-shadow: -10px 0 0 -1px rgba(255,255,255,0.08);
}

/* The screen */
.ha-phone-screen {
  width: 100%;
  height: 100%;
  background: var(--paper);
  border-radius: 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Status bar — clock + signal icons */
.ha-phone-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 22px 4px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.hps-time { font-feature-settings: 'tnum'; }
.hps-icons { font-size: 8px; letter-spacing: 0.1em; opacity: 0.85; }

/* App header — logo + greeting */
.ha-app-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--slate-200);
  background: var(--white);
}
.ha-app-logo {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--white);
  display: block;
}
.ha-app-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
  letter-spacing: -0.012em;
  display: inline-flex;
  align-items: baseline;
}
.ha-app-name .ha-app-9 { color: var(--signal); }
.ha-app-name .ha-app-tag {
  margin-left: 5px;
  padding-left: 5px;
  border-left: 1px solid var(--slate-300);
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: 0.22em;
  color: var(--signal);
  font-weight: 700;
  align-self: center;
}
.ha-app-greet {
  font-family: var(--sans);
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 500;
}

/* WhatsApp notification card — iOS-style push. Translucent pill with
   blur, app icon at left, app label + relative time, sender + preview.
   Visibility is controlled by parent .ha-screen[data-screen="whatsapp"]. */
.ha-wa-card {
  margin: 14px 10px 0;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 16px;
  padding: 9px 11px 10px;
  flex-shrink: 0;
  box-shadow:
    0 8px 22px -10px rgba(2,25,53,0.28),
    0 1px 2px rgba(2,25,53,0.06);
}
.ha-wa-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}
.ha-wa-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.ha-wa-icon svg { display: block; border-radius: 6px; }
.ha-wa-app {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(2,25,53,0.62);
  text-transform: uppercase;
  flex: 1;
  min-width: 0;
}
.ha-wa-time {
  font-family: var(--sans);
  font-size: 10px;
  color: rgba(2,25,53,0.55);
  font-weight: 500;
  flex-shrink: 0;
}
.ha-wa-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 0;
}
.ha-wa-sender {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.012em;
  line-height: 1.2;
}
.ha-wa-msg {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  color: rgba(2,25,53,0.78);
  line-height: 1.3;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === Inside-the-app phone sequence ===
   No lock screen, no app drawer. The phone is always inside the base9
   nurse app, showing the Inbox. Sequence (Accept phase, 50–88%):
     50–58%  app loads, inbox empty
     58–66%  red badge pops in, "New shift offered" card pulses
     66–84%  bottom sheet rises with shift detail (long, clear hold)
     84–86%  Accept button taps (Signal Blue flash + scale)
     86–88%  green confirm slides in, demo continues to close phase */

/* In-app inbox body — fills space between app header and bottom tabs */
.ha-inapp-body {
  flex: 1;
  padding: 16px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--paper);
  overflow: hidden;
}
.hib-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.hib-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
/* Red "1" pill next to "Inbox" — iOS style. Pops in mid-loop. */
.hib-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #FF3B30;
  color: var(--white);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(255,59,48,0.35);
  transform: scale(0);
  animation: hib-badge-pop 28s ease-out infinite;
}
@keyframes hib-badge-pop {
  0%, 58%   { transform: scale(0); }
  60%       { transform: scale(1.3); }
  62%, 78%  { transform: scale(1); }
  80%, 100% { transform: scale(0); }
}

.hib-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 13px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: 10px;
}
.hib-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.hib-k {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.hib-k-muted {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
}
.hib-meta {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: -0.005em;
}
.hib-foot {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--signal);
  font-weight: 600;
  margin-top: 2px;
  letter-spacing: 0.01em;
}
/* Urgent pill on the active inbox row */
.hib-pill {
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #FF3B30;
  background: rgba(255,59,48,0.12);
  padding: 2px 7px;
  border-radius: 999px;
}
/* Active card pulses with a Signal Blue ring before the sheet rises */
.hib-card-active {
  position: relative;
  border-color: rgba(82,121,174,0.45);
  animation: hib-card-pulse 28s ease-in-out infinite;
}
@keyframes hib-card-pulse {
  0%, 59%   { box-shadow: 0 0 0 0 rgba(82,121,174,0); }
  61%       { box-shadow: 0 0 0 5px rgba(82,121,174,0.22); }
  63%       { box-shadow: 0 0 0 0 rgba(82,121,174,0); }
  65%       { box-shadow: 0 0 0 5px rgba(82,121,174,0.22); }
  67%, 100% { box-shadow: 0 0 0 0 rgba(82,121,174,0); }
}
.hib-card-muted { opacity: 0.7; }

/* Inbox tab badge — inline next to the label */
.hat-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: 7px;
  background: #FF3B30;
  color: var(--white);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  transform: scale(0);
  transform-origin: center;
  animation: hib-badge-pop 28s ease-out infinite;
}

/* Bottom sheet on the approve screen */
.ha-sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  background: var(--white);
  border-top: 1px solid var(--slate-200);
  border-radius: 20px 20px 0 0;
  padding: 6px 14px 14px;
  box-shadow: 0 -10px 24px -8px rgba(2,25,53,0.12);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateY(110%);
  animation: ha-sheet-rise 28s ease-out infinite;
}
@keyframes ha-sheet-rise {
  0%, 66%   { transform: translateY(110%); }
  69%, 78%  { transform: translateY(0); }
  80%, 100% { transform: translateY(110%); }
}
.hsh-handle {
  width: 36px; height: 4px;
  border-radius: 2px;
  background: var(--slate-200);
  margin: 0 auto 4px;
}
.hsh-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.hsh-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 700;
}
.hsh-time {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.hsh-title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.hsh-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0 4px;
  border-top: 1px dashed var(--slate-200);
  border-bottom: 1px dashed var(--slate-200);
}
.hsh-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--sans);
  font-size: 11px;
}
.hsh-row span { color: var(--ink-4); }
.hsh-row b    { color: var(--navy); font-weight: 600; }
.hsh-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  position: relative;
}

/* Legacy hap- placeholders kept for fallback styling on actions */
.hap-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.hap-btn {
  text-align: center;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.005em;
  user-select: none;
  border: 1px solid transparent;
  cursor: default;
  appearance: none;
  -webkit-appearance: none;
}
.hap-btn-decline {
  background: var(--paper);
  color: var(--ink-3);
  border: 1px solid var(--slate-200);
}
.hap-btn-accept {
  background: var(--navy);
  color: var(--white);
  position: relative;
  cursor: pointer;
  pointer-events: auto;
  transition: background 120ms ease, transform 120ms ease;
  animation: ha-push-tap  28s ease-in-out infinite;
}
.hap-btn-accept:hover { background: var(--signal); }
.hap-btn-accept:active { transform: scale(0.97); }
.hap-btn-accept:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.hap-btn-arr { display: inline-block; margin-left: 2px; }
/* When the user clicks Accept, freeze the demo with the green confirm shown. */
.hero-anim.is-accepted .hap-btn-accept { animation: none; background: var(--signal); }
.hero-anim.is-accepted .ha-push-confirm {
  animation: none !important;
  transform: translateY(0);
  opacity: 1;
}
.hero-anim.is-accepted .ha-screen[data-screen="approve"] { animation: none; opacity: 1; }
.hero-anim.is-accepted .ha-sheet { animation: none; transform: translateY(0); }
.hero-anim.is-accepted .ha-push { animation: none; opacity: 1; transform: translate(0, -50%) rotate(-2deg); }
@keyframes ha-push-tap {
  0%, 73%   { background: var(--navy); transform: scale(1); }
  74%       { background: var(--signal); transform: scale(0.96); }
  75%, 100% { background: var(--navy); transform: scale(1); }
}

/* Green "Accepted" overlay slides up over the buttons after the tap */
.ha-push-confirm {
  position: absolute;
  left: 14px; right: 14px; bottom: 12px;
  background: #16A34A;
  color: var(--white);
  padding: 9px 12px;
  border-radius: 8px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transform: translateY(110%);
  opacity: 0;
  animation: ha-push-confirm  28s ease-in-out infinite;
  box-shadow: 0 4px 12px -2px rgba(22,163,74,0.4);
}
.ha-push-confirm .hapc-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  font-weight: 700;
  font-size: 10px;
}
@keyframes ha-push-confirm {
  0%, 74%   { transform: translateY(110%); opacity: 0; }
  75%, 78%  { transform: translateY(0); opacity: 1; }
  80%, 100% { transform: translateY(110%); opacity: 0; }
}

/* App tabs at the bottom of the phone */
.ha-app-tabs {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--white);
  border-top: 1px solid var(--slate-200);
  padding: 10px 0 18px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.hat-tab {
  text-align: center;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-4);
  letter-spacing: -0.005em;
  position: relative;
}
.hat-tab.is-active { color: var(--signal); }
.hat-tab.is-active::before {
  content: '';
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--signal);
}

/* Mobile / smaller console: scale down the phone, anchor it correctly */
@media (max-width: 720px) {
  .ha-push { right: 6px; }
  .ha-phone { width: 180px; height: 350px; padding: 6px; border-radius: 28px; }
  .ha-phone-screen { border-radius: 22px; }
  .ha-phone-notch { width: 64px; height: 16px; top: 6px; }
  .hap-title { font-size: 12px; }
  .hap-text { font-size: 10.5px; }
  .ha-app-name { font-size: 11.5px; }
  .ha-app-greet { font-size: 10px; }
}

/* === Event log (replaces the static ticking feed) ===
   Each row appears at the right moment in the cycle and stays visible. */
.ha-foot {
  background: var(--navy-deep);
  padding: 12px 18px;
  border-top: 1px solid var(--navy-700);
  min-height: 110px;
}
.ha-log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ha-log-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--on-navy);
  opacity: 0;
  transform: translateY(4px);
  padding: 2px 0;
}
.ha-log-row .cf-t { color: var(--signal-2); font-weight: 600; }
.ha-log-row .cf-msg { color: var(--white); font-family: var(--sans); font-size: 12.5px; letter-spacing: -0.005em; }
.ha-log-row .cf-msg b { font-weight: 700; margin-right: 2px; }

/* Color-coded event labels: makes the log scannable in a glance */
.ha-log-row[data-step="callout"] .cf-msg b { color: #FCA5A5; }   /* red — alert */
.ha-log-row[data-step="match"]   .cf-msg b { color: var(--signal-2); }  /* blue — matching */
.ha-log-row[data-step="accept"]  .cf-msg b { color: #86EFAC; }   /* green — accepted */
.ha-log-row[data-step="close"]   .cf-msg b { color: #86EFAC; }   /* green — closed/done */

.ha-log-row[data-step="callout"] { animation: ha-log-show  28s ease-out infinite; animation-delay: 0s; }
.ha-log-row[data-step="match"]   { animation: ha-log-show  28s ease-out infinite; animation-delay: 0s; }
.ha-log-row[data-step="accept"]  { animation: ha-log-show  28s ease-out infinite; animation-delay: 0s; }
.ha-log-row[data-step="close"]   { animation: ha-log-show  28s ease-out infinite; animation-delay: 0s; }

@keyframes ha-log-show {
  0%, 100% { opacity: 0; transform: translateY(4px); }
}
.ha-log-row[data-step="callout"] {
  animation: ha-log-callout  28s ease-out infinite;
}
.ha-log-row[data-step="match"] {
  animation: ha-log-match  28s ease-out infinite;
}
.ha-log-row[data-step="accept"] {
  animation: ha-log-accept  28s ease-out infinite;
}
.ha-log-row[data-step="close"] {
  animation: ha-log-close  28s ease-out infinite;
}
@keyframes ha-log-callout {
  0%, 16%  { opacity: 0; transform: translateY(4px); }
  20%, 95% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes ha-log-match {
  0%, 34%  { opacity: 0; transform: translateY(4px); }
  38%, 95% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes ha-log-accept {
  0%, 70%  { opacity: 0; transform: translateY(4px); }
  73%, 95% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes ha-log-close {
  0%, 80%  { opacity: 0; transform: translateY(4px); }
  83%, 95% { opacity: 1; transform: translateY(0); }
  98%, 100% { opacity: 0; transform: translateY(-4px); }
}

/* Pause animations for users with reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .ha-callout, .ha-fill, .ha-fill::after, .ha-fill::before,
  .ha-match, .hml-bar::after,
  .ha-step::after, .ha-step,
  .ha-log-row,
  .ha-push, .ha-wa-card, .ha-screen, .ha-sheet, .hap-btn-accept, .ha-push-confirm {
    animation: none !important;
  }
  .ha-grid .ha-callout {
    background: #FEE2E2; color: #B91C1C;
    box-shadow: inset 0 0 0 2px #DC2626;
  }
  .ha-grid .ha-fill {
    background: var(--navy); color: var(--white);
  }
  .ha-grid .ha-fill::after { content: 'CHG'; }
  .ha-log-row { opacity: 1; transform: none; }
  .ha-match, .ha-push { display: none; }
}

/* Schedule grid inside Console */
.console-grid {
  display: grid;
  grid-template-columns: 96px repeat(6, 1fr);
  background: var(--slate-200);
  gap: 1px;
}
.console-grid > div {
  background: var(--white);
  padding: 9px 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  min-height: 36px;
}
.console-grid .cg-h {
  background: var(--paper-2);
  color: var(--ink-4);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  justify-content: center;
}
.console-grid .cg-name {
  background: var(--paper);
  color: var(--navy);
  font-weight: 600;
  font-size: 11.5px;
  font-family: var(--sans);
  letter-spacing: -0.01em;
}
.console-grid .cg-cell {
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-300);
}
.console-grid .cg-cell.filled { color: var(--navy); }
.console-grid .cg-cell.empty { color: var(--slate-300); font-weight: 400; }
.console-grid .cg-cell.gap {
  background: var(--paper-2);
  color: var(--navy-300);
  animation: gapflash 6s ease-in-out infinite;
}
.console-grid .cg-cell.live {
  background: var(--signal);
  color: var(--white);
  animation: liveflash 6s ease-in-out infinite;
  position: relative;
}
.console-grid .cg-cell.live::after {
  content: '';
  position: absolute; inset: 0;
  border: 1.5px solid var(--white);
  pointer-events: none;
  animation: livering 1.4s ease-in-out infinite;
}
@keyframes gapflash {
  0%, 32%   { background: var(--paper-2); color: var(--navy-300); }
  40%, 60%  { background: var(--signal); color: var(--white); }
  68%, 100% { background: var(--white); color: var(--navy); }
}
@keyframes liveflash {
  0%, 32%   { opacity: 0; }
  40%, 100% { opacity: 1; }
}
@keyframes livering {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Console feed at the bottom */
.console-foot {
  background: var(--navy-deep);
  border-top: 1px solid var(--navy-700);
  padding: 12px 18px;
}
.console-feed {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.console-feed li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--on-navy);
  padding: 4px 0;
  animation: feedfade 6s ease-in-out infinite;
}
.console-feed li:nth-child(1) { animation-delay: 0s; }
.console-feed li:nth-child(2) { animation-delay: 1.2s; }
.console-feed li:nth-child(3) { animation-delay: 2.4s; }
.console-feed .cf-t { color: var(--signal-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.console-feed .cf-msg { color: var(--white); font-family: var(--sans); font-size: 13px; letter-spacing: -0.005em; }
@keyframes feedfade {
  0%, 8%    { opacity: 0; transform: translateY(4px); }
  16%, 80%  { opacity: 1; transform: translateY(0); }
  92%, 100% { opacity: 0.5; }
}

/* === Split-statement section === */
.split { padding: clamp(56px, 6vw, 96px) 0; }
.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.split-l h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--navy);
  text-wrap: balance;
  margin: 0;
}
.split-l h2 em { font-style: normal; color: var(--signal); }
.split-r {
  display: flex; flex-direction: column; gap: 16px;
  padding-top: 6px;
}
.split-r p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0;
  max-width: 520px;
}
.split-r .split-link {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--signal);
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px;
}
.split-r .split-link:hover { color: var(--navy); }
.split-r .split-link .arrow { transition: transform .15s; }
.split-r .split-link:hover .arrow { transform: translateX(3px); }
@media (max-width: 980px) {
  .split-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* === Section H2 (sec-h2) — replaces shiftbar === */
.sec-h2 {
  display: flex; flex-direction: column;
  gap: 12px;
  max-width: 760px;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.sec-h2 h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--navy);
  text-wrap: balance;
  margin: 0;
}
.sec-h2 h2 em { font-style: normal; color: var(--signal); }
.sec-h2 .lead {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
  max-width: 720px;
}
.sec-h2 .lead em { font-style: italic; }
.sec-h2 .lead a, .inline-link {
  color: var(--signal);
  border-bottom: 1.5px solid var(--signal);
  transition: color .15s, border-color .15s;
}
.sec-h2 .lead a:hover, .inline-link:hover { color: var(--navy); border-bottom-color: var(--navy); }
.sec-h2[data-on-navy] h2 { color: var(--white); }
.sec-h2[data-on-navy] .lead { color: var(--on-navy); }
.sec-h2[data-on-navy] .lead a { color: var(--signal-2); border-bottom-color: var(--signal-2); }

/* === Cards strip — repurposed thesis bento === */
.thesis.bento.cardstrip {
  border-radius: var(--r-lg);
  background: var(--slate-200);
  border: 1px solid var(--slate-200);
  overflow: hidden;
  margin: 0;
}
.thesis.bento.cardstrip .th-cell {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.thesis.bento.cardstrip .th-cell h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
}
.thesis.bento.cardstrip .th-cell .th-num {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--signal);
  text-transform: none;
}
.thesis.bento.cardstrip .th-cell.dark .th-num { color: var(--signal-2); }
.thesis.bento.cardstrip .th-cell .th-top { gap: 6px; margin-bottom: 4px; }

/* Inline visualizations inside cards */
.card-vis {
  margin-top: auto;
  padding-top: 16px;
}
.card-vis .wv-bars { display: flex; flex-direction: column; gap: 6px; }
.card-vis .wv-bars .bar {
  display: grid;
  grid-template-columns: 50px 1fr 36px;
  gap: 10px;
  align-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
}
.card-vis .wv-bars .bar .bn { color: var(--navy); font-weight: 600; }
.card-vis .wv-bars .bar .bv {
  height: 8px;
  background: var(--slate-100);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.card-vis .wv-bars .bar .bv::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--navy);
  border-radius: 3px;
}
.card-vis .wv-bars .bar.b1 .bv::after { width: 92%; }
.card-vis .wv-bars .bar.b2 .bv::after { width: 68%; background: var(--signal); }
.card-vis .wv-bars .bar.b3 .bv::after { width: 81%; }

.card-vis .wv-audit-mini {
  font-family: var(--mono);
  font-size: 11px;
  background: rgba(255,255,255,0.06);
  border-left: 2px solid var(--signal-2);
  padding: 8px 12px;
  border-radius: 0 var(--r) var(--r) 0;
}
.card-vis .wv-audit-mini .ar {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 10px;
  padding: 2px 0;
  color: var(--on-navy);
}
.card-vis .wv-audit-mini .ar .at { color: var(--signal-2); font-weight: 600; }
.card-vis .wv-audit-mini .ar .am { color: var(--white); font-family: var(--sans); font-size: 12px; }
.thesis.bento.cardstrip .th-cell:not(.dark) .card-vis .wv-audit-mini {
  background: var(--paper);
  border-left-color: var(--signal);
}
.thesis.bento.cardstrip .th-cell:not(.dark) .card-vis .wv-audit-mini .ar { color: var(--ink-3); }
.thesis.bento.cardstrip .th-cell:not(.dark) .card-vis .wv-audit-mini .ar .at { color: var(--signal); }
.thesis.bento.cardstrip .th-cell:not(.dark) .card-vis .wv-audit-mini .ar .am { color: var(--navy); }

/* === Tile system — clean, deliberate, one across the whole site === */
.tilegrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.tilegrid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.tilegrid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
  .tilegrid, .tilegrid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .tilegrid, .tilegrid.cols-2, .tilegrid.cols-4 { grid-template-columns: 1fr; }
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  padding: 24px 24px 22px;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--slate-300);
}
.tile .tile-index {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.tile .tile-index::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--signal);
  display: inline-block;
  transition: width .25s ease;
}
.tile:hover .tile-index::before { width: 36px; }
.tile h3 {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--navy);
  margin: 0;
}
.tile p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
}
.tile .tile-link {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--signal);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tile .tile-link .arrow { transition: transform .15s; }
.tile:hover .tile-link .arrow { transform: translateX(3px); }

/* Wide variant — spans 2 columns */
.tile.wide { grid-column: span 2; }
@media (max-width: 1100px) { .tile.wide { grid-column: span 2; } }
@media (max-width: 680px) { .tile.wide { grid-column: span 1; } }

/* Dark variant — navy fill, used for one emphasis tile per grid */
.tile.dark {
  background: var(--navy);
  border-color: var(--navy);
}
.tile.dark h3 { color: var(--white); }
.tile.dark p { color: var(--on-navy); }
.tile.dark .tile-index { color: var(--signal-2); }
.tile.dark .tile-index::before { background: var(--signal-2); }
.tile.dark .tile-link { color: var(--signal-2); }
.tile.dark:hover { border-color: var(--navy-700); }

/* On-navy surface — flip the default tile to a transparent navy variant */
.surf-navy .tile, .surf-deep .tile {
  background: var(--navy-700);
  border-color: var(--navy-700);
}
.surf-navy .tile h3, .surf-deep .tile h3 { color: var(--white); }
.surf-navy .tile p, .surf-deep .tile p { color: var(--on-navy); }
.surf-navy .tile .tile-index, .surf-deep .tile .tile-index { color: var(--signal-2); }
.surf-navy .tile .tile-index::before, .surf-deep .tile .tile-index::before { background: var(--signal-2); }
.surf-navy .tile:hover, .surf-deep .tile:hover { border-color: var(--navy-500); transform: translateY(-2px); box-shadow: 0 12px 32px -16px rgba(0,0,0,.5); }

/* === Status list — Console body for hero/dashboard === */
.status-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.status-list li,
.status-list a {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) minmax(0, 2fr) auto;
  gap: 16px;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid var(--slate-200);
  text-decoration: none;
  color: inherit;
  transition: background .15s ease, padding-left .15s ease;
}
.status-list li:first-child,
.status-list li:first-child a { border-top: 0; }
.status-list a { border-top: 1px solid var(--slate-200); }
.status-list li:has(> a) { padding: 0; border-top: 0; }
.status-list li > a:hover { background: var(--paper); padding-left: 24px; }
.status-list .st-i {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.status-list .st-t {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.status-list .st-d {
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-3);
}
.status-list .st-s {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 5px 10px;
  border: 1px solid var(--slate-300);
  border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .status-list li,
  .status-list a {
    grid-template-columns: 28px 1fr;
    gap: 10px;
  }
  .status-list .st-d, .status-list .st-s { display: none; }
}

/* ============================================================
   MANIFESTO v4 — "The signed document"
   The page IS the artifact: a ledger entry, with a frontispiece,
   numbered entries (§ 01–04), a typography wall of principles,
   a contrast block, and a closing signature card.
   ============================================================ */
.manifesto-body { background: var(--paper); }

/* Reading progress rail — fixed left edge, 5 dots */
.mn-progress {
  position: fixed;
  left: clamp(16px, 2vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}
.mn-progress span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--slate-300);
  transition: background .25s, border-color .25s, transform .25s;
}
.mn-progress span.on {
  background: var(--signal);
  border-color: var(--signal);
  transform: scale(1.4);
}
@media (max-width: 980px) { .mn-progress { display: none; } }

/* === FRONTISPIECE === */
.mn-front {
  padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px);
  background: var(--paper);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--slate-200);
}
.mn-front-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) minmax(180px, 220px);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 980px) {
  .mn-front-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* Giant outlined Roman numeral — frontispiece mark */
.mn-front-mark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(120px, 16vw, 220px);
  line-height: 0.8;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px var(--navy);
          text-stroke: 2px var(--navy);
  user-select: none;
  align-self: start;
}

/* Body of the frontispiece */
.mn-front-body { padding-top: 8px; }
.mn-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
  padding-bottom: 18px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--slate-200);
}
.mn-meta .mm-l { color: var(--signal); display: inline-flex; align-items: center; gap: 8px; }
.mn-meta .mm-l b { color: var(--navy); font-weight: 700; }
.mn-meta .mm-c { color: var(--ink-3); }
.mn-meta .mm-r { color: var(--ink-3); margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) { .mn-meta .mm-r { margin-left: 0; } }

.mn-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 130px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--navy);
  margin: 0 0 28px;
  text-wrap: balance;
}
.mn-title em {
  font-style: italic;
  color: var(--signal);
}
.mn-deck {
  font-family: var(--sans);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 0 32px;
  max-width: 580px;
  text-wrap: pretty;
}
.mn-deck-em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--signal);
  font-weight: 500;
}
.mn-front-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* The wax-stamp / seal in the corner */
.mn-front-stamp {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 220px;
  margin-left: auto;
  align-self: start;
}
.mn-front-stamp .mn-stamp-mono {
  position: absolute;
  inset: 25%;
  width: 50%;
  height: 50%;
  opacity: 0.85;
}
.mn-stamp-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--slate-200);
  background: var(--white);
  animation: mn-rotate 30s linear infinite;
  box-shadow: 0 4px 24px -8px rgba(2,25,53,0.08);
}
.mn-stamp-text {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--navy);
  /* Curve text along the ring using SVG-ish technique with positioned chars */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: pre;
  /* Visible center text since we don't have textPath fallback */
  display: none;
}
@keyframes mn-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (max-width: 980px) {
  .mn-front-stamp { max-width: 140px; margin: 0 auto; }
}

/* === ENTRY § sections === */
.mn-entry { padding: clamp(56px, 7vw, 96px) 0; }
.mn-entry .wrap { position: relative; }

.mn-entry-head {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 18px;
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: clamp(28px, 3vw, 40px);
  border-bottom: 1px solid var(--slate-200);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-4);
}
.mn-entry-head .mn-entry-tag {
  color: var(--signal);
  font-size: 11px;
}
.mn-entry-head .mn-entry-title {
  color: var(--navy);
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: -0.005em;
  text-transform: none;
  font-weight: 600;
}
.mn-entry-head .mn-entry-seq { color: var(--ink-4); }
.mn-entry-head .mn-entry-state {
  padding: 4px 8px;
  border: 1px solid var(--slate-300);
  border-radius: 999px;
  color: var(--signal);
  font-size: 9.5px;
  letter-spacing: 0.2em;
}
.mn-entry-head.on-navy { border-bottom-color: var(--navy-700); color: var(--on-navy-2); }
.mn-entry-head.on-navy .mn-entry-tag { color: var(--signal-2); }
.mn-entry-head.on-navy .mn-entry-title { color: var(--white); }
.mn-entry-head.on-navy .mn-entry-seq { color: var(--on-navy-3); }
.mn-entry-head.on-navy .mn-entry-state { border-color: var(--navy-500); color: var(--signal-2); }
@media (max-width: 760px) {
  .mn-entry-head { grid-template-columns: auto 1fr auto; gap: 12px; }
  .mn-entry-head .mn-entry-state { display: none; }
}

/* Long-form prose inside an entry */
.mn-prose { max-width: 760px; }
.mn-prose p {
  font-family: var(--sans);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 20px;
  text-wrap: pretty;
}
.mn-prose p:last-child { margin-bottom: 0; }
.mn-prose p em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--signal);
}

/* === FIVE PRINCIPLES — typography wall === */
.mn-tenets {
  display: flex;
  flex-direction: column;
}
.mn-tenet {
  display: grid;
  grid-template-columns: minmax(96px, 140px) minmax(220px, 1.4fr) minmax(0, 2fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  padding: clamp(28px, 4vw, 48px) 0;
  border-top: 1px solid var(--slate-200);
  position: relative;
  transition: padding-left .3s ease;
}
.mn-tenet:first-child { border-top: 0; padding-top: 12px; }
.mn-tenet:last-child { border-bottom: 1px solid var(--slate-200); }
.mn-tenet:hover { padding-left: 8px; }
.mn-tenet:hover .mn-tenet-roman {
  -webkit-text-stroke-color: var(--signal);
          text-stroke-color: var(--signal);
  color: var(--signal);
  -webkit-text-fill-color: rgba(82,121,174,0.08);
}
.mn-tenet-roman {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 8vw, 110px);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--navy);
          text-stroke: 1.5px var(--navy);
  -webkit-text-fill-color: transparent;
  transition: -webkit-text-stroke-color .3s, color .3s;
  user-select: none;
}
.mn-tenet-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--navy);
  margin: 0;
  align-self: center;
}
.mn-tenet-body {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0;
  align-self: center;
}
@media (max-width: 900px) {
  .mn-tenet {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
    column-gap: 20px;
  }
  .mn-tenet-roman {
    grid-column: 1; grid-row: 1 / span 2;
    font-size: 64px;
  }
  .mn-tenet-title { grid-column: 2; grid-row: 1; }
  .mn-tenet-body { grid-column: 2; grid-row: 2; }
}

/* === IT IS NOT / IT IS — the contrast moment === */
.mn-not {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding: clamp(24px, 4vw, 48px) 0;
}
.mn-not-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mn-not-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px dashed var(--navy-700);
  font-family: var(--sans);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 500;
  color: var(--on-navy);
  letter-spacing: -0.012em;
}
.mn-not-list li:first-child { border-top: 0; }
.mn-not-list .mn-not-x {
  font-family: var(--mono);
  color: var(--on-navy-3);
  font-size: 1em;
  font-weight: 400;
  text-align: center;
}

.mn-not-affirm {
  background: var(--navy-700);
  border: 1px solid var(--signal);
  border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  box-shadow: 0 24px 60px -28px rgba(82,121,174,0.4);
}
.mn-not-affirm::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--signal-2), transparent 60%) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.mn-not-affirm-k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal-2);
  font-weight: 700;
}
.mn-not-affirm-line {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--white);
  margin: 0;
}
.mn-not-affirm-line em {
  font-style: italic;
  color: var(--signal-2);
}
.mn-not-affirm-sub {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--on-navy);
  margin: 0;
}
@media (max-width: 900px) { .mn-not { grid-template-columns: 1fr; gap: 32px; } }

/* === SIGNATURE CARD === */
.mn-sig {
  background: var(--paper);
  padding: clamp(48px, 6vw, 96px) 0 clamp(48px, 6vw, 88px);
  border-top: 1px solid var(--slate-200);
}
.mn-sig-card {
  max-width: 820px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -24px rgba(2,25,53,0.08);
  padding: clamp(28px, 4vw, 56px);
  position: relative;
  overflow: hidden;
}
.mn-sig-rule {
  height: 4px;
  background: linear-gradient(90deg, var(--signal-2), var(--signal));
  border-radius: 2px;
  margin-bottom: 28px;
}
.mn-sig-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  padding: 12px 0;
  border-top: 1px solid var(--slate-100);
  align-items: baseline;
}
.mn-sig-row:first-of-type { border-top: 0; }
.mn-sig-row .mn-sig-k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 700;
}
.mn-sig-row .mn-sig-v {
  font-family: var(--sans);
  font-size: 15.5px;
  color: var(--navy);
  font-weight: 500;
}

.mn-sig-mark {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: clamp(28px, 4vw, 48px) 0 clamp(20px, 3vw, 36px);
  margin-top: 16px;
  border-top: 1px solid var(--slate-200);
  border-bottom: 1px solid var(--slate-200);
}
.mn-sig-mono {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.mn-sig-affirm {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--navy);
}
.mn-sig-affirm em { font-style: italic; color: var(--signal); }

.mn-sig-foot {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px;
  padding-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.mn-sig-foot .col-v {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: -0.005em;
  font-size: 14px;
  color: var(--ink-3);
  font-weight: 500;
}

@media (max-width: 600px) {
  .mn-sig-row, .mn-sig-foot { grid-template-columns: 1fr; gap: 4px; }
}

/* === Contact page — compact 2-column hero + form === */
.contact-page {
  padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 96px);
  background: var(--paper);
}
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
}

.contact-aside {
  position: sticky;
  top: 110px;
  align-self: start;
}
@media (max-width: 900px) { .contact-aside { position: static; } }

.contact-aside h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin: 0 0 18px;
}
.contact-aside p {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0 0 28px;
  max-width: 440px;
}

/* === Contact cards (Book + Email) — replace the thin button + email list === */
.ct-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  padding: 22px 24px;
  margin-top: 16px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
}
.ct-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--slate-300);
}
.ct-card .ctc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.ct-card .ctc-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 700;
}
.ct-card .ctc-arrow {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--signal);
  transition: transform .2s ease;
}
.ct-card:hover .ctc-arrow { transform: translateX(4px); }
.ct-card h3 {
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.22;
  color: var(--navy);
  margin: 4px 0 0;
}
.ct-card p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
}

/* Primary "Book a meeting" card — fills with navy */
.ct-book-card {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}
.ct-book-card h3 { color: var(--white); }
.ct-book-card p { color: var(--on-navy); }
.ct-book-card .ctc-eyebrow { color: var(--signal-2); }
.ct-book-card .ctc-arrow { color: var(--signal-2); }
.ct-book-card:hover { border-color: var(--navy-700); }

/* Email card — keeps the lighter treatment */
.ct-email-card .ctc-eyebrow { color: var(--ink-4); }
.ct-email-card .ctc-arrow { color: var(--signal); }
.ct-email-card h3 {
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--navy);
}

/* Form inside the contact page */
.contact-page .contact-form {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3vw, 32px);
  gap: 16px;
  max-width: none;
  box-shadow: var(--shadow-sm);
}
.contact-page .contact-form .ff-row { gap: 16px; }
.contact-page .contact-form button { margin-top: 4px; align-self: start; }

/* Quiet header at the top of the form */
.ff-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--slate-200);
}
.ff-head .ff-h-k {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--navy);
}
.ff-head .ff-h-d {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-4);
  letter-spacing: -0.005em;
  text-transform: none;
}

/* === Manifesto v3 — clean, single-column, narrative === */
.manifesto-hero-v3 {
  background: var(--paper);
  padding: clamp(56px, 7vw, 96px) 0 clamp(36px, 4vw, 56px);
  border-bottom: 1px solid var(--slate-200);
}
.mh3-title {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}
.mh3-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 700;
  margin-bottom: 22px;
  padding: 5px 14px;
  border: 1px solid var(--slate-200);
  border-radius: 999px;
  background: var(--white);
}
.mh3-title h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--navy);
  margin: 0 0 24px;
  text-wrap: balance;
}
.mh3-title h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal);
}
.mh3-title p {
  font-family: var(--sans);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0 auto;
  max-width: 680px;
}

/* Section layout — left numeral gutter + right content */
.mh3-section { padding: clamp(56px, 7vw, 96px) 0; }
.mh3-wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: minmax(80px, 120px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.mh3-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 0.9;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--navy);
          text-stroke: 1.5px var(--navy);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  position: sticky;
  top: 110px;
  align-self: start;
}
.mh3-num.on-navy {
  -webkit-text-stroke-color: var(--signal-2);
          text-stroke-color: var(--signal-2);
}
.mh3-content { max-width: 720px; }
.mh3-content h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--navy);
  margin: 0 0 22px;
  text-wrap: balance;
}
.mh3-content h2.on-navy { color: var(--white); }
.mh3-content > p {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 18px;
  text-wrap: pretty;
}
.mh3-content > p em { font-style: italic; color: var(--signal); }
.mh3-content > p:last-of-type { margin-bottom: 0; }
.mh3-lead {
  font-size: 18px !important;
  color: var(--ink-3) !important;
  margin-bottom: 28px !important;
}

/* Principles — clean numbered list, no hover effects.
   Layout: 2-column grid where .pn occupies column 1 across both rows,
   and h3 / p stack in column 2. */
.mh3-principles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.mh3-principles li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 24px;
  row-gap: 0;
  padding: 28px 0;
  border-top: 1px solid var(--slate-200);
  align-items: start;
}
.mh3-principles li:first-child { border-top: 0; padding-top: 12px; }
.mh3-principles li:last-child { padding-bottom: 0; }
.mh3-principles .pn {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  padding-top: 4px;
}
.mh3-principles h3 {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.22;
  color: var(--navy);
  margin: 0 0 8px;
}
.mh3-principles p {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0;
}
@media (max-width: 540px) {
  .mh3-principles li {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 8px;
  }
  .mh3-principles .pn { grid-column: 1; grid-row: 1; padding-top: 0; }
  .mh3-principles h3 { grid-column: 1; grid-row: 2; }
  .mh3-principles p { grid-column: 1; grid-row: 3; }
}

/* Contrast block on navy — "It is not / It is" */
.mh3-contrast {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--navy-700);
  border: 1px solid var(--navy-700);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 12px;
}
.mh3-col {
  background: var(--navy);
  color: var(--on-navy);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mh3-col.is { background: var(--signal); color: var(--white); }
.mh3-col .mh3-k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--signal-2);
  font-weight: 700;
}
.mh3-col.is .mh3-k { color: var(--white); }
.mh3-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.mh3-col ul li {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  color: var(--white);
  padding: 6px 0;
  display: flex; align-items: baseline; gap: 10px;
}
.mh3-col ul li::before {
  content: '×';
  color: var(--signal-2);
  font-weight: 600;
  width: 12px;
  flex-shrink: 0;
}
.mh3-col .mh3-statement {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.3;
  color: var(--white);
  margin: auto 0 0;
}

@media (max-width: 900px) {
  .mh3-wrap { grid-template-columns: 1fr; gap: 12px; }
  .mh3-num { position: static; font-size: 48px; }
  .mh3-contrast { grid-template-columns: 1fr; }
}

/* === Manifesto v2 (legacy, unused) === */
.manifesto-v2-hero {
  padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 64px);
  background: var(--paper);
}
.mv2-title {
  text-align: center;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.mv2-title h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(40px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--navy);
  margin: 0 0 16px;
  text-wrap: balance;
}
.mv2-title h1 em { font-style: normal; color: var(--signal); }
.mv2-title p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 auto;
  max-width: 560px;
}

.manifesto-v2-body { padding: clamp(48px, 6vw, 80px) 0; }
.mv2-grid {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.mv2-index {
  position: sticky;
  top: 96px;
  align-self: start;
}
.mv2-index-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--slate-200);
}
.mv2-index ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: mvi;
}
.mv2-index ol li { counter-increment: mvi; }
.mv2-index ol li a {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 8px 0;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-3);
  border-left: 2px solid transparent;
  padding-left: 14px;
  margin-left: -16px;
  transition: color .15s, border-color .15s;
}
.mv2-index ol li a::before {
  content: '§ ' counter(mvi, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--ink-4);
  font-weight: 600;
}
.mv2-index ol li a:hover { color: var(--navy); }
.mv2-index ol li a.active {
  color: var(--navy);
  border-left-color: var(--signal);
  font-weight: 500;
}
.mv2-index ol li a.active::before { color: var(--signal); }

.mv2-prose { max-width: 720px; }
.mv2-section {
  padding: clamp(28px, 3vw, 44px) 0;
  border-top: 1px solid var(--slate-200);
}
.mv2-section:first-child { border-top: 0; padding-top: 0; }
.mv2-section h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--navy);
  margin: 0 0 18px;
}
.mv2-section h2 em { font-style: italic; color: var(--signal); }
.mv2-section p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 16px;
}
.mv2-section p em { font-style: italic; color: var(--signal); }
.mv2-section p:last-child { margin-bottom: 0; }

.mv2-section .principles { margin: 0; }
.mv2-section .principles li {
  padding: 22px 0;
  transition: none;
}
.mv2-section .principles li:hover { padding-left: 0; }
.mv2-section .principles li:hover::before { content: none; }
.mv2-section .principles li:first-child { padding-top: 8px; border-top: 0; }
.mv2-section .principles h3 { font-size: 22px; }
.mv2-section .principles p { font-size: 16px; line-height: 1.65; color: var(--ink-2); }

@media (max-width: 900px) {
  .mv2-grid { grid-template-columns: 1fr; }
  .mv2-index { position: static; padding-bottom: 16px; border-bottom: 1px solid var(--slate-200); margin-bottom: 24px; }
}

/* Contrast block (replaces .ng-line negation) */
.contrast {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--slate-200);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: 12px;
  min-height: 240px;
}
.contrast-col {
  padding: 24px 26px;
  background: var(--white);
  display: flex; flex-direction: column; gap: 12px;
}
.contrast-col.is { background: var(--navy); color: var(--on-navy); }
.contrast-col .contrast-k {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 700;
}
.contrast-col.is .contrast-k { color: var(--signal-2); }
.contrast-col ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.contrast-col ul li {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-3);
  padding: 4px 0;
}
.contrast-col ul li::before {
  content: '— ';
  color: var(--slate-300);
}
.contrast-col .contrast-statement {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.25;
  color: var(--white);
  margin: auto 0 0;
  padding: 0;
}
@media (max-width: 700px) {
  .contrast { grid-template-columns: 1fr; }
}

/* ===== About page — origin (before / arrow / after) ===== */
.about-origin {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  margin-top: 12px;
}
.about-origin .aori-copy { max-width: 460px; }
.about-origin .aori-copy .lead {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}
.aori-vis {
  display: grid;
  grid-template-columns: 1fr 32px 1fr;
  gap: 14px;
  align-items: center;
}
.aori-card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 12px 28px -18px rgba(2,25,53,0.18);
  position: relative;
  overflow: hidden;
}
.aori-card .aori-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 700;
  margin-bottom: 14px;
}
.aori-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aori-card ul li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
  font-weight: 500;
}
.aori-card .aori-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(2,25,53,0.06);
  color: var(--ink-4);
  font-size: 12px;
  font-weight: 700;
}
.aori-card .aori-mark.ok {
  background: rgba(82,121,174,0.14);
  color: var(--signal);
}
/* Before card — slightly muted, as if "old way" */
.aori-before {
  background: linear-gradient(180deg, var(--white), var(--slate-100) 130%);
}
.aori-before ul li { color: var(--ink-3); }
.aori-before .aori-eyebrow { color: var(--ink-4); }
/* After card — Signal Blue accent */
.aori-after {
  background: var(--white);
  border-color: rgba(82,121,174,0.35);
  box-shadow: 0 16px 40px -18px rgba(82,121,174,0.4), inset 0 0 0 1px rgba(82,121,174,0.06);
}
.aori-after .aori-eyebrow { color: var(--signal); }
.aori-after ul li { color: var(--navy); }

.aori-arrow {
  font-family: var(--sans);
  font-size: 32px;
  font-weight: 300;
  color: var(--signal);
  text-align: center;
  line-height: 1;
}

@media (max-width: 900px) {
  .about-origin { grid-template-columns: 1fr; gap: 32px; }
  .aori-vis { grid-template-columns: 1fr; }
  .aori-arrow { transform: rotate(90deg); margin: -4px 0; }
}

/* ===== About page — four-role grid on navy ===== */
.about-roles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.arc {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 26px 28px;
  position: relative;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.arc:hover {
  background: rgba(82,121,174,0.10);
  border-color: rgba(82,121,174,0.5);
  transform: translateY(-2px);
}
.arc-i {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--signal-2);
  margin-bottom: 14px;
}
.arc h3 {
  font-family: var(--sans);
  font-size: clamp(18px, 1.5vw, 22px);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--white);
  margin: 0 0 8px;
  line-height: 1.25;
}
.arc p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  margin: 0;
}

@media (max-width: 760px) {
  .about-roles { grid-template-columns: 1fr; }
}

/* ============================================================
   Driveable demo: poster, transport bar, clickable cell, scrubber
   ============================================================ */

/* The console becomes a positioning context for the poster overlay */
.console.hero-anim { position: relative; }

/* === State-driven visibility === */
/* Poster: shown only in idle state */
.hero-anim[data-state="idle"]      .ha-poster { display: flex; }
.hero-anim[data-state="playing"]   .ha-poster,
.hero-anim[data-state="paused"]    .ha-poster,
.hero-anim[data-state="finished"]  .ha-poster { display: none; }

/* Transport: hidden in idle, shown otherwise */
.hero-anim[data-state="idle"]      .ha-transport { opacity: 0; pointer-events: none; }
.hero-anim[data-state="playing"]   .ha-transport,
.hero-anim[data-state="paused"]    .ha-transport,
.hero-anim[data-state="finished"]  .ha-transport { opacity: 1; pointer-events: auto; }

/* Transport icon visibility per state */
.hat-ico { display: none; }
.hero-anim[data-state="playing"]  .hat-ico-pause,
.hero-anim[data-state="paused"]   .hat-ico-play,
.hero-anim[data-state="idle"]     .hat-ico-play,
.hero-anim[data-state="finished"] .hat-ico-replay { display: inline-block; }

/* === Poster overlay === */
.ha-poster {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Glass effect — frosted overlay over the schedule grid behind */
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(244,246,250,0.92));
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  cursor: pointer;
  border-radius: var(--r);
  animation: ha-poster-in 360ms ease-out;
}
@keyframes ha-poster-in {
  from { opacity: 0; backdrop-filter: blur(0); }
  to   { opacity: 1; }
}
.ha-poster-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  max-width: 440px;
}
.hap-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal);
  font-weight: 700;
}
.hap-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 rgba(82,121,174,0.5);
  animation: ha-eyebrow-pulse 1.6s ease-out infinite;
}
@keyframes ha-eyebrow-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(82,121,174,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(82,121,174,0); }
  100% { box-shadow: 0 0 0 0 rgba(82,121,174,0); }
}
.hap-title {
  font-family: var(--sans);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--navy);
  margin: 0;
  line-height: 1.3;
}
.hap-title em { color: var(--signal); font-style: normal; font-weight: 700; }
.hap-play {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 12px 22px;
  background: var(--navy);
  color: var(--white);
  border: 0;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(2,25,53,0.45);
  transition: transform 140ms ease, background 140ms ease;
}
.hap-play:hover { background: var(--signal); transform: translateY(-1px); }
.hap-play:active { transform: scale(0.97); }
.hap-play-ico {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--signal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  padding-left: 2px;
}
.hero-anim[data-state="idle"] .hap-play-ico { background: var(--signal); }
.hap-hint {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: -0.005em;
}

/* The red call-out cell on the poster underlay invites a tap */
.hero-anim[data-state="idle"] .ha-grid .ha-callout {
  /* Force the cell into the "called-out" visual state on the poster */
  background: #FEE2E2 !important;
  color: #B91C1C !important;
  box-shadow: inset 0 0 0 2px #DC2626 !important;
  cursor: pointer;
  z-index: 21;          /* above the poster blur */
  position: relative;
  text-indent: 0 !important;
  /* Pulse to attract the eye */
  animation: ha-poster-cell-pulse 2.2s ease-in-out infinite !important;
  animation-play-state: running !important;
  animation-delay: 0s !important;
}
@keyframes ha-poster-cell-pulse {
  0%, 100% { transform: scale(1);   box-shadow: inset 0 0 0 2px #DC2626, 0 0 0 0 rgba(220,38,38,0.5); }
  50%      { transform: scale(1.05); box-shadow: inset 0 0 0 2px #DC2626, 0 0 0 8px rgba(220,38,38,0); }
}
.hero-anim[data-state="idle"] .ha-grid .ha-callout::after {
  content: 'CHG' !important;
}

/* === Transport bar === */
.ha-transport {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--slate-200);
  background: var(--white);
  border-radius: 0 0 var(--r) var(--r);
  transition: opacity 200ms ease;
}
.hat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  border: 0;
  cursor: pointer;
  font-size: 11px;
  transition: background 140ms ease, transform 100ms ease;
  flex-shrink: 0;
}
.hat-btn:hover { background: var(--signal); }
.hat-btn:active { transform: scale(0.94); }
.hat-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.hat-ico-play { padding-left: 1px; }
.hat-ico-replay { font-size: 14px; }

.hat-scrub {
  position: relative;
  height: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.hat-scrub-track {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 4px;
  background: var(--slate-200);
  border-radius: 2px;
}
.hat-scrub-fill {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  height: 4px;
  width: calc(var(--ha-t, 0) * 100%);
  background: var(--signal);
  border-radius: 2px;
  pointer-events: none;
}
.hat-scrub-handle {
  position: absolute;
  top: 50%;
  left: calc(var(--ha-t, 0) * 100%);
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--signal);
  box-shadow: 0 2px 6px rgba(2,25,53,0.2);
  pointer-events: none;
}
.hat-caption {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-4);
  white-space: nowrap;
  letter-spacing: -0.005em;
}

/* === Step pills as clickable buttons === */
.ha-step {
  border: 0;
  background: var(--paper);
  cursor: pointer;
  font-family: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: background 160ms ease, color 160ms ease;
}
.ha-step:hover { background: var(--slate-100); color: var(--navy); }
.ha-step:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.ha-step:active { transform: scale(0.98); }

/* === Mobile adaptations === */
@media (max-width: 640px) {
  .hap-title { font-size: 16px; }
  .ha-transport { padding: 8px 12px 10px; gap: 10px; }
  .hat-caption { display: none; }
}

/* === Reduced motion: no autoplay, demo stays idle === */
@media (prefers-reduced-motion: reduce) {
  .ha-poster { animation: none; }
  .hap-eyebrow-dot, .ha-grid .ha-callout { animation: none !important; }
}

/* ===== Print ===== */
@media print {
  .nav, .footer, .hero-v2-actions, .nav-cta, .console-foot, .mv2-index { display: none; }
  body { background: #fff; }
  section { padding: 24px 0; }
  .hero-v2::before { display: none; }
  .console-grid .cg-cell.gap, .console-grid .cg-cell.live { animation: none; }
}