/* ============================================================
   Vonic — self-hosted fonts (was Google Fonts CDN; self-hosting
   avoids sending visitor IP addresses to Google on every page
   load). Inter and Space Grotesk ship as variable fonts, so one
   file covers the whole weight range used on the site.
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/space-grotesk-variable.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-500.woff2') format('woff2');
}

/* ============================================================
   Vonic — tokens
   ============================================================ */
:root {
  --ink: #0A0E1A;
  --ink-soft: #4B5566;
  --ink-faint: #7C8698;

  --paper: #FAFAF9;
  --surface: #FFFFFF;
  --line: #E4E7EE;

  --accent: #4338CA;
  --accent-hover: #362DAE;
  --accent-ink: #FFFFFF;
  --accent-soft: #EEF0FF;
  --accent-soft-line: #D9DCFB;

  --success: #15803D;
  --success-soft: #EAF7EE;
  --error: #DC2626;
  --error-soft: #FDECEC;

  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 22px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(10, 14, 26, 0.04), 0 12px 32px -16px rgba(10, 14, 26, 0.18);
  --shadow-hover: 0 4px 10px rgba(10, 14, 26, 0.06), 0 20px 40px -18px rgba(10, 14, 26, 0.22);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--paper);
  background-image: radial-gradient(var(--accent-soft-line) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); line-height: 1.15; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; }
ol, ul { margin: 0; padding: 0; list-style: none; }
fieldset { border: 0; margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hp-field { position: absolute; left: -9999px; top: -9999px; }

.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--space-2);
}

@media (min-width: 768px) {
  .wrap { padding: 0 var(--space-4); }
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: relative;
  padding-top: var(--space-3);
}
.site-header__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}
.wordmark--small { font-size: 17px; }
.site-header__tag {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}

/* Shared small header link — "Exit"/"Back to Vonic" on subpages
   (quiz, privacy policy) that share this header markup. */
.quiz-exit {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-faint);
  text-decoration: none;
}
.quiz-exit:hover { color: var(--ink); }

/* ============================================================
   Scroll cue — hints that the hero responds to scrolling, fades
   out permanently after the visitor scrolls a little. Deliberately
   NOT nested inside .hero, since GSAP applies a transform to that
   section while pinned, which would break position:fixed here.
   ============================================================ */
.scroll-cue {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  box-shadow: 0 8px 24px -6px rgba(67, 56, 202, 0.55), 0 2px 8px rgba(10, 14, 26, 0.12);
  pointer-events: none;
  opacity: 1;
  animation: scroll-cue-pulse 2.2s ease-in-out infinite;
  transition: opacity 400ms var(--ease-out);
}
.scroll-cue.is-hidden { opacity: 0; }

.scroll-cue__label {
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent-ink);
  white-space: nowrap;
}
.scroll-cue__icon {
  color: var(--accent-ink);
  animation: scroll-cue-bounce 1.4s ease-in-out infinite;
}

