/* ===== Design tokens ===== */
:root {
  /* Dark mode uses the logo's colours: deep navy, electric blue, cyan glow and
     the gold of the tassel (--gold, for small labels only). */
  --bg: #020b1f;
  --bg-elevated: #04112e;
  --surface: #071a40;
  --surface-2: #0b2252;
  --border: rgba(70,140,255,0.16);
  --text: #f2f7ff;
  --text-muted: #a6b8db;
  --accent: #1f7bff;
  --accent-2: #38b6ff;
  --gold: #f5b82e;
  --accent-contrast: #ffffff;
  --success: #34d399;
  --shadow: 0 20px 50px -20px rgba(0,0,0,0.5);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --container: 1180px;
  --font-head: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f7f7fc;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f0f0fb;
  --border: rgba(10,14,26,0.09);
  --text: #0d1126;
  --text-muted: #4d5372;
  --accent: #5b45ff;
  --accent-2: #0091c9;
  --accent-contrast: #ffffff;
  --shadow: 0 20px 50px -20px rgba(20,20,50,0.18);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f7f7fc;
    --bg-elevated: #ffffff;
    --surface: #ffffff;
    --surface-2: #f0f0fb;
    --border: rgba(10,14,26,0.09);
    --text: #0d1126;
    --text-muted: #4d5372;
    --accent: #5b45ff;
    --accent-2: #0091c9;
    --accent-contrast: #ffffff;
    --shadow: 0 20px 50px -20px rgba(20,20,50,0.18);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; margin: 0 0 0.5em; }
p { margin: 0 0 1em; color: var(--text-muted); }
a { color: inherit; }
img { max-width: 100%; display: block; }
ul { padding: 0; margin: 0; list-style: none; }
button { font-family: inherit; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
@media (max-width: 640px) { .section { padding: 64px 0; } }
/* Wide enough for a heading to stay on one line on computers; the intro paragraph keeps a
   comfortable 640px reading width. When a heading must wrap (phones), balance the lines. */
.section-head { max-width: 980px; margin: 0 auto 56px; text-align: center; }
.section-head > p { max-width: 640px; margin-left: auto; margin-right: auto; }
.eyebrow {
  display: inline-block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); text-wrap: balance; }
.section-head p { font-size: 1.05rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff;
  padding: 12px 20px; border-radius: 0 0 10px 0; z-index: 1000; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 0.98rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--accent) 60%, transparent); }
.btn-primary:hover { box-shadow: 0 16px 36px -12px color-mix(in srgb, var(--accent) 75%, transparent); }
.btn-secondary { background: transparent; border-color: var(--border); color: var(--text); }
.btn-secondary:hover { border-color: var(--accent); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 18px; font-size: 0.9rem; }
.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn.is-live { background: linear-gradient(135deg, var(--success), var(--accent-2)); color: #fff; border-color: transparent; }

/* ===== Beta notice bar (above the nav, scrolls away; the nav stays sticky) ===== */
.beta-bar {
  position: relative; z-index: 501; display: flex; align-items: center; gap: 14px; height: 40px; padding: 0;
  background: linear-gradient(90deg, #0b3fd8, #1f7bff 55%, #1a9be6); color: #fff; font-size: 0.86rem; overflow: hidden;
}
/* A solid red block flush with the left edge, the full height of the bar. */
.beta-pill {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; align-self: stretch; padding: 0 18px;
  background: #dc2626; box-shadow: 4px 0 12px -4px rgba(127, 29, 29, 0.55);
  font: 800 0.7rem/1 var(--font-head, inherit); letter-spacing: 0.12em; text-transform: uppercase;
}
.beta-dot { width: 8px; height: 8px; border-radius: 50%; background: #a7f3d0; box-shadow: 0 0 0 0 rgba(167, 243, 208, 0.7); }
.beta-clip {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.beta-track { display: flex; width: max-content; }
.beta-track-half { display: flex; flex-shrink: 0; }
.beta-item { white-space: nowrap; padding-right: 56px; }
.beta-item strong { font-weight: 700; }
.beta-item a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* Matches the NEW WEBSITE block: solid red, flush with the right edge, full height. */
.beta-cta {
  display: inline-flex; align-items: center; flex-shrink: 0; align-self: stretch; padding: 0 18px;
  background: #dc2626; color: #fff; box-shadow: -4px 0 12px -4px rgba(127, 29, 29, 0.55);
  font-weight: 700; font-size: 0.82rem; text-decoration: none; white-space: nowrap; transition: background 0.15s ease;
}
.beta-cta:hover, .beta-cta:focus-visible { background: #b91c1c; }
@media (prefers-reduced-motion: no-preference) {
  .beta-track { animation: betascroll 48s linear infinite; }
  .beta-bar:hover .beta-track, .beta-bar:focus-within .beta-track { animation-play-state: paused; }
  .beta-dot { animation: betapulse 1.8s ease-out infinite; }
}
@keyframes betascroll { to { transform: translateX(-50%); } }
@keyframes betapulse { 70% { box-shadow: 0 0 0 7px rgba(167, 243, 208, 0); } 100% { box-shadow: 0 0 0 0 rgba(167, 243, 208, 0); } }
/* No motion: show just the main message, cut off cleanly. */
@media (prefers-reduced-motion: reduce) {
  .beta-track-half[aria-hidden="true"], .beta-item + .beta-item { display: none; }
  .beta-item { overflow: hidden; text-overflow: ellipsis; display: block; padding-right: 0; }
  .beta-track, .beta-track-half { width: 100%; }
}
@media (max-width: 600px) { .beta-bar { gap: 10px; padding: 0; font-size: 0.8rem; } .beta-pill { padding: 0 12px; } .beta-cta { display: none; } }
html.lite .beta-track, html.lite .beta-dot { animation: none !important; }

/* ----- Top of page extras (topbar.js): countdown, LIVE NOW, close, phone rotator,
   shine, moving arrow, shrinking menu, progress line, logo glow, button shimmer ----- */
.beta-bar { transition: margin-top 0.25s ease, opacity 0.25s ease; }
.beta-bar[hidden] { display: none !important; }
.beta-bar.is-closing { margin-top: -40px; opacity: 0; }
.beta-count {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding-right: 14px; white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, 0.3); font-weight: 700; font-variant-numeric: tabular-nums;
}
.beta-close {
  flex-shrink: 0; align-self: stretch; width: 40px; display: inline-flex; align-items: center; justify-content: center;
  margin-left: -14px; padding: 0; border: 0; background: rgba(0, 0, 0, 0.12); color: #fff; cursor: pointer;
  transition: background 0.15s ease;
}
.beta-close:hover, .beta-close:focus-visible { background: rgba(0, 0, 0, 0.3); }
.beta-arrow { display: inline-block; margin-left: 6px; }
.beta-pill, .beta-cta { position: relative; overflow: hidden; }
.beta-pill::after, .beta-cta::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 35%; height: 100%; pointer-events: none;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-18deg);
}
/* Phones: one message at a time (two lines allowed), fading. */
.beta-bar.is-rotating .beta-track { display: none; }
.beta-rotator { transition: opacity 0.35s ease, transform 0.35s ease; }
.beta-rotator.is-fading { opacity: 0; transform: translateY(6px); }
.beta-rotator .beta-item {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  white-space: normal; padding: 0 8px 0 0; font-size: 0.74rem; line-height: 1.25;
}
@media (max-width: 600px) {
  .beta-count { display: none; } .beta-close { margin-left: -10px; }
  /* LIVE NOW on phones: drop the messages, let the button fill the middle. */
  .beta-bar.is-live .beta-clip { display: none; }
  .beta-bar.is-live .beta-cta { flex: 1; justify-content: center; }
}
/* LIVE NOW: the whole bar turns red and the button opens the live class (also on phones). */
.beta-bar.is-live { background: linear-gradient(90deg, #991b1b, #dc2626 50%, #ef4444); }
.beta-bar.is-live .beta-pill { background: #7f1d1d; }
.beta-bar.is-live .beta-cta { display: inline-flex; background: #fff; color: #b91c1c; }
.beta-bar.is-live .beta-cta:hover, .beta-bar.is-live .beta-cta:focus-visible { background: #fee2e2; }
@media (prefers-reduced-motion: no-preference) {
  .beta-pill::after { animation: sheen 6s ease-in-out infinite; }
  .beta-cta::after { animation: sheen 6s ease-in-out 3s infinite; }
  .beta-arrow { animation: betanudge 2.6s ease-in-out infinite; }
  .beta-bar.is-live { animation: betalive 1.6s ease-in-out infinite; }
}
@keyframes betanudge { 0%, 55%, 75%, 100% { transform: translateX(0); } 65%, 85% { transform: translateX(4px); } }
@keyframes betalive { 50% { filter: brightness(1.15); } }

/* Menu: logo glow on hover, shrinks after scrolling down, reading progress line. */
.nav-inner .logo-mark { transition: width 0.25s ease, height 0.25s ease, transform 0.25s ease, filter 0.25s ease; }
.nav-inner { transition: padding 0.25s ease; }
.nav-inner .logo:hover .logo-mark, .nav-inner .logo:focus-visible .logo-mark {
  transform: translateY(-2px) scale(1.05); filter: drop-shadow(0 0 10px rgba(31, 123, 255, 0.75));
}
.nav.nav-compact .nav-inner { padding-top: 4px; padding-bottom: 4px; }
.nav.nav-compact .nav-inner .logo-mark { width: 66px; height: 66px; }
@media (max-width: 600px) { .nav.nav-compact .nav-inner .logo-mark { width: 52px; height: 52px; } }
.nav-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; z-index: 2; }
.nav-progress span {
  display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #1f7bff, #4fd1ff 70%, #f5b82e);
}
/* Register Free: slow light sweep. */
.nav-actions .btn-primary { position: relative; overflow: hidden; }
.nav-actions .btn-primary::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 35%; height: 100%; pointer-events: none;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.45), transparent); transform: skewX(-18deg);
}
@media (prefers-reduced-motion: no-preference) { .nav-actions .btn-primary::after { animation: sheen 4.5s ease-in-out 1s infinite; } }
html.lite .beta-pill::after, html.lite .beta-cta::after, html.lite .beta-arrow, html.lite .beta-bar.is-live,
html.lite .nav-actions .btn-primary::after { animation: none !important; }

/* ===== Nav ===== */
.nav {
  position: sticky; top: 0; z-index: 500; backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 93%, transparent);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,0.55);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 8px 24px; max-width: var(--container); margin: 0 auto; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; text-decoration: none; color: var(--text); }
.logo-mark {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  /* The Academy logo (assets/logo-mark.png, 128px, from robotlogo.png). Pages still
     contain a "T" inside the mark; it is hidden. */
  background: #000516 url("assets/logo-mark.png?v=2") center / cover no-repeat;
  display: flex; align-items: center; justify-content: center; color: transparent; font-size: 0; font-weight: 700;
}
/* Top navigation: the logo alone, no name beside it (the logo artwork already says
   "AI Academy"), shown large like the Nova AI Ops logo. The footer keeps the 44px mark. */
.nav-inner > .logo { position: relative; top: -6px; margin-left: -18px; margin-right: 18px; } /* up and a little left of the menu's edge, with room before the menu */
@media (min-width: 1240px) { .nav-inner > .logo { margin-left: -42px; } } /* wide screens have space beside the menu */
.nav.nav-compact .nav-inner > .logo { top: 0; }
.nav-inner .logo-mark {
  width: 112px; height: 112px; border-radius: 0;
  background-image: url("assets/logo-256.png?v=1");
  /* A thin blue rim + glow so the dark tile stands out from the dark menu bar. */
  box-shadow: 0 0 0 1.5px rgba(70, 150, 255, 0.55), 0 6px 22px -6px rgba(30, 123, 255, 0.6);
}
@media (max-width: 600px) { .nav-inner .logo-mark { width: 76px; height: 76px; border-radius: 0; } .nav-inner > .logo { margin-left: -10px; top: -4px; margin-right: 0; } }
/* Dark mode (the default): no tile at all, just the robot and its lettering on the
   menu bar (assets/logo-clear-256.png has a see-through background). Light mode
   keeps the dark tile above, because the artwork needs a dark backing there. */
:root:not([data-theme="light"]) .nav-inner .logo-mark {
  background: transparent url("assets/logo-clear-256.png?v=1") center / contain no-repeat;
  box-shadow: none;
}
.nav-links { display: none; align-items: center; gap: 16px; }
.nav-links a {
  position: relative; text-decoration: none; color: var(--text-muted); font-weight: 500;
  font-size: 0.94rem; transition: color 0.15s ease; white-space: nowrap;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
/* launch.js adds a "Soon" pill to links for locked features. In the desktop menu
   it made the bar too wide (the logo wrapped onto two lines), so there the link
   is only faded; the pill still shows in the phone menu and footer. */
.nav-links .taa-link-pill { display: none; }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.theme-toggle {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text);
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
.nav-toggle {
  display: flex; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); align-items: center; justify-content: center; cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle-icon line { transition: transform 0.3s ease, opacity 0.2s ease; transform-origin: center; }
.nav-toggle[aria-expanded="true"] .line-top { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .line-mid { opacity: 0; }
.nav-toggle[aria-expanded="true"] .line-bottom { transform: translateY(-6px) rotate(-45deg); }

.mobile-panel {
  display: flex; flex-direction: column; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--border);
  background: var(--bg-elevated); overflow: hidden; max-height: 0; opacity: 0; transform: translateY(-6px);
  transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.3s ease, padding 0.35s ease;
}
.mobile-panel.open { max-height: 640px; opacity: 1; transform: translateY(0); padding: 12px 24px 20px; }
.mobile-panel a {
  padding: 12px 6px; text-decoration: none; color: var(--text); font-weight: 500; border-radius: 8px;
}
.mobile-panel a:hover { background: var(--surface); }
.mobile-panel a[aria-current="page"] { color: var(--accent-2); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* The full menu needs the whole 1180px container; narrower screens use the menu button. */
@media (min-width: 1180px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  .mobile-panel { display: none !important; }
}

/* ===== Hero ===== */
.hero { position: relative; overflow: hidden; padding: 40px 0 56px; }
@media (max-width: 600px) { .hero { padding-top: 28px; } }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
@media (min-width: 1300px) { .hero .container { max-width: 1480px; } }
@media (min-width: 1680px) { .hero .container { max-width: 1640px; } }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 40px; } }

.hero-bg { background: linear-gradient(180deg, var(--bg-elevated), var(--bg) 60%); }
.hero-grain {
  position: absolute; inset: 0; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px 7px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); font-size: 0.82rem; font-weight: 600;
  color: var(--text-muted); margin-bottom: 20px;
}
.hero-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero-badge-dot { animation: badgepulse 2s ease-in-out infinite; }
}
@keyframes badgepulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-2) 50%, transparent); } 50% { opacity: 0.7; box-shadow: 0 0 0 5px transparent; } }

