/* ============================================================
   GovCareer Secrets — site-wide styles
   Palette: navy / signal red / gold accent, patriotic but modern
   ============================================================ */

/* Archivo is self-hosted, latin subset only. One variable file covers every weight
   from 400 to 900, so a new weight costs nothing — but anything outside that range,
   an italic, or a character outside latin (→ ← ✓ and emoji already are) falls back to
   the system stack. Pages link no font stylesheet; this rule is the only source. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono is the label voice — kickers, eyebrows, nav links, small caption
   and fine-print rows, always uppercase with letter-spacing. Self-hosted like
   Archivo, latin subset, and only the three weights the site uses: 400, 500, 600.
   Ask for 700 or more here and the browser falls back or fakes it. */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --navy-950: #060f2a;
  --navy-900: #0a1740;
  --navy-800: #10225c;
  --navy-700: #1a3178;
  --navy-100: #dde5f5;
  --red-600: #e4372e;
  --red-700: #c72a22;
  --gold-500: #f5b52e;
  --ink: #131a2b;
  --muted: #5a6478;
  /* The page ground is the light blue the homepage hero opens on, so every
     page reads as one site. Cards stay white on top of it — that contrast is
     what makes a card look raised, and flattening it loses the whole effect. */
  --bg: #eef2f9;
  --card: #ffffff;
  --line: #e3e8f2;
  /* Two soft steps and a hard zero, and nothing in between. --radius is the
     default for surfaces; --radius-tag is for chips, tags and buttons sized
     small enough that the larger value starts to read as a pill. Anything
     carrying corner brackets takes a literal 0 — a right-angle bracket cannot
     sit on a curve without leaving a gap at the corner. */
  --radius: 6px;
  --radius-tag: 4px;
  --shadow: 0 10px 30px rgba(6, 15, 42, 0.10);
  --shadow-lg: 0 24px 60px rgba(6, 15, 42, 0.18);
  --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* height:auto keeps intrinsic width/height attributes as aspect hints only —
   they reserve layout space before the file loads, so anchors and scroll
   positions do not shift, without fixing the rendered height. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.wrap-wide { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 860px; margin: 0 auto; padding: 0 24px; }

/* ---------- Buttons ---------- */
/* Squared, not pills: 4px file-corner rectangles. The radius lives here, so
   every variant below inherits it — do not restate it per variant. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 800; text-decoration: none; cursor: pointer; border: 0;
  border-radius: var(--radius); font-size: 17px; letter-spacing: .02em;
  padding: 16px 34px; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  font-family: var(--font);
}
/* Flat red, not a gradient, and one shadow across both states — the lift on
   hover comes from the transform alone. */
