/* Passu v2 — editorial / Rogo-inspired layout.
   Bigger, calmer, more whitespace; serif display type for emphasis;
   photographic dark bands as section transitions; cards with airier
   padding; centered hero with floating product-input mock below.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;1,8..60,400&display=swap');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--foreground); color: var(--background); }

:root {
  --serif: 'Source Serif 4', 'Iowan Old Style', 'Charter', 'Cambria', Georgia, serif;
  /* Rogo-scale vertical rhythm (rogo.ai runs 96–196px section padding). */
  /* One gap between every main section: 56px bottom + 56px top = 112px. */
  --section-py: 56px;
  --section-py-sm: 56px;
  --section-py-lg: 96px;
  --container: 1240px;
  --container-px: 32px;
  /* Rogo-monochrome neutrals (override tokens.css without editing it). */
  --background: #ffffff;
  --foreground: #151515;
  --card: #ffffff;
  --muted-foreground: #737373;
  --band: #f7f7f7;
  --band-deep: #eeedec;
  --hairline: rgba(168, 162, 158, 0.2);
  /* THE one color moment: the dark forest-green pillar family. */
  --brand: #0e5a3c;
  /* Navy tint matching the pillar-vignette highlights. */
  --brand-soft: rgba(39, 64, 92, 0.1);
  --status-success-fg: #0e5a3c;
}

/* ─── Announcement bar ───────────────────────────── */
.announce-bar {
  background: var(--foreground);
  color: color-mix(in oklab, var(--background) 88%, transparent);
  font-size: 13px;
  z-index: 60;
}
.announce-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 17px var(--container-px); text-align: center;
  line-height: 1;
}
.announce-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px color-mix(in oklab, #4ade80 25%, transparent);
}
.announce-link {
  color: var(--background); font-weight: 400;
  text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center; gap: 4px;
}

/* ─── Nav ────────────────────────────────────────── */
.nav-wrap {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  background: color-mix(in oklab, var(--background) 80%, transparent);
  border-bottom: 1px solid transparent;
  transition: background 0.28s ease, backdrop-filter 0.28s ease, border-color 0.2s ease;
}
.nav-wrap.scrolled { border-bottom-color: var(--border); }

/* ─── Transparent nav while over the dark hero video ─── */
.nav-wrap:not(.scrolled) {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
/* Light content over the dark hero */
.nav-wrap:not(.scrolled) .nav-links a,
.nav-wrap:not(.scrolled) .btn-ghost {
  color: #ffffff;
}
.nav-wrap:not(.scrolled) .logo-wordmark {
  filter: brightness(0) invert(1);
}
/* Inverted "Get Started" over the hero: white button, black text.
   Reverts to the default dark button once .scrolled kicks in. */
.nav-wrap:not(.scrolled) .btn-primary {
  background: #ffffff;
  color: #05070c;
  border-color: #ffffff;
}
.nav-wrap:not(.scrolled) .btn-primary:hover {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.88);
}
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--container-px); }
.nav {
  height: 68px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav-right { justify-self: end; display: flex; align-items: center; gap: 12px; }
.nav-brand { cursor: pointer; }
.nav-brand .logo-wordmark { height: 28px; width: auto; display: block; }
.nav-links {
  display: flex; align-items: center; gap: 32px;
  font-size: 14px; color: var(--foreground); font-weight: 400;
}
.nav-links a { color: var(--foreground); transition: opacity 0.15s ease; }
.nav-links a:hover { opacity: 0.6; }

/* ─── Buttons ────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500;
  padding: 0 13px; height: 40px;
  border-radius: 5px;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--foreground); color: var(--background); border-color: var(--foreground); }
.btn-primary:hover { background: color-mix(in oklab, var(--foreground) 90%, transparent); }
.btn-ghost:hover { opacity: 0.6; }
.btn-lg { height: 48px; padding: 0 18px; font-size: 15px; border-radius: 5px; }
.btn .arrow { transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ─── Hero ───────────────────────────────────────── */
.hero {
  padding: 120px 0 80px;
  text-align: center;
}
.hero-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 var(--container-px);
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}

/* ─── Dark video hero background (Rogo-style) ─────── */
.hero--video {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #05070c;
  /* Pull the hero up so its video sits behind the (transparent) nav bar */
  margin-top: -68px;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
/* Dark gradient wash for legibility + editorial mood */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(5, 7, 12, 0.24) 0%,
      rgba(5, 7, 12, 0.36) 45%,
      rgba(5, 7, 12, 0.64) 100%),
    radial-gradient(120% 80% at 50% 30%,
      rgba(5, 7, 12, 0.02) 0%,
      rgba(5, 7, 12, 0.26) 100%);
}
.hero--video .hero-inner {
  position: relative;
  z-index: 2;
}
/* Drag-to-reposition readout (preview/design mode only) */
.hero-drag-readout {
  position: absolute;
  top: 88px;
  right: 20px;
  z-index: 3;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(5, 7, 12, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 6px 12px;
  backdrop-filter: blur(6px);
  pointer-events: none;
  user-select: none;
}
.hero--video:active { cursor: grabbing; }
/* Flip hero type to light so it reads over the dark video */
.hero--video .display,
.hero--video .display em {
  color: #ffffff;
}
/* Keep "Credit research, supercharged" on one line (wraps naturally
   only if the viewport is too narrow). */
.hero--video .display { max-width: none; }
.hero--video .lede {
  color: rgba(255, 255, 255, 0.82);
}
/* Inverted "Request Early Access" button over the hero: white / black */
.hero--video .btn-primary {
  background: #ffffff;
  color: #05070c;
  border-color: #ffffff;
}
.hero--video .btn-primary:hover {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.88);
}
.hero--video .gloss {
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.86) 0%,
    rgba(255, 255, 255, 0.86) 38%,
    #ffffff 50%,
    rgba(255, 255, 255, 0.86) 62%,
    rgba(255, 255, 255, 0.86) 100%
  );
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero--video { background: #05070c center/cover no-repeat; }
}
.display {
  font-family: var(--serif);
  font-size: clamp(48px, 7.2vw, 96px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--foreground);
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}
.display em {
  font-style: italic;
  color: var(--foreground);
  font-weight: 400;
}

/* Glossy pulse sweep across the highlighted hero word */
.gloss {
  background-image: linear-gradient(
    100deg,
    var(--foreground) 0%,
    var(--foreground) 38%,
    rgba(255, 255, 255, 0.92) 50%,
    var(--foreground) 62%,
    var(--foreground) 100%
  );
  background-size: 240% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gloss-sweep 4.2s ease-in-out infinite;
}
@keyframes gloss-sweep {
  0%       { background-position: 100% 0; }
  55%      { background-position: -10% 0; }
  100%     { background-position: -10% 0; }
}
.lede {
  font-size: 19px;
  line-height: 1.5;
  color: var(--muted-foreground);
  max-width: 56ch;
  margin: 0;
  text-wrap: balance;
}
/* Pre-polish hero lede size (was supplied by the retired styles.css) */
.hero .lede {
  font-size: 16px;
}

/* ════════════════════════════════════════════════════════════════
   BELOW THE HERO — clean white body, one restrained blue accent,
   hairline borders, soft floating shadows, generous whitespace.
   ════════════════════════════════════════════════════════════════ */

/* Shared section heading spec — one size for every section H2,
   sized between the old pillars run-on (26-36) and statement
   headings (34-52). */
.pillars-head h2,
.carousel-head h2,
.sec-head h2,
.reviews-head h2 {
  font-family: var(--serif);
  font-size: clamp(25px, 2.9vw, 34px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--foreground);
  margin: 18px 0 0;
  text-wrap: balance;
}
.pillars-head h2 em,
.sec-head h2 em { font-style: italic; }

@keyframes caret-blink { 50% { opacity: 0; } }