@keyframes scroll-cue-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
@keyframes scroll-cue-pulse {
  0%, 100% { box-shadow: 0 8px 24px -6px rgba(67, 56, 202, 0.55), 0 0 0 0 rgba(67, 56, 202, 0.35); }
  50% { box-shadow: 0 8px 24px -6px rgba(67, 56, 202, 0.55), 0 0 0 10px rgba(67, 56, 202, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue__icon, .scroll-cue { animation: none; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  padding: var(--space-6) 0 var(--space-7);
}
@media (min-width: 900px) {
  .hero { padding: var(--space-6) 0 var(--space-6); }
}
.hero__inner {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  width: 100%;
}
@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-6);
  }
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.eyebrow--center {
  text-align: center;
  margin-bottom: var(--space-3);
}
.eyebrow--on-dark { color: #8B8FD9; }

.hero__headline {
  font-size: clamp(34px, 4.6vw, 50px);
  font-weight: 700;
  color: var(--ink);
  max-width: 26ch;
}

.hero__subheadline {
  margin-top: var(--space-1);
  font-family: var(--font-display);
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 700;
  color: var(--accent);
  max-width: none;
}

.hero__sub {
  margin-top: var(--space-2);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* ============================================================
   Hero CTA — single button through to the quiz (see quiz.html)
   ============================================================ */
.hero__cta { margin-top: var(--space-4); max-width: 420px; }
.hero__cta-note {
  margin-top: var(--space-2);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* Buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-s);
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn--primary:hover { background: var(--accent-hover); }
.btn--large { height: 56px; padding: 0 var(--space-4); font-size: 16.5px; }
.btn--large svg { transition: transform var(--dur-fast) var(--ease-out); }
.btn--large:hover svg { transform: translateX(3px); }

.btn__spinner {
  display: none;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
}
.btn[data-loading="true"] .btn__spinner {
  display: inline-block;
  animation: spin 700ms linear infinite;
}
.btn[data-loading="true"] .btn__label { opacity: 0.85; }
.btn[disabled] { cursor: default; opacity: 0.85; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Hero visual — occupancy chart (signature element)
   ============================================================ */
.hero__visual { position: relative; }

/* Floating "insight" chips — decorative mockups of the product
   surfacing a forecast, giving the hero a sense of a live system
   rather than a static illustration. */
.insight-chip {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-hover);
  animation-duration: 5.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.insight-chip--predict {
  top: -16px;
  right: 20px;
  animation-name: chip-float-a;
}
.insight-chip--staff {
  bottom: -14px;
  left: -14px;
  animation-name: chip-float-b;
  animation-duration: 6.5s;
}
.insight-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.insight-chip__text { display: flex; flex-direction: column; line-height: 1.3; }
.insight-chip__text strong { font-size: 13px; font-weight: 600; color: var(--ink); }
.insight-chip__text span { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); }

@keyframes chip-float-a {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}
@keyframes chip-float-b {
  0%, 100% { transform: translateY(0) rotate(1deg); }
  50% { transform: translateY(7px) rotate(-1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .insight-chip { animation: none; }
}
@media (max-width: 480px) {
  .insight-chip { padding: 8px 12px; gap: 8px; }
  .insight-chip--predict { top: -12px; right: 10px; }
  .insight-chip--staff { bottom: -10px; left: -8px; }
  .insight-chip__icon { width: 26px; height: 26px; }
  .insight-chip__text strong { font-size: 12px; }
  .insight-chip__text span { font-size: 10px; }
}

.chart-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
  will-change: transform;
}

.chart-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.chart-card__title {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-soft);
}
.chart-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
}
.chart-card__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-soft);
}

.chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 180px;
  padding-top: var(--space-2);
}
.chart__bar {
  flex: 1;
  height: calc(var(--h) * 1%);
  min-height: 4px;
  border-radius: 5px 5px 2px 2px;
  background: var(--accent-soft);
  overflow: hidden;
  position: relative;
}
.chart__fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  border-radius: inherit;
}
.chart__bar--predicted {
  background: var(--accent-soft);
  outline: 1.5px dashed var(--accent);
  outline-offset: -1.5px;
}
.chart__bar--predicted .chart__fill {
  background: var(--accent-soft);
}

.chart__axis {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
}

.chart-card__legend {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.legend-swatch {
  width: 10px; height: 10px;
  border-radius: 3px;
}
.legend-swatch--actual { background: var(--accent); }
.legend-swatch--predicted { background: var(--accent-soft); outline: 1.5px dashed var(--accent); outline-offset: -1.5px; }

/* ============================================================
   Ledger — problem/solution section. Recreated to spec from
   design_handoff_problem_solution_section (high-fidelity handoff).
   Colors/spacing below are the exact values from that spec, not
   the site's own tokens — a deliberate one-off palette (warm
   stone neutrals + indigo-600) rather than a remap onto --ink/
   --line/--accent, per the handoff's fidelity requirement. Fonts
   map onto the site's existing families instead of the spec's
   Hanken Grotesk, per the handoff's own explicit allowance.
   ============================================================ */
.ledger {
  background: #FAFAF9;
  padding: 120px 40px 140px;
}
.ledger__wrap {
  max-width: 1180px;
  margin: 0 auto;
}

.ledger__header {
  display: grid;
  grid-template-columns: 1fr 168px 1fr;
  align-items: end;
  margin-bottom: 88px;
}
.ledger__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4F46E5;
  margin: 0 0 20px;
}
.ledger__heading {
  font-family: var(--font-display);
  font-size: 46px;
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 15ch;
  color: #1C1917;
}
.ledger__heading--accent { color: #4F46E5; max-width: 16ch; }
.ledger__header-sub {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: #57534E;
  margin: 20px 0 0;
  max-width: 44ch;
}

.ledger__pair {
  display: grid;
  grid-template-columns: 1fr 168px 1fr;
  align-items: start;
}
.ledger__pair + .ledger__pair { margin-top: 26px; }

/* Vertical offsets create the zig-zag the arrows read along. */
.ledger__pair--1 .ledger-card--solution { margin-top: 58px; }
.ledger__pair--2 .ledger-card--problem { margin-top: 78px; }
.ledger__pair--3 .ledger-card--solution { margin-top: 58px; }

.ledger-card {
  border-radius: 18px;
  padding: 34px 36px 38px;
}
.ledger-card--problem {
  background: #FFFFFF;
  border: 1px solid #E7E5E4;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
}
.ledger-card--solution {
  background: #EEEEFC;
  border: 1px solid #DEDEFB;
  box-shadow: 0 18px 40px -28px rgba(79, 70, 229, 0.55);
}
.ledger-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
.ledger-card__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: #A8A29E;
}
.ledger-card h3 {
  font-family: var(--font-display);
  font-size: 25px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
  color: #1C1917;
}
.ledger-card--problem p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: #57534E;
  margin: 0;
}
.ledger-card--solution p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: #44403C;
  margin: 0;
}

