:root { --gutter: 18px; }

/* ============================================================
   home-v3.css — homepage data components
   ============================================================
   Loaded only by index.html, after styles.css / motion.css /
   motion-v2.css, so nothing here can affect the other 18 pages.

   Every colour below resolves to an existing brand token from
   styles.css (--bg, --card, --border, --primary, --accent-*).
   No new hues are introduced.
   ============================================================ */

/* Tighter rhythm than the site default (80px). The old homepage read as
   sparse because every band was 160px of padding around thin content. */
.section--tight { padding: 56px 0; }
.section-head--tight { margin-bottom: 32px; }

/* All numerals line up in columns. Inter ships tabular figures. */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---------- Live pulse dot ---------- */
.pulse-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-emerald);
  box-shadow: 0 0 0 0 hsl(153 80% 55% / 0.7);
  animation: uhPulse 2.4s ease-out infinite;
  flex: 0 0 auto;
}
@keyframes uhPulse {
  0%   { box-shadow: 0 0 0 0 hsl(153 80% 55% / 0.65); }
  70%  { box-shadow: 0 0 0 7px hsl(153 80% 55% / 0); }
  100% { box-shadow: 0 0 0 0 hsl(153 80% 55% / 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pulse-dot { animation: none; }
}

/* ---------- Hero eyebrow, live variant ---------- */
.eyebrow--live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* ---------- Hero ticker: newest rounds ---------- */
.ticker {
  position: relative;
  margin-top: 34px;
  overflow: hidden;
  /* Fade both edges so chips dissolve rather than getting chopped. A short
     fade still shows half-cut text at the boundary, so the ramp runs across a
     chip's full width (~160px) before it becomes opaque. */
  mask-image: linear-gradient(90deg, transparent 0, #000 170px, #000 calc(100% - 170px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 170px, #000 calc(100% - 170px), transparent 100%);
}
.ticker-track {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: uhTicker 46s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes uhTicker {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }
}
.ticker-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: hsl(230 40% 12% / 0.7);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s var(--ease-stripe-soft), background .2s var(--ease-stripe-soft), transform .2s var(--ease-stripe-soft);
}
.ticker-chip:hover {
  border-color: hsl(226 100% 65% / 0.45);
  background: hsl(226 100% 65% / 0.08);
  transform: translateY(-1px);
}
.ticker-chip .tk-name { color: var(--fg); font-weight: 600; }
.ticker-chip .tk-round { color: var(--fg-subtle); }
.ticker-chip .tk-amt { color: var(--accent-emerald); font-weight: 600; }

/* Marquee items are now real investor links, so kill the underline the base
   anchor style would add. Everything else inherits from motion-v2.css. */
a.marquee-item { text-decoration: none; }

/* ---------- Live market: two-column shell ---------- */
.live-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--gutter);
  align-items: stretch;
}
/* Right column stacks two panels and matches the table's height, so the row
   has no dead space at any breakpoint. */
.live-side {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  min-width: 0;
  height: 100%;
}
/* The score panel absorbs the leftover height instead of the sector list,
   because a taller histogram reads fine whereas sector bars pulled far apart
   stop looking like a single list. */