/* ─── 1 · Pillars trio ───────────────────────────── */
.pillars {
  /* Section 2 · Platform Overview. Extra top padding for the hand-off
     from the dark hero (Section 1) into the white body; bottom keeps
     the uniform section rhythm. */
  padding: 96px 0 var(--section-py-sm);
  background: var(--background);
}
.pillars-head { max-width: 1040px; margin-bottom: 28px; }
/* Two-tone run-on headline in the site serif: dark statement,
   light-grey support sentence continuing on the same lines.
   Shared by the pillars and carousel section heads. */
.pillars-head h2,
.carousel-head h2 {
  font-size: clamp(25px, 2.9vw, 34px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: pretty;
}
.pillars-head h2 strong,
.carousel-head h2 strong {
  font-weight: 500;
  color: var(--foreground);
}
.pillars-head h2 span,
.carousel-head h2 span { color: #8f8f8b; }
.carousel-head > div:first-child { max-width: 880px; }
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.pillar { min-width: 0; }
/* Dark-navy graphic card holding a small clean UI vignette
   (rogo.ai-style). Navy is sampled from the daytime hero video's
   glass-blue family (hue ~212), deepened to card depth. */
.pillar-card {
  background: #132233;
  border-radius: 8px;
  min-height: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 28px;
}
.pillar h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 24px 0 8px;
  color: var(--foreground);
  text-wrap: balance;
}
.pillar p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted-foreground);
  margin: 0;
  text-wrap: pretty;
}

/* ── Pillar vignettes (pv-*): minimal white UI cards on the navy ── */
.pv {
  width: 100%;
  max-width: 264px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pv-chip {
  width: fit-content;
  background: #ffffff;
  border-radius: 8px;
  padding: 9px 13px;
  font-size: 12px;
  font-weight: 500;
  color: #1d2733;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.pv-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 14px 14px 13px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.pv-card-head {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: #8a8e94;
  font-weight: 500;
}
.pv-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: #2c2e32;
  white-space: nowrap;
}
.pv-tick {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  font-weight: 600;
  color: #27405c;
  background: rgba(39, 64, 92, 0.08);
  border-radius: 4px;
  padding: 2px 5px;
}
.pv-tag {
  margin-left: auto;
  font-size: 9.5px;
  color: #9a9da3;
}
.pv-tag.hl { color: #27405c; font-weight: 600; }
.pv-src {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 500;
  color: #1d2733;
}
.pv-srcdot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #27405c;
}
/* Real filing / answer micro-copy inside the vignettes. */
.pv-text {
  display: block;
  font-size: 10.5px;
  line-height: 1.5;
  color: #2c2e32;
  text-wrap: pretty;
}
.pv-text.hl {
  background: rgba(39, 64, 92, 0.12);
  border-radius: 3px;
  padding: 0 3px;
  color: #14293f;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Citations vignette: filing panel with a navy metric callout
   floating over its corner (distinct from the chip+list card in the
   Unified Platform pillar beside it). */
.pv-citescene { position: relative; padding-top: 16px; }
.pv-callout {
  position: absolute;
  top: 0;
  right: -10px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  background: #ffffff;
  border: 1px solid #e7e9ec;
  border-radius: 8px;
  padding: 8px 12px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.16);
}
.pv-callout .pvm-label { font-size: 10px; font-weight: 500; color: #8a8e94; letter-spacing: 0.02em; }
.pv-callout .pvm-val { font-size: 15px; font-weight: 600; color: #1d2733; }
.pv-mid { opacity: 0.62; }
.pv-dim { opacity: 0.45; }
.pv-panel {
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.pv-panel-head {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #55606e;
  background: #f2f4f6;
  border-bottom: 1px solid #e7e9ec;
  padding: 7px 12px;
}
.pv-panel-body { padding: 11px 12px 12px; display: flex; flex-direction: column; gap: 7px; }
.pv-mark {
  background: rgba(39, 64, 92, 0.14);
  border-radius: 3px;
  padding: 0 3px;
  color: #14293f;
  font-weight: 600;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.pv-citerow { display: flex; align-items: center; gap: 8px; }
.pv-cite {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 600;
  color: #27405c;
  background: rgba(39, 64, 92, 0.09);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}
.pv-doc {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #ffffff;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 10.5px;
  color: #2c2e32;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.pv-doc svg { flex-shrink: 0; color: #8a8e94; }
.pv-doc-open {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 600;
  color: #27405c;
}
@media (max-width: 900px) {
  .pillars-grid { grid-template-columns: 1fr; }
  .pillar-card { min-height: 280px; }
}

/* ─── 2 · Capability carousel (Stripe-style) ─────── */
.prod-carousel {
  /* 20px top is a deliberate continuation of the pillars section. */
  padding: var(--section-py) 0;
  background: var(--background);
  overflow: hidden;
}
.carousel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.carousel-nav { display: flex; gap: 8px; padding-bottom: 6px; }
.cnav-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--background);
  color: var(--foreground);
  transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.cnav-btn:hover:not(:disabled) {
  border-color: color-mix(in oklab, var(--foreground) 28%, transparent);
}
.cnav-btn:disabled { opacity: 0.3; cursor: default; }

.carousel-rail {
  --rail-gutter: max(var(--container-px), calc((100% - var(--container)) / 2 + var(--container-px)));
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--rail-gutter);
  padding: 8px var(--rail-gutter) 40px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Hard clip at the container edges so scrolling cards appear and
     disappear at the content boundary, matching the reviews belt and
     the page's contained width. */
  mask-image: linear-gradient(90deg, transparent calc(var(--rail-gutter) - 1px), #000 var(--rail-gutter), #000 calc(100% - var(--rail-gutter)), transparent calc(100% - var(--rail-gutter) + 1px));
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--rail-gutter) - 1px), #000 var(--rail-gutter), #000 calc(100% - var(--rail-gutter)), transparent calc(100% - var(--rail-gutter) + 1px));
}
.carousel-rail::-webkit-scrollbar { display: none; }

/* Light card, Rogo-reference layout: serif title top, centered
   symbolic graphic, grey description bottom. */
.pcard {
  flex: 0 0 auto;
  width: 360px;
  min-height: 430px;
  scroll-snap-align: start;
  background: #f7f7f7;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background 0.2s ease;
}
.pcard:hover {
  background: #f2f2f0;
}
.pcard-visual {
  flex: 1;
  min-height: 210px;
  display: grid;
  place-items: center;
  padding: 28px 26px 20px;
}
.pcard-body { padding: 0 26px 28px; }
/* Kickers removed 2026-07-04 (Kelly): titles carry the cards alone. */
.pcard-kicker {
  display: none;
}
.pcard h3 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: 0 0 10px;
  color: var(--foreground);
  text-wrap: balance;
}
.pcard p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted-foreground);
  margin: 0;
  text-wrap: pretty;
  /* Reserve three lines on every card so all titles and descriptions
     sit at the same y; three-line cards are unchanged. */
  min-height: calc(1.55em * 3);
}

/* ── Symbolic card graphics (sym-*): minimalist geometry, one navy
   accent (#27405c), rare semantic dots. ── */
