/* ==========================================================================
   Voca — landing.html page layout
   Layout only. Colours, type and spacing come from tokens/ + components/.
   Spacing uses the 4/8 scale exclusively (var(--space-*) / var(--text-*)).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
/* No `overflow` on body — it would break the sticky header (see nav.css). */
body { margin: 0; background: var(--bg-page); color: var(--text-primary); }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
/* Anchor targets clear the sticky header */
[id] { scroll-margin-top: var(--space-9); }

/* Section shell — one padding rhythm for the whole page (64px desktop / 32 mobile),
   generous horizontal gutter clamped between two on-scale values (24 → 64). */
.section {
  padding-block: var(--space-9);
  padding-inline: clamp(var(--space-5), 5vw, var(--space-8));
}
.section-inner { max-width: var(--container-max); margin: 0 auto; }
.section--muted { background: var(--bg-page); }
.section--surface { background: var(--bg-surface); border-block: 1px solid var(--border-default); }

.kicker {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--coral-700);
  margin-bottom: var(--space-3);
}
.section-head { max-width: 34ch; margin-bottom: var(--space-7); }
.section-head h2 { font-size: var(--text-2xl); }
.section-head p { font-size: var(--text-base); color: var(--text-secondary); margin: var(--space-3) 0 0; }

/* ============================ Hero ============================ */
.hero {
  padding-block: var(--space-10) var(--space-9);
  padding-inline: clamp(var(--space-5), 5vw, var(--space-8));
}
.hero-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-8);
  align-items: center;
}
.hero-copy { max-width: 60ch; }
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-brand);
  background: var(--navy-50);
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  margin-bottom: var(--space-5);
}
.badge-pill::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--data-primary);
}
.hero h1 { font-size: var(--text-4xl); }
.hero h1 span { display: block; }
.hero-copy > p {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 54ch;
  margin: var(--space-5) 0 0;
}
.hero-copy > .source { margin-top: var(--space-3); }
.actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }

/* Hero mini command-center */
.hero-panel {
  background: var(--bg-inverse);
  color: var(--text-on-brand);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--navy-900) 55%, transparent);
}
.hero-panel-head { display: flex; align-items: center; justify-content: space-between; }
.hero-panel-title { font-size: var(--text-sm); font-weight: 700; }
.hero-panel-status {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs);
  color: color-mix(in srgb, var(--text-on-brand) 70%, transparent);
}
.hero-panel-grid { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: center; }
.hero-spark-block { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.hero-spark-top { display: flex; align-items: baseline; gap: var(--space-2); }
.hero-spark-value { font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-spark-delta { font-size: var(--text-xs); color: var(--coral-300); font-weight: 700; }
.hero-spark-label { font-size: var(--text-xs); color: color-mix(in srgb, var(--text-on-brand) 65%, transparent); }
.hero-chips { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.hero-chip {
  background: color-mix(in srgb, var(--text-on-brand) 7%, transparent);
  border-radius: var(--radius-default);
  padding: var(--space-3) var(--space-4);
}
.hero-chip-value { font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-chip-label { font-size: var(--text-xs); color: color-mix(in srgb, var(--text-on-brand) 65%, transparent); margin-top: var(--space-1); }

@media (max-width: 991px) {
  .hero-inner { grid-template-columns: 1fr; gap: var(--space-7); }
  .hero-panel { order: 2; }
}

/* ============================ Trust strip ============================ */
.trust { background: var(--bg-surface); border-block: 1px solid var(--border-default); }
.trust-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-7) clamp(var(--space-5), 5vw, var(--space-8));
}
.trust-title { font-size: var(--text-base); color: var(--text-secondary); margin: 0 0 var(--space-5); }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.trust-item { display: flex; flex-direction: column; gap: var(--space-1); padding-inline-start: var(--space-4); border-inline-start: 2px solid var(--data-primary); }
.trust-value { font-size: var(--text-3xl); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1; }
.trust-label { font-size: var(--text-sm); color: var(--text-secondary); }
.trust-source { font-size: var(--text-xs); color: var(--data-axis-text); }
@media (max-width: 767px) { .trust-grid { grid-template-columns: 1fr; gap: var(--space-4); } }

/* ============================ Problem ============================
   Balanced composition: argument + the single punchline stat (the 88/47 gap)
   share the top row; the four supporting stats sit in an even row beneath.
   (Four near-identical bars read as noise — as a row of figures they scan.) */
.problem-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}
.problem-copy h2 { font-size: var(--text-2xl); margin-bottom: var(--space-4); max-width: 20ch; }
.problem-copy p { font-size: var(--text-base); color: var(--text-secondary); max-width: 54ch; margin: 0 0 var(--space-4); }
.problem-copy p.text-emphasis { color: var(--text-primary); margin-bottom: var(--space-2); }
@media (max-width: 900px) { .problem-top { grid-template-columns: 1fr; gap: var(--space-6); } }

.gap-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-default);
  padding: var(--space-6);
}
.gap-card-title { font-size: var(--text-sm); font-weight: 700; margin: 0 0 var(--space-5); }
.gap-note {
  font-size: var(--text-sm);
  color: var(--text-primary);
  margin: var(--space-5) 0 var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-default);
}