.text-gradient {
  background: linear-gradient(100deg, var(--accent), var(--accent-2), var(--accent));
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .text-gradient { animation: textshimmer 5s ease-in-out infinite; }
}
@keyframes textshimmer { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } }

/* Staggered hero entrance: the parent's own reveal fade is disabled in favor of per-child cascade */
.hero-copy.reveal { opacity: 1; transform: none; transition: none; }
.hero-copy > * { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.hero-copy.is-visible > * { opacity: 1; transform: translateY(0); }
.hero-copy.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.hero-copy.is-visible > *:nth-child(2) { transition-delay: 0.15s; }
.hero-copy.is-visible > *:nth-child(3) { transition-delay: 0.25s; }
.hero-copy.is-visible > *:nth-child(4) { transition-delay: 0.35s; }
.hero-copy.is-visible > *:nth-child(5) { transition-delay: 0.45s; }
@media (prefers-reduced-motion: reduce) {
  .hero-copy > * { opacity: 1; transform: none; transition: none; }
}

.hero-copy h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.01em; }
.hero-copy .lede { font-size: 1.15rem; max-width: 540px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.btn-glow { position: relative; overflow: hidden; }
.btn-glow:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 16px 36px -12px color-mix(in srgb, var(--accent) 75%, transparent); }
.btn-glow::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 35%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg);
}
@media (prefers-reduced-motion: no-preference) {
  .btn-glow::after { animation: sheen 4s ease-in-out infinite; }
}
@keyframes sheen { 0% { left: -60%; } 45% { left: 130%; } 100% { left: 130%; } }
.hero-meta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; font-size: 0.86rem; color: var(--text-muted); }
.hero-meta span {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
}
.hero-meta svg { width: 16px; height: 16px; color: var(--accent-2); flex-shrink: 0; }

/* ===== Hero community map (flat world map, network-ops style markers) ===== */
.hero-map { position: relative; width: 100%; min-width: 0; max-width: 900px; margin: 0 auto; }
@media (min-width: 960px) { .hero-map { justify-self: end; } }
@media (min-width: 1680px) { .hero-map { max-width: 1000px; } }
/* Wide screens: the hero uses nearly the full width, the text sits toward the left
   edge and the map gets most of the row (founder request, 2026-10-02). */
@media (min-width: 1200px) {
  .hero .container { max-width: none; padding-left: clamp(24px, 3.2vw, 72px); padding-right: clamp(24px, 3.2vw, 72px); }
  /* 560px keeps the intro paragraph (.lede) to 2 lines (founder request). */
  .hero-grid { grid-template-columns: minmax(570px, 0.85fr) minmax(0, 1.6fr); gap: 40px; }
  .hero-copy .lede { max-width: 610px; font-size: 16px; }
  .hero-map { max-width: 1240px; }
  /* A bigger hero that fills most of the first screen, with the text block raised
     to line up with the top of the map instead of sitting in the middle. */
  .hero { min-height: 80vh; padding: 48px 0 64px; }
  .hero-grid { align-items: start; }
  .hero-copy { padding-top: clamp(12px, 4vh, 56px); }
  .hero-copy h1 { font-size: clamp(3.8rem, 4.4vw, 5.2rem); line-height: 1.06; }
  .hero-copy .lede { margin-top: 22px; }
}
/* A wider map (founder request, 2026-10-03): the text column keeps its 570px (headline on
   one line, intro on two), the gap and the side margins shrink (most on the map's side)
   so the map gets the room; bigger screens may go up to 1400px. */
@media (min-width: 1200px) {
  .hero .container { padding-left: clamp(20px, 2.4vw, 56px); padding-right: clamp(12px, 1.2vw, 28px); }
  .hero-grid { grid-template-columns: minmax(570px, 0.8fr) minmax(0, 1.75fr); gap: 28px; }
  .hero-map { max-width: 1400px; }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .hero .container { padding-right: 12px; }
  .hero-grid { gap: 28px; }
}
/* Phones: the map runs nearly edge to edge (8px from each side instead of 24px). */
@media (max-width: 640px) {
  .hero-map { width: calc(100% + 32px); max-width: none; margin-left: -16px; margin-right: -16px; }
}

/* 17:10, taller than the picture's own 2:1, so the map reads bigger next to the headline.
   Everything on it is placed in percent (map.js project()) and the picture is stretched to
   fill, so the markers stay on their countries. Full screen keeps 2:1 (map-plus.css). */
.map-panel {
  position: relative; aspect-ratio: 17 / 10; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-elevated);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03) inset;
  opacity: 0; transform: scale(0.96); transition: opacity 0.9s ease, transform 0.9s ease;
}
.hero-map.is-ready .map-panel { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: no-preference) {
  .hero-map.is-ready .map-panel { animation: map-panel-glow 5s ease-in-out 1s infinite; }
}
@keyframes map-panel-glow {
  0%, 100% { box-shadow: 0 30px 70px -30px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03) inset, 0 0 0 0 transparent; }
  50% { box-shadow: 0 30px 70px -30px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03) inset, 0 0 30px 3px color-mix(in srgb, var(--accent-2) 30%, transparent); }
}
.map-bg {
  width: 100%; height: 100%; object-fit: fill; filter: saturate(0.9) brightness(0.85); transform-origin: center;
}
/* The map picture shows the polar ice (Arctic and Greenland at the top, Antarctica along the
   bottom) as bright white bands. Fade the picture out at those edges into a deep navy backing,
   so the map seems to float in space. Only the picture fades (icons, lines and names don't).
   map-bg-icefade */
.map-panel { background: #04112e; }
.map-bg {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 6%, #000 15%, #000 76%, rgba(0, 0, 0, 0.45) 87%, transparent 97%);
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 6%, #000 15%, #000 76%, rgba(0, 0, 0, 0.45) 87%, transparent 97%);
}
@media (prefers-reduced-motion: no-preference) {
  .map-bg { animation: map-kenburns 24s ease-in-out infinite; }
}
@keyframes map-kenburns {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.055); }
}
.map-sweep {
  position: absolute; top: 50%; left: 50%; width: 150%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: screen; opacity: 0.5;
  background: conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, var(--accent-2) 60%, transparent) 10deg, transparent 35deg);
}
@media (prefers-reduced-motion: no-preference) {
  .map-sweep { animation: map-sweep-spin 7s linear infinite; }
}
@keyframes map-sweep-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.map-lines, .map-markers { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-lines { pointer-events: none; }

.map-line {
  fill: none; stroke: var(--accent-2); stroke-width: 1.4; opacity: 0.55; stroke-linecap: round;
}
.map-line-flow { stroke-dasharray: 5 6; }
@media (prefers-reduced-motion: no-preference) {
  .map-line-flow { animation: map-dash 1.4s linear infinite; }
}
@keyframes map-dash { to { stroke-dashoffset: -22; } }

.map-packet { fill: var(--accent-2); filter: drop-shadow(0 0 4px var(--accent-2)); }

.map-dot {
  position: absolute; transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--accent-2); box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent-2) 70%, transparent);
  cursor: pointer; outline: none; opacity: 0;
  display: flex; align-items: center; justify-content: center;
  animation: map-dot-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.map-dot svg { width: 60%; height: 60%; color: #0a0e1a; flex-shrink: 0; }
.map-dot-hub svg { color: var(--accent); }
.map-dot:hover, .map-dot:focus-visible {
  transform: translate(-50%, -50%) scale(1.3);
  box-shadow: 0 0 18px 4px color-mix(in srgb, var(--accent-2) 85%, transparent);
  z-index: 3;
}
.map-dot-hub {
  background: #fff; box-shadow: 0 0 16px 3px color-mix(in srgb, var(--accent-2) 85%, transparent);
  animation: map-dot-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             hub-breathe 3.2s ease-in-out 0.6s infinite;
}
.map-dot-hub:hover, .map-dot-hub:focus-visible {
  transform: translate(-50%, -50%); filter: brightness(1.3);
  box-shadow: 0 0 22px 5px color-mix(in srgb, var(--accent-2) 90%, transparent);
}
@keyframes map-dot-pop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.15); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes hub-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.12); }
}

