/* ==========================================================================
   CPE Today design system
   Dark-mode-native, blue/orange brand, Space Grotesk display + Inter body.
   Tokens first; components below. No framework — small, fast, ours.
   ========================================================================== */

:root {
  /* Brand */
  --blue-300: #7fb3ff;
  --blue-400: #4f8bff;
  --blue-500: #2f6bff;
  --blue-600: #1f4fd8;
  --cyan-400: #22d3ee;
  --orange-400: #ff8c3b;
  --orange-500: #f97316;
  --orange-600: #ea580c;

  /* Dark theme (default) */
  --bg: #070c1b;
  --bg-elev: #0d1428;
  --surface: #111a33;
  --surface-2: #16203f;
  --border: rgba(148, 163, 204, 0.16);
  --border-strong: rgba(148, 163, 204, 0.3);
  --text: #e9edf8;
  --text-2: #b9c2dc;
  --muted: #8b96b8;
  --accent: var(--blue-400);
  --accent-ink: #ffffff;
  --cta: var(--orange-500);
  --cta-hover: var(--orange-400);
  --cta-ink: #1a0d02;
  --star: #fbbf24;
  --shadow: 0 12px 32px rgba(2, 6, 23, 0.55);
  --glow: 0 0 80px rgba(47, 107, 255, 0.25);
  --header-bg: rgba(7, 12, 27, 0.82);
  --hero-grid: rgba(127, 179, 255, 0.07);

  --radius: 14px;
  --radius-sm: 9px;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --container: 1200px;

  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #f5f7fd;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #eef2fb;
  --border: rgba(30, 46, 96, 0.12);
  --border-strong: rgba(30, 46, 96, 0.24);
  --text: #0e1633;
  --text-2: #3a4568;
  --muted: #5d6a90;
  --accent: var(--blue-600);
  --cta: var(--orange-600);
  --cta-hover: var(--orange-500);
  --cta-ink: #ffffff;
  --shadow: 0 10px 30px rgba(20, 35, 90, 0.10);
  --glow: 0 0 80px rgba(47, 107, 255, 0.10);
  --header-bg: rgba(245, 247, 253, 0.85);
  --hero-grid: rgba(31, 79, 216, 0.06);
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* `hidden` means hidden — always.
   The attribute only sets display:none in the browser's own stylesheet, so ANY
   author rule with a display beats it: `.card { display: flex }` on an element
   marked `hidden` renders it anyway. That's caught us four times now (the
   assessment scorecard shipped visible-but-empty above its own form), and each
   time it was patched one element at a time — which is why the fourth one
   happened. This settles it for every element, present and future. */
[hidden] { display: none !important; }

/* Where the sticky site chrome ends — what a sticky element must sit below.
   Flush, not merely clear of it: a few pixels of gap lets content peek through
   underneath, so the element reads as a stray line floating over the text
   rather than part of the header. Staging wears an extra 32px banner, so a
   single hardcoded offset is right in exactly one of the two environments —
   and staging is the one we look at all day. */
:root { --sticky-top: 69px; }
body.staging { --sticky-top: 101px; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select { font: inherit; color: inherit; }
main { flex: 1; }
::selection { background: var(--blue-500); color: #fff; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }

.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 200;
  background: var(--cta); color: var(--cta-ink); padding: 10px 18px; border-radius: 8px;
}
.skip-link:focus { left: 8px; }

/* --------------------------------------------------------------------------
   Staging banner
   -------------------------------------------------------------------------- */
.staging-banner {
  position: sticky; top: 0; z-index: 110;
  height: 32px; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(
    -45deg,
    #dc2626 0 26px,
    #8f1414 26px 52px
  );
  color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em;
  padding-inline: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.staging .site-header { top: 32px; }
body.staging .buy-card { top: 120px; }

/* Admin quick-access bar — public pages, admins only (partials/admin_bar.html).
   Non-sticky so it doesn't disturb the sticky staging-banner/header stack; sits
   at the top of the document and scrolls away. Dark, distinct from the site. */
.admin-bar { position: relative; z-index: 200; background: #0f172a; color: #e2e8f0;
  border-bottom: 1px solid rgba(255, 255, 255, .08); }
.admin-bar-inner { display: flex; align-items: center; gap: 2px; min-height: 38px; flex-wrap: wrap; }
.admin-bar a { color: #cbd5e1; }
.ab-brand { font-weight: 700; color: #fff; padding: 8px 16px 8px 0; }
.ab-group { position: relative; }
.ab-group > button { display: inline-flex; align-items: center; gap: 5px; background: none;
  border: 0; cursor: pointer; color: #cbd5e1; font: 500 13px var(--font-body);
  padding: 9px 11px; border-radius: 7px; }
.ab-group:hover > button, .ab-group:focus-within > button,
.ab-link:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.ab-panel { display: none; position: absolute; top: 100%; left: 0; min-width: 190px;
  background: #1e293b; border: 1px solid rgba(255, 255, 255, .10); border-radius: 10px;
  padding: 6px; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); z-index: 210; }
.ab-group:hover > .ab-panel, .ab-group:focus-within > .ab-panel { display: block; }
.ab-panel a { display: block; padding: 8px 12px; border-radius: 6px; white-space: nowrap; font-size: 13px; }
.ab-panel a:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.ab-link { padding: 9px 11px; border-radius: 7px; font-size: 13px; }
.ab-spacer { margin-left: auto; }
.ab-who { color: #94a3b8; font-size: 12.5px; padding: 0 8px; }
@media (max-width: 720px) { .ab-who { display: none; } }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex; align-items: center; gap: 24px;
  height: 68px;
}
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.logo-tile {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  background: #fff;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(47, 107, 255, 0.25);
}
.logo-tile img { width: 28px; height: 28px; }
.logo em { font-style: normal; color: var(--accent); }

.main-nav { display: flex; gap: 2px; align-items: center; }
.nicon { flex: none; opacity: .72; }
.drawer-head, .drawer-actions, .drawer-highlights, .nav-overlay { display: none; }
.main-nav > a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 8px; font-weight: 500; font-size: 15px; color: var(--text-2);
  transition: color .15s, background .15s;
}
.main-nav > a:hover, .main-nav > a[aria-current="page"] { color: var(--text); background: var(--surface-2); }
.nav-search { display: none; }

.nav-group { position: relative; }
.nav-drop {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 8px 14px; border-radius: 8px; font-weight: 500; font-size: 15px; color: var(--text-2);
  transition: color .15s, background .15s;
}
.nav-drop .nav-caret { transition: rotate .15s; margin-top: 1px; }
.nav-group:hover .nav-drop, .nav-group:focus-within .nav-drop { color: var(--text); background: var(--surface-2); }
.nav-group:hover .nav-drop .nav-caret, .nav-group:focus-within .nav-drop .nav-caret { rotate: 180deg; }
.drop-panel {
  position: absolute; top: 100%; left: 0; min-width: 240px; width: max-content; max-width: 360px; z-index: 120;
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: var(--shadow); padding: 8px; display: none;
}
/* Right-edge groups (Who We Serve, Tools) open leftward so wide panels stay on screen */
.main-nav > div.nav-group:nth-last-of-type(-n+2) .drop-panel { left: auto; right: 0; }
.nav-group:hover .drop-panel, .nav-group:focus-within .drop-panel { display: block; }
.drop-panel a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--text-2); white-space: nowrap; }
.drop-panel a:hover { background: var(--surface-2); color: var(--text); }
.drop-panel .drop-all { border-top: 1px solid var(--border); margin-top: 6px; color: var(--accent); font-weight: 600; }
.drop-panel .drop-feature {
  align-items: flex-start; gap: 10px; padding: 10px 12px; margin-bottom: 2px;
  background: color-mix(in srgb, var(--accent) 8%, transparent); font-size: 18px;
}
.drop-panel .drop-feature span { display: flex; flex-direction: column; }
.drop-panel .drop-feature b { font-size: 14px; color: var(--text); }
.drop-panel .drop-feature em { font-style: normal; font-size: 12px; color: var(--muted); }
.drop-panel .drop-sep { height: 1px; background: var(--border); margin: 6px 0; }

.header-actions { margin-left: auto; }

.suggest-panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 340px; z-index: 120; }
.suggest-box {
  background: var(--bg-elev); border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: var(--shadow); overflow: hidden; padding: 6px;
  max-height: min(70vh, 560px); overflow-y: auto;
}
.suggest-box .sg h5 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); padding: 10px 12px 4px; font-family: var(--font-body);
}
.suggest-box .sg a { display: block; padding: 8px 12px; border-radius: 8px; }
.suggest-box .sg a:hover, .suggest-box .sg a:focus { background: var(--surface-2); }
.suggest-box .sg-title { display: block; font-size: 14px; font-weight: 500; line-height: 1.35; }
.suggest-box .sg-sub { display: block; font-size: 12px; color: var(--muted); }
.suggest-box .sg-all {
  display: block; text-align: center; padding: 11px; margin-top: 4px;
  border-top: 1px solid var(--border); color: var(--accent); font-weight: 600; font-size: 13.5px;
}
.suggest-box .sg-all:hover { background: var(--surface-2); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center;
  color: var(--text-2); transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 10px; font-weight: 600; font-size: 15px;
  transition: transform .15s, box-shadow .15s, background .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-cta { background: var(--cta); color: var(--cta-ink); box-shadow: 0 6px 20px rgba(249, 115, 22, 0.35); }
.btn-cta:hover { background: var(--cta-hover); }
.btn-primary { background: var(--blue-500); color: #fff; box-shadow: 0 6px 20px rgba(47, 107, 255, 0.35); }
.btn-primary:hover { background: var(--blue-400); }
.btn-ghost { border: 1px solid var(--border-strong); color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-lg { padding: 15px 30px; font-size: 16px; border-radius: 12px; }
.btn-block { width: 100%; }

.nav-toggle { display: none; }

@media (max-width: 1080px) {
  .header-cta { display: none; }
}
/* Seven top-level items: shed the top-bar icons before anything overflows
   (panel links keep theirs — this only trims the horizontal bar). */
@media (max-width: 1280px) and (min-width: 861px) {
  .main-nav > a > .nicon, .main-nav > .nav-group > .nav-drop > .nicon { display: none; }
  .main-nav > a, .nav-drop { padding: 8px 10px; }
}
@media (max-width: 960px) and (min-width: 861px) {
  .main-nav > a, .nav-drop { padding: 8px 7px; font-size: 14px; }
  .header-inner { gap: 10px; }
}
.logo { white-space: nowrap; }
@media (max-width: 860px) {
  /* Solid header on mobile: backdrop-filter would make the sticky header the
     containing block for the fixed drawer/overlay and clip them to its box. */
  .site-header {
    backdrop-filter: none; -webkit-backdrop-filter: none;
    background: var(--bg-elev);
    z-index: 135; /* above the staging banner so the open drawer isn't clipped by it */
  }
  /* Left pop-out drawer */
  .main-nav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 130;
    width: min(320px, 86vw);
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px 12px 24px;
    background: var(--bg-elev); border-right: 1px solid var(--border);
    box-shadow: 8px 0 32px rgba(0, 0, 0, .28);
    overflow-y: auto; visibility: hidden;
    transform: translateX(-105%); transition: transform .24s ease, visibility .24s;
  }
  .main-nav.open { transform: none; visibility: visible; }
  .nav-overlay {
    display: block; position: fixed; inset: 0; z-index: 125;
    background: rgba(7, 12, 27, .55); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .24s ease;
  }
  .nav-overlay.open { opacity: 1; pointer-events: auto; }
  .drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 4px 10px; border-bottom: 1px solid var(--border); margin-bottom: 8px;
  }
  .drawer-title { display: inline-flex; align-items: center; gap: 8px; font: 700 16px var(--font-display); }
  .drawer-title em { color: var(--accent); font-style: normal; }
  .main-nav > a { padding: 13px 16px; font-size: 16px; }
  .nav-group { position: static; }
  /* Collapsible accordion sections — JS keeps at most two open (drawer-open) */
  .nav-drop {
    width: 100%; text-align: left;
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; font-weight: 600; color: var(--text);
    padding: 13px 16px; border-radius: 10px;
  }
  .nav-drop .nav-caret { display: block; margin-left: auto; color: var(--muted); }
  .nav-group.drawer-open > .nav-drop { color: var(--accent); }
  .nav-group.drawer-open > .nav-drop .nav-caret { rotate: 180deg; }
  .nav-drop .nicon { width: 16px; height: 16px; }
  .drop-panel,
  .nav-group:hover .drop-panel,
  .nav-group:focus-within .drop-panel {
    display: none; position: static; border: none; box-shadow: none;
    background: transparent; padding: 0 0 4px; min-width: 0; width: auto; max-width: none;
  }
  .nav-group.drawer-open .drop-panel,
  .nav-group.drawer-open:focus-within .drop-panel { display: block; }
  .drop-panel a {
    display: block; padding: 11px 16px 11px 42px; font-size: 15.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .drop-panel a .nicon { display: inline-block; vertical-align: -3px; margin-right: 10px; }
  .drop-panel .drop-all { border-top: none; }
  /* Static quick actions — pinned to the drawer's bottom edge, always visible */
  .drawer-actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    position: sticky; bottom: -24px; margin-top: auto;
    padding: 12px 4px 12px; background: var(--bg-elev);
    border-top: 1px solid var(--border);
    box-shadow: 0 -10px 18px -14px rgba(0, 0, 0, .5);
  }
  .drawer-action {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 10px; border-radius: 10px; font: 600 14px var(--font-body);
    color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong);
    white-space: nowrap;
  }
  .drawer-action .hero-cart-count { color: var(--accent); font-weight: 700; }
  /* Highlight cards: next event + latest article */
  .drawer-highlights {
    display: flex; flex-direction: column; gap: 8px;
    margin: 14px 4px 14px; padding-top: 14px; border-top: 1px solid var(--border);
  }
  .drawer-hl {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 12px;
    background: var(--surface-2); border: 1px solid var(--border);
  }
  .drawer-hl img { width: 56px; height: 40px; object-fit: cover; border-radius: 8px; flex: none; }
  .drawer-hl .date-block { flex: none; }
  .drawer-hl-text { min-width: 0; }
  .drawer-hl-text small {
    display: block; color: var(--muted); font-size: 11px;
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .drawer-hl-text b { display: block; font-size: 13.5px; line-height: 1.35; color: var(--text); }
  .nav-toggle { display: grid; }
  .nav-search { display: block; padding: 4px 4px 10px; }
  .nav-search input {
    width: 100%; padding: 11px 14px;
    background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 10px;
    font-size: 15px; color: var(--text);
  }
}
@media (prefers-reduced-motion: reduce) {
  .main-nav, .nav-overlay { transition: none; }
}

/* --------------------------------------------------------------------------
   Hero (home)
   -------------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(32px, 5vh, 72px) 0 clamp(28px, 4vh, 52px);
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(47, 107, 255, 0.28), transparent 65%),
    radial-gradient(700px 420px at -10% 110%, rgba(249, 115, 22, 0.16), transparent 60%),
    var(--bg);
}
.hero.has-bg {
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(47, 107, 255, 0.30), transparent 65%),
    linear-gradient(color-mix(in srgb, var(--bg) 84%, transparent), color-mix(in srgb, var(--bg) 96%, transparent)),
    var(--hero-img) center / cover no-repeat,
    var(--bg);
}
.img-credit {
  position: absolute; right: 14px; bottom: 10px; z-index: 5;
  font-size: 10.5px; color: var(--muted); opacity: 0.7;
}
.img-credit:hover { opacity: 1; text-decoration: underline; }

.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--hero-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--hero-grid) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 75%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: clamp(28px, 4vw, 56px);
  align-items: center; margin-bottom: clamp(24px, 3.5vh, 40px);
}
@media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; } }

/* Short landscape viewports (laptops at 1080p included) — keep hero compact */
@media (min-width: 861px) and (max-height: 860px) {
  .hero { padding-top: 28px; }
  .hero h1 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 14px; }
  .hero-kicker { margin-bottom: 14px; }
  .hero p.lede { margin-bottom: 20px; }
}
/* Landscape phones */
@media (max-height: 500px) {
  .hero { padding: 20px 0; }
  .hero::before { display: none; }
  .stat-strip { display: none; }
}
/* Big desktop / 4K — widen and scale up gently */
@media (min-width: 1800px) {
  :root { --container: 1440px; }
  body { font-size: 17px; }
  .card-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
.hero-inner { position: relative; max-width: 880px; }

.hero-events {
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  border: 1px solid var(--border-strong); border-radius: 18px;
  padding: 18px; backdrop-filter: blur(8px); box-shadow: var(--shadow);
}
.hero-events h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted); padding: 4px 8px 12px; display: flex; justify-content: space-between; align-items: center;
}
.hero-events h2 a { color: var(--accent); font-size: 12.5px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.mini-event {
  position: relative; display: flex; gap: 14px; align-items: center;
  padding: 12px 10px; border-radius: 12px; transition: background .15s;
}
.mini-event:hover { background: var(--surface-2); }
.mini-event + .mini-event { border-top: 1px solid var(--border); }
.mini-event .date-block { width: 54px; padding: 7px 3px 8px; }
.mini-event .date-block b { font-size: 19px; }
.mini-event .grow { min-width: 0; }
.mini-event h3 { font-size: 14.5px; line-height: 1.35; margin-bottom: 3px; }
.mini-event h3 a::after { content: ""; position: absolute; inset: 0; }
.mini-event h3 a:hover { color: var(--accent); }
.mini-event .sub { font-size: 12.5px; color: var(--muted); }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--blue-300); background: rgba(47, 107, 255, 0.12);
  border: 1px solid rgba(79, 139, 255, 0.3);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 22px;
}
[data-theme="light"] .hero-kicker { color: var(--blue-600); }
.hero h1 {
  font-size: clamp(30px, 4.6vw, 54px);
  margin-bottom: 18px;
}
.hero h1 .grad {
  background: linear-gradient(100deg, var(--blue-400), var(--cyan-400));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lede { font-size: clamp(15.5px, 2vw, 18px); color: var(--text-2); max-width: 640px; margin-bottom: 26px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }

.hero-search { max-width: 620px; margin-bottom: 40px; position: relative; }
.hero-search input {
  width: 100%; padding: 16px 130px 16px 52px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px;
  font-size: 16px; color: var(--text);
  box-shadow: var(--shadow);
}
.hero-search input:focus { outline: 2px solid var(--blue-500); outline-offset: -1px; }
.hero-search .search-ico { position: absolute; left: 18px; top: 50%; translate: 0 -50%; color: var(--muted); }
.hero-search .btn { position: absolute; right: 6px; top: 6px; bottom: 6px; }

.stat-strip {
  display: flex; flex-wrap: wrap; gap: 14px;
  position: relative;
}
.stat-strip > .stat { flex: 1 1 150px; min-width: 0; }
/* Phones: a tidy 2×2 grid of exactly four stats — no lone full-width fifth
   card. The rating stat is the one dropped when present (five → four); the
   full set still shows on tablet and up. */
@media (max-width: 640px) {
  .stat-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-strip > .stat { flex: none; }
  .stat-strip > .stat:nth-child(5) { display: none; }
}
.stat {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; backdrop-filter: blur(6px);
}
.stat b { display: block; font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.03em; }
.stat b em { font-style: normal; color: var(--cta); }
.stat span { color: var(--muted); font-size: 13.5px; }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding: clamp(44px, 7vw, 80px) 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(24px, 3.6vw, 36px); }
.section-head .sub { color: var(--muted); margin-top: 8px; max-width: 560px; }
.see-all { color: var(--accent); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.see-all:hover { text-decoration: underline; }
.section-alt { background: var(--bg-elev); border-block: 1px solid var(--border); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(265px, 1fr)); }

.card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; position: relative;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.card-media { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media .badge { position: absolute; top: 12px; left: 12px; }
.card-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.card-title a::after { content: ""; position: absolute; inset: 0; }
.card-title a:hover { color: var(--accent); }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 13.5px; align-items: center; }
.card-meta a { position: relative; z-index: 2; color: var(--text-2); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.card-meta a:hover { color: var(--accent); }
.card-chips .chip {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--accent);
}
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.price { font-family: var(--font-display); font-weight: 700; font-size: 18px; white-space: nowrap; }
.price small { color: var(--muted); font-weight: 500; font-size: 12px; }
.card-chips .chip { white-space: normal; line-height: 1.35; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(7, 12, 27, 0.72); color: #dbe6ff;
  border: 1px solid rgba(148, 163, 204, 0.35);
  backdrop-filter: blur(4px);
}
.badge-blue { background: rgba(47, 107, 255, 0.16); color: var(--blue-300); border-color: rgba(79, 139, 255, 0.35); }
[data-theme="light"] .badge-blue { color: var(--blue-600); }
.badge-orange { background: rgba(249, 115, 22, 0.14); color: var(--orange-400); border-color: rgba(249, 115, 22, 0.35); }
[data-theme="light"] .badge-orange { color: var(--orange-600); }

.chip {
  display: inline-flex; align-items: center;
  font-size: 12.5px; font-weight: 500; padding: 4px 11px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
}

.stars { display: inline-flex; align-items: center; gap: 5px; color: var(--star); font-size: 13px; letter-spacing: 1px; }
.stars .num { color: var(--text-2); font-weight: 600; margin-left: 2px; letter-spacing: 0; }

/* Inline event-rating badge in list meta lines and the featured chip row. */
.ev-stars { color: var(--star); font-weight: 600; white-space: nowrap; }
.fe-meta .ev-stars.chip { color: var(--star); }

/* ============================================================= Spotlight bar */
.spotlight {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--border);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--sp-accent, var(--accent)) 20%, var(--surface-2)),
      var(--surface-2) 60%);
  --sp-accent: var(--accent);
  transition: background .5s ease;
}
.spotlight-inner { display: flex; align-items: stretch; gap: 10px; min-height: 46px; }
/* min-height because the rotating slides inside are position:absolute (they
   stack for the crossfade) and give the stage no height of their own. Without
   it, the moment the stage sits alone on a flex row — which is what mobile's
   wrap did — it collapses to a sliver and the slide's content gets crushed up
   against the header above it. */
.spotlight-stage { position: relative; flex: 1 1 auto; display: flex; min-width: 0; min-height: 30px; }

.spot {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 7px 6px; min-width: 0;
  font-size: 14px; line-height: 1.35; color: var(--text);
}
.spot-pinned {
  flex: 0 1 auto; padding-right: 16px; margin-right: 4px;
  border-right: 1px solid color-mix(in srgb, var(--sp-accent, var(--accent)) 45%, transparent);
  color: var(--text); font-weight: 600;
}
.spotlight-stage .spot { position: absolute; inset: 0; }   /* stack for crossfade */
.spotlight-stage 
.spot-body { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.spot-icon { font-size: 18px; line-height: 1; flex: none; }
.spot-logo { height: 22px; width: auto; max-width: 120px; border-radius: 4px; flex: none; object-fit: contain; }
/* min-width:0 lets the message actually shrink and ellipsis instead of pushing
   the countdown + CTA off the edge, where the bar's overflow:hidden clipped it —
   on a phone that left the offer text cut off entirely under the header. */
.spot-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.spot-count {
  font-variant-numeric: tabular-nums; font-weight: 700; flex: none;
  padding: 2px 8px; border-radius: 999px;
  color: #fff; background: color-mix(in srgb, var(--sp-accent, var(--accent)) 72%, #000);
}
.spot-cta {
  flex: none; font-weight: 700; text-decoration: none; white-space: nowrap;
  color: color-mix(in srgb, var(--sp-accent, var(--accent)) 78%, var(--text));
}
.spot-cta:hover { text-decoration: underline; }
.spot-cta span { display: inline-block; transition: transform .2s ease; }
.spot-cta:hover span { transform: translateX(3px); }
.spot-x {
  flex: none; margin-left: 6px; width: 26px; height: 26px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text-2); font-size: 19px; line-height: 1; cursor: pointer;
}
.spot-x:hover { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); }