.problem-stats {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-default);
}
.problem-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-5);
}
.problem-stat { display: flex; flex-direction: column; gap: var(--space-2); }
.problem-stat-num {
  font-family: var(--font-family-base);
  font-weight: 700;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--data-primary);
  font-variant-numeric: tabular-nums;
}
.problem-stat-label { font-size: var(--text-sm); color: var(--text-secondary); }
@media (max-width: 900px) { .problem-stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
@media (max-width: 520px) { .problem-stats-grid { grid-template-columns: 1fr; } }

/* ============================ Solution ============================ */
.solution-top {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-8);
  align-items: start;
  margin-bottom: var(--space-7);
}
.solution-top h2 { font-size: var(--text-2xl); max-width: 20ch; }
.solution-copy p { font-size: var(--text-base); color: var(--text-secondary); max-width: 56ch; margin: 0 0 var(--space-4); }
.solution-copy p:last-child { margin-bottom: 0; }
.solution-copy p.text-emphasis { color: var(--text-primary); }
@media (max-width: 900px) { .solution-top { grid-template-columns: 1fr; gap: var(--space-5); } }

/* Live feed panel (dark) */
.feed-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.feed-panel-head .live { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: color-mix(in srgb, var(--text-on-brand) 65%, transparent); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral-300); display: inline-block; }
.feed-item { padding-block: var(--space-4); border-top: 1px solid color-mix(in srgb, var(--text-on-brand) 12%, transparent); display: flex; flex-direction: column; gap: var(--space-2); }
.feed-item:first-child { border-top: 0; }
.feed-item-top { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.feed-meta { font-size: var(--text-xs); color: color-mix(in srgb, var(--text-on-brand) 55%, transparent); margin-inline-start: auto; }
.feed-item p { margin: 0; font-size: var(--text-sm); color: color-mix(in srgb, var(--text-on-brand) 92%, transparent); }

/* ============================ Dashboard ============================
   KPIs + live feed + approval queue only. (The chart row was removed —
   the hero already carries the gauge/trend story.) */
.dash-panel { overflow: hidden; padding: 0; }
.dash-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); background: var(--bg-page); border-bottom: 1px solid var(--border-default); }
.dash-head-title { font-weight: 700; font-size: var(--text-sm); }
.dash-head .live { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-secondary); }
.dash-head .live .live-dot { background: var(--bg-accent); }

