/* ============================================================================
   WGU Proctored Exams — landing stylesheet (navy / light design system)
   Ported from the Faztech component library: same class names & components,
   dark-violet theme inverted to navy-blue-on-white for academic credibility.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --navy:        #0b2545;   /* primary — headings, nav, footer */
    --navy-2:      #13315c;   /* deep blue */
    --royal:       #1d4ed8;   /* royal blue — links, primary buttons */
    --royal-2:     #3b82f6;   /* bright royal — hovers, gradients */
    --sky:         #60a5fa;   /* light accent */
    --green:       #059669;   /* success / purchase accent */
    --green-deep:  #047857;
    --bg-0:        #ffffff;   /* page background */
    --bg-1:        #f5f7fb;   /* soft section background */
    --bg-2:        #e9eef7;   /* deeper soft background */
    --ink:         #0f172a;   /* body text */
    --muted:       #475569;
    --muted-2:     #64748b;
    --card:        #ffffff;
    --card-2:      #f8fafc;
    --line:        rgba(15, 23, 42, .08);
    --line-2:      rgba(15, 23, 42, .16);
    --radius:      14px;
    --radius-lg:   20px;
    --shadow:      0 1px 2px rgba(11, 37, 69, .06), 0 12px 32px -16px rgba(11, 37, 69, .18);
    --glow:        0 0 0 1px rgba(29, 78, 216, .22), 0 14px 44px -12px rgba(29, 78, 216, .28);
    --container:   1140px;
    --font:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --display:     "Space Grotesk", "Inter", sans-serif;
    /* Logo sizing — tune these two to fit the logo, nothing else needed. */
    --logo-h:      40px;
    --nav-h:       72px;
}

/* ---- reset / base -------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg-0);
    line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: var(--royal); text-decoration: none; }
a:hover { color: var(--royal-2); }
h1, h2, h3, h4 { font-family: var(--display); color: var(--navy); letter-spacing: -.01em; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(30px, 5vw, 46px); }
h2 { font-size: clamp(24px, 3.6vw, 34px); }
h3 { font-size: 19px; }
p { margin: 0 0 1em; }

/* ---- layout -------------------------------------------------------------- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; }
.section--soft { background: var(--bg-1); }
.section__head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.eyebrow {
    display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--royal); margin-bottom: 10px;
}
.lead { font-size: 17.5px; color: var(--muted); }

/* ---- buttons ------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 1;
    padding: 13px 22px; border-radius: 11px; border: 0; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: linear-gradient(135deg, var(--royal), var(--navy-2)); color: #fff; box-shadow: 0 10px 24px -10px rgba(29, 78, 216, .55); }
.btn--primary:hover { filter: brightness(1.08); color: #fff; }
.btn--navy { background: linear-gradient(135deg, var(--green), var(--green-deep)); color: #fff; box-shadow: 0 10px 24px -10px rgba(5, 150, 105, .5); }
.btn--navy:hover { filter: brightness(1.07); color: #fff; }
.btn--ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--line-2); }
.btn--ghost:hover { border-color: var(--royal); color: var(--royal); }
.btn--ghost-light { background: rgba(255, 255, 255, .12); color: #fff; border: 1.5px solid rgba(255, 255, 255, .35); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.btn--lg { padding: 16px 28px; font-size: 16.5px; border-radius: 13px; }

/* ---- header / nav -------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: var(--nav-h); }
.nav__brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--navy); }
.nav__brand img, .nav__brand svg { height: var(--logo-h); width: auto; display: block; }
.nav__brand-text small { display: block; font-size: 11px; font-weight: 600; color: var(--muted-2); letter-spacing: .04em; }
.nav__links { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav__links a { color: var(--ink); font-weight: 500; font-size: 15px; }
.nav__links a:hover { color: var(--royal); }
.nav__actions { display: flex; align-items: center; gap: 12px; }
.nav__login { font-weight: 600; color: var(--navy); }
.nav__m-only { display: none; }
.nav__toggle {
    display: none; background: none; border: 1.5px solid var(--line-2); border-radius: 9px;
    padding: 8px 10px; font-size: 18px; line-height: 1; color: var(--navy); cursor: pointer;
}
.nav__more { position: relative; }
.nav__more-btn { background: none; border: 0; font: inherit; font-weight: 500; font-size: 15px; color: var(--ink); cursor: pointer; padding: 0; }
.nav__more-btn:hover { color: var(--royal); }
.nav__drop {
    position: absolute; top: calc(100% + 12px); right: 0; min-width: 210px; display: none;
    background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
    padding: 8px; z-index: 60;
}
.nav__more.open .nav__drop { display: block; }
.nav__drop a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink); font-size: 14.5px; }
.nav__drop a:hover { background: var(--bg-1); color: var(--royal); }

/* ---- hero ---------------------------------------------------------------- */
.hero { background:
    radial-gradient(900px 460px at 88% -10%, rgba(59, 130, 246, .14), transparent 60%),
    radial-gradient(700px 420px at 0% 110%, rgba(11, 37, 69, .08), transparent 55%),
    linear-gradient(180deg, #f8fafd 0%, #ffffff 100%);
    border-bottom: 1px solid var(--line);
}
.hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding: 72px 0 64px; }
.hero__inner h1 span { color: var(--royal); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 34px; }
.hero__stats { display: flex; flex-wrap: wrap; gap: 28px; }
.hero__stat b { display: block; font-family: var(--display); font-size: 24px; color: var(--navy); }
.hero__stat span { font-size: 13.5px; color: var(--muted-2); }
.hero__art { text-align: center; }
.hero__art img { max-width: 420px; }

