/* ─────────────────────────────────────────────────────────────────────
   Iter 25EB2 — "Slash + serif" landing theme.

   Layers the reference system's two non-colour signatures on top of the
   Slash palette: the serif/sans collision and the pill geometry. The
   palette itself is NOT repeated here — landing-theme-slash.css is scoped
   html[data-lp-theme^="slash"], a prefix match, so "slash-serif" already
   inherits all 29 of its colour rules. This file only describes what
   differs from plain "slash".

   FONT SUBSTITUTION: the reference specifies Ivy Presto, a commercial
   didone (~$50-90/style). Playfair Display is used instead — it is the
   first of the three free substitutes the reference itself names
   (Playfair Display, DM Serif Display, Libre Caslon Display), it is on
   Google Fonts under the OFL, and it is the closest of the three to a
   didone's hairline-to-stem contrast. Nothing here costs anything.

   The Playfair <link> is injected server-side by _miStampLandingTheme()
   ONLY for this theme, so classic and plain-slash visitors never pay to
   download a font they will not render.

   THE 28px THRESHOLD: the reference is strict that serif never goes below
   28px and sans never above 48px. Applied literally against this page's
   real sizes:
     serif  .lp-hero h1 (clamp 44-88px) · .lp-section-title (28-36px)
            .lp-features h2 / .lp-cta-section h2 (28-38px)
            .lp-pillar-copy h3 (30px) · .lp-trust-item .v (28px, see below)
     sans   .lp-feature-card h3 (16px) · .lp-broker-steps h3 (15.5px)
            .lp-broker-trust h3 — all well under the threshold, untouched.
   The clamp minimums are raised to 28px so the rule holds at every
   viewport width, not just desktop.
   ───────────────────────────────────────────────────────────────────── */

html[data-lp-theme="slash-serif"] {
  --slash-serif: 'Playfair Display', 'Libre Caslon Display', Georgia, serif;
}

/* ── Display tier ──────────────────────────────────────────────────── */
/* Weight 400: the reference uses Ivy Presto at 400/500 only. A didone at
   700+ loses the hairline contrast that is the whole point. */
html[data-lp-theme="slash-serif"] .lp-hero h1 {
  font-family: var(--slash-serif);
  font-weight: 400;
  font-size: clamp(44px, 6.4vw, 88px);
  line-height: 1.02;
  letter-spacing: 0.01em;   /* positive tracking — the "printed ledger" feel */
}

/* ── Section headings ──────────────────────────────────────────────── */
html[data-lp-theme="slash-serif"] .lp-section-title,
html[data-lp-theme="slash-serif"] .lp-features h2,
html[data-lp-theme="slash-serif"] .lp-cta-section h2 {
  font-family: var(--slash-serif);
  font-weight: 400;
  letter-spacing: 0.01em;
}
/* Raise the clamp floors to 28px so these never render serif below the
   reference's threshold on narrow viewports. */
html[data-lp-theme="slash-serif"] .lp-section-title { font-size: clamp(28px, 3.6vw, 36px); }
html[data-lp-theme="slash-serif"] .lp-features h2,
html[data-lp-theme="slash-serif"] .lp-cta-section h2 { font-size: clamp(28px, 3vw, 38px); }

/* Pillar headings are a flat 30px — already above the threshold. */
html[data-lp-theme="slash-serif"] .lp-pillar-copy h3 {
  font-family: var(--slash-serif);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* ── Stat numerals ─────────────────────────────────────────────────── */
/* "The serif numeral creates editorial gravitas for statistics." The trust
   strip sits at 22px, below the serif threshold, so it is nudged to 28px —
   the bottom of the reference's own 28-44px stat range — rather than
   setting a serif at 22px and breaking the rule. The strip is a 4-column
   grid of short tokens ("9", "20+", "S&P 500"), so the extra 6px does not
   reflow it. */
html[data-lp-theme="slash-serif"] .lp-trust-item .v {
  font-family: var(--slash-serif);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.01em;
}
/* The unit suffix ("+", "x") stays sans — it is a 14px label, not a numeral. */
html[data-lp-theme="slash-serif"] .lp-trust-item .v .unit {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}

/* ── Pill geometry ─────────────────────────────────────────────────── */
/* Reference radii: buttons/inputs/tags 9999px, cards 10px, nav 2px. */
html[data-lp-theme="slash-serif"] .lp-btn,
html[data-lp-theme="slash-serif"] .lp-btn-primary,
html[data-lp-theme="slash-serif"] .lp-btn-secondary,
html[data-lp-theme="slash-serif"] .lp-pillar-cta {
  border-radius: 9999px;
}

html[data-lp-theme="slash-serif"] .lp-feature-card,
html[data-lp-theme="slash-serif"] .lp-pillar-visual,
html[data-lp-theme="slash-serif"] .card {
  border-radius: 10px;
}

/* ── No drop shadows ───────────────────────────────────────────────── */
/* "Don't add drop shadows to cards, modals, or popovers — use surface
   colour steps and 1px borders instead." */
html[data-lp-theme="slash-serif"] .lp-feature-card,
html[data-lp-theme="slash-serif"] .lp-pillar-visual {
  box-shadow: none;
}