/* ============================================================
   Homepage (.h-*) — scoped styles ported from
   financialreports-design-system/project/example-home.html
   All hex literals translated to var(--fr-*) per
   docs/DESIGN_SYSTEM/migration.md translation rules.
   ============================================================ */

body { background: var(--fr-bg); color: var(--fr-text); font-family: var(--fr-font-sans); }

/* —— Section rhythm —— */
.h-section { border-top: 1px solid var(--fr-border); }
.h-section__inner {
  max-width: var(--fr-container-wide);
  margin: 0 auto;
  padding: 96px 32px;
}
.h-section--tight .h-section__inner { padding: 64px 32px; }
@media (max-width: 720px) {
  .h-section__inner { padding: 64px 20px; }
  .h-section--tight .h-section__inner { padding: 40px 20px; }
}

/* ============================================================
   HERO
   ============================================================ */
.h-hero {
  position: relative;
  /* No overflow clip here: it cropped the search autocomplete dropdown
     (.h-hero__search-results) whenever it extended past the hero's bottom
     edge. The globe visual is contained locally on .h-globe instead. */
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(var(--fr-brand-500-rgb), 0.10), transparent 60%),
    radial-gradient(800px 400px at 5% 100%, rgba(var(--fr-brand-500-rgb), 0.05), transparent 60%),
    var(--fr-bg);
  border-bottom: 1px solid var(--fr-border);
}
.h-hero__inner {
  max-width: var(--fr-container-wide);
  margin: 0 auto;
  padding: 96px 32px 112px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 48px;
  min-height: 600px;
}
@media (max-width: 980px) {
  .h-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 64px 20px 88px;
    min-height: auto;
  }
}
.h-hero__content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  width: 100%;
  text-align: left;
  display: grid;
  justify-items: start;
}

.h-hero__pulse {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--fr-border);
  border-radius: 999px;
  background: var(--fr-surface);
  font-family: var(--fr-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fr-text-muted);
  box-shadow: var(--fr-shadow-xs);
}
.h-hero__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fr-success-500);
  box-shadow: 0 0 0 0 rgba(var(--fr-success-500-rgb, 14, 138, 74), 0.5);
  animation: h-pulse 2.4s ease-out infinite;
}
@keyframes h-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--fr-success-500-rgb, 14, 138, 74), 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(var(--fr-success-500-rgb, 14, 138, 74), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--fr-success-500-rgb, 14, 138, 74), 0); }
}
.h-hero__pulse b { color: var(--fr-ink-900); font-weight: 600; letter-spacing: 0.04em; }

.h-hero h1 {
  /* Was 24px, spacing this from .h-hero__pulse. That pill is gone and
     .h-hero__content is display:grid (margins between grid items do NOT
     collapse), so the value became dead space above the headline. */
  margin: 0;
  font-family: var(--fr-font-sans);
  font-size: clamp(40px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: var(--fr-tracking-display);
  font-weight: 600;
  color: var(--fr-ink-900);
  text-wrap: balance;
}
.h-hero h1 em {
  font-family: var(--fr-font-serif);
  font-style: italic;
  font-weight: 500;
  color: var(--fr-brand-500);
  letter-spacing: -0.01em;
}
.h-hero__lede {
  margin: 24px 0 0;
  max-width: 56ch;
  font-size: 18px;
  line-height: 1.55;
  color: var(--fr-text-muted);
  text-wrap: pretty;
}
.h-hero__lede b { color: var(--fr-ink-900); font-weight: 500; }

/* Search */
.h-hero__search {
  margin-top: 36px;
  position: relative;
  max-width: 680px;
  width: 100%;
}
.h-hero__search input {
  width: 100%;
  height: 68px;
  padding: 0 156px 0 56px;
  font-family: var(--fr-font-sans);
  font-size: 17px;
  color: var(--fr-ink-900);
  background: var(--fr-surface);
  border: 1px solid var(--fr-border-strong);
  border-radius: 10px;
  box-shadow: var(--fr-shadow-sm);
  transition: border-color var(--fr-dur-fast), box-shadow var(--fr-dur-fast);
}
.h-hero__search input:focus {
  outline: none;
  border-color: var(--fr-brand-500);
  box-shadow: 0 0 0 4px rgba(var(--fr-brand-500-rgb), 0.12);
}
.h-hero__search input::placeholder { color: var(--fr-text-subtle); }
.h-hero__search-icon {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--fr-text-subtle);
}
.h-hero__search-btn {
  position: absolute; right: 10px; top: 10px;
  height: 48px; padding: 0 22px;
  background: var(--fr-brand-500); color: var(--fr-on-brand, #fff);
  border: 0; border-radius: 8px;
  font-family: var(--fr-font-sans); font-weight: 500; font-size: 14px;
  cursor: pointer;
  transition: background var(--fr-dur-fast);
}
.h-hero__search-btn:hover { background: var(--fr-brand-600); }
.h-hero__search-btn:active { background: var(--fr-brand-700); }
.h-hero__search-btn:focus-visible {
  outline: 2px solid var(--fr-brand-500);
  outline-offset: 2px;
}
@media (max-width: 480px) {
  .h-hero__search input {
    height: 56px;
    padding: 0 96px 0 48px;
    font-size: 16px;
  }
  .h-hero__search-icon { left: 16px; width: 18px; height: 18px; }
  .h-hero__search-btn {
    right: 6px; top: 6px;
    height: 44px; padding: 0 14px;
    font-size: 13px;
  }
}
.h-hero__search-results {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 4px);
  background: var(--fr-surface);
  border: 1px solid var(--fr-border);
  border-radius: 8px;
  box-shadow: var(--fr-shadow-md);
  max-height: 360px;
  overflow-y: auto;
  z-index: var(--fr-z-dropdown);
}
.h-hero__search-results[hidden],
.h-hero__search-results.hidden { display: none; }