.map-dot-ring {
  position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--accent-2);
  transform: scale(1); opacity: 0.7;
}
@media (prefers-reduced-motion: no-preference) {
  .map-dot-ring { animation: map-ping 2.6s ease-out infinite; }
}
@keyframes map-ping { to { transform: scale(2.4); opacity: 0; } }

.map-dot-burst {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent-2);
  animation: map-burst 0.65s ease-out forwards;
}
@keyframes map-burst { from { transform: scale(1); opacity: 1; } to { transform: scale(3); opacity: 0; } }

.map-dot-tooltip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  font: 600 12px Inter, system-ui, sans-serif; color: #fff; white-space: nowrap;
  background: rgba(10,14,26,0.92); border: 1px solid rgba(255,255,255,0.15);
  padding: 4px 9px; border-radius: 7px; opacity: 0; pointer-events: none;
  transition: opacity 0.15s ease; z-index: 2;
}
.map-dot:hover .map-dot-tooltip, .map-dot:focus-visible .map-dot-tooltip { opacity: 1; }

.map-label {
  position: absolute; transform: translate(-50%, 85%); z-index: 1;
  font: 700 9.5px/1.2 Inter, system-ui, sans-serif; color: #fff; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 10px rgba(0,0,0,0.75);
  pointer-events: none; opacity: 0; letter-spacing: 0.01em;
  animation: map-label-fade 0.5s ease forwards;
}
.map-label-above { transform: translate(-50%, -195%); }
/* A label sitting on top of its own country's crowd gets a dark backing to stay readable. */
.map-label.map-label-on { padding: 1px 5px; border-radius: 6px; background: rgba(4, 10, 32, 0.78); }
@keyframes map-label-fade { to { opacity: 0.92; } }

.map-badge {
  position: absolute; transform: translate(-50%, -50%); z-index: 2;
  background: rgba(10,14,26,0.88); border: 1px solid color-mix(in srgb, var(--accent-2) 60%, transparent);
  color: #fff; font: 700 10px Inter, system-ui, sans-serif; padding: 2px 7px; border-radius: 999px;
  opacity: 0; white-space: nowrap;
  animation: map-dot-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.hero-map.reduce-motion .map-line-flow { stroke-dasharray: none; animation: none; }
.hero-map.reduce-motion .map-dot { opacity: 1; animation: none; }
.hero-map.reduce-motion .map-dot-ring { display: none; }
.hero-map.reduce-motion .map-packet { display: none; }
.hero-map.reduce-motion .map-label { opacity: 0.92; animation: none; }
.hero-map.reduce-motion .map-badge { opacity: 1; animation: none; }

.map-legend {
  display: flex; gap: 20px; justify-content: center; margin-top: 16px;
  font-size: 0.82rem; color: var(--text-muted);
}
.map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--accent-2) 70%, transparent);
}
.legend-dot-hub { background: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .legend-dot { animation: legend-pulse 2.4s ease-in-out infinite; }
  .legend-dot-hub { animation-delay: 0.5s; }
}
@keyframes legend-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ===== Page header (utility pages like Free Tools) ===== */
.page-header { padding: 72px 0 8px; text-align: center; }
.page-header h1 { font-size: clamp(2rem, 4vw, 3rem); }
.page-header .lede { max-width: 640px; margin: 0 auto; font-size: 1.08rem; }
.page-note {
  max-width: 700px; margin: 28px auto 48px; text-align: center; font-size: 0.85rem; color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border); padding: 14px 22px; border-radius: var(--radius-md);
}

/* ===== Reveal ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ===== Trust bar ===== */
.trust-bar { position: relative; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-elevated); overflow: hidden; }
.trust-bar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
}
.trust-grid { display: flex; flex-wrap: wrap; justify-content: center; padding: 40px 0; text-align: center; }
.trust-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--radius-md); transition: transform 0.25s ease;
  flex: 1 1 130px;
}
.trust-item:hover { transform: translateY(-4px); }
.trust-icon {
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-2) 18%, transparent));
  color: var(--accent); margin-bottom: 2px;
}
.trust-icon svg { width: 24px; height: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .trust-item:hover .trust-icon { animation: iconpulse 0.8s ease-in-out; }
}
@keyframes iconpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.trust-num { font-family: var(--font-head); font-size: clamp(2rem, 4.4vw, 2.8rem); font-weight: 700; }
.trust-label { font-size: 0.9rem; color: var(--text-muted); }
/* "50,000+": the counter in site.js writes only digits, so the + comes from CSS */
.trust-num[data-plus]::after { content: "+"; }

/* ===== About ===== */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center; }
@media (min-width: 900px) { .about-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.about-photo-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.about-photo {
  width: 220px; height: 220px; border-radius: 50%; border: 4px solid var(--surface);
  box-shadow: var(--shadow); background: var(--surface-2); object-fit: cover;
}
.badge-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); font-size: 0.82rem; font-weight: 600; color: var(--text-muted);
}
.badge svg { width: 14px; height: 14px; color: var(--accent); }
.about-copy h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.about-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.btn-facebook svg { width: 18px; height: 18px; color: #1877f2; flex-shrink: 0; }
.btn-linkedin svg { width: 18px; height: 18px; color: #0a66c2; flex-shrink: 0; }
.btn-foundation svg { width: 18px; height: 18px; color: #f43f5e; flex-shrink: 0; }
/* Large screens: the four About buttons on one row (founder request). This section gets a
   slightly wider container and text column, and the buttons are a little more compact.
   Below 1260px they wrap as before (they need about 800px). */
@media (min-width: 1260px) {
  #about > .container { max-width: 1320px; }
  #about .about-grid { grid-template-columns: minmax(0, 0.64fr) minmax(0, 1.36fr); }
  #about .about-actions { flex-wrap: nowrap; gap: 8px; }
  #about .about-actions .btn { font-size: 0.84rem; padding: 10px 14px; white-space: nowrap; }
  #about .about-actions .btn svg { width: 16px; height: 16px; }
}
/* Tablets (one column, text full width): the compact buttons fit on one row too. */
@media (min-width: 800px) and (max-width: 899px) {
  #about .about-actions { flex-wrap: nowrap; gap: 8px; }
  #about .about-actions .btn { font-size: 0.84rem; padding: 10px 14px; white-space: nowrap; }
  #about .about-actions .btn svg { width: 16px; height: 16px; }
}
a.badge { text-decoration: none; transition: color 0.2s, border-color 0.2s; }
a.badge:hover, a.badge:focus-visible { color: var(--text); border-color: var(--accent); }

/* ===== Steps ===== */
.steps-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 760px) { .steps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 32px 28px; position: relative; }
.step-num {
  width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 700; font-family: var(--font-head);
  margin-bottom: 18px;
}
.step-card h3 { font-size: 1.15rem; }

/* ===== Learning paths ===== */
.paths-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 860px) { .paths-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.path-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 32px 28px;
  display: flex; flex-direction: column; transition: border-color 0.2s ease, transform 0.2s ease;
}
.path-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.path-card.featured { border-color: var(--accent); box-shadow: var(--shadow); }
.path-card, .tool-card, .resource-card, .step-card, .testimonial-card { will-change: transform; }
/* Cascading entrance: siblings within these grids reveal in sequence instead of all at once */
.paths-grid > .reveal:nth-child(1), .tool-grid > .reveal:nth-child(1), .resource-grid > .reveal:nth-child(1),
.steps-grid > .reveal:nth-child(1), .replay-grid > .reveal:nth-child(1) { transition-delay: 0s; }
.paths-grid > .reveal:nth-child(2), .tool-grid > .reveal:nth-child(2), .resource-grid > .reveal:nth-child(2),
.steps-grid > .reveal:nth-child(2), .replay-grid > .reveal:nth-child(2) { transition-delay: 0.1s; }
.paths-grid > .reveal:nth-child(3), .tool-grid > .reveal:nth-child(3), .resource-grid > .reveal:nth-child(3),
.steps-grid > .reveal:nth-child(3), .replay-grid > .reveal:nth-child(3) { transition-delay: 0.2s; }
.tool-grid > .reveal:nth-child(4), .replay-grid > .reveal:nth-child(4) { transition-delay: 0.3s; }
.tool-grid > .reveal:nth-child(5), .replay-grid > .reveal:nth-child(5) { transition-delay: 0.4s; }
.tool-grid > .reveal:nth-child(6), .replay-grid > .reveal:nth-child(6) { transition-delay: 0.5s; }
.path-level {
  align-self: flex-start; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 5px 12px; border-radius: 999px; background: var(--surface-2); color: var(--accent); margin-bottom: 16px;
}
.path-card h3 { font-size: 1.3rem; }
.path-topics { margin: 18px 0 26px; display: flex; flex-direction: column; gap: 12px; }
.path-topics li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; color: var(--text-muted); }
.path-topics svg { width: 18px; height: 18px; color: var(--success); flex-shrink: 0; margin-top: 2px; }
.path-card .btn { margin-top: auto; }

/* ===== Next class countdown ===== */
.next-class-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 32px 36px; margin-bottom: 48px; max-width: 900px; margin-left: auto; margin-right: auto;
}
.next-class-info .eyebrow { margin-bottom: 6px; }
.next-class-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.next-class-readable { margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--text); }
.countdown { display: flex; gap: 12px; }
.countdown-unit {
  display: flex; flex-direction: column; align-items: center; background: var(--surface-2);
  border-radius: var(--radius-sm); padding: 10px 14px; min-width: 58px;
}
.countdown-num { font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; color: var(--accent); }
.countdown-label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
@media (max-width: 760px) {
  .next-class-banner { flex-direction: column; text-align: center; padding: 28px 24px; }
}

