/*
 * site.css — marketing-site additions layered on top of academy-shell.css.
 *
 * Scope is deliberately narrow: layout glue the shell leaves to the host page,
 * the persistent solutions-led nav (the shell ships an Academy burger/mega
 * pattern instead), required accessibility states (visible focus, skip link)
 * that the shell does not define, and a few page-section helpers for the
 * marketing pages. Everything reuses the shell's design tokens. This file does
 * NOT re-derive the header, footer, or gold bar — those come from the shell.
 */

/* ── Layout glue ─────────────────────────────────────────────── */
/* The shell footer uses margin-top:auto; that needs a flex-column body. */
body { display: flex; flex-direction: column; }
main { flex: 1 0 auto; }

/* ── Accessibility: visible focus (shell defines none) ───────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--gold-dim);
  outline-offset: 2px;
  border-radius: 4px;
}
/* On dark surfaces, full gold reads better than gold-dim. */
.academy-header :focus-visible,
.academy-hero :focus-visible,
.academy-footer :focus-visible,
.academy-section--dark :focus-visible,
.academy-section--charcoal :focus-visible,
.proof-band :focus-visible { outline-color: var(--gold); }

.skip-link {
  position: absolute;
  left: 8px;
  top: -56px;
  z-index: 1000;
  background: var(--gold);
  color: #1E1E1E;
  font-family: var(--fw-font-head);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus { top: 8px; }

/* ── Persistent primary nav ──────────────────────────────────── */
.site-header .academy-header { position: relative; }
.site-header .academy-header__brand { margin-right: auto; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}
.site-nav__item { position: relative; }

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fw-font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 6px;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.site-nav__link:hover,
.site-nav__item:focus-within > .site-nav__link { color: #fff; background: rgba(255, 255, 255, 0.06); }
/* Exact current page and section-ancestor both read gold, so a visitor deep in
   a section still sees which top-level area they are in. The open submenu then
   marks the exact page. */
.site-nav__link[aria-current="page"],
.site-nav__link--section { color: var(--gold); }
.site-nav__caret { font-size: 9px; opacity: 0.7; }

.site-nav__submenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 230px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: none;
  z-index: 400;
}
/* Transparent bridge over the 6px gap so moving the mouse from the link into
   the menu never crosses a dead zone that would close it. */
.site-nav__submenu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 0;
  right: 0;
  height: 6px;
}
.site-nav__item:hover > .site-nav__submenu,
.site-nav__item:focus-within > .site-nav__submenu,
.site-nav__item.is-open > .site-nav__submenu { display: block; }

.site-nav__sublink {
  display: block;
  font-family: var(--fw-font-head);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.site-nav__sublink:hover { background: var(--off); color: var(--gold-dim); }
.site-nav__sublink[aria-current="page"] { color: var(--gold-dim); background: rgba(254, 194, 64, 0.08); }

.site-header__cta { margin-left: 10px; }

.site-nav-burger { display: none; }   /* shown on mobile */
.site-nav__cta { display: none; }      /* CTA inside the mobile panel */

/* ── Mobile nav ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .site-header__cta { display: none; }
  .site-nav-burger { display: inline-flex; }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--dark);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px var(--gutter) 20px;
    display: none;
    z-index: 450;
    box-shadow: var(--shadow-lg);
  }
  .site-nav.open { display: block; }

  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__link { padding: 12px 8px; font-size: 14px; }

  /* Submenus are always expanded on mobile (no hover). */
  .site-nav__submenu::before { content: none; }   /* no hover bridge needed on mobile */
  .site-nav__submenu {
    position: static;
    display: block;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0 8px 12px;
    margin: 0;
    min-width: 0;
  }
  .site-nav__sublink { color: rgba(255, 255, 255, 0.7); padding: 9px 8px; }
  .site-nav__sublink:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }

  .site-nav__cta { display: inline-flex; margin-top: 12px; }
}

/* ── Hero CTA row ────────────────────────────────────────────── */
.hero-eyebrow { margin-bottom: 14px; }
.hero-title { margin-bottom: 22px; max-width: 18ch; }
.hero-subhead { margin-bottom: 8px; }
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}
.hero-cta-help {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 10px;
}

/* ── Generic section heading block ───────────────────────────── */
.section-head { max-width: 720px; margin-bottom: 36px; }
.section-head .academy-heading-2 { margin-bottom: 14px; }
.section-lead { font-size: 17px; font-weight: 300; line-height: 1.7; color: var(--mid); }
.academy-section--dark .section-lead,
.academy-section--charcoal .section-lead { color: rgba(255, 255, 255, 0.65); }

/* ── "Who we serve" lens grid + differentiation points ───────── */
.lens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--fw-space-grid-gap) 40px;   /* 36px row gap (DS "Layout & Rhythm": 32–40px) */
}
/* DS "Balance the feature grid": match columns to the item count so rows stay
   full. A four-item grid reads as a 2×2, not a 3-up row with one orphan. (Three-
   and five-item grids already balance at the auto-fit default, so only exactly
   four is special-cased.) */
.lens-grid:has(.lens-item:nth-of-type(4)):not(:has(.lens-item:nth-of-type(5))) {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 560px) {
  .lens-grid:has(.lens-item:nth-of-type(4)):not(:has(.lens-item:nth-of-type(5))) {
    grid-template-columns: 1fr;
  }
}
/* DS "Give imagery clear space": any section image that isn't the first thing in
   its container gets its own beat (40–56px above), not jammed under the copy. */
.academy-container > .media:not(:first-child) { margin-top: var(--fw-space-media); }

/* Tighter row rhythm where a four-item grid sits above a screenshot, so the two
   rows read as one compact cluster instead of drifting apart above the image. */
.lens-grid.lens-grid--compact { row-gap: 16px; }

/* Featured capability: pulls one item with a much longer description out of the
   feature grid so it does not stretch a same-height row. Full-width card, label
   in a side column, body held to the DS measure so it stays readable. */
.capability-feature {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: 20px 40px;
  align-items: start;
  margin-top: var(--fw-space-grid-gap);
  padding: 26px 30px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--fw-teal);
  border-radius: var(--fw-radius-lg);
  box-shadow: var(--shadow-sm);
}
.capability-feature__term {
  font-family: var(--fw-font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--charcoal);
}
.capability-feature__desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--mid);
  max-width: var(--fw-measure);
}
@media (max-width: 620px) {
  .capability-feature { grid-template-columns: 1fr; gap: 10px; }
}

/* ── Data process diagram — "How your data gets here" (design handoff) ──────
   Five governed steps: 01–04 are FWS work (teal), 05 is the client payoff
   (gold, heavier). A dashed connector reads as movement, and the 4:1 agency
   band encodes "FWS does 1–4, you do 5". Desktop is five-across; it stacks
   vertically at <=720px with the connector as a single rail and step 05 in a
   tinted card. Colors map to the DS tokens; connector/band-text greys are
   handoff-specific literals. */