/* ---- hero photo slideshow (Saka pattern) ----------------------------------
   Injected by wgu-widgets.js when images exist at /static/images/hero/hero-N.jpg
   (or listed in WGUPE.heroImages). Without images the hero keeps its gradient. */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero__slides { position: absolute; inset: 0; z-index: 0; background: #0b1120; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes heroKen {
    from { transform: scale(1.05) translate3d(0, 0, 0); }
    to   { transform: scale(1.16) translate3d(-1.6%, -1.2%, 0); }
}
.hero-slide.is-active img { animation: heroKen 22s ease-in-out infinite alternate; will-change: transform; }
/* navy scrim keeps text legible over any photo */
.hero__scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(8, 15, 30, .62) 0%, rgba(8, 15, 30, .30) 40%, rgba(8, 15, 30, .55) 100%),
        linear-gradient(90deg, rgba(8, 15, 30, .55) 0%, rgba(8, 15, 30, .18) 55%, transparent 100%);
}
.hero__inner { position: relative; z-index: 2; }
.hero__dots { position: absolute; z-index: 2; left: 0; right: 0; bottom: 16px; display: flex; gap: 9px; justify-content: center; }
.hero__dots button {
    width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .42); transition: background .2s ease, width .25s ease, border-radius .25s ease;
}
.hero__dots button:hover { background: rgba(255, 255, 255, .7); }
.hero__dots button.is-active { width: 26px; border-radius: 6px; background: #fff; }
/* photo mode: taller stage, vertically centered content */
.hero.has-slides { display: flex; align-items: center; min-height: clamp(600px, 68vh, 800px); }
.hero.has-slides > .hero__inner { width: 100%; }
/* photo mode: flip hero text to white (both themes) */
.hero.has-slides h1, .hero.has-slides h1 span { color: #fff; text-shadow: 0 2px 28px rgba(0, 0, 0, .5); }
.hero.has-slides h1 span { color: #93c5fd; }
.hero.has-slides .lead { color: rgba(255, 255, 255, .92); text-shadow: 0 1px 14px rgba(0, 0, 0, .45); }
.hero.has-slides .hero__stat b { color: #fff; }
.hero.has-slides .hero__stat span { color: rgba(255, 255, 255, .78); }
.hero.has-slides .hero__art { display: none; }
.hero.has-slides .hero__inner { grid-template-columns: 1fr; }
.hero.has-slides .search__input { border-color: transparent; box-shadow: 0 10px 34px -8px rgba(0, 0, 0, .5); }
/* video mode: text left, showcase right (with or without photo slides) */
.hero__video:empty { display: none; }
.hero.has-video .hero__inner { grid-template-columns: 1.05fr .95fr; }
.hero.has-video .hero__art { display: none; }
.hero.has-video .hero__video { grid-column: 2; grid-row: 1; align-self: center; }
@media (max-width: 960px) {
    .hero.has-video .hero__inner { grid-template-columns: 1fr; }
    .hero.has-video .hero__video { grid-column: 1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
    .hero-slide.is-active img { animation: none; }
}

/* ---- video showcase (hero + exam pages) -----------------------------------
   Injected by wgu-widgets.js into [data-video-showcase] when videos exist at
   /static/videos/video-N.mp4. Glassy gradient frame, autoplay muted, prev/next,
   unmute, auto-advance + loop. */
.vshow {
    position: relative; padding: 10px; border-radius: 26px;
    background: linear-gradient(135deg, rgba(96, 165, 250, .55), rgba(29, 78, 216, .18) 45%, rgba(96, 165, 250, .38));
    box-shadow: 0 30px 70px -24px rgba(2, 8, 22, .75), 0 0 0 1px rgba(255, 255, 255, .12) inset;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.vshow__stage { position: relative; border-radius: 18px; overflow: hidden; background: #020617; }
.vshow__stage video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vshow__label {
    position: absolute; top: 12px; left: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--display); font-weight: 600; font-size: 12.5px; letter-spacing: .02em; color: #fff;
    background: rgba(2, 6, 23, .55); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
    padding: 6px 12px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none;
}
.vshow__label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #f87171;
    box-shadow: 0 0 0 0 rgba(248, 113, 113, .6); animation: vshowPulse 2s infinite; }
@keyframes vshowPulse { 70% { box-shadow: 0 0 0 7px rgba(248, 113, 113, 0); } 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); } }
.vshow__btn {
    position: absolute; z-index: 3; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .3); cursor: pointer;
    background: rgba(2, 6, 23, .5); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: background .15s, transform .15s; padding: 0;
}
.vshow__btn:hover { background: rgba(29, 78, 216, .75); transform: scale(1.07); }
.vshow__btn svg { width: 18px; height: 18px; }
.vshow__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.vshow__next { right: 12px; top: 50%; transform: translateY(-50%); }
.vshow__prev:hover, .vshow__next:hover { transform: translateY(-50%) scale(1.07); }
.vshow__mute { right: 12px; bottom: 14px; }
.vshow__count {
    position: absolute; left: 14px; bottom: 16px; z-index: 3; color: #fff; font-family: var(--display);
    font-weight: 600; font-size: 12px; background: rgba(2, 6, 23, .55); border-radius: 999px; padding: 4px 10px;
    pointer-events: none;
}
.vshow__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3; background: rgba(255, 255, 255, .18); }
.vshow__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sky), #93c5fd); transition: width .25s linear; }
.vshow__expand { right: 12px; top: 12px; }
.vshow__stage video { cursor: zoom-in; }
/* non-hero placements: give it breathing room */
.section .vshow, .post .vshow { max-width: 720px; margin: 0 auto; }
/* a portrait clip in a fixed 16:9 stage (homepage hero): letterbox it, don't cut heads off */
.vshow--pillar .vshow__stage video { object-fit: contain; }
.vshow--single .vshow__prev, .vshow--single .vshow__next, .vshow--single .vshow__count { display: none; }

/* exam-page sidebar (data-video-fit="auto"): the stage takes the video's own shape.
   Height is the fixed side (--vs-h) and the width follows, capped at the 280px column,
   so a 9:16 clip is tall and narrow while a 16:9 one is full-width and short. */