.panel--grow { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
/* Inside a stretched panel the bars/list should absorb the leftover height
   rather than leaving a dead band above the footer. */
.panel--grow > .sbars { flex: 1 1 auto; align-content: center; }
.hist-wrap {
  padding: 18px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
}

.panel {
  background: linear-gradient(180deg, hsl(230 35% 13%) 0%, hsl(230 38% 11%) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  min-width: 0;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  background: hsl(230 40% 14% / 0.5);
}
.panel-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.panel-meta {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  white-space: nowrap;
}

/* ---------- Rounds table ---------- */
.rt { width: 100%; border-collapse: collapse; }
.rt th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.rt td {
  padding: 12px 18px;
  border-bottom: 1px solid hsl(230 30% 18% / 0.55);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  vertical-align: middle;
}
.rt tbody tr:last-child td { border-bottom: 0; }
.rt tbody tr { transition: background .18s var(--ease-stripe-soft); }
.rt tbody tr:hover { background: hsl(226 100% 65% / 0.055); }
.rt .num { text-align: right; }
.rt th.num { text-align: right; }

.rt-co {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
/* Monogram stands in for a logo we do not have rights to. Deterministic
   colour per company so the column reads as a set, not as noise. */
.rt-mono {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg);
  background: hsl(var(--mono-h, 226) 55% 30%);
  border: 1px solid hsl(var(--mono-h, 226) 60% 45% / 0.5);
}
.rt-name {
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rt-name:hover { color: var(--primary); }
.rt-sub {
  display: block;
  font-size: 11px;
  color: var(--fg-subtle);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rt-round {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-muted);
  background: hsl(230 30% 20% / 0.8);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.rt-amt { color: var(--fg); font-weight: 650; white-space: nowrap; }

/* Score chip, banded on the same thresholds the product uses. */
.score-chip {
  display: inline-block;
  min-width: 42px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}
.score-chip.s90 { color: hsl(153 85% 72%); background: hsl(153 80% 55% / 0.14); border: 1px solid hsl(153 80% 55% / 0.32); }
.score-chip.s80 { color: hsl(226 100% 82%); background: hsl(226 100% 65% / 0.14); border: 1px solid hsl(226 100% 65% / 0.32); }
.score-chip.s70 { color: hsl(190 95% 76%); background: hsl(190 95% 60% / 0.12); border: 1px solid hsl(190 95% 60% / 0.28); }
.score-chip.s00 { color: var(--fg-subtle); background: hsl(230 30% 20% / 0.7); border: 1px solid var(--border); }

.panel-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--fg-subtle);
  background: hsl(230 40% 14% / 0.35);
}
.panel-foot a { color: var(--primary); font-weight: 600; text-decoration: none; }
.panel-foot a:hover { text-decoration: underline; }

/* ---------- Sector bars ---------- */
.sbars { padding: 16px 18px 18px; display: grid; gap: 14px; }
.sbar { display: grid; gap: 6px; min-width: 0; }
.sbar-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--text-xs);
}
.sbar-name {
  color: var(--fg-muted);
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.sbar-val { color: var(--fg); font-weight: 650; white-space: nowrap; flex: 0 0 auto; }
.sbar-rail {
  height: 6px;
  border-radius: 999px;
  background: hsl(230 30% 20% / 0.8);
  overflow: hidden;
}
.sbar-fill {
  /* Emitted as <i>, which is inline by default — without this the width is
     ignored entirely and every bar renders empty. */
  display: block;
  height: 100%;
  border-radius: 999px;
  width: 0;
  background: linear-gradient(90deg, var(--accent-cyan), var(--primary));
  transition: width 1.1s var(--ease-stripe);
}
.is-in .sbar-fill { width: var(--w, 0%); }
@media (prefers-reduced-motion: reduce) {
  .sbar-fill { transition: none; width: var(--w, 0%); }
}

/* ---------- Metric strip under the live grid ---------- */
.metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: 20px;
}
.metric {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: hsl(230 35% 12% / 0.6);
  min-width: 0;
}
.metric .m-val {
  font-size: var(--text-xl);
  font-weight: 750;
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.metric .m-lab {
  margin-top: 5px;
  font-size: var(--text-xs);
  color: var(--fg-subtle);
  line-height: 1.4;
}

/* ---------- Bento feature grid ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gutter);
}
.bento-card {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, hsl(230 35% 13%) 0%, hsl(230 38% 11%) 100%);
  box-shadow: var(--shadow-1);
  min-width: 0;
  transition: border-color .25s var(--ease-stripe-soft), transform .25s var(--ease-stripe-soft);
}
.bento-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.bento-card.span-2 { grid-column: span 2; }
.bento-card.span-4 { grid-column: span 4; }
.bento-head { display: flex; align-items: flex-start; gap: 13px; }
.bento-ico {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: hsl(226 100% 65% / 0.13);
  border: 1px solid hsl(226 100% 65% / 0.26);
  color: hsl(226 100% 78%);
}
.bento-ico svg { width: 17px; height: 17px; }
.bento-card--cyan    .bento-ico { background: hsl(190 95% 60% / 0.13); border-color: hsl(190 95% 60% / 0.26); color: hsl(190 95% 74%); }
.bento-card--violet  .bento-ico { background: hsl(252 80% 70% / 0.14); border-color: hsl(252 80% 70% / 0.28); color: hsl(252 85% 82%); }
.bento-card--emerald .bento-ico { background: hsl(153 80% 55% / 0.13); border-color: hsl(153 80% 55% / 0.26); color: hsl(153 80% 70%); }
.bento-card--amber   .bento-ico { background: hsl(42 100% 60% / 0.13); border-color: hsl(42 100% 60% / 0.28); color: hsl(42 100% 72%); }
.bento-t {
  font-size: var(--text-base);
  font-weight: 680;
  color: var(--fg);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.bento-d {
  margin-top: 4px;
  font-size: var(--text-sm);
  color: var(--fg-muted);
  line-height: 1.55;
}
.bento-viz { margin-top: auto; }

/* Score histogram */
.hist {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 100%;
  min-height: 82px;
}
.hist-bar {
  flex: 1 1 0;
  min-width: 0;
  min-height: 4px;
  border-radius: 3px 3px 0 0;
  height: 4px;
  background: linear-gradient(180deg, hsl(226 100% 65% / 0.85), hsl(226 100% 65% / 0.28));
  transition: height 1s var(--ease-stripe);
}
.hist-bar.is-top { background: linear-gradient(180deg, hsl(153 80% 60%), hsl(153 80% 45% / 0.35)); }
.is-in .hist-bar { height: var(--h, 4px); }
@media (prefers-reduced-motion: reduce) { .hist-bar { transition: none; height: var(--h, 4px); } }
.hist-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 10.5px;
  color: var(--fg-subtle);
  letter-spacing: .04em;
}