.data-process {
  background: var(--off);
  border-radius: 16px;
  padding: 56px 48px 48px;
}
.data-process__head { text-align: center; margin-bottom: 46px; }
.data-process__eyebrow {
  display: inline-block; margin-bottom: 10px;
  font-family: var(--fw-font-head); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal);
}
.data-process__title {
  font-family: var(--fw-font-head); font-size: clamp(22px, 3vw, 30px);
  font-weight: 800; letter-spacing: -0.015em; color: var(--navy);
  line-height: 1.15; max-width: 720px; margin: 0 auto 12px;
}
.data-process__lead {
  font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--mid);
  max-width: 560px; margin: 0 auto;
}
.data-process__steps {
  display: grid; grid-template-columns: repeat(5, 1fr);
  position: relative;
}
.data-process__steps::before {   /* dashed connector behind the number circles */
  content: ""; position: absolute; top: 31px; left: 10%; right: 10%; height: 2px; z-index: 0;
  background: repeating-linear-gradient(90deg, #c4d0d6 0, #c4d0d6 7px, transparent 7px, transparent 13px);
}
.data-process__step { position: relative; z-index: 1; padding: 0 12px; text-align: center; }
.data-process__num {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--teal); color: #fff;
  font-family: var(--fw-font-head); font-size: 22px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px; box-shadow: 0 4px 14px rgba(0, 184, 169, 0.28);
}
.data-process__label {
  font-family: var(--fw-font-head); font-size: 16px; font-weight: 700;
  color: var(--navy); margin-bottom: 8px;
}
/* Step descriptions were 12.5px/300, which was hard to read in five narrow
   columns. Raised to 14px and off the 300 weight, which is what actually made it
   thin at this size, with a little more leading to match. Shared by the Why
   FutureWorks and FutureWorks BI placements. */
.data-process__desc { font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--mid); }
/* Step 05 — the client payoff */
.data-process__step--payoff .data-process__num {
  background: var(--gold); color: var(--navy); font-weight: 800;
  box-shadow: 0 6px 20px rgba(254, 194, 64, 0.5);
}
.data-process__step--payoff .data-process__label { font-weight: 800; }
/* Agency band — 4:1 FWS / You split */
/* Caption variant (Why FutureWorks): the diagram runs headless there, directly
   under the hero it proves, and the caption carries the framing instead. Sits
   inside the card, below the agency band, so it reads as part of the figure. */
.data-process__caption {
  max-width: var(--fw-measure);
  margin: 28px auto 0;
  text-align: center;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--mid);
}
.data-process__agency { display: grid; grid-template-columns: 4fr 1fr; gap: 14px; margin-top: 40px; }
.data-process__agency > span {
  font-family: var(--fw-font-head); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; text-align: center;
  border-radius: 8px; padding: 12px;
}
.data-process__agency-fws { background: rgba(0, 184, 169, 0.10); border: 1px solid rgba(0, 184, 169, 0.30); color: #008577; }
.data-process__agency-you { background: rgba(254, 194, 64, 0.18); border: 1px solid rgba(254, 194, 64, 0.55); color: #8a6a12; }

@media (max-width: 720px) {
  .data-process { padding: 32px 20px; }
  .data-process__steps { grid-template-columns: 1fr; }
  .data-process__steps::before {   /* connector becomes a single vertical rail */
    top: 30px; bottom: 30px; left: 24px; right: auto; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, #c4d0d6 0, #c4d0d6 7px, transparent 7px, transparent 13px);
  }
  .data-process__step { display: flex; gap: 16px; align-items: flex-start; text-align: left; padding: 0 0 20px; }
  .data-process__num { width: 48px; height: 48px; font-size: 17px; margin: 0; flex-shrink: 0; }
  .data-process__label { font-size: 15px; }
  .data-process__step--payoff {
    background: rgba(254, 194, 64, 0.14); border: 1px solid rgba(254, 194, 64, 0.5);
    border-radius: 12px; padding: 12px; margin-top: 4px;
  }
}

/* ── Find Your Fit: interactive tier matcher (design handoff) ───────────────
   Two-column: left pitch, right card that steps Q1 -> Q2 -> result. Teal for
   the quiz, gold for the result CTA. Hidden until fit-finder.js reveals it; a
   <noscript> static guide covers no-JS. Handoff-specific tints (#f4f8f7,
   #cfe7e3, #eafaf7, #00877b, greys) are literals; brand colors use tokens. */
/* ── Find Your Fit tier matcher (Design Brief v1.4, handoff v1.1) ──────
   Full-bleed navy photo entry section (SECTION-ENTRY-BUILD.md) hosting the
   whole flow: fit-finder.js swaps .fyf__card-body through Q1 -> Q2 -> result /
   not-sure. The invitation is a persistent header. Tier accents are fixed:
   Board Matters gold, National teal, full platform navy. The tool never gates
   the tier cards below; the "not sure" path scrolls to and pulses them
   (#tier-cards). Component-local literals (#3fd5c7, #e0ddd3, #8a8a83, chip
   inks) are flagged for token promotion if reused elsewhere. */
.fyf {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--fw-navy);   /* fallback; prevents a white flash */
  background-image: url("/assets/images/FWSBI-HeroBack-withMasking.webp");
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}
/* Light scrim (28-45%). Do NOT darken: the photo is pre-masked; navy above
   ~60% collapses it to a flat band. White headline already measures >9:1. */
.fyf__scrim { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(27,58,75,.42), rgba(27,58,75,.28) 45%, rgba(27,58,75,.45)); }
.fyf__wash { position: absolute; bottom: -160px; left: -90px; width: 460px; height: 460px;
  border-radius: 50%; z-index: 2; pointer-events: none;
  background: radial-gradient(circle, rgba(0,184,169,.13), transparent 66%); }

.fyf__inner { position: relative; z-index: 4; max-width: 1140px; margin-inline: auto;
  padding: clamp(52px, 7.5vw, 96px) clamp(22px, 5vw, 48px); }