/* Hero stats strip below search */
.h-hero__stats {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 32px;
  align-items: end;
}
@media (max-width: 600px) {
  .h-hero__stats { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
}
.h-hero__stat-num {
  font-family: var(--fr-font-mono);
  font-size: 24px;
  font-weight: 500;
  color: var(--fr-ink-900);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.h-hero__stat-label {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fr-text-muted);
  font-weight: 500;
}

/* ============================================================
   LIVE GLOBE (centered behind content, rotating)
   ============================================================ */
.h-globe {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
  /* Contain the globe here now that .h-hero no longer clips (so the search
     dropdown can overflow the hero); keeps the visual from bleeding out. */
  overflow: hidden;
}
.h-globe__stage {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1 / 1;
}
.h-globe__canvas {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.95;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 35%, #000 65%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 35%, #000 65%);
}
@media (max-width: 980px) {
  .h-globe { justify-items: center; }
  .h-globe__stage { width: min(420px, 72vw); margin: 0 auto; }
  .h-globe__canvas { opacity: 0.85; }
}

/* Mobile fallback overlay (used when WebGL not available or below 600px) */
.h-globe__fallback {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(var(--fr-brand-500-rgb), 0.06), transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(var(--fr-brand-500-rgb), 0.04), transparent 50%);
  border-radius: 50%;
}
.h-globe__fallback::before {
  content: ""; position: absolute; inset: 6%;
  border: 1px dashed var(--fr-border);
  border-radius: 50%;
  opacity: 0.6;
}

/* (The floating "Filings · today" counter was removed in the hero redesign.) */

/* ============================================================
   TICKER (recently indexed)
   ============================================================ */
.h-ticker {
  border-top: 1px solid var(--fr-border);
  border-bottom: 1px solid var(--fr-border);
  background: var(--fr-bg-subtle);
  overflow: hidden;
}
.h-ticker__head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 32px;
  border-bottom: 1px solid var(--fr-border);
  background: var(--fr-bg);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fr-text-muted);
  font-weight: 600;
}
.h-ticker__head b { color: var(--fr-ink-900); }
.h-ticker__head-hint {
  margin-left: auto;
  font-family: var(--fr-font-mono);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fr-text-subtle);
  font-weight: 400;
}
.h-ticker__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
@media (max-width: 720px) {
  .h-ticker__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
}
.h-ticker__track {
  display: flex; align-items: center; gap: 0;
  width: max-content;
  animation: h-ticker-scroll 90s linear infinite;
}
.h-ticker:hover .h-ticker__track { animation-play-state: paused; }
@keyframes h-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .h-ticker__track { animation: none; }
  .h-ticker__viewport { overflow-x: auto; }
}
.h-ticker__row {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-size: 13px;
  color: var(--fr-text-muted);
  text-decoration: none;
  white-space: nowrap;
  border-right: 1px solid var(--fr-border);
}
.h-ticker__row:hover { background: var(--fr-bg); color: var(--fr-ink-900); }
.h-ticker__row b { color: var(--fr-ink-900); font-weight: 500; }
.h-ticker__flag {
  font-family: var(--fr-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fr-text-subtle);
  background: var(--fr-bg);
  border: 1px solid var(--fr-border);
  border-radius: 3px;
  padding: 2px 5px;
}
.h-ticker__sep { color: var(--fr-border); }
.h-ticker__time { font-family: var(--fr-font-mono); font-size: 11px; color: var(--fr-text-subtle); }

/* ============================================================
   SECTION HEADER (shared)
   ============================================================ */
.h-shead { display: grid; gap: 14px; max-width: 720px; margin-bottom: 56px; }
.h-eyebrow {
  font-family: var(--fr-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fr-brand-500);
  font-weight: 600;
}
.h-h2 {
  margin: 0;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: var(--fr-tracking-display);
  font-weight: 600;
  color: var(--fr-ink-900);
  text-wrap: balance;
}
.h-h2 em { font-family: var(--fr-font-serif); font-style: italic; font-weight: 500; color: var(--fr-brand-500); }
.h-lede {
  font-size: 18px;
  line-height: 1.55;
  color: var(--fr-text-muted);
  text-wrap: pretty;
  max-width: 60ch;
}

/* ============================================================
   SPLIT — Free / Paid
   ============================================================ */
