/* Brandale — global shell (site-wide)
   Ported verbatim from handoff/01-prototype/index.html (2026-08-10).
   The prototype is the specification: do not 'tidy' these rules — several
   encode contrast fixes and bug fixes recorded in the project log. */

/* The token block that used to sit here has been removed.
   tokens.css owns every value and is enqueued first; keeping a second copy here
   meant this file — which loads later — silently won, and a palette change in
   tokens.css did nothing. Do not reintroduce it. */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{font-family:'Inter',system-ui,sans-serif;color:var(--slate-600);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Inter Tight',sans-serif;color:var(--navy-900);line-height:1.18;letter-spacing:-.02em;font-weight:700;text-wrap:balance}
p,li,.lead,.hero-sub,.m-lead,.partner{text-wrap:pretty}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
@media(min-width:768px){.wrap{padding:0 32px}}
.mono{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
/* accent-800 (5.8:1), not accent-600 (3.26:1) — at 16px this is body-size text and must clear 4.5:1.
   This closes the accent-600 failure logged five times in SUMMARIES. */
.eyebrow{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:16px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-800)}
.eyebrow.on-dark{color:var(--brand-400)}
.sec{padding:64px 0}
@media(min-width:768px){.sec{padding:96px 0}}
@media(min-width:1024px){.sec{padding:128px 0}}
/* .sec-tight deleted 2026-08-10 — the stat band was its only consumer, on the only
   page that defined it. Checked all five pages before removing. */
/* seam — hairline between two adjacent same-background sections. Decorative separator,
   not a UI border, so 1.4.11's 3:1 doesn't apply; slate-300 for legibility over slate-200. */
.sec.seam{border-top:1px solid var(--slate-300)}
.center{text-align:center}
.lead{font-size:1.125rem;color:var(--slate-600);max-width:62ch}
.lead.center{margin:16px auto 0}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9375rem;border-radius:var(--r-btn);padding:13px 22px;border:1.5px solid transparent;cursor:pointer;transition:all .16s ease-out;line-height:1;white-space:nowrap}
.btn-primary{background:var(--accent-500);color:var(--navy-900)}
.btn-primary:hover{background:var(--accent-600);box-shadow:var(--sh-hover)}
.btn-secondary{background:transparent;color:var(--navy-800);border-color:var(--slate-300)}
.btn-secondary:hover{border-color:var(--navy-800)}
/* .40, not .28: white at 28% over navy composites to 2.5:1 and fails the 3:1
   minimum for a control boundary. At 40% it measures 3.75:1 on navy-800. */
.btn-ondark{background:transparent;color:var(--white);border-color:rgba(255,255,255,.40)}
.btn-ondark:hover{border-color:var(--brand-400);color:var(--brand-300)}
.btn-lg{padding:16px 28px;font-size:1rem}
.btn-sm{padding:10px 14px;font-size:.84rem}
.btn.block{width:100%;justify-content:center}
.btn svg{width:18px;height:18px}
/* navy text on the success green: white on --success is only 2.76:1. */
.btn.added{background:var(--success);color:var(--navy-900);border-color:var(--success)}
/* Glossary / explainer popover — ported from the CCIS page.
   WCAG 2.2 §1.4.13: focusable trigger, hoverable content, Esc-dismissible. */
