/* ============================================================================
   lp-editorial.css — Tribble editorial landing-page recipe (DESIGN STANDARD)
   ----------------------------------------------------------------------------
   Promoted from lp-rfp-brain-24-hours so the look is a SYSTEM, not a one-off.
   The "recipe" = four moves:
     1. Serif display headlines        -> var(--font-serif)  (Source Serif 4)
     2. Mono uppercase eyebrow/kicker  -> var(--font-eyebrow) (JetBrains Mono)
     3. Numbers / stat figures         -> var(--font-numbers) (Space Grotesk)
     4. Restraint: flat cards, hairline borders, one solid CTA, no glow/gradient
   Tokens live in tokens.css. Classes here are page-agnostic; new LPs should use
   these instead of redefining page-local <style>. See docs/LP-STYLE-CONTRACT.md.
   Do NOT add glows, gradient buttons, colored card top-bars, or oversized radii.
   ========================================================================== */

/* ── 2. Eyebrow / kicker (mono, uppercase, hairline rule) ─────────────────── */
.eyebrow-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-eyebrow, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary, #4a6fe8);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.eyebrow-kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
}

/* ── 1. Serif display + section headings ──────────────────────────────────── */
.serif-display {
  font-family: var(--font-serif, 'Source Serif 4', serif);
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--color-navy-900, #0a1628);
  margin: 0 0 22px;
}
.serif-heading {
  font-family: var(--font-serif, 'Source Serif 4', serif);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--color-navy-900, #0a1628);
  margin: 0 0 18px;
}

/* ── 3. Numbers / stat figures (Space Grotesk) ────────────────────────────── */
.stat-figure {
  font-family: var(--font-numbers, 'Space Grotesk', sans-serif);
  font-weight: 800;
  color: var(--color-primary, #4a6fe8);
  letter-spacing: 0.08em;
}
.serif-figure {
  font-family: var(--font-serif, 'Source Serif 4', serif);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--color-navy-900, #0a1628);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* ── 4. Restraint: one solid CTA (no gradient / no glow) ──────────────────── */
.cta-solid {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary, #4a6fe8);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 15px 30px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast, 0.18s), transform var(--transition-fast, 0.18s);
}
.cta-solid:hover {
  background: var(--color-blue-700, #3153c8);
  transform: translateY(-1px);
}

/* ── Flat card (hairline border, modest radius — NOT a glowing UI-kit card) ── */
.card-flat {
  background: #fff;
  border: 1px solid var(--color-gray-200, #e2e8f0);
  border-radius: 12px;
  padding: var(--space-5, 1.25rem) var(--space-5, 1.25rem) var(--space-6, 1.5rem);
}

/* ── Hairline-ruled list rows (video accordion / proof rows pattern) ──────── */
.rule-list {
  border-top: 2px solid var(--color-navy-900, #0a1628);
}
.rule-list > .rule-row {
  border-bottom: 1px solid var(--color-gray-200, #e2e8f0);
}