.h-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--fr-border);
}
@media (max-width: 880px) {
  .h-split { grid-template-columns: 1fr; }
}
.h-split__cell {
  padding: 80px 48px;
  display: grid; gap: 20px; align-content: start;
}
@media (max-width: 720px) { .h-split__cell { padding: 56px 24px; } }
.h-split__cell--free { background: var(--fr-bg); }
.h-split__cell--paid {
  background: var(--fr-pinned-ink);
  color: var(--fr-pinned-ink-text);
}
.h-split__num {
  font-family: var(--fr-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fr-text-muted);
  font-weight: 600;
}
.h-split__cell--paid .h-split__num { color: var(--fr-brand-400); }
.h-split__title {
  margin: 0;
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: var(--fr-tracking-display);
  font-weight: 600;
  color: var(--fr-ink-900);
  text-wrap: balance;
}
.h-split__cell--paid .h-split__title { color: var(--fr-pinned-ink-strong); }
.h-split__lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--fr-text-muted);
  max-width: 50ch;
}
.h-split__cell--paid .h-split__lede { color: var(--fr-pinned-ink-text); }
.h-split__list {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: grid; gap: 10px;
}
.h-split__list li {
  display: grid; grid-template-columns: 16px 1fr; gap: 10px;
  font-size: 14px; color: var(--fr-ink-700);
  align-items: baseline;
}
.h-split__cell--paid .h-split__list li { color: var(--fr-pinned-ink-text); }
.h-split__list li::before {
  content: "—"; color: var(--fr-brand-500); font-weight: 600;
}
.h-split__cell--paid .h-split__list li::before { color: var(--fr-brand-400); }
.h-split__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* ============================================================
   SPEED RACE
   ============================================================ */
.h-race { display: grid; gap: 16px; max-width: 880px; }
.h-race__row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 100px;
  align-items: center;
  gap: 24px;
}
@media (max-width: 720px) {
  .h-race__row { grid-template-columns: 110px 1fr 70px; gap: 12px; }
}
@media (max-width: 480px) {
  .h-race__row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 6px;
    align-items: baseline;
  }
  .h-race__label { grid-column: 1; grid-row: 1; }
  .h-race__time  { grid-column: 2; grid-row: 1; }
  .h-race__bar   { grid-column: 1 / -1; grid-row: 2; }
}
.h-race__label {
  font-family: var(--fr-font-mono);
  font-size: 13px;
  color: var(--fr-text-muted);
  letter-spacing: -0.01em;
}
.h-race__label.is-us { color: var(--fr-ink-900); font-weight: 600; }
.h-race__bar {
  height: 8px; background: var(--fr-bg-subtle);
  border-radius: 4px; overflow: hidden;
  position: relative;
}
.h-race__fill {
  height: 100%; background: var(--fr-ink-300);
  border-radius: 4px;
  width: 0;
  transition: width 1400ms var(--fr-ease);
}
.h-race__fill.is-us { background: linear-gradient(90deg, var(--fr-brand-500), var(--fr-brand-400)); }
.h-race__fill.is-loaded { width: max(calc(var(--fill, 1) * 100%), 12px); }
.h-race__time {
  font-family: var(--fr-font-mono);
  font-size: 13px;
  color: var(--fr-text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.h-race__time.is-us { color: var(--fr-brand-500); font-weight: 600; }
.h-race__caption {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px dashed var(--fr-border);
  font-size: 13px;
  color: var(--fr-text-muted);
  max-width: 60ch;
}
.h-race__caption b { color: var(--fr-ink-900); font-weight: 500; }

/* ============================================================
   MCP CARDS
   ============================================================ */
.h-mcp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 880px) { .h-mcp { grid-template-columns: 1fr; } }
.h-mcp__card {
  display: grid; gap: 8px;
  padding: 24px;
  background: var(--fr-surface);
  border: 1px solid var(--fr-border);
  border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: border-color var(--fr-dur-fast), transform var(--fr-dur-fast);
  align-content: start;
  min-height: 200px;
}
.h-mcp__card:hover {
  border-color: var(--fr-ink-400);
  transform: translateY(-2px);
}
.h-mcp__eyebrow {
  font-family: var(--fr-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fr-text-muted);
  font-weight: 600;
}
.h-mcp__title { margin: 0; font-size: 20px; font-weight: 600; color: var(--fr-ink-900); letter-spacing: -0.01em; }
.h-mcp__desc { margin: 0; font-size: 14px; line-height: 1.55; color: var(--fr-text-muted); }
.h-mcp__desc code {
  font-family: var(--fr-font-mono);
  font-size: 12px;
  background: var(--fr-bg-subtle);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--fr-ink-800);
}
.h-mcp__link {
  margin-top: auto;
  padding-top: 12px;
  font-size: 13px;
  color: var(--fr-brand-500);
  font-weight: 500;
}

/* ============================================================
   COVERAGE GRID
   ============================================================ */
.h-cov { display: grid; gap: 32px; }
.h-cov__top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
}
@media (max-width: 720px) {
  .h-cov__top { grid-template-columns: 1fr; }
}
.h-cov__legend {
  display: flex; gap: 18px;
  font-family: var(--fr-font-mono);
  font-size: 11px;
  color: var(--fr-text-muted);
  align-items: center;
}
.h-cov__legend span { display: inline-flex; align-items: center; gap: 6px; }
.h-cov__legend i {
  width: 10px; height: 10px; border-radius: 2px; display: inline-block;
}
/* Density scale in the section header legend */
.h-cov__legend-scale { display: inline-flex; gap: 3px; align-items: center; }

/* Region-grouped coverage directory (replaces the old 2-letter-code grid).
   Each covered market is a clickable pill linking to its companies LP. */
.h-cov__regions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px 32px;
}
.h-cov__region { display: grid; gap: 14px; align-content: start; }
.h-cov__region--wide { grid-column: 1 / -1; }