.gloss{position:relative;display:inline;font:inherit;color:inherit;background:none;border:none;padding:0;cursor:help;border-bottom:1px dotted currentColor;font-weight:inherit;text-align:left}
.gloss:hover{border-bottom-style:solid}
.gloss .pop{position:absolute;left:0;bottom:calc(100% + 10px);width:min(300px,78vw);background:var(--navy-900);color:#D7E0EC;border:1px solid var(--navy-700);border-radius:var(--r-card);padding:14px 16px;font-size:.84rem;font-weight:400;line-height:1.55;text-align:left;text-transform:none;letter-spacing:0;box-shadow:0 12px 30px rgba(7,19,36,.28);opacity:0;visibility:hidden;transition:opacity .16s ease-out,transform .16s ease-out;transform:translateY(4px);z-index:40;white-space:normal}
.gloss .pop b{display:block;color:var(--brand-300);font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;font-weight:500}
.gloss:hover .pop,.gloss:focus-visible .pop,.gloss[aria-expanded="true"] .pop{opacity:1;visibility:visible;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.gloss .pop{transition:none;transform:none}}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--slate-300);color:var(--slate-500);background:var(--white)}
.tag.brand{color:var(--brand-700);border-color:var(--brand-300);background:var(--brand-100)}
.tag.teal{color:var(--accent-800);border-color:var(--accent-100);background:var(--accent-100)}
/* A checkbox and its label, the label wrapping under itself rather than under
   the box. Used by sign-in, create-account and settings. */
.check-row{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:var(--slate-600)}
.check-row input[type=checkbox]{width:18px;height:18px;margin-top:2px;accent-color:var(--accent-800);flex-shrink:0}
.tag.soon{color:var(--slate-500);border-color:var(--slate-300);background:var(--paper-50)}

/* ---------- ANNOUNCEMENT BAR ---------- */
/* Above the sticky nav, so it scrolls away rather than taking a strip of every
   screen. Brand purple with a teal pill: it is the one thing on the page louder
   than the hero, which is the point for as long as the news is new. */
.anno{background:linear-gradient(90deg,var(--brand-700) 0%,var(--brand-600) 55%,var(--brand-500) 100%);color:#fff}
.anno-row{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:56px;padding-top:12px;padding-bottom:12px;color:inherit;text-align:center}
.anno-link{display:flex;align-items:center;justify-content:center;gap:10px 18px;flex-wrap:wrap;
  text-decoration:none;color:inherit;padding-right:34px}
/* The way out. Quiet until you go near it - it is not the point of the bar. */
.anno-x{position:absolute;right:0;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  padding:0;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.72);cursor:pointer;
  transition:background .16s ease-out,color .16s ease-out}
.anno-x svg{width:15px;height:15px}
.anno-x:hover{background:rgba(255,255,255,.16);color:#fff}
.anno-x:focus-visible{outline:2px solid var(--accent-500);outline-offset:2px}
.anno-flag{display:inline-flex;align-items:center;gap:7px;flex:none;
  font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-500)}
.anno-flag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent-500);
  box-shadow:0 0 0 0 rgba(42,250,217,.65);animation:anno-pulse 2.4s ease-out infinite}