/* ===== Schedule ===== */
.schedule-list { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin: 0 auto; }
.schedule-item {
  display: flex; align-items: center; gap: 20px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 20px 24px;
}
.schedule-date {
  flex-shrink: 0; width: 74px; height: 74px; border-radius: 14px; background: var(--surface-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.schedule-date .dow { font-size: 0.7rem; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.schedule-date .dom { font-size: 1.4rem; font-weight: 700; font-family: var(--font-head); }
.schedule-date .mon { font-size: 0.72rem; color: var(--text-muted); }
.schedule-info h3 { font-size: 1.05rem; margin-bottom: 4px; }
.schedule-info p { margin: 0; font-size: 0.88rem; }
.schedule-tag {
  margin-left: auto; flex-shrink: 0; font-size: 0.78rem; font-weight: 700; color: var(--success);
  background: color-mix(in srgb, var(--success) 15%, transparent); padding: 6px 12px; border-radius: 999px;
}
@media (max-width: 560px) {
  .schedule-item { flex-wrap: wrap; }
  .schedule-tag { margin-left: 0; }
}

/* ===== Pre-class question ===== */
.preclass-question {
  max-width: 640px; margin: 48px auto 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px; text-align: center;
}
.preclass-question h3 { font-size: 1.2rem; }
.preclass-question form { text-align: left; margin-top: 20px; }
.preclass-success { display: none; padding: 20px 0; }
.preclass-success.show { display: block; }
.preclass-success .check {
  width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--success) 18%, transparent);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.preclass-success .check svg { width: 22px; height: 22px; color: var(--success); }
#preclassForm.hide { display: none; }

/* ===== Replays ===== */
.replay-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 640px) { .replay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .replay-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.replay-card { border-radius: var(--radius-md); overflow: hidden; background: var(--surface); border: 1px solid var(--border); }
.replay-card.is-hidden { display: none; }
.replay-embed {
  position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--surface-2), var(--bg-elevated));
  cursor: pointer; border: 0; width: 100%; padding: 0; display: block;
}
.replay-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.replay-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.replay-player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.replay-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.replay-skeleton .replay-embed, .replay-skeleton h3, .replay-skeleton p {
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface) 50%, var(--surface-2) 100%); background-size: 200% 100%;
  border-radius: 6px; cursor: default;
}
.replay-skeleton .replay-embed { border-radius: 0; }
.replay-skeleton p { width: 40%; }
@media (prefers-reduced-motion: no-preference) {
  .replay-skeleton .replay-embed, .replay-skeleton h3, .replay-skeleton p { animation: replay-shimmer 1.4s linear infinite; }
}
@keyframes replay-shimmer { to { background-position: -200% 0; } }
.checkin-panel { max-width: 560px; text-align: center; }
.checkin-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.checkin-form input {
  flex: 1 1 180px; min-width: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; text-align: center;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
}
.checkin-form input::placeholder { letter-spacing: normal; text-transform: none; font-weight: 400; font-size: 0.95rem; }
.checkin-form input:focus { outline: none; border-color: var(--accent); }
.checkin-code-big {
  font-family: var(--font-head); font-size: clamp(2.2rem, 7vw, 3.4rem); font-weight: 700; letter-spacing: 0.22em;
  text-align: center; padding: 14px 10px; margin: 6px 0 14px; border-radius: 16px; border: 1px dashed var(--accent);
  background: var(--surface); color: var(--text);
}
.replay-more { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 28px; }
.play-btn {
  position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255,255,255,0.15); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.4); transition: transform 0.2s ease;
}
.replay-embed:hover .play-btn { transform: scale(1.08); }
.play-btn svg { width: 22px; height: 22px; color: #fff; margin-left: 3px; }
.replay-info { padding: 18px 20px; }
.replay-info h3 { font-size: 1rem; margin-bottom: 4px; }
.replay-download {
  display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none;
  transition: color 0.15s ease;
}
.replay-download:hover { color: var(--accent); text-decoration: underline; }
.replay-download svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--accent-2); }
.replay-info p { font-size: 0.85rem; margin: 0; }
.replay-notes { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 0.86rem; }
.replay-notes summary { cursor: pointer; color: var(--accent-2); font-weight: 600; }
.replay-notes p { margin: 8px 0 6px; color: var(--text-muted); }
.replay-notes ul { margin: 0; padding-left: 18px; color: var(--text-muted); }
.replay-notes li { margin: 3px 0; }

/* ===== Testimonials ===== */
.testimonial-wrap { position: relative; }
.testimonial-track {
  display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 20px;
  scrollbar-width: none;
}
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-card {
  scroll-snap-align: start; flex: 0 0 min(340px, 82vw); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 28px; display: flex; flex-direction: column;
}
.quote-mark { font-family: var(--font-head); font-size: 2.4rem; color: var(--accent); line-height: 1; margin-bottom: 10px; }
.testimonial-card p.quote { color: var(--text); font-size: 1rem; flex-grow: 1; }
.testimonial-person { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.avatar-dot {
  width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
}
.testimonial-person strong { display: block; font-size: 0.92rem; }
.testimonial-person span { font-size: 0.82rem; color: var(--text-muted); }
.carousel-controls { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.carousel-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text);
}
.carousel-btn svg { width: 18px; height: 18px; }

/* ===== Testimonial submission ===== */
.testimonial-submit {
  max-width: 640px; margin: 48px auto 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px; text-align: center;
}
.testimonial-submit h3 { font-size: 1.2rem; }
.testimonial-submit form { text-align: left; margin-top: 20px; }
.testimonial-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 0.82rem; color: var(--text-muted); margin-top: 16px; }
.testimonial-consent input { margin-top: 3px; flex-shrink: 0; }
.testimonial-submit-success { display: none; padding: 20px 0; }
.testimonial-submit-success.show { display: block; }
.testimonial-submit-success .check {
  width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--success) 18%, transparent);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.testimonial-submit-success .check svg { width: 22px; height: 22px; color: var(--success); }
#testimonialForm.hide { display: none; }

/* ===== Resources ===== */
.resource-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 860px) { .resource-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.resource-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px; }
.resource-icon {
  width: 46px; height: 46px; border-radius: 12px; background: var(--surface-2); display: flex; align-items: center;
  justify-content: center; margin-bottom: 16px; color: var(--accent);
}
.resource-icon svg { width: 22px; height: 22px; }
.resource-card h3 { font-size: 1.05rem; }
.resource-form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.resource-form input[type="email"] {
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elevated);
  color: var(--text); font-size: 0.92rem; width: 100%;
}
.form-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 8px; }
.form-success { display: none; font-size: 0.88rem; color: var(--success); font-weight: 600; margin-top: 10px; }
.form-success.show { display: block; }

/* ===== Newsletter ===== */
.newsletter-panel {
  max-width: 760px; margin: 48px auto 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px 36px; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between; gap: 24px;
}
.newsletter-copy { flex: 1 1 260px; }
.newsletter-copy h3 { font-size: 1.1rem; margin-bottom: 4px; }
.newsletter-copy p { margin: 0; font-size: 0.88rem; }
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; flex: 1 1 320px; }
.newsletter-form input[type="email"] {
  flex: 1; min-width: 180px; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text); font-size: 0.92rem; font-family: inherit;
}
.newsletter-form input[type="email"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.newsletter-form button { flex-shrink: 0; }
.newsletter-success { display: none; font-size: 0.85rem; color: var(--success); font-weight: 600; margin-top: 8px; width: 100%; }
.newsletter-success.show { display: block; }
.newsletter-form.hide { display: none; }

/* ===== FAQ ===== */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 20px 24px; font-weight: 600; font-size: 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { width: 20px; height: 20px; flex-shrink: 0; transition: transform 0.2s ease; color: var(--accent); }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item .faq-body { padding: 0 24px 20px; margin: 0; color: var(--text-muted); }

/* ===== Registration ===== */
.register-panel {
  max-width: 720px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow);
}
/* .register-panel's own margin:0 auto stops it stretching to its grid column
   (auto margins win over the grid's default stretch), so inside the admin
   Top Pages/Top Clicks side-by-side grid it was sizing to its nowrap content
   instead of the column - forcing that panel (and the grid track) wider than
   the viewport on narrow screens. */
