/* ============================================================================
 * site-v3.css — Direction C: editorial / asymmetric re-skin.
 * Scoped entirely under body.v3 so Nama Site v2 is untouched. Loaded AFTER
 * site-sections.css so it overrides the flat-white system with a left "index
 * spine" (giant numbered section marks + vertical rule), mono eyebrows,
 * serif headline accents, and editorial chips / hairline data rows.
 * ========================================================================== */

/* ── left index spine ──
   Numbers + rule are injected as REAL nodes (.ed-ix / .ed-rule) by the inline
   script in the HTML, not CSS counters — counter() loses context under the
   DOM-cloning screenshot renderer, and real nodes are bulletproof anyway. */
@media (min-width: 820px) {
  body.v3 .sec:not(.s-manifesto):not(.s-cta):not(.s-graph):not(.s-quote) > .wrap {
    padding-left: 168px;
    padding-top: 104px;
    padding-bottom: 104px;
  }
  body.v3 .s-proof > .wrap { padding-top: 104px; padding-bottom: 104px; }

  /* giant section index, sitting in the spine, cap-aligned with the eyebrow */
  body.v3 .ed-ix {
    position: absolute; left: 48px; top: 90px; pointer-events: none;
    font-size: 72px; font-weight: 600; line-height: 0.82;
    letter-spacing: -0.04em; color: #D7DAE0;
  }
  /* vertical hairline running the height of the section */
  body.v3 .ed-rule {
    position: absolute; left: 128px; top: 100px; bottom: 100px;
    width: 1px; background: #E4E4E7;
  }
}

/* ── mono eyebrow (running-header voice) ── */
body.v3 .sec .eyebrow2 {
  font-family: var(--font-mono); font-weight: 500; font-size: 12px;
  letter-spacing: 0.18em; color: #71717A; margin-bottom: 22px;
}
body.v3 .sec .eyebrow2 .ed-sec { color: #2684FF; font-weight: 600; margin-right: 1px; }

/* ── headline scale up + serif accents on the editorial beats ── */
body.v3 .sec h2 {
  font-size: clamp(34px, 3.4vw, 52px); line-height: 1.03;
  letter-spacing: -0.026em; max-width: 720px;
}
body.v3 .s-gov h2,
body.v3 .s-story h2,
body.v3 .s-art h2 {
  font-family: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  font-weight: 600; letter-spacing: -0.014em;
}
body.v3 .sec .lead { font-size: 17px; color: #52525B; max-width: 600px; }

/* ── S2 · customers / stats ── */
body.v3 .s-proof .lab { font-family: var(--font-mono); letter-spacing: 0.16em; color: #71717A; }
body.v3 .s-proof .stat { border-top: 1px solid #09090B; padding-top: 20px; }
body.v3 .s-proof .stat .n { font-size: 58px; letter-spacing: -0.04em; }
body.v3 .s-proof .stat .c { font-family: var(--font-mono); letter-spacing: 0.06em; font-weight: 500; }

/* ── S7 · verticals → slash-separated editorial list ── */
body.v3 .s-gov .grid { grid-template-columns: 1fr 1fr; gap: 64px; }
body.v3 .s-gov .chips { display: block; margin-top: 26px; }
body.v3 .s-gov .chip {
  display: inline; background: none; border: none; border-radius: 0; padding: 0;
  font-size: 19px; font-weight: 600; color: #18181B; letter-spacing: -0.012em;
  white-space: nowrap; line-height: 1.9; margin-right: 0;
}
body.v3 .s-gov .ed-sep { color: #D4D4D8; font-weight: 400; font-size: 19px; margin: 0 14px; }

/* ── governance panel → hairline KEY rows, no card ── */
body.v3 .s-gov .panel {
  background: none; border: none; border-radius: 0; padding: 0;
}
body.v3 .s-gov .panel h3 {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #9CA1AB; margin-bottom: 4px;
}
body.v3 .s-gov .panel ul { gap: 0; }
body.v3 .s-gov .panel li {
  border-top: 1px solid #E4E4E7; padding: 15px 0; font-size: 15.5px; color: #18181B;
}
body.v3 .s-gov .panel li:last-of-type { border-bottom: 1px solid #E4E4E7; }
body.v3 .s-gov .panel li svg { color: #2684FF; }
body.v3 .s-gov .connectors { margin-top: 24px; padding-top: 22px; border-top: 1px solid #E4E4E7; }
body.v3 .s-gov .connectors .lbl { font-family: var(--font-mono); }

/* ── S7b · timeline → mono years ── */
body.v3 .s-story .ms .yr { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.02em; }
body.v3 .s-story .ms.hi::before { box-shadow: 0 0 0 4px rgba(38,132,255,0.16); }

/* ── S3 · how it works · keep flow, mono step numbers ── */
body.v3 .s-how .step .num { font-family: var(--font-mono); }

/* ── S4 · platform concepts · mono nothing, just inherit spine ── */
body.v3 .s-arch .concept h3 { letter-spacing: -0.01em; }

/* ── S6 · capabilities · cards follow the shared 12px kit ── */
body.v3 .s-caps .card { border-radius: 12px; }

/* ── dark beats: mono micro-labels for consistency ── */
body.v3 .s-manifesto .gap h3 { letter-spacing: -0.005em; }
body.v3 .s-cta .cta-reassure { font-family: var(--font-mono); letter-spacing: 0.04em; }

/* ── mobile: drop the spine, restore comfortable padding ── */
@media (max-width: 819px) {
  body.v3 .sec:not(.s-manifesto):not(.s-cta):not(.s-graph):not(.s-quote) > .wrap {
    padding-left: 24px; padding-top: 72px; padding-bottom: 72px;
  }
  body.v3 .s-gov .grid { grid-template-columns: 1fr; }
  body.v3 .ed-ix, body.v3 .ed-rule { display: none; }
}