/* dots */
.spot-dots { display: flex; align-items: center; gap: 6px; flex: none; padding-left: 4px; }
.spot-dots button {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--text) 30%, transparent); transition: all .2s ease;
}
.spot-dots button[aria-selected="true"] { background: var(--sp-accent, var(--accent)); transform: scale(1.35); }

/* per-theme accents (the bar recolors to the active banner via --sp-accent) */
.spot[data-theme="sale"]      { --spot-accent: #f97316; }
.spot[data-theme="festive"]   { --spot-accent: #e11d48; }
.spot[data-theme="partner"]   { --spot-accent: #14b8a6; }
.spot[data-theme="success"]   { --spot-accent: #22c55e; }
.spot[data-theme="warning"]   { --spot-accent: #f59e0b; }
.spot[data-theme="info"]      { --spot-accent: var(--accent); }

/* crossfade-in for the active rotating slide */
.spotlight-stage .spot.spot-enter { animation: spotEnter .5s ease both; }
@keyframes spotEnter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* animation: shimmer sweep */
.spotlight[data-active-anim="shimmer"]::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%,
    color-mix(in srgb, var(--sp-accent, var(--accent)) 22%, transparent) 48%, transparent 66%);
  transform: translateX(-100%); animation: spotShimmer 5.5s ease-in-out infinite;
}
@keyframes spotShimmer { 0%,60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* animation: shifting gradient (sales) */
.spotlight[data-active-anim="gradient"] {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--sp-accent, var(--accent)) 34%, var(--surface-2)),
    color-mix(in srgb, var(--sp-accent, var(--accent)) 10%, var(--surface-2)),
    color-mix(in srgb, var(--sp-accent, var(--accent)) 34%, var(--surface-2)));
  background-size: 220% 100%; animation: spotGradient 7s ease infinite;
}
@keyframes spotGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* icon micro-bounce */
.spot:not([hidden]) .spot-icon { animation: spotBounce 2.4s ease-in-out infinite; }
@keyframes spotBounce { 0%,88%,100% { transform: translateY(0); } 92% { transform: translateY(-3px); } 96% { transform: translateY(-1px); } }

/* animation: pulse (gentle glow) */
.spotlight[data-active-anim="pulse"] { animation: spotPulse 2.6s ease-in-out infinite; }
@keyframes spotPulse {
  0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
  50% { box-shadow: inset 0 0 40px -6px color-mix(in srgb, var(--sp-accent, var(--accent)) 55%, transparent); }
}

/* canvas overlay for JS animations (confetti / snow / sparkle) */
.spot-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.spotlight-inner { position: relative; z-index: 2; }

@media (max-width: 720px) {
  .spotlight-inner { min-height: 42px; }
  /* Only a pinned partner banner needs to stack onto its own row. Wrapping
     unconditionally (the old rule) pushed the rotation dots onto a second line
     under the rotating strip and left that strip collapsed — the promo looked
     jammed under the header with the dots orphaned beneath it. With no pinned
     banner the strip and its dots stay on one line. */
  .spotlight-inner:has(.spot-pinned) { flex-wrap: wrap; }
  .spotlight-inner:has(.spot-pinned) .spot-pinned { flex: 1 0 100%; border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--sp-accent, var(--accent)) 35%, transparent);
    padding: 6px; }
  .spotlight-inner:has(.spot-pinned) .spotlight-stage { flex: 1 1 100%; }
  .spot-cta, .spot-count { font-size: 13px; }
}
@media (max-width: 560px) {
  /* Not enough width for message + countdown + CTA. The offer and the action
     win; the countdown pill is urgency garnish and would otherwise squeeze the
     message down to an ellipsis (which is what left the phone showing a
     countdown with no idea what it was counting down to). */
  .spot-count { display: none; }
  .spot { gap: 8px; padding: 7px 4px; }
  .spot-body { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .spotlight[data-active-anim]::after,
  .spotlight[data-active-anim="gradient"],
  .spotlight[data-active-anim="pulse"] { animation: none; }
  .spot .spot-icon { animation: none; }
  .spotlight-stage .spot.spot-enter { animation: none; }
}

.date-block {
  flex: none; width: 62px; text-align: center;
  background: linear-gradient(160deg, var(--blue-500), var(--blue-600));
  color: #fff; border-radius: 12px; padding: 9px 4px 10px;
  font-family: var(--font-display); line-height: 1.1;
  box-shadow: 0 6px 16px rgba(47, 107, 255, 0.35);
}
.date-block b { display: block; font-size: 22px; }
.date-block span { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; opacity: .9; }

/* Featured event (home) */
.featured-event {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 18px;
  overflow: hidden; box-shadow: var(--shadow); margin-bottom: 18px;
  transition: transform .18s, border-color .18s;
}
.featured-event:hover { transform: translateY(-3px); border-color: var(--blue-500); }
.fe-media { position: relative; min-height: 260px; }
.fe-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fe-media .badge { position: absolute; top: 14px; left: 14px; }
.fe-body { padding: clamp(20px, 3vw, 34px); display: flex; flex-direction: column; gap: 14px; }
.fe-date { display: flex; align-items: center; gap: 14px; }
.fe-date b { display: block; font-family: var(--font-display); font-size: 15.5px; }
.fe-date .text-muted { font-size: 13.5px; display: block; }
.featured-event h3 { font-size: clamp(20px, 2.6vw, 27px); }
.featured-event h3 a::after { content: ""; position: absolute; inset: 0; }
.featured-event h3 a:hover { color: var(--accent); }
.fe-body p { color: var(--text-2); font-size: 14.5px; }
.fe-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.fe-body .btn { align-self: start; margin-top: auto; }
@media (max-width: 860px) {
  .featured-event { grid-template-columns: 1fr; }
  .fe-media { aspect-ratio: 16/9; min-height: 0; }
}

/* Event list rows (home) */
.event-rows { display: grid; gap: 14px; }
.event-thumb { flex: none; width: 132px; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.event-thumb img { width: 100%; height: 100%; object-fit: cover; }
.event-row {
  display: flex; gap: 18px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; position: relative;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.event-row:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.event-row .grow { flex: 1; min-width: 0; }
.event-row h3 { font-size: 17px; margin-bottom: 4px; }
.event-row h3 a::after { content: ""; position: absolute; inset: 0; }
.event-row h3 a:hover { color: var(--accent); }
.event-row .meta { color: var(--muted); font-size: 13.5px; display: flex; gap: 14px; flex-wrap: wrap; }

/* FOS tiles */
.tile-grid { display: flex; flex-wrap: wrap; gap: 14px; }
.tile-grid > .tile { flex: 1 1 230px; min-width: 0; }
.tile {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; font-weight: 600; font-family: var(--font-display); font-size: 15.5px;
  transition: transform .18s, border-color .18s, background .18s;
}
.tile:hover { transform: translateY(-3px); border-color: var(--blue-500); }
.tile .count {
  font-size: 12.5px; font-weight: 600; color: var(--blue-300);
  background: rgba(47, 107, 255, 0.14); border-radius: 999px; padding: 3px 10px; font-family: var(--font-body);
}
[data-theme="light"] .tile .count { color: var(--blue-600); }

/* Feature trio */
.feature-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.feature-grid > .feature { flex: 1 1 250px; min-width: 0; }
.feature { padding: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.feature .ico {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(47,107,255,.2), rgba(34,211,238,.14));
  color: var(--blue-300); border: 1px solid rgba(79, 139, 255, 0.3);
}
[data-theme="light"] .feature .ico { color: var(--blue-600); }
.feature h3 { font-size: 18px; margin-bottom: 8px; }
.feature p { color: var(--text-2); font-size: 14.5px; }

/* Testimonials */
.quote-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.quote {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; display: flex; flex-direction: column; gap: 14px;
}
.quote p { color: var(--text-2); font-size: 14.5px; }
.quote .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff;
  background: linear-gradient(135deg, var(--blue-500), var(--cyan-400));
}
.avatar.alt { background: linear-gradient(135deg, var(--orange-500), var(--orange-400)); }
.quote .who b { display: block; font-size: 14px; line-height: 1.3; }
.quote .who span { color: var(--muted); font-size: 12.5px; }
/* The shield replaces the initials disc that used to sit here: initials of an
   invented persona (see app/sync.py REVIEWS_SQL). It marks the one claim we can
   actually stand behind — that the person sat the course. */
.quote .who .verified-mark {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #16a34a;
  background: color-mix(in srgb, #16a34a 12%, var(--surface));
}
.quote .who .who-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.quote .who .who-body > span { display: block; line-height: 1.35; }

/* CTA band */
.cta-band {
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(34, 211, 238, 0.16), transparent 60%),
    linear-gradient(120deg, var(--blue-600), var(--blue-500));
  border-radius: 20px; padding: clamp(36px, 6vw, 64px);
  text-align: center; color: #fff; position: relative; overflow: hidden;
}
.cta-band h2 { font-size: clamp(26px, 4vw, 40px); margin-bottom: 12px; }
.cta-band p { opacity: .9; max-width: 560px; margin: 0 auto 28px; }
.cta-band.has-bg {
  background:
    linear-gradient(120deg, rgba(23, 55, 160, 0.92), rgba(47, 107, 255, 0.85)),
    var(--cta-img) center / cover no-repeat;
}
.cta-band .img-credit { color: rgba(255, 255, 255, 0.75); }

/* --------------------------------------------------------------------------
   Catalog
   -------------------------------------------------------------------------- */
/* padding-block only: these classes combine with .container, whose inline
   padding must survive (a `padding` shorthand here zeroed it on phones). */
.page-head { padding-block: clamp(32px, 5vw, 56px) 24px; }
.page-head h1 { font-size: clamp(28px, 4.5vw, 44px); margin-bottom: 10px; }
.page-head .sub { color: var(--muted); max-width: 640px; }

.catalog-layout { display: grid; grid-template-columns: 264px 1fr; gap: 32px; align-items: start; padding-top: 24px; padding-bottom: 64px; }
@media (max-width: 960px) { .catalog-layout { grid-template-columns: 1fr; padding-top: 16px; } }

.filters { display: flex; flex-direction: column; gap: 10px; }
/* flex-shrink: 0 is what makes the internal scroll work — without it the
   groups compress to fit and scrollHeight never exceeds clientHeight. */
.filters > * { flex-shrink: 0; }
@media (min-width: 961px) {
  .filters {
    position: sticky; top: 84px;
    max-height: calc(100vh - 100px); overflow-y: auto;
    scrollbar-width: thin; overscroll-behavior: contain; padding-right: 4px;
  }
  body.staging .filters { top: 116px; max-height: calc(100vh - 132px); }
}
.sidebar-search { margin-bottom: 2px; }
.sidebar-search .search-inline { max-width: none; }
@media (max-width: 960px) {
  .filters {
    position: fixed; inset: 0; z-index: 150; background: var(--bg);
    overflow-y: auto; padding: 20px; display: none;
  }
  .filters.open { display: flex; }
}
.filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.filters-head h2 { font-size: 16px; }
.filters-close { display: none; }
@media (max-width: 960px) { .filters-close { display: grid; } }
.clear-filters {
  display: inline-block; font-size: 12.5px; color: var(--cta); font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--cta) 55%, transparent);
  background: color-mix(in srgb, var(--cta) 10%, transparent);
  padding: 4px 12px; border-radius: 999px;
}
.clear-filters:hover { background: var(--cta); color: #fff; }

.facet-group { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; }
.facet-group summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  padding: 13px 16px; font-weight: 600; font-size: 14px; cursor: pointer; user-select: none;
}
.facet-group summary::-webkit-details-marker { display: none; }
.facet-group summary::after { content: "+"; color: var(--muted); font-size: 16px; }
.facet-group[open] summary::after { content: "–"; }
.facet-options { padding: 2px 8px 10px; max-height: 260px; overflow-y: auto; }
.facet-option {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 7px;
  font-size: 13.5px; color: var(--text-2); cursor: pointer;
}
.facet-option:hover { background: var(--surface-2); }
.facet-option input { accent-color: var(--blue-500); width: 15px; height: 15px; flex: none; }
.facet-option .n { margin-left: auto; color: var(--muted); font-size: 12px; }
.facet-option.checked { color: var(--text); font-weight: 500; }

.results-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.results-bar .count { color: var(--muted); font-size: 14px; }
.results-bar .spacer { flex: 1; }
.search-inline { position: relative; flex: 1 1 240px; max-width: 420px; }
.search-inline input {
  width: 100%; padding: 10px 14px 10px 40px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; font-size: 14.5px;
}
.search-inline input:focus { outline: 2px solid var(--blue-500); outline-offset: -1px; }
.search-inline svg { position: absolute; left: 13px; top: 50%; translate: 0 -50%; color: var(--muted); }
select.sort {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 10px 12px; font-size: 14px;
}
.filters-toggle { display: none; }
@media (max-width: 960px) { .filters-toggle { display: inline-flex; } }

.active-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.active-chips .chip { gap: 7px; }
.active-chips .chip a { color: var(--muted); font-weight: 700; }
.active-chips .chip a:hover { color: var(--cta); }

.load-more { grid-column: 1 / -1; display: grid; place-items: center; padding: 22px 0 8px; }

/* Events page */
.type-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
a.chip:hover { border-color: var(--blue-500); color: var(--text); }
.chip-on, a.chip-on:hover { background: var(--blue-500); color: #fff; border-color: var(--blue-500); }
.month-group { margin-bottom: 36px; }
.month-label {
  font-size: 18px; margin-bottom: 14px; display: flex; align-items: center; gap: 14px; color: var(--text-2);
}
.month-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.event-row-lg { padding: 20px 22px; }
.event-row-lg .event-thumb { width: 176px; }
.event-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }

.empty-state { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty-state h3 { color: var(--text); font-size: 20px; margin-bottom: 8px; }

#results.htmx-request { opacity: .45; transition: opacity .15s; }

/* --------------------------------------------------------------------------
   Detail pages (course & event)
   -------------------------------------------------------------------------- */
.breadcrumbs { font-size: 13px; color: var(--muted); padding-top: 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumbs a:hover { color: var(--accent); }

.detail-hero { padding-block: 20px 40px; }
.detail-layout { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: start; }
@media (max-width: 960px) { .detail-layout { grid-template-columns: 1fr; } }

.detail-main .badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.detail-main h1 { font-size: clamp(26px, 4vw, 40px); margin-bottom: 16px; }
.detail-main .lede { color: var(--text-2); font-size: 16.5px; margin-bottom: 22px; max-width: 860px; }

/* Long descriptions: clamp to a few lines with a fade, expand on click.
   No-JS, checkbox-driven so it survives full-page caching. */
.detail-main .lede-wrap { position: relative; max-width: 860px; }
.detail-main .lede-wrap .lede { margin-bottom: 0; }
.clamp-cb:not(:checked) ~ .lede-wrap .lede {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 16;
  overflow: hidden;
}
.lede-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4.5em;
  background: linear-gradient(transparent, var(--bg));
  pointer-events: none;
}
.clamp-cb:checked ~ .lede-wrap .lede-fade { display: none; }
.clamp-toggle {
  display: inline-block; margin: 12px 0 22px;
  color: var(--accent); font-weight: 600; font-size: 15px; cursor: pointer;
}
.clamp-toggle:hover { text-decoration: underline; }
.clamp-cb:not(:checked) ~ .clamp-toggle::after { content: "Read more ↓"; }
.clamp-cb:checked ~ .clamp-toggle::after { content: "Show less ↑"; }

.meta-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.meta-grid > .meta-cell { flex: 1 1 150px; min-width: 0; }
.meta-cell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 16px; }
.meta-cell span { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 3px; }
.meta-cell b { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; }
.meta-cell a:hover { color: var(--accent); text-decoration: underline; }

.sponsor-row { max-width: 860px; }
.sponsor-chip { font-size: 13.5px; padding: 8px 16px; }
.sponsor-primary { border-color: var(--blue-500); color: var(--text); font-weight: 600; }

.buy-card {
  position: sticky; top: 88px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow);
}
.buy-card .media { aspect-ratio: 16/9; background: var(--surface-2); }
.buy-card .media img { width: 100%; height: 100%; object-fit: cover; }
.buy-card .body { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.buy-card .price-row { display: flex; align-items: baseline; gap: 10px; }
.buy-card .price-row .price { font-size: 32px; }
.buy-card ul { list-style: none; padding: 0; display: grid; gap: 9px; font-size: 14px; color: var(--text-2); margin: 0; }
.buy-card ul svg { color: var(--blue-400); flex: none; }
.buy-card ul li { display: flex; gap: 10px; align-items: start; }

/* Collapse the card's secondary details behind a fade so a short-description
   course doesn't leave a tall card beside a big gap. No-JS, checkbox-driven so
   it survives full-page caching. The primary CTA + guarantee stay above it. */
.buy-extra { display: flex; flex-direction: column; gap: 14px; position: relative; }
.buy-cb:not(:checked) ~ .buy-extra { max-height: 3.4em; overflow: hidden; }
.buy-cb:not(:checked) ~ .buy-extra::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3.4em;
  background: linear-gradient(transparent, var(--surface)); pointer-events: none;
}
.buy-toggle {
  align-self: start; cursor: pointer; margin-top: -4px;
  color: var(--accent); font-weight: 600; font-size: 14px;
}
.buy-toggle:hover { text-decoration: underline; }
.buy-cb:not(:checked) ~ .buy-toggle::after { content: "Show all details ↓"; }
.buy-cb:checked ~ .buy-toggle::after { content: "Show less ↑"; }
.fineprint { font-size: 12px; color: var(--muted); }

.detail-section { padding: 30px 0; border-top: 1px solid var(--border); }
.detail-section h2 { font-size: clamp(20px, 3vw, 26px); margin-bottom: 20px; }
.detail-section .prose { color: var(--text-2); max-width: 760px; }

.check-list { list-style: none; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); max-width: 900px; }
.check-list li { display: flex; gap: 12px; align-items: start; color: var(--text-2); font-size: 14.5px; }
.check-list svg { color: var(--cta); flex: none; margin-top: 3px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

.instructor-card {
  display: flex; gap: 18px; align-items: start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; max-width: 760px;
}
.instructor-card img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid var(--border-strong); }
.instructor-card .avatar { width: 76px; height: 76px; font-size: 24px; }
.instructor-card h3 { font-size: 18px; margin-bottom: 2px; }
.instructor-card .role { color: var(--muted); font-size: 13.5px; margin-bottom: 10px; }
.instructor-card p { color: var(--text-2); font-size: 14px; }

/* Agenda (event) */
.agenda { display: grid; gap: 14px; max-width: 860px; }
.agenda-day { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.agenda-day summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 14px; padding: 17px 20px;
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
}
.agenda-day summary::-webkit-details-marker { display: none; }
.agenda-day summary .day-num {
  background: rgba(47, 107, 255, 0.14); color: var(--blue-300);
  font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 8px; letter-spacing: 0.04em;
  white-space: nowrap; flex: none; text-align: center;
}
[data-theme="light"] .agenda-day summary .day-num { color: var(--blue-600); }
.agenda-day summary .caret { color: var(--muted); transition: rotate .2s; }
.agenda-day[open] summary .caret { rotate: 180deg; }
.session-item .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cta); flex: none; }
.session-item .session-thumb {
  width: 92px; height: 52px; object-fit: cover; border-radius: 7px;
  border: 1px solid var(--border); flex: none; background: var(--surface-2);
}
@media (max-width: 560px) { .session-item .session-thumb { width: 64px; height: 40px; } }

/* Card media that shows a graphic uncropped over a blurred fill of itself */
.media-contain { position: relative; display: flex; justify-content: center; overflow: hidden; }
.media-contain .media-blur {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: blur(22px) brightness(0.6); scale: 1.2;
}
.media-contain .media-main { position: relative; width: auto; max-width: 100%; height: 100%; object-fit: contain; }

/* Prominent when/where block on event register card */
.when-block {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(249, 115, 22, 0.10); border: 1px solid rgba(249, 115, 22, 0.30);
  border-radius: 12px; padding: 13px 15px;
}
.when-block svg { color: var(--orange-400); flex: none; margin-top: 2px; }
[data-theme="light"] .when-block svg { color: var(--orange-600); }
.when-block b { display: block; font-family: var(--font-display); font-size: 16px; line-height: 1.3; }
.when-block span { font-size: 13px; color: var(--text-2); }

/* Course vs event page identity: blue vs orange cast */
body.page-event .detail-hero {
  background: radial-gradient(720px 300px at 78% 0%, rgba(249, 115, 22, 0.13), transparent 65%);
}
body.page-event .buy-card { border-color: rgba(249, 115, 22, 0.4); }
body.page-event .breadcrumbs a:hover { color: var(--orange-400); }
body.page-course .detail-hero {
  background: radial-gradient(720px 300px at 78% 0%, rgba(47, 107, 255, 0.14), transparent 65%);
}
body.page-course .buy-card { border-color: rgba(47, 107, 255, 0.45); }

/* Expandable sessions */
.agenda-day summary .day-count {
  font-size: 12.5px; font-weight: 500; font-family: var(--font-body);
  white-space: nowrap; flex: none; margin-left: auto;
}
.agenda-day summary .caret { flex: none; }
/* Date label shrinks/wraps last so the pills and counts hold one line each */
.agenda-day > summary > span:nth-child(2) { min-width: 0; }
@media (max-width: 640px) {
  .agenda-day summary { gap: 10px; font-size: 14.5px; padding: 15px 14px; }
  .agenda-day summary .day-num { font-size: 11px; padding: 4px 9px; }
}
.session-item { border-top: 1px solid var(--border); }
.session-item summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; gap: 16px; align-items: center; padding: 15px 20px;
}
.session-item summary::-webkit-details-marker { display: none; }
.session-item summary:hover { background: var(--surface-2); }
.session-item .session-head { flex: 1; min-width: 0; }
.session-item b { font-weight: 600; font-size: 14.5px; display: block; }
.session-item .sub { color: var(--muted); font-size: 13px; }
.session-item .caret { color: var(--muted); flex: none; transition: rotate .2s; }
.session-item[open] > summary .caret { rotate: 180deg; }
.session-detail { padding: 4px 20px 18px 45px; }
.session-grid { display: flex; gap: 20px; align-items: flex-start; }
.session-img {
  flex: none; width: 250px; border-radius: 12px; border: 1px solid var(--border);
  aspect-ratio: 16/9; object-fit: cover;
}
.session-info { display: grid; gap: 13px; min-width: 0; }
.session-detail p { color: var(--text-2); font-size: 14px; max-width: 700px; white-space: pre-line; }
.session-detail .see-all { font-size: 14px; }
.session-inst { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-2); }
.session-inst img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-strong); }
@media (max-width: 720px) {
  .session-grid { flex-direction: column; }
  .session-img { width: 100%; }
  .session-detail { padding-left: 20px; }
}

/* Back to top */
.back-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 95;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue-500); color: #fff;
  box-shadow: 0 8px 24px rgba(47, 107, 255, 0.45);
  transition: transform .15s, background .15s;
}
.back-top:hover { background: var(--blue-400); transform: translateY(-2px); }

/* Attendee feedback breakdown */
.feedback-grid {
  display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: center;
  max-width: 860px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px;
}
@media (max-width: 720px) { .feedback-grid { grid-template-columns: 1fr; text-align: center; } }
.feedback-overall { display: grid; gap: 6px; justify-items: center; }
.feedback-overall b { font-family: var(--font-display); font-size: 56px; line-height: 1; letter-spacing: -0.03em; }
.feedback-overall .stars { font-size: 18px; }
.feedback-bars { display: grid; gap: 12px; }
.fb-row { display: grid; grid-template-columns: 160px 1fr 36px; gap: 14px; align-items: center; }
@media (max-width: 520px) { .fb-row { grid-template-columns: 120px 1fr 34px; } }
.fb-label { font-size: 13.5px; color: var(--text-2); }
.fb-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.fb-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue-500), var(--cyan-400)); }
.fb-value { font-size: 13px; font-weight: 600; text-align: right; font-family: var(--font-display); }