@keyframes anno-pulse{
  0%{box-shadow:0 0 0 0 rgba(42,250,217,.6)}
  70%{box-shadow:0 0 0 7px rgba(42,250,217,0)}
  100%{box-shadow:0 0 0 0 rgba(42,250,217,0)}
}
.anno-lead{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:1rem;line-height:1.3;letter-spacing:-.012em;color:#fff}
.anno-cta{display:inline-flex;align-items:center;gap:7px;flex:none;
  padding:7px 14px;border-radius:999px;background:var(--accent-500);color:var(--navy-900);
  font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  transition:background .16s ease-out,transform .16s ease-out}
.anno-cta svg{width:14px;height:14px;transition:transform .16s ease-out}
.anno-link:hover .anno-cta{background:#fff}
.anno-link:hover .anno-cta svg,.anno-link:focus-visible .anno-cta svg{transform:translateX(3px)}
.anno-link:focus-visible{outline:2px solid var(--accent-500);outline-offset:-3px;border-radius:6px}
@media(max-width:760px){
  .anno-lead{font-size:.92rem}
  .anno-row{gap:8px 12px}
}
@media(max-width:560px){
  .anno-link{flex-direction:column;gap:7px;padding-right:0}
  .anno-row{padding-top:11px;padding-bottom:11px}
  .anno-x{top:8px;transform:none;right:-6px}
  .anno-lead{font-size:.88rem}
  .anno-flag{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .anno-cta svg{transition:none}
  .anno-flag::before{animation:none}
}

/* ---------- NAV ---------- */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--slate-200)}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
/* The official lockup, sized by height: the file is 1500x248, so the width
   follows from the ratio and the markup carries the intrinsic size to keep the
   space reserved while it loads. */
/* The element beside the wordmark. 38px so it reads as the logo rather than as
   a favicon, which is where it started. */
.brand img{width:38px;height:38px}
.brand .name{font-family:'Inter Tight';font-weight:700;font-size:1.02rem;color:var(--navy-900);letter-spacing:-.01em;line-height:1.05;white-space:nowrap}
.brand .sub{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-500)}
.nav-links{display:none;gap:26px;align-items:center;flex:0 1 auto;min-width:0}
@media(min-width:1240px){.nav-links{display:flex}}
.nav-links a{font-size:.9rem;font-weight:500;color:var(--navy-800);display:inline-flex;align-items:center;gap:5px;padding:8px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav-links a:hover{color:var(--accent-800)}
.nav-links .car{width:14px;height:14px;color:var(--slate-500);flex-shrink:0}
.nav-right{display:flex;align-items:center;gap:14px;flex-shrink:0;white-space:nowrap}
.nav-util{display:none;align-items:center;gap:16px;flex-shrink:0}
@media(min-width:1240px){.nav-util{display:flex}}
.nav-util a{font-size:.9rem;font-weight:500;color:var(--navy-800);white-space:nowrap}
.nav-util a:hover{color:var(--accent-800)}
.icon-btn{display:inline-flex;color:var(--slate-600);position:relative;flex-shrink:0}
.icon-btn svg{width:19px;height:19px}
.cart-count{position:absolute;top:-6px;right:-8px;min-width:16px;height:16px;border-radius:var(--r-pill);background:var(--accent-500);color:var(--navy-900);font-family:'IBM Plex Mono',monospace;font-size:9.5px;font-weight:500;display:none;align-items:center;justify-content:center;padding:0 4px}
.cart-count.show{display:flex}
/* ---------- MEGA MENU ---------- */
/* Two of the four nav items have children. Both open the same panel component.
   CLICK TO OPEN, not hover (2026-08-10). The trigger is therefore a <button>,
   not a link: it toggles a panel, it does not go anywhere, and a control that
   does one thing should not be marked up as the other. The section landing
   pages are still one click away from inside each panel.
   ONE state, driven by JS: [data-open] on .has-mega. Click, Escape and
   outside-click all set that one attribute, so there is no CSS :hover state
   racing a JS state — the failure mode where a panel sticks open after a click.
   The panel is a child of .nav-row (the only positioned ancestor), so left:0/
   right:0 spans the header's content column at every width, and the panel can
   never be clipped by .nav-links' own box.
   Below 1240px .nav-links is display:none, so none of this renders — see the
   open item in SUMMARIES about there being no mobile nav yet. */
/* NOT .nav-row. The panel is full-bleed (2026-08-10), so its containing block
   has to be the header itself — which is already position:sticky, therefore
   already positioned — and not the 1440-capped .wrap inside it. left:0/right:0
   then resolves to the viewport edges with no 100vw and no transform trick,
   and so cannot produce the horizontal scrollbar that 100vw does whenever a
   vertical scrollbar is present. */
.has-mega{position:static;display:inline-flex}
.nav-links .mega-trigger{font-size:.9rem;font-weight:500;line-height:1.6;color:var(--navy-800);display:inline-flex;align-items:center;gap:5px;padding:8px 0;border-bottom:2px solid transparent;white-space:nowrap;background:none;border-left:0;border-right:0;border-top:0;cursor:pointer;font-family:'Inter',sans-serif;text-align:left}
.nav-links .mega-trigger:hover,.has-mega[data-open] > .mega-trigger{color:var(--accent-800)}
.has-mega[data-open] > .mega-trigger{border-bottom-color:var(--accent-800)}
.mega-trigger .car{transition:transform .16s ease-out}
.has-mega[data-open] .mega-trigger .car{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.mega-trigger .car{transition:none}}

/* Full-bleed surface, contained content. The white spans the screen; the grid
   inside stays on the same 1400px column as the logo and the header CTA, so the
   first heading lines up with the wordmark above it. Padding is 20px — the same
   as .wrap — which makes inner width equal the header's content width exactly
   at every viewport up to 1440, and equal 1400 centred above it.
   No side borders and no radius: a band that runs off both edges has no corners
   to round, and a 1px line at the screen edge reads as a rendering fault. */
.mega{position:absolute;top:calc(100% + 1px);left:0;right:0;z-index:60;background:var(--white);border-bottom:1px solid var(--slate-200);box-shadow:var(--sh-hover);padding:32px 20px 30px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease-out,transform .16s ease-out,visibility 0s linear .16s}
.has-mega[data-open] .mega{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .16s ease-out,transform .16s ease-out,visibility 0s}
@media(prefers-reduced-motion:reduce){.mega{transition:none;transform:none}.has-mega[data-open] .mega{transition:none;transform:none}}

.mega-grid{display:grid;gap:0 34px;align-items:start;max-width:1400px;margin:0 auto}
.mega-certs .mega-grid{grid-template-columns:minmax(230px,290px) 1fr 1fr 1fr}
.mega-res .mega-grid{grid-template-columns:minmax(230px,290px) 1fr 1fr}
/* Rules sit between the link columns only. The intro card is a different kind of
   thing and is separated by space, not by a line — same as the reference. */
.mega-col + .mega-col{border-left:1px solid var(--slate-200);padding-left:34px}

/* The intro card. --brand-50 because purple is the non-interactive accent (§5.1):
   it can tint a whole aside without competing with the teal CTA in the header. */
.mega-card{background:var(--brand-50);border:1px solid var(--brand-200);border-radius:var(--r-card);padding:24px 22px}
.mega-card h3{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:1.0625rem;line-height:1.25;letter-spacing:-.02em;color:var(--navy-900);margin:0 0 12px}
.mega-card p{font-size:.9rem;line-height:1.55;color:var(--slate-600);margin:0 0 20px}
/* .btn-secondary's --slate-300 border measures 1.39:1 and fails 1.4.11 for a
   control boundary. Inside the menu the border is navy — 13.9:1 — and the fill
   is white so it reads as a control against the purple tint. */
.mega-card .btn-secondary{background:var(--white);border-color:var(--navy-800)}
.mega-card .btn-secondary:hover{background:var(--navy-800);color:var(--white)}

/* Column thumbnails — Resources Library only. 128px square, 256px source for
   2x. Both are decorative: they sit directly above a heading that already says
   what the column is, so alt="" / aria-hidden is correct and a description
   would only make a screen reader read the same thing twice.
   The images live inside a visibility:hidden panel until the menu is opened,
   which is what makes loading="lazy" worth having here — a closed menu costs
   nothing. */
.mega-thumb{width:230px;height:230px;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--slate-200);background:var(--paper-100)}
.mega-thumb img,.mega-thumb svg{display:block;width:100%;height:100%;object-fit:cover}
/* Thumbnail on the RIGHT of its column (2026-08-10). Grid rather than flex so
   the image can span both rows and sit top-aligned with the heading without a
   wrapper element around the text. Source order stays thumb-first; both
   thumbs are hidden from assistive tech, so the visual reorder costs nothing.
   The room exists because the Resources panel is only three grid columns
   wide — each link column is ~470px at 1440 and ~418px at 1240. At 230px, with the
   gutter tightened to 12px, the image leaves ~228px of text measure, and
   ~221px at the tighter breakpoint where it drops to 187px on a 10px gutter.
   The widest string in the panel is the heading "Community and events" at
   ~177px, not one of the links — it sets on one line inside both. */
