/* ── Campaign landing pages (/lp/) ─────────────────────────────────────────
   Loaded only when a page sets chrome: "landing" (see base.njk), so nothing
   here can reach the 13 IA pages. Keep it small: anything a second page in the
   site would want belongs in site.css instead. Everything below is built from
   the --fw-* tokens.

   These rules exist because the shell had no equivalent, not because a
   landing page needs its own look. A landing page is the same brand at a
   different length; where a shell component fits, the page uses the shell
   component. */

/* Stacked body prose.
   The shell zeroes every margin, and the site's own sections are all
   single-lead-paragraph (.section-lead), so there was no rule for a run of
   body copy. Scoped to p + p ON PURPOSE: a general `> * + *` would also put
   18px above the <h2> that follows an .academy-eyebrow, which already carries
   its own 10px, and every section head on the site would then sit 8px tighter
   than this one. */
.lp-prose > p + p { margin-top: 18px; }
.lp-prose p {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--fw-mid);
}

/* The offer terms, in the hero, ABOVE the CTA.
   Replaces an earlier 14px reassurance line that sat under the button at 60%
   white (owner, 2026-08-31). Two facts decide whether a state analyst reads on,
   that the preview costs nothing and that enrolment has a deadline, and under
   the button at 60% opacity is the quietest place on the page to put them.

   Full white at 500, against the subhead's 300 at 60% directly above it. The
   contrast step is what does the work here, not size: it reads as a statement
   of terms rather than more prose, without another uppercase pill. 21:1 on
   navy. Not a heading, so it stays out of the page outline. */
.lp-hero-terms {
  margin-top: 22px;
  font-family: var(--fw-font-head);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  color: #fff;
  max-width: 48ch;
}

/* The one sentence a payoff section is built around.
   Display weight and size, but a paragraph, not a heading: promoting it to an
   <h2> would put a second heading in a section that already has one and break
   the outline for anyone walking the page by heading. The base rule is navy ink
   for a light band (11.65:1 on cream); the live page runs its payoff on navy and
   overrides it to white at the bottom of this file. */
.lp-punch {
  font-family: var(--fw-font-head);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--fw-navy);
  border-left: 3px solid var(--fw-gold);
  padding-left: 22px;
  max-width: 58ch;
}
/* Extra air around the pull-statement, on top of the 18px prose rhythm. */
.lp-prose > .lp-punch { margin-top: 28px; }
.lp-prose > .lp-punch + p { margin-top: 28px; }

/* ── Compressed-page rules ─────────────────────────────────────────────────
   The campaign page (/lp/national-state-preview-tight-ste/) drops the prose
   sections and leads with the numbers, so it needs three things a prose layout
   does not. Three longer comparison builds were deleted on 2026-09-01; rules
   that existed only for them (.lp-close, .lp-guidance) went with them. */

/* Lead-in above the stat band. Not .section-lead: that is 17px/300 inside a
   .section-head, which opens 36px below itself and would put more air between
   the line and the numbers than between the band and the section after it. This
   is a caption for the row directly beneath it. */
.lp-frame {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--fw-mid);
  margin-bottom: 20px;
  max-width: 720px;
}
/* A second framing line, further down the same section, captioning the thing
   after it rather than opening the section. Needs the air above that the first
   one gets from the section padding. */
.lp-frame--after { margin-top: 44px; }

/* A short sourced note closed off under the argument it qualifies. Carries a
   rule above it rather than a box around it: it is a footnote to the payoff,
   not a callout competing with it. A deleted comparison build gave the same
   TEGL material a full bordered card; this treatment was the one kept. */
.lp-note {
  max-width: 58ch;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--fw-mid);
}
.lp-note a { color: var(--fw-navy); text-decoration: underline; }

/* ── Guidance callout ──────────────────────────────────────────────────────
   Recent external news that must NOT be skimmed. This started as .lp-note, the
   quiet footnote treatment, and was being read as a footnote, which is exactly
   what a muted 62% grey under a hairline rule signals. .lp-note stays for the
   thing it suits (the close-out terms under the cards); this is its opposite.

   Built for the navy band it sits on: a slightly lifted surface so it reads as
   a panel rather than more body copy, a 4px gold rail, near-white text one step
   up in size from the prose around it, and a gold label. Gold carries the rail
   and the label only, never the body, because the body is the part that has to
   clear AA at 15-16px. */
.lp-guidance {
  max-width: 62ch;
  margin-top: 32px;
  padding: 22px 26px;
  background: rgba(255, 255, 255, 0.07);
  border-left: 4px solid var(--fw-gold);
  border-radius: 0 10px 10px 0;
}
.lp-guidance__label {
  display: block;
  font-family: var(--fw-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fw-gold);
  margin-bottom: 10px;
}
.lp-guidance__text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.94);
}
.lp-guidance__text strong { font-weight: 700; color: #fff; }
.lp-guidance__text a { color: #fff; text-decoration: underline; }

/* ── Landing prose on the navy band ────────────────────────────────────────
   .lp-prose and .lp-punch both hardcode a dark ink (--fw-mid, --fw-navy) that
   disappears on navy, and .lp-punch's gold rail is the only thing that would
   survive. The campaign page puts its payoff on .academy-section--navy, so both
   need a surface override. Contrast on #1B3A4B: 0.85 white is about 8:1 and
   0.62 about 5.4:1, so body and note both clear AA. */
.academy-section--navy .lp-prose p { color: rgba(255, 255, 255, 0.85); }
.academy-section--navy .lp-punch { color: #fff; }
.academy-section--navy .lp-note {
  color: rgba(255, 255, 255, 0.62);
  border-top-color: rgba(255, 255, 255, 0.18);
}
.academy-section--navy .lp-note a { color: #fff; }