/* ============================================================================
   Kvadra Landing — page styles
   Layered on the Kvadra Design System tokens (../styles.css).
   Warm ivory, deep petrol-teal, champagne gold. Playfair / Onest / JetBrains.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

a { color: var(--text-brand); text-decoration: none; }
a:hover { color: var(--brand-pressed); }

/* ---- Layout containers --------------------------------------------------- */
.container { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 32px; }

/* ---- Type primitives ----------------------------------------------------- */
.serif { font-family: var(--font-display); }
.mono  { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-accent);
  margin: 0 0 var(--space-4);
}
.eyebrow.muted { color: var(--text-subtle); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); color: var(--teal-900); margin: 0; }

.section-h {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem);
  line-height: var(--lh-tight);
  max-width: 18ch;
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
.section-lead {
  font-size: var(--text-lg);
  color: var(--text-muted);
  line-height: var(--lh-normal);
  margin: 0 0 var(--space-10);
  max-width: 60ch;
  text-wrap: pretty;
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--text-md); font-weight: var(--fw-medium);
  border-radius: var(--radius-full); padding: 0.85em 1.5em;
  border: 1px solid transparent; cursor: pointer; line-height: 1;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.btn:active { transform: translateY(0.5px) scale(0.99); }
.btn-primary { background: var(--brand); color: var(--text-on-brand); }
.btn-primary:hover { background: var(--brand-pressed); color: var(--text-on-brand); }
.btn-accent { background: var(--accent); color: var(--text-on-accent); box-shadow: var(--shadow-accent); }
.btn-accent:hover { background: var(--accent-hover); color: var(--text-on-accent); }
.btn-ghost { background: transparent; color: var(--text-brand); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-brand-soft); color: var(--brand-pressed); }
.btn-lg { font-size: var(--text-lg); padding: 0.95em 1.7em; }

/* ---- Header / nav -------------------------------------------------------- */
header.site {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--sand-50) 86%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-sans); font-weight: var(--fw-semibold); color: var(--teal-900); font-size: var(--text-xl); letter-spacing: var(--ls-snug); }
.brand svg { display: block; width: 30px; height: 30px; }
.nav-links { display: flex; align-items: center; gap: var(--space-8); }
.nav-links a.navlink { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--fw-medium); color: var(--text-muted); }
.nav-links a.navlink:hover { color: var(--text-brand); }
.nav-right { display: flex; align-items: center; gap: var(--space-5); }

/* language toggle */
.lang-toggle { display: inline-flex; align-items: center; border: 1px solid var(--border-default); border-radius: var(--radius-full); overflow: hidden; background: var(--surface-card); }
.lang-toggle button {
  font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-subtle);
  background: transparent; border: 0; padding: 6px 11px; cursor: pointer; transition: all var(--dur-base) var(--ease-out);
}
.lang-toggle button[aria-pressed="true"] { background: var(--brand); color: var(--text-on-brand); }
.btn-nav { padding: 0.6em 1.1em; font-size: var(--text-base); }

@media (max-width: 880px) { .nav-links { display: none; } }

/* ---- Sections ------------------------------------------------------------ */
section { padding: clamp(64px, 8vw, 112px) 0; }
.divider-top { border-top: 1px solid var(--border-subtle); }

/* ---- Hero ---------------------------------------------------------------- */
.hero { padding-top: clamp(64px, 7vw, 104px); }
.hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 {
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.1rem);
  line-height: 1.04; color: var(--teal-900); margin: 0 0 var(--space-6); max-width: 16ch; text-wrap: balance;
}
.hero .lead { font-size: var(--text-xl); line-height: var(--lh-normal); color: var(--text-muted); max-width: 46ch; margin: 0 0 var(--space-8); text-wrap: pretty; }
.hero-cta { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.status-line {
  margin-top: var(--space-8); font-size: var(--text-base); color: var(--text-muted);
  display: inline-flex; align-items: center; gap: var(--space-3);
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full); padding: 8px 16px; box-shadow: var(--shadow-xs);
}
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); flex: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--green-500) 60%, transparent); animation: livepulse 2.6s var(--ease-in-out) infinite; }
@keyframes livepulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green-500) 50%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--green-500) 0%, transparent); }
}