.mega-res .mega-col{display:grid;grid-template-columns:minmax(0,1fr) 230px;column-gap:12px;align-items:start}
.mega-res .mega-col .mega-thumb{grid-column:2;grid-row:1 / span 2}
.mega-res .mega-col h3{grid-column:1;grid-row:1}
.mega-res .mega-col .mega-list{grid-column:1;grid-row:2}
.mega-col h3{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:1.0625rem;line-height:1.25;letter-spacing:-.02em;color:var(--navy-900);margin:0 0 14px}
.mega-list{display:block}
.nav-links .mega-list a{display:block;padding:9px 0;border-bottom:0;font-size:.9375rem;font-weight:500;line-height:1.35;color:var(--navy-800);white-space:normal}
.nav-links .mega-list a .sub{display:block;font-size:.8125rem;font-weight:400;color:var(--slate-600);margin-top:3px}
.nav-links .mega-list a:hover{color:var(--accent-800)}
.nav-links .mega-list a:hover .sub{color:var(--accent-800)}
.nav-links .mega-list a:focus-visible{outline:2px solid var(--accent-500);outline-offset:2px;border-radius:4px}
.mega-viewall{margin-top:13px;padding-top:13px;border-top:1px solid var(--slate-200)}
.nav-links .mega-viewall a{display:inline-flex;align-items:center;gap:7px;padding:2px 0;border-bottom:0;font-size:.9375rem;font-weight:500;color:var(--accent-800)}
.nav-links .mega-viewall a:hover{text-decoration:underline}
.mega-viewall a svg{width:16px;height:16px;transition:transform .16s ease-out}
.nav-links .mega-viewall a:hover svg{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.mega-viewall a svg{transition:none}.nav-links .mega-viewall a:hover svg{transform:none}}
/* Between 1240 and ~1330 the four-column certifications panel gets tight before
   anything else does. Dropping the intro card's minimum is enough; the columns
   themselves never carry more than three words per line. */