.dash-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-bottom: 1px solid var(--border-default); }
.dash-metric { padding: var(--space-5); border-inline-end: 1px solid var(--border-default); }
.dash-metric .stat-number { font-size: var(--text-2xl); }
.dash-metric .delta { font-size: var(--text-xs); color: var(--coral-700); margin-top: var(--space-1); }
.dash-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.dash-feed { padding: var(--space-5); border-inline-end: 1px solid var(--border-default); }
.dash-queue { padding: var(--space-5); background: var(--bg-page); }
.dash-feed-item { padding-block: var(--space-4); border-top: 1px solid var(--border-default); display: flex; flex-direction: column; gap: var(--space-3); }
.dash-feed-item:first-child { border-top: 0; }
.dash-feed-item p.body { margin: 0; font-size: var(--text-sm); }
.dash-reply { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); background: var(--bg-accent-subtle); border-inline-start: 3px solid var(--bg-accent); border-radius: var(--radius-sm); }
.dash-reply .reply-label { font-size: var(--text-xs); font-weight: 700; color: var(--coral-700); white-space: nowrap; }
.dash-reply p { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
@media (max-width: 820px) { .dash-cols { grid-template-columns: 1fr; } .dash-feed { border-inline-end: 0; border-bottom: 1px solid var(--border-default); } }

/* ============================ Capabilities ============================ */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
@media (max-width: 991px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }

/* ============================ Proof ============================ */
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@media (max-width: 900px) { .proof-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
@media (max-width: 520px) { .proof-grid { grid-template-columns: 1fr; } }

/* ============================ Pricing ============================ */
.pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}
.pricing-copy h2 { font-size: var(--text-2xl); max-width: 24ch; }
.pricing-copy > p { font-size: var(--text-base); color: var(--text-secondary); max-width: 60ch; margin: var(--space-4) 0 0; }
.pricing-copy .terms { font-size: var(--text-sm); color: var(--data-axis-text); margin-top: var(--space-5); }
.cost-card {
  background: var(--bg-page);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-default);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.cost-card-title { font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--data-axis-text); margin: 0; }
.cost-ratio {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--data-primary);
  margin: 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-default);
}
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ============================ Final CTA ============================ */
.final-cta { background: var(--bg-accent); color: var(--text-on-accent); }
.final-cta-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-10) clamp(var(--space-5), 5vw, var(--space-8)); }
.final-cta h2 { font-size: var(--text-3xl); color: var(--text-on-accent); max-width: 18ch; }
.final-cta p { font-size: var(--text-lg); max-width: 52ch; margin: var(--space-5) 0 0; color: color-mix(in srgb, var(--text-on-accent) 92%, transparent); }
.final-cta .trust-line { font-size: var(--text-xs); margin-top: var(--space-6); color: color-mix(in srgb, var(--text-on-accent) 82%, transparent); }

/* ============================ Footer ============================ */
.site-footer { padding: var(--space-6) clamp(var(--space-5), 5vw, var(--space-8)); display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; border-top: 1px solid var(--border-default); max-width: var(--container-max); margin: 0 auto; }
.site-footer img { height: 21px; opacity: 0.7; } /* +15% over the original 18px */
.site-footer span { font-size: var(--text-sm); color: var(--text-secondary); margin-inline-start: auto; }

/* ============================ Modal ============================ */
.modal-overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--navy-900) 60%, transparent); display: none; align-items: center; justify-content: center; padding: var(--space-5); z-index: 100; }
.modal-overlay.is-open { display: flex; }
.modal { background: var(--bg-surface); width: 100%; max-width: 440px; border-radius: var(--radius-default); padding: var(--space-6); position: relative; }
.modal-close { position: absolute; top: var(--space-4); inset-inline-end: var(--space-4); border: 0; background: transparent; font-size: var(--text-lg); line-height: 1; cursor: pointer; color: var(--text-secondary); }
.modal h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.modal .step > p { font-size: var(--text-sm); color: var(--text-secondary); margin: 0 0 var(--space-5); }
.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.field label { font-size: var(--text-xs); color: var(--text-secondary); }
.input { width: 100%; min-height: 40px; padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--text-sm); color: var(--text-primary); background: var(--bg-page); border: 1px solid var(--border-default); border-radius: var(--radius-sm); }
.input:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 0; }
.modal form { display: flex; flex-direction: column; }
.modal form .btn { margin-top: var(--space-2); }
.hidden { display: none !important; }

/* ============================ Scroll reveal ============================ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}