/* ---- Building map (signature visual) ------------------------------------- */
.bmap {
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl); padding: var(--space-6); box-shadow: var(--shadow-lg);
}
.bmap-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-4); gap: var(--space-3); }
.bmap-label { font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-subtle); }
.bmap-live { font-size: var(--text-2xs); color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; }
.bmap-sub { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-4); }
.bgrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; margin-bottom: var(--space-4); }
.bgrid.compact { grid-template-columns: repeat(6, 1fr); }
.cell {
  aspect-ratio: 1; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);
  background: var(--inv-available-bg);
  display: flex; align-items: center; justify-content: center;
  transition: filter var(--dur-fast) var(--ease-out);
}
.cell[title]:hover { filter: brightness(0.95); }
.cell .u { font-family: var(--font-mono); font-size: 10px; line-height: 1; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--teal-900) 52%, transparent); }
.cell.sold .u { color: color-mix(in srgb, var(--sand-900) 42%, transparent); }
.cell.empty .u { display: none; }
.cell.reserved { background: var(--inv-reserved-bg); border-color: color-mix(in srgb, var(--amber-500) 22%, transparent); }
.cell.sold { background: var(--inv-sold-bg); border-color: var(--border-strong); }
.cell.pending { background: var(--inv-pending-bg); }
.cell.empty { background: transparent; border: 1px dashed var(--border-default); }
@keyframes cellfade { from { opacity: 0.25; transform: scale(0.96); } to { opacity: 1; transform: none; } }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-xs); color: var(--text-muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; border: 1px solid var(--border-subtle); }
.map-insight { display: inline-flex; align-items: center; gap: 7px; margin-top: var(--space-3); font-size: var(--text-xs); color: var(--rust-600); font-weight: var(--fw-medium); }
.map-insight .ins-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--inv-available-bg); border: 1px solid var(--green-500); flex: none; }

/* pillar 01 — sold-ratio-by-floor elevation (unique vs the hero grid) */
.elevation { display: flex; flex-direction: column; gap: 9px; }
.elev-row { display: grid; grid-template-columns: 26px 1fr 42px; align-items: center; gap: 10px; }
.elev-floor { font-family: var(--font-mono); font-size: 10px; color: var(--text-subtle); text-align: center; }
.elev-bar { display: flex; height: 18px; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-sunken); box-shadow: var(--shadow-inset-top); }
.elev-bar .seg { height: 100%; }
.elev-bar .seg.sold { background: var(--sand-400); }
.elev-bar .seg.reserved { background: var(--amber-500); }
.elev-bar .seg.avail { background: var(--green-500); }
.elev-pct { font-family: var(--font-mono); font-size: 12px; font-weight: var(--fw-semibold); color: var(--teal-900); text-align: right; }
.elev-row.flag .elev-bar { outline: 1.5px solid var(--rust-500); outline-offset: 1px; }
.elev-row.flag .elev-pct { color: var(--rust-600); }
.elev-legend { margin-top: var(--space-4); gap: var(--space-3); }

/* sell — apartment shortlist (replaces a 3rd building-map grid) */
.shortlist { display: flex; flex-direction: column; gap: 7px; margin-top: var(--space-1); }
.sl-row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: var(--space-2); font-size: var(--text-xs); }
.sl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sl-u { color: var(--teal-900); font-weight: var(--fw-semibold); }
.sl-meta { color: var(--text-muted); }
.sl-price { color: var(--text-body); text-align: right; }

/* ---- Imagery bands (styled render placeholders) -------------------------- */
.band-section { padding-top: clamp(8px, 2vw, 24px); }
.imgband { position: relative; border-radius: var(--radius-3xl); overflow: hidden; border: 1px solid var(--border-default); min-height: 300px; display: flex; align-items: flex-end; background: linear-gradient(155deg, var(--teal-700), var(--teal-900)); box-shadow: var(--shadow-md); }
.imgband.tall { min-height: clamp(280px, 34vw, 380px); }
.imgband.sand { background: linear-gradient(155deg, var(--sand-200), var(--sand-400)); }
.imgband::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 26px, rgba(243,239,228,0.05) 26px 27px); }
.imgband.sand::before { background: repeating-linear-gradient(90deg, transparent 0 26px, rgba(14,31,33,0.05) 26px 27px); }
.imgband::after { content: ""; position: absolute; top: -28%; right: -8%; width: 48%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gold-400) 26%, transparent), transparent 68%); pointer-events: none; }
.imgband .cap { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; margin: var(--space-5) var(--space-6); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--ls-wide); color: rgba(243, 239, 228, 0.74); background: rgba(14, 31, 33, 0.3); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); border: 1px solid rgba(243, 239, 228, 0.16); border-radius: var(--radius-full); padding: 7px 15px; }
.imgband.sand .cap { color: var(--sand-700); background: rgba(255, 255, 255, 0.42); border-color: rgba(14, 31, 33, 0.08); }
.imgband .cap .ic { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--gold-400); flex: none; }
.imgband .cap svg { width: 14px; height: 14px; flex: none; color: var(--gold-400); }
.imgband.sand .cap svg { color: var(--gold-600); }
.imgband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.imgband.photo { background: var(--teal-900); }
.imgband.photo::before { display: none; }
.imgband.photo::after { inset: 0; width: auto; height: auto; aspect-ratio: auto; border-radius: 0; background: linear-gradient(to top, rgba(14, 31, 33, 0.55), rgba(14, 31, 33, 0) 55%); }
/* slim render thumb inside a station fan */
.render-thumb { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 92px; background: linear-gradient(155deg, var(--teal-700), var(--teal-900)); border: 1px solid var(--border-default); display: flex; align-items: flex-end; }
.render-thumb::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 16px, rgba(243,239,228,0.06) 16px 17px); }
.render-thumb .cap { position: relative; z-index: 1; margin: 8px 10px; font-family: var(--font-mono); font-size: var(--text-2xs); color: rgba(243, 239, 228, 0.7); }