@media(min-width:1240px) and (max-width:1360px){
  .mega{padding:28px 20px 26px}
  .mega-grid{gap:0 24px}
  .mega-certs .mega-grid{grid-template-columns:minmax(200px,240px) 1fr 1fr 1fr}
  .mega-col + .mega-col{padding-left:24px}
  .mega-thumb{width:187px;height:187px}
  .mega-res .mega-col{grid-template-columns:minmax(0,1fr) 187px;column-gap:10px}
}
/* --- Single-line nav ---------------------------------------------------
   The full-size nav has an intrinsic width of ~1290px, but .wrap caps
   content at 1280-64=1216px, so at every viewport it wrapped to 2-3 lines.
   Two fixes: (1) the header gets its own wider max-width so it can use the
   screen it actually has; (2) gaps, label size and the CTA padding scale
   fluidly between the 1240px breakpoint and 1440px instead of being fixed.
   Nothing inside the bar is allowed to wrap (white-space:nowrap above). */
header.nav .wrap{max-width:1440px}
@media(min-width:1240px){
  .nav-row{gap:clamp(14px,1.5vw,24px)}
  .brand .name{font-size:clamp(.88rem,1vw,1.02rem)}
  .nav-links{gap:clamp(15px,1.6vw,26px)}
  .nav-links a{font-size:clamp(.8rem,.95vw,.9rem)}
  .nav-right{gap:clamp(10px,1vw,14px)}
  .nav-util{gap:clamp(11px,1.1vw,16px)}
  .nav-util a{font-size:clamp(.8rem,.95vw,.9rem)}
  .nav-row .btn{padding:clamp(11px,1.1vw,13px) clamp(14px,1.5vw,22px);font-size:clamp(.85rem,.95vw,.9375rem)}
}