/* Ranked mini list (investors, hubs) */
.mini-list { display: grid; gap: 0; }
.mini-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 0;
  border-bottom: 1px solid hsl(230 30% 18% / 0.5);
  font-size: var(--text-sm);
  min-width: 0;
}
.mini-row:last-child { border-bottom: 0; }
.mini-rank {
  flex: 0 0 auto;
  width: 18px;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
}
.mini-name {
  color: var(--fg);
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
  text-decoration: none;
}
a.mini-name:hover { color: var(--primary); }
.mini-val {
  flex: 0 0 auto;
  font-size: var(--text-xs);
  font-weight: 650;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Inline proportional rail behind the ranked rows */
.mini-rail {
  flex: 0 0 62px;
  height: 5px;
  border-radius: 999px;
  background: hsl(230 30% 20% / 0.8);
  overflow: hidden;
}
.mini-rail i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-violet), var(--primary));
  transition: width 1s var(--ease-stripe);
}
.is-in .mini-rail i { width: var(--w, 0%); }
@media (prefers-reduced-motion: reduce) { .mini-rail i { transition: none; width: var(--w, 0%); } }

/* Chip cloud (sectors) */
.chip-cloud { display: flex; flex-wrap: wrap; gap: 7px; }
.cloud-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: hsl(230 30% 17% / 0.7);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  white-space: nowrap;
}
.cloud-chip b { color: var(--fg); font-weight: 650; }
.cloud-chip span { font-size: 10.5px; color: var(--fg-subtle); font-variant-numeric: tabular-nums; }