#adminDashboard .about-grid > .register-panel { width: 100%; }
@media (max-width: 560px) { .register-panel { padding: 26px 20px; } }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 640px) { .form-grid.two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 0.88rem; font-weight: 600; }
.field .optional-tag { font-weight: 400; color: var(--text-muted); font-size: 0.8rem; }
.field input, .field select, .field textarea {
  padding: 13px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elevated);
  color: var(--text); font-size: 0.95rem; font-family: inherit; width: 100%;
}
.field textarea { resize: vertical; min-height: 90px; }
.field input[type="file"] { padding: 10px 14px; font-size: 0.86rem; color: var(--text-muted); }
.field input[type="file"]::file-selector-button {
  padding: 8px 14px; margin-right: 12px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-weight: 600; font-size: 0.84rem; cursor: pointer;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.field-error { font-size: 0.8rem; color: #ff8a8a; min-height: 1.1em; }
.field.has-error input, .field.has-error select { border-color: #ff8a8a; }
.register-success {
  display: none; text-align: center; padding: 20px 0;
}
.register-success.show { display: block; }
.register-success .check {
  width: 56px; height: 56px; border-radius: 50%; background: color-mix(in srgb, var(--success) 18%, transparent);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px;
}
.register-success .check svg { width: 26px; height: 26px; color: var(--success); }
#registerForm.hide, #assignmentForm.hide { display: none; }
.privacy-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 4px; }

/* ===== Accountability partner carousel ===== */
.partner-card {
  scroll-snap-align: start; flex: 0 0 min(300px, 82vw); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 24px; display: flex; flex-direction: column; gap: 10px;
}
.partner-card-top { display: flex; align-items: center; gap: 12px; }
.partner-card .avatar-dot { flex-shrink: 0; }
.partner-card-name { font-weight: 700; font-size: 0.98rem; }
.partner-work-link {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--surface-2); color: var(--accent); flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.partner-work-link:hover { background: var(--accent); color: #fff; }
.partner-work-link svg { width: 12px; height: 12px; }
.partner-card-meta { font-size: 0.8rem; color: var(--text-muted); }
.partner-card-notes { font-size: 0.88rem; color: var(--text-muted); flex-grow: 1; }
.partner-request-form { display: none; flex-direction: column; gap: 8px; margin-top: 8px; }
.partner-request-form.open { display: flex; }
.partner-request-form input, .partner-request-form textarea {
  padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elevated);
  color: var(--text); font-size: 0.84rem; font-family: inherit;
}
.partner-request-form textarea { min-height: 56px; resize: vertical; }
.partner-request-status { font-size: 0.8rem; margin-top: 4px; }
.partner-status-lookup { display: flex; gap: 10px; flex-wrap: wrap; }
.partner-status-lookup input {
  flex: 1; min-width: 180px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text); font-size: 0.92rem; font-family: inherit;
}
.partner-status-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-top: 12px; font-size: 0.88rem;
}
.partner-status-item strong { display: block; margin-bottom: 4px; }
.partner-status-badge {
  display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: 999px; margin-left: 8px;
}
.partner-status-badge.pending { background: color-mix(in srgb, var(--accent-2) 18%, transparent); color: var(--accent-2); }
.partner-status-badge.accepted { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.partner-status-badge.declined { background: color-mix(in srgb, var(--text-muted) 18%, transparent); color: var(--text-muted); }
.partner-contact-reveal { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 0.85rem; }
/* Study partners (under Check My Connections) */
.study-partners { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); text-align: left; }
.study-partners h4 { font-size: 1rem; margin-bottom: 12px; }
.study-partners h5 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 8px; }
.study-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; margin-bottom: 16px; }
.study-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 12px; }
.study-head strong { font-size: 1.05rem; }
.study-head span { font-size: 0.82rem; color: var(--text-muted); }
.study-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.study-actions .btn { white-space: normal; }
.study-wa { background: #25d366; color: #06290f; box-shadow: none; }
.study-wa:hover { box-shadow: 0 10px 24px -12px #25d366; }
.study-block { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border); }
.study-when { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.study-when span, .study-muted { font-size: 0.82rem; color: var(--text-muted); }
.study-session-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.study-session-form select, .study-session-form input, .study-contact-fields input {
  min-width: 0; flex: 1 1 130px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text); font: inherit; font-size: 16px;
}
.study-change { margin-top: 10px; font-size: 0.85rem; }
.study-change summary { cursor: pointer; color: var(--accent-2); }
.study-done { display: inline-block; font-size: 0.85rem; font-weight: 600; color: var(--success); }
.study-streak p { margin-bottom: 8px; font-size: 0.9rem; }
.study-msg { font-size: 0.85rem; margin-top: 8px; min-height: 0; }
.study-msg:empty { display: none; }
.study-safety { display: flex; gap: 16px; margin-top: 12px; }
.study-masked { font-size: 0.88rem; color: var(--text-muted); letter-spacing: 0.02em; }
.study-privacy {
  font-size: 0.85rem; line-height: 1.5; color: var(--text-muted); padding: 12px 14px; margin-bottom: 14px;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent-2) 35%, var(--border));
  background: color-mix(in srgb, var(--accent-2) 8%, transparent);
}
.study-privacy strong { color: var(--text); }
.study-safety button { background: none; border: 0; padding: 0; font: inherit; font-size: 0.8rem; color: var(--text-muted); text-decoration: underline; cursor: pointer; }
.study-safety button:hover { color: var(--text); }
.study-contact-form { margin-top: 8px; }
.study-contact-fields { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* ===== Community CTA ===== */
/* A deep night-blue panel with soft WhatsApp-green and Telegram-blue glows, a
   faint dot grid, a slow aurora and floating community icons. It stays dark in
   light mode too, so the white text always reads well. */
.community-panel {
  position: relative; overflow: hidden; isolation: isolate; text-align: center; color: #fff;
  border-radius: var(--radius-lg); padding: 64px 40px 52px;
  background:
    radial-gradient(520px 300px at 6% -12%, rgba(37, 211, 102, 0.30), transparent 65%),
    radial-gradient(560px 340px at 100% 112%, rgba(42, 171, 238, 0.42), transparent 65%),
    radial-gradient(820px 420px at 50% 135%, rgba(124, 108, 255, 0.28), transparent 70%),
    linear-gradient(160deg, #0c2257 0%, #0a1638 52%, #060d24 100%);
  border: 1px solid rgba(120, 180, 255, 0.28);
  box-shadow: 0 40px 90px -40px rgba(31, 123, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.community-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.5px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 45%, #000 15%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 62% at 50% 45%, #000 15%, transparent 75%);
}
.community-panel::after {
  content: ""; position: absolute; inset: -45%; z-index: -2; pointer-events: none;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg 60deg, rgba(79, 209, 255, 0.11) 95deg, transparent 140deg,
    transparent 200deg, rgba(37, 211, 102, 0.08) 235deg, transparent 280deg);
  animation: cp-spin 28s linear infinite;
}
@keyframes cp-spin { to { transform: rotate(360deg); } }
.cp-deco span {
  position: absolute; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; font-size: 1.55rem;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(6px);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.55); animation: cp-float 7s ease-in-out infinite;
}
.cp-b1 { top: 13%; left: 6%; }
.cp-b2 { top: 17%; right: 7%; animation-delay: -2.2s !important; }
.cp-b3 { bottom: 15%; left: 9%; animation-delay: -4.1s !important; }
.cp-b4 { bottom: 21%; right: 9%; animation-delay: -1.3s !important; }
@keyframes cp-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
.cp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; margin-bottom: 16px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: #bfe6ff; background: rgba(79, 209, 255, 0.12); border: 1px solid rgba(79, 209, 255, 0.35);
}
.cp-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.25); }
.community-panel h2 {
  margin: 0 0 12px; font-size: clamp(1.8rem, 4vw, 2.6rem);
  background: linear-gradient(90deg, #ffffff 30%, #9fe3ff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.community-panel p { color: rgba(226, 236, 255, 0.88); max-width: 560px; margin-left: auto; margin-right: auto; }
.cp-stats { list-style: none; padding: 0; margin: 22px auto 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.cp-stats li { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.86rem; color: rgba(226, 236, 255, 0.92); }
.cp-stats strong { color: #fff; margin-right: 3px; }
.cp-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 28px; }
.community-panel .cp-btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: #fff; transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease; }
.cp-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.community-panel .cp-wa { background: linear-gradient(135deg, #15803d, #0f6e4f); border: 1px solid rgba(37, 211, 102, 0.55); box-shadow: 0 14px 32px -12px rgba(37, 211, 102, 0.7); }
.community-panel .cp-tg { background: rgba(42, 171, 238, 0.16); border: 1px solid rgba(42, 171, 238, 0.7); }
.community-panel .cp-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.community-panel .cp-tg:hover { background: rgba(42, 171, 238, 0.3); }
.community-panel .wa-qr { padding: 14px 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(6px); }
@media (max-width: 900px) { .cp-deco { display: none; } }
@media (max-width: 560px) { .community-panel { padding: 44px 20px 36px; } .community-panel .cp-btn { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .community-panel::after, .cp-deco span { animation: none; } }

/* ===== Community hub (homepage #community) =====
   Two columns: the intro and member counts on the left, one row per channel on the
   right (brand-coloured icon, what it is for, QR code on computers, join button).
   Follows the light/dark theme; each row sets its colours with --c (icon) and --cb
   (button, darker so white text reads). QR codes + the enlarge view: social-qr.js. */
.community-hub {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 48px; align-items: center;
  padding: 56px; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow);
  background:
    radial-gradient(560px 360px at -6% -10%, color-mix(in srgb, #25d366 16%, transparent), transparent 70%),
    radial-gradient(640px 420px at 106% 108%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%),
    radial-gradient(420px 300px at 60% -20%, color-mix(in srgb, #2aabee 12%, transparent), transparent 70%),
    var(--surface);
}
.community-hub::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--text) 13%, transparent) 1px, transparent 1.5px); background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 0% 100%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 55% 70% at 0% 100%, #000 10%, transparent 70%);
}
.cm-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text);
  background: color-mix(in srgb, #25d366 12%, var(--surface)); border: 1px solid color-mix(in srgb, #25d366 40%, var(--border));
}
.cm-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #25d366; animation: cm-pulse 2.4s ease-out infinite; }
@keyframes cm-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(37, 211, 102, 0); } }
.community-hub h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.08; margin: 18px 0 14px; letter-spacing: -0.01em; }
.cm-grad { background: linear-gradient(90deg, #1fbf5b, var(--accent-2) 55%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cm-intro > p { color: var(--text-muted); font-size: 1.05rem; line-height: 1.6; margin: 0; max-width: 470px; }
.cm-stats { list-style: none; margin: 28px 0 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.cm-stats li { padding: 0 14px; border-left: 1px solid var(--border); }
.cm-stats li:first-child { padding-left: 0; border-left: 0; }
.cm-stats strong { display: block; font-family: var(--font-head); font-size: 1.6rem; line-height: 1.15; color: var(--text); }
.cm-stats span { display: block; font-size: 0.84rem; line-height: 1.35; color: var(--text-muted); }
.cm-intro [data-copy-links] { margin-top: 22px; }
.cm-channels { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.cm-ch {
  --c: #1f7bff; --cb: #1466d0;
  position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto 122px; align-items: center; gap: 14px;
  padding: 12px 14px 12px 16px; border-radius: 16px; overflow: hidden;
  background: color-mix(in srgb, var(--bg-elevated) 82%, transparent); border: 1px solid var(--border);
  backdrop-filter: blur(6px); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.cm-ch::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); }
.cm-ch:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 55%, var(--border)); box-shadow: 0 16px 34px -20px color-mix(in srgb, var(--c) 80%, transparent); }
.cm-wa { --c: #25d366; --cb: #128c4a; }
.cm-tg { --c: #2aabee; --cb: #1677be; }
.cm-fbg, .cm-fbp { --c: #1877f2; --cb: #1462cc; }
.cm-yt { --c: #ff2d3f; --cb: #d0102a; }
.cm-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: #fff; background: linear-gradient(145deg, var(--c), var(--cb)); box-shadow: 0 8px 18px -8px var(--c); }
.cm-ic svg { width: 24px; height: 24px; }
.cm-txt { min-width: 0; }
.cm-name { display: block; font-size: 0.98rem; color: var(--text); }
.cm-sub { display: block; font-size: 0.83rem; color: var(--text-muted); line-height: 1.35; margin-top: 2px; }
.cm-qr { display: block; width: 80px; height: 80px; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: #fff; cursor: zoom-in; transition: transform 0.2s ease; }
.cm-qr[hidden] { display: none; }
.cm-qr svg { display: block; width: 100%; height: 100%; }
.cm-qr:hover { transform: scale(1.06); }
.cm-qr:focus-visible, .cm-join:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.cm-join {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 15px; border-radius: 999px; white-space: nowrap;
  font-weight: 700; font-size: 0.88rem; color: #fff; text-decoration: none; background: var(--cb);
  transition: filter 0.2s ease, gap 0.2s ease;
}
.cm-join:hover { filter: brightness(1.1); gap: 9px; color: #fff; }
.cm-arrow { width: 15px; height: 15px; }
.cm-hint { margin: 14px 0 0; font-size: 0.84rem; color: var(--text-muted); text-align: center; }
/* The QR hint stays on one line: it borrows the space beside its column, and is a touch smaller on 1024-1279px screens. */
@media (min-width: 1024px) { .cm-hint { white-space: nowrap; margin-inline: -40px; } }
@media (min-width: 1024px) and (max-width: 1279px) { .cm-hint { font-size: 0.8rem; } }
@media (max-width: 899px) { .cm-qr, .cm-hint { display: none; } .cm-ch { grid-template-columns: 46px minmax(0, 1fr) auto; } }
@media (max-width: 980px) {
  .community-hub { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 44px 36px; }
  .cm-intro { text-align: center; }
  .cm-intro > p { margin: 0 auto; }
  .cm-stats li { text-align: center; }
}
@media (max-width: 560px) {
  .community-hub { padding: 34px 16px 22px; gap: 26px; }
  .cm-stats strong { font-size: 1.25rem; }
  .cm-stats li { padding: 0 6px; }
  .cm-ch { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 11px; padding: 11px 10px 11px 13px; }
  .cm-ic { width: 40px; height: 40px; border-radius: 11px; }
  .cm-ic svg { width: 21px; height: 21px; }
  .cm-sub { font-size: 0.78rem; }
  .cm-join { padding: 8px 12px; font-size: 0.82rem; }
  .cm-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cm-eyebrow::before { animation: none; } .cm-ch, .cm-qr { transition: none; } }
/* "Scan to join" enlarge view (social-qr.js) */
.sq-overlay { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(3, 8, 24, 0.86); backdrop-filter: blur(6px); }
.sq-big { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px; border-radius: 22px; background: #0b1636; border: 1px solid rgba(120, 180, 255, 0.3); color: #fff; text-align: center; max-width: 95vw; }
.sq-big h3 { margin: 0; font-size: 1.3rem; display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.sq-big h3 .cm-ic { width: 36px; height: 36px; border-radius: 10px; }
.sq-big h3 .cm-ic svg { width: 20px; height: 20px; }
.sq-qrbig { width: min(62vh, 80vw, 520px); aspect-ratio: 1; padding: 12px; border-radius: 16px; background: #fff; }
.sq-qrbig svg { display: block; width: 100%; height: 100%; }
.sq-big p { margin: 0; color: rgba(226, 236, 255, 0.85); }
.sq-close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 1.5rem; cursor: pointer; }

/* ===== Free Tools directory ===== */
.tools-controls { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 12px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.filter-chip {
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); font-size: 0.88rem; font-weight: 600; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.filter-chip:hover { transform: translateY(-1px); border-color: var(--accent); }
.filter-chip[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-color: transparent;
}
.tools-search { width: 100%; max-width: 360px; }
.tools-search input {
  width: 100%; padding: 12px 18px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text); font-size: 0.92rem; font-family: inherit;
}
.tools-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.tools-count { text-align: center; font-size: 0.85rem; color: var(--text-muted); margin: 0 0 40px; }
.tool-category { margin-bottom: 56px; }
.tool-category:last-child { margin-bottom: 0; }
.tool-category.is-hidden { display: none; }
.tool-category-head { margin-bottom: 22px; }
.tool-category-head h3 { font-size: 1.3rem; margin-bottom: 4px; }
.tool-category-head p { margin: 0; font-size: 0.9rem; }
.tool-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 640px) { .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tool-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 24px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.tool-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.tool-card.is-hidden { display: none; }
.tool-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tool-name { font-size: 1.05rem; font-weight: 700; font-family: var(--font-head); }
.tool-free-badge {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--success);
  background: color-mix(in srgb, var(--success) 15%, transparent); padding: 4px 10px; border-radius: 999px;
  flex-shrink: 0; white-space: nowrap;
}
.tool-task { font-size: 0.9rem; color: var(--text-muted); margin: 0; flex-grow: 1; }
.tool-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 600; color: var(--accent); text-decoration: none; }
.tool-link:hover { text-decoration: underline; }
.tool-link svg { width: 14px; height: 14px; }
.tools-empty { display: none; text-align: center; padding: 40px 0; color: var(--text-muted); }
.tools-empty.show { display: block; }

/* ===== Footer ===== */
.footer { position: relative; border-top: 1px solid var(--border); padding: 0 0 40px; background: var(--bg-elevated); overflow: hidden; }
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
}
.footer::after {
  content: ""; position: absolute; top: -60px; left: 50%; transform: translateX(-50%); z-index: 0;
  width: min(680px, 90vw); height: 280px;
  background: radial-gradient(ellipse at center, var(--accent) 0%, transparent 72%);
  opacity: 0.08; pointer-events: none;
}
.footer > .container { position: relative; z-index: 1; }
.footer-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  padding: 36px 0 30px; border-bottom: 1px solid var(--border); margin-bottom: 36px;
}
.footer-top .logo { font-size: 1.3rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
/* Quick Links is long (20+ links), so it gets the widest column and its links flow
   into 2-3 short columns instead of one very tall list. */
/* Minimums fit two columns of the longest link with its "Soon" tag (~205px each), and the email. */
@media (min-width: 760px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(432px, 1.5fr); gap: 32px 40px; } }
@media (min-width: 1100px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(432px, 1.9fr) minmax(0, 0.9fr) minmax(244px, 1fr); gap: 32px; } }
@media (max-width: 759px) {
  .footer-grid > div:not(:first-child) { border-top: 1px solid var(--border); padding-top: 24px; }
}
.footer-brand p { max-width: 372px; line-height: 1.65; } /* 372px: the footer intro sits on 2 lines, not 3 */
.footer-brand p strong { color: var(--text); font-weight: 700; }
.footer-live-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border); font-size: 0.78rem; font-weight: 600;
  color: var(--text-muted);
}
.footer-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
  .footer-live-dot { animation: badgepulse 2s ease-in-out infinite; }
}
.footer h4 {
  font-size: 0.78rem; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent);
}
.footer ul { display: flex; flex-direction: column; gap: 13px; }
.footer ul.footer-links-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 20px; }
/* Locked links carry a "Soon" tag inside the link; keep each link on one line. */
@media (min-width: 760px) { .footer ul.footer-links-cols a { white-space: nowrap; } }
@media (max-width: 759px) { .footer ul.footer-links-cols a { flex-wrap: wrap; row-gap: 4px; } }
.footer a { text-decoration: none; color: var(--text-muted); font-size: 0.92rem; transition: color 0.15s ease; }
.footer a:hover { color: var(--text); }
.footer-links a { display: inline-flex; align-items: center; gap: 6px; transition: color 0.15s ease, transform 0.15s ease; }
.footer-links a::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--accent-2); flex-shrink: 0;
  opacity: 0; transform: scale(0); transition: opacity 0.15s ease, transform 0.15s ease;
}
.footer-links a:hover { color: var(--text); transform: translateX(3px); }
.footer-links a:hover::before { opacity: 1; transform: scale(1); }
.social-row { display: flex; gap: 10px; margin-top: 18px; }
.social-row a {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); display: flex;
  align-items: center; justify-content: center; color: var(--text-muted); background: var(--surface);
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.social-row a:hover {
  color: #fff; border-color: transparent; transform: translateY(-2px);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent) 60%, transparent);
}
.social-row svg { width: 18px; height: 18px; }
.footer-stat-list { gap: 14px; }
.footer-stat {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border); transition: border-color 0.15s ease, transform 0.15s ease;
}
.footer-stat:hover { border-color: var(--accent); transform: translateX(2px); }
.footer-stat svg { width: 18px; height: 18px; color: var(--accent-2); flex-shrink: 0; }
.footer-stat span { display: flex; flex-direction: column; font-size: 0.8rem; color: var(--text-muted); }
.footer-stat strong { font-family: var(--font-head); font-size: 0.98rem; color: var(--text); font-weight: 700; }
.footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover, .footer-legal a:focus-visible { color: var(--text); }
.footer-bottom {
  border-top: 1px solid var(--border); margin-top: 36px; padding-top: 20px; display: flex; flex-wrap: wrap;
  gap: 12px; justify-content: space-between; font-size: 0.82rem; color: var(--text-muted);
}
@media (max-width: 560px) { .footer-bottom { justify-content: center; text-align: center; } }