/* The nav row is brand + util + cart + CTA, which does not fit 375px. This is the fix
   already proven on the course page: the header CTA goes below 700px. Nothing is lost —
   the same action is repeated in the hero on every page that carries it. */
@media(max-width:700px){.nav-right > .btn-primary{display:none}}

/* ---------- SECTION HEADS ---------- */
.head{max-width:64ch}
.head.center{margin:0 auto}
.head h2{font-size:1.875rem;margin-top:12px}
@media(min-width:768px){.head h2{font-size:2.375rem}}
.head p{margin-top:14px;color:var(--slate-600);font-size:1.0625rem}

/* ---------- FINAL CTA ---------- */
.final{position:relative;background:var(--navy-900);color:var(--white);overflow:hidden;text-align:center}
.final .wrap{position:relative;z-index:1}
.final h2{color:var(--white);font-size:2rem}
@media(min-width:768px){.final h2{font-size:2.6rem}}
.final p{color:#B9C4D4;font-size:1.1rem;margin:18px auto 0;max-width:56ch}
.final-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px}

/* The mesh is decoration and belongs behind the band, not above it.
   Every other container that carries it pins it the same way - .cc-hero,
   .libhead, .ctop, .fy-head, .dash-head, .card-viz - and .final was the one
   that got missed. Left in the flow it is a 150px inline element sitting
   between the section's top padding and its content, so the closing band on a
   course page opened with 261px of empty navy above the eyebrow and closed
   with 104px below it: lopsided, and a 696px section wrapped around 331px of
   content. */
.final > .nodegrid{position:absolute;inset:0;z-index:0;pointer-events:none}

/* And the band itself is a heading, a line, two buttons and the accreditation
   strip. It does not need a full .sec's worth of air at both ends to say so. */