/* Reviews */
.review-list { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--bg-elev); border-top: 1px solid var(--border); margin-top: 60px; }
.footer-grid { display: grid; gap: 36px 44px; grid-template-columns: 1.15fr 2.6fr; padding: 52px 0 28px; }
/* Masonry: the link groups flow into balanced columns, stacking as they fit. */
.footer-links { columns: 3; column-gap: 36px; }
.footer-links .footer-col { break-inside: avoid; padding-bottom: 26px; }
.footer-contactbar {
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center;
  border-top: 1px solid var(--border); padding: 20px 0;
  color: var(--text-2); font-size: 14px;
}
.footer-contactbar a { color: var(--text-2); }
.footer-contactbar a:hover { color: var(--accent); }
.footer-contactbar .footer-social { margin: 0 0 0 auto; }
@media (max-width: 1000px) { .footer-links { columns: 2; } }
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-contactbar .footer-social { margin-left: 0; width: 100%; }
}
@media (max-width: 540px) { .footer-links { columns: 1; } }
.site-footer h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 14px; }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 9px; }
.site-footer ul a { color: var(--text-2); font-size: 14.5px; }
.site-footer ul a:hover { color: var(--accent); }
.footer-about p { color: var(--muted); font-size: 14px; max-width: 320px; margin-top: 14px; }
.cred-badges { display: flex; gap: 26px; align-items: flex-end; margin-top: 20px; }
.cred-badges figure { margin: 0; }
.cred-badges img { opacity: 0.9; height: 66px; width: auto; }
[data-theme="light"] .cred-badges img { filter: invert(1); opacity: 0.65; }
.cred-badges figcaption { font-size: 11.5px; color: var(--muted); margin-top: 8px; letter-spacing: 0.03em; }
.footer-contact li { color: var(--text-2); font-size: 14px; line-height: 1.5; }
.footer-contact .text-muted { font-size: 12.5px; }
.footer-contact a { color: var(--text-2); }
.footer-contact a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid var(--border); padding: 20px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  color: var(--muted); font-size: 13px;
}
.site-version { color: var(--muted); opacity: 0.7; font-size: 12px; }
.theme-switch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; color: var(--muted);
  border: 1px solid var(--border); border-radius: 50%;
  transition: color .15s, border-color .15s, transform .15s;
}
.theme-switch:hover { color: var(--text); border-color: var(--border-strong); transform: rotate(15deg); }
/* dark theme shows the sun (tap for light); light theme shows the moon */
.theme-switch .ico-moon { display: none; }
[data-theme="light"] .theme-switch .ico-sun { display: none; }
[data-theme="light"] .theme-switch .ico-moon { display: inline; }

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
/* Slim, theme-matched scrollbars on inner panels (default ones look rough) */
.filters, .facet-options, .suggest-box, .main-nav {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--muted) 40%, transparent) transparent;
}
.filters::-webkit-scrollbar, .facet-options::-webkit-scrollbar,
.suggest-box::-webkit-scrollbar, .main-nav::-webkit-scrollbar { width: 6px; }
.filters::-webkit-scrollbar-track, .facet-options::-webkit-scrollbar-track,
.suggest-box::-webkit-scrollbar-track, .main-nav::-webkit-scrollbar-track { background: transparent; }
.filters::-webkit-scrollbar-thumb, .facet-options::-webkit-scrollbar-thumb,
.suggest-box::-webkit-scrollbar-thumb, .main-nav::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 35%, transparent);
  border-radius: 999px;
}
.filters::-webkit-scrollbar-thumb:hover, .facet-options::-webkit-scrollbar-thumb:hover,
.suggest-box::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 60%, transparent); }

/* Group CPE */
.discount-grid { display: flex; flex-wrap: wrap; gap: 18px; }
.discount-grid > * { flex: 1 1 220px; min-width: 0; }
.discount-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 34px 24px; text-align: center;
}
.discount-tile b { display: block; font-family: var(--font-display); font-size: 56px; letter-spacing: -0.03em; line-height: 1; }
.discount-tile b em { font-style: normal; color: var(--cta); font-size: 32px; }
.discount-tile span { color: var(--muted); font-size: 14px; display: block; margin-top: 8px; }
.discount-tile.featured { border-color: var(--orange-500); box-shadow: 0 8px 28px rgba(249, 115, 22, 0.18); }

.package-grid { display: flex; flex-wrap: wrap; gap: 18px; }
.package-grid > * { flex: 1 1 240px; min-width: 0; }
.package-card {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; display: grid; gap: 8px; align-content: start;
}
.package-card.featured { border-color: var(--blue-500); box-shadow: var(--glow); }
.package-card .badge { position: absolute; top: -12px; right: 18px; }
.package-card h3 { font-size: 20px; }
.package-card .pkg-count { color: var(--text-2); }
.package-card .pkg-count b { font-family: var(--font-display); font-size: 34px; color: var(--text); letter-spacing: -0.02em; }
.package-card p { color: var(--text-2); font-size: 14px; }

/* Unified "every way to take this course" options */
.option-list { display: grid; gap: 12px; max-width: 860px; }
.option-row {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 16px 18px; flex-wrap: wrap;
}
.option-row.option-current { border-color: var(--blue-500); background: color-mix(in srgb, var(--blue-500) 7%, var(--surface)); }
.option-row .option-ico {
  width: 40px; height: 40px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: rgba(47, 107, 255, 0.14); color: var(--blue-300);
  border: 1px solid rgba(79, 139, 255, 0.3);
}
[data-theme="light"] .option-row .option-ico { color: var(--blue-600); }
.option-row .grow { flex: 1; min-width: 200px; }
.option-row b { font-family: var(--font-display); font-size: 15px; display: block; }
.option-row .sub { color: var(--muted); font-size: 13px; }
.option-row .date-block { width: 54px; padding: 7px 3px 8px; }
.option-row .date-block b { font-size: 19px; font-family: var(--font-display); }
.option-row .btn { padding: 9px 18px; font-size: 14px; }

/* Policies */
.policy-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.policy-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; transition: transform .18s, border-color .18s, box-shadow .18s;
}
.policy-card:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.policy-card h2 { font-size: 18px; }
.policy-card h2 a::after { content: ""; position: absolute; inset: 0; }
.policy-card h2 a:hover { color: var(--accent); }
.policy-card p { color: var(--text-2); font-size: 13.5px; }
.policy-card .see-all { margin-top: auto; font-size: 13.5px; }
.policy-meta { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.policy-body { display: grid; gap: 14px; max-width: none; }
.policy-body h2 { font-size: 20px; margin-top: 14px; }
.policy-body p { line-height: 1.7; }
.policy-li { padding-left: 22px; position: relative; }
.policy-li::before { content: "•"; position: absolute; left: 6px; color: var(--cta); }

/* Instructors */
.inst-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.inst-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; transition: transform .18s, border-color .18s, box-shadow .18s;
}
.inst-card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow); }
.inst-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-strong); }
.inst-photo-fallback { width: 96px; height: 96px; font-size: 30px; }
.inst-card h2 { font-size: 19px; }
.inst-card h2 a::after { content: ""; position: absolute; inset: 0; }
.inst-card h2 a:hover { color: var(--accent); }
.inst-card .role { color: var(--muted); font-size: 13.5px; }
.inst-card .bio { color: var(--text-2); font-size: 14px; }
.inst-card .see-all { margin-top: auto; font-size: 14px; }

.inst-hero { display: flex; gap: 28px; align-items: center; padding-bottom: 8px; flex-wrap: wrap; }
.inst-portrait { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; border: 3px solid var(--border-strong); box-shadow: var(--shadow); }
.inst-portrait-fallback { width: 150px; height: 150px; font-size: 44px; }
.inst-hero h1 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 6px; }
.inst-hero .role { color: var(--muted); margin-bottom: 14px; }
.inst-stats { display: flex; gap: 8px; flex-wrap: wrap; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.text-muted { color: var(--muted); }
.mt-2 { margin-top: 16px; }
.hide-desktop { display: none; }
@media (max-width: 960px) { .hide-desktop { display: initial; } .hide-mobile { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   404 page
   -------------------------------------------------------------------------- */
.nf-hero { text-align: center; padding: 72px 16px 40px; }
.nf-code {
  font-family: var(--font-display);
  font-size: clamp(72px, 14vw, 140px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(120deg, var(--blue-400), var(--cyan-400) 55%, var(--orange-400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nf-hero h1 { font-size: clamp(22px, 3.4vw, 32px); margin: 10px 0 12px; }
.nf-sub { color: var(--text-2); max-width: 620px; margin: 0 auto 26px; }
.nf-path {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 0.92em;
  word-break: break-all;
}
.nf-search {
  display: flex; align-items: center; gap: 10px;
  max-width: 560px; margin: 0 auto 18px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
}
.nf-search svg { color: var(--muted); flex-shrink: 0; }
.nf-search input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--text); font: 500 15px var(--font-body);
}
.nf-search .btn { border-radius: 999px; }
.nf-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.nf-suggest { padding: 26px 0 70px; }
.nf-suggest h2 { text-align: center; font-size: 22px; margin-bottom: 22px; }

/* --------------------------------------------------------------------------
   Sponsor RSVP form (/expected-attendance)
   -------------------------------------------------------------------------- */
.rsvp-container { padding-top: 34px; padding-bottom: 80px; }
.rsvp-page-head { text-align: center; margin-bottom: 26px; }
.rsvp-page-head h1 { font-size: clamp(24px, 3.6vw, 34px); margin-bottom: 8px; }
.rsvp-page-head p { color: var(--text-2); max-width: 640px; margin: 0 auto; }
.rsvp-loading { text-align: center; color: var(--muted); padding: 70px 0; }
.rsvp-noscript { text-align: center; color: var(--muted); padding: 30px 0; }

.rsvp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
}
.rsvp-mode-banner {
  background: rgba(251, 191, 36, 0.14);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: var(--star);
  border-radius: 999px;
  font: 600 12px var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 14px;
  display: inline-block;
  margin-bottom: 14px;
}
.rsvp-head {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.rsvp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.rsvp-k { display: block; font: 600 11px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.rsvp-v { font-weight: 600; }
.rsvp-prior {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: var(--radius-sm);
  padding: 12px 15px;
  font-size: 14px;
  margin-bottom: 16px;
}
.rsvp-inline-error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: var(--radius-sm);
  padding: 12px 15px;
  font-size: 14px;
  margin-bottom: 16px;
}
.rsvp-error-card { text-align: center; padding: 46px 24px; }
.rsvp-error-card h2 { margin-bottom: 10px; }
.rsvp-noatt { display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 16px; cursor: pointer; }
.rsvp-noatt input { width: 17px; height: 17px; accent-color: var(--accent); }
.rsvp-noatt-note {
  background: rgba(79, 139, 255, 0.1);
  border: 1px solid rgba(79, 139, 255, 0.35);
  border-radius: var(--radius-sm);
  padding: 12px 15px;
  font-size: 14px;
  margin-bottom: 16px;
}

.rsvp-days {
  display: grid;
  grid-template-columns: repeat(min(var(--rsvp-day-cols, 1), 4), minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.rsvp-day { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; min-width: 0; }
.rsvp-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.rsvp-day-head h3 { font-size: 14.5px; line-height: 1.3; }
.rsvp-day-totalwrap { color: var(--muted); font-size: 12px; white-space: nowrap; }
.rsvp-day-total {
  display: inline-grid; place-items: center; min-width: 26px; height: 22px;
  padding: 0 7px; border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700;
}
.rsvp-input {
  width: 100%; background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px;
  font: 600 14px var(--font-body); padding: 8px 10px; outline: none;
}
.rsvp-input:focus { border-color: var(--accent); }
.rsvp-day-count label, .rsvp-session-input label {
  display: block; font: 600 11px var(--font-body); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.rsvp-day-count input, .rsvp-session-input input { margin-top: 5px; }
.rsvp-bulk { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 12px; }
.rsvp-bulk-title { font: 700 11px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.rsvp-bulk-fill { display: flex; gap: 8px; }
.rsvp-bulk-fill input { flex: 1; min-width: 0; }
.rsvp-bulk-fill .btn { padding: 7px 12px; font-size: 12.5px; white-space: nowrap; }
.rsvp-bulk-extras { display: flex; gap: 14px; margin-top: 8px; }
.rsvp-linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); font: 600 12.5px var(--font-body); text-decoration: underline;
  text-underline-offset: 3px;
}
.rsvp-linkbtn:hover { color: var(--cta); }
.rsvp-sessions-head { font: 700 10.5px var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 10px 0 6px; }
.rsvp-session { padding: 11px 0; border-top: 1px solid var(--border); }
.rsvp-session-copy strong { display: block; font-size: 13.5px; line-height: 1.4; }
.rsvp-session-meta { display: inline-block; color: var(--muted); font-size: 12px; margin: 3px 10px 0 0; }
.rsvp-session-input label {
  display: flex !important; align-items: center; gap: 10px; margin-top: 8px;
  font-size: 12px !important;
}
.rsvp-session-input input { margin-top: 0 !important; width: 96px; }
.rsvp-comments { margin-bottom: 16px; }
.rsvp-comments label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.rsvp-comments textarea {
  width: 100%; resize: vertical; background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px;
  font: 400 14px/1.5 var(--font-body); padding: 10px 12px; outline: none;
}
.rsvp-comments textarea:focus { border-color: var(--accent); }
.rsvp-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.rsvp-summary {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 15px; font: 600 13px var(--font-body);
}
.rsvp-actions { display: flex; align-items: center; gap: 16px; }
.rsvp-success { text-align: center; padding: 52px 24px; }
.rsvp-success-icon {
  width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--blue-400), var(--cyan-400));
  color: #fff; font-size: 28px; font-weight: 700; line-height: 58px;
}
.rsvp-success h2 { margin-bottom: 8px; }

@media (max-width: 1240px) { .rsvp-days { grid-template-columns: repeat(min(var(--rsvp-day-cols, 1), 3), minmax(0, 1fr)); } }
@media (max-width: 900px) { .rsvp-days { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .rsvp-days { grid-template-columns: 1fr; }
  .rsvp-grid { grid-template-columns: 1fr; }
  .rsvp-footer { flex-direction: column; align-items: stretch; text-align: center; }
  .rsvp-actions { justify-content: center; }
}

/* --------------------------------------------------------------------------
   Admin backend
   -------------------------------------------------------------------------- */
.admin-container { padding-top: 26px; padding-bottom: 80px; }
.admin-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.admin-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.admin-nav a {
  padding: 7px 13px; border-radius: 999px; font: 600 13.5px var(--font-body);
  color: var(--text-2);
}
.admin-nav a:hover { background: var(--surface-2); color: var(--text); }
.admin-nav a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.admin-user { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--muted); }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }
.admin-flash {
  background: rgba(34, 211, 238, 0.1); border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: var(--radius-sm); padding: 11px 15px; font-size: 14px; margin-bottom: 16px;
}
.admin-flash-error { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.4); }
.admin-head-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.admin-head-row h1 { font-size: 26px; }
.admin-head-actions { display: flex; align-items: center; gap: 10px; }
.admin-env {
  font: 700 11px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 10px; vertical-align: middle; margin-left: 8px;
}
.admin-env-production { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.admin-env-staging { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px; margin-bottom: 18px;
}
.stat-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 16px; text-align: center;
}
.stat-tile b { display: block; font: 700 26px var(--font-display); letter-spacing: -0.02em; }
.stat-tile span { color: var(--muted); font-size: 12.5px; }
.admin-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; margin-bottom: 18px; min-width: 0;
}
.admin-panel h2 { font-size: 16px; margin-bottom: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.admin-panel-link { font: 600 12.5px var(--font-body); color: var(--accent); white-space: nowrap; }
.admin-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.table-wrap { overflow-x: auto; }
.admin-subhead { margin: 28px 0 10px; font-size: 17px; }
.admin-tabs {
  display: flex; gap: 4px; margin: 20px 0 18px; border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.admin-tabs a {
  padding: 9px 16px; font: 600 13.5px var(--font-body); color: var(--muted);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.admin-tabs a:hover { color: var(--text); }
.admin-tabs a.active { color: var(--accent); border-bottom-color: var(--accent); }
.admin-stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.admin-stat {
  display: flex; flex-direction: column; gap: 2px; min-width: 120px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 16px;
}
.admin-stat b { font-size: 20px; }
.admin-stat span { font-size: 12.5px; color: var(--muted); }
.admin-pager { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 18px 0; }
/* Group-CPE delivery detail pages */
.gw-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.gw-steps { padding-left: 20px; display: grid; gap: 10px; }
.gw-steps li { padding-left: 4px; }
.gw-faq details { border-bottom: 1px solid var(--border); padding: 6px 0; }
.gw-faq summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.gw-faq details p { color: var(--text-2); padding: 0 0 8px; }
.gw-aside { position: sticky; top: 90px; }
.gw-card h3 { font-size: 15px; margin-bottom: 10px; }
.gw-bestfor { list-style: none; padding: 0; display: grid; gap: 8px; }
.gw-bestfor li { position: relative; padding-left: 20px; font-size: 14px; color: var(--text-2); }
.gw-bestfor li::before { content: "→"; position: absolute; left: 0; color: var(--cta); }
@media (max-width: 820px) { .gw-body { grid-template-columns: 1fr; } .gw-aside { position: static; } }
/* Firm-administrator emphasis banner + hub grid */
.ga-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 28px; padding: 26px 30px; border-radius: var(--radius);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface));
  border: 1px solid var(--border); text-decoration: none; color: inherit;
  flex-wrap: wrap;
}
.ga-banner:hover { border-color: var(--accent); }
.ga-banner-body { flex: 1 1 380px; }
.ga-banner h3 { font-size: 20px; margin: 8px 0 6px; }
.ga-banner p { color: var(--text-2); font-size: 14.5px; max-width: 640px; }
.ga-banner .btn { flex: none; }
.ga-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px; }
.ga-card { padding: 22px; }
.ga-icon { font-size: 26px; margin-bottom: 8px; }
.ga-card h3 { font-size: 16px; margin-bottom: 6px; }
.ga-card p { color: var(--text-2); font-size: 14px; }
.gw-intro { max-width: 760px; }
.cal-add { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 14px; font-size: 13.5px; }
.cal-add-label { font-weight: 600; color: var(--text-2); }
.cal-add a { color: var(--accent); text-decoration: none; }
.cal-add a:hover { text-decoration: underline; }
.cal-sep { color: var(--muted); }
.cal-subscribe {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 18px; padding: 16px 20px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border: 1px solid var(--border);
}
.cal-subscribe-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 340px; }
.cal-subscribe-body b { font-size: 15px; }
.cal-subscribe-body span { font-size: 13.5px; color: var(--text-2); }
.cal-subscribe-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 640px) {
  .cal-subscribe-actions { flex-wrap: nowrap; width: 100%; gap: 6px; }
  .cal-subscribe-actions .btn {
    flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px;
    font-size: 12.5px; white-space: nowrap; text-align: center;
  }
}

.pol-meta { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.pol-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pol-editor textarea { font: 13px/1.6 var(--font-mono, ui-monospace, monospace); resize: vertical; }
.pol-preview { border-left: 1px solid var(--border); padding-left: 18px; max-height: 560px; overflow-y: auto; }
@media (max-width: 820px) { .pol-meta, .pol-editor { grid-template-columns: 1fr; } .pol-preview { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 14px; } }
.admin-table.compact th, .admin-table.compact td { padding: 6px 10px; font-size: 12.5px; }
.rsvp-event { margin-bottom: 16px; }
.rsvp-event-head { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: start; margin-bottom: 14px; }
.rsvp-event-head h2 { font-size: 17px; margin-bottom: 2px; }
.rsvp-tallies { display: flex; gap: 10px; }
.rsvp-tally { text-align: center; background: var(--surface-2, rgba(100,116,139,.1)); border-radius: 8px; padding: 8px 14px; min-width: 74px; }
.rsvp-tally b { display: block; font-size: 18px; font-family: var(--font-display); }
.rsvp-tally span { font-size: 11px; color: var(--muted); }
.rsvp-societies { margin-bottom: 12px; }
.rsvp-societies > summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 6px 0; }
.rsvp-drill-head { font-size: 13.5px; margin: 6px 0 10px; }
/* Event → Session → Sponsor → People drill-down. Indent each level; the
   count sits flush right so the tree scans like an outline. */