/* ---- Reality vignette ---------------------------------------------------- */
.vignette {
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-2xl); padding: clamp(28px, 4vw, 48px); max-width: 760px; margin: 0 auto;
  box-shadow: var(--shadow-md); font-size: var(--text-lg); line-height: var(--lh-relaxed); color: var(--text-body);
}
.vignette-time {
  font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--text-subtle); margin-bottom: var(--space-5); display: flex; align-items: center; gap: var(--space-4);
}
.vignette-time::before, .vignette-time::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.vignette p { margin: 0 0 var(--space-4); }
.vignette .quote { font-style: italic; color: var(--teal-800); }
.vignette ul { list-style: none; padding: 0; margin: var(--space-5) 0; }
.vignette li { padding: var(--space-3) 0 var(--space-3) var(--space-8); position: relative; border-top: 1px dashed var(--border-default); }
.vignette li::before { content: "→"; position: absolute; left: 0; color: var(--rust-500); font-weight: var(--fw-bold); }
.vignette li b { color: var(--teal-900); font-weight: var(--fw-semibold); }
.vignette .punchline { font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--lh-snug); color: var(--teal-900); margin: var(--space-6) 0 0; }
.vignette .punchline em { font-style: normal; background: linear-gradient(180deg, transparent 62%, var(--gold-200) 62%); padding: 0 3px; }
.vignette .bridge { margin-top: var(--space-4); color: var(--text-muted); font-size: var(--text-md); }

/* ---- Pillars ------------------------------------------------------------- */
.pillar { display: grid; grid-template-columns: 1fr 0.92fr; gap: clamp(32px, 5vw, 72px); padding: clamp(36px, 5vw, 56px) 0; border-bottom: 1px solid var(--border-subtle); align-items: center; }
.pillar:last-of-type { border-bottom: 0; }
.pillar-num { font-family: var(--font-display); font-size: clamp(48px, 6vw, 72px); font-weight: var(--fw-semibold); color: var(--gold-400); line-height: 1; }
.pillar h3 { font-size: clamp(1.5rem, 1rem + 1.6vw, 1.9rem); line-height: var(--lh-snug); color: var(--teal-900); margin: var(--space-3) 0 var(--space-4); }
.pillar p { font-size: var(--text-lg); line-height: var(--lh-normal); color: var(--text-body); margin: 0 0 var(--space-3); }
.pillar p.detail { color: var(--text-muted); font-size: var(--text-md); }
.pillar p.detail i, .pillar p i { color: var(--teal-700); font-style: italic; }
.vis {
  background: var(--surface-page); border: 1px solid var(--border-default);
  border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.vis-label { font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-subtle); margin-bottom: var(--space-4); }
.transition-line { text-align: center; font-family: var(--font-display); font-size: var(--text-xl); color: var(--text-muted); max-width: 40ch; margin: var(--space-12) auto 0; text-wrap: balance; }
.transition-line em { font-style: italic; color: var(--teal-700); }

/* flow diagram (pillar 2) */
.flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: center; }
.flow-box { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-4); text-align: center; }
.flow-box .lab { font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.flow-box .nm { font-size: var(--text-md); color: var(--teal-900); font-weight: var(--fw-semibold); }
.flow-box.master { border-color: var(--border-brand); background: linear-gradient(180deg, var(--surface-card), var(--surface-brand-soft)); }
.flow-box.master .lab { color: var(--text-brand); }
.flow-arrow { text-align: center; color: var(--brand); font-size: 22px; }
.flow-arrow .sm { display: block; font-size: var(--text-2xs); font-weight: var(--fw-medium); letter-spacing: var(--ls-wide); color: var(--text-subtle); text-transform: uppercase; margin-top: 4px; }
.flow-note { font-size: var(--text-xs); color: var(--text-subtle); margin-top: var(--space-4); text-align: center; }

/* pipeline (pillar 3) */
.pipe { display: flex; flex-direction: column; gap: var(--space-4); }
.pipe-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid; font-size: var(--text-2xs); font-weight: var(--fw-semibold); white-space: nowrap; }
.pill.new { background: var(--status-new-bg); color: var(--status-new-fg); border-color: var(--status-new-bd); }
.pill.contacted { background: var(--status-contacted-bg); color: var(--status-contacted-fg); border-color: var(--status-contacted-bd); }
.pill.qualified { background: var(--status-qualified-bg); color: var(--status-qualified-fg); border-color: var(--status-qualified-bd); }
.pill.meeting { background: var(--status-meeting-bg); color: var(--status-meeting-fg); border-color: var(--status-meeting-bd); }
.pill.deposit { background: var(--status-deposit-bg); color: var(--status-deposit-fg); border-color: var(--status-deposit-bd); }
.pill.paid { background: var(--status-paid-bg); color: var(--status-paid-fg); border-color: var(--status-paid-bd); }
.pipe-arrow { color: var(--text-subtle); font-size: var(--text-sm); }
.substates { margin-left: 46px; padding-left: var(--space-4); border-left: 2px solid var(--border-default); display: flex; flex-direction: column; gap: 6px; }
.sub { font-size: var(--text-sm); display: flex; align-items: center; gap: var(--space-2); }
.sub .swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.sub.awaiting .swatch { background: var(--sand-400); }
.sub.thinking .swatch { background: var(--amber-500); }
.sub.unreachable .swatch { background: var(--rust-500); }
.sub .meta { color: var(--text-subtle); font-size: var(--text-xs); }

