/* Kestrel Exams (.com) — shared marketing stylesheet (navy/gold, per-exam accent) */

:root{
  --navy:#27466B; --navy-2:#33567F; --navy-deep:#1E3550; --gold:#DCA845; --gold-hover:#E5B55C;
  --ink:#2A3441; --muted:#6B7686; --line:#E3E8EF; --bg:#ffffff; --bg-soft:#F7F6F1; --line-warm:#EAE6DA;
  --good:#1E8E5A; --exam:#8C1630; /* per-exam accent (default: CS-family crimson) */
  --wrap:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;color:var(--ink);background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--navy);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
h1,h2,h3{line-height:1.18;letter-spacing:-.01em;color:var(--navy)}
img{max-width:100%}

/* Header */
header.site{position:sticky;top:0;z-index:50;background:var(--navy);color:#fff;border-bottom:3px solid var(--gold)}
.bar{display:flex;align-items:center;gap:14px;padding:12px 22px;max-width:var(--wrap);margin:0 auto}
.bar a.brandlink{display:flex;align-items:center;gap:12px}
.bar a.brandlink:hover{text-decoration:none}
/* DARK-BACKGROUND LOCKUP. The primary emblem is navy-and-gold on transparent,
   so on the navy header its dark wing and its ring simply disappear — the mark
   reads as half a bird. The fix is a reversed lockup (navy tones lifted to
   cream, gold untouched), which is what a brand system ships alongside its
   primary mark. Boxing the original in a white chip was the other option and
   was rejected: it hides the problem behind a container instead of solving it.
   Swapped via content:url() so one rule covers every navy-header page without
   editing the <img src> in eleven files. Browsers that ignore content on a
   replaced element fall back to the original emblem — degraded, never broken.
   Guides keep the primary mark: their header is white, where it reads fine. */
.bar img.mk{height:40px;width:auto;display:block;content:url("/assets/emblem-reverse.png")}
.brand{display:flex;flex-direction:column;line-height:1}
.brand .b1{font-weight:800;font-size:19px;letter-spacing:.02em;color:#fff}
.brand .b2{font-weight:700;font-size:11px;letter-spacing:.26em;color:var(--gold)}
.nav{margin-left:auto;display:flex;align-items:center;gap:18px;font-weight:600;font-size:14.5px}
.nav a{color:#dbe2ec}
.nav a:hover{color:#fff;text-decoration:none}
.nav a.cta{background:var(--gold);color:#2A3441;padding:8px 14px;border-radius:9px}
.nav a.cta:hover{background:var(--gold-hover);color:#2A3441}
.menu-btn{display:none;margin-left:auto;width:38px;height:38px;border-radius:9px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;cursor:pointer;align-items:center;justify-content:center;padding:0}
.menu-btn svg{width:20px;height:20px}
@media(max-width:760px){
  .nav a.hidem{display:none} /* no-JS fallback: compact nav */
  .bar{position:relative}
  .bar{gap:10px;padding:10px 14px}
  /* Mark only on phones. The wordmark repeats what the mark already says, and the
     bar has to fit search, the CTA and the menu button beside it. The brandlink
     keeps its accessible name from the image's alt text, so nothing is lost. */
  .brand{display:none}
  .brand .b1,.brand .b2{white-space:nowrap}
  .nav a.cta{font-size:13.5px;padding:8px 12px;white-space:nowrap}
  .js .menu-btn{display:inline-flex;margin-left:auto;order:4}
  .js .bar.hdr-enhanced > .menu-btn{margin-left:8px}
  /* site.js lifts the CTA out of .nav and drops it in the bar, so opening the menu
     no longer takes the primary action off screen with it. Selectors are class-based
     rather than the old `.menu-btn + .nav` adjacency, which the new order breaks. */
  .js .bar > .nav{margin-left:0;position:absolute;top:100%;left:0;right:0;background:var(--navy);flex-direction:column;align-items:stretch;gap:2px;padding:8px 14px 14px;display:none;border-top:1px solid rgba(255,255,255,.12);box-shadow:0 14px 26px rgba(15,28,46,.28);z-index:49}
  .js .bar > .nav.open{display:flex}
  .js .bar > .nav a{display:block;padding:11px 10px;border-radius:8px}
  .js .bar > .nav a:hover{background:rgba(255,255,255,.08)}
  .js .bar > .nav a.cta{margin-top:6px;text-align:center;padding:11px 10px}
  /* Bar order on phones: logo · search · CTA · menu. */
  .js .bar > .brandlink{order:0}
  .js .bar > .hdr-search{order:1;margin-left:auto}
  .js .bar > .cta{order:3;margin-left:8px;font-size:13.5px;padding:9px 13px;white-space:nowrap}
  .js .bar > .hdr-share{display:none} /* lives in the menu on phones — no room in the bar */
}
@media(max-width:430px){
  .bar img.mk{height:34px}
  .brand .b1{font-size:15px}
  .brand .b2{font-size:9px;letter-spacing:.12em}
  .js .menu-btn + .nav a.cta{white-space:nowrap}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:16px;padding:13px 24px;border-radius:10px;border:1.5px solid transparent;cursor:pointer}
.btn-gold{background:var(--gold);color:#2A3441}
.btn-gold:hover{background:var(--gold-hover);text-decoration:none}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{border-color:#fff;text-decoration:none}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2);text-decoration:none}
.btn-outline{border-color:var(--line);color:var(--navy);background:#fff}
.btn-outline:hover{border-color:var(--navy);text-decoration:none}

/* Hero */
.hero{background:radial-gradient(900px 480px at 88% -12%,rgba(220,168,69,.16),transparent 60%),linear-gradient(180deg,#27466B 0%,#33567F 100%);color:#fff;padding:clamp(48px,8vw,70px) 0 clamp(54px,8vw,78px)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.hero h1{color:#fff;font-size:clamp(32px,5vw,50px);margin:0 0 16px}
.hero h1 em{color:var(--gold);font-style:normal}
.hero p.lead{font-size:clamp(17px,2.2vw,20px);color:#d7deea;margin:0 0 26px;max-width:560px}
.cta-row{display:flex;flex-wrap:wrap;gap:13px}
.trustline{margin-top:18px;font-size:13.5px;color:#aebbcd;display:flex;gap:18px;flex-wrap:wrap}
.trustline span{display:inline-flex;align-items:center;gap:6px}
.trustline b{color:var(--gold);font-weight:800}
/* phone mock */
.phone{width:270px;justify-self:center;border-radius:30px;background:#16293F;padding:12px;box-shadow:0 24px 48px rgba(15,28,46,.35)}
.phone .screen{background:var(--bg-soft);border-radius:22px;overflow:hidden;padding:16px 14px}
.ph-top{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ph-chip{background:#F8ECEE;color:#8E3344;font-size:10px;font-weight:700;padding:4px 9px;border-radius:999px}
.ph-prog{height:5px;flex:1;background:#e7e9ee;border-radius:999px;overflow:hidden}
.ph-prog i{display:block;height:100%;width:46%;background:var(--exam)}
.ph-q{font-size:13px;color:var(--ink);font-weight:600;margin-bottom:12px}
.ph-opt{display:flex;gap:9px;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px;font-size:12px;color:var(--muted)}
.ph-opt .k{width:20px;height:20px;border-radius:6px;background:#eef0f3;color:var(--muted);display:grid;place-items:center;font-size:11px;font-weight:700}
.ph-opt.ok{border-color:var(--good);background:#EAF5EF;color:#1B5E3F}
.ph-opt.ok .k{background:var(--good);color:#fff}
/* hero logo video (replaces product mock) */
.hero-video{justify-self:center;width:100%;max-width:440px;border-radius:16px;overflow:hidden;line-height:0;background:var(--navy-deep);border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 48px rgba(15,28,46,.4)}
.hero-video video{width:100%;height:auto;display:block}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr}.phone{display:none}.hero-video{max-width:360px}}
@media(prefers-reduced-motion:reduce){.hero-video video{display:none}.hero-video{background:var(--navy-deep) url(/assets/video/kestrel-logo-poster.jpg) center/cover no-repeat;aspect-ratio:16/9}}

/* Sections */
section{padding:clamp(44px,7vw,62px) 0}
@media(max-width:560px){.wrap{padding:0 16px}}
section.soft{background:var(--bg-soft);border-top:1px solid var(--line-warm);border-bottom:1px solid var(--line-warm)}
.kicker{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.sec-head{max-width:680px;margin-bottom:34px}
h2.section-title{font-size:clamp(24px,3.4vw,34px);margin:0 0 10px}
.sec-head p{font-size:17px;color:var(--muted);margin:0}
.lead-muted{font-size:19px;color:var(--muted);max-width:760px}

/* Exam suite grid */
.exam-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.exam-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-top:3px solid var(--exam);border-radius:14px;padding:22px 20px;box-shadow:0 1px 3px rgba(30,50,80,.05);
  transition:transform .15s,border-color .15s,box-shadow .15s}
a.exam-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(30,50,80,.10);text-decoration:none}
.exam-card .tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;margin-bottom:12px}
.exam-card .tag.live{background:color-mix(in srgb,var(--exam) 12%,#fff);color:var(--exam)}
.exam-card .tag.soon{background:#eef1f6;color:#8a94a4}
/* Dual status badges (2026-08-14). A live app can also be actively growing: the pair
   "Available now · In progress" keeps the usable-today signal while being honest that
   the bank is still being written. Gold is deliberate — it is the shared Kestrel accent,
   so it reads as a Kestrel state rather than as any one subject's color.
   The second badge is intentionally subordinate — no pill, sentence case — both because
   availability is the more important signal and because two full pills do not fit on one
   line inside a card (204px of inner width against 242px of badges). */
.exam-card .tags{display:flex;flex-wrap:wrap;gap:6px;align-self:flex-start;margin-bottom:12px}
.exam-card .tags .tag{margin-bottom:0}
.exam-card .tag.progress{background:none;color:#8A6A22;padding:4px 0;
  text-transform:none;letter-spacing:normal;font-size:11.5px;font-weight:650;
  display:inline-flex;align-items:center;gap:6px}
.exam-card .tag.progress::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);
  animation:tagPulse 2.6s ease-out infinite}
@keyframes tagPulse{
  0%{box-shadow:0 0 0 0 rgba(220,168,69,.55)}
  70%{box-shadow:0 0 0 7px rgba(220,168,69,0)}
  100%{box-shadow:0 0 0 0 rgba(220,168,69,0)}}
@media (prefers-reduced-motion: reduce){.exam-card .tag.progress::before{animation:none}}

.exam-card h3{margin:0 0 6px;font-size:20px}
.exam-card p{margin:0;color:var(--muted);font-size:14.5px}
.exam-card .go{margin-top:14px;font-weight:700;font-size:14px;color:var(--exam)}
.exam-card-live:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(30,50,80,.10)}
.exam-card-main{display:block;color:inherit;text-decoration:none}
.exam-card-main:hover{text-decoration:none}
.exam-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px}
.exam-card-bottom .go{margin-top:0}
.exam-share{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:112px;padding:8px 11px;border:1.5px solid var(--exam);border-radius:8px;background:#fff;color:var(--exam);font:inherit;font-size:13px;font-weight:700;line-height:1;cursor:pointer;transition:background .12s,color .12s,transform .12s}
.exam-share:hover{background:var(--exam);color:#fff}
.exam-share:active{transform:translateY(1px)}
.exam-share svg{width:16px;height:16px;flex:0 0 auto}
.exam-card-main:focus-visible,.exam-share:focus-visible{outline:3px solid var(--navy);outline-offset:4px}
.share-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ============================================================================
   SPECTRUM — approved 2026-08-14. The subject accent becomes the navigation
   system rather than decoration: every card's top rail is a moving gradient
   derived from that card's own --exam, so each subject animates in its own hue
   and the palette grows with the library instead of being fixed sitewide.

   Everything below derives from --exam via color-mix, so a new exam needs no new
   CSS — set --exam on the card and the rail, hover glow and hero tint follow.

   The one place the SHARED brand color moves is the gold sweep on the CTA band,
   so the page reads as Kestrel rather than as whichever subject you are browsing.

   All motion is disabled under prefers-reduced-motion at the end of this block.
   ========================================================================= */

/* Rail. Painted as a BACKGROUND LAYER on the card, not as a pseudo-element over the
   border. The first attempt used a 3px-tall ::before carrying the card's 14px
   border-radius; a radius ~4.7x the element height renders as a curved sliver rather
   than a bar, and offsetting it to -3px sat it outside the card's own rounded corner,
   leaving a visible gap. Painting into the border box instead means border-radius
   clips the bar exactly, at any device pixel ratio, with no offset arithmetic.

   The top border is kept at 3px but made transparent, so spacing is unchanged and the
   gradient shows through the space it reserves. */
.exam-card{
  border-top-color:transparent;
  background-color:#fff;
  background-image:linear-gradient(90deg,var(--exam),color-mix(in srgb,var(--exam) 42%,#fff),var(--exam));
  background-repeat:no-repeat;
  background-origin:border-box;
  background-size:220% 3px;
  background-position:0 0;
  animation:railFlow 9s linear infinite}
@keyframes railFlow{to{background-position:220% 0}}

/* Hover: lift plus a glow tinted by the subject, not a generic gray shadow.
   Applies to every card, including the plain <div> cards on the exams directory
   which previously had no hover state at all. */
.exam-card{transition:transform .22s cubic-bezier(.2,.7,.3,1),border-color .22s,box-shadow .22s}
.exam-card:hover{transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--exam) 38%,var(--line));
  box-shadow:0 14px 32px color-mix(in srgb,var(--exam) 18%,transparent)}

/* Coming-soon cards do not invite interaction, so they neither lift nor animate. */
.exam-card.isoff{background-image:linear-gradient(var(--exam),var(--exam));animation:none}
.exam-card.isoff:hover{transform:none;border-color:var(--line);
  box-shadow:0 1px 3px rgba(30,50,80,.05)}

/* Hero: a soft wash of the subject color rising from the lower left, under the
   content and the photo. Keeps the navy identity while making the page feel like
   it belongs to the exam you are reading about. */
.exam-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(620px 320px at 6% 118%,
    color-mix(in srgb,var(--exam) 32%,transparent),transparent 62%)}

/* Hero rail — the same moving gradient as the cards, with gold at its center,
   overlaying the existing 5px bottom border. */
.exam-hero::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:5px;z-index:3;
  pointer-events:none;
  background:linear-gradient(90deg,var(--exam),color-mix(in srgb,var(--exam) 45%,#fff),
    var(--gold),color-mix(in srgb,var(--exam) 45%,#fff),var(--exam));
  background-size:220% 100%;animation:railFlow 12s linear infinite}

/* Gold sweep. The single moment the shared brand color is in motion. */
.cta-band{position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;top:0;height:2px;width:34%;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:goldSweep 6s ease-in-out infinite}
@keyframes goldSweep{0%{left:-36%}100%{left:100%}}

@media (prefers-reduced-motion:reduce){
  .exam-card{animation:none;background-image:linear-gradient(var(--exam),var(--exam))}
  .exam-hero::after{animation:none;background:var(--exam)}
  .exam-card{transition:none}
  .exam-card:hover{transform:none}
  .cta-band::before{animation:none;display:none}
}

/* ============================================================================
   MOMENTUM — approved 2026-08-14. Motion carries data instead of decorating.
   A card shows a coverage ring ONLY when this device has real practice history
   for that pack; a first-time visitor sees the card exactly as before, because
   a 0% ring is a discouraging thing to greet someone with.

   PRIVACY: read-only, same-origin localStorage, on the visitor's own device.
   Nothing is written, nothing is transmitted, and none of it reaches GA4 —
   the analytics allowlist in engine.js is untouched. See privacy.html.

   WORDING: the ring reports COVERAGE ("practiced"), never a score or a
   readiness estimate. A percentage that looked like a grade would collide with
   the standing no-pass-prediction guardrail, especially for NCLEX.
   ========================================================================= */
.exam-progress{display:flex;align-items:center;gap:10px;margin:12px 0 0;
  padding-top:12px;border-top:1px solid var(--line)}
.exam-progress .ring{position:relative;flex:0 0 40px;width:40px;height:40px}
.exam-progress .ring svg{transform:rotate(-90deg);display:block}
.exam-progress .ring .trk{stroke:var(--line)}
.exam-progress .ring .val{stroke:var(--exam);stroke-linecap:round;
  transition:stroke-dashoffset 1.2s cubic-bezier(.2,.7,.3,1)}
.exam-progress .pct{position:absolute;inset:0;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:var(--navy)}
.exam-progress .lbl{font-size:12.5px;color:var(--muted);line-height:1.35}
.exam-progress .lbl b{display:block;color:var(--ink);font-size:13px;font-weight:700}
@media (prefers-reduced-motion:reduce){.exam-progress .ring .val{transition:none}}

/* Screen-reader-only utility. Mirrors kestrelexams-org/org.css so both sites share one
   definition. site.js appends " (opens in a new tab)" with this class to every practice-app
   link; without this rule that text renders visibly. Keep it in sync with guides/guide.css. */
.kx-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
@media(min-width:561px){
  .exam-card-bottom{position:relative;align-items:flex-end;padding-right:56px}
  .exam-share{position:absolute;right:0;bottom:0;min-width:0;width:42px;height:42px;padding:0;gap:0;border-radius:10px}
  .exam-share svg{width:18px;height:18px}
  .exam-share .exam-share-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
@media(max-width:860px){.exam-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.exam-grid{grid-template-columns:1fr}.exam-card-bottom{align-items:flex-start;flex-direction:column}.exam-share{min-height:38px}}

/* Feature grid */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 22px}
.feat .ic{width:44px;height:44px;border-radius:11px;background:var(--navy);color:var(--gold);display:grid;place-items:center;margin-bottom:14px}
.feat .ic svg{width:22px;height:22px}
.feat h3{margin:0 0 7px;font-size:18px}
.feat p{margin:0;color:var(--muted);font-size:15px}
@media(max-width:860px){.features{grid-template-columns:1fr}}

/* Practical learning-evidence band (links to .org research notes) */
#science{background:#f5f4ee;padding:72px 0}
.science-panel{background:#fff;border-radius:28px;padding:clamp(30px,5vw,46px) clamp(24px,4.5vw,38px) 28px;box-shadow:0 14px 32px rgba(25,45,68,.07)}
.science-intro{max-width:940px}
.science-intro .section-title{font-size:clamp(31px,4.25vw,48px);margin-bottom:12px}
.science-intro .lead-muted{max-width:850px;font-size:19px;line-height:1.55}
.learning-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.learning-card{min-width:0;display:flex;flex-direction:column;background:#f8fafc;border:1px solid #dce5ef;border-radius:22px;padding:30px 28px 22px;min-height:285px}
.learning-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;margin-bottom:26px}.learning-icon svg{width:30px;height:30px}
.learning-icon.retrieve{background:#e6f0fb;color:#294b73}.learning-icon.return{background:#fff1d5;color:#ad7a1b}.learning-icon.control{background:#eaf4ec;color:#356548}
.learning-card h3{margin:0 0 12px;color:var(--navy);font-size:25px;letter-spacing:-.02em}.learning-card p{margin:0;color:#536c89;font-size:16px;line-height:1.55}
.learning-source{display:block;margin-top:auto;padding-top:18px;border-top:1px solid #e3eaf2;color:#647891;font-size:13px}
.science-footer{display:flex;gap:22px;align-items:center;justify-content:space-between;border-top:1px solid #e3e8ee;margin-top:32px;padding-top:24px;color:#6c7e95;font-size:13px}
.science-link{display:inline-flex;align-items:center;gap:28px;color:var(--navy);font-weight:800;text-decoration:none}.science-link:hover{text-decoration:underline}.science-link span{font-size:38px;font-weight:400;line-height:.55}
@media(max-width:860px){.learning-cards{grid-template-columns:1fr}.learning-card{min-height:0}.learning-icon{margin-bottom:17px}.learning-source{margin-top:20px}}
@media(max-width:580px){#science{padding:46px 0}.science-panel{border-radius:20px;padding:27px 20px 22px}.science-intro .lead-muted{font-size:17px}.learning-cards{margin-top:26px;gap:12px}.learning-card{border-radius:17px;padding:22px 20px 18px}.learning-card h3{font-size:22px}.science-footer{align-items:flex-start;flex-direction:column;gap:15px;margin-top:24px;padding-top:20px}.science-link{gap:17px}.science-footer>span{font-size:12px}}

/* Two-up disclosure cards */
.twoup{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.disccard{background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:24px}
.disccard h3{margin:0 0 8px;font-size:18px}
.disccard p{margin:0;color:var(--muted);font-size:15px}
@media(max-width:760px){.twoup{grid-template-columns:1fr}}

/* FAQ */
.faq{max-width:760px}
.faq details{border:1px solid var(--line);border-radius:12px;padding:4px 18px;margin-bottom:12px;background:#fff}
.faq summary{cursor:pointer;font-weight:700;color:var(--navy);padding:14px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq p{color:var(--muted);padding:12px 0 6px;margin:0}

/* CTA band */
.cta-band{background:radial-gradient(700px 380px at 12% 118%,rgba(220,168,69,.15),transparent 60%),var(--navy);color:#fff;text-align:center;padding:60px 0}
.cta-band h2{color:#fff;font-size:clamp(24px,3.4vw,32px);margin:0 0 12px}
.cta-band p{color:#d3dbe7;margin:0 0 26px;font-size:18px}

/* Footer */
footer.site{background:var(--navy-deep);color:#aeb9c8;font-size:14px;padding:44px 0}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
footer.site .brandline{display:flex;align-items:center;gap:10px;font-weight:800;color:#fff;font-size:16px;margin-bottom:8px}
footer.site .brandline img{height:30px;border-radius:6px}
footer.site h4{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 12px}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:8px}
footer.site a{color:#cdd6e2}
footer.site .legal{border-top:1px solid #2E4763;margin-top:26px;padding-top:18px;font-size:12px;color:#8494a7;line-height:1.6}
@media(max-width:760px){footer.site .cols{grid-template-columns:1fr}}

/* Back to top (injected by site.js) */
.totop{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--gold);border:none;box-shadow:0 6px 18px rgba(20,40,70,.28);display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s;z-index:60}
.totop.show{opacity:1;pointer-events:auto;transform:none}
.totop:hover{background:var(--navy-2)}
.totop svg{width:20px;height:20px}
@media (prefers-reduced-motion:reduce){.totop{transition:none}}

/* ===== Exam profile / article pages ===== */
.crumbs{max-width:900px;margin:0 auto;padding:18px 22px 0;font-size:13.5px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.exam-hero{position:relative;overflow:hidden;color:#fff;padding:44px 0 48px;background:radial-gradient(800px 420px at 88% -12%,rgba(220,168,69,.14),transparent 60%),linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);border-bottom:5px solid var(--exam)}
.exam-hero .wrap{position:relative;z-index:2;max-width:var(--wrap)}
.exam-hero .wrap>*{max-width:640px}
/* Color vignette melt — photo kept in color, edges dissolve into the hero navy */
.exam-hero .hero-photo{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.exam-hero .hero-photo img{position:absolute;top:0;right:0;height:100%;width:min(58%,720px);object-fit:cover;object-position:60% 32%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 6%,#000 48%),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,transparent 6%,#000 48%),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-composite:intersect}
@media(max-width:860px){
  .exam-hero .wrap>*{max-width:none}
  .exam-hero .hero-photo img{width:100%;opacity:.20;object-position:60% 28%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 76%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 76%,transparent 100%)}}
.exam-hero .eyebrow{color:var(--gold)}
.exam-hero h1{color:#fff;font-size:clamp(28px,4.4vw,42px);margin:6px 0 12px}
.exam-hero p{color:#d7deea;font-size:19px;margin:0;max-width:700px}
.exam-hero .quickfacts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.exam-hero .qf{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 14px;font-size:13.5px;color:#eaf0f8}
/* Hero actions — sit in the quickfacts row so "Open app" is reachable without
   scrolling past the fold. .qf-act is a real control, so it reads as raised
   against the pill-shaped facts rather than looking like another static chip. */
.qf-act{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:700;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .12s ease,filter .12s ease}
.qf-act:hover{text-decoration:none;filter:brightness(1.06);transform:translateY(-1px)}
.qf-act svg{width:15px;height:15px;flex:none}
.qf-open{background:var(--gold);color:#20160a}
.qf-share{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff}
@media(max-width:520px){.qf-act{padding:8px 13px}}
.exam-hero .qf b{color:#fff}

article.doc{max-width:900px;margin:0 auto;padding:40px 22px 6px;font-size:17px}
article.doc h2{font-size:25px;margin:36px 0 12px;color:var(--navy)}
article.doc h3{font-size:19px;margin:22px 0 8px}
article.doc p{margin:0 0 16px}
article.doc ul,article.doc ol{margin:0 0 16px;padding-left:22px}
article.doc li{margin:7px 0}
article.doc a{font-weight:600;text-decoration:underline}
article.doc strong{color:var(--ink)}

.facts-table{width:100%;border-collapse:collapse;margin:6px 0 8px;font-size:15.5px}
.facts-table th,.facts-table td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.facts-table th{width:38%;color:var(--navy);font-weight:700}
.facts-table td{color:var(--muted)}

.domains{display:grid;gap:10px;margin:8px 0 6px}
.domain-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.domain-row .dn{font-weight:600;color:var(--ink);font-size:15px}
.domain-row .dw{font-weight:800;color:var(--exam);font-size:15px}
.domain-row .bar-wrap{grid-column:1/-1;height:7px;background:#eef1f6;border-radius:999px;overflow:hidden}
.domain-row .bar-wrap i{display:block;height:100%;background:var(--exam)}

.callout{background:var(--bg-soft);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:12px;padding:18px 22px;margin:22px 0}
.callout p{margin:0}
.callout .lbl{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);margin-bottom:6px}

.cta-inline{background:var(--navy);color:#fff;border-radius:14px;padding:26px 28px;margin:34px 0;text-align:center}
.cta-inline h3{color:#fff;margin:0 0 8px;font-size:21px}
.cta-inline p{color:#d3dbe7;margin:0 0 18px}

.refs{max-width:900px;margin:6px auto 0;padding:0 22px}
.refs .inner{border-top:1px solid var(--line);padding-top:20px}
.refs h2{font-size:17px;color:var(--navy);margin:0 0 10px}
.refs ol{font-size:13.5px;color:var(--muted);padding-left:20px;margin:0}
.refs li{margin:7px 0}

.related{max-width:900px;margin:0 auto;padding:38px 22px 8px}
.related h2{font-size:20px;margin:0 0 16px}

/* ===== Exams directory: category filter + card actions ===== */
.filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 26px}
.filterbar .flabel{font-weight:700;color:var(--navy);font-size:14px;margin-right:4px}
.chk{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;user-select:none;transition:background .12s,border-color .12s,color .12s}
.chk input{accent-color:var(--navy);width:16px;height:16px;margin:0}
.chk:hover{border-color:var(--navy)}
.chk.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.chk.on input{accent-color:#fff}
.filtercount{font-size:14px;color:var(--muted);margin-left:auto}
.exam-card .actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.exam-card .actions a{display:inline-flex;align-items:center;font-weight:700;font-size:13px;padding:8px 13px;border-radius:8px;text-decoration:none}
.exam-card .actions .guide{border:1.5px solid var(--exam);color:var(--exam)}
.exam-card .actions .guide:hover{background:color-mix(in srgb,var(--exam) 10%,#fff)}
.exam-card .actions .appbtn{background:var(--exam);color:#fff}
.exam-card .actions .appbtn:hover{filter:brightness(1.07)}
.exam-card .actions .disabled{color:#9aa4b2;border:1.5px solid var(--line);cursor:not-allowed}
.exam-card.isoff{opacity:.74}
.exam-empty{color:var(--muted);padding:24px 2px;display:none}

/* ===== Public Updates ===== */
.updates-hero{background:radial-gradient(800px 420px at 88% -12%,rgba(220,168,69,.14),transparent 60%),linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;padding:48px 0 52px;border-bottom:4px solid var(--gold)}
.updates-hero .wrap{max-width:var(--wrap)}
.updates-hero h1{margin:5px 0 10px;color:#fff;font-size:clamp(30px,4.6vw,44px)}
.updates-hero p{max-width:680px;margin:0;color:#d7deea;font-size:18px}
.updates-filterbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:0 0 26px}
.updates-filterbar .flabel{font-weight:700;color:var(--navy);font-size:14px;margin-right:4px}
.update-filter{appearance:none;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:13.5px;font-weight:700;line-height:1.2;padding:8px 13px;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.update-filter:hover,.update-filter:focus-visible{border-color:var(--navy);outline:none}
.update-filter.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}
.updates-count{margin-left:auto;color:var(--muted);font-size:13.5px}
.updates-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.update-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-top:4px solid var(--update-accent,var(--navy));border-radius:14px;padding:21px 20px;box-shadow:0 1px 3px rgba(30,50,80,.05)}
.update-card .update-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:12px;color:var(--muted)}
.update-card .status{display:inline-flex;align-items:center;border-radius:999px;padding:4px 9px;background:color-mix(in srgb,var(--update-accent,var(--navy)) 12%,#fff);color:var(--update-accent,var(--navy));font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:10px}
.update-card h2{margin:0 0 9px;color:var(--navy);font-size:20px}
.update-card ul{margin:0;padding-left:18px;color:var(--muted);font-size:14.5px}
.update-card li{margin:5px 0}
.update-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.update-tag{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:4px 9px;color:var(--ink);font-size:11px;font-weight:700;background:#fff}
.updates-empty{display:none;border:1px dashed var(--line);border-radius:14px;padding:30px 22px;color:var(--muted);background:var(--bg-soft);text-align:center}
.updates-more{display:none;margin:26px auto 0}
.updates-note{max-width:760px;margin:32px auto 0;text-align:center;color:var(--muted);font-size:14px}
@media(max-width:720px){.updates-grid{grid-template-columns:1fr}.updates-count{width:100%;margin-left:0}.updates-hero{padding:40px 0 44px}}

/* ============================================================================
   STUDY HALL REVAMP — approved by Finley 2026-08-27 (Drafts/homepage-revamp-
   mockup-2026-08-27.html rev 2; strategy in Memory/SITE_REVAMP_STRATEGY_
   2026-08-27.md). Every selector is scoped to body.home, so ONLY the homepage
   changes; exams/guides/updates/legal pages render byte-identically.

   The hero logo video plays ONCE and holds its final frame (loop attribute
   removed in index.html), and is blended seamlessly into the parchment ground:
   multiply blend (light pixels take on the page color — also absorbs H.264
   color-range drift), a slight warm filter (studio greys -> parchment family),
   a radial feather mask (no visible frame edge), and a parchment halo behind
   it so the graph-paper texture doesn't show through the blend.
   Serif display is a system stack (Georgia et al.) — no webfont, no CLS;
   EB Garamond self-hosting is a possible later upgrade.
   ========================================================================= */
:root{--parchment:#F9F5EA;--parchment-deep:#F3EDDC;--line-parch:#E6DFC9;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype","Book Antiqua",serif}
h1,h2{font-family:var(--serif)}

/* Hero: collegiate parchment + graph paper, ink text */
.home .hero{color:var(--ink);background:
  linear-gradient(rgba(249,245,234,.94),rgba(249,245,234,.94)),
  repeating-linear-gradient(0deg,transparent,transparent 27px,#D8CFB4 27px,#D8CFB4 28px),
  repeating-linear-gradient(90deg,transparent,transparent 27px,#D8CFB4 27px,#D8CFB4 28px);
  background-color:var(--parchment);border-bottom:1px solid var(--line-parch)}
.home .hero .eyebrow{color:var(--navy-2)}
.home .hero h1{color:var(--navy)}
.home .hero p.lead{color:#3d4a5c}
.home .hero p.lead strong{color:var(--navy)}
.home .trustline{color:#54604f}
.home .trustline b{color:var(--good)}
.home .hero .btn-ghost{border-color:var(--navy);color:var(--navy)}
.home .hero .btn-ghost:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.home .btn-gold{box-shadow:0 2px 0 #B98A2F}

/* Chalk underline on the headline */
.home .chalk{position:relative;display:inline-block}
.home .chalk svg{position:absolute;left:-2%;bottom:-.22em;width:104%;height:.42em;pointer-events:none}

/* Seamless logo video */
.home .hero-video{position:relative;background:none;border:none;box-shadow:none;border-radius:0;overflow:visible;line-height:1.5}
/* The halo bled 20% past its box on each side. Inside the 1080px wrap that is
   invisible; at 390px it pushed the document 56px wider than the viewport, and a
   document wider than the viewport is why the page could be pinched loose and why
   the sticky header appeared to float free of the top (sticky positions against the
   LAYOUT viewport, so panning the VISUAL viewport slides the page out from under
   it). Horizontal bleed is now 0 on phones, and the hero clips as a second guard. */
.home .hero-video .halo{position:absolute;inset:-14% -20%;pointer-events:none;
  background:radial-gradient(ellipse at center,var(--parchment) 40%,rgba(249,245,234,0) 72%)}
@media(max-width:860px){.home .hero-video .halo{inset:-8% 0}}
.home .hero{overflow-x:clip}
.home .hero-video video,.home .hero-video .poster-fallback{position:relative;display:block;width:100%;height:auto;
  mix-blend-mode:multiply;filter:sepia(.14) saturate(1.06) brightness(1.02);
  -webkit-mask-image:radial-gradient(ellipse closest-side at 50% 52%,#000 56%,rgba(0,0,0,.8) 76%,transparent 98%);
  mask-image:radial-gradient(ellipse closest-side at 50% 52%,#000 56%,rgba(0,0,0,.8) 76%,transparent 98%)}
.home .hero-video .poster-fallback{display:none}
/* Mobile optimization (2026-08-27): sources are attached by the inline script in
   index.html — 480p rendition on small viewports / Save-Data, loaded only when the
   video nears the viewport. aspect-ratio reserves the box so late attachment causes
   no layout shift; without JS the poster shows as a still. */
.home .hero-video video{aspect-ratio:16/9}
.home .vid-cap{position:relative;text-align:center;font-family:var(--serif);font-style:italic;color:#6B6350;font-size:14px;margin:2px 0 0}
@media(prefers-reduced-motion:reduce){
  .home .hero-video{background:none;aspect-ratio:auto}
  .home .hero-video .poster-fallback{display:block}
}

/* Why-free strip */
.home .whyfree{background:var(--parchment-deep);border-bottom:1px solid var(--line-parch);padding:18px 0}
.home .whyfree .wrap{display:flex;gap:8px 22px;align-items:baseline;flex-wrap:wrap}
.home .whyfree h2{margin:0;font-size:17px;color:var(--navy)}
.home .whyfree p{margin:0;font-size:14.5px;color:#4A5568;max-width:80ch}

/* Stats strip */
.home .stats-strip{padding:6px 0 0}
.home .stats{display:flex;justify-content:space-between;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.home .stat{flex:1;min-width:150px;text-align:center;padding:18px 12px}
.home .stat .n{font-family:var(--serif);font-size:32px;font-weight:700;color:var(--navy);line-height:1.15}
.home .stat .l{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700}

/* Gold pennant on live subject cards */
.exam-card-live::after{content:"";position:absolute;top:-3px;right:18px;width:24px;height:38px;
  background:var(--gold);clip-path:polygon(0 0,100% 0,100% 100%,50% 74%,0 100%);pointer-events:none}

/* The Science: navy band, gold accents, serif thesis */
.home #science{background:var(--navy)}
.home #science .science-panel{background:transparent;box-shadow:none;padding:0;border-radius:0}
.home #science .kicker{color:var(--gold)}
.home #science .section-title{color:#fff}
.home #science .lead-muted{color:#D5DEEA}
.home #science .thesis{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.6vw,24px);
  color:#F3E9CF;max-width:62ch;margin:18px 0 0;line-height:1.5}
.home #science .learning-cards{margin-top:30px}
.home #science .learning-card{background:var(--navy-2);border-color:#40628C}
.home #science .learning-card h3{color:var(--gold);font-family:var(--serif)}
.home #science .learning-card p{color:#D5DEEA}
.home #science .learning-icon.retrieve,.home #science .learning-icon.return,.home #science .learning-icon.control{
  background:rgba(255,255,255,.08);color:var(--gold)}
.home #science .learning-source{border-top-color:#40628C;color:#9FB2CB}
.home #science .science-footer{border-top-color:#40628C;color:#9FB2CB}
.home #science .science-link{color:#fff}

/* Study hall (guides) section: lined paper + banker's lamp */
.home .hall{background:
  linear-gradient(rgba(249,245,234,.96),rgba(249,245,234,.96)),
  repeating-linear-gradient(0deg,transparent,transparent 30px,#DAD1B6 30px,#DAD1B6 31px);
  background-color:var(--parchment);border-top:1px solid var(--line-parch);border-bottom:1px solid var(--line-parch)}
.home .hall .wrap{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center}
.home .hall h2{margin:0 0 8px}
.home .hall p{max-width:70ch;color:#4A5568;margin:0 0 18px}
@media(max-width:760px){.home .hall .wrap{grid-template-columns:1fr}.home .hall .lamp{width:88px;height:auto}}

/* Footer gains a Study guides column on the homepage */
.home footer.site .cols{grid-template-columns:1.6fr 1fr 1fr 1fr}
@media(max-width:760px){.home footer.site .cols{grid-template-columns:1fr}}


/* ============================================================================
   STUDY HALL — SITEWIDE EXTENSION (2026-08-27, phase 2 of the approved revamp).
   Phase 1 dressed the homepage; this carries the same system to the rest of
   .com — exams directory, exam profiles, updates, 404 — so the brand reads as
   one place rather than one good page. Deliberately restrained: the per-exam
   accent system, the navy hero identity and every layout stay exactly as they
   are. What changes is the *material* — collegiate serif headings (above),
   parchment instead of cool grey, and paper texture where a flat field used
   to be. app pages load engine.css, .org loads org.css: neither is touched,
   so no service-worker cache bumps are needed.
   ========================================================================= */

/* Warm the shared neutrals. --bg-soft was #F7F6F1 (cool); parchment is the
   same value family the approved hero uses, so alternating sections now read
   as paper stock rather than as grey UI panels. */
:root{--bg-soft:var(--parchment);--line-warm:var(--line-parch)}

/* Exam hero: engineering-paper grid over the navy. Faint enough to be felt
   rather than seen (5% white), and it sits UNDER .exam-hero::before's subject
   wash and the photo vignette, so no existing layer changes meaning. */
.exam-hero{background-image:
  repeating-linear-gradient(0deg,transparent,transparent 27px,rgba(255,255,255,.05) 27px,rgba(255,255,255,.05) 28px),
  repeating-linear-gradient(90deg,transparent,transparent 27px,rgba(255,255,255,.05) 27px,rgba(255,255,255,.05) 28px),
  radial-gradient(800px 420px at 88% -12%,rgba(220,168,69,.14),transparent 60%),
  linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%)}

/* Chalk underline — the homepage gesture, available on any page's h1.
   .chalk is an atomic inline-block, so a line-break opportunity exists at its
   edge even after a non-breaking space; .nb binds the preceding word to it so
   the underlined word can never strand alone on a line. text-wrap:balance is
   progressive — browsers without it just wrap as before. */
h1{text-wrap:balance}
.nb{white-space:nowrap}
.chalk{position:relative;display:inline-block}
.chalk svg{position:absolute;left:-2%;bottom:-.22em;width:104%;height:.42em;pointer-events:none}
.exam-hero .chalk svg,.updates-hero .chalk svg{opacity:.95}

/* Article prose on exam profiles: parchment page ground with a lined-paper
   whisper, and serif h2s (inherited above) to match the homepage's voice. */
body.doc-page{background:
  linear-gradient(rgba(249,245,234,.97),rgba(249,245,234,.97)),
  repeating-linear-gradient(0deg,transparent,transparent 30px,#DAD1B6 30px,#DAD1B6 31px);
  background-color:var(--parchment)}
/* No background-attachment:fixed — iOS Safari repaints it per frame while scrolling,
   which is exactly the "background isn't locked in place" symptom. The texture
   repeats, so scrolling with the page is visually identical and costs nothing. */
body.doc-page article.doc,body.doc-page .refs,body.doc-page .related{background:transparent}
body.doc-page .facts-table th,body.doc-page .facts-table td,
body.doc-page .domain-row{background-color:rgba(255,255,255,.55)}
body.doc-page .domain-row{border-color:var(--line-parch)}
/* The gold accent word in an exam h1, matching the homepage's treatment. */
.exam-hero h1 em{color:var(--gold);font-style:normal}

/* Callouts and inline CTAs pick up the warm line so they sit on parchment. */
.callout{border-color:var(--line-parch)}
.facts-table th,.facts-table td{border-bottom-color:var(--line-parch)}

/* Updates page: same parchment treatment as the rest. */
.updates-hero{background-image:
  repeating-linear-gradient(0deg,transparent,transparent 27px,rgba(255,255,255,.05) 27px,rgba(255,255,255,.05) 28px),
  repeating-linear-gradient(90deg,transparent,transparent 27px,rgba(255,255,255,.05) 27px,rgba(255,255,255,.05) 28px),
  radial-gradient(800px 420px at 88% -12%,rgba(220,168,69,.14),transparent 60%),
  linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%)}

/* Legal pages (privacy/terms carry inline styles) get the shared shell via
   these two classes so they stop looking like a different website. */
.legal-doc{background:var(--parchment)}
.legal-doc h1,.legal-doc h2{font-family:var(--serif);color:var(--navy)}

/* =====================================================================
   Header enhancement (2026-08-27) — active only once site.js adds the
   `hdr-enhanced` class to the bar; without JS none of this applies.
   Covers: the CTA moved out of .nav, the page-share control, and the
   in-house search (input + suggestion list + phone panel).
   ===================================================================== */

/* CTA in the bar: restate the pill styles it loses when it leaves .nav scope.
   The .nav a.cta rules above stay for the no-JS fallback. */
.bar > a.cta{background:var(--gold);color:#2A3441;padding:8px 14px;border-radius:9px;font-weight:600;font-size:14.5px;white-space:nowrap}
.bar > a.cta:hover{background:var(--gold-hover);color:#2A3441;text-decoration:none}
.bar > .cta .cta-s{display:none}

/* Page share — icon button (desktop; phones use the menu item instead) */
.hdr-share{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;cursor:pointer;padding:0;flex:none}
.hdr-share:hover{background:rgba(255,255,255,.1)}
.hdr-share svg{width:18px;height:18px}
.hdr-share .ic-check{display:none}
.hdr-share.done .ic-share{display:none}
.hdr-share.done .ic-check{display:block;color:var(--gold)}
.hdr-share .hdr-share-tip{display:none;position:absolute;top:calc(100% + 10px);right:0;background:var(--navy-deep);color:#fff;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:7px;white-space:nowrap;box-shadow:0 8px 18px rgba(15,28,46,.3)}
.hdr-share.done .hdr-share-tip{display:block}

/* "Share this page" menu item — exists only inside the phone dropdown */
.nav-share{display:none}

/* In-house search */
.hdr-search{position:relative;display:flex;align-items:center;flex:none}
.hdr-search-toggle{display:none;width:36px;height:36px;border-radius:9px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;cursor:pointer;align-items:center;justify-content:center;padding:0;flex:none}
.hdr-search-toggle svg{width:18px;height:18px}
.hdr-search-panel{position:relative;display:flex;margin:0}
.hdr-search-input{width:150px;transition:width .18s;border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.08);color:#fff;border-radius:9px;padding:8px 12px;font:inherit;font-size:13.5px;line-height:1.2}
.hdr-search-input::placeholder{color:#b9c4d4}
.hdr-search-input:focus{width:220px;outline:2px solid var(--gold);outline-offset:1px;background:rgba(255,255,255,.14)}
@media(max-width:1020px) and (min-width:761px){.hdr-search-input{width:116px}.hdr-search-input:focus{width:170px}}
.hdr-search-list{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:300px;max-width:min(92vw,380px);background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 38px rgba(15,28,46,.22);list-style:none;margin:0;padding:6px;z-index:60;max-height:min(60vh,420px);overflow:auto;text-align:left}
.hdr-search-list.open{display:block}
.hdr-search-list li{display:flex;flex-direction:column;gap:1px;padding:9px 10px;border-radius:8px;cursor:pointer}
.hdr-search-list li:hover,.hdr-search-list li.active{background:var(--bg-soft)}
.hdr-search-list li.active{outline:2px solid var(--gold);outline-offset:-2px}
.hdr-search-list .rt{font-weight:700;font-size:14px;color:var(--navy);line-height:1.3}
.hdr-search-list .rm{font-size:12px;color:var(--muted);font-weight:500}
.hdr-search-list li.see-all{display:block;font-weight:700;font-size:13.5px;color:var(--navy);border-top:1px solid var(--line);border-radius:0;margin-top:4px;padding-top:11px}
.hdr-share:focus-visible,.hdr-search-toggle:focus-visible,.menu-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media(max-width:760px){
  /* The search panel anchors to the bar itself (position:relative above),
     so the expanded row spans the full header width inside the sticky bar. */
  .js .bar > .hdr-search{position:static}
  .js .bar.hdr-enhanced .hdr-search-toggle{display:inline-flex}
  .js .bar > .hdr-search .hdr-search-panel{display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy);padding:10px 14px 12px;border-top:1px solid rgba(255,255,255,.12);box-shadow:0 14px 26px rgba(15,28,46,.28);z-index:52}
  .js .bar > .hdr-search.open .hdr-search-panel{display:flex;flex-direction:column}
  .js .bar > .hdr-search .hdr-search-input{width:100%;font-size:16px} /* 16px stops iOS focus zoom */
  .js .bar > .hdr-search .hdr-search-input:focus{width:100%}
  .js .bar > .hdr-search .hdr-search-list{position:static;min-width:0;max-width:none;width:100%;margin-top:8px;box-shadow:none;border:1px solid var(--line);max-height:min(55vh,380px)}
  /* CTA label swap: "Start practicing" → "Practice" etc. */
  .js .bar.hdr-enhanced > .cta .cta-l{display:none}
  .js .bar.hdr-enhanced > .cta .cta-s{display:inline}
  /* Share this page — first item of the dropdown menu */
  .js .bar > .nav .nav-share{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;color:#dbe2ec;font:inherit;font-weight:600;font-size:14.5px;line-height:1.65;padding:11px 10px;border-radius:8px;cursor:pointer}
  .js .bar > .nav .nav-share:hover{background:rgba(255,255,255,.08);color:#fff}
  .js .bar > .nav .nav-share svg{width:17px;height:17px}
}

/* /search/ — the results page (noindex,follow; not in sitemap.xml) */
.search-hero{background:var(--bg-soft);border-bottom:1px solid var(--line-warm);padding:34px 0 28px}
.search-hero h1{margin:0 0 14px;font-size:30px}
.search-form{display:flex;gap:10px;max-width:560px}
.search-form input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;font:inherit;font-size:16px}
.search-form input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--navy)}
.sr-count{color:var(--muted);margin:24px 0 8px;font-size:14.5px}
.sr-list{display:flex;flex-direction:column;gap:10px;margin:0 0 44px;padding:0;list-style:none}
.sr-item{display:block;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff}
.sr-item:hover{text-decoration:none;border-color:var(--navy);box-shadow:0 8px 20px rgba(20,40,70,.08)}
.sr-type{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.sr-title{display:block;font-weight:700;font-size:17px;color:var(--navy)}
.sr-desc{display:block;color:var(--ink);font-size:14.5px;margin-top:3px}

/* The old rule here hid .brand only below 379px, and only on the enhanced
   header, because that was the width where the brand text overlapped the search
   icon. Superseded 2026-08-28: the wordmark is now hidden on every phone width
   (the .brand{display:none} in the 760px block above), because the bar read as
   crowded well before it actually broke. Kept as a note so the narrow rule does
   not get reintroduced as a "fix" for a symptom that no longer exists. */


/* ============================================================================
   CROSS-DOCUMENT VIEW TRANSITIONS  (added 2026-09-19)
   Adopted from the Awwwards Developer Award feed, where every winner fakes this
   with a JavaScript router because they are single-page apps. We are 64 static
   same-origin files, which is the case the native feature exists for, so our
   cost is CSS and theirs is a framework.

   MUST live in BOTH site.css and guides/guide.css: the page being left and the
   page being entered each have to opt in, or the transition fires one way only.

   Chrome/Edge 126+, Safari 18.2+. Firefox ignores the at-rule and navigates
   normally, so there is no fallback to write and no degraded state.

   The header is named rather than cross-faded: it is identical on every page,
   and holding it still is what stops a navigation reading as a page load. The
   name must be unique per document. Verified 2026-09-19: all 64 non-app pages
   render exactly one <header>. A duplicate name makes the browser skip the
   whole transition SILENTLY, so re-check that before adding any second header.
   ========================================================================== */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:kx-vt-out .18s ease-in both}
  ::view-transition-new(root){animation:kx-vt-in .22s ease-out both}
  @keyframes kx-vt-out{to{opacity:0;transform:translateY(-6px)}}
  @keyframes kx-vt-in{from{opacity:0;transform:translateY(8px)}}
  header.site{view-transition-name:kx-header}
}

/* ----------------------------------------------------------------------------
   TEXT WRAP LADDER  (added 2026-09-19)
   h1 already carried balance. Balance uses a binary search and browsers abandon
   it past 6 lines (Chromium) / 10 (Firefox), so it goes on short headings only
   and NEVER on body copy or on `*`.
   Baseline since 2024-05-13. Ignored where unsupported; text wraps normally.
   -------------------------------------------------------------------------- */
h2,h3{text-wrap:balance}


/* Site navigation pass, 2026-09-30: the section you are in is marked .on and
   the exact landing page also carries aria-current="page". */
.nav a{white-space:nowrap}
.brand .b1,.brand .b2{white-space:nowrap}
/* Tablet widths: five menu items, search, share and the CTA do not fit beside the
   two-line wordmark, so the mark alone stands for the brand here, as on phones. */
@media(min-width:761px) and (max-width:1040px){.brand{display:none}.nav{gap:15px}}
.nav a.on{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px;text-decoration-color:var(--gold)}

/* Clickable topic rows on subject pages (2026-10-19) */
article.doc a.domain-row,a.domain-row{grid-template-columns:1fr auto;color:inherit;text-decoration:none;font-weight:400;transition:border-color .15s,box-shadow .15s,transform .15s}
article.doc a.domain-row:hover,a.domain-row:hover{text-decoration:none;border-color:var(--exam);box-shadow:0 6px 18px rgba(15,28,46,.08);transform:translateY(-1px)}
a.domain-row:focus-visible{outline:2px solid var(--exam);outline-offset:2px}
a.domain-row .dgo{grid-column:1/-1;order:3;font-size:13px;font-weight:700;color:var(--exam)}
a.domain-row .bar-wrap{order:2}
a.domain-row.soon .dgo{color:var(--muted);font-weight:600}
a.domain-row:hover .dn{color:var(--exam)}
.domains-hint{font-size:14.5px;color:var(--muted);margin:-4px 0 12px}
@media (prefers-reduced-motion:reduce){a.domain-row{transition:none}a.domain-row:hover{transform:none}}