.rsvp-tree { border-top: 1px solid var(--border); }
.rsvp-session, .rsvp-sponsor { border-bottom: 1px solid var(--border); }
.rsvp-session > summary, .rsvp-sponsor > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  cursor: pointer; padding: 9px 4px; list-style: none;
}
.rsvp-session > summary::-webkit-details-marker,
.rsvp-sponsor > summary::-webkit-details-marker { display: none; }
.rsvp-session > summary::before, .rsvp-sponsor > summary::before {
  content: "▸"; color: var(--muted); font-size: 11px; transition: transform .12s;
}
.rsvp-session[open] > summary::before, .rsvp-sponsor[open] > summary::before { transform: rotate(90deg); }
.rsvp-session > summary { font-weight: 600; font-size: 13.5px; }
.rsvp-sponsor { margin-left: 20px; border-bottom: none; }
.rsvp-sponsor > summary { font-size: 13px; font-weight: 500; color: var(--text-2); }
.rsvp-node-title { flex: 1 1 auto; min-width: 0; }
.rsvp-node-count {
  flex: none; background: var(--surface-2, rgba(100,116,139,.12)); color: var(--text);
  border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600;
}
.rsvp-people { list-style: none; margin: 0 0 8px; padding: 0 0 0 40px; }
.rsvp-people li { padding: 4px 0; font-size: 13px; }
.pill-sm { font-size: 10.5px; padding: 1px 6px; }
/* Admin form controls default to the theme, not browser chrome. */
.admin-panel input[type="search"], .admin-panel input[type="text"],
.admin-panel input[type="email"] {
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 8px 12px; font-size: 13.5px; outline: none;
}
.admin-panel input[type="search"]:focus, .admin-panel input[type="text"]:focus,
.admin-panel input[type="email"]:focus { border-color: var(--accent); }
.admin-table input[type="checkbox"], .admin-panel input[type="checkbox"] {
  accent-color: var(--accent); width: 15px; height: 15px;
}
.admin-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 14px;
}
.admin-toolbar input[type="search"] {
  flex: 1 1 220px; min-width: 180px; padding: 7px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 13.5px;
}
.admin-toolbar select {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 13px;
}
.admin-bulkbar {
  display: flex; gap: 8px; align-items: center; padding: 8px 12px;
  margin-bottom: 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); font-size: 13px;
}
.btn-danger { color: #e5484d; }
.cell-actions { white-space: nowrap; }
.cell-actions .btn { margin-left: 4px; }
.admin-inline-details summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th {
  text-align: left; font: 700 10.5px var(--font-body); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); padding: 7px 10px;
  border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
.admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.admin-table code { font-size: 12px; }
.cell-clip { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill {
  display: inline-block; border-radius: 999px; padding: 2px 10px;
  font: 700 11px var(--font-body); letter-spacing: 0.04em; text-transform: uppercase;
}
.pill-ok { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.pill-bad { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.pill-warn { background: rgba(251, 191, 36, 0.15); color: var(--star); }
.pill-muted { background: rgba(148, 163, 184, 0.15); color: var(--text-2); }
[data-theme="light"] .pill-ok, [data-theme="light"] .admin-env-production { color: #15803d; }
[data-theme="light"] .pill-bad, [data-theme="light"] .admin-env-staging { color: #b91c1c; }
[data-theme="light"] .pill-warn { color: #a16207; }
.admin-kv { list-style: none; }
.admin-kv li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.admin-kv span { color: var(--muted); }
.admin-detail-row td { background: var(--surface-2); }
.admin-detail-row summary { cursor: pointer; font-size: 12.5px; color: var(--accent); }
.admin-payloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 10px; }
.admin-payloads h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 6px; }
.admin-payloads pre {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px; font-size: 11.5px; max-height: 260px; overflow: auto; white-space: pre-wrap;
}
.inline-form { display: inline; }
.admin-redirect-form { display: grid; grid-template-columns: 1.2fr 1.2fr 0.6fr 1fr auto; gap: 12px; align-items: end; }
.admin-redirect-form label { display: block; font: 600 12px var(--font-body); color: var(--muted); }
.admin-redirect-form input, .admin-redirect-form select, .admin-settings-form input, .admin-settings-form select, .admin-token-form input {
  width: 100%; margin-top: 5px; background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px;
  font: 500 13.5px var(--font-body); padding: 9px 11px; outline: none;
}
.admin-redirect-form input:focus, .admin-settings-form input:focus, .admin-token-form input:focus { border-color: var(--accent); }
@media (max-width: 900px) { .admin-redirect-form { grid-template-columns: 1fr 1fr; } }
.admin-setting-row {
  display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) 1fr;
  gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border);
}
.admin-setting-row label { font-weight: 600; font-size: 14px; }
.admin-setting-row label .text-muted { display: block; font-weight: 400; font-size: 12px; }
.admin-setting-default { color: var(--muted); font-size: 12px; }
.admin-setting-actions { padding-top: 16px; }
@media (max-width: 720px) { .admin-setting-row { grid-template-columns: 1fr; gap: 6px; } }
.admin-filter-row { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.admin-filter-row select, .admin-filter-row input {
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px;
  font: 500 13.5px var(--font-body); padding: 8px 11px; outline: none;
}
.admin-filter-row input { min-width: 240px; }
.admin-login-wrap { display: flex; justify-content: center; padding: 80px 16px; }
.admin-login-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 34px; width: 100%; max-width: 420px; text-align: center;
}
.admin-login-card h1 { font-size: 24px; margin-bottom: 6px; }
.admin-login-card > p { margin-bottom: 22px; }
.admin-sso-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.admin-sso-note { font-size: 13px; margin-bottom: 4px; }
.admin-login-divider {
  display: flex; align-items: center; gap: 12px; color: var(--muted);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; margin: 20px 0;
}
.admin-login-divider::before, .admin-login-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.admin-token-form { text-align: left; }
.admin-token-form label { font: 600 12.5px var(--font-body); color: var(--muted); }
.admin-token-form input { margin-bottom: 12px; }
.admin-token-form .btn { width: 100%; }

/* --------------------------------------------------------------------------
   Evaluation form (/evaluation)
   -------------------------------------------------------------------------- */
.ev-container { padding-top: 34px; padding-bottom: 80px; }
.ev--conference.ev { max-width: none; }
.ev-demo-banner {
  background: #1c2740; color: #cdd8f5; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 10px 15px; font-size: 13px;
  font-weight: 600; margin-bottom: 18px;
}
[data-theme="light"] .ev-demo-banner { background: #0e1633; color: #cdd8f5; }

.ev-header {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px; margin-bottom: 20px;
}
.ev-header--media { display: flex; gap: 22px; align-items: stretch; }
.ev-hero-media { flex: 0 0 34%; max-width: 340px; }
.ev-hero-img { width: 100%; height: 100%; min-height: 170px; object-fit: cover; border-radius: var(--radius-sm); }
.ev-header-body { flex: 1; min-width: 0; }
.ev-eyebrow {
  display: inline-block; font: 700 11px var(--font-body); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.ev-title { font-size: clamp(22px, 3vw, 30px); line-height: 1.15; margin-bottom: 6px; }
.ev-sub-event { font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.ev-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 0; }
.ev-fact {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px; font: 600 12.5px var(--font-body);
}
.ev-header-desc { color: var(--text-2); font-size: 14px; margin-bottom: 10px; }
.ev-subtitle { color: var(--muted); font-size: 13.5px; max-width: 78ch; }
.ev-progress { margin-top: 14px; }
.ev-progress-bar { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.ev-progress-fill {
  display: block; height: 100%; border-radius: 999px; transition: width .25s;
  background: linear-gradient(90deg, var(--blue-400), var(--cyan-400));
}
.ev-progress-label { display: inline-block; margin-top: 6px; font: 600 12.5px var(--font-body); color: var(--muted); }

.ev-session, .ev-overall {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin-bottom: 16px;
}
.ev-section-title { font-size: 19px; margin-bottom: 14px; }
.ev-session-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.ev-session-img { width: 120px; height: 68px; object-fit: cover; border-radius: 8px; flex: none; border: 1px solid var(--border); }
.ev-session-title { font-size: 17px; margin-bottom: 2px; }
.ev-session-num { color: var(--accent); }
.ev-session-info { color: var(--muted); font-size: 13px; }
.ev-session.is-complete { border-color: rgba(74, 222, 128, 0.4); box-shadow: inset 4px 0 0 #4ade80; }

.ev-questions { display: grid; gap: 16px; }
.ev-field { min-width: 0; }
.ev-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 8px; }
.ev-req { color: var(--cta); font-weight: 700; }
.ev-textarea, .ev-select {
  width: 100%; background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px;
  font: 400 14px/1.5 var(--font-body); padding: 9px 11px; outline: none;
}
.ev-textarea:focus, .ev-select:focus { border-color: var(--accent); }
.ev-textarea { resize: vertical; }
.ev-select { max-width: 420px; }

/* Segmented button-group ratings (native radios, full-word labels) */
.ev-rating { display: flex; flex-wrap: wrap; gap: 7px; }
.ev-radio, .ev-qradio { position: absolute; opacity: 0; pointer-events: none; }
.ev-btn {
  display: inline-block; cursor: pointer; user-select: none;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 7px 14px;
  font: 600 13px var(--font-body); color: var(--text-2);
  transition: background .12s, color .12s, border-color .12s;
}
.ev-btn:hover { border-color: var(--accent); color: var(--text); }
.ev-radio:checked + .ev-btn { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ev-radio:focus-visible + .ev-btn { outline: 2px solid var(--accent); outline-offset: 2px; }
.ev-rating--fill .ev-btn { flex: 1 1 auto; text-align: center; }

/* Conference matrix */
.ev-qmatrix {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 14px; overflow: hidden;
}
.ev-qmatrix.is-complete { border-color: rgba(74, 222, 128, 0.4); }
.ev-qmatrix.ev-needs { border-color: rgba(239, 68, 68, 0.6); }
.ev-qhead {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 15px 18px; color: var(--text);
}
.ev-qmatrix.is-complete .ev-qhead { background: rgba(74, 222, 128, 0.06); }
.ev-qhead-main { flex: 1; min-width: 0; }
.ev-qstep {
  display: block; font: 700 10.5px var(--font-body); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 3px;
}
.ev-qq { font: 700 16px var(--font-display); line-height: 1.25; }
.ev-qcaret { color: var(--accent); flex: none; transition: transform .15s; }
.ev-qhead[aria-expanded="true"] .ev-qcaret { transform: rotate(180deg); }
.ev-qstatus {
  flex: none; border-radius: 999px; padding: 4px 11px;
  font: 700 11.5px var(--font-body); white-space: nowrap;
}
.ev-qstatus--done    { background: rgba(74, 222, 128, 0.15); color: #4ade80; }
.ev-qstatus--partial { background: rgba(251, 191, 36, 0.15); color: var(--star); }
.ev-qstatus--empty   { background: var(--surface-2); color: var(--muted); }
.ev-qstatus--hint    { background: rgba(239, 68, 68, 0.15); color: #f87171; }
[data-theme="light"] .ev-qstatus--done { color: #15803d; }
[data-theme="light"] .ev-qstatus--hint { color: #b91c1c; }
.ev-qbody { padding: 4px 18px 18px; }
.ev-qscroll { overflow-x: auto; }
.ev-qfill { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 14px; }
.ev-qfill-label { font: 700 12px var(--font-body); color: var(--muted); margin-right: 3px; }
.ev-qfill-btn {
  cursor: pointer; background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 5px 12px; font: 600 12px var(--font-body); color: var(--text-2);
}
.ev-qfill-btn:hover, .ev-qfill-btn.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ev-qtable { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 760px; }
.ev-qtable th, .ev-qtable td { border-top: 1px solid var(--border); padding: 8px 6px; text-align: center; }
.ev-qtable thead th {
  border-top: 0; font: 700 10.5px var(--font-body); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted);
}
.ev-qtable-sess { width: 34%; min-width: 230px; text-align: left !important; }
.ev-qrow:hover { background: var(--surface-2); }
.ev-qsess { display: flex; gap: 10px; align-items: center; }
.ev-qthumb { width: 62px; height: 36px; object-fit: cover; border-radius: 6px; flex: none; border: 1px solid var(--border); }
.ev-qmeta { min-width: 0; }
.ev-qname { display: block; font-weight: 600; font-size: 13px; line-height: 1.3; }
.ev-qnum { color: var(--accent); }
.ev-qsub { display: block; color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.ev-qopt {
  display: block; cursor: pointer; border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 8px 4px; font: 600 11.5px var(--font-body);
  color: var(--text-2); background: var(--surface-2);
}
.ev-qopt:hover { border-color: var(--accent); color: var(--text); }
.ev-qradio:checked + .ev-qopt { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ev-qradio:focus-visible + .ev-qopt { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Per-session comments */
.ev-comments {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 16px;
}
.ev-comments-summary {
  display: flex; align-items: center; gap: 12px; padding: 15px 18px;
  cursor: pointer; list-style: none;
}
.ev-comments-summary::-webkit-details-marker { display: none; }
.ev-comments-icon { font-size: 20px; }
.ev-comments-text { flex: 1; }
.ev-comments-title { display: block; font-weight: 700; font-size: 14.5px; }
.ev-comments-sub { display: block; color: var(--muted); font-size: 12.5px; }
.ev-comments-caret { color: var(--accent); transition: transform .15s; }
.ev-comments[open] .ev-comments-caret { transform: rotate(180deg); }
.ev-comments-body { padding: 0 18px 18px; display: grid; gap: 14px; }
.ev-comment-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.ev-comment-thumb { width: 62px; height: 36px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.ev-comment-label { font-weight: 600; font-size: 13.5px; display: block; }
.ev-comment-meta { color: var(--muted); font-size: 11.5px; }

.ev-alert {
  background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: var(--radius-sm); padding: 12px 15px; font-size: 14px;
  font-weight: 600; margin-bottom: 16px;
}
.ev-actions { display: flex; justify-content: flex-end; padding-bottom: 10px; }
.ev-submit { font-size: 15px; padding: 12px 28px; }

/* Notice / thank-you screens */
.ev-thanks {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  max-width: 640px; margin: 40px auto 80px; padding: 40px 34px; text-align: center;
}
.ev-thanks--warn { border-color: rgba(251, 191, 36, 0.4); }
.ev-thanks-icon { font-size: 40px; margin-bottom: 12px; }
.ev-thanks-title { font-size: 24px; margin-bottom: 10px; }
.ev-thanks-lead { font-size: 15px; margin-bottom: 12px; }
.ev-thanks-body { color: var(--text-2); font-size: 14px; margin-bottom: 12px; }
.ev-thanks-help, .ev-thanks-upcoming { color: var(--text-2); font-size: 13.5px; margin-bottom: 12px; }
.ev-thanks-sign { color: var(--muted); font-size: 13px; font-style: italic; margin-top: 6px; }

@media (max-width: 760px) {
  .ev-header--media { flex-direction: column; }
  .ev-hero-media { max-width: none; flex: none; }
  .ev-hero-img { min-height: 0; max-height: 200px; }
  /* Matrix collapses to stacked option buttons per session */
  .ev-qtable, .ev-qtable tbody, .ev-qtable tr, .ev-qtable td { display: block; width: 100%; min-width: 0; }
  .ev-qtable thead { display: none; }
  .ev-qtable-sess { min-width: 0; }
  .ev-qrow { border-top: 1px solid var(--border); padding: 10px 0; }
  .ev-qtable th, .ev-qtable td { border-top: 0; padding: 4px 0; text-align: left; }
  .ev-qcell { display: inline-block !important; width: auto !important; margin: 3px 4px 0 0; }
  .ev-qopt { padding: 7px 12px; border-radius: 999px; }
}

.admin-json-editor {
  width: 100%; background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px;
  font: 400 12.5px/1.55 ui-monospace, "SF Mono", Menlo, monospace;
  padding: 12px; outline: none; resize: vertical;
}
.admin-json-editor:focus { border-color: var(--accent); }
.admin-group-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 6px 16px; max-height: 320px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px; padding: 12px;
}
.admin-group-opt { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.admin-group-opt input { accent-color: var(--accent); flex: none; }
.admin-group-opt em { color: var(--muted); font-style: normal; font-size: 11px; }

/* --------------------------------------------------------------------------
   TaxRevolution 2026 landing (/tax-revolution-2026)
   Mirrors the WP original (white masthead, #188ece buttons, #0b405c centered
   headings, #eaf3f7 alt bands) via --tr-* tokens; dark theme remaps them onto
   the site palette. The banner SVG artwork is navy-on-transparent, so dark
   mode floats it on a white plate (same treatment as sponsor logos).
   -------------------------------------------------------------------------- */
.page-tr26 {
  --tr-accent: #188ece; --tr-accent-hover: #1176ad;
  --tr-navy: #0b405c;                        /* headings */
  --tr-band: #11375f;                        /* divider + register band (fixed) */
  --tr-page: #ffffff; --tr-ink: #333333; --tr-muted: #5b6473;
  --tr-alt: #eaf3f7; --tr-card: #ffffff; --tr-line: #dbe4ef;
  --tr-soft: #e8f1fb; --tr-row-alt: #f5f8fc;
  --tr-input-bg: #f7fafd; --tr-input-line: #c9d6e6; --tr-input-focus: #ffffff;
  --tr-badge-bg: #fff7e6; --tr-badge-line: #f2ddb0;
  --tr-plate: transparent;                   /* dark: white plate behind fixed-color art */
}
:root[data-theme="dark"] .page-tr26 {
  --tr-navy: #8fc4e8;
  --tr-page: var(--bg); --tr-ink: var(--text); --tr-muted: var(--text-2);
  --tr-alt: var(--surface); --tr-card: var(--surface); --tr-line: var(--border);
  --tr-soft: rgba(24, 142, 206, 0.16); --tr-row-alt: rgba(255, 255, 255, 0.03);
  --tr-input-bg: var(--bg-elev); --tr-input-line: var(--border-strong);
  --tr-input-focus: var(--bg-elev);
  --tr-badge-bg: rgba(242, 221, 176, 0.1); --tr-badge-line: rgba(242, 221, 176, 0.3);
  --tr-plate: #ffffff;
}
.page-tr26 main { background: var(--tr-page); color: var(--tr-ink); }
.tr26-hero { background: var(--tr-page); padding: 26px 0 0; text-align: center; }
.tr26-banner-plate { background: var(--tr-plate); border-radius: 14px; max-width: 1040px; margin: 0 auto; }
:root[data-theme="dark"] .tr26-banner-plate { padding: 18px 20px 8px; }
.tr26-banner { width: 100%; max-width: 1000px; height: auto; display: block; margin: 0 auto; }
.tr26-navy-bar { height: 16px; background: var(--tr-band); margin-top: 22px; }
.tr26-hero-body { padding: 40px 16px 44px; background: var(--tr-page); }
.tr26-event-title { color: var(--tr-navy); font-size: clamp(30px, 5vw, 42px); margin-bottom: 8px; }
.tr26-tagline { color: var(--tr-muted); font-size: clamp(17px, 2.4vw, 22px); font-style: italic; font-weight: 500; margin-bottom: 14px; }
.tr26-date { color: var(--tr-ink); font-size: 16px; line-height: 1.6; margin-bottom: 24px; }
.tr26-cta-btn {
  display: inline-block; background: var(--tr-accent); color: #ffffff;
  font: 700 16.5px var(--font-body); padding: 14px 32px; border-radius: 4px;
  box-shadow: 0 6px 18px rgba(24, 142, 206, 0.3); transition: transform .12s, background .12s;
}
.tr26-cta-btn:hover { background: var(--tr-accent-hover); color: #ffffff; transform: translateY(-2px); }
.tr26-cta-center { text-align: center; margin-top: 26px; }
.tr26-section { padding: 54px 0; }
.tr26-alt-bg { background: var(--tr-alt); }
.tr26-container { max-width: 880px; }
.tr26-container p { margin-bottom: 14px; font-size: 15.5px; line-height: 1.65; color: var(--tr-ink); }
.tr26-section-title { color: var(--tr-navy); font-size: clamp(24px, 3.4vw, 32px); margin-bottom: 22px; text-align: center; }
.tr26-tz { font-size: 14px; font-weight: 400; color: var(--tr-muted); }
.tr26-topic-list { margin: 0 0 16px 4px; padding-left: 22px; display: grid; gap: 7px; font-size: 15.5px; color: var(--tr-ink); }
.tr26-cpe-badge {
  background: var(--tr-badge-bg); border: 1px solid var(--tr-badge-line); border-radius: 10px;
  padding: 12px 18px; display: inline-block; font-size: 15.5px;
}
.tr26-why-list { list-style: none; padding: 0; display: grid; gap: 12px; font-size: 17px; color: var(--tr-ink); }
.tr26-check {
  display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 10px;
  background: var(--tr-accent); color: #fff; border-radius: 50%; font-size: 14px; font-weight: 700;
}
.tr26-table-wrap { overflow-x: auto; border: 1px solid var(--tr-line); border-radius: 12px; }
.tr26-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; background: var(--tr-card); }
.tr26-table th {
  background: var(--tr-band); color: #fff; text-align: left; padding: 12px 14px;
  font: 700 12px var(--font-body); letter-spacing: 0.05em; text-transform: uppercase;
}
.tr26-table td { padding: 12px 14px; border-top: 1px solid var(--tr-line); color: var(--tr-ink); vertical-align: top; }
.tr26-table em { color: var(--tr-muted); font-size: 12.5px; }
.tr26-alt-row td { background: var(--tr-row-alt); }
.tr26-keynote-row td { background: var(--tr-soft); font-weight: 600; }
.tr26-session { background: var(--tr-card); border: 1px solid var(--tr-line); border-radius: 14px; padding: 22px 24px; margin-bottom: 16px; }
.tr26-alt-bg .tr26-session { box-shadow: 0 2px 10px rgba(17, 55, 95, 0.05); }
.tr26-session-header { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.tr26-session-time { font: 700 14px var(--font-display); color: var(--tr-accent); }
.tr26-session-tag {
  background: var(--tr-soft); color: var(--tr-accent); border-radius: 999px;
  font: 700 11px var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 12px;
}
.tr26-tag-keynote { background: var(--tr-accent); color: #ffffff; }
.tr26-session-sponsor { color: var(--tr-muted); font-size: 12.5px; font-style: italic; }
.tr26-session-title { color: var(--tr-navy); font-size: 19px; margin-bottom: 4px; }
.tr26-session-presenter { color: var(--tr-muted); font-weight: 600; font-size: 14px; }
.tr26-session ul { padding-left: 22px; display: grid; gap: 6px; font-size: 14.5px; color: var(--tr-ink); }
.tr26-speaker-grid { display: grid; gap: 16px; }
.tr26-speaker-card {
  display: flex; gap: 18px; align-items: flex-start;
  background: var(--tr-card); border: 1px solid var(--tr-line); border-radius: 14px; padding: 20px;
}
.tr26-speaker-photo { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; flex: none; border: 3px solid var(--tr-soft); }
.tr26-speaker-info h3 { color: var(--tr-navy); font-size: 18px; margin-bottom: 2px; }
.tr26-speaker-title { color: var(--tr-accent); font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.tr26-speaker-info p { font-size: 14px; margin-bottom: 6px; }
.tr26-speaker-link { color: var(--tr-accent); font-weight: 700; font-size: 13.5px; }
.tr26-sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tr26-sponsor-card {
  background: var(--tr-card); border: 1px solid var(--tr-line); border-radius: 14px;
  padding: 22px; text-align: center;
}
.tr26-sponsor-logo {
  height: 46px; max-width: 200px; object-fit: contain; margin: 0 auto 14px; display: block;
  background: var(--tr-plate); border-radius: 8px;
}
:root[data-theme="dark"] .tr26-sponsor-logo { height: 60px; padding: 7px 12px; max-width: 224px; }
.tr26-register { background: linear-gradient(160deg, #11375f, #0b2a4d); }
.tr26-white-title { color: #ffffff; text-align: center; }
.tr26-register-sub { color: #cdddf0 !important; text-align: center; max-width: 560px; margin-inline: auto; }
.tr26-form-wrap {
  background: var(--tr-card); border-radius: 16px; padding: 30px;
  max-width: 720px; margin: 26px auto 0; box-shadow: 0 18px 44px rgba(2, 12, 27, 0.35);
}
.tr26-hp { position: absolute; left: -9999px; top: -9999px; }
.tr26-required-note { color: var(--tr-muted); font-size: 13px; margin-bottom: 16px; }
.tr26-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tr26-form-group { margin-bottom: 14px; min-width: 0; }
.tr26-form-group label { display: block; font: 600 13px var(--font-body); color: var(--tr-navy); margin-bottom: 5px; }
.tr26-req { color: #d43c3c; }
.tr26-form-group input, .tr26-form-group select {
  width: 100%; background: var(--tr-input-bg); color: var(--tr-ink);
  border: 1px solid var(--tr-input-line); border-radius: 8px;
  font: 500 14.5px var(--font-body); padding: 11px 12px; outline: none;
}
.tr26-form-group input:focus, .tr26-form-group select:focus { border-color: var(--tr-accent); background: var(--tr-input-focus); }
.tr26-input-error { border-color: #d43c3c !important; }
.tr26-field-tip { color: #9a6700; font-size: 12.5px; margin-top: 5px; }
:root[data-theme="dark"] .tr26-field-tip { color: #e3b341; }
.tr26-consent-group { display: grid; gap: 10px; margin: 18px 0; }
.tr26-consent-item { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--tr-ink); cursor: pointer; }
.tr26-consent-item input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--tr-accent); flex: none; }
.tr26-form-error {
  background: #fdecec; border: 1px solid #f2c4c4; color: #9c2b2b;
  border-radius: 8px; padding: 12px 15px; font-size: 14px; margin-bottom: 14px;
}
:root[data-theme="dark"] .tr26-form-error { background: rgba(212, 60, 60, 0.14); border-color: rgba(212, 60, 60, 0.4); color: #f1a8a8; }
.tr26-submit-btn {
  width: 100%; background: var(--tr-accent); color: #ffffff; border: 0; cursor: pointer;
  font: 700 17px var(--font-body); padding: 15px; border-radius: 4px; transition: background .12s;
}
.tr26-submit-btn:hover { background: var(--tr-accent-hover); }
.tr26-submit-btn:disabled { opacity: 0.7; cursor: wait; }
.tr26-form-success { text-align: center; padding: 26px 10px; }
.tr26-success-icon {
  width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 14px;
  background: #18a05c; color: #fff; font-size: 28px; font-weight: 700; line-height: 58px;
}
.tr26-form-success h3 { color: var(--tr-navy); font-size: 22px; margin-bottom: 8px; }
.tr26-form-success p { color: var(--tr-ink); }
@media (max-width: 620px) {
  .tr26-form-row-2 { grid-template-columns: 1fr; gap: 0; }
  .tr26-section { padding: 38px 0; }
  .tr26-speaker-card { flex-direction: column; align-items: center; text-align: center; }
  .tr26-form-wrap { padding: 20px; }
}

/* Sponsor dashboard */
.tr26-dash-container { padding-top: 30px; padding-bottom: 80px; }
.tr26-dash-badge {
  background: var(--cta); color: var(--cta-ink); border-radius: 999px;
  font: 700 11px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 12px; vertical-align: middle; margin-left: 10px;
}
.tr26-dash-login {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); max-width: 460px; margin: 60px auto; padding: 34px; text-align: center;
}
.tr26-dash-login h1 { font-size: 22px; margin-bottom: 8px; }
.tr26-dash-login p { margin-bottom: 18px; }
.tr26-dash-login input {
  width: 100%; background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px;
  font: 500 14.5px var(--font-body); padding: 11px 12px; outline: none; margin-bottom: 12px;
}
.tr26-dash-login .btn { width: 100%; }
.tr26-dash-section-title { font-size: 18px; margin: 26px 0 12px; }
.tr26-demo-bars { display: grid; gap: 8px; }
.tr26-demo-row { display: grid; grid-template-columns: 130px 1fr 34px; gap: 10px; align-items: center; font-size: 13px; }
.tr26-demo-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.tr26-demo-track { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.tr26-demo-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-500), var(--cyan-400)); border-radius: 999px; }
.tr26-demo-row b { text-align: right; font-family: var(--font-display); }
.tr26-linkgen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 8px; }
.tr26-linkgen-grid label { font: 600 12px var(--font-body); color: var(--muted); }
.tr26-linkgen-grid input, .tr26-linkgen-grid select {
  width: 100%; margin-top: 4px; background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px;
  font: 500 13px var(--font-body); padding: 8px 10px; outline: none;
}
.tr26-lg-full { grid-column: 1 / -1; }
.tr26-linkgen-subhead { font: 700 11.5px var(--font-body); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin: 14px 0 8px; }
.tr26-linkgen-output-row { display: flex; gap: 10px; align-items: stretch; margin-top: 10px; }
.tr26-linkgen-output-row textarea {
  flex: 1; background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px;
  font: 400 12.5px/1.5 ui-monospace, Menlo, monospace; padding: 10px; resize: vertical;
}
.tr26-pager { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.tr26-page {
  min-width: 34px; text-align: center; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--border); font: 600 13px var(--font-body); color: var(--text-2);
}
.tr26-page.is-current { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   Hero platform: cart count badge + login page (/login)
   -------------------------------------------------------------------------- */
.icon-btn-cart { position: relative; }
.cart-badge {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 999px; background: var(--accent); color: #fff;
  font: 700 10.5px/16px var(--font-body); text-align: center; display: none;
}
.cart-badge.has-items { display: block; }

/* Signed-in account state (set by app.js via /api/session): dot on the icon,
   and the icon opens a small menu (account / cart / log out) instead of
   navigating to /login. */
.account-wrap { position: relative; display: inline-flex; }
#account-link { position: relative; }
.account-dot {
  position: absolute; top: -2px; right: -2px; width: 9px; height: 9px;
  border-radius: 999px; background: var(--accent);
  border: 2px solid var(--surface); display: none;
}
#account-link.signed-in .account-dot { display: block; }
.account-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
  padding: 6px; z-index: 60;
}
.account-menu a {
  display: block; padding: 8px 12px; border-radius: 7px;
  color: var(--text); font-size: 14px; text-decoration: none;
}
.account-menu a:hover { background: var(--surface-2, rgba(100, 116, 139, .1)); }

/* Full-bleed imagery behind the sign-in card (Unsplash, cached; the page is
   identical minus the photo when unavailable). Soft wash keeps the card and
   credit readable in both themes. */
.login-scene.has-bg {
  position: relative;
  /* Heavy wash of the page background over the photo — scenery as a hint,
     not a statement. color-mix keeps it right in both themes; the plain
     dark fallback covers browsers without it. */
  background: linear-gradient(rgba(15, 23, 42, .78), rgba(15, 23, 42, .82)),
              var(--login-img) center / cover no-repeat;
  background: linear-gradient(color-mix(in srgb, var(--bg) 78%, transparent),
                              color-mix(in srgb, var(--bg) 84%, transparent)),
              var(--login-img) center / cover no-repeat;
}
.login-scene.has-bg .login-card {
  box-shadow: 0 18px 48px rgba(2, 6, 23, .18);
}
.login-scene.has-bg .img-credit {
  position: absolute; right: 10px; bottom: 8px; font-size: 11.5px;
  color: var(--text); opacity: .45; text-decoration: none;
}
.login-scene.has-bg .img-credit:hover { opacity: .8; }

.login-container { max-width: 520px; padding-top: 48px; padding-bottom: 96px; }
.login-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 36px 32px;
}
.login-eyebrow {
  text-transform: uppercase; letter-spacing: .08em; font: 700 12px var(--font-body);
  color: var(--accent); margin-bottom: 6px;
}
.login-card h1 { font-size: 28px; margin-bottom: 6px; }
.login-sub { color: var(--text-2); font-size: 14.5px; margin-bottom: 22px; }
.login-notice {
  background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid var(--accent);
  color: var(--text); border-radius: 8px; padding: 10px 14px; font-size: 14px; margin-bottom: 16px;
}
.login-error {
  background: rgba(220, 38, 38, .1); border: 1px solid rgba(220, 38, 38, .45);
  color: #f87171; border-radius: 8px; padding: 10px 14px; font-size: 14px; margin-bottom: 16px;
}
[data-theme="light"] .login-error { color: #b91c1c; }
/* Sponsor-portal form fields (base_portal pages share main.css but never had
   these — the sign-in email box was rendering with raw browser chrome). */
.sp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.sp-field span { font: 600 13.5px var(--font-body); }
.sp-field input, .sp-field select, .sp-field textarea {
  background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 11px 13px; font-size: 15px; outline: none;
}
.sp-field input:focus, .sp-field select:focus, .sp-field textarea:focus {
  border-color: var(--accent);
}
.sp-field input::placeholder { color: var(--muted); }

.login-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.login-field span { font: 600 13.5px var(--font-body); }
.login-field input {
  background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 11px 13px; font-size: 15px; outline: none;
}
.login-field input:focus { border-color: var(--accent); }
.login-btn { width: 100%; margin-top: 4px; }
.login-forgot { display: block; text-align: center; margin-top: 14px; font-size: 13.5px; color: var(--accent); }
.login-alt {
  display: flex; gap: 8px; justify-content: center; font-size: 14px;
  border-top: 1px solid var(--border); margin-top: 18px; padding-top: 16px; color: var(--text-2);
}
.login-alt a { color: var(--accent); font-weight: 600; }
.login-alt + .login-alt { border-top: 0; margin-top: 4px; padding-top: 0; }

/* Sign-up (/sign-up) — extends the login card */
.signup-container { max-width: 720px; }
.signup-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.signup-section {
  font-size: 17px; margin: 26px 0 14px; padding-top: 18px;
  border-top: 1px solid var(--border);
}
.signup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.signup-wide { grid-column: 1 / -1; }
.signup-help { color: var(--text-2); font-size: 13px; margin: -6px 0 4px; }
.login-field select {
  background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 11px 13px; font-size: 15px; outline: none;
}
.login-field select:focus { border-color: var(--accent); }
.signup-interests { border: 0; padding: 0; margin: 0 0 16px; }
.signup-interests legend { font: 600 13.5px var(--font-body); margin-bottom: 10px; }
.signup-interest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px 14px; }
.signup-check { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.signup-check input { accent-color: var(--accent); margin-top: 3px; flex: none; width: 16px; height: 16px; }
.signup-consent {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  padding: 12px 14px; margin-bottom: 12px;
}
.signup-consent a { color: var(--accent); }
.signup-check i { color: var(--accent); font-style: normal; }
.signup-duplicate {
  background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid var(--accent);
  border-radius: var(--radius-sm); padding: 18px 20px; margin-bottom: 18px;
}
.signup-duplicate h2 { font-size: 18px; margin-bottom: 6px; }
.signup-duplicate p { color: var(--text-2); font-size: 14px; margin-bottom: 12px; }
.signup-dup-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 620px) {
  .signup-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Blog / Articles (/articles)
   -------------------------------------------------------------------------- */
.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.chip-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.blog-rss { font: 600 12px var(--font-body); color: var(--muted); margin-left: 6px; }
.blog-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px; padding-bottom: 40px;
}
.blog-card { display: flex; flex-direction: column; overflow: hidden; }
.blog-card-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.blog-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-card-meta { display: flex; gap: 8px; color: var(--muted); font-size: 13px; }
.blog-card-body h2 { font-size: 19px; line-height: 1.3; }
.blog-card-body p { color: var(--text-2); font-size: 14px; }
.blog-card-more { color: var(--accent); font: 600 13.5px var(--font-body); margin-top: auto; }
.blog-pager { display: flex; gap: 16px; align-items: center; justify-content: center; padding: 10px 0 60px; }

.blog-post { padding-top: 34px; padding-bottom: 80px; }
.blog-crumbs { margin-bottom: 14px; }
.blog-crumbs a { color: var(--accent); font: 600 13.5px var(--font-body); }
.blog-post h1 { font-size: clamp(28px, 4.5vw, 40px); line-height: 1.15; margin-bottom: 12px; }
.blog-byline { display: flex; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.blog-hero { margin: 22px 0; border-radius: var(--radius); overflow: hidden; }
/* Cap the hero: full-width articles turned landscape images into 80% of the
   viewport. Banner proportions, cropped — never a wall. */
.blog-hero img { width: 100%; display: block; max-height: min(420px, 45vh); object-fit: cover; }
.blog-body { margin-top: 8px; }

.prose { color: var(--text-2); font-size: 16.5px; line-height: 1.75; }
.prose h2 { font-size: 24px; margin: 34px 0 12px; color: var(--text); }
.prose h3 { font-size: 19px; margin: 26px 0 10px; color: var(--text); }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 26px; }
.prose li { margin: 5px 0; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote {
  border-left: 3px solid var(--accent); margin: 20px 0; padding: 6px 18px;
  color: var(--text); background: var(--surface); border-radius: 0 10px 10px 0;
}
.prose code { background: var(--surface-2); padding: 2px 6px; border-radius: 5px; font-size: 14px; }
.prose pre { background: var(--surface-2); padding: 14px 16px; border-radius: 10px; overflow-x: auto; margin: 0 0 16px; }
.prose pre code { background: none; padding: 0; }
.prose img { max-width: 100%; border-radius: 10px; }
/* Tables sit on the tinted page background, so give the table itself a surface —
   otherwise the cells are transparent and the page shows through, which reads as
   grey rows under a white header. Applies to plain <table> markup from any
   source (admin-authored articles, and Nexus articles published before their
   flattener emitted .cd-table-wrap). Canonical .cd-table overrides this: it
   stays transparent so its own white wrap shows through. */
.prose table { border-collapse: collapse; width: 100%; margin: 0 0 16px; font-size: 14.5px;
  background: var(--surface); border-radius: 8px; overflow: hidden; }
.prose th, .prose td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
.prose th { background: var(--surface-2); color: var(--text); }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }
/* Real <table> markup arrives from publishers and would overflow a phone.
   Scroll it instead of blowing out the page; desktop keeps normal layout. */
@media (max-width: 720px) {
  .prose table { display: block; max-width: 100%; overflow-x: auto; }
}

/* Structured article blocks (Nexus publishes) — themed components, not the
   sender's styling. All inherit .prose typography. */

/* Content Desk block styling (.cd-*) is NOT hand-written here any more — it is
   vendored from the Nexus contract bucket into cd_article_theme.css, which the
   article page loads before this file. See scripts/sync_nexus_contract.py.
   What stays here is only what upstream doesn't (yet) cover: */

/* 1. Their markup uses .cd-compare-title, but already-published articles carry a
      plain <h4>, so keep those looking right too. */
.cd-doc .cd-compare-col > h4 {
  font-weight: 700; margin: 0 0 .5rem; padding-bottom: .4rem;
  border-bottom: 2px solid var(--accent);
}

/* 2. Contract 1.44.0 gave the sheet a --cd-* variable API and put a surface on
      .cd-table-wrap / .cd-accordion, so those overrides are gone — theming now
      lives in the generated sheet's variable block. .cd-compare-col is the one
      bordered card upstream still leaves transparent, so it would inherit our
      tinted page and read as an outline rather than a card. */
.cd-doc .cd-compare-col { background: var(--cd-surface); }
.cd-doc h2, .cd-doc h3 { clear: both; }   /* a floated figure can't bleed past its section */
.ab-intro { font-size: 18px; color: var(--text); }
.ab-takeaways, .ab-cta { padding: 20px 24px; margin: 26px 0; }
.ab-takeaways h2, .ab-cta h2 { margin: 0 0 10px; font-size: 20px; }
.ab-takeaways ul { margin-bottom: 0; }
.ab-callout {
  border-left: 3px solid var(--accent); background: var(--surface);
  border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 22px 0;
}
.ab-callout strong { display: block; color: var(--text); margin-bottom: 4px; }
.ab-callout p:last-child { margin-bottom: 0; }
.ab-quiz { padding: 16px 20px; margin: 26px 0; }
.ab-quiz summary { cursor: pointer; font-weight: 600; color: var(--text); }
.ab-quiz[open] summary { margin-bottom: 10px; }
.ab-cta { border: 1px solid var(--accent); }
.ab-faq h3 { font-size: 17px; }
.ab-image figure { margin: 24px 0; }
.ab-image figcaption { color: var(--muted); font-size: 13.5px; margin-top: 6px; text-align: center; }

.blog-downloads { padding: 20px 24px; margin-top: 32px; }
.blog-downloads h2 { font-size: 18px; margin-bottom: 12px; }
.blog-downloads ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.blog-downloads a {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.blog-downloads a:hover { border-color: var(--accent); }
.blog-downloads b { color: var(--text); font-size: 14.5px; }
.blog-downloads span { color: var(--muted); font-size: 12.5px; }
.blog-downloads em { color: var(--text-2); font-size: 13px; font-style: normal; }

.blog-author {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 24px; margin-top: 36px;
}
.blog-author-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.blog-author-name { font-weight: 700; color: var(--text); }
.blog-author-name a { color: var(--accent); text-decoration: none; }
.blog-author-title { font-weight: 400; color: var(--muted); }
.blog-author-bio { color: var(--text-2); font-size: 14.5px; margin: 6px 0 0; }

.blog-post-foot { margin-top: 44px; }
/* Text on the left, button on the right.
   flex-direction is spelled out because these are used as `card blog-cta`, and
   `.card` sets `flex-direction: column`. Same specificity, so this wins
   `display` but inherits the column — which turned the box into a centred
   stack: button adrift under the text, and each text block shrink-wrapped, so
   a short heading looked centred while a long one looked left-aligned. The
   layout must not depend on which class the cascade happens to reach last. */
.blog-cta {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 16px 24px;
  align-items: center; justify-content: space-between;
  padding: 24px 28px; margin-bottom: 36px;
}
.blog-cta > :first-child { flex: 1 1 320px; }   /* text takes the slack, not the button */
.blog-cta h2 { font-size: 20px; margin-bottom: 4px; }
.blog-cta p { color: var(--text-2); font-size: 14.5px; }
.blog-controls {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px 24px; flex-wrap: wrap; padding: 6px 0 18px;
}
.blog-controls-right { display: flex; gap: 18px; }
.blog-controls label {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted); font: 600 13px var(--font-body);
}
.blog-controls select {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 6px 10px; font-size: 13.5px;
}
.blog-related-title { font-size: 22px; margin-bottom: 16px; }
.blog-reco { margin-bottom: 40px; }
.blog-reco-sub { color: var(--text-2); font-size: 14.5px; margin: -8px 0 18px; }
.blog-reco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }

.blog-featured { color: var(--accent); border-color: var(--accent); font-weight: 600; }

.option-group-title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 22px 0 4px; }
.option-list .option-group-title:first-child { margin-top: 0; }
.option-group-note { color: var(--text-2); font-size: 14px; margin: 0 0 12px; max-width: 720px; }

.price-eventonly { font: 600 17px/1.4 var(--font-body); color: var(--text); }

/* Card 'Upcoming dates' button + shared dates modal (event-only courses) */
.card-dates-btn {
  display: inline-flex; align-items: center; gap: 6px;
  /* Secondary CTA, but a real one: a transparent button next to the vibrant
     orange Add to Cart read as disabled. Same weight, cool hue. */
  background: var(--blue-400); border: 1px solid transparent; color: #fff;
  box-shadow: 0 6px 20px rgba(79, 139, 255, 0.32);
  cursor: pointer;
}
.card-dates-btn:hover { background: var(--blue-300); color: #0b1226; }
.dates-modal {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; width: min(760px, 94vw); max-height: 82vh;
  margin: auto; /* the global reset removes the UA centering — restore it */
}
.dates-modal::backdrop { background: rgba(0, 0, 0, 0.55); }
.dates-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; margin-bottom: 16px;
}
.dates-modal-head h2 { font-size: 19px; }
.dates-modal-body { overflow-y: auto; max-height: calc(82vh - 90px); }

/* Course details / NASBA program disclosure */
.course-facts {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px 28px; margin: 0 0 18px;
}
.course-facts > div {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 16px;
}
.course-facts dt { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.course-facts dd { color: var(--text); font-size: 14.5px; font-weight: 600; margin: 0; }
.course-compliance { max-width: 860px; line-height: 1.6; }
.course-compliance a { color: var(--accent); }

/* Specials & promotions */
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; padding: 20px 0 10px; }
.promo-card { padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.promo-head { display: flex; justify-content: space-between; align-items: center; }
.promo-icon { font-size: 30px; }
.promo-badge {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent);
}
.promo-card h2 { font-size: 20px; }
.promo-tagline { color: var(--text); font-weight: 600; font-size: 14.5px; }
.promo-body { color: var(--text-2); font-size: 14.5px; line-height: 1.6; flex: 1; }
.promo-code {
  align-self: flex-start; font-size: 13px; color: var(--text-2);
  background: var(--surface-2); border: 1px dashed var(--border-strong);
  border-radius: 8px; padding: 5px 12px;
}
.promo-code b { color: var(--accent); letter-spacing: 0.06em; }
.promo-card .btn { align-self: flex-start; }
.form-error {
  background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 10px; padding: 10px 16px; margin-bottom: 10px; font-size: 14px;
}
.page-refer .editor-field select,
.page-refer .editor-field input {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 9px 12px; width: 100%;
}
.page-refer .editor-field > span { font: 600 13px var(--font-body); }

.promo-soon { opacity: 0.75; border-style: dashed; }
/* 2×2 card grid (single column on phones); each card stacks its content and
   pins the Subscribe button to the bottom so the four line up. */
.feed-list {
  display: grid; gap: 16px; padding: 16px 0 40px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) { .feed-list { grid-template-columns: 1fr; } }
.feed-row {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0; padding: 22px 26px;
}
.feed-row h2 { font-size: 18px; margin-bottom: 4px; }
.feed-row p { color: var(--text-2); font-size: 14px; margin-bottom: 10px; }
.feed-row code {
  font-size: 12px; color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px;
  overflow-wrap: anywhere;
}
.feed-row > div { margin-bottom: 14px; }
.feed-row .btn { flex: none; margin-top: auto; }

/* Admin: article rich editor */
.editor-section { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 22px; }
.editor-section:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.editor-section > h2, .editor-section .editor-mode-row h2 {
  font-size: 15px; margin-bottom: 14px; color: var(--text); letter-spacing: 0.01em;
}
.editor-section-hint { color: var(--muted); font-style: normal; font-weight: 400; font-size: 12.5px; margin-left: 8px; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag-chip {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  padding: 3px 12px; border-radius: 999px; font: 500 12.5px var(--font-body); cursor: pointer;
}
.tag-chip:hover { border-color: var(--accent); color: var(--text); }
.tag-chip-on { background: var(--accent); border-color: var(--accent); color: #fff; }

.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; margin-top: 8px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track {
  width: 42px; height: 24px; border-radius: 999px; background: var(--surface-2);
  border: 1px solid var(--border); position: relative; transition: background 0.15s; flex: none;
}
.switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--muted); transition: transform 0.15s, background 0.15s;
}
.switch input:checked + .switch-track { background: var(--accent); border-color: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(18px); background: #fff; }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.switch-label { color: var(--text-2); font-size: 13px; }

.editor-mode-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.editor-tabs { display: flex; gap: 4px; }
.editor-tab {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  padding: 4px 12px; border-radius: 8px; font: 600 12.5px var(--font-body); cursor: pointer;
}
.editor-tab-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.rte-toolbar {
  display: flex; flex-wrap: wrap; gap: 3px; align-items: center;
  border: 1px solid var(--border); border-bottom: 0; border-radius: 10px 10px 0 0;
  background: var(--surface); padding: 6px 8px; position: sticky; top: 0; z-index: 5;
}
.rte-toolbar button {
  background: none; border: 1px solid transparent; color: var(--text); cursor: pointer;
  min-width: 30px; height: 28px; border-radius: 6px; font-size: 13px;
}
.rte-toolbar button:hover { background: var(--surface-2); border-color: var(--border); }
.rte-sep { width: 1px; height: 18px; background: var(--border); margin: 0 5px; }
.rte {
  min-height: 380px; max-height: 70vh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 0 0 10px 10px;
  background: var(--surface-2); padding: 18px 22px; outline: none;
}
.rte:focus { border-color: var(--accent); }
.rte figcaption { color: var(--muted); font-size: 13px; }
.hero-picker { display: flex; gap: 14px; align-items: flex-start; }
.hero-picker img {
  width: 168px; height: 94px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-2); flex: none;
}
.hero-picker-controls { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.editor-check .editor-checkbox { display: flex; gap: 8px; align-items: center; font-weight: 400; margin-top: 8px; }
.editor-check em { color: var(--muted); font-style: normal; font-size: 12.5px; }
.media-modal {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; width: min(860px, 92vw); max-height: 80vh;
  margin: auto;
}
.media-modal::backdrop { background: rgba(0,0,0,0.55); }
.media-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; overflow-y: auto; max-height: 60vh;
}
.media-item {
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: var(--surface-2); cursor: pointer; padding: 0;
  display: flex; flex-direction: column;
}
.media-item:hover { border-color: var(--accent); }
.media-item img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; background: var(--surface); }
.media-name {
  color: var(--text-2); font-size: 10.5px; padding: 4px 6px; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.media-search {
  width: 100%; margin-bottom: 12px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 8px 12px;
}

.attachment-list { display: grid; gap: 8px; margin-bottom: 10px; }
.attachment-row {
  display: flex; gap: 10px; align-items: center;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; background: var(--surface);
}
.attachment-row .att-title { flex: 1; min-width: 0; }
.attachment-row .att-file { color: var(--muted); font-size: 12.5px; white-space: nowrap; }

/* Admin: API access page */
.api-purpose { font-weight: 400; }
.api-doc { font-size: 14.5px; }
.api-doc h1 { font-size: 20px; margin: 0 0 12px; }
.api-doc h2 { font-size: 17px; margin: 24px 0 8px; }
.api-doc table { display: block; overflow-x: auto; }
.api-doc pre { font-size: 13px; }

/* Home: latest articles strip */
.home-articles { padding: 10px 0 50px; }

/* Admin article editor */
.article-editor .editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.editor-wide { grid-column: 1 / -1; }
.editor-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.editor-field > span { font: 600 13px var(--font-body); }
.editor-field em { color: var(--muted); font-style: normal; font-weight: 400; }
.editor-field input, .editor-field textarea {
  background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 10px 12px; font-size: 14.5px; outline: none;
}
.editor-field input:focus, .editor-field textarea:focus { border-color: var(--accent); }
.editor-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; }
.editor-split textarea {
  font: 400 13.5px/1.6 ui-monospace, "SF Mono", Menlo, monospace; resize: vertical; min-height: 480px;
}
.editor-preview {
  border: 1px dashed var(--border-strong); border-radius: 8px; padding: 16px 18px;
  min-height: 480px; max-height: 700px; overflow-y: auto; font-size: 15px;
}
.editor-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
@media (max-width: 900px) {
  .editor-split, .article-editor .editor-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Info pages: contact / support / teach-for-us
   -------------------------------------------------------------------------- */
.info-layout { display: grid; grid-template-columns: 320px 1fr; gap: 22px; padding-bottom: 70px; }
.info-cards { display: flex; flex-direction: column; gap: 14px; }
.info-card { padding: 20px 22px; }
.info-card h2 { font-size: 16.5px; margin-bottom: 8px; }
.info-card p, .info-card li { color: var(--text-2); font-size: 14.5px; }
.info-card ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.info-card a { color: var(--accent); }
.info-form { padding: 26px 28px; }
.info-form h2 { font-size: 22px; margin-bottom: 14px; }
.info-form textarea {
  background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 11px 13px; font-size: 15px; outline: none; resize: vertical;
}
.info-form textarea:focus { border-color: var(--accent); }
.inq-sent { text-align: center; padding: 30px 10px; }
.inq-sent h2 { margin-bottom: 8px; }
.inq-sent p { color: var(--text-2); margin-bottom: 18px; }
/* This is a lead-form page, not a catalog — cap it well under the wide-desktop
   container so the intro copy and cards don't sprawl edge to edge. */
.page-teach .container { max-width: 1040px; }
.teach-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; padding-bottom: 26px; }
/* Match the form to the cards/intro above it — full page width, not a narrower column. */
.teach-form { max-width: none; margin: 0 0 70px; }
.support-grid { display: flex; flex-wrap: wrap; gap: 16px; padding-bottom: 26px; }
.support-grid > * { flex: 1 1 250px; min-width: 0; }
.support-tile { display: flex; flex-direction: column; gap: 8px; color: var(--text); }
.support-tile:hover { border-color: var(--border-strong); }
.support-faq details { border-top: 1px solid var(--border); padding: 12px 4px; }
.support-faq details:first-of-type { border-top: 0; }
.support-faq summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.support-faq p { color: var(--text-2); font-size: 14.5px; margin-top: 8px; }
.support-faq a { color: var(--accent); }
.page-support .info-form { margin-bottom: 70px; }
@media (max-width: 900px) {
  .info-layout { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   About page + CPA requirements pages
   -------------------------------------------------------------------------- */
.about-eyebrow { text-transform: uppercase; letter-spacing: .08em; font: 700 12px var(--font-body); color: var(--accent); margin-bottom: 8px; }
.about-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; padding-bottom: 26px; }
.info-card.stat { text-align: center; padding: 22px; }
.info-card.stat b { display: block; font: 700 34px var(--font-display); color: var(--accent); }
.info-card.stat span { color: var(--text-2); font-size: 13.5px; }
.about-feature { padding: 30px 34px; margin-bottom: 22px; }
.about-feature h2 { font-size: 26px; margin-bottom: 12px; }
.about-feature p { color: var(--text-2); line-height: 1.7; }
.about-cta { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.about-founders { padding: 34px 0 70px; }
.about-founders > h2 { font-size: 28px; margin-bottom: 4px; }
.founder-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 20px 0 16px; }
.founder-card { padding: 24px; }
.founder-card img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; }
.founder-card h3 { font-size: 20px; }
.founder-card h3 a { color: var(--text); }
.founder-title { color: var(--accent); font: 600 13.5px var(--font-body); margin: 2px 0 10px; }
.founder-card p { color: var(--text-2); font-size: 14.5px; }
.about-story { padding: 24px 28px; }
.about-story p { color: var(--text-2); line-height: 1.7; margin-bottom: 12px; }
.about-story a { color: var(--accent); }

.states-toolbar { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
#state-search {
  flex: 1; min-width: 260px; max-width: 460px;
  background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 10px; padding: 12px 16px; font-size: 15px; outline: none;
}
#state-search:focus { border-color: var(--accent); }
.states-views { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; }
.states-views button { background: var(--surface); color: var(--text-2); border: 0; padding: 10px 18px; font: 600 14px var(--font-body); cursor: pointer; }
.states-views button.is-active { background: var(--accent); color: #fff; }
.states-region { margin-bottom: 28px; }
.states-region h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 12px; }
.states-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.state-card { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; color: var(--text); }
.state-card:hover { border-color: var(--accent); }
.state-abbr { font: 700 12px var(--font-body); color: var(--accent); letter-spacing: .05em; }
.state-name { font: 600 16.5px var(--font-display); }
.state-fact { color: var(--text-2); font-size: 13px; }
.states-empty { padding: 20px 0 50px; }
.states-compare { width: 100%; border-collapse: collapse; font-size: 14px; }
.states-compare th, .states-compare td { padding: 10px 14px; border-bottom: 1px solid var(--border); text-align: left; }
.states-compare th { color: var(--muted); font: 600 12.5px var(--font-body); text-transform: uppercase; letter-spacing: .04em; }
.states-compare th.sortable { cursor: pointer; }
.states-compare th.sortable:hover { color: var(--accent); }
.states-compare a { color: var(--text); }
.states-compare a:hover { color: var(--accent); }
.states-disclaimer { color: var(--muted); font-size: 13.5px; padding: 24px 0 60px; max-width: 720px; }
.states-disclaimer a { color: var(--accent); }

.state-layout { display: grid; grid-template-columns: 1fr 300px; gap: 22px; padding-bottom: 70px; align-items: start; }
.state-facts { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.state-facts > * { flex: 1 1 160px; min-width: 0; }
.state-detail-card { margin-bottom: 16px; }
.state-dl { display: grid; grid-template-columns: 190px 1fr; gap: 12px 18px; }
.state-dl dt { color: var(--muted); font: 600 13px var(--font-body); text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.state-dl dd { color: var(--text-2); font-size: 15px; line-height: 1.6; }
.state-provinces, .state-nearby { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.state-provinces a, .state-nearby a { color: var(--accent); font-size: 14.5px; }
@media (max-width: 900px) {
  .state-layout { grid-template-columns: 1fr; }
  .state-dl { grid-template-columns: 1fr; gap: 2px 0; }
  .state-dl dd { margin-bottom: 10px; }
}

/* Articles nav: the section name is a link, so it needs to look identical to the
   sibling <button> triggers rather than like body copy. */
.nav-drop-link { text-decoration: none; }

/* Latest-article card in the Articles dropdown */
.drop-panel-articles { min-width: 300px; }
.drop-latest { display: flex !important; gap: 10px; align-items: flex-start; padding: 10px !important;
  border-bottom: 1px solid var(--border); margin-bottom: 4px; border-radius: 8px; }
.drop-latest img { width: 76px; height: 52px; object-fit: cover; border-radius: 6px; flex: none; }
.drop-latest-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.drop-latest-kicker { color: var(--accent); font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 800; }
.drop-latest-title { font-size: 13px; font-weight: 600; line-height: 1.35; white-space: normal; }
.drop-latest-meta { font-size: 11px; color: var(--text-2); white-space: normal; }

/* Author on an article card + the author filter note */
.blog-card-author { display: block; font-size: 12.5px; color: var(--text-2); margin-bottom: 8px; }
.blog-author-note { font-size: 13.5px; color: var(--text-2); margin: 0 0 14px;
  padding: 10px 14px; background: var(--surface-2); border-radius: 8px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.blog-author-note b { color: var(--text); }
.blog-clear { margin-left: auto; }

/* --------------------------------------------------------------------------
   Credential profiles (/ce-requirements) — what each credential is for, where
   it works, why earn it, how to get it. `--cred` per card carries the accent.
   Typeset acronym badges, deliberately not the bodies' logos: we show NASBA and
   IRS because those are ours to show; a CFP Board / IMA / IIA logo here would
   imply a sponsorship we don't have.
   -------------------------------------------------------------------------- */
.cred-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.cred-jump a {
  display: flex; flex-direction: column; gap: 1px; padding: 8px 14px; min-width: 0;
  border: 1px solid var(--border); border-left: 3px solid var(--cred);
  border-radius: 8px; background: var(--surface); text-decoration: none;
}
.cred-jump a:hover { border-color: var(--cred); }
.cred-jump b { color: var(--cred); font-size: 14px; }
.cred-jump span { color: var(--text-2); font-size: 11.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

.cred-list { display: flex; flex-direction: column; gap: 18px; padding-bottom: 28px; }
.cred-card { padding: 24px 26px; border-top: 3px solid var(--cred); scroll-margin-top: 90px; }
.cred-head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.cred-badge {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px; height: 64px; padding: 0 10px; border-radius: 12px;
  background: color-mix(in srgb, var(--cred) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--cred) 45%, transparent);
  color: var(--cred); font: 800 19px var(--font-display); letter-spacing: -.02em;
}
.cred-title { flex: 1 1 260px; min-width: 0; }
.cred-title h2 { font-size: 21px; margin: 0 0 4px; }
.cred-focus { color: var(--text); font-size: 14.5px; margin: 0 0 4px; }
.cred-body-link { color: var(--text-2); font-size: 12.5px; margin: 0; }
.cred-premium {
  flex: none; text-align: center; text-decoration: none; padding: 8px 14px;
  border-radius: 10px; border: 1px solid color-mix(in srgb, var(--cred) 40%, transparent);
  background: color-mix(in srgb, var(--cred) 10%, transparent);
}
.cred-premium b { display: block; color: var(--cred); font: 800 20px var(--font-display); }
.cred-premium span { color: var(--text-2); font-size: 11px; }
.cred-premium:hover { border-color: var(--cred); }

.cred-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  padding: 16px 0 4px; }
.cred-col h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 0 0 6px; }
.cred-col h3 + p + h3 { margin-top: 14px; }
.cred-col p { font-size: 13.5px; color: var(--text-2); line-height: 1.6; margin: 0; }
.cred-why, .cred-how { margin: 0; padding-left: 1.1rem; }
.cred-why li, .cred-how li { font-size: 13.5px; color: var(--text-2); line-height: 1.6;
  margin-bottom: 6px; }
.cred-why { list-style: none; padding-left: 0; }
.cred-why li { position: relative; padding-left: 20px; }
.cred-why li::before { content: "✓"; position: absolute; left: 0; color: var(--cred); font-weight: 700; }
/* padding-block, NOT the padding shorthand: this element is also a .container,
   and the shorthand would zero out the container's padding-inline and pull the
   heading 32px left of the cards it introduces. */
.cred-group-head { padding-block: 30px 12px; }
.cred-group-head h2 { font-size: 19px; margin: 0 0 4px; }
.cred-group-head p { font-size: 13.5px; color: var(--text-2); margin: 0; max-width: 70ch; line-height: 1.6; }
.cred-foot { padding-top: 14px; border-top: 1px solid var(--border); }
.cred-ce { font-size: 13px; color: var(--text-2); margin: 0 0 10px; line-height: 1.55; }
.cred-ce b { color: var(--text); }
.cred-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.cred-note { padding: 22px 26px; }
.cred-note h2 { font-size: 18px; margin: 0 0 10px; }
.cred-note p { font-size: 14px; color: var(--text-2); line-height: 1.65; }
.cred-disclaimer { font-size: 12.5px !important; color: var(--muted) !important; }
@media (max-width: 620px) {
  .cred-card { padding: 18px 16px; }
  .cred-premium { width: 100%; }
}

/* --------------------------------------------------------------------------
   Free tools (tracker / assessment / salary / office hours / challenge)
   -------------------------------------------------------------------------- */
/* Two columns: the form, and what it works out. Before you've picked a state
   there IS no second column — the result card is hidden — so the page was a
   form in the left half and a void in the right, which reads as broken rather
   than as waiting for you. Collapse to one column until there's something to
   put beside it. Capped rather than full-bleed so the form barely moves when
   the answer arrives. */
.tool-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding-bottom: 40px; align-items: start; }
.tool-layout:has(> .tool-result[hidden]) { grid-template-columns: minmax(0, 620px); }
/* The tracker's right half is never empty — it explains itself until it can
   answer — so the page is balanced from the first paint and nothing moves when
   you pick a state. */
.trk-empty { text-align: center; padding: 8px 0; }
.trk-empty .tool-ring { width: 96px; height: 96px; opacity: .35; margin: 0 auto 6px; display: block; }
.trk-empty h2 { font-size: 19px; margin-bottom: 8px; }
.trk-empty .tool-note { margin: 0 auto 16px; max-width: 42ch; }
.trk-preview { text-align: left; max-width: 34ch; margin-inline: auto; }
.trk-preview li { color: var(--text-2); }
.tool-note { color: var(--text-2); font-size: 14px; margin-bottom: 12px; }
.tool-facts { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 9px; margin: 14px 0; }
.tool-facts li { color: var(--text-2); font-size: 14.5px; line-height: 1.5; }
.tool-facts a { color: var(--accent); }
.tool-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.tool-email { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--border); padding-top: 14px; margin-top: 8px; }
.tool-email input {
  flex: 1; min-width: 200px; background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 10px 12px; font-size: 14px; outline: none;
}
.tool-email input:focus { border-color: var(--accent); }
.tool-email-done { color: #34d399; font-size: 13.5px; }
.deadline-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
/* The deadline tools on one line: pick a date, take a calendar file or leave an
   email. It was two stacked rows with a divider, which framed one job as two. */
.deadline-bar { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px;
                align-items: center; }
.deadline-bar input[type="date"] { flex: 0 0 auto; }
.deadline-bar input[type="email"] { flex: 1 1 220px; min-width: 0; }
.deadline-bar .btn { flex: 0 0 auto; white-space: nowrap; }
.deadline-bar input {
  background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 10px 12px; font-size: 14px; outline: none;
}
.deadline-bar input:focus { border-color: var(--accent); }
.deadline-row input[type="date"] {
  background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 10px 12px; font-size: 14px; outline: none;
}

.tool-ring-wrap { position: relative; width: 150px; margin: 0 auto 10px; }
.tool-ring { width: 150px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--border); stroke-width: 10; }
.ring-fg { fill: none; stroke: var(--accent); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.ring-fg.ring-good { stroke: #22c55e; }
.tool-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tool-ring-label b { font: 700 26px var(--font-display); }
.tool-ring-label span { color: var(--muted); font-size: 11.5px; }
.tool-result h2 { text-align: center; font-size: 20px; margin-bottom: 8px; }

/* The quiz is one column: heading, questions and scorecard share a measure.
   They didn't — the form was capped at 860px while the heading and the
   scorecard ran the full container, so the page read as three widths stacked
   on top of each other. 860 rather than full-bleed because these are sentences:
   a question stretched across 1400px is hard to read. */
.assess-col { max-width: 860px; margin-inline: auto; }
.assess-form { max-width: 860px; margin: 0 auto 60px; }
/* pointer-events:none because this bar is sticky and sits ON TOP of the
   questions as you scroll. It's decoration — 6px of it — but it was swallowing
   clicks on whichever answer happened to be underneath it, which reads to the
   reader as "the option just didn't take". Nothing here is clickable, so it
   should never be a click target. */
.assess-progress {
  position: sticky; top: var(--sticky-top); z-index: 5;
  height: 6px; margin-bottom: 14px; background: var(--border);
  border-radius: 999px; overflow: hidden;
  /* Decoration that floats over the questions — it must never be a click
     target, or it eats the answer underneath it. */
  pointer-events: none;
}
#assess-bar { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .25s; }
.assess-q { border: 0; padding: 0 0 22px; margin: 0; }
.assess-q legend { font: 600 16px var(--font-body); margin-bottom: 10px; line-height: 1.45; }
.assess-num { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12.5px; margin-right: 6px; }
.assess-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; cursor: pointer; font-size: 14.5px; color: var(--text-2); }
.assess-opt:hover { border-color: var(--border-strong); }
.assess-opt:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--text); }
.assess-opt input { accent-color: var(--accent); margin-top: 2px; flex: none; }
.assess-result-grid { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: center; }
.assess-radar { width: 100%; max-width: 260px; }
.radar-grid { fill: none; stroke: var(--border); }
.radar-fill { fill: color-mix(in srgb, var(--accent) 30%, transparent); stroke: var(--accent); stroke-width: 2; }
.radar-label { fill: var(--muted); font: 600 11px var(--font-body); }

.sal-range-label { color: var(--muted); font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: .06em; text-align: center; }
.sal-range { font: 700 clamp(26px, 4vw, 38px) var(--font-display); color: var(--accent); text-align: center; margin: 6px 0 14px; }
.sal-bar { position: relative; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--border), var(--accent)); margin: 4px 6px 18px; }
.sal-bar-fill { display: none; }
.sal-bar-dot { position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 4px solid var(--accent); transform: translate(-50%, -50%); transition: left .3s; }

/* Model vs. peer-reported, side by side. */
.sal-totals { color: var(--text-2); font-size: 14px; margin-top: 6px; }
/* 1–3 columns (BLS · adjusted · peers) — auto-fits, stacks on a phone. */
.sal-compare { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
.sal-side { text-align: center; padding: 10px 8px; border-radius: 10px; min-width: 0; }
.sal-side-bls { background: color-mix(in srgb, var(--text) 7%, transparent); }
.sal-side-crowd { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sal-side-label { color: var(--muted); font: 600 11.5px var(--font-body); text-transform: uppercase; letter-spacing: .06em; }
.sal-side .sal-range { font-size: clamp(20px, 2.6vw, 27px); margin: 4px 0 2px; }
.sal-side-sub { color: var(--text-2); font-size: 13px; margin: 0; }
.sal-n { color: var(--text-2); font-weight: 600; text-transform: none; letter-spacing: 0; }
.sal-thin { color: var(--text-2); font-size: 12.5px; text-align: center; margin: 8px 0 0; }
.sal-pctile { text-align: center; font-size: 14.5px; margin: 0 0 10px; color: var(--text); }

/* Peer benefits */
.sal-h2 { font-size: 20px; margin: 28px 0 12px; }
.sal-bene-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 8px; }
.sal-bene { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--surface-2); }
.sal-bene-label { display: block; color: var(--muted); font: 600 11.5px var(--font-body); text-transform: uppercase; letter-spacing: .05em; }
.sal-bene-big { display: block; font: 700 20px var(--font-display); color: var(--accent); margin: 4px 0 2px; }
.sal-bene-sub { color: var(--text-2); font-size: 12.5px; }

/* The salary tool's two panels stay the same height (the map makes the right one
   tall). Scoped to this page — the other tools keep .tool-layout's top alignment. */
.sal-layout { align-items: stretch; }
.sal-layout > .card { display: flex; flex-direction: column; }
/* the breakdown fills whatever room the map leaves, pinned to the bottom */
.sal-build { margin-top: auto; padding-top: 16px; }
.sal-build-h { font-size: 13px; margin: 0 0 8px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); }
.sal-build-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.sal-build-list li { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.sal-build-lab { color: var(--text-2); display: flex; flex-direction: column; min-width: 0; }
.sal-build-lab i { color: var(--muted); font-size: 11.5px; font-style: normal;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sal-build-anchor, .sal-build-total { font-weight: 700; }
.sal-build-anchor b, .sal-build-total b { color: var(--accent); white-space: nowrap; }
.sal-build-total { border-bottom: 0; }
.sal-build-d { white-space: nowrap; font-weight: 600; }
.sal-up { color: #22c55e; } .sal-down { color: #ef4444; } .sal-flat { color: var(--muted); font-weight: 400; }

/* Cost-of-living parity + two-state comparison */
.sal-parity { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 12px; }
.sal-parity-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.sal-parity-row > span { font-size: 13.5px; color: var(--text-2); line-height: 1.5; flex: 1 1 260px; }
.sal-cmp { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.sal-cmp select { padding: 6px 8px; font-size: 13px; }
.sal-cmp-tbl { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
.sal-cmp-tbl th { text-align: right; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 2px 6px; }
.sal-cmp-tbl th:first-child { text-align: left; }
.sal-cmp-tbl td { padding: 4px 6px; text-align: right; border-top: 1px solid var(--border); }
.sal-cmp-tbl td:first-child { text-align: left; font-weight: 600; }
.sal-cmp-verdict { font-size: 13px; margin: 8px 0 0; color: var(--text); }

/* US tile-grid heat map. A grid, not geography: every state reads equally, so
   the colour isn't dominated by whoever is physically biggest. */
.usmap-wrap { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 12px; }
.usmap-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.usmap-title { font-size: 14px; margin: 0; }
.usmap-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.usmap-tab { border: 0; background: none; color: var(--text-2); font: 600 12px var(--font-body); padding: 5px 10px; cursor: pointer; }
.usmap-tab.is-on { background: var(--accent); color: #fff; }
.usmap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin: 10px 0 8px; }
.usmap-st {
  aspect-ratio: 1; min-width: 0; border: 0; border-radius: 4px; cursor: pointer;
  font: 700 9.5px/1 var(--font-body); color: var(--text);
  background: color-mix(in srgb, var(--accent) var(--t, 12%), var(--surface-2));
  transition: transform .12s ease, outline-color .12s ease;
  outline: 2px solid transparent; outline-offset: 1px;
}
.usmap-st:hover, .usmap-st:focus-visible { transform: scale(1.22); z-index: 2; outline-color: var(--text); }
.usmap-st.is-sel { outline-color: var(--accent); outline-width: 2px; }
.usmap-st.is-empty { background: var(--surface-2); opacity: .35; cursor: default; }
.usmap-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-2); }
.usmap-legend { display: inline-flex; align-items: center; gap: 5px; }
.usmap-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block;
  background: color-mix(in srgb, var(--accent) var(--t), var(--surface-2)); }
@media (max-width: 620px) { .usmap-st { font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { .usmap-st { transition: none; } .usmap-st:hover { transform: none; } }

/* Contribute form */
.sal-contribute { padding: 22px 24px; margin-bottom: 8px; }
.sal-contrib-lead { color: var(--text-2); font-size: 14px; line-height: 1.65; margin: 0 0 10px; }
.sal-form-grid { display: grid; gap: 12px 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 14px 0 10px; }
/* Labels wrap to two lines at some widths ("Employer covers health premium"),
   which would shove that field's input below the rest of the row. Pin every
   input to the bottom of its cell so the row of controls always lines up. */
.sal-form-grid > label { justify-content: space-between; margin-bottom: 0; }
.sal-certs-label { font: 600 13.5px var(--font-body); margin: 6px 0 8px; }
.sal-certs-label i { color: var(--text-2); font-weight: 400; }
.login-field span i { color: var(--text-2); font-weight: 400; font-size: 12.5px; }
.field-hint { color: var(--text-2); font-size: 12px; line-height: 1.4; margin-top: 2px; }
.pw-meter { margin-top: 8px; }
.pw-bars { display: flex; gap: 4px; }
.pw-bars span { flex: 1; height: 4px; border-radius: 2px; background: var(--border);
  transition: background .2s; }
.pw-label { font-size: 12px; font-weight: 600; margin-top: 5px; min-height: 15px; }
.pw-breach { font-size: 12px; margin-top: 3px; min-height: 15px; line-height: 1.4; }
.sal-checks { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 14px; }
.sal-checks label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); cursor: pointer; }
.sal-msg { font-size: 13.5px; align-self: center; }
.sal-msg-ok { color: #22c55e; }
.sal-msg-bad { color: #ef4444; }

@media (max-width: 860px) {
  .tool-layout { grid-template-columns: 1fr; }
  .assess-result-grid { grid-template-columns: 1fr; justify-items: center; }
}

/* Card quick-buy + related articles + sponsor callout */
.card-actions {
  margin-top: 10px;
  /* Lift the action row above the card's stretched title link, or every
     button/link here silently clicks through to the course page. */
  position: relative; z-index: 2;
}
.card-foot .card-more { position: relative; z-index: 2; }
.card-actions .btn-block { display: flex; justify-content: center; align-items: center; gap: 6px; }
/* A course sold both ways shows two buttons — buy the Live Replay, or pick a
   live date. Side by side when they fit; stacked full-width when the card is
   too narrow. */
.card-actions-split { display: flex; gap: 8px; flex-wrap: wrap; }
.card-actions-split .btn { flex: 1 1 130px; display: flex; align-items: center;
  justify-content: center; gap: 6px; text-align: center; }
.card-actions .btn-ico { flex: none; }
/* Reconcile the two prices on one row: the buyable Live Replay price on the
   left, the (separate, date-varying) live-event price on the right. Wraps to
   two lines only if the card is too narrow to hold both. */
.card-foot-dual { display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px 12px; flex-wrap: wrap; }
.price-live { font-size: 12px; font-weight: 400; color: var(--text-2); white-space: nowrap; }
/* Already on our list? Don't nag: the head script tags <html> from the cookie
   set at subscribe time, and every newsletter opt-in box drops out. */
.nl-subscribed .footer-news,
.nl-subscribed .newsletter-optin { display: none !important; }
.card-details-btn { background: var(--blue-400); border: 1px solid transparent; color: #fff;
  box-shadow: 0 6px 20px rgba(79, 139, 255, 0.32); }
.card-details-btn:hover { background: var(--blue-300); color: #0b1226; }
.btn-sm { padding: 8px 14px; font-size: 13.5px; }
.card-more { color: var(--accent); font: 600 13px var(--font-body); white-space: nowrap; }
.related-articles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.related-article { display: flex; flex-direction: row; gap: 14px; align-items: center; padding: 12px 14px; color: var(--text); }
.related-article:hover { border-color: var(--accent); }
.related-article img { width: 92px; height: 62px; object-fit: cover; border-radius: 8px; flex: none; }
.related-article > div { min-width: 0; flex: 1; }
.related-article h3 { font-size: 14.5px; line-height: 1.35; margin-bottom: 3px; }
.related-article .blog-card-meta { font-size: 12px; color: var(--muted); }
.sponsor-callout { padding: 20px 24px; }
.sponsor-callout p { color: var(--text-2); font-size: 14.5px; line-height: 1.65; margin-bottom: 12px; }
.sponsor-callout strong { color: var(--text); }
.sponsor-note { font-size: 13px !important; color: var(--muted) !important; margin: 12px 0 0 !important; }
.sponsor-note a { color: var(--accent); }

/* Accreditation hub + Who We Serve audience pages */
.hero-audiences { margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.hero-audiences a { color: var(--accent); font-weight: 600; }

.acc-providers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-bottom: 40px; }
.acc-card { display: flex; gap: 20px; align-items: flex-start; padding: 24px 26px; }
.acc-card p { margin-bottom: 10px; }
.acc-badge {
  flex: none; display: grid; place-items: center; width: 132px; min-height: 108px;
  background: #0b1830; border-radius: 14px; padding: 14px;
}
.acc-badge img { max-width: 100%; height: auto; }
.acc-id { color: var(--muted); font-size: 13.5px !important; text-transform: uppercase; letter-spacing: .05em; }
.acc-id b { color: var(--accent); letter-spacing: 0; font-size: 15px; }

.acc-checker { max-width: 620px; margin-bottom: 26px; padding: 22px 24px; }
.acc-checker-label { display: block; font: 600 13px var(--font-body); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.acc-checker select {
  width: 100%; padding: 12px 14px; border-radius: 10px; font: 500 15px var(--font-body);
  background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-strong);
}
.acc-verdict { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 16px; }
.acc-verdict h3 { font-size: 16.5px; margin: 10px 0 6px; }
.acc-verdict p { color: var(--text-2); font-size: 14.5px; line-height: 1.65; }

.acc-chip {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font: 600 12.5px var(--font-body); line-height: 1.5; white-space: normal;
}
.acc-yes { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.acc-likely { background: rgba(59, 130, 246, 0.16); color: var(--blue-400); }
.acc-varies { background: rgba(249, 115, 22, 0.16); color: var(--orange-400); }
.acc-info { background: rgba(148, 163, 204, 0.16); color: var(--muted); }
:root[data-theme="light"] .acc-yes { color: #15803d; }
:root[data-theme="light"] .acc-likely { color: var(--blue-600); }
:root[data-theme="light"] .acc-varies { color: var(--orange-600); }
:root[data-theme="light"] .acc-info { color: var(--text-2); }

.acc-table-wrap { overflow-x: auto; }
.acc-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.acc-table th {
  text-align: left; color: var(--muted); font: 600 12.5px var(--font-body);
  text-transform: uppercase; letter-spacing: .06em; padding: 10px 14px;
}
.acc-table td { padding: 12px 14px; border-top: 1px solid var(--border); vertical-align: top; }
.acc-table td:first-child { font-weight: 600; min-width: 220px; }
.acc-policies { display: flex; flex-wrap: wrap; gap: 10px; }

.acc-strip { display: flex; gap: 22px; align-items: center; padding: 22px 26px; }
.acc-strip h3, .acc-strip h2 { font-size: 17px; margin-bottom: 6px; }
.acc-strip p { color: var(--text-2); font-size: 14.5px; margin-bottom: 8px; }
.acc-strip-badges {
  flex: none; display: flex; gap: 14px; align-items: center;
  background: #0b1830; border-radius: 14px; padding: 14px 18px;
}
.acc-strip-mini { flex-direction: column; align-items: flex-start; gap: 12px; }

.audience-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.audience-pill {
  padding: 10px 18px; border-radius: 999px; font: 600 14px var(--font-body);
  background: var(--bg-elev); border: 1px solid var(--border-strong); color: var(--text);
  transition: border-color .15s, color .15s;
}
.audience-pill:hover { border-color: var(--accent); color: var(--accent); }

.audience-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; padding-bottom: 56px; }
.audience-side { display: flex; flex-direction: column; gap: 14px; align-self: start; }
.audience-intro p, .audience-credit p, .audience-faq p { color: var(--text-2); font-size: 15px; line-height: 1.7; margin-bottom: 12px; }
.audience-intro, .audience-credit, .audience-topics, .audience-faq { margin-bottom: 16px; padding: 22px 24px; }
.audience-credit h2, .audience-topics h2, .audience-faq h2 { font-size: 17px; margin-bottom: 12px; }
.audience-faq details { border-top: 1px solid var(--border); padding: 10px 0; }
.audience-faq details:first-of-type { border-top: 0; }
.audience-faq summary { cursor: pointer; font-weight: 600; font-size: 14.5px; }
.audience-faq details p { margin: 10px 0 2px; font-size: 14.5px; }
.side-title { font-size: 15px; margin-bottom: 10px; }
.audience-tools, .audience-others { list-style: none; padding: 0 !important; }
.audience-tools li { margin-bottom: 10px; font-size: 13.5px; }
.audience-others li { margin-bottom: 8px; font-size: 14px; }

@media (max-width: 900px) {
  .acc-providers { grid-template-columns: 1fr; }
  .acc-card { flex-direction: column; }
  .audience-layout { grid-template-columns: 1fr; }
  .acc-strip { flex-direction: column; align-items: flex-start; }
}

/* Secondary pill menu line under the header */
.subnav { border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg-elev) 55%, transparent); }
.subnav-inner {
  display: flex; align-items: flex-start; gap: 8px;
  padding-block: 9px;
}
.subnav-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
  flex: 1; min-width: 0; max-height: 36px; overflow: hidden;
}
.subnav-moremenu { position: relative; flex: none; margin-left: auto; }
.subnav-more {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--muted);
  transition: color .15s, border-color .15s;
}
.subnav-more:hover { color: var(--accent); border-color: var(--accent); }
.subnav-more svg { transition: rotate .18s; }
.subnav-moremenu.open .subnav-more svg { rotate: 180deg; }
.subnav-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 250px; padding: 8px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
}
.subnav-moremenu.open .subnav-menu { display: block; }
.subnav-menu a {
  display: block; padding: 8px 12px; border-radius: 8px;
  font: 500 13.5px/1.5 var(--font-body); color: var(--text-2);
}
.subnav-menu a:hover { background: var(--surface-2); color: var(--accent); }
.subnav-pill {
  flex: none; padding: 5px 13px; border-radius: 999px;
  font: 500 12.5px/1.6 var(--font-body); color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: color .15s, border-color .15s;
}
.subnav-pill:hover { color: var(--accent); border-color: var(--accent); }
.subnav-search { position: relative; flex: 0 0 clamp(260px, 34vw, 480px); }
.subnav-search > svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--muted); pointer-events: none; }
.subnav-search input {
  width: 100%; padding: 7px 14px 7px 35px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  font-size: 13.5px; color: var(--text); transition: border-color .15s, background .15s;
}
.subnav-search input:focus { outline: none; border-color: var(--blue-500); background: var(--surface); }
@media (max-width: 860px) {
  /* Phones: the drawer already carries search + all links */
  .subnav { display: none; }
}

/* Trust strip (point-of-sale) */
.trust-strip {
  list-style: none; padding: 12px 0 0 !important; margin-top: 12px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 7px;
}
.trust-strip li { font-size: 13px; color: var(--text-2); }
.trust-strip a { color: var(--accent); }
.section .trust-strip { border-top: none; flex-direction: row; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; }

/* Footer newsletter bar */
.footer-news {
  display: flex; align-items: center; justify-content: space-between; gap: 20px 36px;
  margin-block: 44px 34px; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 16px; padding: 22px 26px;
}
.footer-news h4 { margin-bottom: 5px; font-size: 15.5px; }
.footer-news p { color: var(--muted); font-size: 13.5px; max-width: 520px; line-height: 1.55; }
.footer-news-form { display: flex; gap: 10px; align-items: stretch; flex: 1 1 340px; max-width: 460px; min-width: 0; flex-wrap: wrap; }
.footer-news-form input[type=email] {
  flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 12px;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  color: var(--text); font-size: 14.5px;
}
.footer-news-form input[type=email]:focus { outline: none; border-color: var(--blue-500); }
.footer-news-form .btn { height: 46px; padding-block: 0; display: inline-flex; align-items: center; }
.footer-news-form .tool-email-done { align-self: center; white-space: nowrap; }

/* Events calendar view */
.view-toggle { margin-left: auto; display: inline-flex; gap: 8px; }
.cal-month { margin-bottom: 34px; }
.cal-grid-wrap { overflow-x: auto; }
.cal-grid { width: 100%; min-width: 720px; border-collapse: collapse; table-layout: fixed; }
.cal-grid th {
  text-align: left; padding: 8px 10px; color: var(--muted);
  font: 600 12px var(--font-body); text-transform: uppercase; letter-spacing: .05em;
}
.cal-grid td {
  vertical-align: top; height: 86px; padding: 6px 8px;
  border: 1px solid var(--border); background: var(--bg-elev);
}
.cal-grid td.cal-empty { background: transparent; }
.cal-daynum { font: 600 12.5px var(--font-body); color: var(--muted); display: block; margin-bottom: 4px; }
.cal-today { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-today .cal-daynum { color: var(--accent); }
.cal-event {
  display: block; margin-bottom: 4px; padding: 4px 8px; border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text); font-size: 12px; line-height: 1.35;
}
.cal-event:hover { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.cal-span { display: block; color: var(--muted); font-size: 11px; }

/* Resources */
.resource-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.resource-gate h2 { margin-bottom: 8px; }
.resource-preview { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 16px; }
.resource-preview h3 { font-size: 15px; margin-bottom: 6px; }
.resource-body { padding: 28px 32px; }
.resource-body table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
.resource-body th, .resource-body td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; }
.resource-body h1 { font-size: 26px; margin: 18px 0 10px; }
.resource-body h2 { font-size: 19px; margin: 22px 0 8px; }
.resource-body p, .resource-body li { color: var(--text-2); line-height: 1.7; font-size: 15px; }
.resource-body ul { padding-left: 22px; margin-bottom: 12px; }
.resource-body blockquote {
  border-left: 3px solid var(--accent); padding: 8px 16px; margin: 0 0 16px;
  background: var(--surface-2); border-radius: 0 10px 10px 0; color: var(--text-2);
}
@media print {
  .site-header, .subnav, .site-footer, .back-top, .resource-actions, .staging-banner, .page-head nav { display: none !important; }
}

/* Why table + state bundle */
.why-table td:first-child { font-weight: 600; min-width: 150px; }
.why-table td:last-child { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.state-bundle { margin-top: 26px; }
.state-bundle h2 { margin-bottom: 6px; }
.state-bundle .card-grid { margin-top: 14px; }

/* Footer social icons */
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  color: var(--muted); border: 1px solid var(--border);
  transition: color .15s, border-color .15s;
}
.footer-social a:hover { color: var(--accent); border-color: var(--accent); }


/* Guarantee badge */
.guarantee-badge {
  display: flex; align-items: center; gap: 12px; margin-top: 12px;
  padding: 11px 14px; border-radius: 12px; color: var(--text);
  background: color-mix(in srgb, #22c55e 9%, transparent);
  border: 1px solid color-mix(in srgb, #22c55e 35%, transparent);
  transition: border-color .15s;
}
.guarantee-badge:hover { border-color: #22c55e; }
.gb-seal { color: #4ade80; display: grid; place-items: center; flex: none; }
:root[data-theme="light"] .gb-seal { color: #15803d; }
.gb-text b { display: block; font-size: 13.5px; line-height: 1.3; }
.gb-text small { color: var(--muted); font-size: 12px; }
.trust-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 22px; }
.trust-row .guarantee-badge { margin-top: 0; }
.trust-row .trust-strip { margin-top: 0; border-top: 0; padding-top: 0 !important; }

/* Event sessions in list + calendar */
.event-sessions { color: var(--muted); font-size: 13px; margin-top: 5px; line-height: 1.55; }
.event-sessions b { color: var(--text-2); font-weight: 600; }
.cal-session {
  display: block; margin-bottom: 3px; padding: 3px 8px; border-radius: 6px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2); font-size: 11.5px; line-height: 1.35;
}
.cal-session:hover { border-color: var(--accent); color: var(--text); }
.cal-more { display: block; color: var(--muted); font-size: 11px; padding: 2px 8px; }

/* Event detail: agenda preview fills the column beside the buy card */
.session-preview { margin-top: 26px; }
.session-preview h2 { font-size: 17px; margin-bottom: 12px; }
.session-preview .chip { max-width: 100%; }
.session-preview-note { color: var(--muted); font-size: 13.5px; margin-top: 12px; }
.session-preview-note a { color: var(--accent); }

/* Find My CPE */
.finder-form { padding: 24px 26px; }
.finder-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; }
.finder-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.finder-topic input { position: absolute; opacity: 0; }
.finder-topic span {
  display: inline-block; padding: 9px 14px; border-radius: 999px; cursor: pointer;
  font: 500 13.5px var(--font-body); color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: border-color .15s, color .15s, background .15s;
}
.finder-topic input:checked + span { background: var(--accent); color: #fff; border-color: var(--accent); }
.finder-topic input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.finder-plan { display: flex; flex-direction: column; gap: 14px; }
.finder-pick { display: flex; gap: 18px; align-items: stretch; padding: 16px 18px; }

/* Cover art with the rank badged onto it — the plan should look like the
   courses it's recommending, not a bare list of titles. */
.fp-cover { flex: none; width: 148px; align-self: stretch; position: relative;
            border-radius: 10px; overflow: hidden; background: var(--surface-2);
            display: block; min-height: 104px; }
.fp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-cover-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; }
.fp-rank {
  position: absolute; top: 6px; left: 6px; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; background: var(--accent); color: #fff;
  font: 700 13px var(--font-display); box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.fp-badge { position: absolute; bottom: 0; left: 0; right: 0; text-align: center;
            background: rgba(37,107,255,.92); color: #fff; font: 600 11px var(--font-body);
            padding: 3px; letter-spacing: .02em; }

.fp-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.finder-pick h3 { font-size: 16px; margin: 0; line-height: 1.3; }
.fp-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: 12.5px; align-items: center; }
.fp-credits { color: var(--text); font-weight: 600; }
.fp-price { color: var(--text-2); font-weight: 600; }
.fp-when { font-size: 13px; color: var(--accent); font-weight: 600; }
.fp-inst { font-size: 13px; color: var(--text-2); }
.fp-desc { font-size: 13.5px; color: var(--text-2); line-height: 1.5; margin: 2px 0; }
.fp-obj { font-size: 13px; }
.fp-obj summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 12.5px;
                  list-style: none; width: fit-content; }
.fp-obj summary::-webkit-details-marker { display: none; }
.fp-obj summary::before { content: "▸ "; }
.fp-obj[open] summary::before { content: "▾ "; }
.fp-obj ul { margin: 6px 0 2px 2px; padding-left: 16px; display: flex; flex-direction: column; gap: 3px; }
.fp-obj li { color: var(--text-2); line-height: 1.45; }
.fp-reasons { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 2px; }
.fp-reasons li { color: var(--text-2); font-size: 12.5px; }
.fp-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
@media (max-width: 860px) { .finder-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .finder-pick { flex-direction: column; }
  .fp-cover { width: 100%; height: 140px; }
}

.tool-email-center { justify-content: center; }

.pill-warn { background: rgba(249, 115, 22, 0.16); color: var(--orange-400); }
:root[data-theme="light"] .pill-warn { color: var(--orange-600); }


/* Row balancing: JS hides trailing cards that would orphan a final row
   (browse grids only — every balanced grid has a see-all link). */
.grid-orphan { display: none !important; }


/* Sponsor chip list: preview a handful, expand on demand */
.sponsor-rest { display: none; }
.sponsor-row.expanded .sponsor-rest { display: contents; }
.sponsor-row.expanded .chip-more { display: none; }
.chip-more { cursor: pointer; color: var(--accent); border-style: dashed; background: transparent; }
.chip-more:hover { border-color: var(--accent); }

/* Session detail: single column (thumbnail lives in the summary row) */
.session-objectives b { display: block; font-size: 13px; margin-bottom: 8px; color: var(--text); }
/* Inside a session panel the objectives read as one list, top to bottom —
   the two-across layout both cramped the copy and (on phones) pushed the
   panel past the viewport, which is what tripped iOS's text inflation. */
.session-objectives .check-list { display: grid; gap: 7px; grid-template-columns: 1fr; }

/* Course-details modal (event page). Reuses .dates-modal chrome. */
.check-list.one-col { grid-template-columns: 1fr; max-width: none; }
.course-summary h3 { font-size: 15px; margin: 18px 0 8px; }
.course-summary .prose { color: var(--text-2); font-size: 14.5px; }
.course-summary .course-facts { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.course-summary .btn { margin-top: 20px; }
.session-links { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; }
button.see-all {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--accent);
}
.session-objectives .check-list li { font-size: 13.5px; color: var(--text-2); }

/* Admin live previews */
.preview-panel .preview-item {
  border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px;
  background: var(--bg-elev); overflow: hidden;
}
.preview-item summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
}
.preview-item summary::-webkit-details-marker { display: none; }
.preview-label { flex: 1; min-width: 0; }
.preview-label b { display: block; font-size: 14.5px; }
.preview-label .text-muted { font-size: 12.5px; }
.preview-item .caret { color: var(--muted); transition: rotate .2s; flex: none; }
.preview-item[open] > summary .caret { rotate: 180deg; }
.preview-item iframe {
  display: block; width: 100%; height: 720px; border: 0;
  border-top: 1px solid var(--border); background: #fff;
}


/* RSVP: single-day events don't need a full-bleed card or a 1500px input */
.rsvp-days-single { max-width: 900px; }
.rsvp-daycount-input { max-width: 170px; }

/* Mobile footer: link columns collapse into tappable sections */
@media (max-width: 860px) {
  .footer-grid { gap: 0 24px; }
  /* The link accordion stacks directly under the brand + credential badges;
     without this the first section's top border hugs the NASBA/IRS captions.
     Give the badges room to breathe before the menu begins. */
  .footer-about { padding-bottom: 26px; }
  .cred-badges { gap: 30px; margin-top: 22px; }
  .footer-col h4 {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; user-select: none;
    padding: 15px 2px; margin: 0; border-top: 1px solid var(--border);
  }
  .footer-col h4::after {
    content: ""; width: 9px; height: 9px; flex: none;
    border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(45deg); transition: transform .18s;
  }
  .footer-col.open h4::after { transform: rotate(225deg); }
  .footer-col ul { display: none; padding-bottom: 14px; }
  .footer-col.open ul { display: flex; flex-direction: column; gap: 2px; }
}

/* Admin screenshot gallery lightbox */
.shot-thumb { cursor: zoom-in; }
.shot-modal {
  border: 0; border-radius: 12px; padding: 18px 18px 12px; background: var(--surface);
  max-width: min(94vw, 1500px); max-height: 94vh; overflow: hidden;
}
.shot-modal::backdrop { background: rgba(2, 8, 20, 0.78); }
.shot-modal img {
  display: block; max-width: calc(94vw - 140px); max-height: calc(94vh - 90px);
  width: auto; height: auto; margin: 0 auto; border: 1px solid var(--border);
  border-radius: 8px; background: #fff;
}
.shot-modal p { text-align: center; color: var(--text-2); font-size: 13px; margin: 10px 0 0; }
.shot-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 50%; width: 34px; height: 34px; cursor: pointer; font-size: 15px;
}
.shot-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 50%; width: 42px; height: 42px; cursor: pointer; font-size: 24px; line-height: 1;
}
.shot-prev { left: 12px; }
.shot-next { right: 12px; }
.shot-nav:hover, .shot-close:hover { background: var(--surface); border-color: var(--border-strong); }

/* Cookie consent banner */
.consent-banner {
  position: fixed; bottom: 16px; left: 16px; z-index: 1200;
  max-width: 400px; background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 12px; box-shadow: 0 14px 40px rgba(2, 8, 20, 0.35); padding: 16px 18px;
}
.consent-banner p { font-size: 13.5px; line-height: 1.55; color: var(--text-2); margin: 0 0 12px; }
.consent-banner p b { color: var(--text); }
.consent-actions { display: flex; gap: 8px; justify-content: flex-end; }
@media (max-width: 480px) {
  .consent-banner { left: 10px; right: 10px; bottom: 10px; max-width: none; }
}

/* Admin nav: grouped dropdowns — one row however many tools we add */
.admin-nav { flex-wrap: nowrap; align-items: center; }
.anav-group { position: relative; }
.anav-group > button {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: 0; cursor: pointer;
  font: 600 13.5px var(--font-body); color: var(--text-2);
  padding: 7px 12px; border-radius: 8px;
}
.anav-group > button:hover { background: var(--surface-2); color: var(--text); }
.anav-group.anav-active > button { background: var(--accent); color: var(--accent-ink); }
.anav-panel {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; min-width: 172px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(2, 8, 20, 0.28);
  padding: 6px; display: none;
}
.anav-group:hover .anav-panel, .anav-group:focus-within .anav-panel,
.anav-group.anav-open .anav-panel { display: grid; }
.anav-panel a { display: block; border-radius: 7px; padding: 8px 11px; white-space: nowrap; }
@media (max-width: 700px) {
  .admin-nav { flex-wrap: wrap; }
}

/* Admin table filter bar */
.admin-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.admin-filter input, .admin-filter select {
  background: var(--bg-elev); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: 8px; font: 500 13.5px var(--font-body); padding: 8px 11px; outline: none;
}
.admin-filter input { flex: 1 1 220px; min-width: 0; }
.admin-filter input:focus, .admin-filter select:focus { border-color: var(--accent); }
.admin-filter .filter-count { align-self: center; font-size: 12.5px; color: var(--text-2); }

/* Standalone admin form control (used outside .admin-filter, e.g. the test
   runner's suite picker). Was undefined — native selects rendered unstyled with
   the browser arrow overlapping the label. */
.admin-input {
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 8px;
  font: 500 14px var(--font-body); padding: 9px 12px; outline: none;
}
.admin-input:focus { border-color: var(--accent); }
select.admin-input {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* HTML sitemap (/sitemap) */
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px 34px; align-items: start; }
.sitemap-block h2 { font-size: 16px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.sitemap-block ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.sitemap-block li a { font-size: 13.5px; color: var(--text-2); }
.sitemap-block li a:hover { color: var(--accent); }
.sitemap-h2 { font-size: 21px; margin-bottom: 16px; }

/* Course "What's included" — materials metadata (never the files themselves) */
.included-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 10px; }
.included-list li { display: flex; align-items: center; gap: 11px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.included-ico { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid;
  place-items: center; background: var(--surface-2); color: var(--accent); }
.included-list em { font-style: normal; font-size: .85rem; margin-left: 4px; }

/* Admin: instructor list curation */
.inst-admin-bar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  align-items: center; margin-bottom: 14px; color: var(--text-2); font-size: 14px; }
.inst-admin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.inst-admin-table td.num, .inst-admin-table th.num { text-align: right; white-space: nowrap; }
.inst-admin-table tr.inst-dead { background: rgba(249, 115, 22, .05); }
.inst-admin-table .badge { margin-top: 4px; display: inline-block; }

/* Instructor profile: the bio is the page — let it use the full column. */
.page-instructor .detail-section .prose { max-width: none; }


/* Instructor page: show two rows, then reveal the rest on demand — an
   instructor with 32 courses shouldn't dump all of them on the page. */
.card-grid.is-capped > .card:nth-child(n+9) { display: none; }
.grid-more { display: flex; justify-content: center; margin-top: 22px; }
@media (max-width: 1180px) { .card-grid.is-capped > .card:nth-child(n+7) { display: none; } }
@media (max-width: 900px)  { .card-grid.is-capped > .card:nth-child(n+5) { display: none; } }
@media (max-width: 640px)  { .card-grid.is-capped > .card:nth-child(n+3) { display: none; } }

/* --------------------------------------------------------------------------
   Combo — a searchable dropdown that looks the same everywhere.

   Native <select> popups are drawn by the OS, so they can't be made to match
   anything else on the page (and can't show a second line, or explain why a
   row matched). Used across the sponsor portal filters; safe to reuse.
   -------------------------------------------------------------------------- */
.combo-field { position: relative; display: grid; gap: 5px; font-size: 12px;
               font-weight: 600; color: var(--muted); text-transform: uppercase;
               letter-spacing: .8px; }
.combo { position: relative; }
.combo-button {
  display: flex; align-items: center; gap: 10px;
  min-width: 300px; max-width: 460px; width: 100%;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); color: var(--text); cursor: pointer;
  padding: 9px 12px; font: inherit; font-size: 14px; text-align: left;
}
.combo-button:hover { border-color: var(--accent); }
.combo-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.combo-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
               text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text); }
.combo-caret { color: var(--muted); font-size: 11px; }
.combo[aria-busy] .combo-caret { transform: rotate(180deg); }

.combo-menu {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  width: 460px; max-width: 88vw;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.combo-search {
  width: 100%; border: 0; border-bottom: 1px solid var(--border);
  background: var(--surface); color: var(--text); padding: 11px 13px;
  font: inherit; font-size: 14px; border-radius: 0;
}
.combo-search:focus { outline: none; border-bottom-color: var(--accent); }
.combo-list { list-style: none; margin: 0; padding: 4px; max-height: 340px; overflow-y: auto; }
.combo-list li { padding: 9px 11px; border-radius: var(--radius-sm); cursor: pointer;
                 text-transform: none; letter-spacing: 0; }
.combo-list li:hover, .combo-list li.is-active { background: var(--surface-2); }
.combo-list li.is-on { box-shadow: inset 2px 0 0 var(--accent); }
.combo-list b { display: block; font-size: 14px; font-weight: 600; color: var(--text); }
.combo-meta { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; font-weight: 400; }
/* Why a row matched when its label didn't — otherwise the result reads as a bug. */
.combo-hit { display: block; font-size: 12px; color: var(--accent); margin-top: 3px; font-weight: 500; }
.combo-none { padding: 16px 14px; color: var(--muted); font-size: 13.5px; }

/* Section headings inside a combo (Relative / Calendar Years / Monthly). */
.combo-list li.combo-group {
  padding: 11px 11px 5px; margin-top: 2px; cursor: default; background: none;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--muted); border-top: 1px solid var(--border);
}
.combo-list li.combo-group:first-child { border-top: 0; margin-top: 0; padding-top: 6px; }
.combo-list li.combo-group:hover { background: none; }

/* The current selection has to be obvious at a glance — a hairline on the left
   was too quiet once the list grew section headings. */
.combo-list li.is-on { background: rgba(79, 139, 255, .14); box-shadow: inset 2px 0 0 var(--accent); }
.combo-list li.is-on > b { color: var(--accent); }
.combo-list li.is-on > b::after { content: " ✓"; font-weight: 700; }
[data-theme="light"] .combo-list li.is-on { background: rgba(31, 79, 216, .10); }

/* --------------------------------------------------------------------------
   Portal shell (base_portal.html) — sponsor.cpetoday.com and /sponsors.
   No nav, no search, no marketing: a thin identity bar and a legal footer.
   -------------------------------------------------------------------------- */
.ps-bar {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
body.staging .ps-bar { top: 32px; }
.ps-bar-inner { display: flex; align-items: center; gap: 12px; height: 52px; }
.ps-bar-spacer { flex: 1 1 auto; }
.ps-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
            color: var(--text-2); font-family: var(--font-display); font-weight: 600;
            font-size: 15px; letter-spacing: -0.01em; }
.ps-brand:hover { color: var(--text); }
.ps-brand em { font-style: normal; color: var(--accent); }
.ps-brand-tag { margin-left: 4px; padding: 3px 9px; border-radius: 999px;
                background: var(--surface-2); border: 1px solid var(--border);
                color: var(--muted); font-family: var(--font-body);
                font-size: 11px; font-weight: 700; letter-spacing: .07em;
                text-transform: uppercase; }

.ps-foot { border-top: 1px solid var(--border); margin-top: 64px; padding: 20px 0 28px; }
.ps-foot-inner { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
                 color: var(--muted); font-size: 12.5px; }
.ps-foot a { color: var(--text-2); text-decoration: none; }
.ps-foot a:hover { color: var(--accent); text-decoration: underline; }
.ps-dot { opacity: .45; }
@media (max-width: 620px) {
  .ps-brand-tag { display: none; }
  .ps-foot-inner { gap: 7px; font-size: 12px; }
}

/* --------------------------------------------------------------------------
   Sticky purchase bar (mobile). The detail layout collapses to one column on a
   phone, which buries the price and the only buy button below the whole
   description — so they ride the bottom of the viewport instead. Desktop keeps
   the sticky buy-card and never sees this.
   -------------------------------------------------------------------------- */
.buy-bar { display: none; }

@media (max-width: 960px) {
  .buy-bar {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    background: var(--header-bg);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border-strong);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, .28);
    padding: 10px clamp(12px, 4vw, 20px);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    /* --consent-h is set by app.js while the cookie banner is showing: both
       live at the bottom of the screen, and the banner used to sit straight on
       top of the buy button on a first visit. */
    bottom: var(--consent-h, 0px);
    /* No transition on `bottom`: it's set from the consent banner's height on
       load, and animating it means the bar spends 200ms sitting under the
       banner — a flash of exactly the bug this is meant to fix. */
    transition: transform .22s ease, opacity .22s ease;
  }
  /* Hidden while the real buy card is on screen — two live CTAs at once is
     just noise, and it lets the card do its fuller job when they reach it. */
  .buy-bar[hidden-by-card] {
    transform: translateY(110%); opacity: 0; pointer-events: none;
  }
  .buy-bar-in {
    display: flex; align-items: center; gap: 14px;
    max-width: var(--container); margin-inline: auto;
  }
  .buy-bar-price { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
  .buy-bar-price b {
    font-family: var(--font-display); font-size: 22px; font-weight: 700;
    line-height: 1.1; white-space: nowrap;
  }
  /* An event-only course says "Offered as part of a live event" here — that has
     to wrap to two tidy lines rather than shove the button off the screen. */
  .buy-bar-price b.is-text {
    font-size: 14px; font-weight: 600; white-space: normal; line-height: 1.25;
  }
  .buy-bar-price span { color: var(--muted); font-size: 13px; white-space: nowrap; }
  .buy-bar .btn { margin-left: auto; flex: none; padding-inline: 20px; white-space: nowrap; }

  /* The bar floats over the page — give the footer room to finish underneath. */
  body.has-buy-bar { padding-bottom: 76px; }
  body.has-buy-bar .back-top { bottom: 88px; }
}

/* ---- Course preview module (webinar recording) ---------------------- */
/* The intro line runs the full width, up with the heading — not boxed into
   the video column. */
.course-preview .preview-lede { max-width: none; margin-bottom: 18px; }
/* Video on the left, chapters on the right — the detail stays without the
   agenda running down the whole page. Single column when there's no agenda. */
.course-preview .preview-split { max-width: 760px; }
.course-preview .preview-split.has-agenda {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 1fr);
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 760px) {
  .course-preview .preview-split.has-agenda { grid-template-columns: 1fr; }
}
.course-preview .preview-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
}
.course-preview .preview-video iframe,
.course-preview .preview-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.course-preview .preview-poster {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
/* Clip switcher — one player, the other approved clips as selectable pills
   under the video. */
.course-preview .clip-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.course-preview .clip-tab {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.course-preview .clip-tab:hover { border-color: var(--accent); color: var(--text); }
.course-preview .clip-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.course-preview .preview-cta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.course-preview .preview-cta .btn-cta { display: inline-flex; align-items: center; gap: 7px; }
.course-preview .preview-views { font-size: 14px; font-weight: 600; color: var(--text-2); }
.course-preview .preview-intro { margin: 14px 0 0; color: var(--text-2); max-width: none; }
.course-preview .preview-flag {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 13px; margin-bottom: 12px;
}
/* Chapter list beside the video: pinned to exactly the video's height and
   scrolled internally, so 24 chapters never stretch past the video. The cell
   is stretched by the grid to the video's height; the inner panel is absolute
   so its own content can't grow the row. */
.course-preview .preview-agenda {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.course-preview .agenda-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.course-preview .agenda-head {
  padding: 11px 14px;
  font-weight: 600;
  font-size: .98rem;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.course-preview .agenda-list {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.course-preview .agenda-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: .9rem;
  line-height: 1.35;
}
.course-preview .agenda-list li:nth-child(odd) { background: var(--surface-2); }
.course-preview .agenda-ts {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--accent);
  font-size: .8rem;
  min-width: 46px;
}
.course-preview .agenda-title { color: var(--text); font-weight: 600; }
/* Chapter summary (present when the agenda comes from the tool's editorial
   chapters): a muted second line under the title, aligned past the timestamp. */
.course-preview .agenda-summary {
  flex: 1 1 100%;
  margin-left: 56px;
  color: var(--text-2);
  font-size: .82rem;
  line-height: 1.4;
}
/* "Test yourself" — a few of the session's check-in polls, answer behind a reveal */
.course-preview .preview-quiz {
  margin-top: 22px;
  padding: 18px 20px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.course-preview .quiz-head { margin: 0 0 2px; font-size: 1.05rem; }
.course-preview .quiz-sub { margin: 0 0 14px; color: var(--text-2); font-size: .88rem; }
.course-preview .quiz-item { padding: 12px 0; border-top: 1px solid var(--line); }
.course-preview .quiz-item:first-of-type { border-top: 0; padding-top: 0; }
.course-preview .quiz-q { margin: 0 0 8px; font-weight: 600; }
.course-preview .quiz-opts { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.course-preview .quiz-opts li {
  display: flex; gap: 9px; align-items: baseline;
  font-size: .9rem; color: var(--text-2);
}
.course-preview .quiz-letter {
  flex: 0 0 auto; font-weight: 700; color: var(--accent);
  font-size: .8rem; min-width: 16px;
}
.course-preview .quiz-reveal > summary {
  cursor: pointer; color: var(--accent); font-weight: 600;
  font-size: .85rem; list-style: none; width: max-content;
}
.course-preview .quiz-reveal > summary::-webkit-details-marker { display: none; }
.course-preview .quiz-reveal > summary::before { content: "▸ "; }
.course-preview .quiz-reveal[open] > summary::before { content: "▾ "; }
.course-preview .quiz-ans {
  margin: 8px 0 4px; padding: 8px 10px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.course-preview .quiz-why { margin: 0; color: var(--text-2); font-size: .86rem; line-height: 1.5; }
.course-preview .quiz-foot { margin: 14px 0 0; color: var(--text-2); font-size: .82rem; }
/* Stacked (mobile): back to normal flow with a capped, scrollable list —
   no video to pin against. */
@media (max-width: 760px) {
  .course-preview .preview-agenda { position: static; margin-top: 16px; }
  .course-preview .agenda-inner { position: static; max-height: 340px; }
}

/* --------------------------------------------------------------------------
   Page visibility (app/pagevis.py) — admin-only affordances
   These only ever render for a signed-in admin: the public never receives the
   markup, so there's nothing here to leak the existence of a hidden page.
   -------------------------------------------------------------------------- */
.nav-hidden-mark {
  display: inline-flex; align-items: center; vertical-align: -2px; margin-left: 6px;
  color: #b45309;
}
[data-theme="dark"] .nav-hidden-mark { color: #fbbf24; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hidden-page-note {
  background: color-mix(in srgb, #f59e0b 16%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, #f59e0b 40%, var(--border));
}
.hidden-page-inner {
  display: flex; align-items: center; gap: 10px; padding-block: 9px;
  font-size: 13.5px; color: var(--text);
}
.hidden-page-inner > svg { flex: 0 0 auto; color: #b45309; }
.hidden-page-inner > span { flex: 1 1 auto; }
.hidden-page-cta { flex: 0 0 auto; font-weight: 600; font-size: 13px; white-space: nowrap; }
[data-theme="dark"] .hidden-page-inner > svg { color: #fbbf24; }
@media (max-width: 640px) {
  .hidden-page-inner { align-items: flex-start; flex-wrap: wrap; }
}

/* The "this has ended" notice on an archived page. Public-facing, unlike
   .hidden-page-note above it — an archived page is a live, indexed page that
   happens to be over, so this reads as information rather than a warning. */
.archive-note {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  border-bottom: 1px solid var(--border);
}
.archive-inner {
  display: flex; align-items: center; gap: 10px; padding-block: 11px;
  font-size: 14px; color: var(--text);
}
.archive-inner > svg { flex: 0 0 auto; color: var(--text-2); }
.archive-inner > span { flex: 1 1 auto; }
.archive-cta { flex: 0 0 auto; font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) {
  .archive-inner { align-items: flex-start; flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   CPA requirements map (app/us_map.py)
   Buckets, not a gradient: hours are 40/80/120 and cycles are 1/2/3 years —
   discrete answers, not a continuum. A heat ramp would imply 63 hours is a
   thing a state could ask for, and make two states a whole renewal cycle apart
   look like neighbours.
   -------------------------------------------------------------------------- */
.cmap-head { display: flex; align-items: center; justify-content: space-between; gap: 14px;
             flex-wrap: wrap; margin-bottom: 12px; }
.cmap-tabs { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border);
             border-radius: 9px; padding: 3px; gap: 2px; }
.cmap-tab { border: 0; background: none; border-radius: 6px; padding: 7px 13px; cursor: pointer;
            font: 600 13px var(--font-body); color: var(--text-2); }
.cmap-tab:hover { color: var(--text); }
.cmap-tab.is-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.cmap-fact { font-size: 13px; color: var(--text-2); margin: 0; }
.cmap-fact b { color: var(--text); }

.cmap { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-bottom: 14px; }
.cmap-st {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 1px; border-radius: 7px; text-decoration: none;
  border: 1px solid transparent; background: var(--surface-2); color: var(--text);
  transition: transform .1s ease, box-shadow .1s ease;
}
a.cmap-st:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.16);
                  border-color: var(--text); z-index: 2; }
.cmap-abbr { font: 700 12px var(--font-body); letter-spacing: .02em; }
.cmap-val { font-size: 9.5px; opacity: .75; white-space: nowrap; }
.cmap-st.is-empty { background: repeating-linear-gradient(-45deg,
                      var(--surface-2) 0 5px, var(--surface) 5px 10px);
                    color: var(--muted); }
.cmap-st.is-empty .cmap-abbr { opacity: .5; }

/* Three steps, low → high. Same ramp drives the legend swatches, so the key
   can never describe different colours from the map. */
.cmap-st[data-on="1"], .cmap-sw[data-on="1"] { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.cmap-st[data-on="2"], .cmap-sw[data-on="2"] { background: color-mix(in srgb, var(--accent) 42%, var(--surface)); }
.cmap-st[data-on="3"], .cmap-sw[data-on="3"] { background: color-mix(in srgb, var(--accent) 72%, var(--surface)); color: #fff; }
.cmap-st[data-on="4"], .cmap-sw[data-on="4"] { background: var(--accent); color: #fff; }
.cmap-st[data-on="0"], .cmap-sw[data-on="0"] { background: var(--surface-2); }

.cmap-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px;
             flex-wrap: wrap; }
.cmap-keys { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12.5px;
             color: var(--text-2); }
.cmap-legend-label { font-weight: 600; color: var(--text); }
.cmap-key { display: inline-flex; align-items: center; gap: 6px; }
.cmap-sw { width: 13px; height: 13px; border-radius: 4px; display: inline-block;
           border: 1px solid var(--border); }
.cmap-n { color: var(--muted); font-variant-numeric: tabular-nums; }
.cmap-offgrid { display: flex; gap: 10px; }
.cmap-off { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.cmap-note { font-size: 12px; color: var(--muted); margin-top: 10px; }

@media (max-width: 900px) {
  .cmap-val { display: none; }
  .cmap-abbr { font-size: 10px; }
  .cmap { gap: 3px; }
}

/* The CPA map reused as the tracker's state picker. Smaller than on the
   requirements page: there it's the content, here it's one field in a form. */
.trk-map-wrap { margin-top: 14px; }
.trk-map-hint { font-size: 12.5px; color: var(--text-2); display: block; margin-bottom: 6px; }
.trk-map { gap: 3px; }
.trk-map .cmap-st { border-radius: 5px; }
.trk-map .cmap-abbr { font-size: 9px; }
button.cmap-st { cursor: pointer; font-family: inherit; }
button.cmap-st:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.16);
                       border-color: var(--text); z-index: 2; }
.cmap-st.is-sel { outline: 2px solid var(--text); outline-offset: 1px; }
.cmap-st:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   "Ask this course/event" — grounded Q&A on an indexed item (app/semantic.py)
   -------------------------------------------------------------------------- */
.ask-course { background: color-mix(in srgb, var(--accent) 5%, var(--surface));
              border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
              border-radius: var(--radius); padding: 22px 24px; }
.ask-sub { color: var(--text-2); font-size: 14.5px; margin: 4px 0 16px; max-width: 60ch; }
.ask-form { display: flex; gap: 8px; }
.ask-q { flex: 1 1 auto; min-width: 0; background: var(--bg-elev); color: var(--text);
         border: 1px solid var(--border-strong); border-radius: 8px; padding: 11px 13px;
         font-size: 15px; outline: none; }
.ask-q:focus { border-color: var(--accent); }
.ask-send { flex: 0 0 auto; }
.ask-suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ask-chip { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
            border-radius: 999px; padding: 6px 13px; font-size: 12.5px; cursor: pointer;
            font-family: inherit; }
.ask-chip:hover { border-color: var(--accent); color: var(--text); }
.ask-answer { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 16px; }
.ask-body { font-size: 14.5px; line-height: 1.6; color: var(--text); }
.ask-body ul { margin: 8px 0 8px 2px; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.ask-body p { margin: 0 0 8px; }
.ask-body strong { color: var(--text); }
.ask-note { color: var(--text-2); font-size: 13px; margin-top: 10px; }
.ask-thinking { color: var(--text-2); font-size: 13.5px; display: flex; align-items: center; gap: 4px; }
.ask-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
           display: inline-block; animation: askPulse 1.2s ease-in-out infinite; }
.ask-dot:nth-child(2) { animation-delay: .2s; } .ask-dot:nth-child(3) { animation-delay: .4s; }
@keyframes askPulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
.ask-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.ask-cta-note { font-size: 12.5px; color: var(--text-2); }
.ask-gate { background: var(--surface-2); border-radius: 10px; padding: 14px 16px; }
.ask-gate p { margin: 0 0 10px; font-size: 14px; }
.ask-email-form { display: flex; gap: 8px; }
.ask-email { flex: 1 1 auto; min-width: 0; background: var(--bg-elev); color: var(--text);
             border: 1px solid var(--border-strong); border-radius: 8px; padding: 9px 12px; font-size: 14px; }
.ask-fineprint { font-size: 11.5px; color: var(--muted); margin-top: 12px; }
@media (max-width: 560px) { .ask-form, .ask-email-form { flex-direction: column; } }

/* Section quick-nav pills on course/event detail pages (sectionpills.js).
   Sticky under the site header; scrolls horizontally on narrow screens rather
   than wrapping into a thick block. */
.section-pills {
  position: sticky; top: var(--sticky-top); z-index: 20;
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 10px 0; margin-bottom: 8px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.section-pills::-webkit-scrollbar { display: none; }
.section-pill {
  flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border);
  text-decoration: none; white-space: nowrap; transition: color .12s, background .12s, border-color .12s;
}
.section-pill:hover { color: var(--text); border-color: var(--text-2); }
.section-pill.is-current { color: #fff; background: var(--accent); border-color: var(--accent); }

/* Admin bar — mobile. The desktop hover dropdowns wrapped to three unusable
   rows on a phone; below 900px the whole thing collapses to one "Menu" button
   that opens a filterable sheet (admin_bar mobile markup + app.js). */
.ab-menu-btn { display: none; }             /* desktop: the groups do the work */
.ab-groups { display: contents; }
@media (max-width: 900px) {
  .admin-bar-inner { flex-wrap: nowrap; min-height: 44px; }
  .ab-groups, .ab-who, .ab-signout { display: none; }   /* fold into the sheet */
  .ab-spacer { margin-left: auto; }
  .ab-menu-btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.10);
    color: #fff; border: 0; border-radius: 8px; padding: 9px 15px; font: 600 14px var(--font-body);
    cursor: pointer; }
}
.ab-sheet { position: fixed; inset: 0; z-index: 300; background: rgba(2,6,20,.55);
  display: flex; flex-direction: column; }
.ab-sheet[hidden] { display: none; }
.ab-sheet-head { display: flex; gap: 8px; padding: 12px; background: #0f172a; }
.ab-filter { flex: 1 1 auto; min-width: 0; background: #1e293b; color: #fff; border: 1px solid rgba(255,255,255,.14);
  border-radius: 9px; padding: 12px 14px; font-size: 16px; outline: none; }
.ab-filter:focus { border-color: var(--accent); }
.ab-sheet-close { flex: 0 0 auto; width: 46px; background: #1e293b; color: #cbd5e1; border: 0;
  border-radius: 9px; font-size: 24px; cursor: pointer; }
.ab-sheet-body { flex: 1 1 auto; overflow-y: auto; background: #0f172a; padding: 6px 12px 28px; }
.ab-sheet-group { padding: 8px 0; }
.ab-sheet-group[hidden] { display: none; }
.ab-sheet-group h3 { color: #94a3b8; font: 700 11px var(--font-body); text-transform: uppercase;
  letter-spacing: .07em; margin: 8px 4px; }
.ab-sheet-group a { display: block; color: #e2e8f0; text-decoration: none; padding: 13px 14px;
  border-radius: 9px; font-size: 15.5px; }
.ab-sheet-group a[hidden] { display: none; }
.ab-sheet-group a:active, .ab-sheet-group a:hover { background: rgba(255,255,255,.08); }
.ab-sheet-empty { color: #94a3b8; text-align: center; padding: 30px; }

/* /admin console on mobile: the wrapped rows of dropdowns fold into the same
   single button + sheet the public quick-bar uses. (.ab-menu-btn already shows
   at <=900px; here we hide the console's own nav and give the button a look
   that reads on the page background rather than the dark bar.) */
@media (max-width: 900px) {
  .admin-topbar .admin-nav, .admin-topbar .admin-user { display: none; }
  .admin-topbar { justify-content: flex-start; }
  .admin-menu-btn { background: var(--surface-2); color: var(--text);
    border: 1px solid var(--border-strong); }
}