/* ---- Platform tour ------------------------------------------------------- */
.platform { background: var(--surface-card); }
.station { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); padding: clamp(40px, 5vw, 64px) 0; border-bottom: 1px solid var(--border-subtle); align-items: center; }
.station:last-of-type { border-bottom: 0; }
.station.flip .station-copy { order: 2; }
.station.flip .station-vis { order: 1; }
.verb-tag { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-brand); background: var(--surface-brand-soft); border: 1px solid var(--teal-100); border-radius: var(--radius-full); padding: 5px 12px; margin-bottom: var(--space-4); }
.verb-tag .idx { font-family: var(--font-display); color: var(--gold-600); }
.station h3 { font-size: clamp(1.5rem, 1rem + 1.5vw, 1.85rem); line-height: var(--lh-snug); margin: 0 0 var(--space-3); color: var(--teal-900); }
.station > .station-copy > p.desc { font-size: var(--text-lg); color: var(--text-muted); margin: 0 0 var(--space-5); line-height: var(--lh-normal); }
.caps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.caps li { font-size: var(--text-md); line-height: var(--lh-normal); color: var(--text-body); padding-left: var(--space-6); position: relative; }
.caps li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 2px; background: var(--gold-400); }
.caps li b { color: var(--teal-900); font-weight: var(--fw-semibold); }
.roadmap-note { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--text-subtle); font-style: italic; }

/* station visuals (cards/diagrams) */
.diag { background: var(--surface-page); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.diag .vis-label { margin-bottom: var(--space-4); }

/* acquire funnel */
.chan-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-body); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-full); padding: 6px 12px; }
.chip svg { width: 15px; height: 15px; color: var(--text-muted); }
.funnel-arrow { display: flex; justify-content: center; color: var(--text-subtle); font-size: 18px; margin: 2px 0; }
.lead-card { background: var(--surface-card); border: 1px solid var(--border-brand); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.lead-card .lc-top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.lc-avatar { width: 34px; height: 34px; border-radius: 30%; background: var(--teal-700); color: var(--text-on-brand); display: grid; place-items: center; font-size: var(--text-sm); font-weight: var(--fw-semibold); flex: none; }
.lc-name { font-weight: var(--fw-semibold); color: var(--teal-900); font-size: var(--text-md); }
.lc-meta { font-size: var(--text-xs); color: var(--text-muted); }
.lc-merge { font-size: var(--text-xs); color: var(--green-700); display: inline-flex; align-items: center; gap: 5px; background: var(--green-50); border: 1px solid var(--green-100); border-radius: var(--radius-full); padding: 3px 9px; }

/* engage */
.bubbles { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.bubble { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: var(--text-sm); line-height: 1.4; }
.bubble .src { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); font-weight: var(--fw-semibold); opacity: 0.7; display: block; margin-bottom: 2px; }
.bubble.in { align-self: flex-start; background: var(--surface-sunken); color: var(--text-body); border: 1px solid var(--border-subtle); border-bottom-left-radius: 4px; }
.bubble.out { align-self: flex-end; background: var(--teal-700); color: var(--text-on-brand); border-bottom-right-radius: 4px; }
.bubble.out .src { color: var(--gold-300); opacity: 1; }
.seq { border-top: 1px dashed var(--border-default); padding-top: var(--space-4); }
.seq-step { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-body); padding: 5px 0; }
.seq-step .node { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: grid; place-items: center; font-size: var(--text-2xs); color: var(--text-muted); flex: none; background: var(--surface-card); }
.seq-step .node.on { background: var(--teal-700); border-color: var(--teal-700); color: var(--text-on-brand); }
.seq-step .when { color: var(--text-subtle); font-size: var(--text-xs); margin-left: auto; }