.sec.final{padding:72px 0}
@media(max-width:700px){.sec.final{padding:48px 0}}
/* ---------- FOOTER ---------- */
footer{background:var(--navy-900);color:#9FB0C4;border-top:1px solid var(--navy-700);padding:64px 0 34px}
.f-grid{display:grid;gap:36px;grid-template-columns:1.4fr repeat(2,1fr);}
@media(max-width:768px){.f-grid{grid-template-columns:1fr 1fr}}
/* The mark, beside the name, as in the header. */
.f-logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.f-logo img{flex:none;width:36px;height:36px}
.f-logo > span{display:flex;flex-direction:column}
.f-brand .name{font-family:'Inter Tight';font-weight:700;color:var(--white);font-size:1.05rem}
.f-brand .sub{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-500);margin-top:4px}
.f-brand p{font-size:.9rem;margin-top:16px;max-width:34ch}
.f-col h5{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-400);margin-bottom:16px;font-weight:500}
.f-col a{display:block;font-size:.9rem;color:#B9C4D4;padding:6px 0}
.f-col a:hover{color:var(--accent-500)}
.f-proto{color:var(--slate-500);text-decoration:underline;text-decoration-color:var(--navy-600);text-underline-offset:3px}
.f-proto:hover{color:var(--brand-300);text-decoration-color:var(--brand-400)}
.f-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:48px;padding-top:24px;border-top:1px solid var(--navy-700);font-size:.82rem;color:var(--slate-500)}
.f-accred{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.05em;color:var(--slate-500)}
.note{background:#FFF7ED;border:1px dashed #F79009;color:#7a4d10;font-size:.8rem;padding:8px 14px;text-align:center;font-family:'IBM Plex Mono',monospace;letter-spacing:.03em}

/* ---------- ASK-A-QUESTION FAB + POPOVER ---------- */
.fab{position:fixed;bottom:24px;right:24px;z-index:60;display:inline-flex;align-items:center;gap:9px;background:var(--accent-500);color:var(--navy-900);font-family:'Inter',sans-serif;font-weight:600;font-size:.9375rem;border:none;border-radius:var(--r-pill);padding:14px 20px;cursor:pointer;box-shadow:0 8px 24px rgba(7,19,36,.18);transition:all .16s ease-out}
.fab:hover{background:var(--accent-600);transform:translateY(-2px);box-shadow:0 12px 28px rgba(7,19,36,.22)}
.fab:focus-visible{outline:2px solid var(--accent-500);outline-offset:3px}
.fab svg{width:20px;height:20px}
@media(max-width:520px){.fab{padding:14px}.fab .fab-txt{display:none}}
.ask-overlay{position:fixed;inset:0;z-index:59;background:rgba(7,19,36,.4);opacity:0;visibility:hidden;transition:opacity .18s ease-out}
.ask-overlay.open{opacity:1;visibility:visible}
.ask-panel{position:fixed;bottom:92px;right:24px;z-index:61;width:380px;max-width:calc(100vw - 32px);max-height:calc(100vh - 116px);max-height:calc(100dvh - 116px);display:flex;flex-direction:column;background:var(--white);border:1px solid var(--slate-200);border-radius:var(--r-panel);box-shadow:0 20px 48px rgba(7,19,36,.24);opacity:0;visibility:hidden;transform:translateY(12px) scale(.98);transform-origin:bottom right;transition:opacity .18s ease-out,transform .18s ease-out;overflow:hidden}
.ask-panel.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
@media(max-width:520px){.ask-panel{right:16px;left:16px;bottom:88px;width:auto;max-width:none;max-height:calc(100vh - 104px);max-height:calc(100dvh - 104px)}}
.ask-head{background:var(--navy-800);color:var(--white);padding:20px 22px;position:relative;flex:0 0 auto}
.ask-head h3{color:var(--white);font-size:1.15rem;margin-bottom:4px}
.ask-head p{font-size:.85rem;color:#B9C4D4;max-width:30ch}
.ask-close{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.08);border:none;color:#CBD6E6;width:30px;height:30px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .16s}
.ask-close:hover{background:rgba(255,255,255,.16);color:#fff}
.ask-close svg{width:16px;height:16px}
.ask-body{padding:22px;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ask-field{margin-bottom:16px}
.ask-field label{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-500);margin-bottom:7px}
.ask-field input,.ask-field textarea{width:100%;font-family:'Inter',sans-serif;font-size:.95rem;color:var(--navy-900);border:1.5px solid var(--slate-300);border-radius:var(--r-btn);padding:11px 13px;background:var(--white);transition:border-color .16s,box-shadow .16s}
.ask-field textarea{resize:vertical;min-height:88px}
.ask-field input:focus,.ask-field textarea:focus{outline:none;border-color:var(--accent-500);box-shadow:0 0 0 3px var(--accent-100)}
.ask-field input::placeholder,.ask-field textarea::placeholder{color:var(--slate-500)}
.ask-field select{width:100%;font-family:'Inter',sans-serif;font-size:.95rem;color:var(--navy-900);border:1.5px solid var(--slate-300);border-radius:var(--r-btn);padding:11px 13px;background-color:var(--white);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A90' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;transition:border-color .16s,box-shadow .16s}
.ask-field select:focus{outline:none;border-color:var(--accent-500);box-shadow:0 0 0 3px var(--accent-100)}
.ask-field select:required:invalid{color:var(--slate-500)}
.seg{display:flex;gap:8px}
.seg button{flex:1;font-family:'Inter',sans-serif;font-size:.9rem;font-weight:500;color:var(--slate-600);background:var(--paper-50);border:1.5px solid var(--slate-300);border-radius:var(--r-btn);padding:11px;cursor:pointer;transition:all .16s}
.seg button[aria-pressed="true"]{color:var(--navy-900);border-color:var(--accent-500);background:var(--accent-100)}
.seg button:focus-visible{outline:2px solid var(--accent-500);outline-offset:2px}
.ask-submit{width:100%;justify-content:center;margin-top:2px}
.ask-note{font-size:.78rem;color:var(--slate-500);text-align:center;margin-top:12px}
.ask-success{padding:36px 24px;text-align:center;display:none;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.ask-success.show{display:block}
.ask-success .tick{width:52px;height:52px;border-radius:50%;background:var(--accent-100);color:var(--accent-800);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.ask-success .tick svg{width:26px;height:26px}
.ask-success h3{font-size:1.2rem;margin-bottom:8px}
.ask-success p{font-size:.92rem;color:var(--slate-600);max-width:36ch;margin:0 auto 20px}
@media(prefers-reduced-motion:reduce){.fab,.ask-panel,.ask-overlay{transition:opacity .01s linear}.ask-panel{transform:none}.fab:hover{transform:none}}

/* ---------- PORT ADDITIONS ----------
   These three rules exist on the prototype's course page but not its homepage.
   The handoff requires all three site-wide, so they are promoted here rather
   than duplicated per template. */

/* Skip link. Required by WCAG 2.2 AA and by the handoff's a11y list. Off-screen
   until focused, then teal-on-navy at the top-left. */
.skip{position:absolute;left:-9999px;top:0;background:var(--accent-500);color:var(--navy-900);padding:12px 18px;font-weight:600;z-index:100}
.skip:focus{left:12px;top:12px}

/* An author `display:` declaration beats the UA's [hidden]{display:none} rule.
   That shipped once as every "Recommended" badge rendering permanently, so the
   !important is deliberate — do not "clean it up". */
[hidden]{display:none!important}

/* Anchors must clear the 72px sticky header, or every deep link lands with its
   heading hidden behind the nav. */
section[id],header[id],article[id]{scroll-margin-top:96px}


/* ==========================================================================
   LEGAL DOCUMENTS
   One column, one measure, nothing else. These are read closely or searched
   with ctrl-F, so the type is set for reading rather than for scanning.
   ========================================================================== */
.lg-head .lg-updated{margin-top:14px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-500)}
.lg-body{padding-top:48px;padding-bottom:64px}
.lg-prose{max-width:72ch;color:var(--slate-600);font-size:1rem;line-height:1.75}
.lg-prose > *:first-child{margin-top:0}
.lg-prose h2{margin:38px 0 12px;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:1.28rem;
  line-height:1.25;letter-spacing:-.02em;color:var(--navy-900)}
.lg-prose h3{margin:28px 0 10px;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:1.05rem;
  line-height:1.3;color:var(--navy-900)}
.lg-prose h4{margin:22px 0 8px;font-weight:700;font-size:.98rem;color:var(--navy-900)}
.lg-prose p{margin:0 0 15px}
.lg-prose b,.lg-prose strong{color:var(--navy-900);font-weight:600}
.lg-prose ul,.lg-prose ol{margin:0 0 16px;padding-left:22px}
.lg-prose li{margin-bottom:8px}
.lg-prose a{color:var(--brand-600);text-decoration:underline;text-underline-offset:2px}
.lg-prose a:hover{color:var(--brand-700)}
.lg-prose table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:.92rem}
.lg-prose th,.lg-prose td{border:1px solid var(--slate-200);padding:9px 11px;text-align:left;vertical-align:top}
.lg-prose th{background:var(--paper-50);color:var(--navy-900);font-weight:600}
.lg-more{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin-top:44px;padding-top:22px;
  border-top:1px solid var(--slate-200);max-width:72ch}
.lg-more .mono{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-500)}
.lg-more a{font-size:.9rem;color:var(--brand-600);text-decoration:none}
.lg-more a:hover{text-decoration:underline}

/* The legal row in the footer: present, findable, and deliberately quiet. */
.f-legal{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px}
.f-legal a{font-size:.78rem;color:var(--slate-500);text-decoration:none}
.f-legal a:hover{color:var(--slate-300);text-decoration:underline}