.h-cov__region-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--fr-border);
}
.h-cov__region-label {
  margin: 0;
  font-family: var(--fr-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fr-ink-900);
}
.h-cov__region-link {
  color: inherit;
  text-decoration: none;
  transition: color 120ms;
}
.h-cov__region-link:hover { color: var(--fr-brand-600); }
.h-cov__region-arrow {
  color: var(--fr-text-subtle);
  display: inline-block;
  transition: color 120ms, transform 120ms;
}
.h-cov__region-link:hover .h-cov__region-arrow {
  color: var(--fr-brand-600);
  transform: translateX(2px);
}
.h-cov__region-meta {
  font-family: var(--fr-font-mono);
  font-size: 11px;
  color: var(--fr-text-muted);
  font-variant-numeric: tabular-nums;
}

.h-cov__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.h-cov__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border: 1px solid var(--fr-border);
  border-radius: 999px;
  background: var(--fr-surface);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform var(--fr-dur-fast) var(--fr-ease),
              border-color var(--fr-dur-fast) var(--fr-ease),
              box-shadow var(--fr-dur-fast) var(--fr-ease);
}
.h-cov__chip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fr-brand-500);
  opacity: calc(var(--intensity, 0.04) * 0.55);
  pointer-events: none;
}
.h-cov__chip:hover {
  transform: translateY(-2px);
  border-color: var(--fr-brand-500);
  box-shadow: 0 6px 18px -10px rgba(var(--fr-brand-500-rgb), 0.5);
}
.h-cov__chip:focus-visible {
  outline: 2px solid var(--fr-brand-500);
  outline-offset: 2px;
}
.h-cov__chip-flag {
  position: relative;
  font-size: 15px;
  line-height: 1;
  width: 1.3em;
  text-align: center;
  flex: none;
}
.h-cov__chip-name {
  position: relative;
  font-family: var(--fr-font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fr-ink-900);
  white-space: nowrap;
}
.h-cov__chip-num {
  position: relative;
  font-family: var(--fr-font-mono);
  font-size: 11px;
  color: var(--fr-text-muted);
  font-variant-numeric: tabular-nums;
}
.h-cov__chip:hover .h-cov__chip-num { color: var(--fr-brand-500); }

@media (max-width: 600px) {
  .h-cov__regions { grid-template-columns: 1fr; gap: 22px; }
}

/* ============================================================
   MARKDOWN COMPARE
   ============================================================ */
.h-md {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
@media (max-width: 880px) { .h-md { grid-template-columns: 1fr; } }
.h-md__pane {
  border: 1px solid var(--fr-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--fr-surface);
  display: grid;
  grid-template-rows: auto 1fr;
}
.h-md__head {
  padding: 12px 18px;
  border-bottom: 1px solid var(--fr-border);
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--fr-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fr-text-muted);
}
.h-md__head b { color: var(--fr-ink-900); font-weight: 600; text-transform: none; letter-spacing: 0; font-family: var(--fr-font-sans); font-size: 13px; }
.h-md__body {
  margin: 0;
  padding: 20px 22px;
  font-family: var(--fr-font-mono);
  font-size: 12px;
  line-height: 1.65;
  color: var(--fr-ink-700);
  white-space: pre;
  overflow: auto;
}
.h-md__body--paid { background: var(--fr-bg-subtle); }
.h-md__body .tok-h { color: var(--fr-brand-500); font-weight: 600; }
.h-md__body .tok-t { color: var(--fr-ink-900); font-weight: 600; }
.h-md__body .tok-m { color: var(--fr-text-subtle); }

/* ============================================================
   CLOSING CTA
   ============================================================ */
.h-end {
  background: var(--fr-pinned-ink);
  color: var(--fr-pinned-ink-text);
  position: relative;
  overflow: hidden;
}
.h-end::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(800px 400px at 80% 0%, rgba(var(--fr-brand-500-rgb), 0.18), transparent 60%);
  pointer-events: none;
}
.h-end__inner {
  max-width: var(--fr-container-wide);
  margin: 0 auto;
  padding: 96px 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
}
@media (max-width: 880px) {
  .h-end__inner { grid-template-columns: 1fr; padding: 72px 24px; gap: 40px; }
}
.h-end__title {
  margin: 12px 0 0;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: var(--fr-tracking-display);
  font-weight: 600;
  color: var(--fr-pinned-ink-strong);
  text-wrap: balance;
}
.h-end__title em { font-family: var(--fr-font-serif); font-style: italic; font-weight: 500; color: var(--fr-brand-400); }
.h-end__lede {
  margin: 20px 0 28px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--fr-pinned-ink-text);
  max-width: 50ch;
}
.h-end__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.h-end .fr-btn--primary { background: var(--fr-pinned-ink-strong); color: var(--fr-pinned-ink); border-color: var(--fr-pinned-ink-strong); }
.h-end .fr-btn--primary:hover:not([disabled]) { background: var(--fr-brand-400); border-color: var(--fr-brand-400); color: var(--fr-pinned-ink-strong); }
.h-end__ghost {
  background: transparent; color: var(--fr-pinned-ink-strong);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 0 18px; height: 44px;
  display: inline-flex; align-items: center;
  border-radius: 8px;
  font-family: var(--fr-font-sans); font-size: 14px; font-weight: 500;
  text-decoration: none;
  transition: background var(--fr-dur-fast), border-color var(--fr-dur-fast);
}
.h-end__ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.5); }