/* Invitation (persistent section header) */
.fyf__invite { text-align: center; max-width: 660px; margin: 0 auto clamp(30px, 4vw, 42px); }
.fyf__eyebrow { font: 700 11px/1 var(--fw-font-head); letter-spacing: .16em; text-transform: uppercase;
  color: #3fd5c7; display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
.fyf__eyebrow::before, .fyf__eyebrow::after { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--fw-gold); }
.fyf__title { font: 800 clamp(28px, 4.6vw, 42px)/1.06 var(--fw-font-head); letter-spacing: -.025em;
  color: #fff; margin-bottom: 16px; text-wrap: pretty; }
.fyf__lede { font: 300 clamp(15px, 1.7vw, 17.5px)/1.62 var(--fw-font-body); color: rgba(255,255,255,.78);
  max-width: 480px; margin-inline: auto; text-wrap: pretty; }
.fyf__tiers { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 24px;
  font: 700 10.5px/1 var(--fw-font-head); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.fyf__tiers span { width: 9px; height: 9px; border-radius: 2px; }
.fyf__tiers span:nth-child(1) { background: var(--fw-gold); }
.fyf__tiers span:nth-child(2) { background: var(--fw-teal); }
.fyf__tiers span:nth-child(3) { background: #fff; }

/* Card (hosts the whole flow) */
.fyf__card { max-width: 640px; margin-inline: auto; background: #fff; border-radius: 14px;
  overflow: hidden; box-shadow: 0 26px 64px rgba(0,0,0,.34); }
.fyf__card-rail { height: 4px; background: var(--fw-gold); }        /* default + Board Matters */
.fyf__card--teal .fyf__card-rail { background: var(--fw-teal); }   /* National */
.fyf__card--navy .fyf__card-rail { background: var(--fw-navy); }   /* full platform */
.fyf__card-body { display: flex; flex-direction: column; min-height: 334px;
  padding: clamp(22px,3vw,30px) clamp(20px,3vw,30px) clamp(24px,3.2vw,32px); }

.fyf__meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.fyf__step { font: 700 11px/1 var(--fw-font-head); letter-spacing: .12em; text-transform: uppercase; color: #8a8a83; }
.fyf__progress { display: flex; gap: 5px; flex-shrink: 0; }
.fyf__progress span { width: 24px; height: 4px; border-radius: 2px; background: #e4e1d8; }
.fyf__progress span:first-child, .fyf__progress span.is-on { background: var(--fw-teal); }

.fyf__q { font: 700 clamp(20px,2.6vw,25px)/1.25 var(--fw-font-head); letter-spacing: -.015em;
  color: var(--fw-navy); margin-bottom: 20px; text-wrap: pretty; }
.fyf__q:focus-visible, .fyf__rname:focus-visible, .fyf__nsline:focus-visible {
  outline: 2px solid var(--fw-teal); outline-offset: 4px; border-radius: 3px; }

.fyf__options { display: flex; flex-direction: column; gap: 11px; }
.fyf__opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: left;
  cursor: pointer; background: var(--fw-off); border: 1.5px solid #e0ddd3; border-radius: 11px;
  padding: 17px 18px; min-height: 60px; font: 400 clamp(15px,1.7vw,16px)/1.4 var(--fw-font-body);
  color: var(--fw-navy); transition: border-color .16s, background .16s, box-shadow .16s; }
.fyf__opt > span { font-size: 17px; color: var(--fw-teal); flex-shrink: 0; }
.fyf__opt:hover { border-color: var(--fw-teal); background: #eefaf8; box-shadow: 0 4px 14px rgba(0,184,169,.16); }
.fyf__opt:focus-visible { outline: none; border-color: var(--fw-teal); box-shadow: 0 0 0 3px rgba(0,184,169,.3); }

.fyf__back { align-self: flex-start; margin-top: 16px; background: none; border: none; cursor: pointer;
  font: 400 14px/1 var(--fw-font-body); color: #77776F; }
.fyf__back:hover { color: var(--fw-navy); }
.fyf__back:focus-visible { outline: 2px solid var(--fw-teal); outline-offset: 2px; }

/* Results */
.fyf__rtop { margin-bottom: 12px; }
.fyf__chip { display: inline-flex; align-items: center; gap: 7px; font: 700 10px/1 var(--fw-font-head);
  letter-spacing: .14em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; }
.fyf__dot { width: 7px; height: 7px; border-radius: 50%; }
.fyf__chip--gold { background: rgba(254,194,64,.16); color: #8a6a12; }
.fyf__chip--gold .fyf__dot { background: var(--fw-gold); }
.fyf__chip--teal { background: rgba(0,184,169,.14); color: #00877b; }
.fyf__chip--teal .fyf__dot { background: var(--fw-teal); }
.fyf__chip--navy { background: rgba(27,58,75,.1); color: var(--fw-navy); }
.fyf__chip--navy .fyf__dot { background: var(--fw-navy); }

.fyf__descriptor { font: 300 13px/1.3 var(--fw-font-body); color: #77776F; margin-bottom: 2px; }
.fyf__rname { font: 800 clamp(21px,2.7vw,26px)/1.1 var(--fw-font-head); letter-spacing: -.018em;
  color: var(--fw-navy); margin-bottom: 10px; text-wrap: pretty; }
.fyf__rdesc { font: 300 clamp(13.5px,1.6vw,15px)/1.65 var(--fw-font-body); color: #4F4F4F; margin-bottom: 14px; }
.fyf__dim { font: 300 clamp(13.5px,1.6vw,15px)/1.65 var(--fw-font-body); color: #4F4F4F; margin-bottom: 16px; }
.fyf__dim strong { font-family: var(--fw-font-head); font-weight: 700; color: var(--fw-navy); }

.fyf__callout { background: var(--fw-off); border-radius: 10px; padding: 15px 16px; margin-bottom: 16px; }
.fyf__callout-head { display: flex; align-items: center; gap: 7px; font: 700 13.5px/1.3 var(--fw-font-head);
  color: var(--fw-navy); margin-bottom: 6px; }
.fyf__sq { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.fyf__sq--gold { background: var(--fw-gold); }
.fyf__sq--teal { background: var(--fw-teal); }
.fyf__callout-short { display: none; }
.fyf__callout-body { font: 300 13.5px/1.6 var(--fw-font-body); color: #4F4F4F; margin: 0; }

.fyf__ai { font: 300 clamp(12px,1.4vw,13.5px)/1.55 var(--fw-font-body); color: #77776F; margin-top: auto; padding-top: 16px; }

.fyf__ractions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 16px; }
.fyf__cta { display: inline-flex; align-items: center; justify-content: center; background: var(--fw-gold);
  color: var(--fw-navy); font: 800 15px/1 var(--fw-font-head); min-height: 52px; padding: 15px 26px;
  border-radius: 9px; text-decoration: none; transition: background .16s, transform .16s; }
.fyf__cta:hover { background: var(--gold-hover, #ffd060); transform: translateY(-1px); }
.fyf__cta:focus-visible { outline: 2px solid var(--fw-navy); outline-offset: 3px; }
.fyf__stepdown { font: 400 14.5px/1.4 var(--fw-font-body); color: #00877b; text-decoration: underline; text-underline-offset: 3px; }
.fyf__stepdown:focus-visible { outline: 2px solid var(--fw-teal); outline-offset: 2px; }

.fyf__restart { align-self: flex-start; margin-top: 18px; background: none; border: none; cursor: pointer;
  font: 400 14px/1 var(--fw-font-body); color: #77776F; padding: 4px 0; }
.fyf__restart:hover { color: var(--fw-navy); text-decoration: underline; }
.fyf__restart:focus-visible { outline: 2px solid var(--fw-teal); outline-offset: 2px; }

.fyf__notsure { flex: 1; }
.fyf__nsline { font: 700 clamp(20px,2.6vw,25px)/1.25 var(--fw-font-head); letter-spacing: -.015em; color: var(--fw-navy); margin-bottom: 4px; }

/* Enter motion (calm, opacity + slight rise) */
.fyf__card-body > * { animation: fyfIn .2s var(--fw-ease, cubic-bezier(.2,.7,.2,1)); }
@keyframes fyfIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* No-JS static guide (spec Section 7), on the navy band */
.fyf__inner--noscript { padding-top: clamp(52px, 7.5vw, 96px); }
.fyf__static { max-width: 640px; margin-inline: auto; background: #fff; border-radius: 14px; padding: 30px; }
.fyf__static-prompt { font: 700 18px/1.3 var(--fw-font-head); color: var(--fw-navy); margin-bottom: 14px; }
.fyf__static-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px;
  font-size: 15px; line-height: 1.5; color: #4F4F4F; }
.fyf__static-list a { color: var(--gold-dim); font-weight: 600; }
.fyf__static-close { font-size: 15px; color: #4F4F4F; margin-top: 16px; }

/* Tier-card highlight for the "not sure" path (soft gold pulse, no reflow). */
.fit-card.is-fitflash { outline: 2px solid var(--fw-gold); outline-offset: 3px; animation: fitGlow 1.6s ease 2; }
@keyframes fitGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(254, 194, 64, 0); } 50% { box-shadow: 0 0 0 5px rgba(254, 194, 64, 0.5); } }

/* Results: single column, full-width primary below 720px (spec Section 10). */
@media (max-width: 720px) {
  .fyf__ractions { flex-direction: column; align-items: stretch; gap: 14px; }
  .fyf__cta { width: 100%; }
  .fyf__stepdown { text-align: center; }
  .fyf__callout-long { display: none; }
  .fyf__callout-short { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .fyf__card-body > * { animation: none; }
  .fyf__opt { transition: none; }
  .fyf__cta { transition: none; }
  .fit-card.is-fitflash { animation: none; }
}
.lens-item__term {
  font-family: var(--fw-font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--charcoal);
  margin-bottom: 4px;
}
.lens-item__desc { font-size: 15px; line-height: 1.65; color: var(--mid); }
.lens-note {
  margin-top: 28px;
  font-size: 15px;
  font-style: italic;
  color: var(--mid);
  max-width: 760px;
}

/* ── Tier preview cards (light surface) ──────────────────────── */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.tier-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.18s, box-shadow 0.2s;
}
.tier-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
  opacity: 0;
  transition: opacity 0.2s;
}
.tier-card:hover { border-color: rgba(254, 194, 64, 0.5); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tier-card:hover::before { opacity: 1; }
.tier-card__name { font-family: var(--fw-font-head); font-size: 18px; font-weight: 700; color: var(--navy); }
.tier-card__desc { font-size: 15px; line-height: 1.65; color: var(--mid); flex: 1; }
.tier-card__link {
  font-family: var(--fw-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-dim);
  text-decoration: none;
  display: inline-flex;
  gap: 5px;
}
.tier-card__link::after { content: '→'; }
.tier-card__link:hover { color: var(--gold-dim); text-decoration: underline; }

.section-handoff { margin-top: 32px; }
.section-handoff a {
  font-family: var(--fw-font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-dim);
  text-decoration: none;
}
.section-handoff a:hover { text-decoration: underline; }
/* Centered two-route variant (the stat band's "go deeper" invitation). The two
   links are alternatives, so they sit on one line joined by "or" and stack
   cleanly when the row runs out of width. */
.section-handoff--center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 8px 16px;
  text-align: center;
}
.section-handoff__or { font-size: 13px; color: var(--mid); }

/* ── Proof band ──────────────────────────────────────────────── */
.proof-band { background: var(--navy); color: #fff; }
.proof-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 220px) 1fr;
  gap: 40px;
  align-items: center;
}
.proof-band__num {
  font-family: var(--fw-font-head);
  font-size: clamp(56px, 9vw, 88px);
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.03em;
}
.proof-band__unit {
  display: block;
  font-family: var(--fw-font-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 8px;
}
.proof-band__text { font-size: 17px; font-weight: 300; line-height: 1.75; color: rgba(255, 255, 255, 0.8); }
@media (max-width: 640px) {
  .proof-band__inner { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Closing CTA ─────────────────────────────────────────────── */
.closing-cta { text-align: center; }
.closing-cta .academy-heading-2 { margin-bottom: 16px; }
.closing-cta__text { font-size: 17px; line-height: 1.7; color: var(--mid); max-width: 640px; margin: 0 auto 28px; }
.closing-cta__row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; }

/* ── Compact hero (Solutions Overview, inner pages) ──────────── */
/* Shorter than the home hero: it orients a leaning-in visitor, it does not
   re-run the full homepage pitch. */
.academy-hero--compact { padding-top: 64px; padding-bottom: 64px; }
.academy-hero--compact .hero-title { max-width: 22ch; }
.academy-hero--compact .hero-subhead { max-width: 60ch; }

/* ── The progression (start here, grow here) ─────────────────── */
.progression {
  list-style: none;
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.progression__node {
  flex: 1 1 0;
  background: var(--off);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.progression__node--anchor {
  background: var(--navy);
  border-color: var(--navy);
}
.progression__step {
  font-family: var(--fw-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}
.progression__name {
  font-family: var(--fw-font-head);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}
.progression__note { font-size: 14px; line-height: 1.6; color: var(--mid); }
.progression__node--anchor .progression__name { color: #fff; }
.progression__node--anchor .progression__note { color: rgba(255, 255, 255, 0.78); }
.progression__arrow {
  flex: none;
  align-self: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--gold-dim);
}
@media (max-width: 760px) {
  .progression { flex-direction: column; }
  .progression__arrow { transform: rotate(90deg); align-self: center; }
}

/* ── Fit-finder tier cards (value + best-for + solves) ───────── */
.fit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.fit-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.18s, box-shadow 0.2s;
}
.fit-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold);
  opacity: 0;
  transition: opacity 0.2s;
}
.fit-card:hover { border-color: rgba(254, 194, 64, 0.5); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.fit-card:hover::before { opacity: 1; }
.fit-card--anchor::before { opacity: 1; }
.fit-card__name { font-family: var(--fw-font-head); font-size: 18px; font-weight: 700; color: var(--navy); }
.fit-card__value { font-size: 16px; line-height: 1.55; color: var(--charcoal); font-weight: 500; }
.fit-card__meta { display: grid; gap: 12px; margin: 0; flex: 1; }
.fit-card__row { display: grid; gap: 2px; }
.fit-card__row dt {
  font-family: var(--fw-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.fit-card__row dd { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mid); }
.fit-card__link {
  font-family: var(--fw-font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-dim);
  text-decoration: none;
  display: inline-flex;
  gap: 5px;
}
.fit-card__link::after { content: '→'; }
.fit-card__link:hover { text-decoration: underline; }

/* ── Honest-note callout (Flagship limitation, etc.) ─────────── */
.honest-note {
  margin-top: 36px;
  border-left: 3px solid var(--gold-dim);
  background: var(--white);
  border-radius: 0 10px 10px 0;
  padding: 22px 26px;
  max-width: 760px;
}
.honest-note__label {
  font-family: var(--fw-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 8px;
}
.honest-note__text { font-size: 15px; line-height: 1.7; color: var(--mid); }

/* ── Photo-backed section stage ───────────────────────────────────────────
   A section that carries a photograph behind its copy, with a navy scrim over
   it. Reusable: set the background-image inline on the section.

   The 0.82 scrim is an accessibility floor, not a taste setting. Body copy sits
   directly on the photo here, so the scrim has to hold contrast against the
   BRIGHTEST pixels in the image. Over pure white that scrim resolves to about
   rgb(68,93,107), which measures 6.9:1 for white text and 4.6:1 for the gold
   eyebrow. Both clear AA. Lighter scrims are only safe when every piece of text
   sits on its own opaque card, which is how the Contact chooser gets away with
   0.30. Lower this and the eyebrow fails first. */
.photo-stage {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.photo-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(27, 58, 75, 0.82);
  pointer-events: none;
}
.photo-stage > * { position: relative; z-index: 1; }
.photo-stage .academy-heading-2 { color: #fff; }
.photo-stage .section-lead { color: rgba(255, 255, 255, 0.82); }
.photo-stage .academy-eyebrow--dim { color: var(--gold); }
/* Cards go pure white rather than --off so they read as lifted off the photo. */
.photo-stage .path-card { background: var(--white); }

/* ── Org-type path cards (state vs local board) ──────────────── */
.path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
.path-card {
  background: var(--off);
  border: 1px solid var(--rule);
  border-radius: 12px;
  border-top: 3px solid var(--teal);
  padding: 28px;
}
.path-card__label {
  font-family: var(--fw-font-head);
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}
.path-card__text { font-size: 15px; line-height: 1.7; color: var(--mid); }

/* ── What's included band ────────────────────────────────────── */
.included {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
}
.included__copy .academy-eyebrow { display: block; margin-bottom: 10px; }
.included__copy .academy-heading-2 { margin-bottom: 14px; }
.included__text { font-size: 16px; line-height: 1.7; color: var(--mid); }
.included__list { list-style: none; display: grid; gap: 14px; }
.included__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--cream-bd);
  border-radius: 10px;
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--charcoal);
}
.included__check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 184, 169, 0.15);
  color: var(--teal);
  font-weight: 700;
}
@media (max-width: 760px) {
  .included { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Closing-CTA helpers (light-surface variants) ────────────── */
.closing-cta__help {
  font-size: 13px;
  color: var(--mid);
  margin-top: 12px;
}
.closing-cta__tertiary { margin-top: 16px; }
.closing-cta__tertiary a {
  font-family: var(--fw-font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-dim);
  text-decoration: none;
}
.closing-cta__tertiary a:hover { text-decoration: underline; }

/* ── Centered section head (pricing, etc.) ───────────────────── */
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ── Pricing (National single-seat; multi-seat quote) ────────── */
.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 760px;
  margin: 0 auto;
  align-items: stretch;
}
.pricing-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.pricing-card--feature {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}
.pricing-card__label {
  font-family: var(--fw-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.pricing-card__price {
  font-family: var(--fw-font-head);
  font-size: clamp(38px, 6vw, 52px);
  font-weight: 800;
  line-height: 1;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.pricing-card__unit {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--mid);
  margin-top: 8px;
}
.pricing-card__price--quote { font-size: clamp(28px, 4vw, 34px); }
.pricing-card__note { font-size: 15px; line-height: 1.65; color: var(--mid); flex: 1; }
.pricing-card .btn-primary,
.pricing-card .fit-card__link { align-self: flex-start; }

/* ── Board Matters question set (what it is) ─────────────────── */
.qset {
  list-style: none;
  display: grid;
  gap: 0;
  max-width: 760px;
  border-top: 1px solid var(--rule);
}
.qset__item {
  font-family: var(--fw-font-head);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--charcoal);
  padding: 18px 0 18px 34px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.qset__item::before {
  content: '?';
  position: absolute;
  left: 0;
  top: 18px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(254, 194, 64, 0.18);
  color: var(--gold-dim);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qset__note {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--mid);
  max-width: 760px;
}

/* ── Single-column pricing (Board Matters) ───────────────────── */
.pricing--single { max-width: 420px; }
.pricing-card__includes {
  list-style: none;
  display: grid;
  gap: 10px;
  flex: 1;
}
.pricing-card__includes li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--mid);
}
.pricing-card__includes li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--teal);
  font-weight: 700;
}
.pricing-card__guardrail {
  font-size: 13px;
  line-height: 1.55;
  color: var(--mid);
  margin-top: 4px;
}
.pricing-upgrade {
  max-width: 640px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
  color: var(--mid);
}

/* ── Data & Insights ranked progression ──────────────────────── */
.di-list { list-style: none; display: grid; gap: 20px; }
.di-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 32px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.di-item--lead { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.di-item--lead::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gold);
}

.di-item__rank { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.di-item__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-family: var(--fw-font-head);
  font-size: 24px;
  font-weight: 800;
}
.di-item__gate {
  font-family: var(--fw-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  background: var(--off);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 6px 12px;
}
.di-item__gate--open { color: var(--teal); border-color: rgba(0, 184, 169, 0.35); background: rgba(0, 184, 169, 0.1); }

.di-item__body .academy-heading-2 { margin-bottom: 12px; }
.di-item__lead { font-size: 16px; line-height: 1.7; color: var(--mid); max-width: 62ch; }

.di-story {
  margin: 20px 0;
  border-left: 3px solid var(--gold-dim);
  background: var(--off);
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
  max-width: 62ch;
}
.di-story__label {
  font-family: var(--fw-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 6px;
}
.di-story__text { font-size: 15px; line-height: 1.65; color: var(--charcoal); }

.di-item__note { font-size: 15px; line-height: 1.7; color: var(--mid); max-width: 62ch; }

.di-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; }
.di-cta__help { font-size: 13px; color: var(--mid); }

@media (max-width: 720px) {
  .di-item { grid-template-columns: 1fr; gap: 18px; padding: 26px; }
  .di-item__rank { flex-direction: row; align-items: center; }
}

/* ── Black-box door pages: gate badge ────────────────────────── */
.gate-badge {
  display: inline-block;
  font-family: var(--fw-font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(254, 194, 64, 0.14);
  border: 1px solid rgba(254, 194, 64, 0.4);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 16px;
}
.gate-badge--open {
  color: var(--teal);
  background: rgba(0, 184, 169, 0.16);
  border-color: rgba(0, 184, 169, 0.45);
}

/* QR-jump orienting line (Impact Report standalone framing) */
.hero-orient {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  max-width: 60ch;
  margin-bottom: 16px;
}

/* ── Build-phase flags (placeholders / content holds) ────────── */
/* High-contrast on purpose: these are temporary build artifacts that must be
   impossible to miss during review, and removed before publish. */
.placeholder-flag {
  display: inline-block;
  margin-top: 16px;
  max-width: 60ch;
  font-family: var(--fw-font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: #1E1E1E;
  background: var(--gold);
  border-radius: 6px;
  padding: 8px 12px;
}
.content-hold {
  max-width: 760px;
  border: 1px dashed var(--gold-dim);
  background: rgba(254, 194, 64, 0.08);
  border-radius: 10px;
  padding: 20px 24px;
}
.content-hold__label {
  font-family: var(--fw-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 8px;
}
.content-hold__text {
  font-family: var(--fw-font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--charcoal);
}

/* ── Subscription forms (Board Matters + National) ───────────── */
.subscribe { max-width: 720px; margin: 0 auto; }
.subscribe__form {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 32px;
  box-shadow: var(--shadow-md);
}
.req { color: #C0392B; margin-left: 2px; }

.subscribe__radiogroup { border: 0; padding: 0; margin: 0 0 22px; }
.subscribe__legend {
  font-family: var(--fw-font-head);
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
  padding: 0;
  margin-bottom: 10px;
}
.subscribe__radio {
  display: block;
  font-size: 15px;
  color: var(--charcoal);
  padding: 6px 0;
  cursor: pointer;
}
.subscribe__radio input { margin-right: 8px; }

.subscribe__heading {
  font-family: var(--fw-font-head);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  margin: 28px 0 16px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.subscribe__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.subscribe__row--csz { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 560px) { .subscribe__row, .subscribe__row--csz { grid-template-columns: 1fr; } }

.subscribe__field { margin-bottom: 18px; }
.subscribe__label {
  display: block;
  font-family: var(--fw-font-head);
  font-weight: 700;
  font-size: 13px;
  color: var(--navy);
  margin-bottom: 6px;
}
.subscribe__input,
.subscribe__select {
  width: 100%;
  font-family: var(--fw-font-body);
  font-size: 15px;
  color: var(--charcoal);
  background: var(--white);
  border: 1px solid #D3D3D3;
  border-radius: 6px;
  padding: 10px 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.subscribe__input:focus,
.subscribe__select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(254, 194, 64, 0.25);
}
.subscribe__input[aria-invalid="true"],
.subscribe__select[aria-invalid="true"] { border-color: #C0392B; }
.subscribe__hint { font-size: 13px; color: var(--mid); margin-top: 6px; }

.subscribe__error { color: #C0392B; font-size: 12.5px; margin-top: 5px; display: none; }
.subscribe__error.show { display: block; }

.subscribe__recaptcha { margin: 22px 0; }
.subscribe__submit { margin-top: 4px; }
.subscribe__guardrail { font-size: 13px; line-height: 1.55; color: var(--mid); margin-top: 12px; }
.subscribe__formerror { color: #C0392B; font-size: 13px; margin-top: 12px; display: none; }
.subscribe__formerror.show { display: block; }

.subscribe__success {
  display: none;
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--teal);
  border-radius: 14px;
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.subscribe__success.show { display: block; }
.subscribe__success-title {
  font-family: var(--fw-font-head);
  font-weight: 800;
  font-size: 22px;
  color: var(--navy);
  margin-bottom: 12px;
}
.subscribe__success-body { font-size: 16px; line-height: 1.7; color: var(--mid); }

/* ── Image placeholders (build artifact; removed before launch) ─ */
/* Real content image placed into an .imgph slot at build time. Full-width,
   rounded to match the card system, with a soft navy shadow for presence. */
.media {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(27, 58, 75, 0.10);
}
/* In-card thumbnails (tier / fit cards): lighter, flush at the top of the card. */
.tier-card .media,
.fit-card .media { margin-bottom: 12px; border-radius: 8px; box-shadow: none; }
/* Transparent cutout (e.g. the fanned impact-report stack): no frame or shadow,
   so it floats on the page instead of reading as a boxed screenshot. */
.media.media--plain { border-radius: 0; box-shadow: none; }

/* Interactive HTML embed (e.g. the data-gap heat map) dropped into an image slot:
   responsive 16:9 frame styled to match the .media image treatment, navy backing
   so it reads as one piece while the bundle loads. */
/* No background, radius, or shadow here: the bundle draws its own white card with
   its own shadow, so styling this wrapper too stacked a second shaded panel
   behind it. The wrapper is now a pure sizing box. Nothing flashes during load,
   because the section behind it is already --off, the same colour this used to
   paint. */
.map-embed {
  width: 100%;
  aspect-ratio: 1200 / 820;   /* fallback footprint until map-embed.js sets an exact height */
  overflow: hidden;
}
/* Attribution line under a figure (image, embed, chart). Sits tight to the thing
   it credits, above any following body copy. --mid on the light surface clears
   AA (5.7:1) at this size. */
.figure-source {
  margin-top: 12px;
  font-family: var(--fw-font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--mid);
}

/* Rendered at the bundle's native canvas size, then scaled to the column width by
   map-embed.js (transform-origin keeps it pinned to the wrapper's top-left). */
.map-embed__frame {
  width: 1200px;
  height: 800px;
  border: 0;
  transform-origin: top left;
}

/* ── Client wall + testimonial ─────────────────────────────────────────────
   Client logos arrive pre-normalized on a 500x300 canvas, so an even grid is
   enough to make a mixed set of seals, wordmarks, and roundels sit together.
   Fixed column counts (5 / 3 / 2) rather than auto-fit, so ten logos always
   divide into full rows instead of leaving an orphan. */
.client-wall__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.client-logo img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 900px) {
  .client-wall__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .client-wall__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Testimonial. Gold rule on the leading edge rather than a decorative quote
   glyph, so the mark never lands on text and nothing depends on a font. */
.testimonial {
  max-width: var(--fw-measure);
  margin: var(--fw-space-section, 40px) auto 0;
  padding: 28px 32px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--fw-gold);
  border-radius: var(--fw-radius-lg);
  box-shadow: var(--shadow-sm);
}
.testimonial blockquote { margin: 0; }
.testimonial__text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--charcoal);
}
.testimonial__text + .testimonial__text { margin-top: 14px; }
.testimonial__cite {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-style: normal;             /* <cite> defaults to italic */
}
.testimonial__name {
  font-family: var(--fw-font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--charcoal);
}
.testimonial__role {
  font-size: 14px;
  line-height: 1.5;
  color: var(--mid);
  margin-top: 2px;
}

/* ── Video popover (video-modal.js) ────────────────────────────────────────
   A YouTube video opened from an in-page CTA. The trigger is a plain link that
   JS upgrades, so it still works without JS. */
.video-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--fw-font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-dim);          /* gold-dim: AA-safe for text on white */
  text-decoration: none;
}
.video-cta:hover { text-decoration: underline; }
/* Centered under a video frame. The CTA is inline-level, so text-align centers
   it without stretching the hover underline across the container. */
.video-cta-row { text-align: center; }
/* Gold play disc, matching the branded-player affordance in .video-frame. */
.video-cta::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--fw-gold) no-repeat center;
  /* Play triangle, charcoal on gold. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M0 0l12 7-12 7z' fill='%23454545'/%3E%3C/svg%3E");
  background-size: 9px 10px;
  background-position: 10px center;
}

.video-modal {
  width: min(1000px, 92vw);
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}
.video-modal::backdrop { background: rgba(27, 58, 75, 0.82); }  /* navy scrim */
.video-modal__body {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--navy);
  border-radius: var(--fw-radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.video-modal__body iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-modal__close {
  position: absolute;
  top: -42px;
  right: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--white);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.video-modal__close:hover { color: var(--fw-gold); }
@media (max-width: 620px) {
  .video-modal__close { top: -38px; }
}

/* Tier wordmark above the product video. Each tier carries its own wordmark and
   tagline, so the mark reads as a standalone product identity introducing the
   demo rather than competing with the hero H1 above it. Sits on the white band,
   so the light-background lockups are the correct variants.

   Sized by max-height AND max-width with intrinsic width/height on the <img>, so
   each lockup fits inside both caps and keeps its aspect ratio. The horizontal
   lockups (FutureWorks BI, National) and the stacked one (Board Matters) need
   different caps to read at the same optical weight. */
.tier-logo {
  display: block;
  width: auto;
  height: auto;
  max-height: 112px;
  max-width: min(680px, 80%);
  margin: 0 auto var(--fw-space-media, 28px);
}
.tier-logo--stacked {
  max-height: 208px;
  max-width: min(380px, 60%);
}

/* Drops .academy-section's 64px vertical padding so a section whose only content
   is a full-bleed image has no band of surface above or below it. The image
   becomes the full height of the section and butts against its neighbours. */
.academy-section--flush { padding: 0; }

/* Home hero showcase still — spans the section edge to edge, so the image
   carries the width instead of sitting inside the 1120px container. It keeps
   its natural 2:1 ratio (no crop, no letterbox frame). Capped at 1920px so the
   1774px source never upscales more than ~8%; past that it centers on the white
   surface. Lives outside .academy-container in the markup. display:block also
   kills the inline baseline gap that would reopen a sliver under the image. */
.hero-showcase {
  display: block;
  width: 100%;
  max-width: 1920px;
  height: auto;
  margin: 0 auto;
}

/* Video frame — DS "06 · Media & Video": navy container, 16:9 responsive box,
   12px radius; the source letterboxes in navy if its aspect differs. Reusable
   for any on-page video. (The gold play button + captions the DS specifies are
   for click-to-play videos; ambient background loops opt out of both.) */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--navy);
  border-radius: var(--fw-radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(27, 58, 75, 0.10);
}
.video-frame > video,
.video-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* DS "06 · Media & Video" branded player: one gold play button over the poster.
   Hidden until JS can drive it (hero-video.js); hidden again once playing, when
   native controls take over. */
.video-frame__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 74px;
  height: 74px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--fw-gold);
  box-shadow: 0 8px 24px rgba(254, 194, 64, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.16s var(--fw-ease), background 0.16s, opacity 0.2s;
}
.video-frame__play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 5px;
  border-left: 22px solid var(--navy);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}
.video-frame__play:hover { background: var(--gold-hover, #ffd060); transform: translate(-50%, -50%) scale(1.05); }
.video-frame__play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.video-frame.is-playing .video-frame__play { opacity: 0; visibility: hidden; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .video-frame__play { transition: none; }
  .video-frame__play:hover { transform: translate(-50%, -50%); }
}

.imgph {
  width: 100%;
  margin: 0;
  border: 2px dashed var(--gold-dim);
  border-radius: 12px;
  background-color: rgba(254, 194, 64, 0.06);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(254, 194, 64, 0.10) 0,
    rgba(254, 194, 64, 0.10) 10px,
    transparent 10px,
    transparent 20px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  overflow: hidden;
}
.imgph__inner { display: flex; flex-direction: column; gap: 6px; max-width: 48ch; }
.imgph__tag {
  font-family: var(--fw-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.imgph__slot { font-family: var(--fw-font-head); font-weight: 700; font-size: 15px; color: var(--navy); }
.imgph__theme { font-family: var(--fw-font-body); font-size: 13px; line-height: 1.5; color: var(--mid); }
.imgph__size {
  font-family: var(--fw-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold-dim);
  margin-top: 2px;
}
.imgph--on-dark .imgph__size { color: var(--gold); }

/* Target asset filename (from docs/image-asset-spec.md) so the slot->asset
   mapping is unambiguous during the build. Removed with the placeholder. */
.imgph__file {
  font-family: var(--fw-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--mid);
  margin-top: 2px;
  word-break: break-all;
}
.imgph--on-dark .imgph__file { color: rgba(247, 246, 242, 0.75); }

/* Compact icon placeholder */
/* Real lens icon placed into an .iconph slot at build time. Square art with a
   built-in frame; sized down and left-aligned to match the placeholder. */
.lens-icon { display: block; width: 72px; height: 72px; margin-bottom: 12px; border-radius: 10px; }

.iconph { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 12px; }
.iconph__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 2px dashed var(--gold-dim);
  border-radius: 10px;
  background-color: rgba(254, 194, 64, 0.08);
  font-family: var(--fw-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.iconph__cap { font-family: var(--fw-font-mono); font-size: 10px; color: var(--gold-dim); }

.imgph--on-dark {
  border-color: rgba(254, 194, 64, 0.55);
  background-color: rgba(255, 255, 255, 0.04);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.06) 0,
    rgba(255, 255, 255, 0.06) 10px,
    transparent 10px,
    transparent 20px
  );
}
.imgph--on-dark .imgph__tag { color: var(--gold); }
.imgph--on-dark .imgph__slot { color: #fff; }
.imgph--on-dark .imgph__theme { color: rgba(255, 255, 255, 0.75); }

/* Spacing when a placeholder sits at the top of a tier card. */
.tier-card .imgph { margin-bottom: 4px; }

/* ── "By the numbers" stat band (open-value data facts) ──────── */
.statband__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.stat-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 12px;
  border-top: 3px solid var(--gold);
  padding: 28px 24px;
  text-align: center;
}
.stat-card__num {
  font-family: var(--fw-font-head);
  font-size: clamp(34px, 5vw, 48px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.stat-card__label {
  font-family: var(--fw-font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--charcoal);
  margin-top: 8px;
}
.stat-card__note { font-size: 12px; line-height: 1.5; color: var(--mid); margin-top: 6px; }
/* Shared attribution for the whole band. --mid on white clears AA (5.7:1) at
   this size; the link is navy rather than gold, because gold-dim on white is
   only ~2.7:1 and would fail as 13px text. */
.statband__source {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--mid);
}
.statband__source a { color: var(--navy); text-decoration: underline; }
.statband__source a:hover { color: var(--gold-dim); }

/* ── Data availability timeline (.dat) ─────────────────────────────────────
   Lifted from the design handoff:
   docs/national-data-timeline/data-timeline-handoff/FWSBI-Data-Availability-Timeline.html
   Spec + hard rules: DATA-TIMELINE-BUILD.md. Markup is generated at build time
   from facts.nationalTimeline via src/_data/timeline.js.

   Two adaptations from the reference file, both required to live in this repo:
   the inlined :root token block is dropped (academy-shell.css already carries
   the --fw-* set), and the weight/duration vars the handoff assumed are scoped
   to .dat below since this site's token set does not define them.

   Do not "tidy" the following, they are load-bearing (see README "Things that
   get built wrong if unwarned"): the last complete year's Q3/Q4 are navy AND
   inside the gold bracket; the dashed pending cells must stay; the column count
   and bracket span are derived, never literals. */
.dat {
  --dat-rule: #DEDBD2;
  --dat-ghost: #C9C7BF;
  --dat-cols: 20;              /* overridden inline; total quarters = years * 4 */
  --dat-dim: .18;
  /* Not in this site's token set; component-local per the handoff. */
  --fw-duration: 180ms;
  --fw-weight-light: 300;
  --fw-weight-regular: 400;
  --fw-weight-semibold: 600;
  --fw-weight-bold: 700;
  --fw-weight-extrabold: 800;
  background: var(--fw-off);
  padding: var(--fw-space-section) 24px;
  font-family: var(--fw-font-body);
  color: var(--fw-dark);
}
.dat *, .dat *::before, .dat *::after { box-sizing: border-box; }
.dat__inner { max-width: 1240px; margin: 0 auto; }

/* --- intro copy --- */
.dat__intro { max-width: 640px; margin: 0 0 44px; }
.dat__eyebrow {
  font-family: var(--fw-font-head); font-size: 11px; font-weight: var(--fw-weight-bold);
  letter-spacing: .16em; text-transform: uppercase; color: var(--fw-teal); margin: 0 0 12px;
}
.dat__title {
  font-family: var(--fw-font-head); font-size: 30px; font-weight: var(--fw-weight-extrabold);
  letter-spacing: -.015em; line-height: 1.15; color: var(--fw-navy); margin: 0 0 14px; text-wrap: pretty;
}
.dat__lede { font-size: 15px; font-weight: var(--fw-weight-light); line-height: 1.65; color: #5C5C5C; margin: 0; text-wrap: pretty; }

/* --- the grid --- */
.dat__grid {
  display: grid;
  grid-template-columns: repeat(var(--dat-cols), 1fr);
  column-gap: 4px;
}
.dat__year { display: contents; }

.dat__y {
  grid-row: 1;
  grid-column: var(--c) / span 4;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 0 2px 8px; margin-bottom: 10px; border-bottom: 1px solid var(--dat-rule);
  transition: opacity var(--fw-duration) var(--fw-ease);
}
.dat__y-l { font-family: var(--fw-font-head); font-size: 15px; font-weight: var(--fw-weight-bold); color: var(--fw-navy); }
.dat__y-s {
  font-family: var(--fw-font-head); font-size: 9.5px; font-weight: var(--fw-weight-bold);
  letter-spacing: .11em; text-transform: uppercase; color: var(--fw-gold-dim); white-space: nowrap;
}
.dat__y-s[data-complete] { color: var(--fw-teal); }

.dat__q {
  grid-row: 2;
  height: 62px; border-radius: 5px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  transition: opacity var(--fw-duration) var(--fw-ease);
}
.dat__q-n { font-family: var(--fw-font-head); font-size: 13px; font-weight: var(--fw-weight-bold); }
.dat__q-m { font-size: 9px; font-weight: var(--fw-weight-regular); letter-spacing: .01em; white-space: nowrap; }

.dat__q[data-state="complete"] { background: var(--fw-navy); }
.dat__q[data-state="complete"] .dat__q-n { color: var(--fw-white); }
.dat__q[data-state="complete"] .dat__q-m { color: #A9BCC6; }

.dat__q[data-state="current"] { background: var(--fw-gold); }
.dat__q[data-state="current"] .dat__q-n { color: var(--fw-navy); }
.dat__q[data-state="current"] .dat__q-m { color: #7A6428; }

.dat__q[data-state="pending"] { background: transparent; border: 1px dashed var(--dat-ghost); }
.dat__q[data-state="pending"] .dat__q-n { color: #A8A5A0; }
.dat__q[data-state="pending"] .dat__q-m { color: #B8B5B0; }

/* --- rolling window bracket --- */
.dat__win {
  grid-row: 3;
  grid-column: var(--win);
  margin-top: 10px;
  transition: opacity var(--fw-duration) var(--fw-ease);
}
.dat__win-bar { height: 7px; border-radius: 4px; background: var(--fw-gold); }
.dat__win-k {
  font-family: var(--fw-font-head); font-size: 10px; font-weight: var(--fw-weight-bold);
  letter-spacing: .14em; text-transform: uppercase; color: var(--fw-gold-dim); margin: 12px 0 5px;
}
.dat__win-v { font-family: var(--fw-font-head); font-size: 17px; font-weight: var(--fw-weight-extrabold); color: var(--fw-navy); margin: 0 0 3px; }
.dat__win-d { font-size: 13px; font-weight: var(--fw-weight-light); color: var(--fw-mid); margin: 0; }

/* Program years still carried but no longer drawn (see timeline.js). Sits
   directly under the grid so it reads as an annotation of the chart, not as a
   second footnote. */
.dat__earlier {
  font-family: var(--fw-font-head);
  font-size: 12px;
  font-weight: var(--fw-weight-semibold);
  letter-spacing: .02em;
  color: var(--fw-mid);
  margin: 26px 0 0;
}

/* --- legend + as-of stamp --- */
.dat__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--dat-rule);
}
.dat__legend { display: flex; flex-wrap: wrap; gap: 26px; margin: 0; padding: 0; list-style: none; }
.dat__lg {
  display: flex; align-items: center; gap: 9px;
  min-height: 44px;                      /* hit target floor */
  background: none; border: 0; padding: 0; margin: 0; cursor: default;
  font: inherit; font-size: 13px; color: var(--fw-dark); text-align: left;
  transition: opacity var(--fw-duration) var(--fw-ease);
}
.dat__lg:focus-visible { outline: 2px solid var(--fw-gold); outline-offset: 3px; border-radius: var(--fw-radius); }
.dat__sw { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.dat__lg[data-key="complete"] .dat__sw { background: var(--fw-navy); }
.dat__lg[data-key="current"]  .dat__sw { background: var(--fw-gold); }
.dat__lg[data-key="pending"]  .dat__sw { background: transparent; border: 1px dashed var(--dat-ghost); }
.dat__asof {
  font-family: var(--fw-font-head); font-size: 11px; font-weight: var(--fw-weight-semibold);
  letter-spacing: .06em; color: #8A8880;
}
.dat__note { font-size: 13px; font-weight: var(--fw-weight-light); line-height: 1.6; color: #8A8880; max-width: 720px; margin: 22px 0 0; text-wrap: pretty; }

/* --- legend isolation (progressive enhancement, CSS only) --- */
.dat:has(.dat__lg[data-key="complete"]:hover) .dat__q:not([data-state="complete"]),
.dat:has(.dat__lg[data-key="complete"]:focus-visible) .dat__q:not([data-state="complete"]),
.dat:has(.dat__lg[data-key="complete"]:hover) .dat__lg:not([data-key="complete"]),
.dat:has(.dat__lg[data-key="complete"]:focus-visible) .dat__lg:not([data-key="complete"]),
.dat:has(.dat__lg[data-key="complete"]:hover) .dat__win,
.dat:has(.dat__lg[data-key="complete"]:focus-visible) .dat__win,
.dat:has(.dat__lg[data-key="current"]:hover) .dat__q:not([data-win]),
.dat:has(.dat__lg[data-key="current"]:focus-visible) .dat__q:not([data-win]),
.dat:has(.dat__lg[data-key="current"]:hover) .dat__lg:not([data-key="current"]),
.dat:has(.dat__lg[data-key="current"]:focus-visible) .dat__lg:not([data-key="current"]),
.dat:has(.dat__lg[data-key="pending"]:hover) .dat__q:not([data-state="pending"]),
.dat:has(.dat__lg[data-key="pending"]:focus-visible) .dat__q:not([data-state="pending"]),
.dat:has(.dat__lg[data-key="pending"]:hover) .dat__lg:not([data-key="pending"]),
.dat:has(.dat__lg[data-key="pending"]:focus-visible) .dat__lg:not([data-key="pending"]),
.dat:has(.dat__lg[data-key="pending"]:hover) .dat__win,
.dat:has(.dat__lg[data-key="pending"]:focus-visible) .dat__win { opacity: var(--dat-dim); }

/* --- screen-reader equivalent --- */
.dat__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- responsive: 1024 and below, stack by program year --- */
@media (max-width: 1023px) {
  .dat { padding: 64px 20px; }
  .dat__title { font-size: 25px; }
  .dat__grid { display: flex; flex-direction: column; gap: 6px; }
  .dat__year {
    display: grid; grid-template-columns: 120px repeat(4, 1fr); gap: 6px; align-items: center;
    padding: 10px 12px; border-radius: 8px; background: var(--fw-white);
  }
  .dat__year:not([data-complete]) { background: #FFFCF0; }
  .dat__y { grid-row: auto; grid-column: auto; display: block; padding: 0; margin: 0; border: 0; }
  .dat__y-s { display: block; margin-top: 2px; }
  .dat__q { grid-row: auto; height: 34px; gap: 0; }
  .dat__q-m { display: none; }
  .dat__win {
    grid-row: auto; grid-column: auto; margin-top: 20px;
    padding: 18px 20px; border-radius: 10px; background: #FFFCF0; box-shadow: inset 0 0 0 1px #F0E3BD;
  }
  .dat__win-bar { display: none; }
  .dat__win-k { margin-top: 0; }
  .dat__foot { margin-top: 32px; }
}
@media (max-width: 560px) {
  .dat__year { grid-template-columns: repeat(4, 1fr); }
  .dat__y { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; }
  .dat__y-s { margin-top: 0; }
  .dat__legend { gap: 14px; flex-direction: column; }
  .dat__foot { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .dat * { transition: none !important; }
}

/* ── Small utilities ─────────────────────────────────────────── */
@media (max-width: 600px) { .u-hide-sm { display: none !important; } }
@media (min-width: 601px) { .u-show-sm { display: none !important; } }