/* ---------- How it works: compact 4-step grid ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
  counter-reset: uhstep;
}
.step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, hsl(230 35% 13%) 0%, hsl(230 38% 11%) 100%);
  box-shadow: var(--shadow-1);
  min-width: 0;
  transition: border-color .25s var(--ease-stripe-soft), transform .25s var(--ease-stripe-soft);
}
.step:hover { border-color: hsl(226 100% 65% / 0.4); transform: translateY(-2px); }
.step-n {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: hsl(226 100% 78%);
}
.step-n i {
  width: 20px; height: 20px;
  border-radius: 6px;
  display: grid; place-items: center;
  background: hsl(226 100% 65% / 0.14);
  border: 1px solid hsl(226 100% 65% / 0.3);
  font-style: normal;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--text-lg); margin: 0; letter-spacing: -0.015em; }
.step p { font-size: var(--text-sm); color: var(--fg-muted); line-height: 1.55; margin: 0; }
.step-viz {
  margin-top: auto;
  padding: 12px;
  border-radius: var(--r);
  background: hsl(230 45% 8% / 0.75);
  border: 1px solid hsl(230 30% 18% / 0.75);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.75;
  color: var(--fg-muted);
  overflow: hidden;
}
.step-viz .vz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.step-viz .vz > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.step-viz b { color: var(--fg); font-weight: 650; }
.step-viz .up { color: var(--accent-emerald); font-weight: 650; white-space: nowrap; }
.step-viz .dim { color: var(--fg-subtle); }
.step-viz .key { color: hsl(226 100% 78%); }
/* Thin score rails inside step 3 */
.vz-rail {
  height: 4px;
  border-radius: 999px;
  background: hsl(230 30% 22% / 0.9);
  overflow: hidden;
  margin: 3px 0 7px;
}
.vz-rail i {
  display: block; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--primary));
  width: var(--w, 0%);
}