.btn-primary {
  background: var(--red-600);
  color: #fff; box-shadow: 0 10px 30px rgba(228, 55, 46, .25);
}
.btn-primary:hover { transform: translateY(-2px); background: var(--red-700); }
.btn-ghost {
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.45);
}
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-navy { background: var(--navy-800); color: #fff; }
.btn-navy:hover { background: var(--navy-700); transform: translateY(-2px); }
/* Free lead magnets on a dark band. Gold is already this site's accent on dark
   and already means "free" here — the band's glow and .free-tag both use it —
   so the magnet keeps a full-strength button while red is left to mean "apply".
   Two filled red buttons in one screen made the page's primary action unreadable. */
.btn-gold {
  background: linear-gradient(180deg, #ffc94a, var(--gold-500));
  color: var(--navy-950); box-shadow: 0 8px 24px rgba(245, 181, 46, .32);
}
.btn-gold:hover {
  transform: translateY(-2px); box-shadow: 0 14px 32px rgba(245, 181, 46, .42);
  background: #e9a81c;
}
.btn-lg { font-size: 19px; padding: 19px 44px; }
.btn-block { width: 100%; }
.btn-sub { display: block; margin-top: 10px; font-size: 14px; color: var(--muted); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(6, 15, 42, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo img { height: 34px; width: auto; }
.nav-links { display: flex; gap: 28px; list-style: none; }
/* The label voice: mono, uppercase, tracked. nowrap so an item can never split
   mid-phrase — the header's width budget assumes whole labels. */
.nav-links a {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: #d7def0; text-decoration: none; white-space: nowrap;
}
.nav-links a:hover { color: #fff; }
.header-cta { padding: 12px 24px; font-size: 15px; }
/* The menu's copy of the header button. It exists only inside the dropdown —
   at any width where the inline nav is showing, the header carries its own
   button or has deliberately dropped it for room. */
.nav-cta { display: none; }

/* Hamburger: hidden on desktop, shown once the inline nav no longer fits.
   apply.html has no nav by design, so it simply carries no button. */
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  /* flex-shrink:0 or the header's flex row squeezes this below the 44px
     minimum tap target — it measured 38px without it. */
  width: 44px; height: 44px; flex: 0 0 44px; padding: 10px;
  margin-left: auto; margin-right: 12px;
  flex-direction: column; justify-content: center; gap: 5px;
}
.nav-toggle span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: #d7def0; transition: transform .2s ease, opacity .2s ease;
}
.site-header.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* The full header needs ~950px: logo 160 + nav ~485 + CTA 200 + 104 padding and
   breathing room (verified no wrap at 961px, the narrowest full-header width).
   The hamburger only takes over at 880px, so the CTA has to go
   first — logo + nav alone need 750px, which fits every width down to it.
   Adding a nav item spends this budget. Never relabel the CTA to save room:
   its wording is fixed, and the same promise sits in every in-page CTA. */
@media (max-width: 960px) {
  .header-cta { display: none; }
}
@media (max-width: 880px) {
  .nav-toggle { display: flex; margin-left: auto; margin-right: 0; }
  /* The list stays in the DOM at every width — results.html binds tab-jump
     handlers to these exact links, and duplicating them would break that. */
  .nav-links {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0; padding: 8px 24px 18px;
    background: rgba(6, 15, 42, .98); backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .site-header.is-open .nav-links { display: flex; }
  /* Mono runs wider than the old sans at the same size; 15px keeps the longest
     label on one line inside the dropdown. */
  .nav-links a { display: block; padding: 14px 0; font-size: 15px; }
  .nav-links li + li { border-top: 1px solid rgba(255,255,255,.07); }
  /* Full-width button at the foot of the menu: the widest tap target the
     dropdown can give, and it reads as the menu's conclusion rather than a
     fourth link. It keeps the list's own divider above it — that hairline is
     what separates the links from the action. */
  .nav-cta { display: block; padding-top: 16px; }
  /* .nav-links a is the more specific selector for everything the menu's own
     links take — the mono label voice, the tracking, the muted colour. Restate
     each one here or the button inherits the look of a text link. */
  .nav-cta .btn {
    display: flex; width: 100%; padding: 15px 18px;
    font-size: 16px; color: #fff;
    font-family: var(--font); font-weight: 800;
    letter-spacing: .02em; text-transform: none;
  }
}

/* ---------- Announcement bar ---------- */
.announce {
  background: var(--gold-500); color: var(--navy-950); text-align: center;
  /* 24px sides to match .wrap, so the bar lines up with everything below it
     instead of sitting 8px wider. */
  font-weight: 700; font-size: 14px; padding: 9px 24px;
}
.announce a { color: var(--navy-950); }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(1100px 500px at 78% -10%, rgba(228,55,46,.28), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(26,49,120,.9), transparent 60%),
    linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--navy-800) 100%);
  color: #fff; overflow: hidden; position: relative;
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center;
  padding: 84px 0 72px;
}
/* Playbook hero only: its second column is the opt-in card, roughly twice the
   height of the copy beside it. Top-align so both columns start on the same
   edge and the leftover height falls below the copy. */
.hero-grid:has(.form-card) { align-items: start; }
/* Mono caps at 500 — the mono face carries 400/500/600 only, so the old 800
   would fall back or be faked. */
.eyebrow {
  display: inline-block;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-500);
  border: 1px solid rgba(245,181,46,.4); border-radius: var(--radius-tag); padding: 7px 16px;
  margin-bottom: 22px; background: rgba(245,181,46,.08);
}
.hero h1 {
  font-size: clamp(36px, 5vw, 56px); line-height: 1.06; font-weight: 900;
  letter-spacing: -.015em; margin-bottom: 20px;
}
.hero h1 .accent { color: var(--red-600); }
.hero .sub {
  font-size: 19px; color: #c3cdea; max-width: 540px; margin-bottom: 26px;
}
.hero .sub strong { color: #fff; }
.check-list { list-style: none; margin-bottom: 34px; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; font-weight: 600; }
.check-list .tick {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(66, 190, 101, .18); color: #4ade80; display: grid; place-items: center;
  font-size: 13px; margin-top: 2px;
}
.hero-cta-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero-visual { position: relative; }
.hero-visual img { filter: drop-shadow(0 30px 60px rgba(0,0,0,.45)); }
.hero-proof {
  margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap;
}
.proof-pill {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  color: #e6ebf8; font-size: 13.5px; font-weight: 700; border-radius: var(--radius-tag); padding: 8px 16px;
}
.proof-pill b { color: var(--gold-500); }

/* "What's inside" block, playbook hero. Renders at every width — it names what
   the download contains, so it must reach a phone too. Beside the tall opt-in
   card on desktop; once the hero stacks it is ordered below the card, which has
   to stay directly under the headline. */
.hero-inside {
  margin-top: 30px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.14);
}
/* Mono caps at 500 — see .eyebrow: the mono face stops at 600. */
.hero-inside h2 {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-500); margin-bottom: 16px;
}
.hero-inside .check-list { margin-bottom: 0; gap: 14px; }
.hero-inside .check-list li { font-size: 15.5px; font-weight: 400; color: #c3cdea; }
.hero-inside .check-list b { color: #fff; font-weight: 800; }
/* Full-width strip along the bottom of the hero */
.hero-stats {
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; justify-content: center; align-items: stretch; gap: 0;
  padding: 26px 24px 30px; flex-wrap: wrap;
}
.hero-stats .hstat {
  text-align: center; padding: 0 44px; position: relative;
}
.hero-stats .hstat + .hstat::before {
  content: ""; position: absolute; left: 0; top: 8%; bottom: 8%;
  width: 1px; background: rgba(255,255,255,.16);
}
.hero-stats b { display: block; font-size: 24px; font-weight: 600; color: var(--gold-500); letter-spacing: -.01em; }
.hero-stats span { font-size: 13.5px; color: #aab6d8; font-weight: 600; }
/* Once these stack on a phone the vertical rules are stranded beside the
   items instead of between them. Stack cleanly with horizontal rules. */
@media (max-width: 640px) {
  /* Full-width primary CTA: biggest tap target, and it reads as a designed
     block rather than a pill floating off to one side. */
  .hero-cta-row { width: 100%; }
  .hero-cta-row .btn { width: 100%; }
  .hero-stats { flex-direction: column; padding: 8px 24px 22px; }
  .hero-stats .hstat { padding: 16px 0; width: 100%; }
  .hero-stats .hstat + .hstat::before {
    left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px;
  }
}
@media (max-width: 960px) {
  /* minmax(0,…): without it the column is floored at its content's min-content
     width, and .hero's overflow-x:hidden clips the excess rather than showing it. */
  /* Keep .wrap's 24px side padding — a bare `0` here stripped it and pushed
     the headline and eyebrow flush against the phone's screen edge. Vertical
     values change, horizontal must not. */
  .hero-grid { grid-template-columns: minmax(0, 1fr); padding: 56px 24px 48px; }
  .hero-stats .hstat { padding: 10px 24px; }

  /* Headline leads, then the mockup, then the supporting copy. display:contents
     promotes the copy column's children into this grid so they can be ordered
     around the image, which is their sibling rather than their parent.
     Scoped with :has(.hero-visual) so playbook.html — whose second column is
     the opt-in form, not an image — is left alone. */
  .hero-grid:has(.hero-visual) { gap: 16px; }
  .hero-grid:has(.hero-visual) > div:first-child { display: contents; }
  .hero-grid:has(.hero-visual) .eyebrow { order: 1; margin-bottom: 0; }
  .hero-grid:has(.hero-visual) h1 { order: 2; margin-bottom: 0; }
  .hero-grid:has(.hero-visual) .hero-visual { order: 3; max-width: 460px; margin-inline: auto; }
  .hero-grid:has(.hero-visual) .sub { order: 4; margin-bottom: 0; }
  .hero-grid:has(.hero-visual) .check-list { order: 5; margin-bottom: 0; }
  .hero-grid:has(.hero-visual) .hero-cta-row { order: 6; }

  /* playbook.html: stacked, the opt-in card (and the book mockup inside it)
     landed below the headline, sub, three bullets and two pills — three
     screens of text before the thing the page exists for. Lift the card
     directly under the headline; the supporting proof follows it. Both
     columns go display:contents so the card can be ordered among the copy. */
  .hero-grid:has(.form-card) { gap: 18px; }
  .hero-grid:has(.form-card) > div { display: contents; }
  .hero-grid:has(.form-card) .eyebrow { order: 1; margin-bottom: 0; }
  .hero-grid:has(.form-card) h1 { order: 2; margin-bottom: 0; }
  .hero-grid:has(.form-card) .sub { order: 3; margin-bottom: 0; }
  .hero-grid:has(.form-card) .form-card { order: 4; }
  .hero-grid:has(.form-card) .hero-proof { order: 5; margin-top: 0; }
  /* "What's inside" is promoted out of the copy column by the display:contents
     above, so it can be ordered after the card rather than hidden. */
  .hero-grid:has(.form-card) .hero-inside { order: 6; margin-top: 12px; }

  /* Left-aligned suits the two-column desktop hero; centre it once it stacks. */
  .hero-grid > div:first-child { text-align: center; }
  .hero .sub { margin-inline: auto; }
  .hero-cta-row, .hero-proof { justify-content: center; }
  /* Bullets stay left-aligned — centred list text is hard to scan. Centre
     the block instead so it still sits under a centred headline. */
  .check-list { max-width: 540px; margin-inline: auto; }
  .check-list li { text-align: left; }
}

/* ---------- Sections ---------- */
section { padding: 84px 0; }
.section-tight { padding: 56px 0; }
/* Mono caps at 500 — see .eyebrow: the mono face stops at 600. */
.kicker {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--red-600); margin-bottom: 12px; text-align: center;
}
h2.section-title {
  font-size: clamp(28px, 3.6vw, 42px); font-weight: 900; letter-spacing: -.015em;
  text-align: center; line-height: 1.12; margin-bottom: 14px;
}
.section-lede { text-align: center; color: var(--muted); font-size: 18px; max-width: 680px; margin: 0 auto 48px; }

/* ---------- Steps (How it works) ---------- */
/* minmax(0,…) so a nowrap title inside a card cannot set a min-content floor
   that widens the column and scrolls the page sideways. */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.step-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 28px; box-shadow: var(--shadow); position: relative;
}
.step-num {
  width: 38px; height: 38px; border-radius: var(--radius); display: grid; place-items: center;
  background: var(--navy-900); color: var(--gold-500); font-weight: 900; font-size: 18px;
  margin-bottom: 18px;
}
.step-card h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
/* Number and title share one line. Declared after .step-card h3 so it wins on
   source order, and the font is fluid so the longest of the three
   ("Interview, Get Cleared, Get Paid") fits unwrapped at every width. */
.step-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.step-head .step-num { margin-bottom: 0; flex: 0 0 auto; }
/* Titles are short enough ("Find the Role", "Get Referred", "Get Hired") to sit
   beside the number on one line at full size, at every width down to 320px —
   so no fluid sizing or breakpoint exceptions are needed. Keep them short:
   a longer title here forces the font below the 15.5px body copy, which
   inverts the hierarchy, or clips inside the ~261px column at 881px. */
.step-head h3 { margin-bottom: 0; min-width: 0; white-space: nowrap; font-size: 20px; }
@media (max-width: 880px) { .step-card { padding: 26px 22px; } }
.step-card p { color: var(--muted); font-size: 15.5px; }
@media (max-width: 880px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Proof / offers ---------- */
.dark-band {
  background: linear-gradient(160deg, var(--navy-950), var(--navy-900));
  color: #fff;
}
.dark-band .section-lede { color: #b9c4e4; }
.offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-bottom: 44px; }
.offer-card {
  background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg);
  transition: transform .2s ease, box-shadow .2s ease;
}
.offer-card:hover { transform: translateY(-6px); box-shadow: 0 32px 70px rgba(0,0,0,.4); }
.offer-card figcaption {
  padding: 16px 20px; font-weight: 800; color: var(--navy-900); font-size: 16px;
  border-top: 3px solid var(--red-600); display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.offer-card .amount { color: var(--red-600); font-size: 19px; white-space: nowrap; }
.center { text-align: center; }
@media (max-width: 880px) { .offers { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } }

/* ---------- Programs ---------- */
.programs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.program-card {
  background: var(--card); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px 34px; box-shadow: var(--shadow); display: flex; flex-direction: column;
  position: relative; transition: border-color .2s ease, box-shadow .2s ease;
}
/* The red outline defaults to the featured card, but follows the visitor's hover */
.program-card.featured { border-color: var(--red-600); box-shadow: 0 24px 60px rgba(228,55,46,.16); }
.program-card:hover { border-color: var(--red-600); box-shadow: 0 24px 60px rgba(228,55,46,.16); }
.programs:has(.program-card:hover) .program-card.featured:not(:hover) {
  border-color: var(--line); box-shadow: var(--shadow);
}
/* Title sits above the media (order:-1), so the media is no longer flush to
   the card top: it becomes an inset rounded panel rather than bleeding to the
   card edges, and the card regains its top padding. */
.program-media {
  margin: 0 0 22px; height: 190px; overflow: hidden;
  border-radius: var(--radius); background: var(--navy-900); position: relative;
}
.program-media video, .program-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Auto-rotating crossfade of real offer letters (Accelerator card) */
.offer-slideshow { position: absolute; inset: 0; }
.offer-slideshow img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;
  opacity: 0; animation: offerFade 12s infinite;
}
.offer-slideshow img:nth-child(2) { animation-delay: 4s; }
.offer-slideshow img:nth-child(3) { animation-delay: 8s; }
@keyframes offerFade {
  0% { opacity: 0; }
  6% { opacity: 1; }
  33% { opacity: 1; }
  41% { opacity: 0; }
  100% { opacity: 0; }
}
.badge-top {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--red-600); color: #fff; font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: 6px 16px; border-radius: var(--radius-tag); white-space: nowrap;
  z-index: 2; box-shadow: 0 6px 16px rgba(228,55,46,.4);
}
/* nowrap pushes this pill past a 360px screen; let it wrap inside the card. */
@media (max-width: 640px) {
  .badge-top { white-space: normal; max-width: calc(100% - 32px); text-align: center; }
  .badge-guarantee { display: none; }
}
/* Titles run 1-2 lines depending on length. Reserve two lines in every card so
   the content below (Best for, description, bullets) lines up across the row. */