/* Problem-card glyph tile: three bespoke CSS-div glyphs standing
   in for trend / people / eye-off icons. */
.ledger-glyph {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #EEEEFC;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ledger-glyph--bars { align-items: flex-end; gap: 3px; padding-bottom: 11px; }
.ledger-glyph--bars span { width: 4px; border-radius: 1px; background: #4F46E5; }
.ledger-glyph--bars span:nth-child(1) { height: 8px; opacity: 0.45; }
.ledger-glyph--bars span:nth-child(2) { height: 14px; }
.ledger-glyph--bars span:nth-child(3) { height: 6px; opacity: 0.45; }

.ledger-glyph--people { gap: 4px; }
.ledger-glyph--people span { width: 10px; height: 10px; border-radius: 50%; background: #4F46E5; }
.ledger-glyph--people span:last-child { opacity: 0.4; }

.ledger-glyph--eye span { display: block; width: 16px; height: 16px; border-radius: 50%; border: 1.5px dashed #4F46E5; }

/* Arrow / spine column */
.ledger__arrow {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
}
.ledger__arrow svg {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 168px;
  height: auto;
  overflow: visible;
}
.ledger__arrow-path {
  stroke: #4F46E5;
  stroke-width: 1.5;
  stroke-dasharray: 5 6;
  fill: none;
}
.ledger__spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  border-left: 1px dashed #E7E5E4;
}
.ledger__spine--half { bottom: 50%; }

@media (prefers-reduced-motion: no-preference) {
  .ledger__arrow-path { animation: ledger-flow 6s linear infinite; }
}
@keyframes ledger-flow { to { stroke-dashoffset: -220; } }

/* Solution-card mini-artifacts */
.ledger-avatars { display: flex; gap: 8px; margin-bottom: 24px; }
.ledger-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #DEDEFB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #4F46E5;
}
.ledger-avatar--pending { border-style: dashed; border-color: #C7C7F7; color: #6366F1; }

.ledger-chip {
  background: #FFFFFF;
  border: 1px solid #DEDEFB;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.ledger-chip__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16A34A;
}
@media (prefers-reduced-motion: no-preference) {
  .ledger-chip__dot { animation: ledger-pulse 2.4s ease-in-out infinite; }
}
@keyframes ledger-pulse { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.35); } }
.ledger-chip__title { font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1.3; color: #1C1917; }
.ledger-chip__meta { font-family: var(--font-mono); font-size: 11.5px; color: #78716C; margin-top: 2px; }

.ledger-chart {
  background: #FFFFFF;
  border: 1px solid #DEDEFB;
  border-radius: 12px;
  padding: 14px 16px 12px;
  margin-bottom: 24px;
}
.ledger-chart__bars { display: flex; align-items: flex-end; gap: 5px; height: 42px; }
.ledger-chart__bars span { flex: 1; border-radius: 2px; background: #C7C7F7; }
.ledger-chart__bars span:nth-child(1) { height: 28%; }
.ledger-chart__bars span:nth-child(2) { height: 44%; }
.ledger-chart__bars span:nth-child(3) { height: 36%; }
.ledger-chart__bars span:nth-child(4) { height: 58%; }
.ledger-chart__bars span:nth-child(5) { height: 72%; background: #A5A5F2; }
.ledger-chart__bars span:nth-child(6) { height: 100%; background: #4F46E5; }
.ledger-chart__bars span:nth-child(7) { height: 86%; background: #4F46E5; opacity: 0.55; border: 1px dashed #4F46E5; }
.ledger-chart__bars span:nth-child(8) { height: 62%; background: #FFFFFF; border: 1px dashed #4F46E5; }
.ledger-chart__foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: #78716C;
  margin-top: 8px;
}
.ledger-chart__foot span:nth-child(2) { color: #4F46E5; }

/* Footer CTA */
.ledger__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 96px;
}
.ledger__hairline {
  height: 1px;
  flex: 1;
  background: linear-gradient(to right, rgba(231, 229, 228, 0), #E7E5E4);
}
.ledger__hairline--end { background: linear-gradient(to left, rgba(231, 229, 228, 0), #E7E5E4); }
.ledger__cta-link {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: #4F46E5;
  background: #FFFFFF;
  border: 1px solid #DEDEFB;
  border-radius: 999px;
  padding: 12px 22px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms var(--ease-out);
}
.ledger__cta-link:hover { background: #EEEEFC; }

/* 768–1023px: two columns, shrunk centre, smaller type, no offsets */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .ledger { padding: 96px 32px 110px; }
  .ledger__header, .ledger__pair { grid-template-columns: 1fr 96px 1fr; }
  .ledger__heading { font-size: 38px; }
  .ledger-card { padding: 28px; }
  .ledger-card h3 { font-size: 22px; }
  .ledger__pair--1 .ledger-card--solution,
  .ledger__pair--2 .ledger-card--problem,
  .ledger__pair--3 .ledger-card--solution { margin-top: 0; }
}

/* <768px: single column, short vertical connector instead of the
   horizontal arrow/spine pair. */
@media (max-width: 767.98px) {
  .ledger { padding: 80px 20px 96px; }

  .ledger__header { display: block; margin-bottom: 56px; }
  .ledger__header > div:first-child { margin-bottom: 40px; }
  .ledger__heading { font-size: 32px; max-width: none; }
  .ledger__header-sub { max-width: none; }

  .ledger__pair { display: flex; flex-direction: column; }
  .ledger__pair + .ledger__pair { margin-top: 40px; }
  .ledger__pair--1 .ledger-card--solution,
  .ledger__pair--2 .ledger-card--problem,
  .ledger__pair--3 .ledger-card--solution { margin-top: 0; }

  .ledger-card { padding: 28px; }
  .ledger-card h3 { font-size: 21px; }

  .ledger__arrow { min-height: 0; height: 48px; }
  .ledger__arrow svg, .ledger__spine { display: none; }
  .ledger__arrow::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 8px;
    left: 50%;
    border-left: 1.5px dashed #4F46E5;
    transform: translateX(-50%);
  }
  .ledger__arrow::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 6px solid #4F46E5;
    transform: translateX(-50%);
  }
}

/* ============================================================
   Value strip — three things Vonic does, side by side
   ============================================================ */
.value-strip { padding: var(--space-5) 0 var(--space-7); }

.value-strip__head { margin-bottom: var(--space-5); }

/* Base heading style shared by section titles (showcase, etc). */
.section-heading {
  font-size: clamp(28px, 3.6vw, 38px);
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  max-width: 26ch;
  margin: 0 auto;
}

/* This section's title is called out to be more attention-grabbing
   than a standard section heading — larger and tighter. */
.value-strip__head .section-heading {
  font-size: clamp(34px, 5vw, 52px);
  letter-spacing: -0.02em;
  max-width: 20ch;
}

.value-strip__grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 900px) {
  .value-strip__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
  }
}

.value-strip__item {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.value-strip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-m);
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.value-strip__item p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 38ch;
}
.value-strip__item p strong {
  color: var(--ink);
  font-weight: 600;
}

/* ============================================================
   Showcase — product mockups with a light/dark preview toggle
   ============================================================ */
.showcase {
  padding: var(--space-7) 0;
}

.showcase__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
}
.showcase__sub {
  color: var(--ink-soft);
  font-size: 16px;
  max-width: 46ch;
  margin: 0 auto;
}

.theme-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-top: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-card);
}
.theme-toggle__option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.theme-toggle__option:hover:not(.is-active) { color: var(--ink); }
.theme-toggle__option.is-active {
  background: var(--accent);
  color: var(--accent-ink);
}

.showcase .wrap { max-width: 1320px; }

.showcase__grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
@media (min-width: 900px) {
  .showcase__grid {
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    gap: var(--space-4);
  }
}

.showcase__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.showcase__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--line);
  box-shadow: var(--shadow-card);
}