/* ---------- Advanced capabilities: tighter cards + micro viz ---------- */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}
.cap {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, hsl(230 35% 13%) 0%, hsl(230 38% 11%) 100%);
  box-shadow: var(--shadow-1);
  min-width: 0;
  transition: border-color .25s var(--ease-stripe-soft), transform .25s var(--ease-stripe-soft);
}
.cap:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.cap-top { display: flex; align-items: center; gap: 11px; }
.cap-ico {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: hsl(226 100% 65% / 0.13);
  border: 1px solid hsl(226 100% 65% / 0.26);
  color: hsl(226 100% 78%);
}
.cap-ico svg { width: 15px; height: 15px; }
.cap--cyan    .cap-ico { background: hsl(190 95% 60% / 0.13); border-color: hsl(190 95% 60% / 0.26); color: hsl(190 95% 74%); }
.cap--violet  .cap-ico { background: hsl(252 80% 70% / 0.14); border-color: hsl(252 80% 70% / 0.28); color: hsl(252 85% 82%); }
.cap--emerald .cap-ico { background: hsl(153 80% 55% / 0.13); border-color: hsl(153 80% 55% / 0.26); color: hsl(153 80% 70%); }
.cap--amber   .cap-ico { background: hsl(42 100% 60% / 0.13); border-color: hsl(42 100% 60% / 0.28); color: hsl(42 100% 72%); }
.cap--pink    .cap-ico { background: hsl(320 75% 70% / 0.13); border-color: hsl(320 75% 70% / 0.28); color: hsl(320 80% 80%); }
.cap h3 { font-size: var(--text-base); margin: 0; letter-spacing: -0.01em; line-height: 1.3; }
.cap p { font-size: var(--text-sm); color: var(--fg-muted); line-height: 1.55; margin: 0; }
/* Micro sparkline / bar row */
.cap-viz { margin-top: auto; padding-top: 4px; }
.spark { display: block; width: 100%; height: 30px; overflow: visible; }
.spark path { fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.microbars { display: flex; align-items: flex-end; gap: 4px; height: 30px; }
.microbars i {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 2px 2px 0 0;
  background: hsl(226 100% 65% / 0.45);
  height: var(--h, 30%);
}
.microbars i.hi { background: hsl(226 100% 68% / 0.9); }
.dotgrid { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.dotgrid i { aspect-ratio: 1; border-radius: 2px; background: hsl(230 30% 24% / 0.9); }
.dotgrid i.on { background: hsl(190 95% 60% / 0.75); }
.dotgrid i.hot { background: hsl(226 100% 66% / 0.95); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .live-grid { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-card, .bento-card.span-2, .bento-card.span-4 { grid-column: span 3; }
}
@media (max-width: 700px) {
  .section--tight { padding: 40px 0; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento-card, .bento-card.span-2, .bento-card.span-4 { grid-column: span 1; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .cap-grid { grid-template-columns: minmax(0, 1fr); }
  .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-head { flex-wrap: wrap; }
  /* Drop only the round-and-date column on phones. The amount raised is the
     most useful number in the row, so it stays. */
  .rt th:nth-child(2), .rt td:nth-child(2) { display: none; }
  .rt { table-layout: fixed; width: 100%; }
  .rt th, .rt td { padding-left: 12px; padding-right: 12px; }
  .rt th:nth-child(1), .rt td:nth-child(1) { width: auto; }
  .rt th:nth-child(3), .rt td:nth-child(3) { width: 76px; }
  .rt th:nth-child(4), .rt td:nth-child(4) { width: 62px; }
  .rt-amt { font-size: 13px; }
  .rt-name, .rt-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* "Unicorn Score" is too long for a phone column head; the chips below make
     the meaning obvious on their own. */
  .rt th:nth-child(4) { font-size: 0; }
  .rt th:nth-child(4)::after { content: 'Score'; font-size: 10px; letter-spacing: 0.08em; }
  .ticker { margin-top: 26px; }
  /* A 170px fade each side would swallow a 390px-wide viewport whole. */
  .ticker {
    mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%);
  }
}

/* ==================================================================
   Features page
   ------------------------------------------------------------------
   Loaded on every page that pulls home-v3.css, but nothing below is
   used by the homepage, so it can be read as a self-contained block.
   ================================================================== */

/* A sub-page hero sits under the nav rather than at the top of the
   document, so it needs less top air than the homepage hero. */
.hero--page { padding: 64px 0 44px; }
.hero--page h1 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.hero--page .lead { max-width: 64ch; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 18px;
}

/* Equal columns, for rows where neither side is the lead element. */
.live-grid--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Two-up bento (the Ask Ghillie row). */
.bento--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bento--2 .bento-card, .bento--2 .bento-card.span-2, .bento--2 .bento-card.span-4 { grid-column: span 1; }

/* ---------- Filter inventory list ---------- */
.flt-list { padding: 6px 0; }
.flt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) auto;
  align-items: baseline;
  gap: 14px;
  padding: 11px 18px;
  border-bottom: 1px solid hsl(230 30% 18% / 0.7);
  font-size: var(--text-xs);
}
.flt:last-child { border-bottom: 0; }
.flt-list--tight .flt { grid-template-columns: minmax(0, 1fr) auto; }
.flt-name {
  color: var(--fg);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flt-how { color: var(--fg-subtle); }
.flt-n { color: var(--fg-muted); white-space: nowrap; text-align: right; }
.flt-n b { color: var(--accent-cyan); font-weight: 650; }
.flt-free {
  color: var(--fg-subtle);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Outcome bars reuse .sbar but each outcome gets its own hue, because
   "shut down" sharing a colour with "acquired" would read as an error. */
.oc-emerald .sbar-fill { background: linear-gradient(90deg, hsl(153 80% 55%), hsl(153 70% 40%)); }
.oc-violet  .sbar-fill { background: linear-gradient(90deg, hsl(252 80% 70%), hsl(252 70% 52%)); }
.oc-amber   .sbar-fill { background: linear-gradient(90deg, hsl(42 100% 60%), hsl(28 90% 50%)); }

/* ---------- Score pillars ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gutter);
}
.pillar {
  position: relative;
  background: linear-gradient(180deg, hsl(230 35% 13%) 0%, hsl(230 38% 11%) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 18px 20px;
  min-width: 0;
  overflow: hidden;
  transition: border-color 0.24s var(--ease-stripe), transform 0.24s var(--ease-stripe);
}
.pillar:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.pillar-n {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--fg-subtle);
  margin-bottom: 12px;
}
.pillar-t {
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--fg);
  margin-bottom: 7px;
  line-height: 1.3;
}
.pillar-d {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--fg-muted);
  line-height: 1.55;
}
/* A thin accent rule that draws itself in on scroll — the only motion on
   the card, so it signals "eight parts of one system" without noise. */
.pillar-rail {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: hsl(230 30% 20% / 0.7);
}
.pillar-rail i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent-cyan);
  transition: width 0.9s var(--ease-stripe);
}
.is-in .pillar-rail i { width: 100%; }
.p-blue    .pillar-rail i, .p-blue    .pillar-n { color: hsl(226 100% 74%); }
.p-blue    .pillar-rail i { background: hsl(226 100% 65%); }
.p-cyan    .pillar-n { color: hsl(190 95% 72%); }
.p-cyan    .pillar-rail i { background: hsl(190 95% 60%); }
.p-violet  .pillar-n { color: hsl(252 85% 80%); }
.p-violet  .pillar-rail i { background: hsl(252 80% 70%); }
.p-emerald .pillar-n { color: hsl(153 80% 68%); }
.p-emerald .pillar-rail i { background: hsl(153 80% 55%); }
.p-amber   .pillar-n { color: hsl(42 100% 70%); }
.p-amber   .pillar-rail i { background: hsl(42 100% 60%); }
.p-pink    .pillar-n { color: hsl(320 75% 78%); }
.p-pink    .pillar-rail i { background: hsl(320 75% 70%); }
@media (prefers-reduced-motion: reduce) {
  .pillar-rail i { transition: none; width: 100%; }
}

/* ---------- Ghillie starter questions ---------- */
.qlist { padding: 6px 0; }
.qrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid hsl(230 30% 18% / 0.7);
  text-decoration: none;
  transition: background 0.2s var(--ease-stripe);
}
.qrow:last-child { border-bottom: 0; }
.qrow:hover { background: hsl(226 100% 65% / 0.06); }
.qmark {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: hsl(190 95% 74%);
  background: hsl(190 95% 60% / 0.13);
  border: 1px solid hsl(190 95% 60% / 0.26);
}
.qtext {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qgo { flex: 0 0 auto; color: var(--fg-subtle); font-size: 13px; transition: transform 0.2s var(--ease-stripe), color 0.2s; }
.qrow:hover .qgo { color: var(--primary); transform: translateX(3px); }

/* ---------- Coverage grid ---------- */
.cov-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}
/* Five cards into three columns: the first two take a wider share on the
   top row so the row does not end in an obvious gap. */
.cov-grid > .cov:nth-child(1) { grid-column: span 2; }
.cov {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px;
  min-width: 0;
  background: linear-gradient(180deg, hsl(230 35% 13%) 0%, hsl(230 38% 11%) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-decoration: none;
  overflow: hidden;
  transition: border-color 0.24s var(--ease-stripe), transform 0.24s var(--ease-stripe);
}
.cov::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--primary);
  opacity: 0.7;
}
.cov:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.cov-v {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--fg);
}
.cov-t {
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.cov-d {
  margin: 4px 0 0;
  font-size: var(--text-xs);
  color: var(--fg-muted);
  line-height: 1.55;
  flex: 1 1 auto;
}
.cov-go { font-size: var(--text-xs); font-weight: 600; color: var(--primary); }
.cov.bento-card--cyan::before    { background: var(--accent-cyan); }
.cov.bento-card--violet::before  { background: var(--accent-violet); }
.cov.bento-card--emerald::before { background: var(--accent-emerald); }
.cov.bento-card--amber::before   { background: var(--accent-amber); }
.cov.bento-card--cyan    .cov-v { color: hsl(190 95% 78%); }
.cov.bento-card--violet  .cov-v { color: hsl(252 85% 84%); }
.cov.bento-card--emerald .cov-v { color: hsl(153 80% 72%); }
.cov.bento-card--amber   .cov-v { color: hsl(42 100% 76%); }

.fresh-note {
  margin: 20px auto 0;
  max-width: 74ch;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--fg-subtle);
  line-height: 1.65;
}