.vshow--auto { --vs-r: .5625; --vs-h: clamp(320px, 66vh, 470px); width: min(100%, calc(var(--vs-h) * var(--vs-r) + 16px)); margin: 20px auto 0; padding: 8px; border-radius: 22px; }
.vshow--auto .vshow__stage { border-radius: 15px; }
.vshow--auto .vshow__stage video { aspect-ratio: var(--vs-r); object-fit: contain; }
.vshow--auto .vshow__label { display: none; }
.vshow--auto .vshow__btn { width: 34px; height: 34px; }
.vshow--auto .vshow__btn svg { width: 16px; height: 16px; }
.vshow--auto .vshow__prev { left: 8px; } .vshow--auto .vshow__next, .vshow--auto .vshow__mute, .vshow--auto .vshow__expand { right: 8px; }
/* ...and back to full size once enlarged */
.vshow--auto.vshow--big { width: 100%; margin: 0; padding: 10px; border-radius: 26px; }
.vshow--auto.vshow--big .vshow__label { display: inline-flex; }
.vshow--auto.vshow--big .vshow__prev { left: 12px; } .vshow--auto.vshow--big .vshow__next, .vshow--auto.vshow--big .vshow__mute { right: 12px; }

/* enlarged overlay (lightbox) mode */
.vshow-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; }
.vshow-overlay[hidden] { display: none; }
.vshow-overlay__backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* --vs-r = width/height of the CURRENT video (set by the script): enlarged, the
   player is as big as the window allows IN THE VIDEO'S OWN SHAPE - never cropped */
.vshow-overlay__body { --vs-r: 1.7778; position: relative; z-index: 1; width: min(1100px, 92vw, calc(82vh * var(--vs-r))); animation: vshowZoom .25s ease; }
.vshow--big .vshow__stage video { aspect-ratio: var(--vs-r); object-fit: contain; }
@keyframes vshowZoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.vshow-overlay__close {
    position: absolute; top: 18px; right: 22px; z-index: 2; width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35); background: rgba(2, 6, 23, .55); color: #fff; font-size: 20px;
    cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .15s, transform .15s;
}
.vshow-overlay__close:hover { background: rgba(185, 28, 28, .8); transform: scale(1.07); }
.vshow--big .vshow__expand { display: none; }
.vshow--big .vshow__stage video { cursor: pointer; }
.vshow--big .vshow__btn { width: 48px; height: 48px; }
.vshow--big .vshow__btn svg { width: 21px; height: 21px; }
@media (prefers-reduced-motion: reduce) { .vshow-overlay__body { animation: none; } }

/* ---- booking form (inline on /premium/, modal everywhere else) ------------
   Markup injected by wgu-widgets.js buildBooking(). */