/* Desktop: both mockups now share the same 4:3 crop, so they can
   sit at one identical, generous size instead of being derived
   from mismatched aspect ratios. Sized off the viewport (not a
   percentage of the auto-track column, which can't resolve against
   percentage-sized content) so the pair always fits its container:
   at the wrap's max width the two boxes plus the gap between them
   land exactly at the available content width, then hold there. */
@media (min-width: 900px) {
  .showcase__item { align-items: center; width: auto; }
  .showcase__frame {
    width: clamp(240px, calc(50vw - 48px), 600px);
  }
  .showcase__caption { max-width: 480px; justify-content: center; }
}

.showcase__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 500ms var(--ease-out);
}
.showcase__img.is-dark { opacity: 0; }
.showcase.is-dark-preview .showcase__img.is-light { opacity: 0; }
.showcase.is-dark-preview .showcase__img.is-dark { opacity: 1; }

.showcase__caption {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0 4px;
}
.showcase__caption-tag {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
}
.showcase__caption-text {
  font-size: 14px;
  color: var(--ink-soft);
}

.showcase__footnote {
  margin: var(--space-6) auto 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  max-width: 46ch;
  text-align: center;
  font-size: 14.5px;
  color: var(--ink-faint);
}

/* ============================================================
   Waitlist CTA — minimal fallback below the quiz, just an email
   capture for people who don't want to answer 8 questions.
   ============================================================ */