/* Earnings: report with a highlighted line, metrics extracted out */
.sym-report { display: flex; align-items: center; gap: 12px; }
.sym-report .rep-doc { width: 64px; height: 82px; border: 1px solid #c9cdd4; border-radius: 7px; background: #ffffff; padding: 13px 10px; display: flex; flex-direction: column; gap: 8px; }
.sym-report .rep-doc span { height: 4px; border-radius: 2px; background: #d7dade; }
.sym-report .rep-doc span.hl { background: #27405c; width: 68%; }
.sym-report .rep-flow { display: flex; gap: 4px; }
.sym-report .rep-flow span { width: 3px; height: 3px; border-radius: 50%; background: #8ba1bd; }
.sym-report .rep-out { display: flex; flex-direction: column; gap: 7px; }
.sym-report .rep-out span { width: 36px; height: 14px; border-radius: 4px; background: rgba(39, 64, 92, 0.12); border: 1px solid rgba(39, 64, 92, 0.3); }
.sym-report .rep-out span:nth-child(2) { background: #27405c; border-color: #27405c; }
/* Transcripts: audio waveform, tallest bar navy */
.sym-wave { display: flex; align-items: center; gap: 6px; height: 72px; }
.sym-wave span { width: 3px; border-radius: 2px; background: #cdd1d7; }
.sym-wave span.hi { background: #27405c; }
/* 8-K filtering: many filings funnel to the one that matters */
.sym-filter { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sym-filter .sf-top { display: grid; grid-template-columns: repeat(4, 22px); gap: 8px; }
.sym-filter .sf-top span { width: 22px; height: 22px; border: 1px solid #c9cdd4; border-radius: 5px; background: #ffffff; }
.sym-filter .sf-top span.dim { opacity: 0.45; }
.sym-filter .sf-flow { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.sym-filter .sf-flow span { width: 3px; height: 3px; border-radius: 50%; background: #8ba1bd; }
.sym-filter .sf-out { width: 26px; height: 26px; border-radius: 6px; background: #27405c; }
/* Thesis: three tracked drivers with status dots */
.sym-thesis { display: flex; flex-direction: column; gap: 16px; width: 150px; }
.sym-thesis .st-row { display: flex; align-items: center; gap: 10px; }
.sym-thesis .st-bar { height: 4px; border-radius: 2px; background: #d7dade; flex: 1; }
.sym-thesis .st-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.sym-thesis .st-dot.ok { background: #4a7c64; }
.sym-thesis .st-dot.watch { background: #27405c; }
.sym-thesis .st-dot.risk { background: #b0563c; }
/* Excel: model grid, newest column highlighted */
.sym-grid { display: grid; grid-template-columns: repeat(4, 26px); gap: 6px; }
.sym-grid span { width: 26px; height: 18px; border: 1px solid #c9cdd4; border-radius: 4px; background: #ffffff; }
.sym-grid span.new { background: rgba(39, 64, 92, 0.12); border-color: #27405c; }
/* Agents: prompt and reply bubbles */
.sym-chat { display: flex; flex-direction: column; gap: 10px; width: 150px; }
.sym-chat .cu { align-self: flex-end; width: 84px; height: 26px; border-radius: 9px 9px 2px 9px; background: #27405c; }
.sym-chat .cb { align-self: flex-start; width: 118px; border-radius: 9px 9px 9px 2px; background: #ffffff; border: 1px solid #c9cdd4; padding: 10px 11px; display: flex; flex-direction: column; gap: 6px; }
.sym-chat .cb span { height: 4px; border-radius: 2px; background: #d7dade; }
.sym-chat .cb span:last-child { width: 60%; }
/* Alerts: radar pulse */
.sym-pulse { position: relative; width: 96px; height: 96px; display: grid; place-items: center; }
.sym-pulse .core { width: 14px; height: 14px; border-radius: 50%; background: #27405c; }
.sym-pulse .ring { position: absolute; border-radius: 50%; }
.sym-pulse .r1 { width: 46px; height: 46px; border: 1px solid rgba(39, 64, 92, 0.35); }
.sym-pulse .r2 { width: 84px; height: 84px; border: 1px solid rgba(39, 64, 92, 0.16); }
/* Sectors: tile map, one live */
.sym-tiles { display: grid; grid-template-columns: repeat(3, 34px); gap: 9px; }
.sym-tiles span { width: 34px; height: 34px; border-radius: 7px; border: 1px solid #c9cdd4; background: #ffffff; }
.sym-tiles span.hi { background: #27405c; border-color: #27405c; }
.sym-tiles span.tint { background: rgba(39, 64, 92, 0.12); border-color: rgba(39, 64, 92, 0.3); }
/* BDC markdowns: value bars stepping down, worst mark flagged navy */
.sym-marks { display: flex; flex-direction: column; gap: 16px; width: 150px; }
.sym-marks .sm-row { display: flex; align-items: center; gap: 12px; }
.sym-marks .sm-bar { height: 4px; border-radius: 2px; background: #d7dade; width: 58px; flex-shrink: 0; }
.sym-marks .sm-val { height: 10px; border-radius: 3px; background: #ffffff; border: 1px solid #c9cdd4; }
.sym-marks .sm-val.hi { background: #27405c; border-color: #27405c; }
/* Metrics: sparkline, recent leg navy */
.sym-spark svg { display: block; }
/* VDR docs: two files, sync dot */
.sym-docs { position: relative; width: 96px; height: 92px; }
.sym-docs .doc { position: absolute; width: 64px; height: 80px; border-radius: 7px; border: 1px solid #c9cdd4; background: #ffffff; }
.sym-docs .doc.back { left: 28px; top: 0; opacity: 0.55; }
.sym-docs .doc.front { left: 0; top: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.sym-docs .sync { position: absolute; left: 50px; top: 68px; width: 16px; height: 16px; border-radius: 50%; background: #27405c; border: 3px solid #f7f7f7; }

/* alerts */
.vis-alert .va-input {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--foreground);
}
.vis-alert .va-input mark {
  background: var(--brand-soft);
  color: var(--foreground);
  font-weight: 600;
  padding: 0 3px;
  border-radius: 3px;
}
.vis-alert .va-caret {
  display: inline-block;
  width: 1.5px; height: 12px;
  background: var(--foreground);
  vertical-align: -2px;
  margin-left: 2px;
  animation: caret-blink 1.1s steps(2, end) infinite;
}
.vis-alert .va-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px;
  color: var(--muted-foreground);
  padding-left: 2px;
}
.vis-alert .va-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--foreground);
}

/* agents */
.vis-agent { gap: 8px; }
.vis-agent .vg-user {
  align-self: flex-end;
  background: #ffffff;
  color: var(--foreground);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  font-size: 11.5px;
  line-height: 1.4;
  padding: 8px 11px;
  border-radius: 10px 10px 2px 10px;
  max-width: 85%;
}
.vis-agent .vg-bot {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 10px 10px 10px 2px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 78%;
}
.vis-agent .vg-text {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: var(--foreground);
  text-wrap: pretty;
}
.vis-agent .vg-src {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.02em;
  color: var(--foreground);
  background: var(--brand-soft);
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
  margin-top: 2px;
}

/* thesis tracking + sector rows (shared) */
.vis-thesis, .vis-sector { gap: 9px; }
.vt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 11px;
}
.vt-name {
  color: var(--foreground);
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vt-chip {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 99px;
  white-space: nowrap;
}
.vt-chip.ok { color: var(--foreground); background: var(--band-deep); }
.vt-chip.up { color: var(--foreground); background: var(--band-deep); }
.vt-chip.dn { color: var(--muted-foreground); background: color-mix(in oklab, var(--foreground) 5%, transparent); }
.vt-chip.nt { color: var(--muted-foreground); background: color-mix(in oklab, var(--foreground) 5%, transparent); }

/* 8-k / earnings */
.vis-8k, .vis-earn { gap: 9px; }
.vis-earn .ve-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px;
  color: var(--muted-foreground);
  padding-left: 2px;
  margin-top: 2px;
}
.vis-earn .ve-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--foreground);
}
.vis-8k .vk-tag, .vis-earn .vk-tag {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--foreground);
  background: var(--brand-soft);
  padding: 3px 7px;
  border-radius: 4px;
  width: fit-content;
  margin-bottom: 3px;
}
.vis-8k .vk-text, .vis-earn .vk-text {
  display: block;
  font-size: 11px;
  line-height: 1.5;
  color: var(--foreground);
  text-wrap: pretty;
}
.vis-8k .vk-text.hl {
  font-weight: 600;
  letter-spacing: -0.005em;
}
.vis-8k .vk-text:not(.hl) { color: var(--muted-foreground); }

/* excel */
.vis-xls { padding: 20px 26px; }
.vis-xls .vx-grid {
  display: grid;
  grid-template-columns: auto repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
}
.vis-xls .vx-c {
  background: var(--card);
  padding: 7px 11px;
  font-size: 10.5px;
  text-align: right;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
.vis-xls .vx-h {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted-foreground);
  background: color-mix(in oklab, var(--foreground) 2.5%, var(--card));
}
.vis-xls .vx-l {
  text-align: left;
  color: var(--muted-foreground);
  font-weight: 500;
}
.vis-xls .vx-new {
  background: var(--brand-soft);
  color: var(--foreground);
  font-weight: 600;
}

/* sector-specific metrics */
.vis-met { gap: 12px; }
.vis-met .vm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vis-met .vm-chip {
  font-size: 10.5px;
  color: var(--muted-foreground);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 99px;
  padding: 4px 10px;
  white-space: nowrap;
}
.vis-met .vm-chip.hl {
  color: var(--foreground);
  background: var(--brand-soft);
  border-color: transparent;
  font-weight: 600;
}
.vis-met .vm-read { display: flex; align-items: baseline; gap: 8px; padding-left: 2px; }
.vis-met .vm-val {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 16px;
  font-weight: 600;
  color: var(--foreground);
  font-variant-numeric: tabular-nums;
}
.vis-met .vm-delta {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted-foreground);
}

/* vdr / private filer docs */
.vis-vdr { gap: 8px; }
.vis-vdr .vv-doc {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 9px 11px;
}
.vis-vdr .vv-doc svg { flex-shrink: 0; color: var(--muted-foreground); }
.vis-vdr .vv-sync {
  margin-left: auto;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted-foreground);
  background: var(--band-deep);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ─── 3 · Security ───────────────────────────────── */
.security-section {
  background: var(--background);
  padding: 40px 0;
}
/* ── Dark security panel (secx-*) — Passu navy, sampled from the
   hero video (same #132233 as the pillar cards), solid hairlines,
   run-on two-tone headline matching the rest of the page. ── */
.secx-panel {
  background: #1d1f23;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  padding: 60px 56px;
}
.secx-left { display: flex; flex-direction: column; align-items: flex-start; }
.secx-h {
  font-family: var(--serif);
  font-size: clamp(25px, 2.9vw, 34px);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: pretty;
}
.secx-h strong { font-weight: 500; color: #ffffff; }
.secx-h span { color: #b4b4b2; }
.secx-list {
  list-style: none;
  /* Auto margins center the checklist between the headline (top)
     and the link (bottom); internal 17px gaps unchanged. */
  margin: auto 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.secx-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: #ececea;
}
.secx-list li svg { color: #b4b4b2; flex-shrink: 0; }
.secx-more {
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 3px;
  transition: border-color 0.18s ease;
}
.secx-more:hover { border-color: #ffffff; }
.secx-more svg { transition: transform 0.18s ease; }
.secx-more:hover svg { transform: translateX(3px); }
.secx-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.secx-cell {
  min-height: 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 28px;
}
.secx-cell:nth-child(2) { border-left: 1px solid rgba(255, 255, 255, 0.12); }
.secx-cell:nth-child(3) { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.secx-cell:nth-child(4) {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.secx-mark { color: #b4b4b2; }
.secx-seal {
  width: 76px; height: 76px;
  border: 1.5px solid #b4b4b2;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.secx-lbl {
  font-size: 13px;
  color: #b4b4b2;
}
.sec-head { max-width: 560px; margin-bottom: 56px; }
.sec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.sec-cell {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sec-cell .sec-ic { color: var(--foreground); margin-bottom: 4px; }
.sec-cell .t {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--foreground);
}
.sec-cell .l {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted-foreground);
}

/* ─── 3b · Security — dark variant mock-ups ─────────────────────
   Two candidate treatments, selected via body[data-security-variant]
   or compared side by side on preview-security.html. */

/* Variant A — Broome-style: full-bleed dark navy band,
   typography-driven items on hairline rules, no cards. */
.security-broome {
  background: #0e1a30;
  padding: 72px 0 80px;
}
.secb-head { max-width: 560px; margin-bottom: 44px; }
.security-broome h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: #f6f8fc;
  margin: 18px 0 0;
  text-wrap: balance;
}
.security-broome h2 em { font-style: italic; }
.secb-sub {
  font-size: 15.5px;
  color: rgba(246, 248, 252, 0.6);
  margin: 16px 0 0;
}
.secb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.secb-cell {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.secb-cell .t {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: #f6f8fc;
}
.secb-cell .l {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(246, 248, 252, 0.58);
}

/* Variant B — Rogo-style: contained rounded near-black panel
   inside the light page, badges row + feature cards. */
.security-rogo {
  background: var(--background);
  padding: 24px 0 64px;
}
.secr-panel {
  background: #131417;
  border-radius: 24px;
  padding: 72px 72px 64px;
}
.secr-head { max-width: 560px; }
.secr-panel h2 {
  font-family: var(--serif);
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: #f7f7f5;
  margin: 18px 0 0;
  text-wrap: balance;
}
.secr-panel h2 em { font-style: italic; }
.secr-sub {
  font-size: 15.5px;
  color: rgba(247, 247, 245, 0.6);
  margin: 16px 0 0;
}
.secr-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 36px 0 44px;
}
.secr-badge {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(247, 247, 245, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 99px;
  padding: 5px 12px;
}
.secr-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.secr-cell {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.secr-ic { color: rgba(247, 247, 245, 0.72); margin-bottom: 2px; }
.secr-cell .t {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.008em;
  color: #f7f7f5;
}
.secr-cell .l {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(247, 247, 245, 0.55);
}

/* Mock-up compare labels (preview-security.html only) */
.variant-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  padding-top: 56px;
  padding-bottom: 18px;
}

@media (max-width: 900px) {
  .secb-grid, .secr-grid { grid-template-columns: repeat(2, 1fr); }
  .secr-panel { padding: 48px 32px 44px; }
}
@media (max-width: 560px) {
  .secb-grid, .secr-grid { grid-template-columns: 1fr; }
}

/* ─── 4 · Reviews conveyor ───────────────────────── */
.reviews-section {
  /* Slightly tighter above, more air below before the dark footer. */
  padding: 40px 0 104px;
  background: var(--background);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* width:100% because the section is a flex column: without it the
   container's auto margins shrink-wrap and center the box. */
.reviews-head { text-align: left; width: 100%; }
.reviews-head h2 { margin-top: 18px; }
.reviews-rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.reviews-belt {
  position: relative;
  /* Cards fade out by the document content edge, ramping to full
     opacity just inside it. */
  --edge: max(var(--container-px), calc((100% - var(--container)) / 2 + var(--container-px)));
  /* Hard clip at both container edges: at rest exactly four full
     cards fill the content width; stepping cards slide through the
     clean cut lines. */
  mask-image: linear-gradient(90deg, transparent calc(var(--edge) - 1px), #000 var(--edge), #000 calc(100% - var(--edge)), transparent calc(100% - var(--edge) + 1px));
  -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--edge) - 1px), #000 var(--edge), #000 calc(100% - var(--edge)), transparent calc(100% - var(--edge) + 1px));
  padding: 6px 0;
}
.reviews-track {
  display: flex; gap: 20px;
  width: max-content;
  /* Rest position: first card aligned to the container's left edge
     (same line as the logo and section titles). */
  padding-left: var(--edge);
  /* Stepped conveyor: JS slides the track one card at a time with a
     pause between steps (V2Reviews), then rotates the array. */
  will-change: transform;
}
.review-card {
  flex-shrink: 0;
  /* Sized so exactly four cards + three 20px gaps fill the content
     width; portrait proportions echo the carousel cards. */
  width: calc((min(var(--container), 100vw) - 2 * var(--container-px) - 60px) / 4);
  min-height: 340px;
  margin: 0;
  /* Light tint so the cards lift off the white page without jarring. */
  background: #f7f7f7;
  border: none;
  border-radius: 8px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.review-card .rq {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.38;
  letter-spacing: -0.008em;
  color: var(--foreground);
  font-weight: 400;
  margin: 0;
}
.review-card .rc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14.5px;
  font-style: normal;
}
.review-card .rc-role { color: var(--foreground); font-weight: 600; font-style: normal; white-space: nowrap; }
.review-card .rc-org { color: var(--muted-foreground); font-style: normal; white-space: nowrap; }

/* ─── 5 · Final CTA ──────────────────────────────── */
.cta-section {
  padding: var(--section-py-lg) 0;
  border-top: 1px solid var(--hairline);
  background:
    radial-gradient(ellipse 68% 58% at 50% 28%,
      rgba(168, 162, 158, 0.12) 0%,
      transparent 72%),
    var(--background);
}
.v2cta {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.v2cta h2 {
  font-family: var(--serif);
  font-size: clamp(25px, 2.9vw, 34px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-weight: 400;
  color: var(--foreground);
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.v2cta h2 em { font-style: italic; }
.v2cta-sub {
  font-size: 16px;
  color: var(--muted-foreground);
  margin: 0;
}
.v2cta .btn-primary {
  margin-top: 14px;
  background: var(--foreground); color: var(--background); border-color: var(--foreground);
}
.v2cta .btn-primary:hover { background: color-mix(in oklab, var(--foreground) 90%, transparent); }

/* ─── Footer ─────────────────────────────────────── */
/* Inverted closing band (Rogo-style): display tagline + CTA, hairline,
   slim link columns, centered copyright. */
footer { padding: 72px 0 36px; background: #1d1f23; color: #ffffff; }
footer .logo-wordmark { filter: brightness(0) invert(1); height: 28px; width: auto; display: block; }
.footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.footer-cta h2 {
  font-family: var(--serif);
  font-size: clamp(25px, 2.8vw, 32px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
}
.footer-cta-btns { display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap; }
.footer-btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  background: transparent;
}
.footer-btn-ghost:hover { border-color: #ffffff; }
footer .btn-primary {
  background: #ffffff;
  color: #1d1f23;
  border-color: #ffffff;
}
footer .btn-primary:hover { background: #e8e8e6; border-color: #e8e8e6; }
.footer-rule { height: 1px; background: rgba(255, 255, 255, 0.14); margin: 52px 0 48px; }
.footer-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 32px; margin-bottom: 56px;
}
.footer-brand .lbl { font-size: 14px; color: rgba(255, 255, 255, 0.72); margin-top: 16px; max-width: 30ch; font-family: var(--serif); font-style: italic; line-height: 1.5; }
.footer-col h5 { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); font-weight: 500; margin: 0 0 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: rgba(255, 255, 255, 0.72); transition: color 0.15s ease; }
.footer-col a:hover { color: #ffffff; }
.footer-bottom {
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: rgba(255, 255, 255, 0.55);
  padding-top: 8px;
}
.footer-bottom .legal { display: flex; gap: 24px; }

/* ── Contact modal (cm-*) — Rogo-style two-pane dialog: form left,
   hero-frame photo with navy wash right. ── */
.cm-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(5, 7, 12, 0.6);
  display: grid;
  place-items: center;
  padding: 24px;
  animation: cm-fade 0.2s ease;
}
@keyframes cm-fade { from { opacity: 0; } }
.cm-card {
  position: relative;
  width: min(880px, 100%);
  max-height: calc(100vh - 48px);
  background: #ffffff;
  display: grid;
  grid-template-columns: 1.05fr 0.85fr;
  overflow: hidden;
  border-radius: 8px;
  animation: cm-rise 0.25s ease;
}
@keyframes cm-rise { from { opacity: 0; transform: translateY(12px); } }
.cm-form-pane {
  padding: 40px 44px 44px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.cm-logo { height: 22px; width: auto; align-self: flex-start; margin-bottom: 44px; }
.cm-form-pane h3 {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--foreground);
  margin: 0 0 10px;
}
.cm-sub {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted-foreground);
  margin: 0 0 26px;
}
.cm-form { display: flex; flex-direction: column; gap: 12px; }
.cm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cm-form input {
  height: 46px;
  width: 100%;
  background: #f5f5f3;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  color: var(--foreground);
}
.cm-form textarea {
  width: 100%;
  background: #f5f5f3;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--foreground);
  min-height: 104px;
  resize: vertical;
}
.cm-form textarea::placeholder { color: #8b8b8b; }
.cm-form textarea:focus {
  outline: none;
  background: #ffffff;
  border-color: #27405c;
  box-shadow: 0 0 0 3px rgba(39, 64, 92, 0.1);
}
.cm-form input::placeholder { color: #8b8b8b; }
.cm-form input:focus {
  outline: none;
  background: #ffffff;
  border-color: #27405c;
  box-shadow: 0 0 0 3px rgba(39, 64, 92, 0.1);
}
.cm-submit { width: 100%; justify-content: center; margin-top: 10px; }
.cm-done p { font-size: 14.5px; line-height: 1.5; color: var(--muted-foreground); margin: 0 0 26px; }
.cm-done h3 { margin-top: 0; }
.cm-photo {
  position: relative;
  background: url('assets/hero-poster-day.jpg') center / cover no-repeat;
  min-height: 520px;
}
.cm-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19, 34, 51, 0.3), rgba(19, 34, 51, 0.68));
}
.cm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  background: rgba(5, 7, 12, 0.45);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  transition: background 0.18s ease;
}
.cm-close:hover { background: rgba(5, 7, 12, 0.7); }
@media (max-width: 760px) {
  .cm-card { grid-template-columns: 1fr; }
  .cm-photo { display: none; }
  .cm-close { background: #eeeeec; color: #333333; }
  .cm-form-pane { padding: 32px 24px; }
}

/* ─── Responsive ─────────────────────────────────── */
@media (max-width: 900px) {
  :root { --section-py: 44px; --section-py-sm: 44px; --section-py-lg: 72px; --container-px: 20px; }
  .nav-links { display: none; }

  .pillars { padding: 96px 0 72px; }
  .pillars-head { margin-bottom: 48px; }
  .pillars-grid { grid-template-columns: 1fr; }
  .pillar {
    padding: 32px 0;
    border-left: none;
    border-top: 1px solid var(--hairline);
  }
  .pillar:first-child { padding-top: 0; border-top: none; }

  .carousel-head { margin-bottom: 28px; }
  .pcard { width: min(320px, 84vw); min-height: 390px; }
  .pcard-visual { min-height: 160px; }

  .security-section { padding: 96px 0; }
  .sec-head { margin-bottom: 48px; }
  .sec-grid { grid-template-columns: repeat(2, 1fr); }
  .secx-panel { grid-template-columns: 1fr; gap: 44px; padding: 44px 28px; }
  /* Stacked layout has no free height for auto margins. */
  .secx-list { margin: 36px 0; }
  .secx-cell { min-height: 180px; }

  .reviews-section { gap: 28px; }
  .review-card { width: 270px; min-height: 300px; padding: 24px 24px 20px; }

  .cta-section { padding: 128px 0; }
  .footer-cta { flex-direction: column; align-items: flex-start; gap: 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .carousel-nav { display: none; }
  .sec-grid { grid-template-columns: 1fr; }
}

/* ════ Feature rows with product mocks — lifted from baseline commit ════ */
/* ─── Feature blocks ─────────────────────────────── */
.feat {
  padding: var(--section-py) 0;
}
.feat-head { text-align: center; max-width: 820px; margin: 0 auto 96px; }
.feat-head h2 {
  font-family: var(--serif);
  font-size: clamp(40px, 5.6vw, 68px);
  font-weight: 400; line-height: 1.04; letter-spacing: -0.025em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.feat-head h2 em { font-style: italic; }
.feat-sub,
.feat-head p {
  font-size: 19px; line-height: 1.5;
  color: var(--muted-foreground);
  margin: 0 auto; max-width: 62ch;
  text-wrap: balance;
}

/* Wider, flatter, Rogo-style feature rows. Each block is a wide
   rectangle: long-form copy on one side, a large flat visual on
   the other. No card chrome on the rectangle itself — the rhythm
   comes from whitespace between rows. */
.feat-block {
  display: grid;
  grid-template-columns: minmax(300px, 0.85fr) 1fr;
  gap: 72px;
  align-items: center;
  padding: 56px 0;
  margin: 0;
}
.feat-block.flip { grid-template-columns: 1fr minmax(300px, 0.85fr); }
.feat-block.flip .copy { order: 2; }
/* Single, clean frame: the inner mock (.feat-square) carries the
   border + surface; the .feat-visual wrapper is frameless so there's
   no double-box look. Visuals are capped narrower + shorter. */
.feat-block .feat-visual {
  width: 100%;
  max-width: 560px;
  justify-self: end;
}
.feat-block.flip .feat-visual { justify-self: start; }
.feat-block .feat-square {
  aspect-ratio: 16 / 11;
  width: 100%;
}

/* Flat shell shared by all three feature mocks. Thin, very light
   border; no shadow. The whitespace from the parent .feat-block
   does the framing work. */
.feat-square {
  border: 1px solid color-mix(in oklab, var(--foreground) 7%, transparent);
  border-radius: 14px;
  background: var(--card);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.feat-square .fs-tag {
  position: absolute;
  top: 16px; left: 18px;
  z-index: 3;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--foreground);
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 5px;
  background: color-mix(in oklab, var(--foreground) 5%, var(--card));
  border: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent);
}

/* ── Ingest: continuous CSS scroll behind a single ambient spotlight ──
   No JS, no per-pill active border. The spotlight is a static
   rounded rectangle in the vertical center of the card; pills
   scroll behind it via a CSS keyframe. Whatever pill is under
   the spotlight at any moment reads as the highlighted one. */
.ingest-mock { padding: 0; }
.ingest-spotlight {
  position: absolute;
  left: 24px; right: 24px;
  top: 50%; transform: translateY(-50%);
  height: 44px;
  background: color-mix(in oklab, var(--foreground) 5%, var(--card));
  border: 1px solid color-mix(in oklab, var(--foreground) 11%, transparent);
  border-radius: 10px;
  z-index: 0;
  pointer-events: none;
}
.ingest-belt {
  flex: 1; width: 100%;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, black 60px, black calc(100% - 60px), transparent 100%);
}
.ingest-track {
  position: absolute;
  left: 24px; right: 24px;
  top: 50%;
  display: flex; flex-direction: column;
  gap: 14px;
  /* Anchor: place the middle of the FIRST pill at belt center.
     Then translate up by half the duplicated belt height so the
     loop is seamless. */
  transform: translateY(-22px);
  animation: ingest-scroll 22s linear infinite;
  will-change: transform;
}
@keyframes ingest-scroll {
  from { transform: translateY(-22px); }
  to   { transform: translateY(calc(-22px - (44px + 14px) * 8)); }
}
.ingest-pill {
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px;
  height: 44px;
  background: transparent;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.ingest-name {
  flex: 1;
  color: var(--foreground);
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ingest-meta {
  color: var(--muted-foreground);
  font-size: 11px;
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* ── Command center: coverage tiles that light up + flash as new
   filings are ingested. Color-only highlight transition. ── */
.command-mock { padding: 0; }
.cmd-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px;
  border-bottom: 1px solid color-mix(in oklab, var(--foreground) 7%, transparent);
  flex-shrink: 0;
}
.cmd-title {
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--foreground);
}
.cmd-live {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.cmd-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--status-success-fg);
  animation: cmd-pulse 1.6s ease-in-out infinite;
}
@keyframes cmd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.cmd-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 8px;
  padding: 14px 18px;
}
.cmd-tile {
  border: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent);
  border-radius: 10px;
  padding: 10px 11px;
  display: flex; flex-direction: column; gap: 5px;
  background: var(--card);
  min-width: 0; min-height: 0; overflow: hidden;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.cmd-tile.active {
  border-color: color-mix(in oklab, var(--primary) 50%, transparent);
  background: color-mix(in oklab, var(--primary) 5%, var(--card));
}
.cmd-tk-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cmd-tk {
  font-size: 14px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--foreground);
}
.cmd-sec {
  font-size: 9.5px; color: var(--muted-foreground);
  text-transform: uppercase; letter-spacing: 0.08em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmd-flash {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; line-height: 1.15; color: var(--foreground); font-weight: 500;
  background: color-mix(in oklab, var(--primary) 8%, var(--card));
  border: 1px solid color-mix(in oklab, var(--primary) 18%, transparent);
  border-radius: 6px; padding: 3px 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: cmd-flash-in 0.3s ease both;
}
.cmd-fdot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--status-success-fg); flex-shrink: 0;
}
@keyframes cmd-flash-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
.cmd-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto;
}
.cmd-count {
  font-size: 11px; font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--foreground); font-weight: 600; letter-spacing: 0.01em;
}
.cmd-synced { font-size: 10px; color: var(--muted-foreground); }

/* ── Metric mock: KPI tiles with animated cursor → tooltip → drawer ── */
.metric-mock { padding: 0; }
.metric-stage {
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
}
.metric-grid {
  position: absolute; inset: 0;
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), filter 0.4s ease;
}
.metric-stage.drawer-open .metric-grid {
  /* Panel stays fully in place; only the document drawer pops out
     over it. No shift, no scale, no desaturation. */
}
.kpi-card {
  background: var(--card);
  border: 1px solid color-mix(in oklab, var(--foreground) 7%, transparent);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  position: relative;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.kpi-target.is-hover { } /* assigned via phase class on .metric-stage */
.metric-stage.phase-hover .kpi-target,
.metric-stage.phase-click .kpi-target {
  border-color: color-mix(in oklab, var(--foreground) 25%, transparent);
  background: color-mix(in oklab, var(--foreground) 3%, var(--card));
}
.kpi-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted-foreground);
}
.kpi-value {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--foreground);
  line-height: 1;
  font-feature-settings: 'tnum';
  display: inline-flex; align-items: baseline; gap: 4px;
}
.kpi-unit { font-size: 16px; font-weight: 600; color: var(--muted-foreground); }
.kpi-val-text { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; }
.kpi-sub {
  font-size: 11px; color: var(--muted-foreground);
  font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: 0.01em;
}
.kpi-sub.kpi-down { color: #0e5a3c; }
.kpi-value .cite {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: color-mix(in oklab, var(--foreground) 12%, transparent);
  color: var(--foreground);
  font-size: 9px; font-weight: 700; line-height: 1;
  border-radius: 4px;
  margin-left: 6px; align-self: center;
  font-family: var(--font-mono, ui-monospace, monospace);
  transition: background 0.2s ease, color 0.2s ease;
}
.kpi-value .cite.is-target {
  background: var(--foreground);
  color: var(--background);
}
.cite-tooltip {
  position: absolute;
  /* Anchor below the value row, extending RIGHTWARD into the
     adjacent tile — the kpi-target sits in column 1 of a 2-col
     grid, so going right keeps the tooltip inside the card.
     No opacity/transform transitions (those are wedged in this
     iframe); we conditionally mount the tooltip instead. */
  top: calc(100% + 12px); left: -4px;
  width: 270px; max-width: 320px;
  background: var(--foreground);
  color: var(--background);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.5;
  text-align: left;
  pointer-events: none;
  z-index: 6;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.35);
}
.cite-tooltip::after {
  content: '';
  position: absolute;
  bottom: 100%; left: 18px;
  border: 5px solid transparent;
  border-bottom-color: var(--foreground);
}
.cite-tooltip .t-meta {
  display: block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 6px;
  font-weight: 600;
}
.cite-tooltip .t-quote { display: block; font-style: italic; }
.cite-tooltip .t-quote mark {
  background: rgba(255, 220, 90, 0.42);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

/* Side drawer with the source document. Slides in from the right
   edge of the card; bumps the metric grid slightly left. */
.doc-drawer {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 56%;
  background: var(--card);
  border-left: 1px solid color-mix(in oklab, var(--foreground) 9%, transparent);
  box-shadow: -8px 0 24px -16px rgba(0,0,0,0.18);
  transform: translateX(105%);
  z-index: 4;
  display: flex; flex-direction: column;
}
.doc-drawer.open { transform: translateX(0); }
.doc-drawer.closing { transform: translateX(105%); }
.doc-drawer .dd-head {
  padding: 10px 13px;
  border-bottom: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent);
  display: flex; align-items: center; justify-content: space-between;
  background: color-mix(in oklab, var(--foreground) 2.5%, var(--card));
}
.doc-drawer .dd-title { font-size: 9.5px; font-weight: 600; color: var(--foreground); letter-spacing: -0.005em; }
.doc-drawer .dd-page {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 8px; color: var(--muted-foreground);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.doc-drawer .dd-body {
  padding: 13px 15px;
  flex: 1;
  overflow: hidden;
  font-size: 8.5px;
  line-height: 1.6;
  color: var(--foreground);
}
.doc-drawer .dd-body p { margin: 0 0 8px; }
.doc-drawer .dd-body p:last-child { margin-bottom: 0; }
.doc-drawer .dd-body mark {
  background: rgba(255, 220, 90, 0.42);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

/* Animated cursor — driven by rAF tween writing inline
   left/top/transform. NO CSS transitions on these (wedged in
   this iframe). Initial pose set in JS on mount. */
.fake-cursor {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  top: 78%; left: 8%;
  transform: scale(1);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.25));
}
.fake-cursor svg { display: block; }
.click-ring {
  position: absolute;
  top: 11px; left: 11px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--foreground);
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0.7;
  animation: click-ping 0.4s ease-out forwards;
}
@keyframes click-ping {
  to { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}

/* ── Alert composer: a chat-style natural-language input with a
   typing animation and a "Create Alert" submit button. ── */
.alerts-mock { padding: 0; display: flex; align-items: center; justify-content: center; }
.alert-composer {
  width: calc(100% - 56px);
  max-width: 560px;
  background: var(--card);
  border: 1px solid color-mix(in oklab, var(--foreground) 7%, transparent);
  border-radius: 14px;
  padding: 18px 20px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.alert-composer .ac-hint {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted-foreground);
}
.alert-composer .ac-input {
  min-height: 56px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--foreground);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.alert-composer .ac-text { display: inline; }
.alert-composer .ac-caret {
  display: inline-block;
  width: 2px; height: 18px;
  background: var(--foreground);
  vertical-align: -3px;
  margin-left: 1px;
  animation: caret-blink 1.1s steps(2, end) infinite;
}
.alert-composer .ac-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in oklab, var(--foreground) 6%, transparent);
}
.alert-composer .ac-help {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--muted-foreground);
}
.alert-composer .ac-create {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--foreground); color: var(--background);
  border: none;
  border-radius: 8px;
  height: 32px;
  padding: 0 14px;
  font-size: 12px; font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.feat-block .copy { max-width: 420px; }
.feat-block .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--muted-foreground);
  margin-bottom: 16px;
}
.feat-block h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 2.8vw, 36px);
  font-weight: 400; line-height: 1.12; letter-spacing: -0.02em;
  margin: 0 0 20px;
  text-wrap: balance;
}
.feat-block h3 em { font-style: italic; }
.feat-block p {
  font-size: 16px; line-height: 1.6;
  color: var(--muted-foreground);
  margin: 0;
  text-wrap: pretty;
}

/* ─── Feature visual wrapper (frameless; mock carries the frame) ── */
.feat-visual {
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.feat-visual .vh {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  background: #fafafa;
}
.feat-visual .vh .dots { display: flex; gap: 6px; }
.feat-visual .vh .dots span { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in oklab, var(--foreground) 8%, transparent); }
.feat-visual .vh .vtitle { font-size: 11px; color: var(--muted-foreground); font-weight: 500; font-feature-settings: 'tnum'; }


/* ─── Adaptations: lifted section fitted to v2 ────────────────────
   The section now sits directly under the dark video hero, so it
   takes over the dark→white hand-off; the pillars section below
   loses its extra top padding accordingly. */
.feat { padding: 96px 0 8px; }
body[data-show-features="true"] .pillars { padding-top: var(--section-py-sm); }
@media (max-width: 900px) {
  .feat-block, .feat-block.flip { grid-template-columns: 1fr; gap: 32px; padding: 24px 0; }
  .feat-block.flip .copy { order: 0; }
}

/* ════ Broome-style platform overview (preview-broome.html) ════
   Mirrors broome.ai's actual section: white page, left-aligned
   two-tone run-on headline (dark statement → light-grey support),
   full-width segmented tab strip with hairline cells and a short
   dark underline on the active label, then one flat hairline
   panel holding the product render — no browser chrome. */
.bro-overview {
  background: #ffffff;
  padding: 110px 0 128px;
}
.bro-head { max-width: 1100px; margin: 0 0 64px; text-align: left; }
.bro-head h2 {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: clamp(24px, 2.6vw, 33px);
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: pretty;
}
.bro-head h2 strong {
  font-weight: 600;
  color: #1e1e1c;
}
.bro-head h2 span { color: #a9a9a5; }
.bro-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #e7e6e1;
  background: #ffffff;
}
.bro-tab {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #9d9c96;
  background: transparent;
  border: none;
  border-left: 1px solid #e7e6e1;
  padding: 0;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.18s ease;
}
.bro-tab:first-child { border-left: none; }
.bro-tab:hover { color: #1e1e1c; }
.bro-tab .bro-tab-label {
  position: relative;
  padding: 22px 2px;
}
.bro-tab .bro-tab-label::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  height: 2px;
  background: #1e1e1c;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.bro-tab.active { color: #1e1e1c; }
.bro-tab.active .bro-tab-label::after { opacity: 1; }
.bro-frame {
  margin: 34px 0 0;
  background: #ffffff;
  border: 1px solid #e7e6e1;
  border-radius: 6px;
  overflow: hidden;
  animation: bro-rise 0.45s ease both;
}
@keyframes bro-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.bro-body { min-height: 520px; display: flex; flex-direction: column; }
.bro-body > * { flex: 1; }
/* Mocks lose their own card chrome inside the flat panel */
.bro-body .feat-square { border: none; border-radius: 0; box-shadow: none; min-height: 520px; }
.bro-body .app-chrome { min-height: 520px; }

/* ── Agents mock (bag-*) ── */
.bag {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 0;
  min-height: 480px;
}
.bag-left {
  border-right: 1px solid #eeece2;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fcfbf8;
}
.bag-agent {
  background: #ffffff;
  border: 1px solid #e7e4d8;
  border-radius: 12px;
  padding: 18px 18px 16px;
  box-shadow: 0 1px 3px rgba(27, 27, 23, 0.05);
}
.bag-agent-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.bag-name { font-size: 14px; font-weight: 600; color: #1b1b17; }
.bag-status {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: #0e5a3c;
  background: rgba(14, 90, 60, 0.09);
  border-radius: 99px;
  padding: 3px 8px;
}
.bag-status.done { color: #55544c; background: #f1efe6; }
.bag-target { font-size: 11.5px; color: #8a8779; margin-bottom: 14px; }
.bag-steps { display: flex; flex-direction: column; gap: 9px; }
.bag-step {
  display: flex; align-items: center; gap: 9px;
  font-size: 12.5px;
  color: #a5a294;
  transition: color 0.3s ease;
}
.bag-step.done { color: #1b1b17; }
.bag-step.active { color: #0e5a3c; font-weight: 500; }
.bag-check {
  width: 16px; height: 16px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid #dcd9cc;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px;
  color: #0e5a3c;
  background: #ffffff;
}
.bag-step.done .bag-check { background: rgba(14, 90, 60, 0.1); border-color: rgba(14, 90, 60, 0.35); }
.bag-others { display: flex; flex-direction: column; gap: 8px; }
.bag-other {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #55544c;
  border: 1px solid #eeece2;
  border-radius: 10px;
  padding: 10px 13px;
  background: #ffffff;
}
.bag-odot { width: 6px; height: 6px; border-radius: 50%; background: #0e5a3c; opacity: 0.5; }
.bag-otime { margin-left: auto; font-size: 10.5px; color: #a5a294; }
.bag-right { padding: 26px 28px; }
.bag-doc-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px; letter-spacing: 0.12em;
  color: #a5a294; font-weight: 600;
  margin-bottom: 18px;
}
.bag-cite-count { color: #0e5a3c; }
.bag-doc { display: flex; flex-direction: column; gap: 20px; }
.bag-para { opacity: 0.18; transition: opacity 0.5s ease; display: flex; flex-direction: column; gap: 7px; }
.bag-para.in { opacity: 1; }
.bag-line { display: block; height: 8px; border-radius: 4px; background: #e9e6da; }
.bag-para.in .bag-line { background: #dbd8c9; }
.bag-cite {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px;
  color: #0e5a3c;
  background: rgba(14, 90, 60, 0.08);
  border-radius: 4px;
  padding: 2px 6px;
  width: fit-content;
  margin-top: 2px;
}

@media (max-width: 860px) {
  .bag { grid-template-columns: 1fr; }
  .bag-left { border-right: none; border-bottom: 1px solid #eeece2; }
  .bro-body .app-chrome { grid-template-columns: 1fr; }
}

/* ════ Ported from retired styles.css ═══════════════════════════
   Rules whose only consumers are the product mocks in mocks.jsx
   (HeroProductMock app chrome + coverage timeline) plus the shared
   .eyebrow / .btn-outline utilities. Accents neutralized to match
   the rogo-monochrome system. */

.eyebrow {
  font: 500 12px/1.2 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.btn-outline {
  background: transparent; color: var(--foreground);
  border-color: var(--border);
}
.btn-outline:hover { background: var(--band); border-color: color-mix(in oklab, var(--foreground) 30%, var(--border)); }

/* App-chrome look (HeroProductMock) */
.app-chrome { display: grid; grid-template-columns: 220px 1fr; min-height: 540px; }
.app-sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-border);
  padding: 14px 12px;
  font-size: 13px;
}
.app-sidebar .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: -0.02em; padding: 4px 8px 16px; }
.app-sidebar .group { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); margin: 14px 8px 6px; font-weight: 500; }
.app-sidebar .nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 6px;
  color: var(--foreground); cursor: pointer;
  font-size: 13px;
}
.app-sidebar .nav-item.active { background: var(--accent); }
.app-sidebar .nav-item:hover:not(.active) { background: color-mix(in oklab, var(--accent) 50%, transparent); }
.app-sidebar .nav-item svg { width: 14px; height: 14px; color: var(--muted-foreground); }
.app-sidebar .nav-item.active svg { color: var(--foreground); }
.app-sidebar .ticker {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 8px; border-radius: 6px; cursor: pointer;
  font-size: 12px;
}
.app-sidebar .ticker:hover { background: var(--accent); }
.app-sidebar .ticker .t { display: flex; align-items: center; gap: 8px; }
.app-sidebar .ticker .tk { font-weight: 600; font-feature-settings: 'tnum'; }
.app-sidebar .ticker .sec { color: var(--muted-foreground); font-size: 11px; }
.app-sidebar .rating { font-size: 10px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border); color: var(--muted-foreground); font-weight: 500; font-feature-settings: 'tnum'; }

.app-main { padding: 18px 24px 24px; overflow: hidden; }
.app-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.app-head h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin: 4px 0 2px; }
.app-head .sub { font-size: 13px; color: var(--muted-foreground); margin: 0; }
.app-head .actions { display: flex; gap: 6px; }

.app-tabs { display: flex; gap: 4px; padding: 4px; background: var(--accent); border-radius: 8px; width: fit-content; margin-bottom: 14px; }
.app-tab {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 5px 10px; border-radius: 5px;
  color: var(--muted-foreground); font-weight: 500;
}
.app-tab.active { background: var(--background); color: var(--foreground); box-shadow: var(--shadow-xs); }
.app-tab .count { font-size: 10px; padding: 0 5px; border-radius: 99px; background: color-mix(in oklab, var(--foreground) 8%, transparent); color: var(--muted-foreground); }
.app-tab.active .count { background: color-mix(in oklab, var(--foreground) 10%, transparent); color: var(--foreground); }
.app-tab svg { width: 12px; height: 12px; }

/* Coverage timeline (HeroProductMock) */
.timeline-card { border: 1px solid var(--border); border-radius: 8px; }
.timeline-section-head { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); font-weight: 500; padding: 14px 16px 8px; }
.timeline-row { display: grid; grid-template-columns: 70px 1fr auto; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--border); align-items: center; }
.timeline-row.today { background: color-mix(in oklab, #f59e0b 6%, transparent); }
.timeline-row:hover { background: var(--accent); }
.timeline-date { font-size: 12px; color: var(--muted-foreground); font-weight: 500; font-feature-settings: 'tnum'; }
.timeline-date .big { display: block; font-size: 16px; font-weight: 600; color: var(--foreground); line-height: 1; }
.timeline-date .mo { font-size: 9px; letter-spacing: 0.1em; }
.timeline-title { font-size: 13px; color: var(--foreground); }
.timeline-title .ticker { font-weight: 600; font-feature-settings: 'tnum'; margin-right: 6px; }
.timeline-title .meta { color: var(--muted-foreground); font-size: 12px; }
.timeline-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 500; }
.tag-earnings { background: var(--band-deep); color: var(--foreground); }
.tag-conference { background: #f5efe7; color: #6b3a10; }
.tag-news { background: #fef3f0; color: #b04a23; }
.tag-other { background: var(--accent); color: var(--muted-foreground); }
.sun-icon { color: #f59e0b; display: inline-flex; }

/* ── Legal pages (terms.html / privacy.html) ── */
.legal-top {
  padding: 22px 0;
  border-bottom: 1px solid var(--hairline);
}
.legal-top .logo-wordmark { height: 26px; width: auto; display: block; }
.legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 72px var(--container-px) 96px;
}
.legal h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--foreground);
}
.legal .legal-date {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 0 0 44px;
}
.legal h2 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
  color: var(--foreground);
}
.legal p, .legal li {
  font-size: 15px;
  line-height: 1.65;
  color: #40403e;
  margin: 0 0 14px;
}
.legal ul { padding-left: 22px; margin: 0 0 14px; }
.legal a { color: var(--foreground); text-decoration: underline; text-underline-offset: 3px; }
.legal-foot {
  border-top: 1px solid var(--hairline);
  padding: 28px 0 40px;
  text-align: center;
  font-size: 13px;
  color: var(--muted-foreground);
}