/* Public Sans, self-hosted (variable weight axis; one file replaces the
   render-blocking Google Fonts chain). Latin subset. */
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/media/fonts/public-sans-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #003e75;
  --navy-2: #04305a;
  --ink: #1b2b3a;
  --muted: #51606f;
  --subtle: #586573;
  --accent: #015eb4;
  --accent-2: #0178e2;
  --red: #d21437;
  --bg: #ffffff;
  --panel: #f4f7fb;
  --line: #dfe6f0;
  --border-strong: #7e8ba0; /* >=3:1 on white for UI-component boundaries (WCAG 1.4.11). Do not use --accent-2 for small text (4.39:1 < 4.5). */
  --maxw: 1320px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.65 "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
h1, h2, h3 { letter-spacing: -0.015em; line-height: 1.15; margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Accessibility: skip link, screen-reader-only text, visible keyboard focus, reduced motion */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 0 0 6px 6px; font-weight: 700; font-size: 14px; }
.skip-link:focus { top: 0; text-decoration: none; }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
/* White focus ring only on the dark bands themselves. The lead-form card and the
   confirmation panel sit on white inside .cta, so they keep the default blue
   ring: a white ring on a white card is invisible. */
.hero :focus-visible, .cta :focus-visible, .ft :focus-visible { outline-color: #fff; }
.lead-form :focus-visible, .lead-done :focus-visible, .cta-form :focus-visible { outline-color: var(--accent-2); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn:hover { transform: none; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; border-radius: 4px; padding: 12px 22px; font-size: 15px;
  border: 1px solid transparent; cursor: pointer; transition: all .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-2); color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn-ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn-lg { padding: 14px 26px; font-size: 16px; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); transition: box-shadow .2s ease; }
.nav.scrolled { box-shadow: 0 2px 14px rgba(8,28,64,.09); }
/* Nav sits on the same grid as the page content, so the logo lines up with
   the hero copy and every section heading below it (same max-width/padding
   as .wrap). */
.nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 20px; }
.brand-logo { height: 34px; width: auto; display: block; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand-mark { color: var(--navy); font-weight: 800; letter-spacing: .06em; font-size: 18px; }
.brand-sub { color: var(--muted); font-size: 11px; letter-spacing: .04em; }
/* Single-line header: section links stay on one row (scroll if narrow); brand, login, CTA never shrink off. */
.nav-links { display: flex; gap: 2px; margin-left: auto; flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a { color: #2b3a4d; font-size: 13px; font-weight: 600; padding: 6px 8px; border-radius: 4px; white-space: nowrap; }
.nav-links a:hover { color: var(--accent); background: #eef3fb; text-decoration: none; }
.nav-links a.active { color: var(--accent); background: #e9f1fc; }
.nav-login { flex-shrink: 0; color: var(--accent); font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 4px; border: 1px solid var(--border-strong); white-space: nowrap; }
.nav-back { margin-left: auto; flex-shrink: 0; color: var(--accent); font-size: 14px; font-weight: 600; white-space: nowrap; }

/* Standalone legal/prose pages (e.g. /privacy): single readable column. */
.legal { max-width: 820px; margin: 0 auto; padding: 48px 24px 72px; }
.legal h1 { font-size: clamp(28px, 4vw, 34px); font-weight: 800; color: var(--navy); }
.legal .legal-date { color: var(--subtle); font-size: 14px; margin: 8px 0 28px; }
.legal h2 { font-size: 20px; font-weight: 750; color: var(--navy); margin: 30px 0 8px; }
.legal p { color: var(--ink); font-size: 15.5px; line-height: 1.75; margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { color: var(--ink); font-size: 15.5px; line-height: 1.7; margin: 0 0 6px; }
.legal a { color: var(--accent); text-decoration: underline; }
.nav-login:hover { background: #eef3fb; text-decoration: none; }
.nav-cta { flex-shrink: 0; margin-left: 6px; white-space: nowrap; }
.nav-toggle { display: none; align-items: center; justify-content: center; line-height: 1; min-width: 44px; min-height: 44px; background: none; border: 0; color: var(--navy); font-size: 22px; cursor: pointer; margin-left: auto; border-radius: 6px; }
.nav-toggle:hover { background: #eef3fb; }

/* Hero */
.hero {
  background:
    radial-gradient(1200px 520px at 82% -10%, rgba(1,120,226,.42), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff; padding: 92px 0 84px;
}
/* Light-blue accent on the dark hero: red-on-navy failed contrast (2.0:1). #9ac2ec = 5.8:1. */
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 12.5px; font-weight: 800; color: #9ac2ec; margin: 0 0 14px; }
.hero h1 { font-size: clamp(30px, 4.6vw, 52px); font-weight: 800; max-width: 18ch; }
.hero-sub { font-size: clamp(16px, 1.5vw, 19px); color: rgba(255,255,255,.86); max-width: 62ch; margin: 20px 0 30px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-note { margin: 24px 0 0; font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.8); max-width: 66ch; }
.hero-note a { color: #fff; text-decoration: underline; }
.hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 46px; align-items: center; }
.hero-copy { min-width: 0; min-height: 260px; }
.hero-media { min-width: 0; }
.hero-media img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 20px 46px rgba(0,0,0,.34); display: block; }
.hero-video { position: relative; margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 46px rgba(0,0,0,.34); background: #001b34; line-height: 0; aspect-ratio: 16 / 9; }
.hero-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-video img, .hero-video iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.hero-video-play { position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: 50%; border: none; background: rgba(255,255,255,.94); color: var(--navy); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.3); transition: transform .15s ease, background .15s ease; }
.hero-video-play svg { width: 30px; height: 30px; fill: currentColor; margin-left: 3px; }
.hero-video-play:hover { transform: scale(1.06); background: #fff; }
.hero-video.is-playing .hero-video-play { display: none; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 28px; } .hero-media { max-width: 460px; } }

/* Stats */
.proof { background: linear-gradient(180deg, #eaf0f7 0%, #f4f8fc 60%, #ffffff 100%); border-top: 1px solid rgba(1, 62, 117, .16); border-bottom: 1px solid var(--line); padding: 34px 0 0; }
.proof-h { text-align: center; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--muted); margin: 0 0 24px; }
.proof-solo { padding-bottom: 40px; }
.stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; min-height: 138px; }
.stat { position: relative; text-align: center; padding: 2px 20px 4px; }
.stat-ic { width: 30px; height: 30px; margin: 0 auto 12px; color: #2f6096; }
.stat-ic svg { width: 100%; height: 100%; display: block; }
.stat-num { font-size: clamp(23px, 2.5vw, 32px); font-weight: 800; color: var(--navy); letter-spacing: -.025em; line-height: 1.06; }
.stat-label { font-size: 12.5px; color: #455160; margin-top: 8px; line-height: 1.35; }

/* Sections */
.sec { padding: 56px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 70px; }
#top, .hero { scroll-margin-top: 70px; }
.sec.alt { background: var(--panel); }
.sec h2 { font-size: clamp(23px, 2.6vw, 32px); font-weight: 750; color: var(--navy); max-width: 24ch; }
.sec .lead { font-size: 17px; color: var(--muted); max-width: 70ch; margin: 16px 0 0; }
.bullets { margin: 22px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; max-width: 80ch; }
.bullets li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink); }
.bullets li::before { content: "★"; position: absolute; left: 0; top: 0; color: var(--red); font-weight: 800; }

/* Areas grid */
.areas { margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.area { border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; background: #fff; }
.sec.alt .area { background: #fff; }
.area-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.area-name { font-weight: 700; font-size: 14.5px; color: var(--navy); }
.area-note { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
/* Plain status text, not a colored pill (no fill/border/radius): the colored badge read as an AI design tell. */
.tag { font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--subtle); }
.tag-have { color: var(--muted); }
.tag-fast { color: var(--subtle); }

/* Content-mapping table: OPM's 15 functional areas -> GSUSA coverage */
.maptable-wrap { margin-top: 26px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.maptable { width: 100%; border-collapse: collapse; font-size: 14px; }
.maptable thead th { background: var(--navy); color: #fff; text-align: left; font-weight: 700; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; padding: 11px 14px; }
.maptable tbody td { border-top: 1px solid var(--line); padding: 10px 14px; vertical-align: top; }
.maptable tbody tr:nth-child(even) { background: #fafcff; }
.maptable .m-area { font-weight: 700; color: var(--navy); }
.maptable .m-note { color: var(--muted); }
.maptable .m-status { white-space: nowrap; font-weight: 600; color: var(--ink); }
.maptable .m-status.m-fast { color: var(--subtle); font-weight: 500; }

/* LMS screenshots (figures). Rendered only when a section provides shots. */
.shots { margin-top: 26px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.shot { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.shot img { display: block; width: 100%; height: auto; border-bottom: 1px solid var(--line); }
.shot figcaption { padding: 10px 14px; font-size: 13px; color: var(--muted); }
.shot-full { grid-column: 1 / -1; }

/* Real course video (poster + captions), rendered only when a section provides one */
.lms-video { margin: 26px 0 0; max-width: 880px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #000; }
.lms-video video { display: block; width: 100%; height: auto; }
.lms-video figcaption { padding: 11px 16px; font-size: 13px; color: var(--muted); background: #fff; border-top: 1px solid var(--line); }
.lms-video-frame { position: relative; line-height: 0; }
.video-play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); box-shadow: 0 8px 28px rgba(0,0,0,.4); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .12s ease, background .12s ease; }
.video-play svg { width: 30px; height: 30px; fill: var(--navy); margin-left: 4px; }
.video-play:hover { transform: scale(1.06); background: #fff; }
.video-play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.lms-video.is-playing .video-play { display: none; }

/* Recreated LMS panels (built from the real screens; swap to PNGs when saved) */
.lpanel { margin: 26px 0 0; max-width: 760px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.lpanel-title { margin: 0; background: var(--navy); color: #fff; font-weight: 800; font-size: 13.5px; letter-spacing: .01em; padding: 9px 14px; }
.lpanel-desc { margin: 0; padding: 9px 14px 10px; font-size: 12px; line-height: 1.42; color: var(--muted); background: #fff; border-bottom: 1px solid var(--line); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lpanel-chrome { display: flex; align-items: center; gap: 7px; padding: 8px 13px; background: #f6f8fb; border-bottom: 1px solid var(--line); }
.lpanel-chrome .d { width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; }
.lpanel-chrome .u { margin-left: 10px; font-size: 11.5px; color: var(--subtle); background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 3px 10px; }
.lpanel-body { padding: 18px; }
.lpanel-cap { padding: 10px 14px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--line); background: #fff; }
.aic-head { background: var(--navy); color: #fff; padding: 11px 15px; display: flex; align-items: center; gap: 9px; }
.aic-head .g { width: 26px; height: 26px; border-radius: 6px; background: #fff; color: var(--navy); font-weight: 800; font-size: 10px; display: flex; align-items: center; justify-content: center; }
.aic-head .st { font-size: 11px; color: #a9c9e8; }
.aic-hi { text-align: center; font-size: 14px; color: var(--ink); margin: 6px 0 14px; }
.aic-grp { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--subtle); margin: 12px 0 7px; }
.aic-i { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--ink); margin: 5px 0; }
.aic-i .y { color: #176c39; font-weight: 800; }
.aic-i .n { color: #b42318; font-weight: 800; }
.aic-input { margin: 14px; border: 1px solid var(--accent); border-radius: 9px; padding: 10px 13px; color: var(--subtle); font-size: 13px; }
.src-h { font-size: 18px; color: var(--navy); font-weight: 800; margin: 0 0 5px; }
.src-p { color: var(--muted); font-size: 13.5px; margin: 0 0 15px; }
.src-lab { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--subtle); border-top: 1px solid var(--line); padding-top: 11px; margin-bottom: 9px; }
.src-row { display: flex; align-items: center; gap: 9px; margin: 6px 0; font-size: 13px; flex-wrap: wrap; }
.src-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 5px; white-space: nowrap; }
.src-tag.pri { background: #e6f4ea; color: #176c39; }
.src-tag.off { background: #eef2f7; color: var(--subtle); }
.src-row a { color: var(--accent); text-decoration: underline; }
.src-cite { color: var(--muted); font-size: 12px; }
.an-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.an-card { border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; }
.an-card .l { font-size: 11px; color: var(--subtle); text-transform: uppercase; letter-spacing: .03em; }
.an-card .v { font-size: 20px; font-weight: 800; color: var(--navy); margin-top: 3px; }
.an-card .s { font-size: 11px; color: var(--muted); }
.an-mod { display: flex; align-items: center; gap: 10px; padding: 9px 0 4px; border-top: 1px solid var(--line); }
.an-mod .ck { width: 18px; height: 18px; border-radius: 50%; background: #176c39; color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
.an-mod .nm { font-size: 13.5px; color: var(--ink); font-weight: 600; flex: 1; }
.an-mod .pc { font-size: 12px; color: var(--muted); }
.an-bar { height: 5px; background: #e6efe9; border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
.an-bar i { display: block; height: 100%; background: #176c39; }

/* Gallery slider: many LMS screens, one row tall, scroll/slide horizontally */
.gal-head { font-size: 15px; font-weight: 700; color: var(--navy); margin: 24px 0 2px; max-width: 72ch; }
.gallery { position: relative; margin-top: 14px; padding: 0; }
.gal-track { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; scrollbar-width: thin; contain: paint; }
.gal-track::-webkit-scrollbar { height: 8px; }
.gal-track::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.gal-item { flex: 0 0 400px; max-width: 400px; scroll-snap-align: start; display: flex; }
.gal-item .lpanel { margin: 0; max-width: none; width: 100%; display: flex; flex-direction: column; }
.gal-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border-strong); background: #fff; color: var(--navy); font-size: 27px; line-height: 1; cursor: pointer; z-index: 3; box-shadow: 0 3px 14px rgba(8,28,64,.16); }
.gal-btn:hover { background: #f4f7fb; }
.gal-btn:disabled { opacity: .3; cursor: default; }
.gal-prev { left: -56px; }
.gal-next { right: -56px; }
.gal-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 14px; }
.gal-chip { flex: none; display: inline-flex; align-items: center; min-height: 24px; border: 1px solid var(--border-strong); background: #fff; color: var(--muted); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.gal-chip:hover { border-color: var(--accent); color: var(--accent); }
.gal-chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
@media (max-width: 1440px) { .gal-prev { left: -22px; } .gal-next { right: -22px; } }

/* Knowledge check + scenario panels */
.kc-lab { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.kc-q { font-size: 14.5px; color: var(--ink); font-weight: 600; margin-bottom: 14px; line-height: 1.4; }
.kc-opt { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 13px; margin-bottom: 8px; font-size: 13.5px; color: var(--ink); }
.kc-radio { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--border-strong); flex: none; }
.kc-submit { display: inline-block; margin-top: 6px; background: #5b6675; color: #fff; font-weight: 700; font-size: 13px; padding: 8px 15px; border-radius: 7px; }
.sc-q { font-size: 14px; color: var(--ink); margin-bottom: 12px; line-height: 1.45; }
.sc-ta { border: 1px solid var(--line); border-radius: 8px; padding: 12px; color: var(--subtle); font-size: 13px; min-height: 78px; margin-bottom: 10px; }

/* Matching panel */
.mt-h { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 12px; }
.mt-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mt-p { flex: 0 0 92px; font-weight: 700; color: var(--navy); font-size: 13px; border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; background: #f6f8fb; }
.mt-arrow { color: var(--subtle); }
.mt-drop { flex: 1; font-size: 13px; color: var(--ink); border: 1px dashed #6b7c92; border-radius: 7px; padding: 8px 10px; }

/* Glossary + resources panels */
.gl-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.gl-title { font-size: 16px; font-weight: 800; color: var(--navy); }
.gl-count { font-size: 12px; font-weight: 700; color: var(--subtle); background: #eef2f7; padding: 2px 9px; border-radius: 5px; }
.gl-search { border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; color: var(--subtle); font-size: 13px; margin-bottom: 6px; }
.gl-row { border-top: 1px solid var(--line); padding: 10px 0; }
.gl-term { font-weight: 700; color: var(--accent); font-size: 13.5px; }
.gl-def { color: var(--muted); font-size: 12.5px; margin-top: 3px; line-height: 1.45; }
.rs-row { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 11px 0; }
.rs-txt { flex: 1; }
.rs-t { display: block; font-weight: 700; color: var(--ink); font-size: 13.5px; }
.rs-d { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.rs-badge { font-size: 11px; font-weight: 700; color: var(--subtle); background: #eef2f7; padding: 3px 10px; border-radius: 5px; }

/* Course home panel */
.hp-title { font-size: 16px; font-weight: 800; color: var(--navy); }
.hp-code { font-size: 12px; color: var(--subtle); margin-bottom: 12px; }
.hp-navwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.hp-nav { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 7px; padding: 8px 11px; font-size: 13px; color: var(--ink); font-weight: 600; }
.hp-ct { font-size: 11px; font-weight: 700; color: var(--subtle); background: #eef2f7; padding: 1px 7px; border-radius: 999px; }
.hp-plab { font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }

/* Content-table panel */
.tb { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.tb th { background: var(--navy); color: #fff; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; padding: 8px 11px; }
.tb td { border-top: 1px solid var(--line); padding: 9px 11px; vertical-align: top; color: var(--ink); }
.tb .tb-k { font-weight: 800; color: var(--navy); width: 66px; }
.tb .tb-v { color: var(--muted); }

/* Numbered-steps panel */
.st-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.st-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.st-t { display: block; font-weight: 700; color: var(--ink); font-size: 14px; }
.st-d { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; line-height: 1.4; }

/* In-slide glossary panel */
.gc-head { font-size: 16px; font-weight: 800; color: var(--navy); margin-bottom: 12px; }
.gc-li { font-size: 13.5px; color: var(--ink); margin: 7px 0; padding-left: 16px; position: relative; }
.gc-li::before { content: "•"; position: absolute; left: 0; color: var(--subtle); }
.gc-term { color: var(--accent); border-bottom: 1px dashed var(--accent); }
.gc-card { margin-top: 14px; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 11px 13px; }
.gc-ct { font-weight: 800; color: var(--navy); font-size: 13.5px; }
.gc-cd { color: var(--muted); font-size: 12.5px; margin-top: 3px; line-height: 1.45; }

/* Ladder */
.ladder { margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rung { border: 1px solid var(--line); border-radius: 10px; padding: 22px 20px; background: #fff; box-shadow: 0 1px 2px rgba(4, 48, 90, .05), 0 6px 16px rgba(4, 48, 90, .07); }
.rung-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rung-num { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.rung-name { font-size: 18px; font-weight: 750; color: var(--navy); margin: 0; }
.rung p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; }
.m-course { color: var(--navy); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
.m-course:hover { color: var(--accent); text-decoration-color: var(--accent); }
.m-ext { font-size: .82em; opacity: .75; }

/* Instructor + multi-course messaging panels */
.im-row { display: flex; gap: 9px; margin: 0 0 12px; }
.im-you { justify-content: flex-end; }
.im-you .im-b { background: #eef3fb; border-radius: 12px 12px 3px 12px; }
.im-inst .im-b { background: #fff; border: 1px solid var(--line); border-radius: 12px 12px 12px 3px; }
.im-b { max-width: 84%; padding: 9px 12px; font-size: 13px; line-height: 1.45; color: var(--ink); }
.im-who { display: block; font-weight: 700; color: var(--navy); font-size: 12px; margin-bottom: 3px; }
.im-av { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* Cohort roster + shared panel note */
.ro-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.rost { width: 100%; border-collapse: collapse; font-size: 13px; }
.rost th { background: var(--navy); color: #fff; text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; padding: 7px 10px; }
.rost td { border-top: 1px solid var(--line); padding: 8px 10px; color: var(--ink); }
.rost .ro-n { font-weight: 700; color: var(--navy); }
.rost .ro-c { color: var(--muted); font-size: 12px; }
.ro-note { margin-top: 13px; font-size: 12px; color: var(--muted); line-height: 1.5; border-top: 1px solid var(--line); padding-top: 11px; }

/* Knowledge-gain panel */
.ga-h { font-size: 15px; font-weight: 800; color: var(--navy); margin-bottom: 14px; }
.ga-row { display: flex; align-items: center; gap: 10px; margin: 9px 0; }
.ga-l { flex: 0 0 108px; font-size: 12.5px; color: var(--muted); }
.ga-track { flex: 1; height: 12px; background: #eef2f7; border-radius: 6px; overflow: hidden; }
.ga-track i { display: block; height: 100%; background: #6b7c92; }
.ga-track i.ga-hi { background: var(--navy); }
.ga-v { flex: none; width: 42px; text-align: right; font-weight: 800; color: var(--navy); font-size: 13px; }
.ga-delta { margin-top: 6px; font-weight: 800; color: #176c39; font-size: 14px; }

/* Credential card panel */
.cr-body { text-align: center; }
.cr-card { border: 2px solid var(--navy); border-radius: 10px; padding: 22px 18px; background: linear-gradient(180deg, #fff, #f4f8fc); }
.cr-seal { display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.cr-seal svg { height: 30px; width: auto; display: block; }
.cr-k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--subtle); font-weight: 700; }
.cr-name { font-size: 21px; font-weight: 800; color: var(--navy); margin: 8px 0 2px; }
.cr-sub { font-size: 12px; color: var(--muted); }
.cr-course { font-size: 15px; font-weight: 700; color: var(--ink); margin: 6px 0 12px; }
.cr-meta { font-size: 11px; color: var(--subtle); line-height: 1.5; }

/* Learner-path panel */
.pa-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; margin-bottom: 9px; }
.pa-now { background: #f4f8fc; }
.pa-tier { flex: 0 0 96px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--subtle); }
.pa-txt { flex: 1; }
.pa-t { display: block; font-weight: 700; color: var(--ink); font-size: 13.5px; }
.pa-s { display: block; color: var(--muted); font-size: 12px; margin-top: 1px; }

/* CTA */
.cta { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%); color: #fff; padding: 64px 0; scroll-margin-top: 70px; }
.cta-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
.cta h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; max-width: 20ch; }
.cta p { color: rgba(255,255,255,.85); font-size: 16px; margin: 14px 0 0; max-width: 60ch; }
.cta-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 24px; box-shadow: 0 18px 44px rgba(0,0,0,.30); }
.cta-contact { margin-top: 18px; font-size: 14px; color: var(--muted); line-height: 1.7; }
.cta-contact strong { color: var(--navy); }
.cta-contact a { color: var(--accent); text-decoration: underline; }
.cta-login { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.cta-login a { color: var(--accent); text-decoration: underline; }
.cta-dl { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; color: var(--navy); font-size: 13.5px; font-weight: 700; border: 1px solid var(--border-strong); border-radius: 4px; padding: 9px 14px; text-decoration: none; }
.cta-dl:hover { background: var(--panel); text-decoration: none; }

/* /hr closing CTA: the lead form in a white card beside the copy, set over a
   darkened photo so the panel doesn't float in flat navy. Scoped via :has so
   the two-column mailto CTA on / stays untouched. */
.cta:has(.lead-form) { position: relative; overflow: hidden; padding: 78px 0; }
.cta:has(.lead-form)::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(112deg, rgba(3,40,74,.975) 0%, rgba(0,62,117,.90) 46%, rgba(0,62,117,.70) 100%),
    url("/media/sec-instructor.webp") center/cover no-repeat;
}
.cta-inner:has(.lead-form) { position: relative; z-index: 1; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.cta-copy .cta-reassure { display: inline-flex; align-items: center; gap: 9px; margin: 18px 0 0; font-size: 14px; font-weight: 600; color: #fff; }
.cta-copy .cta-reassure::before { content: "\2713"; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.18); font-size: 11px; }
.cta-copy .cta-contact { margin-top: 22px; color: rgba(255,255,255,.82); }
.cta-copy .cta-contact strong { color: #fff; }
.cta-copy .cta-contact a { color: #fff; text-decoration: underline; }

/* Footer: mirrors the graduateschool.edu structure (Organization, Contact,
   Location, plus captioned accreditation credentials). */
.ft { background: #06152b; color: rgba(255,255,255,.66); padding: 52px 0 34px; font-size: 13px; line-height: 1.6; }
.ft p { margin: 0 0 8px; }
.ft a { color: rgba(255,255,255,.9); text-decoration: none; }
.ft a:hover { color: #fff; text-decoration: underline; }
.ft-top { display: grid; grid-template-columns: 2.1fr 1.5fr 1.1fr 1.2fr; gap: 34px 40px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.16); }
.ft-h { font-size: 13px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: #fff; margin: 0 0 14px; }
.ft-lab { color: #fff; font-weight: 650; margin-bottom: 2px; }
.ft-hours { margin-top: 10px; color: rgba(255,255,255,.55); font-size: 12.5px; }
/* Column-major so reading straight down a column stays in list order. */
.ft-nav { columns: 2; column-gap: 26px; }
.ft-nav a { display: block; break-inside: avoid; margin-bottom: 7px; color: rgba(255,255,255,.8); font-size: 12.5px; font-weight: 500; }
.ft-social { display: flex; gap: 14px; margin-top: 14px; }
.ft-social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.1); color: rgba(255,255,255,.88); }
.ft-social a:hover { background: rgba(255,255,255,.2); color: #fff; }
.ft-social svg { width: 17px; height: 17px; }
/* Accreditation and partner credentials, each with the caption the main site uses. */
.ft-creds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; padding: 30px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.ft-cred { display: flex; flex-direction: column; gap: 12px; }
.ft-cred img { height: 28px; width: auto; align-self: flex-start; opacity: .9; }
.ft-cred p { margin: 0; font-size: 11.5px; line-height: 1.45; color: rgba(255,255,255,.58); }
.ft-legal { padding-top: 26px; font-size: 12px; color: rgba(255,255,255,.55); }
.ft-legal a { text-decoration: underline; }
.ft-note { color: rgba(255,255,255,.5); }
.ft-copy { margin: 12px 0 0; color: rgba(255,255,255,.5); }
@media (max-width: 1080px) {
  .ft-top { grid-template-columns: 1.6fr 1fr; }
  .ft-creds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ft { padding: 38px 0 28px; }
  .ft-top { grid-template-columns: 1fr; gap: 28px; }
  .ft-creds { grid-template-columns: 1fr 1fr; gap: 22px; }
}

/* Responsive */
@media (max-width: 880px) {
  .stats { grid-template-columns: repeat(3, 1fr); gap: 26px 0; min-height: 290px; }
  .stat { padding: 0 8px; min-width: 0; }
  .stat:nth-child(3n+1)::before { display: none; }
  .areas, .ladder, .cta-inner, .cta-inner:has(.lead-form), .shots { grid-template-columns: 1fr; }
  .cta-inner:has(.lead-form) { gap: 28px; }
  .an-stats { grid-template-columns: 1fr 1fr; }
  .gal-item { flex-basis: 84vw; max-width: 84vw; }
  .gallery { padding: 0; }
  .gal-prev, .gal-next { display: none; }
  .bullets { grid-template-columns: 1fr; }
  .hero { padding: 64px 0 56px; }
}

/* The section nav runs to nine items plus the CTA, which needs about 1280px to
   lay out. Below that the row used to overflow its own scroll container, which
   hides its own scrollbar, so trailing links (FAQ) were silently unreachable on
   any 1024 to 1280 laptop. Switch to the toggle menu until the row genuinely
   fits. */
@media (max-width: 1300px) {
  .nav-links { display: none; width: 100%; flex-direction: column; order: 3; }
  .nav.open .nav-links { display: flex; }
  .nav-toggle { display: inline-flex; }
  .nav-inner { flex-wrap: wrap; }
  /* Keep the primary CTA in the collapsed header. These pages run to ~13,000px
     on a phone and the inline CTAs are sparse, so hiding it behind the menu left
     the sticky header as a logo and a hamburger with no way to convert. */
  .nav-cta { margin-left: auto; }
  .nav-toggle { margin-left: 10px; }
  .nav-cta .btn { padding: 9px 15px; font-size: 14px; }
  .nav.open .nav-cta { order: 4; }
}
@media (max-width: 420px) {
  .nav-cta .btn { padding: 8px 12px; font-size: 13px; }
  .brand-logo { height: 28px; }
}

/* Print: render the page as a clean, complete PDF (download-for-meetings clone) */
@media print {
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .nav { position: static !important; box-shadow: none !important; }
  .nav-toggle, .skip-link { display: none !important; }
  .hero { padding: 40px 0 34px !important; }
  .hero-media img { box-shadow: none !important; }
  .gallery { padding: 0 !important; }
  .gal-track { display: block !important; overflow: visible !important; contain: none !important; }
  .gal-track > * { width: 100% !important; margin: 0 0 16px !important; scroll-snap-align: none !important; }
  .gal-prev, .gal-next, .gal-chips { display: none !important; }
  .lpanel, .shot, .cr-card, .gc-card { break-inside: avoid; }
  a { text-decoration: none !important; color: inherit !important; }
}

/* Delivery-mode cards on vertical pages (plain white cards, same language as .rung) */
.vcards { margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vcard { border: 1px solid var(--line); border-radius: 10px; padding: 22px 20px; background: #fff; box-shadow: 0 1px 2px rgba(4, 48, 90, .05), 0 6px 16px rgba(4, 48, 90, .07); }
.vcard-kicker { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--subtle); margin-bottom: 8px; }
.vcard-title { font-size: 19px; font-weight: 750; color: var(--navy); margin: 0 0 10px; }
.vcard-body { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; }
.vcard-list { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.vcard-list li { position: relative; padding-left: 24px; font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.vcard-list li::before { content: "★"; position: absolute; left: 0; top: 0; color: var(--red); font-weight: 800; }
a.vcard-link { display: flex; flex-direction: column; text-decoration: none; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
a.vcard-link:hover { border-color: var(--border-strong); box-shadow: 0 2px 6px rgba(4, 48, 90, .06), 0 10px 22px rgba(4, 48, 90, .09); transform: translateY(-2px); }
.vcard-go { display: block; margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 700; color: var(--accent); }
a.vcard-link:hover .vcard-go { text-decoration: underline; }
.vcards-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .vcards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { a.vcard-link:hover { transform: none; } }
@media (max-width: 880px) { .vcards { grid-template-columns: 1fr; } }
@media print { .vcard { break-inside: avoid; } }

/* Trailing text link under a section's lead */
.sec-link { margin: 18px 0 0; font-size: 15px; font-weight: 700; }
.sec-link a { text-decoration: underline; text-underline-offset: 2px; }

/* Functional-area list: each area with a coverage line and its course links */
/* Columns (not grid) so short cards pack tightly instead of stretching to the
   height of course-heavy neighbors in the same row. */
.arealist { margin-top: 28px; columns: 3; column-gap: 14px; }
.arealist-2 { columns: 2; max-width: 900px; }
.al-item { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; background: #fff; display: flex; flex-direction: column; break-inside: avoid; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.sec.alt .al-item { background: #fff; }
.al-item:hover { border-color: var(--border-strong); box-shadow: 0 2px 6px rgba(4, 48, 90, .06), 0 10px 22px rgba(4, 48, 90, .09); transform: translateY(-2px); }
.al-area { font-weight: 750; font-size: 15.5px; color: var(--navy); letter-spacing: -.01em; margin: 0; }
.al-note { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.al-courses { margin-top: 13px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.al-course { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; line-height: 1.35; }
.al-course:hover { text-decoration: underline; }
.al-ext { font-size: .8em; opacity: .7; }
@media (max-width: 980px) { .arealist { columns: 2; } }
@media (max-width: 640px) { .arealist { columns: 1; } }
@media (prefers-reduced-motion: reduce) { .al-item:hover { transform: none; } }
@media print { .al-item { break-inside: avoid; } }

/* spotlight: flagship course cards (illustration + detail) above the catalog */
.spotlight { margin-top: 28px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.spot { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; text-decoration: none; box-shadow: 0 1px 2px rgba(4, 48, 90, .05), 0 6px 16px rgba(4, 48, 90, .07); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.spot:hover { border-color: var(--border-strong); box-shadow: 0 2px 6px rgba(4, 48, 90, .06), 0 12px 26px rgba(4, 48, 90, .10); transform: translateY(-2px); }
.spot-media { display: block; background: #f7f9fc; border-bottom: 1px solid var(--line); line-height: 0; }
.spot-media img { width: 100%; height: auto; display: block; }
.spot-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.spot-name { display: block; font-size: 19px; font-weight: 750; color: var(--navy); letter-spacing: -.01em; line-height: 1.25; }
.spot-meta { display: flex; flex-wrap: wrap; align-items: center; margin-top: 9px; font-size: 12.5px; font-weight: 600; color: var(--subtle); }
.spot-meta span + span::before { content: "·"; margin: 0 8px; color: var(--border-strong); font-weight: 700; }
.spot-desc { display: block; margin-top: 12px; font-size: 14px; color: var(--muted); line-height: 1.55; }
.spot-covers { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 15px; }
.spot-cov-lab { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--subtle); margin-right: 2px; }
.spot-cov { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; color: var(--ink); background: #fff; }
.spot-go { display: block; margin-top: auto; padding-top: 16px; font-size: 13px; font-weight: 700; color: var(--accent); }
.spot:hover .spot-go { text-decoration: underline; }
@media (max-width: 880px) { .spotlight { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .spot:hover { transform: none; } }
@media print { .spot { break-inside: avoid; } }

/* quotes: verbatim participant testimonials */
.quotes { margin-top: 28px; columns: 3; column-gap: 18px; }
.quote { break-inside: avoid; margin: 0 0 18px; border: 1px solid var(--line); border-radius: 12px; padding: 22px 22px 20px; background: #fff; box-shadow: 0 1px 2px rgba(4, 48, 90, .05), 0 6px 16px rgba(4, 48, 90, .07); }
.quote::before { content: "\201C"; display: block; font-family: Georgia, "Times New Roman", serif; font-size: 44px; line-height: .8; color: var(--accent); opacity: .35; margin-bottom: 6px; }
.q-text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.q-by { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.q-name { display: block; font-size: 13px; font-weight: 750; color: var(--navy); }
.q-org { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.sec.alt .quote { background: #fff; }
@media (max-width: 1080px) { .quotes { columns: 2; } }
@media (max-width: 700px) { .quotes { columns: 1; } }
@media print { .quote { break-inside: avoid; } }

/* What's-new reintroduction band: icon feature tiles */
.whatsnew { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.wn-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px; border: 1px solid var(--line); border-radius: 12px; padding: 30px 20px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.wn-item:hover { border-color: var(--border-strong); box-shadow: 0 2px 6px rgba(4,48,90,.06), 0 12px 26px rgba(4,48,90,.10); transform: translateY(-3px); }
.wn-ic { width: 54px; height: 54px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; flex: none; }
.wn-ic svg { width: 27px; height: 27px; display: block; }
.wn-label { font-weight: 750; font-size: 16px; color: var(--navy); letter-spacing: -.01em; }

/* What's-new as an immersive band over a real Graduate School USA photo */
#whats-new { position: relative; border-bottom: none; padding: 70px 0 74px; background: linear-gradient(180deg, rgba(3,26,52,.72) 0%, rgba(2,15,32,.90) 100%), url("/media/sec-collaborate.webp") center/cover no-repeat; }
#whats-new > .wrap { position: relative; z-index: 1; }
#whats-new h2 { color: #fff; }
#whats-new .lead { color: rgba(255,255,255,.82); }
#whats-new .wn-item { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.24); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#whats-new .wn-item:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.5); box-shadow: none; }
#whats-new .wn-ic { width: auto; height: auto; background: transparent; color: #fff; }
#whats-new .wn-ic svg { width: 30px; height: 30px; }
#whats-new .wn-label { color: #fff; }

/* Certificate ladder: clickable level cards */
.certs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.certs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.certs.certs-4 { grid-template-columns: repeat(4, 1fr); } /* 4-cert pages fill one row instead of stranding an orphan card */
.cert-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; padding: 22px 22px 20px; background: #fff; text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.cert-card:hover { border-color: var(--border-strong); box-shadow: 0 2px 6px rgba(4,48,90,.06), 0 12px 26px rgba(4,48,90,.10); transform: translateY(-2px); }
.cert-level { font-size: 12.5px; font-weight: 700; color: var(--subtle); }
.cert-name { margin: 3px 0 0; font-size: 17px; font-weight: 750; color: var(--navy); letter-spacing: -.01em; line-height: 1.25; }
.cert-covers { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; flex: 1; }
.cert-meta { margin: 12px 0 0; font-size: 12.5px; font-weight: 600; color: var(--subtle); }
.cert-go { margin-top: 14px; font-size: 13px; font-weight: 700; color: var(--accent); }
.cert-card:hover .cert-go { text-decoration: underline; }

/* FAQ accordion (native details/summary) */
.faq { margin-top: 24px; max-width: 920px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { position: relative; cursor: pointer; list-style: none; padding: 16px 44px 16px 0; font-size: 16px; font-weight: 700; color: var(--navy); line-height: 1.4; }
.faq-q::-webkit-details-marker { display: none; }
.faq-mark { position: absolute; right: 6px; top: 22px; width: 14px; height: 14px; }
.faq-mark::before, .faq-mark::after { content: ""; position: absolute; background: var(--subtle); border-radius: 2px; }
.faq-mark::before { left: 0; right: 0; top: 6px; height: 2px; }
.faq-mark::after { top: 0; bottom: 0; left: 6px; width: 2px; transition: transform .18s ease; }
.faq-item[open] .faq-mark::after { transform: scaleY(0); }
.faq-a { padding: 0 44px 18px 0; font-size: 14.5px; color: var(--muted); line-height: 1.6; max-width: 74ch; }

@media (max-width: 1080px) { .certs.certs-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px) { .whatsnew, .certs, .certs.certs-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .whatsnew, .certs, .certs.certs-4 { grid-template-columns: 1fr; } }

/* Agency-seal marquee at the foot of the track-record band (auto-scrolling strip) */
.proof-seals { margin-top: 30px; padding: 24px 0 30px; }
.proof-note { text-align: center; font-size: 11.5px; color: var(--subtle); line-height: 1.5; max-width: 64ch; margin: 0 auto; padding: 26px 20px 0; }
/* min-height must track the seal height below, or the band reflows as the
   lazy-loaded seals arrive (CLS). */
.seals-track-wrap { position: relative; overflow: hidden; min-height: 72px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.seals-track { display: flex; align-items: center; gap: 58px; width: max-content; animation: seals-scroll 70s linear infinite; }
.seals-track:hover, .seals-track:focus-within { animation-play-state: paused; }
.seals-track img { height: 72px; width: auto; display: block; opacity: .9; }
@keyframes seals-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) { .seals-track img { height: 56px; } .seals-track { gap: 40px; } .seals-track-wrap { min-height: 56px; } .proof-seals { padding: 20px 0 24px; } .proof-note { padding-top: 20px; } }
@media (prefers-reduced-motion: reduce) {
  .seals-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: 26px 40px; }
  .seals-track-wrap { -webkit-mask-image: none; mask-image: none; }
  .seals-track .seals-dup { display: none; }
}
@media print { .proof-seals { display: none; } }

/* Lead form (group-training request) in the CTA card */
.lead-form { display: grid; gap: 12px; text-align: left; }
.lf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lf-field label { display: block; font-size: 12px; font-weight: 700; color: var(--subtle); margin-bottom: 5px; }
/* 16px: iOS Safari auto-zooms the page on focus for anything smaller, which
   leaves the user pinching back out in the middle of the form. */
.lf-field input, .lead-form textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); border: 1px solid var(--border-strong); border-radius: 6px; padding: 9px 11px; background: #fff; }
.lf-req { color: var(--red); margin-left: 2px; }
.lf-note { font-size: 12px; color: var(--subtle); margin: -2px 0 0; }
.lf-field input:focus, .lead-form textarea:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; border-color: var(--accent); }
.lead-form textarea { resize: vertical; min-height: 82px; }
.lf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Scoped under .cta-card so the dark-section rule `.cta p` (white, 16px) does
   not win: this line sits on the white form card and must read dark. */
.cta-card .lf-consent { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: var(--subtle); max-width: none; }
.cta-card .lf-consent a { color: var(--accent); text-decoration: underline; }
.lead-submit { background: var(--accent); color: #fff; border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 700; padding: 12px 20px; border-radius: 6px; cursor: pointer; transition: background .15s ease; }
.lead-submit:hover { background: var(--accent-2); }
.lead-submit:disabled { opacity: .6; cursor: default; }
.lead-result { font-size: 13.5px; font-weight: 600; padding: 10px 12px; border-radius: 6px; line-height: 1.45; }
.lead-result.ok { background: var(--panel); color: var(--navy); border: 1px solid var(--line); }
.lead-result.ok::before { content: "✓  "; font-weight: 800; }
.lead-result.err { background: #fdf3f3; color: #b42318; border: 1px solid #e6b8b8; }
/* Form confirmation state: replaces the form on a successful submit. */
.lead-done { text-align: center; padding: 24px 8px 18px; }
.lead-done-check { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 50%; background: #e4f4ea; color: #197a3d; }
.lead-done-check svg { width: 32px; height: 32px; }
.lead-done h3 { font-size: 23px; font-weight: 800; color: var(--navy); margin: 0 0 8px; }
.lead-done p { font-size: 15px; color: var(--muted); line-height: 1.6; margin: 0 auto; max-width: 42ch; }
.lead-done a { color: var(--accent); text-decoration: underline; }
.lead-done:focus { outline: none; }
@media (max-width: 560px) { .lf-row { grid-template-columns: 1fr; } }

/* Row of external link chips under a section's copy (e.g. schedule, eLibrary) */
.sec-links { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sec-linkchip { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--navy); border: 1px solid var(--border-strong); border-radius: 6px; padding: 9px 15px; text-decoration: none; background: #fff; }
.sec-linkchip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.has-media .sec-links { margin-top: 18px; }

/* Alternating text/image sections */
.sec-grid { display: grid; gap: 48px; align-items: center; }
.sec-grid.img-right { grid-template-columns: 1.05fr .95fr; }
.sec-grid.img-left { grid-template-columns: .95fr 1.05fr; }
.sec-copy { min-width: 0; }
.sec-media { margin: 0; min-width: 0; }
.sec-grid .lms-video { margin: 0; max-width: none; }
/* height: auto is load-bearing: the width/height ATTRIBUTES on these imgs
   otherwise apply as a UA height hint and stretch the box to full natural
   height; auto lets the 4/3 aspect-ratio crop govern, as designed. */
.sec-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; box-shadow: 0 16px 40px rgba(3, 62, 117, .16); display: block; }
.has-media .bullets { grid-template-columns: 1fr; max-width: none; }
.sec-tail { margin-top: 30px; }
@media (max-width: 820px) {
  .sec-grid.img-right, .sec-grid.img-left { display: flex; flex-direction: column; gap: 22px; grid-template-columns: none; }
  .sec-grid .sec-copy { order: 0; }
  .sec-grid .sec-media { order: 1; }
  .sec-media img { aspect-ratio: 16 / 10; }
}

/* Related practice-area cross-links */
.rel-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.rel-chip { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; font-size: 13.5px; font-weight: 600; color: var(--accent); background: #fff; }
.rel-chip:hover { border-color: var(--border-strong); background: #eef3fb; text-decoration: none; }

/* Pause control for the agency-seal marquee (WCAG 2.2.2) */
.proof-seals { position: relative; }
.seals-pause { position: absolute; right: 18px; bottom: 6px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; opacity: .75; }
.seals-pause:hover { opacity: 1; color: var(--navy); border-color: var(--border-strong); }
.seals-pause svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .seals-pause { display: none; } }