/* sell — fanned cards */
.fan { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.minicard { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-3); box-shadow: var(--shadow-xs); }
.minicard .mc-lab { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-subtle); font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }
.minicard.tall { grid-row: span 2; }
.mini-bgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.mini-bgrid .cell { border-radius: 3px; }
.roi-mini { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--green-700); font-weight: var(--fw-semibold); line-height: 1; }
.roi-mini-lab { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 4px; }
.offer-cover { background: linear-gradient(155deg, var(--teal-800), var(--teal-900)); color: var(--text-on-brand); border-radius: var(--radius-md); padding: var(--space-4); border: 0; }
.offer-cover .oc-lab { color: var(--gold-300); }
.offer-cover .oc-title { font-family: var(--font-display); font-size: var(--text-lg); margin-top: var(--space-2); }
.offer-cover .oc-meta { font-size: var(--text-2xs); color: rgba(243,239,228,0.7); margin-top: var(--space-1); }

/* close — payment plan table */
.ptable { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ptable th { text-align: left; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-subtle); font-weight: var(--fw-semibold); padding: 0 0 var(--space-2); border-bottom: 1px solid var(--border-default); }
.ptable td { padding: 9px 0; border-bottom: 1px solid var(--border-subtle); color: var(--text-body); }
.ptable td.num, .ptable th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ptable tr.allocated td { background: var(--surface-accent-soft); }
.ptable th:first-child, .ptable td:first-child { padding-left: 12px; }
.ptable tr.allocated td:first-child { box-shadow: inset 3px 0 0 var(--gold-400); }
.ptable .tag-paid { color: var(--green-700); font-weight: var(--fw-semibold); font-size: var(--text-xs); }
.ptable .tag-due { color: var(--amber-700); font-weight: var(--fw-semibold); font-size: var(--text-xs); }
.alloc-note { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-3); display: inline-flex; align-items: center; gap: 6px; }
.alloc-note svg, .lc-merge svg, .ledger-foot svg, .chip-advance svg { width: 15px; height: 15px; flex: none; }

/* know — dashboard */
.dash { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.funnel-bars { display: flex; flex-direction: column; gap: 6px; }
.fbar { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: var(--space-2); font-size: var(--text-xs); }
.fbar .fb-lab { color: var(--text-muted); }
.fbar .fb-track { height: 14px; background: var(--surface-sunken); border-radius: var(--radius-xs); overflow: hidden; }
.fbar .fb-fill { height: 100%; background: var(--teal-500); border-radius: var(--radius-xs); }
.fbar .fb-val { font-family: var(--font-mono); color: var(--text-body); font-variant-numeric: tabular-nums; }
.roi-chart { display: flex; align-items: flex-end; gap: 8px; height: 96px; padding-top: var(--space-3); }
.roi-chart .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; height: 100%; }
.roi-chart .bar { width: 100%; border-radius: var(--radius-xs) var(--radius-xs) 0 0; background: var(--gold-400); }
.roi-chart .clab { font-size: var(--text-2xs); color: var(--text-subtle); }

/* govern — permission matrix */
.matrix { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; font-size: var(--text-xs); }
.matrix > div { background: var(--surface-card); padding: 8px 10px; display: flex; align-items: center; }
.matrix .mh { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-subtle); font-weight: var(--fw-semibold); background: var(--surface-sunken); }
.matrix .rl { color: var(--text-body); }
.matrix .yes { color: var(--green-600); justify-content: center; }
.matrix .no { color: var(--sand-400); justify-content: center; }
.matrix .mask { color: var(--amber-600); justify-content: center; font-size: var(--text-2xs); }

/* ---- Spotlights (Finance, Calculator, Automation) ------------------------ */
.spotlight { }
.spot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.spot-grid.flip .spot-copy { order: 2; }
.proof { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: flex; flex-direction: column; gap: var(--space-3); }
.proof li { font-size: var(--text-md); line-height: var(--lh-normal); color: var(--text-body); padding-left: var(--space-8); position: relative; }
.proof li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-brand-soft); border: 1px solid var(--teal-200); }
.proof li::after { content: ""; position: absolute; left: 6.5px; top: 0.42em; width: 3.5px; height: 7px; border: solid var(--teal-700); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.proof li b { color: var(--teal-900); font-weight: var(--fw-semibold); }
.spot-body { font-size: var(--text-lg); color: var(--text-muted); line-height: var(--lh-normal); margin: 0; text-wrap: pretty; }

/* finance ledger table */
.ledger { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.ledger-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-default); background: var(--surface-sunken); }
.ledger-head .lh-title { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--teal-900); }
.ledger-head .lh-meta { font-size: var(--text-2xs); color: var(--text-subtle); font-family: var(--font-mono); }
.gl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.gl th { text-align: left; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-subtle); font-weight: var(--fw-semibold); padding: var(--space-3) var(--space-5) var(--space-2); }
.gl td { padding: 8px var(--space-5); border-top: 1px solid var(--border-subtle); color: var(--text-body); }
.gl td.num, .gl th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.gl .acct { color: var(--text-muted); }
.gl tr.total td { border-top: 2px solid var(--border-strong); font-weight: var(--fw-semibold); color: var(--teal-900); }
.gl .balanced { color: var(--green-700); }
.ledger-foot { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--border-default); background: var(--green-50); color: var(--green-700); font-size: var(--text-xs); font-weight: var(--fw-medium); }