.h-end__price {
  display: grid; gap: 14px;
  font-family: var(--fr-font-mono); font-size: 13px;
}
.h-end__price-row {
  display: flex; justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.h-end__price-row:last-child { border-bottom: 0; padding-bottom: 0; }
.h-end__price-row span:first-child { color: var(--fr-pinned-ink-subtle); }
.h-end__price-row span:last-child { color: var(--fr-pinned-ink-strong); font-weight: 500; }

/* ============================================================
   OFFERINGS — three-up strip
   ============================================================ */
.h-offer { background: var(--fr-bg-subtle); border-top: 1px solid var(--fr-border); border-bottom: 1px solid var(--fr-border); }
.h-offer__inner { max-width: var(--fr-container-wide); margin: 0 auto; padding: 96px 32px; }
.h-offer__head { margin-bottom: 56px; max-width: 720px; }
.h-offer__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--fr-border); border: 1px solid var(--fr-border); border-radius: 14px; overflow: hidden; box-shadow: var(--fr-shadow-sm); }
@media (max-width: 900px) { .h-offer__grid { grid-template-columns: 1fr; } }
.h-offer__card { display: grid; gap: 14px; background: var(--fr-surface); padding: 36px 32px 32px; text-decoration: none; color: var(--fr-text); transition: background var(--fr-dur-base) var(--fr-ease); position: relative; }
.h-offer__card:hover { background: var(--fr-bg-subtle); }
.h-offer__card.h-offer__card--accent { background: var(--fr-pinned-ink); color: var(--fr-pinned-ink-text); }
.h-offer__card.h-offer__card--accent:hover { background: var(--fr-pinned-ink); }
.h-offer__card.h-offer__card--accent h3,
.h-offer__card.h-offer__card--accent .h-offer__cta { color: var(--fr-pinned-ink-strong); }
.h-offer__card.h-offer__card--accent .h-offer__num { color: var(--fr-brand-400); }
.h-offer__card.h-offer__card--accent p,
.h-offer__card.h-offer__card--accent .h-offer__list li { color: var(--fr-pinned-ink-subtle); }
.h-offer__card.h-offer__card--accent .h-offer__list li::before { background: var(--fr-brand-400); }
.h-offer__num { font-family: var(--fr-font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--fr-text-muted); font-weight: 600; }
.h-offer__card h3 { font-size: 26px; font-weight: 600; color: var(--fr-ink-900); letter-spacing: -0.02em; margin: 0; }
.h-offer__card p { font-size: 14px; line-height: 1.55; color: var(--fr-text-muted); margin: 0; }
.h-offer__list { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; }
.h-offer__list li { font-family: var(--fr-font-mono); font-size: 12px; color: var(--fr-text-muted); padding-left: 16px; position: relative; }
.h-offer__list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 1px; background: var(--fr-brand-500); }
.h-offer__cta { margin-top: 12px; font-family: var(--fr-font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--fr-brand-500); font-weight: 500; }

/* ============================================================
   LOGO WALL
   ============================================================ */
.h-logos { background: var(--fr-bg-subtle); }
.h-logos__inner {
  max-width: var(--fr-container-wide);
  margin: 0 auto;
  padding: 72px 32px;
}
.h-logos__head { text-align: center; margin-bottom: 40px; }
.h-logos__eyebrow {
  font-family: var(--fr-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fr-text-muted);
  font-weight: 600;
}
.h-logos__grid {
  display: grid;
  /* minmax(0, 1fr) — NOT bare 1fr. Bare 1fr is minmax(auto, 1fr); the `auto`
     minimum is each cell's min-content (logo img max-width 140px + 48px cell
     padding = ~188px), so the columns refuse to shrink below 188px each and
     the grid stays ~417px wide on phones, forcing a horizontal page scroll
     (the section's ancestors don't clip). minmax(0, ...) lets tracks shrink. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid var(--fr-border);
  border-radius: var(--fr-radius-lg);
  background: var(--fr-bg);
  /* Deliberately no overflow:hidden — it clipped the upward-opening hover
     quotes (.h-logo__quote) of the top row. Outer corners are rounded
     per corner-cell below so the framed look is preserved without clipping. */
  /* Own stacking context, above the sibling .h-logos__head ("Customers"
     eyebrow). The upward-opening hover quotes are GPU-composited (transform +
     transition); without this, the middle-column quotes painted BEHIND the
     eyebrow and only their arrow showed. Lifting the whole grid fixes every
     column. */
  position: relative;
  z-index: 1;
}
@media (max-width: 800px) { .h-logos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.h-logo {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  padding: 24px;
  border-right: 1px solid var(--fr-border);
  border-bottom: 1px solid var(--fr-border);
  background: var(--fr-bg);
  transition: background var(--fr-dur-base) var(--fr-ease);
  cursor: pointer;
  text-decoration: none;
}
.h-logo:nth-child(4n) { border-right: 0; }
.h-logo:nth-last-child(-n+4) { border-bottom: 0; }
/* Round the four outer corner cells (4-column layout) so the framed look
   survives without overflow:hidden on the grid. */
.h-logo:first-child { border-top-left-radius: var(--fr-radius-lg); }
.h-logo:nth-child(4) { border-top-right-radius: var(--fr-radius-lg); }
.h-logo:nth-last-child(4) { border-bottom-left-radius: var(--fr-radius-lg); }
.h-logo:last-child { border-bottom-right-radius: var(--fr-radius-lg); }
@media (max-width: 800px) {
  .h-logo:nth-child(4n) { border-right: 1px solid var(--fr-border); }
  .h-logo:nth-child(2n) { border-right: 0; }
  .h-logo:nth-last-child(-n+4) { border-bottom: 1px solid var(--fr-border); }
  .h-logo:nth-last-child(-n+2) { border-bottom: 0; }
  /* Re-map outer corners for the 2-column layout. */
  .h-logo:nth-child(4) { border-top-right-radius: 0; }
  .h-logo:nth-last-child(4) { border-bottom-left-radius: 0; }
  .h-logo:nth-child(2) { border-top-right-radius: var(--fr-radius-lg); }
  .h-logo:nth-last-child(2) { border-bottom-left-radius: var(--fr-radius-lg); }
}
.h-logo__mark {
  font-family: var(--fr-font-sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fr-text-muted);
  transition: color var(--fr-dur-base) var(--fr-ease), filter var(--fr-dur-base) var(--fr-ease);
  display: flex; align-items: center; gap: 8px;
}
.h-logo__mark img {
  max-height: 32px;
  /* min(140px, 100%) so the logo never exceeds its cell once the grid tracks
     shrink below 188px on narrow viewports — desktop keeps the 140px cap. */
  max-width: min(140px, 100%);
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter var(--fr-dur-base) var(--fr-ease), opacity var(--fr-dur-base) var(--fr-ease);
}
.h-logo:hover { background: var(--fr-bg-subtle); }
.h-logo:hover .h-logo__mark { color: var(--fr-ink-900); }
.h-logo:hover .h-logo__mark img { filter: none; opacity: 1; }
.h-logo__quote {
  position: absolute;
  bottom: calc(100% - 4px); left: 50%;
  transform: translate(-50%, 8px);
  width: 280px;
  padding: 14px 16px;
  background: var(--fr-pinned-ink);
  color: var(--fr-pinned-ink-strong);
  border-radius: var(--fr-radius-md);
  font-family: var(--fr-font-serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fr-dur-base) var(--fr-ease), transform var(--fr-dur-base) var(--fr-ease);
  z-index: 5;
  box-shadow: var(--fr-shadow-lg);
}
.h-logo__quote::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--fr-pinned-ink);
}
.h-logo__quote-meta {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-family: var(--fr-font-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fr-pinned-ink-subtle);
  display: flex; justify-content: space-between;
}
.h-logo__quote-meta b { color: var(--fr-pinned-ink-strong); font-weight: 500; }
.h-logo:hover .h-logo__quote { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 960px) { .h-logo__quote { display: none; } }