.svc-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.svc-pills input { position: absolute; opacity: 0; pointer-events: none; }
.svc-pills label {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    font-size: 14px; font-weight: 600; color: var(--muted);
    background: var(--bg-1); border: 1.5px solid var(--line-2); border-radius: 999px;
    padding: 9px 16px; transition: border-color .15s, color .15s, background .15s;
}
.svc-pills label::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); transition: background .15s; }
.svc-pills input:checked + label { color: var(--royal); border-color: var(--royal); background: rgba(29, 78, 216, .07); }
.svc-pills input:checked + label::before { background: var(--royal); }
.svc-pills input:focus-visible + label { outline: 2px solid var(--royal); outline-offset: 2px; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 9px; }
.slot-grid button {
    font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
    color: var(--ink); background: var(--card); border: 1.5px solid var(--line-2);
    border-radius: 9px; padding: 10px 4px; transition: border-color .15s, background .15s, color .15s;
}
.slot-grid button:hover { border-color: var(--royal); color: var(--royal); }
.slot-grid button.on { background: var(--royal); border-color: var(--royal); color: #fff; }
.drop {
    border: 2px dashed var(--line-2); border-radius: var(--radius); padding: 22px; text-align: center;
    color: var(--muted-2); font-size: 14px; cursor: pointer; transition: border-color .15s, color .15s;
}
.drop:hover, .drop.drag { border-color: var(--royal); color: var(--royal); }
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }
.form-note { font-size: 12.5px; color: var(--muted-2); margin-top: 5px; }
.form-alert { display: none; border-radius: 10px; padding: 12px 15px; font-size: 14.5px; margin-bottom: 16px; }
.form-alert.err { display: block; color: #b91c1c; background: rgba(185, 28, 28, .08); border: 1px solid rgba(185, 28, 28, .25); }
html[data-theme="dark"] .form-alert.err { color: #f87171; background: rgba(248, 113, 113, .08); }
.booking-success { text-align: center; padding: 30px 10px; }
/* Uploaded site logo (/static/images/logo.png, server-side upload, not in git).
   Every logo spot is <img.brand-img> followed by the built-in "W" svg: while the
   image exists the svg is hidden; if it 404s, onerror removes the <img> and the
   svg shows again - so a missing file never leaves a broken icon. */
.brand-img { display: block; object-fit: contain; }
.brand-img + svg { display: none !important; }
.nav__brand .brand-img { width: var(--logo-h); height: var(--logo-h); }
/* a navy badge on the dark theme's navy header/footer needs an edge to read */
.nav__brand .brand-img, .site-footer .brand-img { border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(147, 197, 253, .55); }
.book-brand .brand-img { width: 92px; height: 92px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(96, 165, 250, .16), 0 12px 26px -12px rgba(2, 8, 22, .55); }
.ann__band .brand-img { display: inline-block; width: 60px; height: 60px; }
@media (max-width: 600px) { .book-brand .brand-img { width: 78px; height: 78px; } }

/* logo + heading block at the top of the booking form (modal and inline) */
.book-head { text-align: center; }
.book-head p { color: var(--muted); max-width: 520px; margin: 0 auto 22px; }
.book-brand { display: flex; justify-content: center; margin: 0 0 14px; }
.book-brand svg { display: block; border-radius: 17px; box-shadow: 0 0 0 4px rgba(96, 165, 250, .16), 0 12px 26px -12px rgba(2, 8, 22, .55); }
@media (max-width: 600px) { .book-brand svg { width: 60px; height: 60px; } }

/* modal shell */
.book-overlay { position: fixed; inset: 0; z-index: 220; display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow-y: auto; }
.book-overlay[hidden] { display: none; }
.book-overlay__backdrop { position: fixed; inset: 0; background: rgba(2, 6, 23, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.book-overlay__panel {
    position: relative; z-index: 1; width: min(720px, 100%); margin: auto 0;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: 0 40px 90px -30px rgba(2, 8, 22, .8); padding: 28px; animation: bookIn .22s ease;
}
@keyframes bookIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.book-overlay__close {
    position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--line-2); background: var(--card-2); color: var(--muted); font-size: 17px;
    cursor: pointer; transition: color .15s, border-color .15s;
}
.book-overlay__close:hover { color: #b91c1c; border-color: #b91c1c; }
@media (prefers-reduced-motion: reduce) { .book-overlay__panel { animation: none; } }

/* ---- search (exam finder) ------------------------------------------------ */
.search { position: relative; max-width: 560px; }
.search__input {
    width: 100%; padding: 15px 48px 15px 18px; font: inherit; font-size: 16px;
    color: var(--ink); background: #fff; border: 1.5px solid var(--line-2);
    border-radius: 13px; box-shadow: var(--shadow); outline: none;
}
.search__input:focus { border-color: var(--royal); box-shadow: var(--glow); }
.search__icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--muted-2); pointer-events: none; }
.search__results {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; display: none;
    background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
    max-height: 340px; overflow-y: auto; padding: 6px;
}
.search.open .search__results { display: block; }
.search__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; color: var(--ink); }
.search__item:hover, .search__item.active { background: var(--bg-1); color: var(--ink); }
.search__item .code {
    flex: 0 0 auto; font-family: var(--display); font-weight: 700; font-size: 12.5px;
    color: var(--royal); background: rgba(29, 78, 216, .08); border-radius: 7px; padding: 4px 8px;
}
.search__item .t { font-size: 14.5px; }
.search__empty { padding: 12px 14px; font-size: 14px; color: var(--muted-2); }

/* ---- cards / grids ------------------------------------------------------- */
.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 26px; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover { transform: translateY(-3px); border-color: rgba(29, 78, 216, .35); box-shadow: var(--glow); }
.card__icon {
    width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
    font-size: 21px; border-radius: 12px; margin-bottom: 16px; color: #fff;
    background: linear-gradient(135deg, var(--royal), var(--navy-2));
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 15px; margin: 0; }

/* exam card (featured / recent) */
.exam-card { display: flex; flex-direction: column; gap: 10px; }
.exam-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.exam-card .code { font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--royal); background: rgba(29, 78, 216, .08); border-radius: 8px; padding: 5px 10px; }
.exam-card h3 { font-size: 16.5px; margin: 0; }
.exam-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.chip { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--bg-1); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; }
.chip--easy { color: var(--green); background: rgba(5, 150, 105, .08); border-color: rgba(5, 150, 105, .2); }
.chip--medium { color: #b45309; background: rgba(180, 83, 9, .08); border-color: rgba(180, 83, 9, .2); }
.chip--hard { color: #b91c1c; background: rgba(185, 28, 28, .07); border-color: rgba(185, 28, 28, .2); }

/* ---- steps --------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 26px 26px 26px; box-shadow: var(--shadow); }
.step::before {
    counter-increment: step; content: counter(step);
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px; margin-bottom: 14px;
    font-family: var(--display); font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--royal), var(--navy-2));
}
.step h3 { font-size: 17px; }
.step p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* ---- CTA band ------------------------------------------------------------ */
.cta-band {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, var(--royal) 130%);
    border-radius: var(--radius-lg); padding: 52px 40px; text-align: center; color: #fff;
    box-shadow: 0 24px 60px -24px rgba(11, 37, 69, .55);
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .82); max-width: 560px; margin: 0 auto 26px; }

/* ---- FAQ ----------------------------------------------------------------- */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0 20px; box-shadow: var(--shadow); }
.faq details[open] { border-color: rgba(29, 78, 216, .3); }
.faq summary {
    cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
    padding: 17px 0; font-family: var(--display); font-weight: 600; font-size: 15.5px; color: var(--navy);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 20px; color: var(--royal); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); font-size: 14.5px; padding-bottom: 18px; margin: 0; }

