/* StateCourse National Academy — the approved brand design language.
   Navy / cream / restrained gold · Playfair Display headings · Inter body.
   Gold is a SIGNAL, not decoration: primary action, selected state, progress, key number,
   mastery. Dark navy carries marketing surfaces (home, state pages, headers, footers);
   reading surfaces stay cream/white. Fonts are self-hosted (see fonts/fonts.css) because the
   site CSP allows only same-origin assets. */

@import url("fonts/fonts.css");

:root {
  --navy: #08102b;        /* deep navy — hero, dark bands, footer */
  --navy-2: #132e4a;      /* academy blue — raised panels on navy */
  --ink: #33424f;         /* slate body text */
  --muted: #64717c;
  --paper: #f6f4ef;       /* cream reading ground */
  --surface: #ffffff;
  --stone: #ede9e0;
  --rule: #e7e4de;        /* light gray hairlines */
  --brick: #c7a259;       /* legacy alias — now the gold action color */
  --brick-dark: #a8863e;
  --gold: #c7a259;
  --gold-deep: #8f6e2f;   /* gold-family text that passes contrast on white */
  --green: #2d6f73;       /* teal — approved / positive status */
  --max: 1240px;
  --radius: 6px;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.62 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, select, summary, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(199,162,89,.6); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 1000; left: 18px; top: -80px; padding: 10px 14px; background: #fff; border: 1px solid var(--navy); border-radius: var(--radius); }
.skip-link:focus { top: 18px; }

/* ── header: deep navy band, gold action ─────────────────────────────────────────────────── */
.national-header { position: sticky; z-index: 50; top: 0; background: var(--navy); border-bottom: 1px solid rgba(255,255,255,.12); }
.header-shell { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 36px; max-width: var(--max); min-height: 78px; margin: auto; padding: 0 28px; }
.national-brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; color: #fff; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; color: var(--gold); }
.brand-mark svg { width: 42px; height: 42px; display: block; }
.national-brand > span:last-child { display: grid; line-height: 1; }
.national-brand strong { font: 600 19px/1 var(--serif); letter-spacing: .10em; text-transform: uppercase; }
.national-brand small { margin-top: 6px; color: var(--gold); font-size: 8px; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; }
.desktop-nav { display: flex; justify-content: center; gap: 24px; font-size: 13px; font-weight: 600; color: #d9dee8; }
.desktop-nav a { padding: 8px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.desktop-nav a:hover, .desktop-nav a[aria-current="page"] { color: #fff; border-color: var(--gold); }
.header-actions { display: flex; align-items: center; gap: 16px; font-size: 13px; font-weight: 600; }
.account-link { color: #d9dee8; }
.account-link:hover { color: #fff; }
.state-button { min-height: 40px; padding: 10px 16px; background: var(--gold); color: #fff; border: 1px solid var(--gold); border-radius: 4px; font-weight: 700; }
.state-button:hover { background: var(--brick-dark); border-color: var(--brick-dark); }
.mobile-menu { display: none; }

/* ── hero: deep navy with a faint classical-column motif (drawn, not photographic) ───────── */
.national-hero { position: relative; background: var(--navy) url("media/hero-columns.webp") center/cover no-repeat; color: #fff; overflow: hidden; }
/* Navy scrim over the columns photograph: heavier at the edges and foot so the headline and
   the finder card keep contrast wherever the image crops. */
.national-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,16,43,.62) 0%, rgba(8,16,43,.28) 48%, rgba(8,16,43,.55) 100%),
    linear-gradient(180deg, rgba(8,16,43,.2) 0%, rgba(8,16,43,.82) 100%); }
.hero-shell { position: relative; display: grid; grid-template-columns: minmax(0,.92fr) minmax(520px,1.08fr); gap: 68px; align-items: center; max-width: var(--max); min-height: 455px; margin: auto; padding: 56px 28px; }
.overline { margin: 0 0 12px; color: var(--gold-deep); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.hero-intro .overline, .light .overline { color: var(--gold); }
.hero-intro h1 { max-width: 650px; margin: 0; font: 500 clamp(44px,5.2vw,68px)/1.06 var(--serif); letter-spacing: -.01em; }
.hero-intro h1 em { color: var(--gold); font-style: normal; }
.hero-intro > p:last-child { max-width: 560px; margin: 24px 0 0; color: #ccd4e2; font-size: 17px; line-height: 1.7; }

/* ── the two doors: real estate vs mortgage ──────────────────────────────────────────────────
   Real estate and mortgage loan origination are separate licences with separate regulators and
   separate approval routes. The hero asks which one the visitor holds before it asks anything
   else, so that a mortgage visitor never walks into the real estate state finder by default.
   Each door is a real link with a real destination and a status chip that states the truth about
   availability; neither is decorative. */
.hero-shell-doors { grid-template-columns: 1fr; gap: 44px; align-items: start; }
.vertical-doors { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.vertical-door { display: grid; align-content: start; gap: 10px; padding: 30px 28px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius); color: #fff; text-decoration: none; transition: background .15s, border-color .15s, transform .15s; }
.vertical-door:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.38); transform: translateY(-2px); }
.vertical-door:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.door-icon { color: var(--gold); }
.door-icon svg { display: block; width: 34px; height: 34px; }
.vertical-door strong { margin-top: 2px; font: 500 clamp(22px,2.3vw,28px)/1.15 var(--serif); letter-spacing: -.01em; }
.door-lede { max-width: 40ch; color: #c3ccdb; font-size: 14.5px; line-height: 1.6; }
.vertical-door .dev-chip { justify-self: start; margin-top: 4px; padding: 4px 10px; background: var(--navy-2); border: 1px solid rgba(255,255,255,.22); border-radius: 3px; color: #dfe4ec; font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.door-action { margin-top: 6px; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.vertical-door:hover .door-action { color: #fff; }

/* ── the real estate state finder, now its own band below the doors ──────────────────────── */
.finder-band { background: var(--surface); border-bottom: 1px solid var(--rule); }
.finder-band-shell { display: grid; grid-template-columns: minmax(0,.85fr) minmax(470px,1.15fr); gap: 56px; align-items: center; max-width: var(--max); margin: auto; padding: 54px 28px; }
.finder-band-copy h2 { margin: 0; color: var(--navy); font: 500 clamp(30px,3.4vw,44px)/1.12 var(--serif); letter-spacing: -.01em; }
.finder-band-copy > p { margin: 18px 0 0; color: var(--muted); line-height: 1.7; }
/* The finder card's deep shadow was tuned for navy behind it. On this white band it needs a
   lighter one and a hairline, or it reads as a floating slab. */
/* The cross-link to the other vertical is the one control on this band that sends a visitor
   somewhere else entirely. It has to look like a link, not like body copy. */
.finder-band-copy .marketing-separation { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.finder-band-copy .marketing-separation a { color: var(--gold-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.finder-band-copy .marketing-separation a:hover { color: var(--navy); }
.finder-band .licensing-finder { border: 1px solid var(--rule); box-shadow: 0 14px 38px rgba(3,8,24,.13); }

/* ── the licensing finder card ───────────────────────────────────────────────────────────── */
.licensing-finder { background: var(--surface); color: var(--ink); border-radius: 8px; overflow: hidden; box-shadow: 0 24px 64px rgba(3,8,24,.45); }
.intent-tabs { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; padding: 0; border: 0; }
.intent-tabs legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.intent-tabs label { position: relative; min-height: 88px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); cursor: pointer; }
.intent-tabs label:last-child { border-right: 0; }
.intent-tabs input { position: absolute; opacity: 0; }
.intent-tabs span { display: grid; height: 100%; padding: 18px 16px; }
.intent-tabs strong { color: var(--navy); font-family: var(--serif); font-size: 17px; font-weight: 600; }
.intent-tabs small { margin-top: 5px; color: var(--muted); font-size: 11.5px; }
.intent-tabs label:has(input:checked) { box-shadow: inset 0 -3px var(--gold); }
.intent-tabs label:has(input:checked) strong { color: var(--navy); }
.finder-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 26px; }
.finder-fields label { display: grid; gap: 8px; }
.finder-fields label span { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.finder-fields select { width: 100%; min-height: 50px; padding: 0 42px 0 13px; background: #fff; border: 1px solid #cfcabf; border-radius: 4px; color: var(--ink); }
.finder-fields button { grid-column: 1/-1; display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 20px; border: 0; border-radius: 4px; background: var(--gold); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.finder-fields button:hover { background: var(--brick-dark); }
.finder-status-guide { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 26px 16px; }
.status-key { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.35; }
.status-key::before { width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: currentColor; content: ""; }
.status-available { color: var(--green); background: #edf7f4; }
.status-development { color: var(--gold-deep); background: #fff8e7; }
.status-coming { color: #69747c; background: #f0f1f2; }
.finder-message { min-height: 22px; margin: 0 26px 16px; color: var(--muted); font-size: 12px; }
.finder-message[data-access="available"] { color: var(--green); font-weight: 700; }
.finder-message[data-access="development"] { color: var(--gold-deep); font-weight: 700; }

/* ── free practice reader ───────────────────────────────────────────────────────────────── */
[hidden] { display: none !important; }
.practice-mode, .practice-bottom-nav, .practice-question-nav { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
.practice-mode button, .practice-bottom-nav button, .practice-question-nav button, .practice-feedback button, .practice-summary button { min-height: 44px; padding: 10px 16px; font: inherit; border: 1px solid var(--gold-deep); border-radius: 4px; background: #fff; color: var(--navy); cursor: pointer; }
.practice-mode button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.practice-bottom-nav { justify-content: space-between; border-top: 1px solid var(--rule); padding-top: 20px; }
.practice-page button:disabled { opacity: .5; cursor: not-allowed; }
.practice-page button:focus-visible, .practice-page select:focus-visible, .practice-answer:focus-within { outline: 3px solid #836114; outline-offset: 3px; }
.practice-page select { font-size: 16px; max-width: 100%; }
.practice-page .practice-controls { position: static; }
.practice-page #practiceProgress { font-size: 14px; line-height: 1.6; color: var(--navy); }
.practice-page fieldset { border: 0; padding: 0; min-width: 0; }
.practice-page legend { font-size: 18px; line-height: 1.6; font-weight: 650; margin-bottom: 16px; }
.practice-answer { display: flex; align-items: flex-start; gap: 12px; padding: 16px; margin-bottom: 12px; border: 1px solid var(--rule); border-radius: 5px; cursor: pointer; font-size: 16px; line-height: 1.6; overflow-wrap: anywhere; }
.practice-answer:has(input:checked) { background: #f4eee0; border-color: var(--gold-deep); }
.practice-answer input { flex: 0 0 auto; width: 18px; height: 18px; margin: 4px 0 0; accent-color: var(--navy); }
.practice-feedback:not(:empty), .practice-summary { padding: 20px; margin-top: 20px; background: #f4eee0; border-left: 4px solid var(--gold-deep); line-height: 1.7; }
.practice-feedback.is-correct { background: #edf6f0; border-color: #216440; }
.practice-feedback.is-incorrect { background: #fff2e8; border-color: #99521b; }
.practice-sources, .practice-question-count { font-size: 14px; line-height: 1.6; }
.practice-content { overflow-wrap: anywhere; }
.practice-content table { display: block; max-width: 100%; overflow-x: auto; }
.practice-case { margin: 28px 0; padding: 24px 0; border-top: 1px solid var(--rule); overflow-wrap: anywhere; }
.practice-case-context, .practice-case-facts { font-size: 16px; line-height: 1.75; margin: 20px 0; }
.practice-page .practice-case-task { margin: 28px 0; }
.practice-case-task > label { display: block; margin-bottom: 8px; font-size: 16px; }
.practice-case textarea, .practice-number { display: block; width: 100%; max-width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); color: var(--ink); font: inherit; }
.practice-case textarea { resize: vertical; }
.practice-case textarea:focus-visible, .practice-number:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; }
.practice-case button { min-height: 44px; margin: 8px 8px 8px 0; padding: 12px 16px; font: inherit; cursor: pointer; }
.practice-case-summary { line-height: 1.7; padding: 16px 0; }
.practice-case details > summary { cursor: pointer; padding: 12px 0; min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .practice-page * { scroll-behavior: auto !important; } }
.practice-layout { display: grid; grid-template-columns: minmax(230px,.34fr) minmax(0,1fr); gap: 32px; align-items: start; margin-top: 28px; }
.practice-controls { position: sticky; top: 104px; display: grid; gap: 14px; padding: 24px; background: var(--surface); border: 1px solid var(--rule); border-top: 4px solid var(--gold); border-radius: 0 0 var(--radius) var(--radius); }
.practice-controls label { color: var(--navy); font-size: 14px; font-weight: 700; }
.practice-controls select { width: 100%; min-height: 50px; padding: 0 40px 0 13px; border: 1px solid #cfcabf; border-radius: 4px; background: #fff; color: var(--ink); }
.practice-controls > p { margin: 0; color: var(--muted); font-size: 13px; }
.practice-controls dl { margin: 4px 0; }
.practice-controls dl div { display: grid; gap: 3px; padding: 10px 0; border-top: 1px solid var(--rule); }
.practice-controls dt { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.practice-controls dd { margin: 0; color: var(--navy); font-size: 14px; font-weight: 600; }
.practice-reader { min-width: 0; padding: 30px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 14px 40px rgba(8,16,43,.06); }
.practice-reader > h2 { margin-bottom: 8px; font-size: clamp(28px,3vw,40px); }
.practice-message { color: var(--muted); font-size: 14px; }
.practice-section-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 24px 0; padding: 12px 0; border-block: 1px solid var(--rule); }
.practice-section-nav button { min-height: 44px; padding: 8px 13px; border: 1px solid var(--gold); border-radius: 4px; background: #fff; color: var(--gold-deep); cursor: pointer; font-weight: 700; }
.practice-section-nav button:disabled { opacity: .45; cursor: not-allowed; }
.practice-section-nav span { color: var(--muted); font-size: 13px; text-align: center; }
.practice-content { scroll-margin-top: 104px; }
.practice-content h2 { color: var(--navy); font-size: clamp(24px,2.5vw,34px); }
.practice-content h3 { margin-top: 28px; color: var(--navy); font-size: 21px; }
.practice-content p, .practice-content li { line-height: 1.75; }
.practice-content ul, .practice-content ol { padding-left: 24px; }
.practice-content .callout { margin: 22px 0; padding: 18px 20px; border-left: 4px solid var(--gold); background: #faf7ef; }
.practice-content .callout-label { display: block; margin-bottom: 6px; color: var(--gold-deep); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.practice-content table { width: 100%; border-collapse: collapse; }
.practice-content th, .practice-content td { padding: 10px 12px; border: 1px solid var(--rule); text-align: left; vertical-align: top; }
.practice-content th { background: var(--navy); color: #fff; }

/* ── introduction film ───────────────────────────────────────────────────────────────────── */
.intro-film { background: var(--stone); border-bottom: 1px solid var(--rule); }
.intro-film-shell { display: grid; grid-template-columns: minmax(250px,.42fr) minmax(0,1fr); gap: 56px; align-items: center; max-width: var(--max); margin: auto; padding: 56px 28px; }
.intro-film-copy h2 { margin: 0 0 18px; color: var(--navy); font: 500 clamp(30px,3.2vw,42px)/1.12 var(--serif); }
.intro-film-copy > p:not(.overline) { color: var(--muted); }
.intro-film-copy .marketing-separation { margin-top: 24px; padding-top: 17px; border-top: 1px solid var(--rule); font-size: 11px; line-height: 1.6; }
.intro-film-media { min-width: 0; }
.intro-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy); border: 1px solid var(--navy-2); border-radius: 8px; box-shadow: 0 16px 38px rgba(8,16,43,.18); }
.intro-video-frame video { display: block; width: 100%; height: 100%; background: var(--navy); object-fit: contain; }
.intro-video-frame video::cue { background: rgba(8,16,43,.88); color: #fff; font: 600 17px/1.35 var(--sans); }
.intro-play { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: center; gap: 13px; width: 100%; border: 0; background: linear-gradient(180deg,rgba(8,16,43,.05),rgba(8,16,43,.45)); color: #fff; cursor: pointer; text-align: center; }
.intro-play:hover { background: linear-gradient(180deg,rgba(8,16,43,.02),rgba(8,16,43,.55)); }
.intro-play .play-symbol { display: grid; place-items: center; width: 66px; height: 66px; padding-left: 4px; background: rgba(199,162,89,.96); border: 2px solid rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 7px 24px rgba(0,0,0,.32); font-size: 21px; }
.intro-play > span:last-child { display: grid; gap: 2px; padding: 8px 13px; border-radius: 4px; background: rgba(8,16,43,.72); }
.intro-play strong { font-size: 14px; letter-spacing: .02em; }
.intro-play small { color: #dfe4ec; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.intro-video-frame.is-playing .intro-play { display: none; }
.intro-video-frame.has-ended video { visibility: hidden; }
.intro-end-card { position: absolute; z-index: 3; inset: 0; display: grid; place-content: center; justify-items: center; padding: 30px; background: var(--navy); color: #fff; text-align: center; }
.intro-end-card[hidden] { display: none; }
.intro-end-card:not([hidden]) { animation: end-card-in .28s ease-out; }
.intro-end-card > p { margin: 0 0 11px; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.intro-end-card h3 { margin: 0; font: 500 clamp(28px,3.3vw,45px)/1.1 var(--serif); }
.end-card-actions { display: flex; justify-content: center; gap: 10px; margin-top: 27px; }
.end-card-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 1px solid rgba(255,255,255,.48); border-radius: 4px; color: #fff; font-size: 12px; font-weight: 700; }
.end-card-actions a:first-child { background: var(--gold); border-color: var(--gold); }
.end-card-actions a:hover { background: #fff; border-color: #fff; color: var(--navy); }
.intro-end-card > button { margin-top: 17px; border: 0; border-bottom: 1px solid rgba(255,255,255,.5); background: transparent; color: #ccd4e2; font-size: 11px; cursor: pointer; }
.intro-transcript { margin-top: 12px; border-bottom: 1px solid var(--rule); }
.intro-transcript summary { width: max-content; padding: 8px 0; color: var(--gold-deep); font-size: 12px; font-weight: 700; cursor: pointer; }
.transcript-body { max-height: 330px; overflow: auto; padding: 18px 22px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); color: #4b5a66; font-size: 14px; }
.transcript-body p { max-width: 720px; margin: 0 0 13px; }
.transcript-body p:last-child { margin-bottom: 0; }
.video-fallback { font-size: 12px; }
.video-fallback a { color: var(--gold-deep); text-decoration: underline; }

@keyframes end-card-in { from { opacity: 0; } to { opacity: 1; } }

/* ── the four pillars ────────────────────────────────────────────────────────────────────── */
.credibility-band { display: grid; grid-template-columns: repeat(4,1fr); max-width: var(--max); margin: 0 auto; padding: 0 28px; background: var(--surface); border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
/* Three tiles are real destinations and show their action; the instructor tile is
   informational — same layout, no action line, no hover, so nothing pretends to be a control. */
.credibility-band .pillar-tile { display: grid; gap: 4px; align-content: start; padding: 26px 20px; border-right: 1px solid var(--rule); }
.credibility-band .pillar-tile:last-child { border-right: 0; }
.credibility-band a.pillar-tile .tile-action { margin-top: 10px; color: var(--gold-deep); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.credibility-band a.pillar-tile:hover { background: #faf8f2; }
.credibility-band a.pillar-tile:hover .tile-action { color: var(--navy); }
.credibility-band a.pillar-tile:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: -2px; }
.credibility-band .pillar-icon { margin-bottom: 8px; color: var(--navy-2); }
.credibility-band .pillar-icon svg { width: 30px; height: 30px; display: block; }
.credibility-band strong { color: var(--navy); font-family: var(--serif); font-size: 16px; font-weight: 600; }
.credibility-band span { color: var(--muted); font-size: 12px; }

/* ── sections ────────────────────────────────────────────────────────────────────────────── */
.institution-section { max-width: var(--max); margin: auto; padding: 92px 28px; }
.section-heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.55fr); gap: 70px; align-items: end; padding-bottom: 34px; border-bottom: 1px solid var(--rule); }
.section-heading .overline { grid-column: 1 / -1; }
.section-heading h2, .requirements-copy h2, .student-return h2, .page-intro h1 { margin: 0; color: var(--navy); font: 500 clamp(32px,3.8vw,50px)/1.12 var(--serif); letter-spacing: -.01em; }
.section-heading > p:last-child { margin: 0; color: var(--muted); }
.pathway-steps { display: grid; grid-template-columns: repeat(4,1fr); margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule); }
.pathway-steps li { min-height: 250px; padding: 28px 24px 34px 0; border-right: 1px solid var(--rule); }
.pathway-steps li + li { padding-left: 24px; }
.pathway-steps li:last-child { border-right: 0; }
.pathway-steps li > span { color: var(--gold-deep); font-family: var(--serif); font-size: 15px; font-weight: 600; }
.pathway-steps .step-icon { margin: 26px 0 0; color: var(--navy-2); }
.pathway-steps .step-icon svg { width: 34px; height: 34px; display: block; }
.pathway-steps h3 { margin: 20px 0 12px; color: var(--navy); font: 600 21px/1.22 var(--serif); }
.pathway-steps p { margin: 0; color: var(--muted); font-size: 13px; }
.pathway-steps .step-link { display: inline-block; margin-top: 14px; padding-bottom: 3px; border-bottom: 1px solid var(--gold); color: var(--gold-deep); font-size: 12px; font-weight: 700; }
.pathway-steps .step-link:hover { color: var(--navy); border-color: var(--navy); }
.pathway-steps .step-link:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }

/* ── development priorities: regulatory record cards on deep navy ────────────────────────── */
.priority-programs { background: var(--navy); color: #fff; padding: 88px max(28px,calc((100% - var(--max))/2 + 28px)); }
.section-heading.light { border-color: rgba(255,255,255,.18); }
.section-heading.light h2 { color: #fff; }
.section-heading.light > p:last-child { color: #b9c2d2; }
.priority-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-top: 34px; border: 0; }
.priority-card { display: grid; align-content: start; gap: 12px; min-height: 230px; padding: 24px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); }
.priority-card:last-child { border-right: 1px solid rgba(255,255,255,.16); }
.priority-card:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.3); }
.priority-card span { color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.priority-card strong { font: 600 22px/1.25 var(--serif); }
.priority-card small { color: #b9c2d2; font-size: 12px; }
.priority-card .dev-chip { justify-self: start; padding: 4px 10px; background: var(--navy-2); border: 1px solid rgba(255,255,255,.22); border-radius: 3px; color: #dfe4ec; font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.priority-card .card-action { align-self: end; margin-top: 8px; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.priority-card.california { background: var(--navy-2); border-color: rgba(255,255,255,.26); }

/* ── requirements preview and the state record card ──────────────────────────────────────── */
.requirements-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 86px; }
.requirements-copy h2 { margin-bottom: 22px; }
.requirements-copy p:not(.overline) { color: var(--muted); }
.text-action { display: inline-flex; gap: 18px; margin-top: 18px; padding-bottom: 5px; border-bottom: 1px solid var(--gold); color: var(--gold-deep); font-weight: 700; }
.requirements-record { border-top: 4px solid var(--gold); background: var(--surface); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 14px 40px rgba(8,16,43,.08); }
.requirements-record > div { display: flex; align-items: baseline; gap: 16px; padding: 24px 26px; border-bottom: 1px solid var(--rule); }
.requirements-record > div span { color: var(--navy); font: 500 44px/1 var(--serif); }
.requirements-record > div small { color: var(--ink); font: 500 21px/1 var(--serif); }
.requirements-record dl { margin: 0; padding: 0 26px 8px; }
.requirements-record dl div { display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.requirements-record dl div:last-child { border-bottom: 0; }
.requirements-record dt { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.requirements-record dd { margin: 0; color: var(--navy); font-size: 13px; font-weight: 600; text-align: right; }

.student-return { display: flex; justify-content: space-between; align-items: center; gap: 50px; max-width: var(--max); margin: auto; padding: 76px 28px; }
.student-return div { max-width: 760px; }
.student-return h2 { font-size: clamp(32px,3.6vw,44px); }
.student-return p:not(.overline) { color: var(--muted); }
.student-return > a { flex: 0 0 auto; padding: 14px 22px; background: var(--gold); border-radius: 4px; color: #fff; font-size: 13px; font-weight: 700; }
.student-return > a:hover { background: var(--brick-dark); }

/* ── footer ──────────────────────────────────────────────────────────────────────────────── */
.national-footer { background: var(--navy); color: #ccd4e2; border-top: 1px solid rgba(255,255,255,.1); }
.footer-shell { display: grid; grid-template-columns: 1fr auto; gap: 50px; max-width: var(--max); margin: auto; padding: 58px 28px 34px; }
.national-brand.inverse { color: #fff; }
.national-brand.inverse small { color: var(--gold); }
.footer-shell > div > p { color: #9aa5ba; }
.footer-shell nav { display: grid; grid-template-columns: repeat(2,auto); gap: 11px 32px; font-size: 12px; }
.footer-shell nav a:hover { color: #fff; }
.footer-disclosure { grid-column: 1/-1; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); color: #8b97ae; font-size: 11px; }

/* ── shared inner pages ──────────────────────────────────────────────────────────────────── */
.page-hero { background: var(--surface); border-bottom: 1px solid var(--rule); }
.page-intro { max-width: var(--max); margin: auto; padding: 50px 28px 42px; }
.page-intro h1 { max-width: 880px; }
.page-intro > p:last-child { max-width: 780px; color: var(--muted); font-size: 19px; }
.page-body { max-width: var(--max); min-height: 520px; margin: auto; padding: 46px 28px 90px; }
.page-tools { display: grid; grid-template-columns: 1fr 240px 240px; gap: 16px; margin-bottom: 26px; }
.page-tools label { display: grid; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.page-tools input, .page-tools select { min-height: 48px; padding: 0 13px; border: 1px solid #cfcabf; border-radius: 4px; background: #fff; color: var(--ink); }
.summary-line { margin: 0 0 18px; color: var(--muted); font-size: 12px; }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); }
.requirements-table { width: 100%; min-width: 1180px; border-collapse: collapse; }
.requirements-table th { padding: 12px 14px; background: var(--navy); color: #fff; font-size: 10px; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.requirements-table td { padding: 14px; border-bottom: 1px solid var(--rule); color: #46545f; font-size: 12px; vertical-align: top; }
.requirements-table tr:hover td { background: #faf8f2; }
.requirements-table td:first-child a { color: var(--navy); font-family: var(--serif); font-size: 16px; font-weight: 600; }
.status-text { color: var(--gold-deep); font-weight: 700; }
.status-approved { color: var(--green); }
.empty-value { color: #8f9aa3; font-style: italic; }
.content-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.content-card { display: grid; align-content: start; min-height: 230px; padding: 24px; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--navy-2); border-radius: var(--radius); }
.content-card .overline { margin-bottom: 22px; }
.content-card h2, .content-card h3 { margin: 0 0 12px; color: var(--navy); font: 600 23px/1.2 var(--serif); }
.content-card p { margin: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.content-card a { align-self: end; color: var(--gold-deep); font-size: 14px; font-weight: 700; }
.content-card a:hover { color: var(--brick-dark); text-decoration: underline; text-underline-offset: 3px; }
.state-masthead { background: var(--navy); color: #fff; }
.state-masthead .page-intro h1 { color: #fff; }
.state-masthead .page-intro > p:last-child { color: #ccd4e2; }
.state-summary { display: grid; grid-template-columns: .72fr 1.28fr; gap: 55px; }
.state-record { background: var(--surface); border-top: 4px solid var(--gold); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 10px 30px rgba(8,16,43,.06); padding: 24px; }
.state-record dl { margin: 0; }
.state-record dl div { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.state-record dt { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.state-record dd { margin: 0; color: var(--navy); font-size: 14px; font-weight: 600; line-height: 1.45; text-align: right; }
.license-path { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.license-path li { position: relative; padding: 0 0 28px 52px; border-left: 1px solid var(--rule); }
.license-path li:last-child { border-left-color: transparent; }
.license-path li::before { counter-increment: step; content: counter(step); position: absolute; left: -17px; top: 0; display: grid; place-items: center; width: 34px; height: 34px; background: var(--paper); border: 1px solid var(--gold); border-radius: 50%; color: var(--navy); font: 600 14px var(--serif); }
.license-path h3 { margin: 0 0 6px; color: var(--navy); font: 600 20px var(--serif); }
.license-path p { margin: 0; color: var(--muted); font-size: 13px; }
.course-list { margin-top: 56px; }
.course-list h2 { color: var(--navy); font: 500 32px var(--serif); }
.course-row { display: grid; grid-template-columns: 1fr 140px 160px; gap: 24px; align-items: center; padding: 22px 0; border-top: 1px solid var(--rule); }
.course-row h3 { margin: 0 0 5px; color: var(--navy); font: 600 20px var(--serif); }
.course-row p { margin: 0; color: var(--muted); font-size: 12px; }
.course-row span { color: var(--gold-deep); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.course-row a { justify-self: end; color: var(--gold-deep); font-size: 12px; font-weight: 700; }
.source-box { margin-top: 55px; padding: 24px; background: var(--stone); border-left: 3px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; }
.source-box h2 { margin: 0 0 8px; color: var(--navy); font: 600 23px var(--serif); }
.source-box p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.source-box a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.notice { padding: 18px 20px; background: #f2ecdd; border-left: 3px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; color: #5c4d29; font-size: 15px; line-height: 1.6; }

.state-cta { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; margin: 0 0 40px; padding: 34px 36px; background: var(--navy); border-radius: var(--radius); color: #fff; }
.state-cta .overline { color: var(--gold); }
.state-cta h2 { margin: 0 0 10px; color: #fff; font: 500 29px/1.18 var(--serif); }
.state-cta p { margin: 0; max-width: 58ch; color: #ccd4e2; font-size: 14px; line-height: 1.55; }
/* Default layout for a row of CTA links on light reading surfaces (service pages inject
   these via #serviceLinks). The navy .state-cta panel overrides it with a stacked grid. */
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin: 22px 0; }
.cta-actions:empty { display: none; }
.state-cta .cta-actions { display: grid; gap: 12px; justify-items: stretch; text-align: center; margin: 0; }
.cta-button { display: inline-block; min-width: 232px; padding: 15px 26px; background: var(--gold); color: #fff; border: 1px solid var(--gold); border-radius: 4px; font-size: 14px; font-weight: 700; letter-spacing: .02em; text-align: center; }
.cta-button:hover { background: var(--brick-dark); border-color: var(--brick-dark); color: #fff; }
/* Secondary link color follows its surface: readable gold on cream/white, pale on navy. */
.cta-secondary { color: var(--gold-deep); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cta-secondary:hover { color: var(--brick-dark); }
.state-cta .cta-secondary { color: #ccd4e2; font-size: 12px; }
.state-cta .cta-secondary:hover { color: #fff; }
.source-box + .state-cta { margin-top: 55px; margin-bottom: 0; }
.state-cta .cta-note { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); color: #9aa5ba; font-size: 12px; line-height: 1.5; }

@media (max-width: 860px) {
  .state-cta { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; }
  .state-cta h2 { font-size: 25px; }
  .cta-button { width: 100%; min-width: 0; }
}

@media (max-width: 1080px) {
  .desktop-nav { display: none; }
  .header-shell { grid-template-columns: 1fr auto auto; }
  .mobile-menu { display: block; position: relative; }
  .mobile-menu summary { padding: 9px 11px; border: 1px solid rgba(255,255,255,.4); border-radius: 4px; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; list-style: none; }
  .mobile-menu nav { position: absolute; right: 0; top: 48px; display: grid; width: 240px; padding: 10px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 18px 45px rgba(0,0,0,.18); color: var(--ink); }
  .mobile-menu nav a { padding: 10px; border-bottom: 1px solid var(--rule); font-size: 13px; }
  .hero-shell { grid-template-columns: 1fr; min-height: auto; gap: 40px; }
  .finder-band-shell { grid-template-columns: 1fr; gap: 32px; }
  .hero-intro h1 { max-width: 800px; }
  .intro-film-shell { grid-template-columns: minmax(220px,.36fr) minmax(0,1fr); gap: 34px; }
  .credibility-band { grid-template-columns: repeat(2,1fr); }
  .credibility-band div:nth-child(2) { border-right: 0; }
  .credibility-band div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .priority-grid { grid-template-columns: repeat(2,1fr); }
  .content-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 760px) {
  .header-shell { min-height: 68px; padding: 0 17px; gap: 12px; }
  .national-brand strong { font-size: 16px; }
  .national-brand small { display: none; }
  .brand-mark, .brand-mark svg { width: 36px; height: 36px; }
  .national-header .header-actions .state-button { display: none; }
  .national-header .header-actions .account-link:first-child { display: none; } /* Create Account stays in the menu */
  .national-header .header-actions { gap: 10px; }
  .account-link { white-space: nowrap; font-size: 12px; }
  .hero-intro .header-actions { gap: 14px; }
  .hero-shell { padding: 46px 18px; }
  .vertical-doors { grid-template-columns: 1fr; gap: 14px; }
  .vertical-door { padding: 24px 20px; }
  .finder-band-shell { padding: 40px 18px; }
  .hero-intro h1 { font-size: clamp(40px,12vw,54px); }
  .hero-intro > p:last-child { font-size: 16px; }
  .intent-tabs { grid-template-columns: 1fr; }
  .intent-tabs label { min-height: 68px; border-right: 0; }
  .intent-tabs span { padding: 13px 15px; }
  .finder-fields { grid-template-columns: 1fr; padding: 18px; }
  .finder-fields button { grid-column: auto; }
  .finder-status-guide { margin: -2px 18px 14px; }
  .finder-message { margin: 0 18px 16px; }
  .practice-layout { grid-template-columns: 1fr; }
  .practice-controls { position: static; }
  .practice-reader { padding: 22px 18px; }
  .practice-section-nav { grid-template-columns: 1fr 1fr; }
  .practice-section-nav span { grid-column: 1/-1; grid-row: 1; }
  .credibility-band { grid-template-columns: 1fr; margin: 0; padding: 0; border-left: 0; border-right: 0; border-radius: 0; }
  .credibility-band div { border-right: 0; border-bottom: 1px solid var(--rule); }
  .institution-section, .page-body { padding: 62px 18px; }
  .section-heading { grid-template-columns: 1fr; gap: 16px; }
  .pathway-steps { grid-template-columns: 1fr; }
  .pathway-steps li, .pathway-steps li + li { min-height: auto; padding: 25px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .pathway-steps .step-icon { margin-top: 14px; }
  .pathway-steps h3 { margin: 14px 0 7px; }
  .priority-programs { padding: 62px 18px; }
  .priority-grid { grid-template-columns: 1fr; }
  .priority-card { min-height: 170px; }
  .requirements-preview, .state-summary { grid-template-columns: 1fr; gap: 42px; }
  .intro-film-shell { display: flex; flex-direction: column; gap: 28px; padding: 26px 18px 46px; }
  .intro-film-media { order: 1; width: 100%; }
  .intro-film-copy { order: 2; }
  .intro-film-copy .marketing-separation { margin-bottom: 0; }
  .intro-play .play-symbol { width: 56px; height: 56px; }
  .intro-end-card { padding: 18px; }
  .intro-end-card h3 { font-size: clamp(24px,7.5vw,34px); }
  .end-card-actions { display: grid; width: min(100%,330px); margin-top: 18px; }
  .end-card-actions a { min-height: 42px; }
  .intro-end-card > button { margin-top: 10px; }
  .transcript-body { max-height: 270px; padding: 16px; font-size: 13px; }
  .student-return { display: grid; padding: 62px 18px; }
  .student-return > a { width: 100%; text-align: center; }
  .footer-shell { grid-template-columns: 1fr; padding: 50px 18px 30px; }
  .page-intro { padding: 50px 18px 42px; }
  .page-tools { grid-template-columns: 1fr; }
  .content-grid { grid-template-columns: 1fr; }
  .course-row { grid-template-columns: 1fr; gap: 10px; }
  .course-row a { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .intro-end-card:not([hidden]) { animation: none; } }

/* Approval verification blocks (shared) */
.approval-block{margin:34px 0;padding:26px 28px;border:1px solid var(--rule,#e7e4de);border-radius:var(--radius);background:var(--surface,#fff)}
.approval-block h2{margin:0 0 4px;font-family:var(--serif);font-weight:600;font-size:28px;line-height:1.15;color:var(--navy)}
.approval-regulator{margin:0 0 18px;font-size:13px;color:#64717c}
.approval-numbers{margin:0 0 18px;padding:0;list-style:none}
.approval-numbers li{padding:12px 0;border-top:1px solid var(--rule,#e7e4de)}
.approval-numbers strong{display:block;font-size:16px}
.approval-numbers span{display:block;margin-top:3px;font-size:13px;color:#64717c;font-variant-numeric:tabular-nums}
.approval-absent{margin:0 0 18px;padding:14px 18px;border-left:3px solid var(--gold);background:var(--stone);font-size:14px}
.verify-steps{padding-top:16px;border-top:1px solid var(--rule,#e7e4de)}
.verify-steps ol{margin:0 0 14px;padding-left:22px}
.verify-steps li{margin-bottom:8px;font-size:14px}
.verify-note{margin:0 0 14px;font-size:13px;color:#4b5a66}
.verify-reviewed{margin:10px 0 0;font-size:11px;color:#64717c}
@media(max-width:760px){.approval-block{padding:18px 16px}.approval-block h2{font-size:23px}}