/* Marquee row of professional logos */
.h-marquee {
  border-top: 1px solid var(--fr-border);
  padding: 36px 0 28px;
  overflow: hidden;
  margin-top: 56px;
  mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
}
@media (max-width: 720px) {
  .h-marquee {
    mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  }
}
.h-marquee__label {
  text-align: center;
  font-family: var(--fr-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fr-text-subtle);
  margin-bottom: 24px;
}
.h-marquee__track {
  display: flex; align-items: center; gap: 56px;
  width: max-content;
  animation: h-marquee-scroll 60s linear infinite;
}
.h-marquee__track--reverse { animation-direction: reverse; }
@keyframes h-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .h-marquee__track { animation: none; } }
.h-marquee__item {
  font-family: var(--fr-font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--fr-text-subtle);
  white-space: nowrap;
  opacity: 0.7;
}
.h-marquee__item img {
  max-height: 28px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.5;
  display: block;
}

/* ============================================================
   CASE STUDIES
   ============================================================ */
.h-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 960px) { .h-cases__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .h-cases__grid { grid-template-columns: 1fr; } }
.h-case {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--fr-border);
  border-radius: var(--fr-radius-lg);
  background: var(--fr-bg);
  overflow: hidden;
  text-decoration: none;
  transition: border-color var(--fr-dur-base) var(--fr-ease), transform var(--fr-dur-base) var(--fr-ease), box-shadow var(--fr-dur-base) var(--fr-ease);
}
.h-case:hover {
  border-color: var(--fr-ink-900);
  transform: translateY(-3px);
  box-shadow: var(--fr-shadow-md);
}
.h-case__art {
  aspect-ratio: 16 / 10;
  background: var(--fr-bg-subtle);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--fr-border);
}
.h-case__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h-case__body { padding: 22px 24px 26px; display: grid; gap: 8px; }
.h-case__eyebrow {
  font-family: var(--fr-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fr-text-muted);
  font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.h-case__eyebrow b { color: var(--fr-ink-900); font-weight: 600; }
.h-case__title {
  font-family: var(--fr-font-sans);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--fr-ink-900);
  line-height: 1.3;
  margin: 4px 0 0;
}
.h-case__metric {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--fr-font-mono);
  font-size: 12px;
  color: var(--fr-text-muted);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--fr-border);
}
.h-case__metric b {
  font-family: var(--fr-font-sans);
  font-size: 22px;
  font-weight: 500;
  color: var(--fr-brand-500);
  letter-spacing: -0.02em;
}
.h-case__link {
  margin-top: auto;
  font-family: var(--fr-font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--fr-brand-600);
}
.h-case:hover .h-case__link { color: var(--fr-brand-700); }
.h-cases__all { display: flex; justify-content: center; margin-top: 32px; }
.h-cases__all .h-case__link { font-size: 13px; }

/* ============================================================
   COVERAGE GRID — designed tooltip
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .h-cov__chip:hover { transform: none; }
}

/* ============================================================
   MOBILE OVERRIDES — hero overlap fixes <600px / <480px
   ============================================================ */