/* ===== Chat widget (Ask Dr. Daniel) ===== */
.chat-launcher {
  position: fixed; bottom: 24px; right: 24px; z-index: 900; width: 60px; height: 60px; border-radius: 50%;
  border: none; cursor: pointer; background: var(--surface); box-shadow: var(--shadow); padding: 0;
}
.chat-launcher-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); }
.chat-launcher-dot {
  position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--success); border: 2px solid var(--bg);
}
.chat-panel {
  position: fixed; z-index: 950; bottom: 96px; right: 24px; width: 400px; height: 520px;
  min-width: 300px; min-height: 360px;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(0.98); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.chat-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.chat-panel.dragging, .chat-panel.resizing { transition: none; user-select: none; }
/* Teaser bubble beside the launcher (replaces auto-opening the panel) */
.chat-teaser {
  position: fixed; z-index: 899; right: 96px; bottom: 30px; max-width: min(270px, calc(100vw - 120px));
  display: flex; align-items: flex-start; gap: 4px; padding: 4px 4px 4px 0;
  background: var(--bg-elevated); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 16px 16px 4px 16px; box-shadow: var(--shadow);
  opacity: 0; transform: translateX(10px) scale(0.96); transform-origin: bottom right; pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.chat-teaser.show { opacity: 1; transform: none; pointer-events: auto; }
.chat-teaser-body {
  flex: 1; min-width: 0; text-align: left; background: none; border: 0; cursor: pointer; color: var(--text);
  padding: 8px 4px 8px 14px; font: inherit; line-height: 1.35;
}
.chat-teaser-body strong { display: block; font-size: 0.86rem; }
.chat-teaser-body span { display: block; font-size: 0.78rem; color: var(--accent-2); margin-top: 2px; }
.chat-teaser-close {
  flex-shrink: 0; width: 26px; height: 26px; border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--text-muted); display: flex; align-items: center; justify-content: center;
}
.chat-teaser-close:hover { background: var(--surface); color: var(--text); }
.chat-teaser-close svg { width: 13px; height: 13px; }
.chat-header {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
  cursor: move; touch-action: none; user-select: none;
}
.chat-header-avatar {
  width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.6); object-fit: cover;
  -webkit-user-drag: none; user-drag: none;
}
.chat-header-titles { flex-grow: 1; min-width: 0; }
.chat-header-title { font-weight: 700; font-size: 0.95rem; }
.chat-header-sub { font-size: 0.76rem; opacity: 0.85; white-space: nowrap; } /* Classes · Schedule · Assignments on one line */
.chat-close { background: transparent; border: none; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 4px 8px; }
/* Clear chat (trash) in the header, file upload (paperclip) in the message box. */
.chat-clear {
  flex-shrink: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 8px; color: #fff; cursor: pointer; opacity: 0.9;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.chat-clear:hover, .chat-clear:focus-visible { background: rgba(255, 255, 255, 0.18); opacity: 1; }
.chat-clear svg { width: 18px; height: 18px; }
.chat-input .chat-attach {
  background: var(--surface); color: var(--text-muted); border: 1px solid var(--border);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.chat-input .chat-attach:hover, .chat-input .chat-attach:focus-visible { color: var(--text); border-color: var(--accent); }
.chat-attach-preview { display: flex; align-items: center; gap: 10px; margin: 0 14px; padding: 8px 10px; border: 1px solid var(--border); border-bottom: none; border-radius: 10px 10px 0 0; background: var(--surface); }
.chat-attach-preview[hidden] { display: none; }
.chat-attach-preview img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.chat-attach-icon { font-size: 1.3rem; flex-shrink: 0; }
.chat-attach-name { flex: 1; min-width: 0; font-size: 0.82rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-attach-remove { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.chat-attach-remove:hover { color: var(--text); border-color: var(--accent); }
.chat-bubble-image { display: block; max-width: 200px; max-height: 200px; border-radius: 10px; margin-bottom: 6px; object-fit: cover; }
.chat-bubble-file { display: block; font-weight: 600; margin-bottom: 4px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.chat-row { display: flex; gap: 8px; max-width: 88%; }
.chat-row.assistant { align-self: flex-start; }
.chat-row.user { align-self: flex-end; flex-direction: row-reverse; }
.chat-avatar-mini { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.chat-stack { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.chat-row.user .chat-stack { align-items: flex-end; }
.chat-time { font-size: 0.68rem; color: var(--text-muted); padding: 0 4px; font-variant-numeric: tabular-nums; }
.chat-day { align-self: center; margin: 6px 0 2px; padding: 3px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); }
.chat-bubble { padding: 10px 14px; border-radius: 14px; font-size: 0.88rem; line-height: 1.5; white-space: pre-wrap; min-width: 0; overflow-wrap: anywhere; }
/* long links (the Teams join link) used to push the bubble off-screen */
.chat-bubble a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.chat-row.user .chat-bubble a { color: inherit; }
.chat-row.assistant .chat-bubble { background: var(--surface); border: 1px solid var(--border); border-top-left-radius: 4px; color: var(--text); }
.chat-row.user .chat-bubble { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-top-right-radius: 4px; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.chat-chip { font-size: 0.78rem; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; }
.chat-chip:hover { border-color: var(--accent); color: var(--text); }
.chat-input { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); }
.chat-input textarea {
  flex: 1; resize: none; max-height: 90px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); padding: 10px 12px; font-family: inherit; font-size: 0.88rem;
}
.chat-input textarea:focus { outline: none; border-color: var(--accent); }
.chat-input button {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.chat-input button:disabled { opacity: 0.5; cursor: default; }
.chat-input button svg { width: 18px; height: 18px; }
.chat-typing { display: flex; gap: 4px; padding: 4px 0; }
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .chat-typing span { animation: chatdot 1.2s ease-in-out infinite; }
  .chat-typing span:nth-child(2) { animation-delay: 0.15s; }
  .chat-typing span:nth-child(3) { animation-delay: 0.3s; }
}
@keyframes chatdot { 0%,60%,100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-resize-handle {
  position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; z-index: 5;
  cursor: nwse-resize; touch-action: none;
}
.chat-resize-handle::after {
  content: ""; position: absolute; right: 6px; bottom: 6px; width: 12px; height: 12px;
  border-radius: 2px; opacity: 0.55; pointer-events: none;
  background: repeating-linear-gradient(135deg, var(--text-muted) 0 2px, transparent 2px 5px);
}
.chat-resize-handle:hover::after { opacity: 1; }
@media (max-width: 480px) {
  .chat-launcher { bottom: 16px; right: 16px; }
  .chat-teaser { right: 84px; bottom: 20px; max-width: calc(100vw - 100px); }
}
/* Phones (portrait, or landscape where height is short): the chat is a bottom
   sheet sized to the visible viewport. chat-widget.js keeps --chat-vv-h and
   --chat-vv-top in sync with window.visualViewport, which shrinks when the
   keyboard opens, so the header and message box always stay on screen.
   Keep this query in sync with sheetMQ in chat-widget.js. */
@media (max-width: 640px), (max-height: 520px) {
  .chat-panel {
    --chat-gap: max(10px, env(safe-area-inset-top));
    left: 0; right: 0; bottom: auto; width: auto; min-width: 0; min-height: 0;
    top: calc(var(--chat-vv-top, 0px) + var(--chat-gap));
    height: calc(100vh - var(--chat-gap));
    height: calc(var(--chat-vv-h, 100dvh) - var(--chat-gap));
    border-radius: 20px 20px 0 0; border-bottom: 0;
    transform: translateY(24px);
    overscroll-behavior: contain;
  }
  .chat-panel.open { transform: none; }
  .chat-header { cursor: default; touch-action: auto; padding: 12px 8px 12px 16px; }
  .chat-close { min-width: 44px; min-height: 44px; font-size: 1.6rem; }
  .chat-clear { width: 44px; height: 44px; }
  .chat-resize-handle { display: none; }
  .chat-messages { overscroll-behavior: contain; padding: 14px; }
  .chat-row { max-width: 92%; }
  .chat-bubble { font-size: 0.94rem; }
  /* suggested questions: one swipeable row instead of eating message space */
  .chat-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 14px 10px; }
  .chat-chips::-webkit-scrollbar { display: none; }
  .chat-chip { flex-shrink: 0; white-space: nowrap; font-size: 0.84rem; padding: 8px 14px; }
  .chat-input { padding: 10px 12px max(10px, env(safe-area-inset-bottom)); align-items: flex-end; }
  /* 16px or iOS zooms the whole page the moment the box is tapped */
  .chat-input textarea { font-size: 16px; }
  .chat-input button { width: 44px; height: 44px; }
  /* while the sheet is open: no launcher/teaser on top of it, no page scrolling behind it */
  html.chat-sheet-open, html.chat-sheet-open body { overflow: hidden; }
  html.chat-sheet-open .chat-launcher, html.chat-sheet-open .chat-teaser { display: none; }
}
/* Landscape phones: every pixel of height counts */
@media (max-height: 520px) {
  .chat-panel { --chat-gap: 0px; border-radius: 0; border-left: 0; border-right: 0; }
  .chat-header { padding-top: 6px; padding-bottom: 6px; }
  .chat-header-avatar { width: 30px; height: 30px; }
  .chat-header-sub { display: none; }
  .chat-messages { padding: 10px 14px; gap: 8px; }
  /* with the keyboard up there is barely any height left: drop the suggestions while typing */
  .chat-panel:focus-within .chat-chips { display: none; }
}

/* ===== Data saver (html.lite) ===== */
html.lite *, html.lite *::before, html.lite *::after { animation: none !important; transition: none !important; }
html.lite .hero-grain, html.lite .map-sweep { display: none !important; }
.lite-toggle { background: none; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font: inherit; font-size: 0.8rem; padding: 4px 12px; cursor: pointer; }
.lite-toggle:hover { color: var(--text); border-color: var(--accent); }

/* ===== Class alert (push) button ===== */
.push-optin { margin-top: 16px; }
.push-btn { white-space: normal; }
.push-note { font-size: 0.82rem; color: var(--text-muted); margin: 8px 0 0; }

/* ===== Questions board ===== */
.qb-wrap { max-width: 820px; margin: 0 auto; }
.qb-form { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 22px; }
.qb-form input, .qb-form textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.qb-form textarea { min-height: 80px; resize: vertical; }
.qb-item { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; margin-bottom: 10px; }
.qb-item.answered { opacity: 0.7; }
.qb-vote { flex-shrink: 0; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.qb-vote svg { width: 18px; height: 18px; color: var(--accent-2); }
.qb-vote:disabled { cursor: default; border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.qb-body p { margin: 0 0 4px; color: var(--text); overflow-wrap: anywhere; }
.qb-body span, .qb-empty { font-size: 0.82rem; color: var(--text-muted); }

/* ===== Badges and Top Inviters (portal) ===== */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.badge-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; text-align: center; opacity: 0.55; }
.badge-card.earned { opacity: 1; border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: 0 10px 30px -18px var(--accent); }
.badge-medal { width: 46px; height: 46px; margin: 0 auto 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-muted); }
.badge-card.earned .badge-medal { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.badge-medal svg { width: 24px; height: 24px; }
.badge-card strong { display: block; font-family: var(--font-head); }
.badge-card p { font-size: 0.8rem; color: var(--text-muted); margin: 4px 0 6px; }
.badge-card small { font-size: 0.78rem; color: var(--accent-2); }
.inviters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; max-width: 820px; margin: 0 auto; }
.inviters-grid ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.inviters-grid li { display: flex; justify-content: space-between; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }

/* Right-to-left pages (/ar/): park the hidden skip link off the right edge.
   Off the left edge, an RTL page lets you scroll to it (10,000px of blank width). */
html[dir="rtl"] .skip-link:not(:focus) { left: auto; right: -9999px; }

/* Replay notes: prompts from the class and a quick quiz (shown once launched) */
.replay-notes-head { margin: 12px 0 6px !important; color: var(--text) !important; font-weight: 700; }
.replay-prompt { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; margin: 6px 0; border-radius: 8px; border: 1px dashed var(--border); background: var(--bg-elevated); }
.replay-prompt span { flex: 1; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8rem; color: var(--text); overflow-wrap: anywhere; }
.replay-copy { flex-shrink: 0; font: inherit; font-size: 0.75rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; }
.replay-quiz { margin: 8px 0; }
.replay-quiz p { margin: 0 0 6px !important; color: var(--text) !important; font-weight: 600; }
.replay-quiz button { display: block; width: 100%; text-align: left; font: inherit; font-size: 0.82rem; padding: 7px 10px; margin: 4px 0; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); cursor: pointer; }
.replay-quiz button:disabled { cursor: default; }
.replay-quiz button.is-right { border-color: var(--success); background: color-mix(in srgb, var(--success) 15%, var(--bg-elevated)); }
.replay-quiz button.is-wrong { border-color: #f43f5e; background: color-mix(in srgb, #f43f5e 12%, var(--bg-elevated)); }
.replay-quiz-score { color: var(--accent-2) !important; font-weight: 600; }

/* ===== Dark mode in the logo's colours =====
   A soft blue glow at the top of every page (like the logo's light), gold section
   labels (the tassel), and buttons in a slightly deeper blue so white text stays
   easy to read (contrast 4.7:1 or more). Light mode is unchanged. */
:root[data-theme="dark"] body {
  background: radial-gradient(1100px 560px at 50% -160px, rgba(31, 123, 255, 0.18), transparent 70%) no-repeat, var(--bg);
}
:root[data-theme="dark"] .eyebrow { color: var(--gold); }
:root[data-theme="dark"] .btn-primary { background: linear-gradient(135deg, #1565e6, #0a78c2); }

/* ===== Footer layout (tidy) =====
   Top row: about the Academy, Community, Contact. Under a divider, Quick Links run
   down in columns of 4 with equal widths. Links line up with their headings (the
   hover dot no longer takes space), and the "Soon" tags are left out of the footer
   (locked links are dimmed and still say "coming soon" when clicked). Every page. */
.footer-links a { position: relative; }
.footer-links a::before { position: absolute; left: -9px; top: 50%; margin-top: -1.5px; }
.footer .taa-link-pill { display: none; }
.footer-stat-list { gap: 10px; }
.footer-stat { padding: 10px 14px; }
@media (min-width: 760px) {
  .footer-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; align-items: start; }
  .footer-grid > div:nth-child(2) {
    grid-column: 1 / -1; order: 1; padding-top: 28px; border-top: 1px solid var(--border);
  }
  .footer-grid > div:nth-child(2) > ul {
    display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-auto-columns: minmax(0, 1fr); gap: 14px 24px;
  }
  .footer-grid > div:nth-child(2) > ul a { white-space: nowrap; }
}
@media (min-width: 760px) and (max-width: 1023px) {
  /* small tablets: six columns would be too narrow, so three even columns */
  .footer-grid > div:nth-child(2) > ul { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { column-gap: 28px; }
}
.footer-grid > div:last-child a { overflow-wrap: anywhere; }
@media (max-width: 759px) {
  .footer-grid > div:nth-child(2) > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
}

/* ===== Homepage "More From the Academy" strip (#explore): links to sections that have their own pages ===== */
.explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.explore-card {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.explore-card:hover, .explore-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 12px 28px -18px color-mix(in srgb, var(--accent) 70%, transparent); }
.explore-ic {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.explore-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.explore-tx strong { font-family: var(--font-head); font-size: 1rem; }
.explore-tx span { font-size: 0.85rem; color: var(--text-muted); }
@media (max-width: 600px) { .explore-grid { grid-template-columns: 1fr; gap: 10px; } .explore-card { padding: 13px 14px; } }
.explore-card { position: relative; }
/* "Soon" tag (added by launch.js to locked pages) sits in the corner instead of squeezing the text. */
.explore-card .taa-link-pill { position: absolute; top: 9px; right: 10px; margin: 0; }
/* Pages that were homepage sections: less gap between the page title and the content. */
.page-header + #faq, .page-header + #learning-paths, .page-header + #feature-requests { padding-top: 12px; }


/* ===== Icons =====
   Lucide line icons as inline SVG (tools/icons; icons.js for scripts). 1em square,
   text coloured, so they size with the text they sit in. */
.ti { display: inline-block; flex-shrink: 0; vertical-align: -0.14em; }
.beta-item .ti { width: 15px; height: 15px; vertical-align: -2px; margin-right: 2px; opacity: 0.95; }
.explore-ic { color: var(--accent-2); }
.cp-deco span { color: #cfe0ff; }

/* Small phones (under 375px wide): the logo, theme button, Register and menu
   button need about 41px more than a 320px screen has, which cut the menu
   button off and let the page slide sideways. Tighten the header there. */
@media (max-width: 374px) {
  .nav-inner { padding-left: 14px; padding-right: 14px; }
  .nav-actions { gap: 8px; }
  .nav-actions .btn-sm { padding-left: 12px; padding-right: 12px; }
  .nav-inner .logo-mark { width: 64px; height: 64px; }
}


/* ===== Homepage headline lockup (index.html .hero-title) =====
   Three deliberate lines: what / who / when. The type is sized from the
   column's width (container query units) so "Free AI Training" always fills
   one line, on any screen. "Every Sunday" carries the one accent: the brand
   gradient and a brush stroke that draws itself once. */
.hero-copy { container-type: inline-size; }
.hero-copy .hero-title { /* beats .hero-copy h1 above */
  font-size: clamp(2.1rem, 14.5cqi, 5.4rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.035em;
  margin: 0 0 22px; text-wrap: initial;
}
/* One-column layout (tablets): the column is wide, so cap the size. */
@media (max-width: 959px) { .hero-copy .hero-title { font-size: clamp(2.1rem, 14.5cqi, 4rem); } }
.hero-title .ht-line { display: block; white-space: nowrap; }
.hero-title .ht-line:nth-child(2) { color: color-mix(in srgb, var(--text) 82%, var(--accent-2)); }
.hero-title .ht-when {
  position: relative; width: fit-content; padding-bottom: 0.14em;
  background: linear-gradient(95deg, #3b8bff 0%, #4fd1ff 55%, #7cf2d0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ht-swash { position: absolute; left: -2%; bottom: -0.12em; width: 104%; height: 0.36em; overflow: visible; }
.ht-swash path {
  fill: none; stroke: #4fd1ff; stroke-width: 7; stroke-linecap: round;
  vector-effect: non-scaling-stroke; opacity: 0.9;
  filter: drop-shadow(0 4px 14px rgba(79, 209, 255, 0.45));
}
/* Drawn left to right once (a clip-path reveal: dash tricks break with non-scaling strokes). */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy .ht-swash { clip-path: inset(-40% 100% -40% 0); }
  .hero-copy.is-visible .ht-swash { animation: ht-draw 0.9s cubic-bezier(.6, .05, .3, 1) 0.65s forwards; }
}
@keyframes ht-draw { to { clip-path: inset(-40% -2% -40% 0); } }
[data-theme="light"] .hero-title .ht-line:nth-child(2) { color: var(--text); }
[data-theme="light"] .hero-title .ht-when { background: linear-gradient(95deg, #1f6fe5 0%, #0aa5d6 60%, #0f9f7a 100%); -webkit-background-clip: text; background-clip: text; }
[data-theme="light"] .ht-swash path { stroke: #0aa5d6; filter: none; }

/* ===== How It Works heading (index.html #how-it-works) =====
   The label becomes a small stopwatch chip (the section is about how quick it is);
   the title gets the same tight, large type as the hero, with a soft top-lit sheen. */
#how-it-works .section-head { margin-bottom: 64px; }
#how-it-works .hw-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px;
  text-transform: none; letter-spacing: 0; font-size: 0.88rem; font-weight: 600; color: var(--text);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent-2) 35%, var(--border));
  margin-bottom: 18px;
}
#how-it-works .hw-chip svg { width: 18px; height: 18px; color: var(--accent-2); }
#how-it-works .section-head h2 {
  font-size: clamp(2.4rem, 5.2vw, 3.8rem); letter-spacing: -0.035em; line-height: 1.02; margin-bottom: 16px;
  background: linear-gradient(180deg, #ffffff 30%, #a9cdfa 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="light"] #how-it-works .section-head h2 { background: linear-gradient(180deg, #0f1522 40%, #1f5fbf 100%); -webkit-background-clip: text; background-clip: text; }
#how-it-works .section-head > p { font-size: 1.12rem; max-width: 560px; }

/* Choose Your Path: the intro fits on one line on wider screens (founder request). */
/* Section intros kept on one line on larger screens (Choose Your Path, How It Works). */
@media (min-width: 900px) { #choose-your-path .section-head > p, #how-it-works .section-head > p { max-width: none; } }

/* Small phones: the four countdown boxes (Days, Hrs, Min, Sec) needed 268px
   but a 320px phone has about 224px inside the banner, which pushed the page
   sideways. Let the boxes share the width instead. */
@media (max-width: 400px) {
  .next-class-banner { padding: 24px 16px; }
  .next-class-banner > * { max-width: 100%; }
  .countdown { gap: 6px; width: 100%; }
  .countdown-unit { flex: 1 1 0; min-width: 0; padding: 8px 4px; }
}

/* AI assistant: the day label ("Today, Fri, Oct 2") stays pinned at the top
   of the chat while you scroll through that day's messages. */
.chat-day { position: sticky; top: -8px; z-index: 2; color: var(--text); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px); box-shadow: 0 6px 16px -10px rgba(0, 0, 0, 0.6); }

/* Homepage map: a student pin turns yellow while hovered or focused (the 3D
   globe does the same in map-more.js). */
.map-dot:hover, .map-dot:focus-visible {
  background: #ffd23f;
  box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.35), 0 0 22px 6px rgba(255, 210, 63, 0.75);
}
.map-dot:hover svg, .map-dot:focus-visible svg { color: #3a2a00; }
.map-dot:hover .map-dot-ring, .map-dot:focus-visible .map-dot-ring { border-color: #ffd23f; }
.map-dot-hub:hover, .map-dot-hub:focus-visible { background: #ffd23f; filter: none; box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.35), 0 0 26px 7px rgba(255, 210, 63, 0.8); }
.map-dot:hover .map-dot-tooltip, .map-dot:focus-visible .map-dot-tooltip { border-color: rgba(255, 210, 63, 0.7); color: #ffe27a; }

/* ===== No map container (founder request, 2026-10-03: "remove the map container so I see
   how it behaves"). The map, its pins, lines, labels and every control stay; only the box
   around it goes: no border, rounded corners, navy backing, shadow or glow, and the picture
   (with its night shading and dust) fades out in a soft oval, so no straight edge shows and
   the map sits straight on the hero. Pins, lines, names and controls are not faded. Globe view loses its starfield box too. Full screen is
   unchanged. To bring the container back, delete this block. ===== */
.hero-map:not(.map-fs):not(:fullscreen) .map-panel,
.hero-map.wow-sunday:not(.map-fs):not(:fullscreen) .map-panel {
  border-color: transparent; border-radius: 0; background: transparent; box-shadow: none; animation: none;
}
.hero-map:not(.map-fs):not(:fullscreen) .map-bg,
.hero-map:not(.map-fs):not(:fullscreen) .map-night,
.hero-map:not(.map-fs):not(:fullscreen) .mm-dust {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 6%, #000 15%, #000 76%, rgba(0, 0, 0, 0.45) 87%, transparent 97%),
                      radial-gradient(closest-side at 50% 50%, #000 62%, rgba(0, 0, 0, 0.55) 84%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 6%, #000 15%, #000 76%, rgba(0, 0, 0, 0.45) 87%, transparent 97%),
                      radial-gradient(closest-side at 50% 50%, #000 62%, rgba(0, 0, 0, 0.55) 84%, transparent 100%);
          mask-composite: intersect;
}
.hero-map.globe-on:not(.map-fs):not(:fullscreen) .map-panel { background: transparent; }
/* The edges of the map area fade away too, so nothing shows where the box was: the whole
   map layer (picture, lines, pins, clouds) and the globe's star field melt out on all four
   sides; the globe canvas only at its outer edge, well clear of the globe itself (the
   canvas is 1.25x the globe). The controls are outside these layers and stay sharp. */
.hero-map:not(.map-fs):not(:fullscreen) .mm-space {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 4%, #000 10%, #000 90%, rgba(0, 0, 0, 0.5) 96%, transparent 100%),
                      linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 5%, #000 12%, #000 88%, rgba(0, 0, 0, 0.5) 95%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 4%, #000 10%, #000 90%, rgba(0, 0, 0, 0.5) 96%, transparent 100%),
                      linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 5%, #000 12%, #000 88%, rgba(0, 0, 0, 0.5) 95%, transparent 100%);
          mask-composite: intersect;
}
/* Map view, like the globe: the world picture is a soft oval (its own mask above, which
   zooms with the map) over a faint blue glow like the globe's atmosphere, and everything
   (picture, lines, pins, clouds) melts out at the outer edges of the area. That outer fade
   sits on .mh-fade (map-hub.js), a wrapper that never zooms, and is a soft edge, not an
   oval: zoomed in, the map fills the space instead of looking held in a round window. */
.mh-fade { position: absolute; inset: 0; }
.hero-map:not(.map-fs):not(:fullscreen):not(.globe-on) .mh-fade {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.45) 5%, #000 13%, #000 87%, rgba(0, 0, 0, 0.45) 95%, transparent 100%),
                      linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.45) 6%, #000 15%, #000 85%, rgba(0, 0, 0, 0.45) 94%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.45) 5%, #000 13%, #000 87%, rgba(0, 0, 0, 0.45) 95%, transparent 100%),
                      linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.45) 6%, #000 15%, #000 85%, rgba(0, 0, 0, 0.45) 94%, transparent 100%);
          mask-composite: intersect;
}
.hero-map:not(.map-fs):not(:fullscreen):not(.globe-on) .map-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 52% at 50% 50%, color-mix(in srgb, var(--accent-2) 16%, transparent) 0%, color-mix(in srgb, var(--accent) 8%, transparent) 55%, transparent 100%);
}
.hero-map:not(.map-fs):not(:fullscreen) .map-globe {
  -webkit-mask-image: radial-gradient(closest-side, #000 86%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 86%, transparent 100%);
}
/* The radar sweep turns, so it gets a round edge: a circular radar in the middle of the map
   instead of a wedge cut off by the old box's straight sides. */
.hero-map:not(.map-fs):not(:fullscreen) .map-sweep {
  -webkit-mask-image: radial-gradient(closest-side, #000 22%, transparent 39%);
          mask-image: radial-gradient(closest-side, #000 22%, transparent 39%);
}