.waitlist-cta {
  padding: var(--space-6) 0;
  border-top: 1px solid var(--line);
}

.waitlist-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
@media (min-width: 640px) {
  .waitlist-cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    text-align: left;
  }
}

.waitlist-cta__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-bottom: 2px;
}
.waitlist-cta__heading {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
}

.waitlist-cta__form {
  display: flex;
  gap: var(--space-1);
  width: 100%;
  max-width: 380px;
}
.waitlist-cta__input {
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-s);
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  font-family: var(--font-body);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.waitlist-cta__input::placeholder { color: var(--ink-faint); }
.waitlist-cta__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.waitlist-cta__form .btn { height: 46px; padding: 0 var(--space-3); white-space: nowrap; }

.waitlist-cta__consent {
  margin-top: var(--space-2);
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-faint);
}
.waitlist-cta__consent a {
  color: var(--ink-faint);
  text-decoration: underline;
  text-decoration-color: var(--line);
}
.waitlist-cta__consent a:hover { color: var(--accent); }

.waitlist-cta__status {
  margin-top: var(--space-2);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  min-height: 1.2em;
}
.waitlist-cta__status[data-state="success"] { color: var(--success); }
.waitlist-cta__status[data-state="error"] { color: var(--error); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--line);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}
@media (min-width: 640px) {
  .site-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.site-footer__meta {
  font-size: 13.5px;
  color: var(--ink-faint);
}
.site-footer__contact {
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
}
.site-footer__contact:hover { color: var(--accent); text-decoration: underline; }
.site-footer__links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ============================================================
   Parallax decoration — ambient depth layers, GSAP-driven.
   Purely decorative, never touching text or interactive elements.
   Deliberately NOT clipped to their section: these blobs are blurred
   soft enough that letting them fade out naturally past the section
   edge reads as coherent, where a hard clip boundary would show up
   as a visible seam against the page's continuous background.
   ============================================================ */
.parallax-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.parallax-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  will-change: transform;
}
.parallax-blob--a {
  top: -120px;
  right: 8%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
}
.parallax-blob--b {
  bottom: -140px;
  left: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, #DCE0FB 0%, transparent 70%);
  opacity: 0.5;
}
/* Content sits above decorative layers */
.hero__inner { position: relative; z-index: 1; }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}