@media (max-width: 600px) {
  .h-hero h1 {
    font-size: clamp(34px, 8vw, 44px);
    line-height: 1.06;
    margin-top: 16px;
  }
  .h-hero__lede { font-size: 16px; margin-top: 18px; }
  .h-globe { display: none; }
  .h-hero__inner { min-height: auto; padding: 56px 20px 72px; }
}
@media (max-width: 480px) {
  .h-hero__search input {
    height: 60px;
    padding: 0 96px 0 44px;
    font-size: 15px;
  }
  .h-hero__search-icon { left: 16px; width: 18px; height: 18px; }
  .h-hero__search-btn {
    right: 8px; top: 8px;
    height: 44px; padding: 0 14px;
    font-size: 13px;
  }
  .h-hero__hint { font-size: 10px; }
}
@media (max-width: 380px) {
  .h-hero__stats { gap: 14px 10px; }
  .h-hero__stat-num { font-size: 20px; }
  .h-hero__stat-label { font-size: 10px; }
}

/* ============================================================
   HERO — company chips + the rotating document/figures panel
   Replaces the .hx-pipe "live trace" card. Everything here is
   real snapshot data, every element is a link, and unlike the
   card it replaced this survives below 600px.
   ============================================================ */

/* --- clickable company chips under the search box --- */
.h-hero__hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  /* Self-contained on purpose: the rule this replaced set a mono face and a
     2.57:1 colour that leaked into the chips through inheritance. */
  font-family: var(--fr-font-sans);
  font-size: 13px;
  letter-spacing: var(--fr-tracking-normal);
  color: var(--fr-text-muted);
}
.h-hero__hint-lead {
  /* was --fr-text-subtle (#9AA2B0) at 2.57:1 — below AA */
  color: var(--fr-text-muted);
  font-size: 13px;
  margin-right: 2px;
}
.h-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--fr-font-sans);
  gap: 7px;
  padding: 5px 12px 5px 7px;
  border: 1px solid var(--fr-border);
  border-radius: var(--fr-radius-pill);
  background: var(--fr-surface);
  color: var(--fr-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color var(--fr-dur-fast) var(--fr-ease),
              background var(--fr-dur-fast) var(--fr-ease),
              transform var(--fr-dur-fast) var(--fr-ease);
}
.h-chip:hover {
  border-color: var(--fr-brand-500);
  background: var(--fr-brand-50);
  transform: translateY(-1px);
}
.h-chip:focus-visible {
  outline: 2px solid var(--fr-brand-500);
  outline-offset: 2px;
}
/* The box is load-bearing, not decorative: logos arrive as wordmarks,
   symbols and squares at wildly different aspect ratios. Normalising
   them into one bordered square is what keeps the row aligned. */
.h-chip__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  padding: 2px;
  overflow: hidden;
  border: 1px solid var(--fr-border);
  border-radius: var(--fr-radius-xs);
  background: var(--fr-ink-0);
  font-family: var(--fr-font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--fr-text-muted);
}
.h-chip__mark img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* --- support line + API door (restored from the approved P2 layout) --- */
.h-hero__support {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Top, not bottom: grid items do not collapse margins, so a bottom margin
     here stacked with .h-hero__search's margin-top and left this line with
     no space above it at all. */
  margin: 20px 0 0;
  font-size: 14px;
  color: var(--fr-text-muted);
}
.h-hero__support-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fr-brand-500);
}
/* The only route to the paid product above the fold. The nav's own API button
   is `hidden sm:inline-flex`, so below 640px this is it — it must never be
   hidden at a breakpoint. */
.h-hero__door {
  margin: 16px 0 0;
  font-size: 13.5px;
  color: var(--fr-text-muted);
}
.h-hero__door a {
  color: var(--fr-brand-500);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.h-hero__door a:hover { border-bottom-color: transparent; }
.h-hero__door a:focus-visible { outline: 2px solid var(--fr-brand-500); outline-offset: 2px; }

/* --- the panel --- */
.h-heropanel {
  width: 100%;
  max-width: 480px;
  margin-left: auto;
}
.h-doccard {
  border: 1px solid var(--fr-border);
  border-radius: var(--fr-radius-lg);
  background: var(--fr-surface);
  overflow: hidden;
}
.h-doccard__id {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--fr-border);
  background: var(--fr-bg-subtle);
  text-decoration: none;
  color: inherit;
}
.h-doccard__id:hover .h-doccard__co { color: var(--fr-brand-500); }
.h-doccard__id:focus-visible { outline: 2px solid var(--fr-brand-500); outline-offset: -2px; }
.h-doccard__mark { width: 30px; height: 30px; font-size: 9px; border-radius: var(--fr-radius-sm); }
.h-doccard__co { display: block; font-size: 14px; font-weight: 600; letter-spacing: var(--fr-tracking-tight); }
.h-doccard__sub { display: block; font-size: 11.5px; color: var(--fr-text-muted); margin-top: 1px; }