/* ---------- Features page responsive ---------- */
@media (max-width: 1080px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cov-grid > .cov:nth-child(1) { grid-column: span 2; }
  .live-grid--even { grid-template-columns: minmax(0, 1fr); }
  .bento--2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .hero--page { padding: 40px 0 32px; }
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .cov-grid { grid-template-columns: minmax(0, 1fr); }
  .cov-grid > .cov:nth-child(1) { grid-column: span 1; }
  /* Three columns of filter metadata will not fit; drop the middle
     "how it works" column and keep the name plus the option count. */
  .flt { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px 14px; }
  .flt-how { display: none; }
  .btn-row .btn { width: 100%; justify-content: center; }
}

/* .accent was only ever wired up for the hero h1, so section headings that
   used it silently rendered plain white. */
.section-head h2 .accent,
.section-head--tight h2 .accent {
  background: linear-gradient(135deg, hsl(226 100% 70%), hsl(252 90% 75%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* Even out the two Ask Ghillie cards: the copy-only card was leaving a
   dead band above its code strip. */
.bento--2 .bento-card { display: flex; flex-direction: column; }
.bento--2 .bento-viz { margin-top: auto; }

/* ============================================================
   Vertical timeline — About / Our Journey
   One entry per year, rail on the left, dot per entry.
   ============================================================ */
.timeline{position:relative;padding-left:34px}
.timeline:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,hsl(226 100% 65% / .55),hsl(252 80% 70% / .35),var(--border))}
.tl-item{position:relative;margin-bottom:18px}
.tl-item:last-child{margin-bottom:0}
.tl-dot{position:absolute;left:-42px;top:18px;width:14px;height:14px;border-radius:50%;
  background:var(--primary);border:3px solid var(--bg);box-shadow:0 0 0 3px hsl(226 100% 65% / .14)}
.tl-item--now .tl-dot{background:var(--accent-emerald);box-shadow:0 0 0 3px hsl(153 80% 55% / .18)}
.tl-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:16px 20px;transition:border-color .3s var(--ease-stripe),transform .3s var(--ease-stripe)}
.tl-card:hover{border-color:var(--border-strong);transform:translateX(3px)}
.tl-item--now .tl-card{border-color:hsl(153 80% 55% / .32);background:hsl(153 60% 12% / .5)}
.tl-year{font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;color:var(--primary);
  font-variant-numeric:tabular-nums}
.tl-item--now .tl-year{color:var(--accent-emerald)}
.tl-card h3{margin:5px 0 7px;font-size:var(--text-base);letter-spacing:-.01em}
.tl-card p{margin:0;color:var(--fg-muted);font-size:var(--text-sm);line-height:1.6}
@media (max-width:700px){
  .timeline{padding-left:26px}
  .tl-dot{left:-33px;width:12px;height:12px}
  .tl-card{padding:14px 16px}
}

/* Three-up metric strip (Contact, Help Center, API rate limits).
   Kept as a modifier rather than an inline style so the mobile
   collapse below still wins. */
.metric-strip--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1080px){.metric-strip--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){.metric-strip--3{grid-template-columns:1fr}}

/* ---------- Hero button spacing ----------
   Rows of boxes (the metric strip) must never sit flush against the
   call-to-action buttons underneath them. */
.metric-strip + .btn-row,
.pill-row + .btn-row,
.fineprint + .btn-row { margin-top: 32px; }
.btn-row + .fineprint { margin-top: 4px; }
@media (max-width: 700px) {
  .metric-strip + .btn-row,
  .pill-row + .btn-row,
  .fineprint + .btn-row { margin-top: 24px; }
}