/* calculator snapshot card */
.snapshot { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.snap-head { background: linear-gradient(155deg, var(--teal-800), var(--teal-900)); color: var(--text-on-brand); padding: var(--space-5) var(--space-6); position: relative; overflow: hidden; }
.snap-head::after { content: ""; position: absolute; top: -40%; right: -10%; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gold-400) 32%, transparent), transparent 70%); }
.snap-head .sh-lab { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--gold-300); font-weight: var(--fw-semibold); }
.snap-head .sh-unit { font-family: var(--font-display); font-size: var(--text-xl); margin-top: 4px; }
.snap-head .sh-scn { font-size: var(--text-xs); color: rgba(243,239,228,0.75); margin-top: 4px; }
.waterfall { padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.wf-row { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); padding: 7px 0; border-bottom: 1px solid var(--border-subtle); }
.wf-row .wf-lab { color: var(--text-muted); }
.wf-row .wf-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-body); }
.wf-row.neg .wf-val { color: var(--rust-600); }
.wf-row.net { border-bottom: 0; }
.wf-row.net .wf-lab { color: var(--teal-900); font-weight: var(--fw-semibold); }
.wf-row.net .wf-val { color: var(--teal-900); font-weight: var(--fw-semibold); font-size: var(--text-md); }
.roi-band { display: flex; align-items: baseline; justify-content: space-between; padding: var(--space-5) var(--space-6); background: var(--surface-accent-soft); border-top: 1px solid var(--gold-200); }
.roi-band .rb-lab { font-size: var(--text-sm); color: var(--gold-700); font-weight: var(--fw-medium); }
.roi-band .rb-val { font-family: var(--font-display); font-size: clamp(2.2rem, 1.5rem + 2vw, 3rem); color: var(--gold-700); font-weight: var(--fw-semibold); line-height: 1; }
.snap-foot { font-size: var(--text-2xs); color: var(--text-subtle); padding: var(--space-3) var(--space-6); border-top: 1px solid var(--border-subtle); font-style: italic; }

/* automation — what's next */
.whatsnext { background: var(--surface-page); }
.eyebrow.next { color: var(--info-600); display: inline-flex; align-items: center; gap: var(--space-2); }
.eyebrow.next .dotnext { width: 7px; height: 7px; border-radius: 50%; background: var(--info-500); display: inline-block; }
.eyebrow.next.live { color: var(--green-700); }
.eyebrow.next.live .dotnext { background: var(--green-500); animation: livepulse 2.6s var(--ease-in-out) infinite; }

/* logo trust row (production) */
.trust-row { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-10); flex-wrap: wrap; }
.trust-lab { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--ls-wider); color: var(--text-subtle); font-weight: var(--fw-semibold); }
.trust-row image-slot { width: 200px; height: 56px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.trust-logo { height: 38px; width: auto; display: block; }

/* hero building board (axes + live stats + ticker) */
.bmap-board { display: grid; grid-template-columns: 22px repeat(8, 1fr); gap: 6px; align-items: center; }
.bm-type { font-size: 9px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-subtle); text-align: center; font-weight: var(--fw-semibold); }
.bm-floor { font-family: var(--font-mono); font-size: 9px; color: var(--text-subtle); text-align: center; }
.cell.live { position: relative; }
.cell.live::after { content: ""; position: absolute; inset: -2px; border-radius: var(--radius-sm); border: 1.5px solid var(--amber-500); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .cell.live::after { animation: cellpulse 1.8s var(--ease-in-out) infinite; } }
@keyframes cellpulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.bmap-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); font-size: var(--text-xs); color: var(--text-muted); }
.bm-stat b { font-family: var(--font-display); font-size: 17px; color: var(--teal-900); font-weight: var(--fw-semibold); margin-right: 5px; }
.bm-stat.val { margin-left: auto; font-family: var(--font-mono); color: var(--text-accent); font-weight: var(--fw-semibold); }
.bm-stat.val span { color: var(--text-muted); font-weight: var(--fw-regular); margin-left: 5px; font-family: var(--font-sans); }
.bmap-ticker { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-muted); min-height: 16px; transition: opacity 0.3s var(--ease-out); }
.bmap-ticker.out { opacity: 0; }
.bmap-ticker .tk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); flex: none; }
.rule-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); overflow: hidden; }
.rule-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-default); }
.rule-head .rh-title { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--teal-900); display: inline-flex; align-items: center; gap: var(--space-2); }
.rule-head .rh-title svg { width: 16px; height: 16px; color: var(--gold-600); }
.checked-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-2xs); font-weight: var(--fw-semibold); color: var(--green-700); background: var(--green-50); border: 1px solid var(--green-100); border-radius: var(--radius-full); padding: 4px 10px; }
.checked-badge svg { width: 12px; height: 12px; }
.rule-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.clause { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-3); align-items: start; }
.clause .kw { font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); padding: 5px 0; }
.clause.when .kw { color: var(--info-600); }
.clause.if .kw { color: var(--amber-700); }
.clause.then .kw { color: var(--teal-700); }
.clause .val { background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 8px 12px; font-size: var(--text-sm); color: var(--text-body); }
.clause .val .tk { display: inline-block; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-xs); padding: 1px 7px; margin: 2px 3px 2px 0; font-size: var(--text-xs); }
.clause-arrow { text-align: center; color: var(--text-subtle); font-size: var(--text-sm); }
.chip-advance { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }
.status-line.warn { background: var(--info-50); border-color: var(--info-100); color: var(--info-700); }