/* ---- contact / forms ----------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.contact-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.form-row input, .form-row textarea, .form-row select {
    width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; color: var(--ink);
    background: #fff; border: 1.5px solid var(--line-2); border-radius: 10px; outline: none;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus { border-color: var(--royal); }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.contact-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); }

/* ---- footer -------------------------------------------------------------- */
.site-footer { background: var(--navy); color: rgba(255, 255, 255, .78); margin-top: 72px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; padding: 56px 0 40px; }
.footer-brand { font-family: var(--display); font-weight: 700; font-size: 18px; color: #fff; display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.footer-brand img, .footer-brand svg { height: 34px; width: auto; }
.site-footer h4 { color: #fff; font-size: 14.5px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-links a { color: rgba(255, 255, 255, .72); font-size: 14.5px; }
.footer-links a:hover { color: #fff; }
.footer-note { font-size: 13px; color: rgba(255, 255, 255, .55); max-width: 420px; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 18px 0; font-size: 13.5px; color: rgba(255, 255, 255, .55); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

/* ---- reading progress / article layer (exam pages, Phase 2) -------------- */
.readbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 90; background: linear-gradient(90deg, var(--royal), var(--sky)); }
.post-wrap { background: var(--bg-0); }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 44px; padding: 40px 0 72px; }
.post { min-width: 0; }
.crumb { font-size: 13.5px; color: var(--muted-2); margin-bottom: 18px; }
.crumb a { color: var(--muted-2); }
.crumb a:hover { color: var(--royal); }
.post-cat { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--royal); margin-bottom: 10px; }
.post-dek { font-size: 18px; color: var(--muted); margin: 6px 0 22px; }
.post-byline { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.byline-av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--royal), var(--navy-2)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--display); }
.byline-meta { font-size: 13.5px; color: var(--muted-2); }
.byline-meta b { display: block; color: var(--navy); font-size: 14.5px; }
.post-share { display: flex; gap: 8px; margin-left: auto; }
.post-share a, .post-share button {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; border: 1px solid var(--line-2); background: #fff; color: var(--muted); cursor: pointer; font-size: 15px;
}
.post-share a:hover, .post-share button:hover { color: var(--royal); border-color: var(--royal); }
.post-share .copied { color: var(--green); border-color: var(--green); }
.post-hero { border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 30px; background: linear-gradient(135deg, var(--navy), var(--royal)); }
.post-hero img { display: block; width: 100%; }
.prose { font-size: 16.5px; color: var(--ink); }
.prose h2 { margin: 1.6em 0 .6em; padding-top: .2em; }
.prose h3 { margin: 1.3em 0 .5em; }
.prose ul, .prose ol { padding-left: 24px; color: var(--ink); }
.prose li { margin-bottom: .45em; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose blockquote { border-left: 3px solid var(--royal); margin: 1.4em 0; padding: .2em 0 .2em 18px; color: var(--muted); }
.prose p.prose-key {
    background: rgba(29, 78, 216, .06); border: 1px solid rgba(29, 78, 216, .18);
    border-left: 4px solid var(--royal); border-radius: 10px; padding: 16px 18px; color: var(--ink);
}
.post-toc { position: sticky; top: calc(var(--nav-h) + 20px); align-self: start; background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; font-size: 14px; }
.post-toc .toc-h { font-family: var(--display); font-weight: 700; color: var(--navy); margin-bottom: 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.post-toc a { display: block; color: var(--muted); padding: 5px 0; border-left: 2px solid transparent; padding-left: 10px; margin-left: -12px; }
.post-toc a:hover { color: var(--royal); }
.post-toc a.active { color: var(--royal); border-left-color: var(--royal); font-weight: 600; }
.post-related { margin-top: 48px; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: transform .18s, box-shadow .18s; display: flex; flex-direction: column; }
.bcard:hover { transform: translateY(-3px); box-shadow: var(--glow); }
.bcard-thumb { aspect-ratio: 1200/630; background: linear-gradient(135deg, var(--navy), var(--royal)); position: relative; }
.bcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bcard-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bcard-body h3 { font-size: 16px; margin: 0; }
.bcard-body p { font-size: 14px; color: var(--muted); margin: 0; }
.bcard .more { margin-top: auto; font-weight: 600; font-size: 14px; color: var(--royal); }
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.pagination a, .pagination span {
    min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
    padding: 0 12px; border-radius: 9px; border: 1px solid var(--line-2); color: var(--ink); font-size: 14.5px;
}
.pagination a:hover { border-color: var(--royal); color: var(--royal); }
.pagination .is-current { background: var(--royal); border-color: var(--royal); color: #fff; font-weight: 600; }
.pagination .is-disabled { opacity: .4; pointer-events: none; }

/* ---- page hero (inner pages) --------------------------------------------- */
.page-hero { background: linear-gradient(180deg, #f8fafd, #fff); border-bottom: 1px solid var(--line); padding: 52px 0 40px; }
.page-hero h1 { margin-bottom: 6px; }
.page-hero p { color: var(--muted); max-width: 640px; margin: 0; }

/* ---- theme toggle button -------------------------------------------------- */
.theme-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
    background: transparent; border: 1.5px solid var(--line-2); color: var(--navy);
    transition: border-color .15s, color .15s, transform .15s;
}
.theme-btn:hover { border-color: var(--royal); color: var(--royal); transform: translateY(-1px); }
.theme-btn .i-moon { display: none; }
html[data-theme="dark"] .theme-btn .i-moon { display: block; }
html[data-theme="dark"] .theme-btn .i-sun { display: none; }

/* ---- dark theme ----------------------------------------------------------- */
html[data-theme="dark"] {
    --navy:        #dbe7ff;   /* headings flip to near-white blue */
    --navy-2:      #16294d;
    --royal:       #60a5fa;
    --royal-2:     #93c5fd;
    --sky:         #60a5fa;
    --bg-0:        #0b1120;
    --bg-1:        #0f1a30;
    --bg-2:        #16233d;
    --ink:         #e2e8f0;
    --muted:       #94a3b8;
    --muted-2:     #7c8aa0;
    --card:        #111d36;
    --card-2:      #0f1a30;
    --line:        rgba(148, 163, 184, .14);
    --line-2:      rgba(148, 163, 184, .28);
    --shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -16px rgba(0, 0, 0, .55);
    --glow:        0 0 0 1px rgba(96, 165, 250, .3), 0 14px 44px -12px rgba(37, 99, 235, .35);
}
html[data-theme="dark"] body { background: var(--bg-0); }
html[data-theme="dark"] .site-header { background: rgba(11, 17, 32, .85); }
html[data-theme="dark"] .nav__drop,
html[data-theme="dark"] .search__input,
html[data-theme="dark"] .search__results { background: var(--card); color: var(--ink); }
html[data-theme="dark"] .search__item:hover,
html[data-theme="dark"] .search__item.active { background: var(--bg-2); }
html[data-theme="dark"] .nav__drop a:hover { background: var(--bg-2); }
html[data-theme="dark"] .hero { background:
    radial-gradient(900px 460px at 88% -10%, rgba(37, 99, 235, .16), transparent 60%),
    radial-gradient(700px 420px at 0% 110%, rgba(96, 165, 250, .07), transparent 55%),
    linear-gradient(180deg, #0d1526 0%, #0b1120 100%); }
html[data-theme="dark"] .page-hero { background: linear-gradient(180deg, #0d1526, #0b1120); }
html[data-theme="dark"] .hero__art svg rect[fill="#ffffff"] { fill: #111d36; }
html[data-theme="dark"] .post-share a, html[data-theme="dark"] .post-share button,
html[data-theme="dark"] .form-row input, html[data-theme="dark"] .form-row textarea,
html[data-theme="dark"] .form-row select { background: var(--card); color: var(--ink); }
html[data-theme="dark"] .btn--ghost { color: var(--ink); }
html[data-theme="dark"] .exam-card .code,
html[data-theme="dark"] .search__item .code { background: rgba(96, 165, 250, .14); }
html[data-theme="dark"] .chip { background: var(--bg-2); }
html[data-theme="dark"] .chip--easy { color: #34d399; background: rgba(52, 211, 153, .1); border-color: rgba(52, 211, 153, .25); }
html[data-theme="dark"] .chip--medium { color: #fbbf24; background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .25); }
html[data-theme="dark"] .chip--hard { color: #f87171; background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .25); }
html[data-theme="dark"] .site-footer { background: #0d1526; border-top: 1px solid var(--line); }
/* --navy flips light for headings in dark mode — components that used it as a
   BACKGROUND must pin the literal navy gradient instead */
html[data-theme="dark"] .cta-band { background: linear-gradient(135deg, #0b2545 0%, #13315c 55%, #1d4ed8 130%); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .post-hero,
html[data-theme="dark"] .bcard-thumb { background: linear-gradient(135deg, #13315c, #1d4ed8); }
html[data-theme="dark"] .prose p.prose-key { background: rgba(96, 165, 250, .08); border-color: rgba(96, 165, 250, .25); border-left-color: var(--royal); }
html[data-theme="dark"] .byline-meta b { color: var(--ink); }
html[data-theme="dark"] .faq summary { color: var(--ink); }
html[data-theme="dark"] .nav__links { }
@media (max-width: 640px) {
    html[data-theme="dark"] .nav__links { background: var(--card); }
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 960px) {
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
    .grid--3 { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: 1fr; }
    .hero__inner { grid-template-columns: 1fr; gap: 30px; padding: 52px 0 46px; }
    .hero__art { display: none; }
    .post-layout { grid-template-columns: 1fr; }
    .post-toc { position: static; order: -1; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    :root { --logo-h: 32px; --nav-h: 62px; }
    .section { padding: 52px 0; }
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: 1fr; }
    .nav__links {
        display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0; background: #fff;
        border-bottom: 1px solid var(--line); box-shadow: var(--shadow); padding: 8px 14px 14px;
    }
    .nav__links.is-open { display: flex; }
    .nav__links li { border-bottom: 1px solid var(--line); }
    .nav__links li:last-child { border-bottom: 0; }
    .nav__links a { display: block; padding: 13px 6px; }
    .nav__m-only { display: block; }
    .nav__toggle { display: block; }
    .nav__actions .btn { display: none; }
    .cta-band { padding: 40px 22px; }
    .footer-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* ---- WhatsApp chat widget ------------------------------------------------
   Floating launcher + in-page chat panel. Sits BELOW the video overlay (200)
   and booking modal (220) so those always cover it. Colours come from the
   theme tokens, so dark mode needs no extra rules; WhatsApp green is used
   only on the launcher and the send button, where it signals the channel. */
/* ---- announcement pop-up (see buildAnnounce) ------------------------------
   .ann-wrap is a full-viewport layer: a centred card over a dimmed backdrop
   (click outside closes) by default; .ann-wrap--corner is the compact
   bottom-left card with no backdrop (Admin > Announcements > Position).
   z 160 keeps it above the WhatsApp launcher (.wa, z 150) and below the
   booking (220) and video (200) overlays. The logo band uses literal navy:
   var(--navy) flips to pale blue in dark mode and would put white text on
   it (same lesson as the WhatsApp header). */
.ann-wrap { position: fixed; inset: 0; z-index: 160; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(11, 37, 69, .48); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    animation: annFade .25s ease both; }
.ann-wrap--out { animation: annFadeOut .22s ease forwards; }
.ann-wrap--still, .ann-wrap--still.ann-wrap--out { animation: none; }
.ann-wrap--still.ann-wrap--out { display: none; }
.ann-wrap--corner { display: block; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; animation: none; }
@keyframes annFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes annFadeOut { to { opacity: 0; } }
.ann { position: relative; width: min(400px, 100%); max-height: calc(100vh - 32px); overflow: auto; pointer-events: auto;
    background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 18px;
    box-shadow: 0 2px 6px rgba(11, 37, 69, .08), 0 30px 60px -20px rgba(11, 37, 69, .45);
    font-family: var(--font); animation: annIn .32s cubic-bezier(.2, .8, .25, 1) both; }
.ann-wrap--corner .ann { position: fixed; left: 22px; bottom: 22px; width: min(380px, calc(100vw - 44px)); max-height: none; overflow: hidden; border-radius: 16px; }
.ann--still { animation: none; }
.ann--out { animation: annOut .26s ease forwards; }
.ann--still.ann--out { animation: none; display: none; }
@keyframes annIn { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes annOut { to { opacity: 0; transform: translateY(16px); } }
.ann__band { position: relative; background: linear-gradient(135deg, #0b2545, #13315c); padding: 16px; text-align: center; line-height: 0; }
.ann__band svg { display: inline-block; }
.ann__close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; border: 0;
    background: rgba(255, 255, 255, .14); color: #fff; font-size: 13px; line-height: 30px; cursor: pointer; }
.ann__close:hover { background: rgba(255, 255, 255, .26); }
.ann__body { padding: 16px 18px 18px; }
.ann__h { font-family: var(--display); font-size: 16px; line-height: 1.3; margin: 0 0 8px; color: var(--ink); }
.ann__p { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0 0 10px; }
.ann__u { font-size: 12.5px; font-weight: 600; color: #b45309; margin: 0 0 10px; }
.ann__cta { display: block; width: 100%; box-sizing: border-box; text-align: center; color: #fff !important; font-family: var(--display);
    font-weight: 700; font-size: 14.5px; padding: 12px 16px; border: 0; border-radius: 12px; text-decoration: none; cursor: pointer; }
.ann__cta--book { background: linear-gradient(135deg, #1d4ed8, #2563eb); }   /* opens the Request-a-session form */
.ann__cta--wa { background: #25d366; margin-top: 8px; }
.ann__cta:hover { filter: brightness(1.06); }
.ann__no { display: block; width: 100%; margin-top: 8px; background: none; border: 0; color: var(--muted); font-size: 12.5px; cursor: pointer; padding: 6px; font-family: var(--font); }
.ann__no:hover { color: var(--ink); text-decoration: underline; }
.ann__bar { height: 3px; background: var(--line); }
.ann__bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--royal), var(--sky)); transition: width .1s linear; }
.ann--nobar .ann__bar { display: none; }
@media (max-width: 640px) {
    /* phones: still centred, sized to the screen, thumb-sized targets */
    .ann-wrap { padding: 14px; }
    .ann { width: min(92vw, 400px); max-height: calc(100vh - 28px); border-radius: 16px; }
    .ann__body { padding: 16px 16px 18px; }
    .ann__h { font-size: 17px; }
    .ann__p { font-size: 14.5px; }
    .ann__cta { padding: 14px 16px; font-size: 15px; }
    .ann__close { width: 36px; height: 36px; line-height: 36px; font-size: 15px; }
    .ann__no { padding: 10px; font-size: 13.5px; }
    /* corner mode becomes a bottom sheet */
    .ann-wrap--corner .ann { left: 0; right: 0; bottom: 0; width: auto; border-radius: 16px 16px 0 0; border-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom, 0); }
}
@media (prefers-reduced-motion: reduce) { .ann-wrap, .ann-wrap--out, .ann, .ann--out { animation: none; } }
html[data-theme="dark"] .ann-wrap { background: rgba(2, 6, 23, .62); }
html[data-theme="dark"] .ann-wrap--corner { background: none; }
html[data-theme="dark"] .ann { box-shadow: 0 2px 6px rgba(0, 0, 0, .5), 0 30px 60px -20px rgba(0, 0, 0, .8); }
html[data-theme="dark"] .ann__u { color: #fbbf24; }

.wa { position: fixed; right: 22px; bottom: 22px; z-index: 150; font-family: var(--font); }
.wa__fab {
    position: relative; width: 60px; height: 60px; border-radius: 50%; border: 0; cursor: pointer;
    display: grid; place-items: center; margin-left: auto;
    background: linear-gradient(145deg, #25d366, #128c7e); color: #fff;
    box-shadow: 0 10px 30px -8px rgba(18, 140, 126, .6), 0 2px 6px rgba(2, 8, 22, .2);
    transition: transform .18s ease, box-shadow .18s ease;
}
.wa__fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 38px -10px rgba(18, 140, 126, .7); }
.wa__fab:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.wa__fab svg { width: 30px; height: 30px; fill: currentColor; transition: opacity .18s ease, transform .18s ease; }
.wa__fab .ic-x { position: absolute; width: 24px; height: 24px; opacity: 0; transform: rotate(-90deg); }
.wa.open .wa__fab .ic-wa { opacity: 0; transform: rotate(90deg); }
.wa.open .wa__fab .ic-x  { opacity: 1; transform: rotate(0); }
/* Attention ring — one soft pulse, not a strobe. */
.wa__fab::after {
    content: ''; position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid rgba(37, 211, 102, .5); animation: waPulse 2.6s ease-out infinite;
}
.wa.open .wa__fab::after { display: none; }
@keyframes waPulse { 0% { transform: scale(.9); opacity: .8; } 70%, 100% { transform: scale(1.25); opacity: 0; } }

/* nudge bubble */
.wa__tip {
    position: absolute; right: 74px; bottom: 14px; width: max-content; max-width: 232px;
    background: var(--card); color: var(--ink); border: 1px solid var(--line);
    border-radius: 14px; padding: 11px 34px 11px 14px; font-size: .86rem; line-height: 1.4;
    box-shadow: var(--shadow); opacity: 0; transform: translateX(10px); pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.wa__tip.show { opacity: 1; transform: none; pointer-events: auto; }
.wa__tip button {
    position: absolute; top: 5px; right: 7px; border: 0; background: none; cursor: pointer;
    color: var(--muted-2); font-size: 16px; line-height: 1; padding: 3px;
}

/* panel */
.wa__panel {
    position: absolute; right: 0; bottom: 74px; width: min(360px, calc(100vw - 44px));
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: 0 30px 70px -24px rgba(2, 8, 22, .55); overflow: hidden;
    display: flex; flex-direction: column;
    opacity: 0; visibility: hidden; transform: translateY(14px) scale(.97); transform-origin: bottom right;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.wa.open .wa__panel { opacity: 1; visibility: visible; transform: none; }
.wa__head {
    display: flex; align-items: center; gap: 11px; padding: 14px 16px; color: #fff;
    /* Literal navy, NOT var(--navy): dark mode inverts that token to a pale
       blue for headings, which would leave this white text unreadable. The
       chat header stays dark in both themes, as chat apps do. */
    background: linear-gradient(135deg, #0b2545, #13315c);
}
.wa__ava {
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: linear-gradient(145deg, var(--royal-2), var(--sky));
    font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: #fff;
}
.wa__name { font-weight: 600; font-size: .95rem; }
.wa__status { display: flex; align-items: center; gap: 6px; font-size: .76rem; opacity: .85; margin-top: 2px; }
.wa__dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .22); }
.wa__x {
    margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
    background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center;
}
.wa__x:hover { background: rgba(255, 255, 255, .22); }
.wa__x svg { width: 16px; height: 16px; fill: currentColor; }

.wa__body {
    padding: 16px; background: var(--bg-1); min-height: 150px; max-height: min(46vh, 340px);
    overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
}
.wa__bubble {
    align-self: flex-start; max-width: 88%; background: var(--card); color: var(--ink);
    border: 1px solid var(--line); border-radius: 4px 14px 14px 14px;
    padding: 11px 13px; font-size: .88rem; line-height: 1.5; box-shadow: var(--shadow);
    animation: waIn .28s ease both;
}
.wa__bubble .g { font-weight: 600; margin-bottom: 3px; }
.wa__bubble .t { font-size: .68rem; color: var(--muted-2); text-align: right; margin-top: 5px; }
@keyframes waIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wa__typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 4px 14px 14px 14px; }
.wa__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-2); animation: waBlink 1.3s infinite; }
.wa__typing i:nth-child(2) { animation-delay: .18s; }
.wa__typing i:nth-child(3) { animation-delay: .36s; }
@keyframes waBlink { 0%, 60%, 100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.wa__qr { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.wa__qb {
    border: 1px solid var(--line-2); background: var(--card); color: var(--royal);
    border-radius: 999px; padding: 7px 13px; font-size: .8rem; font-weight: 600; cursor: pointer;
    font-family: inherit; animation: waIn .3s ease both; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.wa__qb:hover { background: var(--royal); border-color: var(--royal); color: #fff; }

.wa__in { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--card); border-top: 1px solid var(--line); }
.wa__inp {
    flex: 1; border: 1px solid var(--line-2); background: var(--bg-1); color: var(--ink);
    border-radius: 999px; padding: 10px 15px; font-size: .88rem; font-family: inherit;
}
.wa__inp:focus { outline: none; border-color: var(--royal); box-shadow: 0 0 0 3px rgba(29, 78, 216, .15); }
.wa__send {
    width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; cursor: pointer;
    background: linear-gradient(145deg, #25d366, #128c7e); color: #fff; display: grid; place-items: center;
}
.wa__send:hover { filter: brightness(1.07); }
.wa__send svg { width: 18px; height: 18px; fill: currentColor; }
.wa__ft { padding: 8px 12px 11px; text-align: center; font-size: .72rem; color: var(--muted-2); background: var(--card); }

@media (max-width: 480px) {
    .wa { right: 16px; bottom: 16px; }
    .wa__panel { width: calc(100vw - 32px); }
    .wa__tip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .wa__fab::after { animation: none; }
    .wa__panel, .wa__fab, .wa__bubble, .wa__qb { transition: none; animation: none; }
}

/* ---- practice quiz -------------------------------------------------------
   The generator emits real markup (ol > li with options and a <details>
   explanation) so it is crawlable and works with JS off. wgu-widgets.js
   upgrades it in place: options become buttons, the explanation reveals on
   answer, and a score appears at the end. */
.quiz { margin: 28px 0 8px; }
.quiz__list { list-style: none; margin: 0; padding: 0; counter-reset: quizq; }
.quiz__q {
    counter-increment: quizq; position: relative;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.quiz__stem { font-weight: 600; margin: 0 0 14px; padding-left: 34px; }
.quiz__stem::before {
    content: counter(quizq); position: absolute; left: 22px; top: 20px;
    width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    background: var(--royal); color: #fff; font-size: .78rem; font-weight: 700;
}
.quiz__opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.quiz__opt {
    border: 1.5px solid var(--line-2); border-radius: 11px; padding: 11px 14px;
    font-size: .93rem; line-height: 1.45; background: var(--card-2); color: var(--ink);
}
/* interactive only once the widget has upgraded the block */
.quiz.is-live .quiz__opt { cursor: pointer; transition: border-color .14s ease, background .14s ease; }
.quiz.is-live .quiz__opt:hover:not(.is-locked) { border-color: var(--royal); background: var(--card); }
.quiz.is-live .quiz__opt:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.quiz__opt.is-correct { border-color: var(--green); background: rgba(5, 150, 105, .1); font-weight: 600; }
.quiz__opt.is-wrong { border-color: #dc2626; background: rgba(220, 38, 38, .09); }
.quiz__opt .mark { float: right; font-weight: 700; }
.quiz__opt.is-correct .mark { color: var(--green); }
.quiz__opt.is-wrong .mark { color: #dc2626; }
.quiz__why { margin-top: 13px; font-size: .9rem; line-height: 1.6; }
.quiz__why summary { cursor: pointer; color: var(--royal); font-weight: 600; }
.quiz__why[open] summary { margin-bottom: 7px; }
.quiz__why p { margin: 0; color: var(--muted); }
.quiz.is-live .quiz__why { display: none; }          /* revealed on answer */
.quiz.is-live .quiz__why.is-shown { display: block; }
.quiz__score {
    margin-top: 18px; padding: 18px 20px; border-radius: var(--radius);
    background: var(--bg-1); border: 1px solid var(--line); text-align: center;
}
.quiz__score b { font-size: 1.15rem; }
.quiz__score p { margin: 6px 0 0; color: var(--muted); font-size: .92rem; }
.quiz__again {
    margin-top: 12px; border: 1.5px solid var(--line-2); background: var(--card);
    color: var(--royal); border-radius: 999px; padding: 8px 18px; font-weight: 600;
    cursor: pointer; font-family: inherit; font-size: .88rem;
}
.quiz__again:hover { border-color: var(--royal); }
@media (prefers-reduced-motion: reduce) { .quiz.is-live .quiz__opt { transition: none; } }