.h-doccard__row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.h-doccard__row + .h-doccard__row { border-top: 1px solid var(--fr-border); }
.h-doccard__row--nums { display: block; }
.h-doccard__doc { min-width: 0; }
.h-doccard__title {
  display: block;
  font-size: 14px;
  font-weight: 550;
  color: var(--fr-brand-500);
  text-decoration: none;
  letter-spacing: var(--fr-tracking-tight);
}
.h-doccard__title:hover { text-decoration: underline; }
.h-doccard__title:focus-visible { outline: 2px solid var(--fr-brand-500); outline-offset: 2px; }
.h-doccard__meta {
  display: block;
  font-family: var(--fr-font-mono);
  font-size: 10px;
  color: var(--fr-text-muted);
  letter-spacing: var(--fr-tracking-wide);
  margin-top: 3px;
}
.h-doccard__eyebrow {
  display: block;
  font-family: var(--fr-font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: var(--fr-tracking-caps);
  color: var(--fr-text-muted);
  margin-bottom: 9px;
}

/* A report cover, drawn rather than photographed. Legible at 86px because
   it carries three things; a real photographic cover is not. */
.h-cover {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 66px;
  aspect-ratio: 3 / 4;
  padding: 9px 8px;
  border: 1px solid var(--fr-border-strong);
  border-radius: var(--fr-radius-xs);
  background: var(--fr-ink-0);
}
.h-cover__brand {
  font-family: var(--fr-font-mono);
  font-size: 6.5px;
  text-transform: uppercase;
  letter-spacing: var(--fr-tracking-caps);
  color: var(--fr-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.h-cover__rule { display: block; height: 1px; background: var(--fr-border); margin: 5px 0; }
/* Filing-type names vary wildly in length — "10-K" through "Major Shareholding
   Notification". The cover is a fixed 66px box, so the label has to survive the
   long end without spilling past the page edge: clamp to three lines, let long
   single words break, and scale the type down slightly so three lines fit. */
.h-cover__type {
  font-family: var(--fr-font-serif);
  font-size: 10px;
  line-height: 1.15;
  color: var(--fr-ink-900);
  letter-spacing: var(--fr-tracking-tight);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  hyphens: auto;
  min-width: 0;
}

.h-nums { margin: 0; display: grid; gap: 5px; }
.h-nums__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.h-nums__row dt { font-size: 12.5px; color: var(--fr-text-muted); }
.h-nums__row dd {
  margin: 0;
  font-family: var(--fr-font-mono);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fr-ink-900);
}
.h-nums__row dd.is-neg { color: var(--fr-danger-500); }

/* --- rotation: CSS only, no scheduler, no fetch --- */
/* Items share one grid cell so the container sizes to the tallest card and
   nothing jumps as it cycles. --h-rot-n is set inline from the template. */
.h-rot { display: grid; }
.h-rot__item {
  grid-area: 1 / 1;
  opacity: 0;
  /* An opacity-0 card still receives clicks and still holds its links in the
     tab order. Because all six share one grid cell, the LAST one in DOM order
     sat on top and swallowed every click — so every card led to the last
     company's filing regardless of what was on screen. `visibility` fixes the
     tab order, `pointer-events` fixes the clicks; both animate so they flip
     with the card instead of needing a JS class toggle. */
  visibility: hidden;
  pointer-events: none;
  animation: h-rot-cycle calc(var(--h-rot-n, 6) * 4s) infinite;
  animation-delay: calc(var(--i) * 4s);
}
/* visibility and pointer-events are DISCRETE: between two keyframes that
   declare them, the value flips at the 50% midpoint, not at the second
   keyframe. Declaring them only at 0% and 16.6% therefore made the card
   un-clickable from 8.3% — about 2 seconds into a 4-second slot — which read
   as "the link works for a moment, then stops". They must be declared on
   EVERY keyframe so each interval has matching endpoints and nothing flips
   early. */
@keyframes h-rot-cycle {
  0%     { opacity: 0; transform: translateY(6px);  visibility: visible; pointer-events: auto; }
  1.4%   { opacity: 1; transform: translateY(0);    visibility: visible; pointer-events: auto; }
  15.2%  { opacity: 1; transform: translateY(0);    visibility: visible; pointer-events: auto; }
  16.6%  { opacity: 0; transform: translateY(-6px); visibility: hidden;  pointer-events: none; }
  100%   { opacity: 0; transform: translateY(-6px); visibility: hidden;  pointer-events: none; }
}
.h-rot__track { display: flex; gap: 4px; margin-top: 12px; }
.h-rot__tick {
  position: relative;
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: var(--fr-border);
  overflow: hidden;
}
.h-rot__tick::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fr-brand-500);
  transform: scaleX(0);
  transform-origin: left;
  animation: h-rot-tick calc(var(--h-rot-n, 6) * 4s) infinite;
  animation-delay: calc(var(--i) * 4s);
}
@keyframes h-rot-tick {
  0%    { transform: scaleX(0); }
  16.6% { transform: scaleX(1); }
  100%  { transform: scaleX(1); }
}

/* Local guard rather than relying on the global !important blanket in
   tokens.css, so the fallback stays correct if that bundle ever changes. */
@media (prefers-reduced-motion: reduce) {
  /* Same click/tab-order trap as the animated path: without visibility and
     pointer-events the five hidden cards still swallow clicks. */
  .h-rot__item { animation: none; opacity: 0; transform: none; visibility: hidden; pointer-events: none; }
  .h-rot__item:first-child { opacity: 1; visibility: visible; pointer-events: auto; }
  .h-rot__tick::after { animation: none; transform: scaleX(0); }
  .h-rot__tick:first-child::after { transform: scaleX(1); }
  .h-chip { transition: none; }
  .h-chip:hover { transform: none; }
}

@media (max-width: 980px) {
  .h-heropanel { margin-left: 0; }
}
@media (max-width: 600px) {
  /* Deliberately NOT display:none. The card this replaced vanished here,
     which left phones with no route to the product above the fold. */
  .h-heropanel { max-width: none; }
  .h-doccard__row { padding: 13px; gap: 12px; }
  .h-cover { width: 56px; }
}