/* automation — triggers → engine → actions scheme */
.auto-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: center; margin: var(--space-6) 0 var(--space-4); }
.af-col { display: flex; flex-direction: column; gap: var(--space-2); }
.af-h { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: var(--ls-wider); font-weight: var(--fw-semibold); color: var(--text-subtle); margin-bottom: 2px; }
.af-chip { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--text-body); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 8px 12px; box-shadow: var(--shadow-xs); }
.af-chip svg { width: 15px; height: 15px; color: var(--text-brand); flex: none; }
.af-engine { width: 46px; height: 46px; border-radius: 50%; background: var(--surface-accent-soft); border: 1px solid var(--gold-200); display: grid; place-items: center; box-shadow: var(--shadow-accent); }
.af-engine svg { width: 20px; height: 20px; color: var(--gold-600); }
.rule-log { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.rule-log .rl-item { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--text-muted); background: var(--surface-page); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 8px 12px; }
.rule-log .rl-item svg { width: 13px; height: 13px; color: var(--green-600); flex: none; }
.rule-log .rl-when { margin-left: auto; font-family: var(--font-mono); color: var(--text-subtle); }
@media (max-width: 560px) { .auto-flow { grid-template-columns: 1fr; } .af-engine { justify-self: center; transform: rotate(90deg); } }

/* ---- Audiences (4 cards) ------------------------------------------------- */
.aud-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin-top: var(--space-6); }
.aud { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--space-8); box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.aud:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.aud-tag { display: inline-block; font-size: var(--text-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-accent); margin-bottom: var(--space-3); }
.aud h3 { font-size: var(--text-2xl); line-height: var(--lh-snug); color: var(--teal-900); margin: 0 0 var(--space-4); }
.aud .aq { font-size: var(--text-md); font-style: italic; color: var(--teal-800); margin: 0 0 var(--space-4); padding-left: var(--space-4); border-left: 2px solid var(--gold-400); }
.aud ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.aud li { font-size: var(--text-md); line-height: var(--lh-normal); color: var(--text-body); padding-left: var(--space-5); position: relative; }
.aud li::before { content: "·"; position: absolute; left: 6px; color: var(--brand); font-weight: var(--fw-bold); }

/* audiences carousel (horizontal, swipeable) */
.aud-carousel { position: relative; margin-top: var(--space-6); }
.aud-viewport { overflow: hidden; }
.aud-track { display: flex; gap: var(--space-5); padding: var(--space-2) 0 var(--space-3); transition: transform 0.45s var(--ease-out); will-change: transform; }
.aud-track .aud { flex: 0 0 clamp(270px, 31%, 372px); }
.car-nav { position: absolute; top: calc(50% - var(--space-3)); transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: var(--surface-card); border: 1px solid var(--border-default); box-shadow: var(--shadow-md); cursor: pointer; display: grid; place-items: center; font-size: 24px; line-height: 0; color: var(--text-brand); z-index: 3; transition: background var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.car-nav.prev { left: -14px; }
.car-nav.next { right: -14px; }
.car-nav:hover { background: var(--surface-brand-soft); }
.car-nav:disabled { opacity: 0.3; cursor: default; box-shadow: var(--shadow-xs); }
.car-dots { display: flex; gap: 8px; justify-content: center; margin-top: var(--space-5); }
.car-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: var(--border-strong); cursor: pointer; padding: 0; transition: all var(--dur-base) var(--ease-out); }
.car-dots button[aria-current="true"] { background: var(--brand); width: 22px; border-radius: 4px; }
@media (max-width: 560px) { .car-nav { display: none; } .aud-track .aud { flex-basis: 84%; } }