.program-card h3 {
  font-size: 25px; font-weight: 900; margin-bottom: 4px;
  line-height: 1.25; min-height: 2.5em;
  /* Above the media, centred. min-height reserves two lines so the three
     cards stay aligned; the card supplies the top padding, because adding it
     here would be counted inside min-height and break that alignment. */
  order: -1; text-align: center; display: flex; align-items: center;
  justify-content: center;
}
.best-for { font-size: 13.5px; font-weight: 700; color: var(--red-600); margin-bottom: 14px; }
.program-card p { color: var(--muted); font-size: 15px; margin-bottom: 18px; }
.program-feats { list-style: none; display: grid; gap: 9px; margin-bottom: 24px; font-size: 14.5px; }
.program-feats li { display: flex; gap: 9px; }
.program-feats .tick { color: #16a34a; font-weight: 900; }
.program-card .btn { margin-top: auto; }
.program-card .btn-sub { text-align: center; }
.guarantee-strip {
  margin-top: 40px; background: #eef7f0; border: 1px solid #cde8d4; border-radius: var(--radius);
  padding: 24px 28px; display: flex; gap: 18px; align-items: center;
}
.guarantee-strip .shield { font-size: 34px; }
.guarantee-strip strong { color: #166534; }
.guarantee-strip p { color: #2f5e3f; font-size: 15px; }
@media (max-width: 960px) { .programs { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } }

/* Subtly textured light section (used behind the lead-magnet band) */
.section-accent {
  background:
    repeating-linear-gradient(135deg, rgba(16, 34, 92, .04) 0 2px, transparent 2px 16px),
    radial-gradient(900px 400px at 85% 0%, rgba(228, 55, 46, .06), transparent 60%),
    linear-gradient(180deg, #e9eefa 0%, var(--bg) 100%);
}

/* ---------- Lead magnet band ---------- */
.magnet-band {
  background:
    radial-gradient(800px 400px at 90% 0%, rgba(245,181,46,.14), transparent 55%),
    linear-gradient(150deg, var(--navy-900), var(--navy-800));
  color: #fff; border-radius: var(--radius); padding: 54px; display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; box-shadow: var(--shadow-lg);
}
.magnet-band h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 900; line-height: 1.15; margin-bottom: 14px; }
/* Gold tag, mono label voice. 600 is the top weight the mono face carries. */
.magnet-band .free-tag {
  display: inline-block; background: linear-gradient(180deg, #ffc94a, var(--gold-500));
  color: var(--navy-950);
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-weight: 600; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  border-radius: var(--radius-tag); padding: 7px 14px; margin-bottom: 16px;
}
.magnet-band p { color: #c3cdea; margin-bottom: 24px; font-size: 16.5px; }
/* Text-only variant: one column, centered, nothing sitting beside the copy.
   minmax(0,…) here also holds at mobile, where the base rule drops to a bare 1fr. */
.magnet-band.band-solo { grid-template-columns: minmax(0, 1fr); text-align: center; }
.magnet-band.band-solo p { max-width: 720px; margin-inline: auto; }
/* Bands stacked in one section stay separate blocks, not one long slab. */
.magnet-band + .magnet-band { margin-top: 28px; }
/* Alternating band: image on the left, text on the right. The glow follows
   the image to the left corner. Desktop only — the two-class selector would
   otherwise outrank the single-class phone collapse below, which media
   queries alone cannot win back. */
@media (min-width: 881px) {
  .magnet-band.band-flip {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    background:
      radial-gradient(800px 400px at 10% 0%, rgba(245,181,46,.14), transparent 55%),
      linear-gradient(150deg, var(--navy-900), var(--navy-800));
  }
  .magnet-band.band-flip img { order: -1; }
}
@media (max-width: 880px) {
  .magnet-band { grid-template-columns: minmax(0, 1fr); padding: 36px 28px; text-align: center; }
  /* Book mockup leads on a phone — stacked, it otherwise landed below the
     CTA where nobody scrolling past would see what they're downloading. */
  .magnet-band img { order: -1; margin-inline: auto; }
  /* The pill is already full width here, so its 44px inline padding only steals
     room from the label and forces a third line on the narrowest phones. */
  .magnet-band .btn { width: 100%; padding-inline: 18px; }
}

/* ---------- About (lives on dark bands) ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 52px; align-items: center; }
.about-grid img { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.about-grid h2 {
  font-size: clamp(32px, 4.2vw, 48px); font-weight: 900; line-height: 1.08;
  margin-bottom: 10px; color: #fff; letter-spacing: -.015em;
}
.about-grid h2 .accent { color: var(--red-600); }
.about-role { color: var(--gold-500); font-weight: 800; margin-bottom: 20px; font-size: 17px; }
/* .kicker is centred by default; the About column is left-aligned on desktop. */
.about-kicker { text-align: left; }
.about-grid p { color: #d3dbf0; margin-bottom: 16px; font-size: 17.5px; line-height: 1.7; }
/* minmax(0,1fr) not 1fr: plain 1fr floors each column at its min-content
   width, which pushed this row to 406px inside a 327px phone viewport and
   scrolled the whole page sideways. */
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 26px 0 30px; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 14px; text-align: center; box-shadow: var(--shadow);
}
.stat b { display: block; font-size: 22px; color: var(--navy-900); font-weight: 900; }
.stat span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
/* min() keeps the 420px ceiling on tablets but lets the image shrink on a
   phone — a bare max-width:420px overflows a 327px viewport once the image
   actually loads. */
@media (max-width: 880px) {
  /* display:contents promotes the copy column's children into this grid so
     the headline and kicker can be ordered ABOVE the photo without
     duplicating any markup — the photo is their sibling, not their parent. */
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; text-align: center; }
  .about-grid > div { display: contents; }
  .about-grid h2 { order: 1; }
  .about-grid .about-kicker { order: 2; text-align: center; margin-bottom: 0; }
  .about-grid img { order: 3; max-width: min(420px, 100%); margin-inline: auto; }
  .about-grid .about-role { order: 4; margin-bottom: 0; }
  .about-grid p { order: 5; }
  .about-grid .stat-row { order: 6; margin: 10px 0 4px; }
  .about-grid .btn { order: 7; width: 100%; }
}
/* Three ~100px columns wrap "$40K → $150K" onto three lines; stack instead. */
@media (max-width: 640px) { .stat-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- About page ---------- */
/* Scoped to the page class: the shared about and section blocks are used by
   other pages and must keep their own defaults. */
/* Centered section openers close on a short rule — navy on light ground, gold
   on the dark final CTA. */
body.page-about .why-cards .kicker,
body.page-about .final-cta .kicker { font-size: 12.5px; letter-spacing: .18em; }
body.page-about .why-cards h2.section-title { margin-bottom: 0; }
body.page-about .why-cards h2.section-title::after,
body.page-about .final-cta h2::after {
  content: ""; display: block; width: 76px; height: 2px; background: var(--navy-900);
  margin: 18px auto 0;
}
body.page-about .why-cards .section-lede { margin-top: 26px; }
body.page-about .final-cta h2 { margin-bottom: 0; }
body.page-about .final-cta h2::after { background: var(--gold-500); margin: 20px auto 0; }
body.page-about .final-cta p { max-width: 720px; margin: 26px auto 32px; font-size: 17px; line-height: 1.65; }
/* The portrait sits straight in a white mount with a thin rule, and lifts on
   hover. Padding is what makes the mount visible, so keep it. */
body.page-about .about-grid img {
  background: var(--card); border: 1px solid var(--line); padding: 12px;
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform .35s ease, box-shadow .35s ease;
}
body.page-about .about-grid img:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
@media (max-width: 880px) {
  /* Phones read centered: headings and labels centre, long paragraph blocks
     justify — hyphenated, or a narrow justified column opens rivers of space. */
  body.page-about .hero .sub,
  body.page-about .about-grid p,
  body.page-about .why-cards .step-card p,
  body.page-about .final-cta p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
}

/* ---------- FAQ ---------- */
.faq-list { max-width: 880px; margin: 0 auto; display: grid; gap: 14px; }
details.faq {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 0; overflow: hidden; box-shadow: 0 6px 18px rgba(6,15,42,.06);
  transition: border-color .15s ease;
}
details.faq[open] { border-color: var(--navy-700); }
details.faq summary {
  cursor: pointer; list-style: none; font-weight: 800; font-size: 19px; color: var(--navy-900);
  padding: 24px 28px; display: flex; justify-content: space-between; align-items: center; gap: 18px;
  line-height: 1.35;
}
details.faq summary::-webkit-details-marker { display: none; }
/* A bare red chevron, no circle behind it. line-height:1 so the glyph's own
   box does not add height to the summary row. */
details.faq summary::after {
  content: "›"; flex: 0 0 auto; display: block; color: var(--red-600);
  font-size: 28px; font-weight: 700; line-height: 1; transition: transform .2s;
}
details.faq[open] summary::after { transform: rotate(90deg); }
details.faq .faq-body { padding: 0 28px 26px; color: #414b61; font-size: 17px; line-height: 1.7; }

/* ---------- Final CTA (always the decorated dark treatment) ---------- */
.final-cta {
  text-align: center; color: #fff; position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 18px),
    radial-gradient(800px 400px at 15% 100%, rgba(228,55,46,.30), transparent 60%),
    radial-gradient(700px 380px at 90% 0%, rgba(245,181,46,.14), transparent 55%),
    linear-gradient(160deg, var(--navy-950), var(--navy-900) 70%, var(--navy-800));
}
.final-cta h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 900; line-height: 1.1; margin-bottom: 16px; }
.final-cta p { max-width: 620px; margin: 0 auto 32px; color: #b9c4e4; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-950); color: #93a0c4; padding: 56px 0 36px; font-size: 14.5px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 36px; margin-bottom: 28px; }
.site-footer h4 { color: #fff; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.site-footer a { color: #b7c2e2; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; display: grid; }
/* Footer and legal links carry their row gap inside the clickable box rather
   than adding it, so the list keeps its spacing whatever the box height is.
   That height is 44px here and is overridden twice below: 32px for a fine
   pointer, and 32px again in the stacked phone layout. 24px is the floor. */
.site-footer ul a { display: inline-flex; align-items: center; min-height: 44px; }
/* The legal row is a label row, not prose — it takes the mono label voice on
   every page. The disclaimer below it stays Archivo: it is a sentence. */
.footer-legal {
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }
.disclaimer { font-size: 12.5px; color: #6e7a9e; margin-top: 14px; max-width: 900px; }
/* ---------- Centered footer composition ---------- */
/* The standard footer for pages that carry full navigation: centered logo and
   tagline, one wrapped centered row of mono uppercase links (no separator
   glyphs between links — they wrap into orphans on narrow screens), then the
   centered legal row. Add .footer-centered to .site-footer to center the legal
   row and disclaimer at every width. */
.d-footer-stack { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-bottom: 36px; }
.d-footer-stack .logo img { height: 30px; }
.d-footer-tagline { font-size: 14.5px; color: #93a0c4; max-width: 420px; }
/* .site-footer ul sets display:grid above; this selector must carry more
   weight or the row silently stacks into a column. */
.site-footer .d-footer-links {
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: 36px; row-gap: 6px; list-style: none; padding-top: 4px;
}
.d-footer-links a {
  display: inline-flex; align-items: center; min-height: 32px;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #b7c2e2; text-decoration: none;
}
.d-footer-links a:hover { color: #fff; }
@media (pointer: coarse) { .d-footer-links a { min-height: 44px; } }
@media (max-width: 880px) {
  .site-footer .d-footer-links { flex-direction: column; align-items: center; row-gap: 0; }
}
.site-footer.footer-centered .footer-legal { justify-content: center; text-align: center; }
.site-footer.footer-centered .disclaimer { text-align: center; margin-inline: auto; }
/* The 44px box on each link exists for thumbs. A mouse or trackpad does not
   need it, so pointer-fine devices get a tighter list. Touch keeps the full
   tap target. */
@media (pointer: fine) {
  .site-footer ul a { min-height: 32px; }
  .footer-legal a { min-height: 32px; }
}
/* Four link columns do not fit a tablet. Must stay above the 880px block —
   that query matches here too, and the later rule would win. */
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}
/* Footer centres once its columns stack — left-aligned single-column blocks
   read as ragged on a phone. Desktop keeps the multi-column left layout. */
@media (max-width: 880px) {
  /* One column on a phone — side-by-side groups read as cramped at this width.
     The height comes back by condensing the column rather than splitting it:
     a tighter link box, smaller gaps between groups, less outer padding. */
  .site-footer { padding: 32px 0 22px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 14px; margin-bottom: 18px; }
  .site-footer .logo { justify-content: center; }
  .site-footer h4 { margin-bottom: 2px; }
  /* 32px rather than 44px, matching the pointer-fine desktop box. 44 is the
     comfort figure, not the accessible floor — WCAG 2.2 AA asks for a 24px
     target. Do not push this lower: 24px is the limit, not a goal. */
  .site-footer ul a { min-height: 32px; }
  .footer-legal { justify-content: center; text-align: center; padding-top: 16px; }
  .footer-legal a { min-height: 32px; }
  .site-footer .disclaimer { text-align: center; margin-inline: auto; margin-top: 10px; }
}

/* ---------- Results page ---------- */
/* The proof page speaks the same dossier language as the homepage: a light
   hero falling out of the masthead, a counts strip, then one dark evidence
   band holding every exhibit. The shared .d- components come from the second
   stylesheet — only this page's own rules live here. */
span.logo { cursor: default; }

/* One unbroken dark field from the masthead to the footer, painted once by the
   element that wraps every band. Matching the stops section by section was
   tried first and could not hold: each band restarts its own gradient, so the
   rate of change jumps at the join and the eye reads a horizon there even when
   the two colours either side are identical. Only a single gradient over the
   whole height has one continuous rate, which is also what makes the descent
   read as the page moving rather than as three stacked panels.

   The stops are the three navies the bands already used, in the order they used
   them — 950 at the masthead, lifting to 800 through the exhibits, sinking back
   to 950 where the footer picks it up. Percentages, not pixels: the page is a
   few thousand pixels tall on a desktop and roughly five times that on a phone
   with all three galleries stacked, and the arc has to survive both.

   No band inside may set a background of its own. Doing so is what this
   replaces. */
body.page-results { background: var(--navy-900); }
body.page-results .d-field {
  background:
    /* Anchored to the masthead, as the hero's own glow was. */
    radial-gradient(1000px 320px at 76% 0%, rgba(228,55,46,.30), transparent 62%),
    /* The closing call's warmth, now reaching up into the last exhibits
       instead of switching on at a section edge. */
    radial-gradient(900px 420px at 74% 100%, rgba(228,55,46,.20), transparent 62%),
    radial-gradient(700px 460px at -6% 100%, rgba(245,181,46,.12), transparent 60%),
    linear-gradient(180deg,
      var(--navy-950) 0%,
      var(--navy-900) 10%,
      var(--navy-800) 58%,
      var(--navy-900) 90%,
      var(--navy-950) 100%);
}
/* Both bands paint nothing and let the field through. `background: none` is
   required, not merely tidy: the shared dossier sheet gives .d-hero a
   light-ground gradient of its own, and this page's dark treatment used to be
   the thing hiding it. Drop these and the opener returns to daylight — white
   text on near-white — while the field carries on underneath. */
body.page-results .d-hero { padding: 44px 0 26px; background: none; }
body.page-results .d-evidence { padding: 26px 0 72px; background: none; }
/* The closing call sits on the shared field and paints nothing. The element
   selector is load-bearing: the shared sheet's own rule for this band has equal
   specificity and is read second, so a class-only selector here would silently
   lose to it and put the band's decorated background back. */
body.page-results section.final-cta { background: none; }
/* The closing panel itself is shared by both dossier pages and lives in the
   dossier sheet — nothing page-specific about it belongs here. */
/* A menu link jumps to the evidence; clear the sticky header. */
body.page-results #proof { scroll-margin-top: 88px; }

/* The opener is short on purpose: the exhibits are the page, and every line
   here costs one of them a place on the first screen. Its parts take the
   dark-ground colours — the shared hero is built for a light one. */
body.page-results .d-hero .wrap { max-width: 880px; text-align: center; }
body.page-results .d-hero .d-eyebrow {
  margin-bottom: 16px; color: var(--gold-500);
  border-color: rgba(245,181,46,.4); background: rgba(245,181,46,.08);
}
body.page-results .d-hero h1 {
  font-size: clamp(30px, 3.9vw, 48px); margin-bottom: 14px; color: #fff;
}
body.page-results .d-hero .sub {
  font-size: 17px; max-width: 660px; margin-inline: auto; color: #c3cdea;
}

/* One unified segmented control instead of three floating pills. Mono
   uppercase: on this page the tabs are the label voice, not buttons. */
.tabs { display: flex; justify-content: center; margin-bottom: 40px; }
.tabs-shell {
  display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: center;
  background: rgba(255,255,255,.06); border: 1px solid rgba(227,232,242,.16);
  border-radius: var(--radius-tag); padding: 5px;
}
.tab-btn {
  border: 0; background: transparent; color: #aab6d8;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  border-radius: var(--radius-tag); padding: 14px 26px; cursor: pointer; transition: all .15s;
}
.tab-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
.tab-btn.active { background: var(--red-600); color: #fff; box-shadow: 0 6px 18px rgba(228,55,46,.32); }

/* Two large exhibits per column, framed exactly like the homepage's proof
   cards. The image is never cropped — these documents are meant to be read, so
   every card is as tall as its own document. That is why this is a column flow
   and not a grid: the exhibits vary from a wide two-line email to a full page,
   and a grid row sized to the tallest of a pair leaves a hole beside the
   shortest. Cards therefore read down one column, then down the next. */
.gallery { column-count: 2; column-gap: 28px; max-width: 1040px; margin: 0 auto; }
/* Square corners, on the frame and on the document inside it. The gold corner
   brackets are right angles, so a rounded frame behind them never lines up —
   and a document is a rectangle. Nothing in this gallery takes a radius. */
.gallery .d-proof {
  break-inside: avoid; margin-bottom: 28px; padding: 12px; border-radius: 0;
  transition: transform .15s, box-shadow .15s;
}
.gallery .d-proof:hover { transform: translateY(-4px); box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.gallery a { display: block; }
.gallery img { border-radius: 0; }
/* One caption shape for every exhibit: the label on the first line, the outcome
   on the second, both flush left. As a single justified row the two halves fit
   one line for a short figure and wrapped for a long one, so the gold sat
   beside the label on one card and beneath it on the card next to it, and the
   two ended at different heights — the alignment this gallery exists to keep.
   Each half still takes a whole line of its own: a label is never broken
   mid-phrase, which is what the nowrap is for. Every current label clears the
   narrowest card at 360px; a longer one would overflow, and the layout
   checker's edge-inset test is what catches it.
   The `.d-proof` in these selectors is load-bearing: the shared dossier sheet's
   own `.d-proof figcaption` rule has equal specificity and is read second, so a
   `.gallery figcaption` selector silently loses to its `display: flex`. */
.gallery .d-proof figcaption { display: block; padding-top: 12px; }
.gallery .d-proof figcaption span { display: block; white-space: nowrap; }
/* The outcome sits against the card's right edge, under a label that starts at
   its left — the two ends of a ledger line rather than two stacked lines. */
.gallery .d-proof figcaption .amount { margin-top: 7px; text-align: right; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
@media (max-width: 880px) {
  /* A three-option segmented control does not fit a phone, and tapping to
     reveal hides two thirds of the proof. Drop the control and stack all three
     galleries, deliberately unlabelled: every exhibit already carries a caption
     saying what it is, so headings between the groups only interrupt the
     evidence. The inter-panel margin matches the gallery gap so the whole thing
     reads as one continuous stream.
     scroll-margin clears the sticky header when a nav link jumps here. */
  .tabs { display: none; }
  .tab-panel { display: block; scroll-margin-top: 88px; }
}
@media (max-width: 960px) {
  /* The shared hero collapses for a two-column layout this page does not have;
     restore the vertical rhythm it zeroes out. The opener also stays centred
     rather than justified — justification is for the long body blocks
     elsewhere, and it opens rivers through three short centred lines. */
  body.page-results .d-hero { padding: 34px 0 22px; }
  body.page-results .d-hero .d-eyebrow { margin-bottom: 16px; }
  body.page-results .d-hero h1 { margin-bottom: 14px; }
  body.page-results .d-hero .sub {
    max-width: 660px; margin-inline: auto; text-align: center;
  }
  body.page-results .d-evidence { padding: 22px 0 56px; }
}
/* One column from the mobile switch down: a half-width exhibit on a tablet is
   too small to read, and its caption pair no longer fits on one line. Phones
   keep the column flow above, so each card stays as tall as its own document —
   with nothing beside it there, a shared window shape would buy no alignment
   and cost the taller screenshots their size. */
@media (max-width: 880px) { .gallery { column-count: 1; } }

/* The run of exhibits and the closing panel sit closer on a phone. Measured at
   393px the gap was 168px — the evidence band's 56px tail, the shared
   `section` rule's 84px head, and the last card's own 28px margin stacked one
   on another. Three separate paddings, none of them wrong alone.
   Halved here, and only here: on a desktop the panel is beside nothing and the
   full interval reads as a considered pause rather than a hole. The card's own
   margin stays out of it — that one sets the rhythm between exhibits, and
   trimming it to close this gap would tighten all thirty. */
@media (max-width: 880px) {
  body.page-results .d-evidence { padding-bottom: 24px; }
  body.page-results section.final-cta { padding-top: 36px; }
}

/* Desktop only: one window shape for every exhibit, so cards line up across the
   two tracks instead of staggering. The window is white and each document is
   fitted inside it whole — never cropped to fill it. These are all white-paper
   screenshots, so the leftover space is white on white and reads as more page
   rather than as padding, and a short wide email sits in it exactly as it would
   on a printed sheet. Cropping to fill was tried and cut mid-word through the
   right margin of every wide email, which reads as broken rather than as a
   crop. 8:5 is the shape most of these documents already are, so the offer
   letters and the sponsorships fill their window edge to edge; only the
   interview screenshots sit inside theirs with room to spare. */
@media (min-width: 881px) {
  .gallery {
    column-count: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
  .gallery .d-proof { margin-bottom: 0; }
  .gallery a {
    aspect-ratio: 8 / 5; overflow: hidden; background: #fff;
    border: 1px solid rgba(227,232,242,.12); border-radius: 0;
  }
  .gallery img {
    width: 100%; height: 100%; object-fit: contain; object-position: center top;
    border: 0; border-radius: 0;
  }
}

/* ---------- Image overlay ----------
   Built by script on first use, so nothing here applies until a proof image is
   opened. It sits above the sticky header, which is z-index 50. */
.lightbox {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(6,15,42,.93);
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 100%; max-height: calc(100vh - 48px); width: auto;
  box-shadow: var(--shadow-lg);
}
.lightbox-close {
  position: absolute; top: 12px; right: 12px; min-width: 44px; min-height: 44px;
  border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
  background: rgba(255,255,255,.10); color: #fff;
  font-family: var(--font); font-size: 24px; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: rgba(255,255,255,.22); }
/* Holds the page still behind the overlay. */
body.no-scroll { overflow: hidden; }

/* ---------- Forms ---------- */
/* Takes the page ground rather than white: this is a full-height panel beside
   the hero copy, not a card in a row of cards, and a white slab that size
   reads as a hole punched in the page. Its inputs stay white so the fields
   still read as fields. */
.form-card {
  background: var(--bg); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 36px; color: var(--ink);
}
.form-card h3 { font-size: 22px; font-weight: 900; margin-bottom: 6px; }
.form-card .form-sub { color: var(--muted); font-size: 14.5px; margin-bottom: 22px; }
/* Squeeze-page form card: title above the mockup, big headline below it.
   The product title is the dominant element — larger than the headline. */
.form-card-title {
  font-size: 30px; font-weight: 900; letter-spacing: .015em; text-transform: uppercase;
  color: var(--red-600); text-align: center; line-height: 1.15; margin-bottom: 16px;
}
.form-card h3.form-headline { font-size: 26px; text-align: center; }
/* Playbook 'why' cards: centered text so line endings aren't ragged, larger body copy.
   Keyed to a class, not a section id — each playbook page names its own section. */
.why-cards .step-card { text-align: center; }
.why-cards .step-num { margin-inline: auto; }
.why-cards .step-card p { font-size: 17px; line-height: 1.65; }
/* Opt-in pages: the centered section header closes on a short rule. Scoped to
   the pages carrying the opt-in form so other sections keep their own opener. */
body:has(#optin-form) .kicker { font-size: 12.5px; letter-spacing: .18em; }
body:has(#optin-form) h2.section-title { margin-bottom: 0; }
body:has(#optin-form) h2.section-title::after {
  content: ""; display: block; width: 76px; height: 2px;
  background: var(--navy-900); margin: 18px auto 0;
}
/* Phones read centered: headings and labels centre, long paragraph blocks
   justify — hyphenated, or a narrow justified column opens rivers of space. */
@media (max-width: 880px) {
  body:has(#optin-form) .why-cards .step-card p,
  body:has(#optin-form) .magnet-band p,
  .hero-grid:has(.form-card) .sub {
    text-align: justify; hyphens: auto; -webkit-hyphens: auto;
  }
}
.form-card .form-headline + .form-sub { text-align: center; }
#get-playbook { scroll-margin-top: 96px; }
.field { margin-bottom: 16px; }
/* Side-by-side first/last name inputs */
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 480px) { .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.field label { display: block; font-weight: 700; font-size: 13.5px; margin-bottom: 6px; color: var(--navy-900); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--radius);
  font-size: 16px; font-family: var(--font); background: #fbfcfe; transition: border .15s;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--navy-700); background: #fff; }
.field .hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.field .hint.email-suggest { color: var(--navy-700); }
.field .hint.email-suggest[hidden] { display: none; }
.email-suggest-btn {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-decoration: underline; cursor: pointer;
}
/* Both of the card's buttons are already full width, so their inline padding only
   steals room from the label: the submit button ran to three lines and the
   post-opt-in one dropped its arrow alone. Scoped to the card, so the application
   form's own submit button keeps the standard padding. Same trade as the magnet
   band's pill. */
.form-card .btn-block { padding-inline: 18px; }
.form-fineprint { font-size: 12px; color: var(--muted); margin-top: 14px; line-height: 1.5; }
.form-success { text-align: center; padding: 30px 10px; }
.form-success .big { font-size: 44px; margin-bottom: 10px; }
/* Inline booking calendar (qualified applicants only). min-height reserves space
   so the panel does not jump while the iframe loads; the embed script resizes it
   to fit once rendered. */
/* Duration/format line under the booking intro — the embed hides the event's
   own details block, so this is the lead's only pre-booking source for them. */
.booking-meta {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-top: -16px;
}
#calendar-embed { margin-top: 22px; }
#calendar-embed:empty { display: none; }
/* Scoped to the iframe path's own id, not to any iframe in the slot: the script
   embed sizes its frame itself, and a min-height meant for this one would fight it. */
#booking-frame {
  width: 100%; min-height: 700px; border: 0; overflow: hidden; display: block;
  border-radius: var(--radius); background: var(--card);
}
/* Script-embed container. The embed measures its own content and sets the frame
   height, so min-height only reserves space until then. overflow is auto rather
   than hidden so an under-measured frame scrolls instead of losing its buttons. */
#booking-embed { width: 100%; min-height: 540px; overflow: auto; border-radius: var(--radius); background: var(--card); }
/* Post-booking add-to-calendar links: inline text links padded up to the 44px
   minimum tap target without changing the line's visual size. */
#booking-addcal a { display: inline-block; padding: 12px 4px; margin: -12px 0; }

/* ---------- Quiz (application) ---------- */
.quiz-shell { max-width: 640px; margin: 0 auto; }
.progress-track { background: var(--line); height: 8px; border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
/* Flat red, like every other primary surface. The track keeps its round ends —
   that shape is the component, not a leftover pill. */
.progress-fill { height: 100%; background: var(--red-600); width: 0%; transition: width .3s ease; }
/* Step counter is a label row, so it takes the mono label voice. The step text
   is written by script; the uppercase here is presentational only. */
.progress-label {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); text-align: right; margin-bottom: 26px;
}
.quiz-step { display: none; }
.quiz-step.active { display: block; animation: fadeUp .3s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.quiz-step h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 900; line-height: 1.2; margin-bottom: 8px; }
.quiz-step .q-sub { color: var(--muted); margin-bottom: 26px; font-size: 15.5px; }
.option-grid { display: grid; gap: 12px; margin-bottom: 26px; }
.option-btn {
  text-align: left; background: var(--card); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; font-size: 16.5px; font-weight: 700; cursor: pointer; font-family: var(--font);
  display: flex; align-items: center; gap: 14px; transition: all .12s; color: var(--ink);
}
.option-btn:hover { border-color: var(--navy-700); transform: translateY(-1px); box-shadow: var(--shadow); }
.option-btn.selected { border-color: var(--red-600); background: #fff5f4; }
.option-btn .opt-emoji { font-size: 22px; }
.quiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.back-link { background: none; border: none; color: var(--muted); font-weight: 700; cursor: pointer; font-size: 15px; font-family: var(--font); padding: 10px; }
.back-link:hover { color: var(--ink); }
.quiz-trust { text-align: center; margin-top: 34px; color: var(--muted); font-size: 13.5px; }

/* 404 only: this is the one page short enough that the light body background
   showed for ~169px below the dark footer. Scoped to a body class so the four
   real pages, which are all far taller than the viewport, are untouched. */
body.page-404 { min-height: 100vh; display: flex; flex-direction: column; }
body.page-404 > section { flex: 1 0 auto; padding: 56px 0 72px; }
body.page-404 > .site-footer { margin-top: auto; }
/* Context line above a question — reads as background, never as the question. */
.quiz-echo {
  color: var(--muted); font-size: 14.5px; font-weight: 700; margin-bottom: 8px;
}
.quiz-echo b { color: var(--ink); }

/* ---------- Legal pages (privacy, terms) ---------- */
/* These two pages are nothing but long-form prose, so they get one block of
   type rules instead of a component per element. Nothing here is a new design
   decision: the reading setting is the FAQ body's (17px / 1.7 / #414b61), the
   section headings borrow the FAQ summary's 19px/800, and the bullet marker is
   the red used for every other accent. Width comes from .wrap-narrow. */
.legal-head { margin-bottom: 38px; }
/* .kicker is centered by default for section headers; left here, same override
   .about-kicker makes, because the h1 under it is left-aligned body text. */
.legal-head .kicker { text-align: left; }
.legal-head h1 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 900; line-height: 1.15; }
.legal-updated { color: var(--muted); font-size: 13.5px; font-weight: 700; margin-top: 10px; }
/* overflow-wrap: the text quotes full URLs, and an unbreakable string is the
   exact thing that floors a grid track at its min-content width (pitfall 1). */
.legal p, .legal li { color: #414b61; font-size: 17px; line-height: 1.7; overflow-wrap: anywhere; }
.legal p { margin-bottom: 16px; }
.legal h2 {
  font-size: 19px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--navy-900); margin: 40px 0 14px;
}
/* minmax(0,…) rather than the implicit auto track: the list holds full URLs,
   and an auto track floors at min-content. */
.legal ul { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 20px; }
/* Not the flex marker .check-list uses: a flex li makes every text node and every
   inline <a> its own flex item, so a bulleted paragraph breaks into columns. */
.legal li { position: relative; padding-left: 22px; }
/* Marker in markup would be six dozen extra spans; ::before keeps the HTML
   readable as the legal text it is. */
.legal li::before { content: "•"; color: var(--red-600); font-weight: 900; position: absolute; left: 3px; top: 0; }
.legal a { color: var(--navy-700); font-weight: 700; }
.legal strong { color: var(--ink); font-weight: 800; }

/* ---------- Guide pages (hub + guides) ---------- */
/* Section headers close on a short rule, as on the other content pages: navy on
   the light sections, gold on the dark final CTA. Scoped to the page class so
   the shared blocks keep their own defaults everywhere else. */
body.page-guide .kicker { font-size: 12.5px; letter-spacing: .18em; }
body.page-guide h2.section-title { margin-bottom: 0; }
body.page-guide h2.section-title::after,
body.page-guide .final-cta h2::after {
  content: ""; display: block; width: 76px; height: 2px;
  background: var(--navy-900); margin: 18px auto 0;
}
body.page-guide .section-lede { max-width: 720px; margin-top: 24px; }
/* Only where no lede sits between the rule and the list — otherwise the lede's
   own bottom margin carries the gap. */
body.page-guide h2.section-title + .faq-list { margin-top: 34px; }
body.page-guide .final-cta h2 { margin-bottom: 0; }
body.page-guide .final-cta h2::after { background: var(--gold-500); margin: 20px auto 0; }
body.page-guide .final-cta p { max-width: 720px; margin: 26px auto 32px; font-size: 17px; line-height: 1.65; }
@media (max-width: 880px) {
  /* Long paragraph blocks justify — hyphenated, or a narrow justified column
     opens rivers of space. Bullets stay ragged; a justified short line is worse
     than an uneven one. */
  body.page-guide .hero .sub,
  body.page-guide .section-lede,
  body.page-guide .legal p,
  body.page-guide .faq-body,
  body.page-guide .final-cta p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
  body.page-guide .legal li { hyphens: auto; -webkit-hyphens: auto; }
}

/* Utility */
.hidden { display: none !important; }