/* ---- Running in production ----------------------------------------------- */
.production { background: var(--surface-card); }
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-10); }
.stat { text-align: left; padding: var(--space-5) 0; border-top: 2px solid var(--gold-400); }
.stat .sv { font-family: var(--font-display); font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.5rem); color: var(--teal-900); font-weight: var(--fw-semibold); line-height: 1; }
.stat .sl { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-3); line-height: var(--lh-snug); }
.pullquote { max-width: 56ch; margin: var(--space-12) 0 0; }
.pullquote p { font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--lh-snug); color: var(--teal-800); margin: 0; }
.pullquote .who { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-4); }

/* ---- Integrations strip -------------------------------------------------- */
.stack { background: var(--surface-page); }
.logo-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.logo-chip { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); font-weight: var(--fw-medium); color: var(--text-muted); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 10px 16px; }
.logo-chip svg { width: 17px; height: 17px; color: var(--text-subtle); }

/* ---- Manifesto ----------------------------------------------------------- */
.manifesto { background: linear-gradient(155deg, var(--teal-800), var(--teal-900)); color: var(--text-on-brand); position: relative; overflow: hidden; }
.manifesto::after { content: ""; position: absolute; top: -10%; right: -5%; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gold-400) 18%, transparent), transparent 70%); pointer-events: none; }
.manifesto .container { position: relative; z-index: 1; }
.manifesto .eyebrow { color: var(--gold-400); }
.manifesto h2 { color: var(--text-on-brand); max-width: 16ch; font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem); line-height: var(--lh-tight); margin-bottom: var(--space-6); }
.manifesto p { font-size: var(--text-lg); line-height: var(--lh-normal); color: rgba(243, 239, 228, 0.78); margin: 0 0 var(--space-4); max-width: 64ch; }
.opinions { list-style: none; padding: 0; margin: var(--space-8) 0 var(--space-8); max-width: 64ch; }
.opinions li { font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--lh-snug); color: var(--text-on-brand); padding: var(--space-4) 0 var(--space-4) var(--space-6); border-top: 1px solid rgba(243, 239, 228, 0.14); position: relative; }
.opinions li:last-child { border-bottom: 1px solid rgba(243, 239, 228, 0.14); }
.opinions li::before { content: "—"; position: absolute; left: 0; color: var(--gold-400); }
.opinions li.accent { color: var(--gold-200); }
.manifesto .closer { font-size: var(--text-md); color: rgba(243, 239, 228, 0.6); font-style: italic; }

/* ---- Final CTA ----------------------------------------------------------- */
.cta-final { text-align: center; background: var(--surface-page); }
.cta-final h2 { color: var(--teal-900); margin: 0 auto var(--space-5); max-width: 18ch; font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem); line-height: var(--lh-tight); }
.cta-final p { font-size: var(--text-lg); color: var(--text-muted); max-width: 56ch; margin: 0 auto var(--space-8); line-height: var(--lh-normal); text-wrap: pretty; }
.cta-final .small { font-size: var(--text-sm); color: var(--text-subtle); margin-top: var(--space-5); }

/* ---- Footer -------------------------------------------------------------- */
footer.site { padding: var(--space-10) 0; background: var(--surface-card); border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--text-muted); }
.footer-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.footer-links { display: inline-flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.footer-row .lang-toggle { vertical-align: middle; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; }
  .pillar { grid-template-columns: 1fr; gap: var(--space-6); }
  .station, .spot-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .station.flip .station-copy, .station.flip .station-vis,
  .spot-grid.flip .spot-copy, .spot-grid.flip .spot-vis { order: 0; }
  .aud-grid { grid-template-columns: 1fr; }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .dash { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .container, .container-narrow { padding: 0 20px; }
  .nav { height: 58px; }
  .brand { font-size: var(--text-lg); }
  .brand svg { width: 26px; height: 26px; }
  .nav-right { gap: var(--space-3); }
  .lang-toggle button { padding: 5px 9px; }
  .btn-nav { padding: 0.5em 0.9em; font-size: var(--text-sm); }
  .hero .lead { font-size: var(--text-lg); }
  .status-line { font-size: var(--text-sm); padding: 8px 13px; }
  .bmap { padding: var(--space-4); }
  .bmap-board { grid-template-columns: 18px repeat(8, 1fr); gap: 4px; }
  .cell .u { font-size: 9px; }
  .bm-type { font-size: 8px; letter-spacing: 0; }
  .bm-floor { font-size: 8px; }
  .bmap-stats { gap: 10px 14px; }
  .bm-stat b { font-size: 15px; }
  .bm-stat.val { margin-left: 0; flex-basis: 100%; }
  .stat-band { grid-template-columns: 1fr 1fr; }
  .fan { grid-template-columns: 1fr; }
  .minicard.tall { grid-row: auto; }
  .vignette .punchline { font-size: var(--text-xl); }
  .imgband.tall { min-height: 220px; }
}

/* ---- Reveal on scroll ---------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }