:root {
  --bg: #0e140f;            /* deep forest near-black */
  --bg-2: #161f18;          /* card surface */
  --surface: rgba(231,237,227,.045);
  --surface-2: rgba(231,237,227,.085);
  --line: rgba(231,237,227,.11);
  --text: #f7f6f1;          /* Warm Ivory */
  --text-dim: #c2cabb;      /* sage-tinted light */
  --text-faint: #828c7c;    /* muted sage */
  --accent: #c8a45d;        /* Golden Grass */
  --accent-2: #a6c3a5;      /* Soft Sage */
  --glow: color-mix(in srgb, var(--accent) 38%, transparent);
  /* EdenRise earth accents */
  --forest: #40563e;
  --olive: #5a6f50;
  --cork: #8a6e4b;
  --clay: #b98562;
  --atlantic: #4f7f89;
  --mist: #d2d8d3;
  --ivory: #f7f6f1;
  --focus: #a6c3a5;
  /* rgb channels + gradients the tenant can override (brand.js theme). Defaults are EdenRise's own palette. */
  --accent-2-rgb: 166,195,165; --bg-rgb: 15,21,16; --bg2-rgb: 26,35,27;
  --grad-text: linear-gradient(95deg, #e6cf9a 0%, #c8a45d 42%, #a6c3a5 100%);
  --orb-grad: conic-gradient(from 200deg, #c8a45d, #a6c3a5, #b98562, #c8a45d);
  --radius: 16px;
  /* centered content column — every top-level container aligns to this.
     --edge stays at the mobile gutter until the viewport exceeds --content-w,
     then grows so the column is centered on tablet/desktop/wide screens. */
  --content-w: 1200px;
  --gutter: 40px;
  --edge: max(var(--gutter), calc((100% - var(--content-w)) / 2 + var(--gutter)));
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Inter", -apple-system, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* Accessibility: visible keyboard focus everywhere (Phase 1) */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
[data-action] { cursor: pointer; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* iOS ≤15 fallback (no clip support) — touch scroll is unaffected */
  overflow-x: clip;   /* modern browsers: clips without becoming a scroll container (wheel-safe) */
}
::selection { background: var(--accent); color: #fff; }
button { font-family: var(--font-body); }

/* ---------- NAV ---------- */
nav.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; gap: 28px;
  padding: 14px max(40px, calc((100% - 1520px) / 2 + 40px));
  background: linear-gradient(rgba(14,20,15,.88), rgba(14,20,15,0));
  transition: background .35s, backdrop-filter .35s;
}
nav.topnav.scrolled {
  background: rgba(16,23,17,.78);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
.logo {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
}
.logo-mark {
  flex-shrink: 0; display: block;
  border: none; background: none; border-radius: 0;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.logo:hover .logo-mark { transform: translateY(-1px) scale(1.04); }
.er-mark { height: 38px; width: 30px; display: block; }
.logo-word { display: flex; flex-direction: column; line-height: 1; }
.logo-word .er-name {
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  letter-spacing: .22em; color: var(--ivory); padding-left: .22em;
}
.logo-word .er-sub {
  font-size: 11px; font-weight: 600; letter-spacing: .36em; text-transform: uppercase;
  color: var(--clay); margin-top: 4px; padding-left: .26em;
}
.nav-links { display: flex; gap: 4px; flex: 1; }
.nav-links a {
  color: var(--text-dim); text-decoration: none;
  font-size: 13px; font-weight: 500;
  padding: 7px 13px; border-radius: 99px;
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-links a.active { color: var(--text); background: var(--surface-2); }
.nav-right { display: flex; align-items: center; gap: 14px; position: relative; }
.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 99px; padding: 7px 14px; width: 230px;
  color: var(--text-faint); font-size: 13px; cursor: pointer;
  white-space: nowrap; overflow: hidden;
  transition: border-color .2s;
}
.search:hover { border-color: rgba(255,255,255,.25); }
.search kbd {
  margin-left: auto; font-family: var(--font-body); font-size: 11px;
  border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px;
  color: var(--text-faint);
}
.org-chip {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-dim);
  background: var(--surface); border: 1px solid var(--line);
  padding: 6px 12px; border-radius: 99px; cursor: pointer;
  transition: border-color .2s; white-space: nowrap;
}
.org-chip:hover { border-color: rgba(255,255,255,.22); }
.org-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #ff8a5c, #b98562);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; cursor: pointer;
  border: 2px solid rgba(255,255,255,.15);
  flex-shrink: 0;
}
.avatar-menu {
  position: absolute; top: 46px; right: 0; width: 220px;
  background: rgba(18,18,28,.95); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px;
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
  display: none; flex-direction: column;
}
.avatar-menu.open { display: flex; }
.avatar-menu button {
  background: none; border: none; color: var(--text-dim);
  font-size: 13px; font-weight: 500; text-align: left;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  transition: background .15s, color .15s;
}
.avatar-menu button:hover { background: var(--surface-2); color: var(--text); }
.avatar-menu .danger:hover { color: #f87171; }

/* ---------- PAGE SHELL ---------- */
#app { min-height: 100vh; }
.page { animation: pageIn .4s ease both; padding-bottom: 100px; }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.page-pad { padding: 110px var(--edge) 0; }
.page-title { font-family: var(--font-display); font-size: 42px; font-weight: 700; letter-spacing: -.02em; }
.page-sub { color: var(--text-dim); font-size: 15px; margin-top: 8px; max-width: 560px; line-height: 1.6; }

/* ---------- HERO ---------- */
.hero {
  position: relative; min-height: 88vh;
  display: flex; align-items: flex-end;
  padding: 0 var(--edge) 64px;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 90% 75% at 78% 12%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
    radial-gradient(ellipse 65% 60% at 16% 82%, rgba(90,111,80,.30), transparent 62%),
    radial-gradient(ellipse 50% 45% at 58% 55%, rgba(79,127,137,.10), transparent 60%),
    linear-gradient(180deg, #14201a 0%, #0e140f 100%);
}
.hero-grid {
  position: absolute; inset: 0; z-index: 1; opacity: .45;
  background-image:
    linear-gradient(rgba(231,237,227,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231,237,227,.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at 65% 30%, black, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 65% 30%, black, transparent 75%);
}
.hero-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: 2;
  background: linear-gradient(transparent, var(--bg));
}
.orb {
  position: absolute; border-radius: 50%; filter: blur(70px); z-index: 1;
  animation: drift 14s ease-in-out infinite alternate;
}
.orb-1 { width: 440px; height: 440px; top: 4%; right: 8%; background: color-mix(in srgb, var(--accent) 24%, transparent); }
.orb-2 { width: 320px; height: 320px; top: 38%; right: 26%; background: rgba(90,111,80,.28); animation-delay: -6s; }
@keyframes drift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(-50px, 36px) scale(1.12); }
}
.hero-content { position: relative; z-index: 3; max-width: 640px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 22px;
  padding: 7px 15px; border-radius: 99px;
  background: rgba(var(--accent-2-rgb),.08); border: 1px solid rgba(var(--accent-2-rgb),.24);
}
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); animation: pulse 2s infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-2-rgb),.5); }
  55% { box-shadow: 0 0 0 7px rgba(var(--accent-2-rgb),0); }
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(50px, 6.4vw, 92px);
  font-weight: 600; line-height: .98; letter-spacing: -.01em;
  margin-bottom: 22px;
}
.grad-text {
  font-style: italic;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-dim); margin-bottom: 16px; font-weight: 500;
}
.hero-meta .match { color: var(--accent-2); font-weight: 700; }
.hero-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); }
.badge-hd {
  border: 1px solid var(--line); border-radius: 6px;
  font-size: 11px; padding: 2px 6px; letter-spacing: .06em; color: var(--text-dim);
}
.hero p.desc {
  font-size: 15px; line-height: 1.65; color: var(--text-dim);
  margin-bottom: 30px; max-width: 540px;
}
.hero-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600;
  padding: 13px 26px; border-radius: 10px; border: none; cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .2s;
}
.btn:active { transform: scale(.97); }
.btn-primary {
  background: linear-gradient(120deg, #b6cfb0, #9bbd97);
  color: #1a2a1c;
  box-shadow: 0 8px 26px rgba(120,150,118,.30), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:hover { background: linear-gradient(120deg, #c0d6ba, #8fb18e); box-shadow: 0 10px 34px rgba(120,150,118,.5), inset 0 1px 0 rgba(255,255,255,.3); transform: translateY(-1px); }
.btn-glass {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.btn-glass:hover { background: rgba(231,237,227,.12); border-color: rgba(231,237,227,.2); }
.btn-sm { padding: 9px 18px; font-size: 13px; border-radius: 10px; }
.hero-progress {
  margin-top: 32px; display: flex; align-items: center; gap: 14px;
  font-size: 13px; color: var(--text-dim);
}
.track {
  width: 220px; height: 4px; border-radius: 99px; background: rgba(231,237,227,.12); overflow: hidden;
}
.track .fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 10px var(--glow);
}

/* hero side panel */
.hero-side {
  position: absolute; right: var(--edge); bottom: 84px; z-index: 3;
  width: 320px;
  background: rgba(16,16,26,.6);
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  padding: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  animation: floatIn 1s ease .3s both;
}
@keyframes floatIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-side h4 {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700; margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.ai-spark {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font-size: 11px; color: white; flex-shrink: 0;
}
.path-step {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 10px;
  transition: background .2s; cursor: pointer;
}
.path-step:hover { background: var(--surface); }
.step-node {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  position: relative;
}
.path-step:not(:last-child) .step-node::after {
  content: ""; position: absolute; top: 32px; left: 50%; width: 2px; height: 18px;
  background: rgba(255,255,255,.1); transform: translateX(-50%);
}
.node-done { background: rgba(var(--accent-2-rgb),.15); color: var(--accent-2); border: 1.5px solid rgba(var(--accent-2-rgb),.5); }
.node-active {
  background: var(--accent); color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 18px var(--glow);
}
.node-locked { background: var(--surface); color: var(--text-faint); border: 1.5px solid var(--line); }
.step-info { min-width: 0; }
.step-info .t { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-info .s { font-size: 11px; color: var(--text-faint); margin-top: 1px; }
.step-active .step-info .s { color: var(--accent-2); }

/* ---------- RAILS ---------- */
section.rail-section { margin-top: 52px; }
.rail-head {
  display: flex; align-items: baseline; gap: 16px;
  padding: 0 var(--edge); margin-bottom: 14px;
}
.rail-head h2 {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 600; letter-spacing: -.01em;
}
.rail-head .hint { font-size: 13px; color: var(--text-faint); font-weight: 500; }
.rail-head .see-all {
  margin-left: auto; font-size: 13px; color: var(--text-dim);
  text-decoration: none; font-weight: 500; transition: color .2s;
  background: none; border: none; cursor: pointer;
}
.rail-head .see-all:hover { color: var(--text); }
.rail-wrap { position: relative; }
.rail {
  display: flex; gap: 16px; overflow-x: auto;
  padding: 14px var(--edge) 22px;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--edge);
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(14,14,22,.85); border: 1px solid var(--line);
  color: var(--text); font-size: 15px; cursor: pointer;
  backdrop-filter: blur(10px);
  display: grid; place-items: center;
  opacity: 0; transition: opacity .25s, background .2s;
}
.rail-wrap:hover .rail-arrow { opacity: 1; }
.rail-arrow:hover { background: rgba(40,40,60,.95); }
.rail-arrow.prev { left: 14px; }
.rail-arrow.next { right: 14px; }

/* ---------- CARDS ---------- */
.card {
  position: relative; flex: 0 0 300px; scroll-snap-align: start;
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
}
.card:hover {
  transform: translateY(-6px) scale(1.025);
  border-color: rgba(231,237,227,.22);
  box-shadow: 0 22px 48px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
  z-index: 5;
}
.thumb {
  position: relative; height: 168px; overflow: hidden;
  display: flex; align-items: flex-end; padding: 16px;
}
.thumb::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 18px 18px; opacity: .35;
}
.thumb .big-icon {
  position: absolute; top: 14px; right: 14px;
  opacity: .92; color: rgba(247,246,241,.92);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.4));
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.thumb .big-icon svg { width: 44px; height: 44px; }
.card:hover .thumb .big-icon { transform: scale(1.12) rotate(-5deg); }
.thumb .chip-row { position: relative; display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 6px; color: var(--ivory);
  background: rgba(14,20,15,.5); backdrop-filter: blur(6px);
  border: 1px solid rgba(231,237,227,.16);
}
.chip.ai {
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 95%, transparent), rgba(var(--accent-2-rgb),.9));
  border-color: transparent; color: #1c2a1d;
}
.t-grad-1 { background: linear-gradient(150deg, #1f2e22 0%, #40563e 58%, #738f6d 100%); }
.t-grad-2 { background: linear-gradient(150deg, #2c2114 0%, #8a6e4b 56%, #c8a45d 100%); }
.t-grad-3 { background: linear-gradient(150deg, #2c1a12 0%, #9c5f43 56%, #b98562 100%); }
.t-grad-4 { background: linear-gradient(150deg, #2e2711 0%, #ad883d 56%, #d8b87a 100%); }
.t-grad-5 { background: linear-gradient(150deg, #122026 0%, #3f6b74 56%, #82a8af 100%); }
.t-grad-6 { background: linear-gradient(150deg, #233022 0%, #5a6f50 56%, #a1b896 100%); }
.t-grad-7 { background: linear-gradient(150deg, #16241a 0%, #3d6b4a 56%, #88b291 100%); }
.t-grad-8 { background: linear-gradient(150deg, #2a2f2a 0%, #6d706a 54%, #c4cabf 100%); }
.card-body { padding: 15px 16px 17px; }
.card-body h3 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; margin-bottom: 5px; }
.card-body .meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-faint); font-weight: 500;
}
.card-body .meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-faint); }
.card-progress {
  margin-top: 12px; height: 3.5px; background: rgba(255,255,255,.08);
  border-radius: 99px; overflow: hidden;
}
.card-progress .fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.due {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: #fbbf24;
  background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.25);
  padding: 3px 8px; border-radius: 6px; margin-top: 10px;
}
.due.ok { color: #8fb18e; background: rgba(143,177,142,.08); border-color: rgba(143,177,142,.22); }
.card-actions {
  position: absolute; top: 12px; left: 12px; display: flex; gap: 7px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .25s, transform .25s; z-index: 3;
}
.card:hover .card-actions { opacity: 1; transform: translateY(0); }
.icon-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.2);
  color: #fff; display: grid; place-items: center; font-size: 13px;
  cursor: pointer; backdrop-filter: blur(8px); transition: background .2s, border-color .2s;
}
.icon-btn:hover { background: var(--accent); border-color: var(--accent); }
.icon-btn.in-path { background: rgba(var(--accent-2-rgb),.8); border-color: transparent; }

/* ---------- AI PATH BANNER / STEPPER ---------- */
.path-banner {
  margin: 64px var(--edge) 8px;
  border-radius: 14px;
  overflow: hidden;   /* the animated .shimmer must never poke past the card */
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 60% 120% at 8% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    radial-gradient(ellipse 50% 110% at 95% 100%, rgba(var(--accent-2-rgb),.10), transparent 55%),
    var(--bg-2);
  padding: 40px 44px 46px;
  position: relative; overflow: hidden;
}
.path-banner .shimmer {
  position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.035), transparent);
  animation: shimmer 5.5s ease-in-out infinite;
}
@keyframes shimmer { 0% { left: -60%; } 60%, 100% { left: 130%; } }
.path-banner-head { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 38px; }
.path-banner-head .left { flex: 1; min-width: min(280px, 100%); }
.path-banner h2 {
  font-family: var(--font-display); font-size: 30px; font-weight: 650;
  letter-spacing: -.02em; margin-bottom: 8px;
}
.path-banner .sub { font-size: 15px; color: var(--text-dim); max-width: 520px; line-height: 1.6; }
.ai-tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #d8c79a; margin-bottom: 12px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: 5px 12px; border-radius: 99px;
}
.stepper { display: flex; align-items: flex-start; position: relative; }
.stepper .seg { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; cursor: pointer; }
.stepper .seg::before {
  content: ""; position: absolute; top: 23px; left: 50%; width: 100%; height: 2px;
  background: rgba(255,255,255,.09);
}
.stepper .seg:last-child::before { display: none; }
.stepper .seg.done::before { background: linear-gradient(90deg, rgba(var(--accent-2-rgb),.6), rgba(var(--accent-2-rgb),.25)); }
.snode {
  width: 46px; height: 46px; border-radius: 50%; z-index: 1;
  display: grid; place-items: center; font-size: 18px;
  background: #14141f; border: 1.5px solid var(--line);
  color: var(--text-faint);
  transition: transform .25s, box-shadow .25s;
}
.seg:hover .snode { transform: scale(1.1); }
.seg.done .snode { background: rgba(var(--accent-2-rgb),.13); border-color: rgba(var(--accent-2-rgb),.55); color: var(--accent-2); }
.seg.current .snode {
  background: linear-gradient(135deg, #b6cfb0, #9bbd97);
  border-color: transparent; color: #fff;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 26px var(--glow);
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 26px var(--glow); }
  50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 10%, transparent), 0 0 36px var(--glow); }
}
.seg .sl { margin-top: 13px; font-size: 13px; font-weight: 650; max-width: 130px; }
.seg .sd { margin-top: 3px; font-size: 11px; color: var(--text-faint); }
.seg.current .sd { color: #d8c79a; font-weight: 600; }
.path-banner-foot {
  margin-top: 36px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-faint);
}
.path-banner-foot .why {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 16px;
  color: var(--text-dim); line-height: 1.5; max-width: 620px;
}
.regen-thinking { display: inline-flex; align-items: center; gap: 10px; color: #d8c79a; font-size: 13px; font-weight: 600; }

/* ---------- STATS ---------- */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin: 60px var(--edge) 0;
}
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px 24px;
  transition: border-color .25s, transform .25s;
}
.stat:hover { border-color: rgba(255,255,255,.2); transform: translateY(-3px); }
.stat .num {
  font-family: var(--font-display); font-size: 30px; font-weight: 700;
  letter-spacing: -.02em;
  background: linear-gradient(120deg, #fff, #b8b8cc);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat .lbl { font-size: 13px; color: var(--text-faint); margin-top: 5px; font-weight: 500; }
.stat .delta { font-size: 11px; font-weight: 700; color: #8fb18e; margin-top: 9px; }
.stat .delta.warn { color: #fbbf24; }

/* ---------- LIBRARY ---------- */
.filter-row { display: flex; gap: 9px; flex-wrap: wrap; margin: 26px 0 6px; }
.filter-chip {
  font-size: 13px; font-weight: 600; color: var(--text-dim);
  background: var(--surface); border: 1px solid var(--line);
  padding: 8px 16px; border-radius: 99px; cursor: pointer;
  transition: all .2s;
}
.filter-chip:hover { color: var(--text); border-color: rgba(255,255,255,.25); }
.filter-chip.active {
  color: #fff; background: linear-gradient(120deg, #b6cfb0, #9bbd97);
  border-color: transparent; box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 35%, transparent);
}
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px; margin-top: 24px;
}
.grid .card { flex: none; }
.lib-search {
  margin-top: 26px; display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 13px 18px; max-width: 420px;
}
.lib-search input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-family: var(--font-body); font-size: 15px;
}
.empty-note { color: var(--text-faint); font-size: 15px; margin-top: 40px; text-align: center; }

/* ---------- COURSE DETAIL ---------- */
.course-hero {
  position: relative; padding: 130px var(--edge) 50px; overflow: hidden;
}
.course-hero .bg { position: absolute; inset: 0; opacity: .35; }
.course-hero .bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,7,11,.45) 0%, var(--bg) 96%);
}
.course-hero-inner { position: relative; display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.course-poster {
  width: 280px; height: 180px; border-radius: 14px; flex-shrink: 0;
  position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  display: grid; place-items: center; font-size: 64px;
}
.course-poster::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 18px 18px; opacity: .35;
}
.course-info { flex: 1; min-width: min(320px, 100%); }
.course-info h1 { font-family: var(--font-display); font-size: 42px; font-weight: 700; letter-spacing: -.02em; margin: 10px 0 14px; }
.course-info .desc { color: var(--text-dim); font-size: 15px; line-height: 1.7; max-width: 640px; margin-bottom: 26px; }
.module-list { margin: 14px 0 0 var(--edge); max-width: 860px; }
.module-row {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 18px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s, border-color .2s;
}
.module-row:hover { background: var(--surface); border-color: var(--line); }
.module-row .m-num {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  background: var(--surface-2); border: 1.5px solid var(--line); color: var(--text-faint);
}
.module-row.done .m-num { background: rgba(var(--accent-2-rgb),.13); border-color: rgba(var(--accent-2-rgb),.5); color: var(--accent-2); }
.module-row.current .m-num { background: var(--accent); border-color: transparent; color: #fff; box-shadow: 0 0 14px var(--glow); }
.module-row .m-title { flex: 1; font-size: 15px; font-weight: 550; }
.module-row.done .m-title { color: var(--text-dim); }
.module-row .m-dur { font-size: 13px; color: var(--text-faint); font-weight: 500; }
.module-row .m-play {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); display: grid; place-items: center;
  font-size: 13px; opacity: 0; transition: opacity .2s, background .2s;
}
.module-row:hover .m-play { opacity: 1; }
.module-row .m-play:hover { background: var(--accent); }
.review-flag {
  font-size: 11px; font-weight: 700; color: #fbbf24;
  background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.3);
  padding: 3px 8px; border-radius: 6px;
}

/* ---------- LIVE PAGE ---------- */
.live-card {
  display: flex; gap: 24px; align-items: center;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 22px; margin-top: 18px;
  transition: border-color .25s, transform .25s;
}
.live-card:hover { border-color: rgba(255,255,255,.2); transform: translateY(-2px); }
.live-thumb {
  width: 200px; height: 120px; border-radius: 10px; flex-shrink: 0;
  position: relative; display: grid; place-items: center; font-size: 42px;
  overflow: hidden;
}
.live-thumb::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 18px 18px; opacity: .35;
}
.live-badge {
  position: absolute; top: 10px; left: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  background: #ef4444; color: #fff; padding: 3px 8px; border-radius: 6px;
  animation: pulse 1.6s infinite;
}
.live-info { flex: 1; min-width: 0; }
.live-info h3 { font-size: 18px; font-weight: 650; margin-bottom: 5px; }
.live-info .host { font-size: 13px; color: var(--accent-2); font-weight: 600; margin-bottom: 8px; }
.live-info .d { font-size: 13px; color: var(--text-dim); line-height: 1.55; }
.live-when { font-size: 13px; font-weight: 700; color: var(--text-dim); white-space: nowrap; }

/* toggle */
.toggle {
  width: 44px; height: 25px; border-radius: 99px; flex-shrink: 0;
  background: rgba(255,255,255,.12); border: 1px solid var(--line);
  position: relative; cursor: pointer; transition: background .25s;
}
.toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 19px; height: 19px; border-radius: 50%; background: #fff;
  transition: transform .25s;
}
.toggle.on { background: linear-gradient(120deg, #b6cfb0, #9bbd97); }
.toggle.on::after { transform: translateX(19px); }

/* ---------- ANALYTICS ---------- */
.chart-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 26px; margin-top: 18px;
}
.chart-card h3 { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin-bottom: 22px; }
.bars { display: flex; align-items: flex-end; gap: 14px; height: 150px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.bar {
  width: 100%; max-width: 46px; border-radius: 6px 6px 6px 6px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent));
  transition: height .8s cubic-bezier(.2,.8,.2,1);
  position: relative;
}
.bar.today { background: linear-gradient(180deg, var(--accent-2), rgba(var(--accent-2-rgb),.25)); box-shadow: 0 0 18px rgba(var(--accent-2-rgb),.3); }
.bar-col .bl { font-size: 11px; color: var(--text-faint); font-weight: 600; }
.bar-col .bv { font-size: 11px; color: var(--text-dim); font-weight: 700; }
.skill-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.skill-row .sn { width: 170px; font-size: 13px; font-weight: 550; }
.skill-row .track { flex: 1; width: auto; height: 7px; }
.skill-row .sv { width: 42px; text-align: right; font-size: 13px; color: var(--text-dim); font-weight: 700; }
.cert-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 16px;
  border-radius: 10px; border: 1px solid var(--line); margin-top: 10px;
  background: var(--surface);
}
.cert-row .ci { font-size: 22px; }
.cert-row .ct { flex: 1; font-size: 13px; font-weight: 600; }
.cert-row .cd { font-size: 11px; color: var(--text-faint); }
.two-col { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }

/* ---------- PLAYER ---------- */
.player-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(4,4,8,.97);
  display: none; flex-direction: column;
  animation: pageIn .3s ease;
}
.player-overlay.open { display: flex; }
.player-top {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 28px;
}
.player-top .back {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); font-size: 15px; cursor: pointer;
}
.player-top .back:hover { background: rgba(255,255,255,.14); }
.player-top .pt { font-size: 15px; font-weight: 650; }
.player-top .ps { font-size: 13px; color: var(--text-faint); margin-top: 2px; }
.player-top .spacer { flex: 1; }
.player-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 28px; min-height: 0; }
.player-stage video {
  max-width: 100%; max-height: 100%; width: 100%;
  border-radius: 14px; background: #000;
  box-shadow: 0 40px 100px rgba(0,0,0,.7);
  outline: 1px solid rgba(255,255,255,.1);
}
.sim-stage {
  display: none; width: 100%; max-width: 1100px; aspect-ratio: 16/9; max-height: 100%;
  border-radius: 14px; position: relative; overflow: hidden;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background:
    radial-gradient(ellipse 80% 90% at 30% 10%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 60%),
    radial-gradient(ellipse 70% 80% at 75% 85%, rgba(var(--accent-2-rgb),.25), transparent 60%),
    #0b0b16;
  outline: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 40px 100px rgba(0,0,0,.7);
}
.sim-stage.on { display: flex; }
.sim-stage::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .4;
}
.sim-icon { font-size: 84px; filter: drop-shadow(0 12px 30px rgba(0,0,0,.5)); animation: drift 8s ease-in-out infinite alternate; }
.sim-title { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -.02em; text-align: center; padding: 0 30px; position: relative; }
.sim-sub { font-size: 13px; color: var(--text-dim); font-weight: 600; letter-spacing: .04em; position: relative; }
.sim-track {
  position: absolute; left: 24px; right: 24px; bottom: 22px; height: 5px;
  border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden;
}
.sim-track .fill { height: 100%; width: 0%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px var(--glow); transition: width .25s linear; }
.player-bottom { padding: 16px 28px 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mod-pills { display: flex; gap: 8px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.mod-pills::-webkit-scrollbar { display: none; }
.mod-pill {
  flex-shrink: 0; font-size: 13px; font-weight: 600;
  padding: 8px 14px; border-radius: 99px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--text-dim);
  transition: all .2s; white-space: nowrap;
}
.mod-pill:hover { color: var(--text); border-color: rgba(255,255,255,.3); }
.mod-pill.done { color: var(--accent-2); border-color: rgba(var(--accent-2-rgb),.35); }
.mod-pill.current { color: #fff; background: linear-gradient(120deg, #b6cfb0, #9bbd97); border-color: transparent; }

/* ---------- MODALS ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(4,4,8,.7); backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center;
}
.modal-backdrop.open { display: flex; }
.modal {
  width: min(560px, calc(100vw - 40px));
  background: rgba(17,17,27,.97); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 30px;
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
  animation: floatIn .35s ease both;
  max-height: 84vh; overflow-y: auto;
}
.modal h3 { font-family: var(--font-display); font-size: 22px; font-weight: 650; margin-bottom: 6px; }
.modal .m-sub { font-size: 13px; color: var(--text-dim); margin-bottom: 22px; }
.q-text { font-size: 15px; font-weight: 600; line-height: 1.5; margin-bottom: 18px; }
.q-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 15px; margin-bottom: 10px; transition: all .15s;
}
.q-opt:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.q-opt.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.q-opt.correct { border-color: rgba(143,177,142,.6); background: rgba(143,177,142,.1); }
.q-opt.wrong { border-color: rgba(248,113,113,.6); background: rgba(248,113,113,.08); }
.q-opt .radio {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid var(--text-faint);
}
.q-opt.sel .radio { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 45%, transparent 50%); }
.q-foot { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.q-progress { font-size: 13px; color: var(--text-faint); font-weight: 600; }
.score-ring {
  width: 120px; height: 120px; border-radius: 50%; margin: 6px auto 18px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 30px; font-weight: 700;
}
.q-center { text-align: center; }

/* ---------- COMMAND PALETTE ---------- */
.palette-backdrop {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(4,4,8,.6); backdrop-filter: blur(6px);
  display: none; justify-content: center; padding-top: 14vh;
}
.palette-backdrop.open { display: flex; }
.palette {
  width: min(620px, calc(100vw - 40px)); height: fit-content;
  background: rgba(17,17,27,.97); border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,.65);
  animation: floatIn .25s ease both;
}
.palette-input-row { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.palette-input-row input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-family: var(--font-body); font-size: 15px;
}
.palette-results { max-height: 380px; overflow-y: auto; padding: 10px; }
.palette-group { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); padding: 10px 12px 6px; }
.palette-item {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 12px; border-radius: 10px; cursor: pointer;
  font-size: 15px; font-weight: 500;
}
.palette-item .pi-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; flex-shrink: 0; }
.palette-item .pi-meta { font-size: 11px; color: var(--text-faint); margin-top: 1px; }
.palette-item:hover, .palette-item.hl { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.palette-empty { padding: 30px; text-align: center; color: var(--text-faint); font-size: 13px; }

/* ---------- AI DOCK ---------- */
.ai-fab {
  position: fixed; right: 28px; bottom: 28px; z-index: 200;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--orb-grad);
  border: none; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 10px 34px color-mix(in srgb, var(--accent) 50%, transparent);
  transition: transform .2s;
  animation: fabPulse 3.2s ease-in-out infinite;
}
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 10px 34px color-mix(in srgb, var(--accent) 50%, transparent); }
  50% { box-shadow: 0 10px 44px color-mix(in srgb, var(--accent) 80%, transparent); }
}
.ai-fab:hover { transform: scale(1.08); }
.ai-fab .inner {
  width: 48px; height: 48px; border-radius: 50%;
  background: #0c0c14; display: grid; place-items: center; font-size: 22px;
}
.ai-panel {
  position: fixed; right: 28px; bottom: 100px; z-index: 250;
  width: 390px; max-height: 580px;
  background: rgba(15,15,24,.9);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  backdrop-filter: blur(28px) saturate(1.4);
  -webkit-backdrop-filter: blur(28px) saturate(1.4);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; transform: translateY(16px) scale(.98);
  transition: opacity .28s, transform .28s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}
.ai-panel.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.ai-panel-head {
  display: flex; align-items: center; gap: 11px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--line);
}
.ai-panel-head .title { font-weight: 700; font-size: 15px; }
.ai-panel-head .status { font-size: 11px; color: var(--accent-2); font-weight: 600; margin-top: 1px; }
.ai-msgs { padding: 18px 20px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 180px; }
.msg { max-width: 88%; font-size: 13px; line-height: 1.55; padding: 11px 15px; border-radius: 10px; }
.msg.bot { background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 5px; align-self: flex-start; }
.msg.user {
  background: linear-gradient(120deg, #b6cfb0, #9bbd97); color: #fff;
  border-bottom-right-radius: 5px; align-self: flex-end;
}
.msg.bot b { color: #d8c79a; }
.typing { display: inline-flex; gap: 5px; padding: 14px 16px; }
.typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint);
  animation: bounce 1.2s infinite;
}
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-5px); opacity: 1; } }
.quick-row { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 20px 14px; }
.quick {
  font-size: 13px; font-weight: 600; color: var(--text-dim);
  background: var(--surface); border: 1px solid var(--line);
  padding: 7px 13px; border-radius: 99px; cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.quick:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ai-input-row {
  display: flex; gap: 10px; padding: 14px 16px 16px; border-top: 1px solid var(--line);
}
.ai-input {
  flex: 1; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 15px;
  color: var(--text); font-family: var(--font-body); font-size: 13px;
  outline: none; transition: border-color .2s;
}
.ai-input:focus { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.ai-send {
  width: 42px; border-radius: 10px; border: none; cursor: pointer;
  background: linear-gradient(120deg, #b6cfb0, #9bbd97); color: #fff; font-size: 15px;
}

/* ---------- ONBOARDING ---------- */
.onboard-overlay {
  position: fixed; inset: 0; z-index: 700;
  background:
    radial-gradient(ellipse 70% 60% at 70% 20%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 60%),
    radial-gradient(ellipse 50% 50% at 20% 85%, rgba(var(--accent-2-rgb),.12), transparent 60%),
    rgba(5,5,9,.97);
  display: none; align-items: center; justify-content: center;
}
.onboard-overlay.open { display: flex; }
.onboard-card {
  width: min(640px, calc(100vw - 36px));
  background: rgba(15,15,24,.9); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 44px 46px 40px;
  box-shadow: 0 50px 120px rgba(0,0,0,.7);
  backdrop-filter: blur(30px);
  animation: floatIn .5s ease both;
}
.onboard-progress { height: 4px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin-bottom: 34px; }
.onboard-progress .fill { height: 100%; width: 33%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .45s cubic-bezier(.2,.8,.2,1); box-shadow: 0 0 12px var(--glow); }
.ob-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 12px; }
.ob-title { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.ob-sub { color: var(--text-dim); font-size: 15px; line-height: 1.6; margin-bottom: 28px; }
.ob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ob-option {
  display: flex; align-items: center; gap: 14px;
  padding: 18px; border-radius: 10px; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--line);
  transition: all .2s; font-weight: 600; font-size: 15px;
}
.ob-option:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); transform: translateY(-2px); }
.ob-option.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.ob-option .oi { font-size: 30px; }
.ob-option .od { font-size: 11px; color: var(--text-faint); font-weight: 500; margin-top: 2px; }
.ob-foot { display: flex; align-items: center; margin-top: 30px; gap: 12px; }
.ob-skip { background: none; border: none; color: var(--text-faint); font-size: 13px; cursor: pointer; }
.ob-skip:hover { color: var(--text); }
.ob-gen { text-align: center; padding: 30px 0 10px; }
.ob-gen .orb-spin {
  width: 84px; height: 84px; margin: 0 auto 26px; border-radius: 50%;
  background: var(--orb-grad);
  animation: spin 1.6s linear infinite;
  display: grid; place-items: center;
}
.ob-gen .orb-spin::after { content: "✦"; width: 68px; height: 68px; border-radius: 50%; background: #0d0d16; display: grid; place-items: center; font-size: 30px; }
@keyframes spin { to { transform: rotate(360deg); } }
.ob-gen .gen-line { font-size: 13px; color: var(--text-dim); margin-top: 8px; min-height: 20px; }

/* ---------- ADMIN ---------- */
.admin-section { margin-top: 44px; }
.admin-section > h2 { font-family: var(--font-display); font-size: 22px; font-weight: 650; margin-bottom: 6px; }
.admin-section > .sect-sub { font-size: 13px; color: var(--text-faint); margin-bottom: 18px; }
.team-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow-x: auto; overflow-y: hidden; display: block; -webkit-overflow-scrolling: touch; }
.team-table table { width: 100%; border-collapse: collapse; }
.team-table th {
  text-align: left; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700; padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.team-table td { padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; vertical-align: middle; }
.team-table tr:last-child td { border-bottom: none; }
.team-table tr:hover td { background: rgba(255,255,255,.025); }
.member { display: flex; align-items: center; gap: 12px; font-weight: 600; white-space: nowrap; }
.member .mi {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.member .mr { font-size: 11px; color: var(--text-faint); font-weight: 500; margin-top: 1px; }
.status-chip { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.status-chip.ok { color: #8fb18e; background: rgba(143,177,142,.1); border: 1px solid rgba(143,177,142,.25); }
.status-chip.risk { color: #fbbf24; background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.3); }
.dropzone {
  border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 14px;
  padding: 36px; text-align: center; cursor: pointer;
  background: color-mix(in srgb, var(--accent) 4%, transparent); transition: all .25s; margin-bottom: 18px;
}
.dropzone:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.dropzone .dz-icon { font-size: 42px; margin-bottom: 10px; }
.dropzone .dz-t { font-weight: 650; font-size: 15px; }
.dropzone .dz-s { font-size: 13px; color: var(--text-faint); margin-top: 5px; }
.dropzone .track { width: 60%; margin: 14px auto 0; }
.content-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); margin-bottom: 9px;
}
.content-row .ci { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.content-row .ct { flex: 1; min-width: 0; }
.content-row .ct b { font-size: 13px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.content-row .ct span { font-size: 11px; color: var(--text-faint); }
.pub-chip { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; }
.pub-chip.live { color: #8fb18e; background: rgba(143,177,142,.08); border: 1px solid rgba(143,177,142,.22); }
.pub-chip.draft { color: #fbbf24; background: rgba(251,191,36,.08); border: 1px solid rgba(251,191,36,.25); }
.composer {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px; display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
}
.composer label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 7px; }
.composer .field { flex: 1; min-width: 170px; }
.composer select, .composer input {
  width: 100%; background: rgba(255,255,255,.05); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px; color: var(--text);
  font-family: var(--font-body); font-size: 13px; outline: none;
}
.composer select:focus, .composer input:focus { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.composer select option { background: #14141f; }
.assignment-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); margin-top: 9px; font-size: 13px;
}
.assignment-row .ar-x { margin-left: auto; background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 15px; }
.assignment-row .ar-x:hover { color: #f87171; }

/* ---------- NOTES DRAWER ---------- */
.notes-drawer {
  position: absolute; top: 0; right: 0; bottom: 0; width: 360px; z-index: 5;
  background: rgba(13,13,21,.97); border-left: 1px solid var(--line);
  backdrop-filter: blur(20px);
  padding: 20px 22px; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.notes-drawer.open { transform: translateX(0); }
.nd-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.nd-section-title { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); margin: 14px 0 10px; display: flex; align-items: center; gap: 8px; }
.nd-saved { font-size: 11px; color: var(--accent-2); text-transform: none; letter-spacing: 0; font-weight: 600; }
.nd-transcript { flex: 1; overflow-y: auto; min-height: 120px; }
.nd-line { display: flex; gap: 10px; padding: 7px 8px; border-radius: 6px; font-size: 13px; line-height: 1.55; color: var(--text-dim); cursor: pointer; }
.nd-line:hover { background: var(--surface-2); color: var(--text); }
.nd-line .tc { color: var(--accent-2); font-weight: 700; font-size: 11px; flex-shrink: 0; padding-top: 2px; font-variant-numeric: tabular-nums; }
.nd-notes {
  height: 130px; resize: none; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; color: var(--text);
  font-family: var(--font-body); font-size: 13px; line-height: 1.55; outline: none;
}
.nd-notes:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }

/* ---------- TUTOR SETTINGS ---------- */
.tutor-settings { display: none; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.tutor-settings.open { display: block; }
.ts-title { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.ts-note { font-size: 13px; color: var(--text-faint); line-height: 1.55; margin-bottom: 12px; }
.tutor-settings select option { background: #14141f; }

/* ---------- TOASTS ---------- */
#toasts {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 600; display: flex; flex-direction: column; gap: 10px; align-items: center;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  background: rgba(20,20,32,.95); border: 1px solid rgba(255,255,255,.14);
  border-radius: 99px; padding: 12px 22px;
  font-size: 13px; font-weight: 550;
  box-shadow: 0 16px 44px rgba(0,0,0,.55);
  backdrop-filter: blur(16px);
  animation: toastIn .3s ease both;
}
.toast.out { animation: toastOut .3s ease both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(8px) scale(.96); } }

/* ---------- FOOTER ---------- */
footer {
  margin-top: 90px; padding: 36px var(--edge);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 20px;
  font-size: 13px; color: var(--text-faint);
}
footer .logo-mark { height: 27px; }
footer .er-mark { height: 27px; width: 21px; }
footer .logo-word .er-name { font-size: 15px; letter-spacing: .2em; }
footer .logo-word .er-sub { font-size: 11px; letter-spacing: .32em; margin-top: 3px; }
footer .links { margin-left: auto; display: flex; gap: 18px 22px; flex-wrap: wrap; justify-content: flex-end; }
footer .links button { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 13px; transition: color .2s; }
footer .links button:hover { color: var(--text); }

@media (max-width: 1100px) {
  .hero-side { display: none; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  nav.topnav { padding: 12px 18px; gap: 14px; }
  .nav-links, .search, .org-chip { display: none; }
  .hero { padding: 0 18px 56px; }
  .page-pad { padding: 96px 18px 0; }
  .rail-head, footer, .module-list { padding-left: 18px; padding-right: 18px; }
  .rail { padding-left: 18px; padding-right: 18px; scroll-padding: 0 18px; }
  .path-banner, .stats { margin-left: 18px; margin-right: 18px; }
  .course-hero { padding: 110px 18px 40px; }
  .stepper { flex-wrap: wrap; gap: 18px; }
  .stepper .seg::before { display: none; }
  .ai-panel { right: 12px; left: 12px; width: auto; }
  .live-card { flex-direction: column; align-items: flex-start; }
  .pillars { padding: 0 8px; flex-wrap: wrap; }
  .pillar { flex: 1 0 33%; padding: 16px 6px; }
  .pillar + .pillar::before { display: none; }
}

/* ---------- EDENRISE: dark text on sage (light) buttons ---------- */
.filter-chip.active, .mod-pill.current, .msg.user, .ai-send,
.node-active, .seg.current .snode { color: #1a2a1c; }

/* ---------- EDENRISE: pillar band ---------- */
.pillars {
  position: relative; z-index: 4;
  display: flex; align-items: stretch;
  padding: 0 40px; margin-top: -2px;
  background: linear-gradient(90deg, rgba(64,86,62,.5), rgba(42,58,44,.42) 50%, rgba(64,86,62,.5));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pillar {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 24px 10px; position: relative; cursor: default;
  color: var(--text-dim); transition: color .25s;
}
.pillar + .pillar::before {
  content: ""; position: absolute; left: 0; top: 26%; bottom: 26%;
  width: 1px; background: var(--line);
}
.pillar svg { width: 27px; height: 27px; color: var(--accent-2); opacity: .85; transition: color .25s, transform .35s cubic-bezier(.2,.8,.2,1); }
.pillar span { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.pillar:hover { color: var(--text); }
.pillar:hover svg { color: var(--accent); transform: translateY(-3px) scale(1.08); }

/* ---------- EDENRISE: serif display refinements ---------- */
.page-title { font-weight: 600; letter-spacing: -.01em; font-size: 42px; }
.rail-head h2, .path-banner h2, .ai-panel-head .title,
.course-info h1, .stat .num, .ob-title, .admin-section > h2,
.chart-card h3, .module-list ~ .rail-head h2 { font-family: var(--font-display); }
.rail-head h2 { font-weight: 600; font-size: 30px; letter-spacing: 0; }
.stat .num { font-weight: 600; font-size: 42px; }
.score-ring { font-family: var(--font-display); }

/* ---------- EDENRISE: icon sizing across surfaces ---------- */
.ic { display: block; }
.snode svg { width: 21px; height: 21px; }
.seg.current .snode svg, .seg.done .snode svg { display: none; }
.live-thumb svg { width: 42px; height: 42px; color: var(--ivory); position: relative; }
.cert-row .ci { color: var(--accent-2); display: grid; place-items: center; }
.cert-row .ci svg { width: 22px; height: 22px; }
.course-poster svg { width: 68px; height: 68px; color: rgba(247,246,241,.95); position: relative; }
.content-row .ci { color: var(--ivory); }
.content-row .ci svg { width: 21px; height: 21px; }
.pi-icon { color: var(--ivory); }
.pi-icon svg { width: 18px; height: 18px; }
.ob-option .oi { color: var(--accent-2); display: grid; place-items: center; }
.ob-option .oi svg { width: 28px; height: 28px; }
.sim-icon svg { width: 82px; height: 82px; color: rgba(247,246,241,.92); position: relative; }

/* reveal helper for GSAP (no-JS fallback = visible) */
.reveal { opacity: 1; }

/* ---------- EDENRISE: gamification ---------- */
.xp-chip {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--accent-2);
  background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  padding: 6px 13px 6px 11px; border-radius: 99px; cursor: pointer; white-space: nowrap;
  transition: border-color .2s, background .2s;
}
.xp-chip:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.xp-chip svg { width: 16px; height: 16px; color: var(--accent); }

.prog-top { display: grid; grid-template-columns: 340px 1fr; gap: 18px; margin-top: 28px; }
.level-card {
  display: flex; align-items: center; gap: 22px;
  background: radial-gradient(ellipse 80% 120% at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 24px;
}
.level-ring { width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 18%, transparent); }
.level-ring-in { width: 90px; height: 90px; border-radius: 50%; background: var(--bg-2); display: grid; place-items: center; text-align: center; }
.lv-num { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.lv-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin-top: 1px; }
.level-meta { flex: 1; min-width: 0; }
.lv-xp { font-family: var(--font-display); font-size: 42px; font-weight: 600; letter-spacing: -.01em; }
.lv-xp span { font-size: 15px; color: var(--text-faint); }
.lv-next { margin-top: 12px; font-size: 13px; color: var(--text-dim); }
.lv-next .track { width: 100%; margin-bottom: 8px; }
.lv-next b { color: var(--text); }
.prog-mini { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.prog-mini .stat { margin: 0; }

.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.badge {
  text-align: center; padding: 22px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface);
  transition: transform .25s, border-color .25s;
}
.badge.got { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: radial-gradient(ellipse 100% 120% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), var(--surface)); }
.badge.got:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.badge.locked { opacity: .55; }
.badge-ic { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; }
.badge.got .badge-ic { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.badge.locked .badge-ic { color: var(--text-faint); background: var(--surface-2); }
.badge-ic svg { width: 26px; height: 26px; }
.badge-t { font-weight: 650; font-size: 15px; }
.badge-d { font-size: 11px; color: var(--text-faint); margin-top: 4px; line-height: 1.4; }

.nudge-line {
  display: flex; align-items: center; gap: 12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 10px; padding: 13px 18px; margin-bottom: 16px;
  font-size: 13px; color: var(--text-dim); line-height: 1.5;
}
.nudge-line b { color: var(--text); }
.nudge-line svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; }
.board { display: flex; flex-direction: column; gap: 4px; }
.board-row {
  display: grid; grid-template-columns: 28px 34px 1fr 120px auto; align-items: center; gap: 14px;
  padding: 11px 16px; border-radius: 10px; border: 1px solid transparent; transition: background .2s;
}
.board-row:hover { background: var(--surface); }
.board-row.me { background: rgba(var(--accent-2-rgb),.09); border-color: rgba(var(--accent-2-rgb),.28); }
.board-rank { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--text-faint); text-align: center; }
.board-row.me .board-rank { color: var(--accent-2); }
.board-row .mi { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.board-name { font-size: 15px; font-weight: 600; }
.you-tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2); background: rgba(var(--accent-2-rgb),.14); border: 1px solid rgba(var(--accent-2-rgb),.3); padding: 2px 7px; border-radius: 99px; margin-left: 8px; }
.board-bar { height: 6px; border-radius: 99px; background: rgba(231,237,227,.1); overflow: hidden; }
.board-bar .fill { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.board-xp { font-size: 13px; font-weight: 700; color: var(--text-dim); text-align: right; white-space: nowrap; }

@media (max-width: 900px) {
  .prog-top { grid-template-columns: 1fr; }
  .board-row { grid-template-columns: 24px 30px 1fr auto; }
  .board-bar { display: none; }
}
@media (max-width: 1024px) { .xp-chip { display: none; } }

/* ---------- Phase 1: mobile navigation ---------- */
.nav-burger {
  display: none; margin-left: auto;
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--text); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-burger svg { width: 20px; height: 20px; }
.mobile-drawer {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(6,10,7,.6); backdrop-filter: blur(6px);
  display: none; opacity: 0; transition: opacity .3s;
}
.mobile-drawer.open { display: block; opacity: 1; }
.mobile-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(300px, 82vw);
  background: rgba(16,23,17,.98); border-left: 1px solid var(--line);
  padding: 22px 18px; display: flex; flex-direction: column; gap: 6px;
  transform: translateX(100%); transition: transform .32s cubic-bezier(.2,.8,.2,1);
  box-shadow: -20px 0 60px rgba(0,0,0,.5);
}
.mobile-drawer.open .mobile-drawer-panel { transform: translateX(0); }
.mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mobile-drawer-head .xp-chip { display: flex; }
.mobile-drawer-close {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  cursor: pointer; font-size: 15px;
}
.mobile-drawer a {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px; border-radius: 10px;
  color: var(--text-dim); text-decoration: none; font-size: 15px; font-weight: 550;
  transition: background .2s, color .2s;
}
.mobile-drawer a:hover, .mobile-drawer a.active { background: var(--surface-2); color: var(--text); }
.mobile-drawer a.active { color: var(--accent-2); }

@media (max-width: 1024px) {
  .nav-burger { display: inline-flex; }
  .avatar { display: none; }
}
@media (min-width: 1025px) { .mobile-drawer { display: none !important; } }

/* ---------- Video-still posters ---------- */
.thumb.has-poster { background-size: cover; background-position: center; }
.thumb.has-poster::before { display: none; }
.thumb.has-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 42%, rgba(14,20,15,.7)); }
.thumb .chip-row { position: relative; z-index: 2; }
.course-poster.has-poster { background-size: cover; background-position: center; }
.course-poster.has-poster::before { display: none; }

/* hero cinematic art from the video still */
.hero-art {
  position: absolute; inset: 0 0 0 auto; width: 60%; z-index: 1;
  background-size: cover; background-position: center right; opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 58%);
  mask-image: linear-gradient(90deg, transparent, #000 58%);
}

/* ---------- mobile polish ---------- */
@media (max-width: 1024px) {
  .hero { min-height: 82vh; padding-bottom: 40px; }
  .hero h1 { font-size: clamp(38px, 12vw, 52px); }
  .hero p.desc { font-size: 15px; }
  .hero-eyebrow { font-size: 11px; letter-spacing: .1em; }
  .hero-art {
    width: 100%; opacity: .22; background-position: 84% top;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 50%);
    mask-image: linear-gradient(180deg, #000, transparent 50%);
  }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ================= NATIVE MOBILE SHELL ================= */
/* lock horizontal drift + iOS feel (applies everywhere) */
html { overflow-x: hidden; overflow-x: clip; overscroll-behavior-y: none; }
body {
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  width: 100%;
}
.rail { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }

/* bottom tab bar — hidden on desktop */

@media (max-width: 1024px) {
  /* --- top app bar: solid, separated, safe-area aware --- */
  nav.topnav, nav.topnav.scrolled {
    background: rgba(13,19,14,.94);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    border-bottom: 1px solid var(--line);
    padding: 12px 16px;
    padding-top: calc(12px + env(safe-area-inset-top));
  }
  .nav-burger { display: inline-flex; }
  /* push the menu button into the top-right corner (away from the logo) */
  nav.topnav .nav-right { margin-left: auto; }

  /* --- content clears the top bar and the bottom tab bar --- */
  .page { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  .page-pad { padding-top: calc(84px + env(safe-area-inset-top)); }
  .hero { padding-top: calc(66px + env(safe-area-inset-top)); }

  /* --- bottom tab bar in the thumb zone --- */

  /* floating AI help stays visible — lifted above the bottom tab bar */
  .ai-fab { bottom: calc(20px + env(safe-area-inset-bottom)); right: 18px; }
  .ai-panel { bottom: calc(150px + env(safe-area-inset-bottom)); }

  /* tighter, thumb-friendly touches */
  .rail { scroll-padding: 0 16px; }
  footer { padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
}

/* iOS notch side padding on very small phones in landscape */
@supports (padding: max(0px)) {
  @media (max-width: 1024px) {
    nav.topnav { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  }
}

/* ================= TABLET / iPad TUNING (roomy, still app-shell) ================= */
@media (min-width: 700px) and (max-width: 1024px) {
  .hero { min-height: 72vh; padding-top: calc(76px + env(safe-area-inset-top)); padding-left: 40px; padding-right: 40px; }
  .hero h1 { font-size: clamp(58px, 9vw, 84px); }
  .hero p.desc { font-size: 15px; max-width: 580px; }
  .hero-eyebrow { font-size: 11px; letter-spacing: .14em; }
  .hero-actions .btn { flex: 0 0 auto; }
  /* cinematic still art on the right, like desktop — there's room now */
  .hero-art {
    inset: 0 0 0 auto; width: 56%; opacity: .45; background-position: center right;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 56%);
    mask-image: linear-gradient(90deg, transparent, #000 56%);
  }
  /* pillars back to one elegant row */
  .pillars { padding: 0 40px; flex-wrap: nowrap; }
  .pillar { flex: 1; padding: 22px 8px; }
  .pillar + .pillar::before { display: block; }
  .pillar span { font-size: 11px; }
  /* two-up progress, full leaderboard */
  .prog-top { grid-template-columns: 320px 1fr; }
  .board-row { grid-template-columns: 28px 34px 1fr 120px auto; }
  .board-bar { display: block; }
  /* denser grids on the wider canvas */
  .grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  /* section side padding + a slightly larger tab bar for bigger thumbs */
  .rail-head, .module-list { padding-left: 40px; padding-right: 40px; }
  .rail { padding-left: 40px; padding-right: 40px; scroll-padding: 0 40px; }
  .page-pad { padding-left: 40px; padding-right: 40px; }
  .path-banner, .stats { margin-left: 40px; margin-right: 40px; }
}
/* iPad landscape & up → full desktop top-nav (already handled ≥1025) */

/* ---------- Vimeo player + coming-soon ---------- */
.vimeo-wrap {
  display: none; width: 100%; max-width: 1100px; aspect-ratio: 16/9; max-height: 100%;
  border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: 0 40px 100px rgba(0,0,0,.7); outline: 1px solid rgba(231,237,227,.1);
}
.vimeo-wrap.on { display: block; }
.vimeo-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }

.soon-stage {
  display: none; width: 100%; max-width: 1100px; aspect-ratio: 16/9; max-height: 100%;
  border-radius: 14px; overflow: hidden; padding: 0 32px; text-align: center;
  flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(ellipse 80% 90% at 50% 18%, rgba(90,111,80,.28), transparent 60%), #0e140f;
  outline: 1px solid rgba(231,237,227,.08);
}
.soon-stage.on { display: flex; }
.soon-icon { font-size: 54px; filter: drop-shadow(0 8px 20px rgba(0,0,0,.4)); }
.soon-title { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -.01em; }
.soon-sub { font-size: 13px; color: var(--text-dim); max-width: 460px; line-height: 1.6; }

.module-row.soon { opacity: .5; cursor: default; }
.module-row.soon .m-num { background: var(--surface-2); border-color: var(--line); color: var(--text-faint); }
.module-row.soon .m-title { color: var(--text-faint); }
.mod-pill.soon { opacity: .5; }

/* ---------- Language toggle (EN / PT) ---------- */
.lang-toggle {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line);
}
.lang-btn {
  font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: var(--text-dim); background: none; border: none; cursor: pointer;
  padding: 5px 9px; border-radius: 6px; transition: background .18s, color .18s;
}
.lang-btn.on { background: var(--accent); color: #0e140f; }
.lang-btn:not(.on):hover { color: var(--text); }
.drawer-lang { display: flex; width: 100%; margin-top: 20px; }
.drawer-lang .lang-btn { flex: 1; padding: 12px 10px; font-size: 13px; border-radius: 10px; }

/* ================= Auth gate (login) ================= */
#authGate { display: none; }
html[data-gate="on"] #authGate { display: flex; }
.auth-gate {
  position: fixed; inset: 0; z-index: 500;
  align-items: center; justify-content: center; padding: 24px;
  background:
    radial-gradient(ellipse 90% 70% at 50% -10%, rgba(90,111,80,.35), transparent 60%),
    radial-gradient(ellipse 70% 60% at 90% 110%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
    #0b110c;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.auth-card {
  position: relative; width: 100%; max-width: 400px;
  background: linear-gradient(180deg, rgba(24,32,25,.92), rgba(14,20,15,.96));
  border: 1px solid var(--line); border-radius: 14px;
  padding: 34px 30px 26px; text-align: center;
  box-shadow: 0 40px 120px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  animation: authIn .5s cubic-bezier(.2,.7,.3,1);
}
@keyframes authIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.auth-logo { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 22px; }
.auth-logo .er-mark { width: 26px; height: 33px; }
.auth-logo .logo-word { display: flex; flex-direction: column; line-height: 1; text-align: left; }
.auth-logo .er-name { font-family: var(--font-display); font-size: 18px; letter-spacing: .16em; color: var(--text); }
.auth-logo .er-sub { font-size: 11px; letter-spacing: .28em; color: var(--text-faint); text-transform: uppercase; margin-top: 3px; }
.auth-card h1 { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 8px; }
.auth-card > p { font-size: 13px; color: var(--text-dim); margin: 0 0 22px; line-height: 1.5; }
.auth-google {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: #1f2421; border: none; border-radius: 10px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; padding: 12px; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.auth-google:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.auth-google:active { transform: scale(.98); }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--text-faint); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.auth-input {
  width: 100%; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; color: var(--text);
  font-family: var(--font-body); font-size: 15px; transition: border-color .18s, box-shadow .18s;
}
.auth-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.auth-input::placeholder { color: var(--text-faint); }
.auth-consent { display: flex; gap: 9px; align-items: flex-start; font-size: 11px; color: var(--text-dim); line-height: 1.45; cursor: pointer; padding: 2px 0; }
.auth-consent input { margin-top: 2px; accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
.auth-err { color: #e0a08a; font-size: 13px; min-height: 0; display: none; line-height: 1.4; }
.auth-err.on { display: block; margin: 2px 0; }
.auth-submit { width: 100%; margin-top: 4px; justify-content: center; }
.auth-toggle, .auth-guest { background: none; border: none; cursor: pointer; font-family: var(--font-body); display: block; width: 100%; }
.auth-toggle { color: var(--accent); font-size: 13px; font-weight: 600; margin-top: 16px; padding: 6px; }
.auth-toggle:hover { text-decoration: underline; }
.auth-guest { color: var(--text-faint); font-size: 13px; margin-top: 6px; padding: 6px; }
.auth-guest:hover { color: var(--text-dim); }
/* name + consent only show in create-account mode */
.auth-gate .signup-only { display: none; }
.auth-gate.signup .signup-only { display: flex; }
.auth-gate.signup input.signup-only { display: block; }
.auth-busy { position: absolute; inset: 0; border-radius: 14px; background: rgba(11,17,12,.72); display: none; align-items: center; justify-content: center; }
.auth-busy.on { display: flex; }
@media (max-width: 480px) { .auth-card { padding: 28px 22px 22px; border-radius: 14px; } .auth-card h1 { font-size: 22px; } }

/* ================= Profile page + username input ================= */
.ob-handle { display: flex; align-items: center; gap: 2px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; transition: border-color .18s, box-shadow .18s; }
.ob-handle:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.ob-handle > span { color: var(--text-faint); font-weight: 600; font-size: 15px; }
.ob-input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-family: var(--font-body); font-size: 15px; padding: 12px 6px; }
/* the wrapper (.ob-handle:focus-within) draws the focus ring; without this the global
   :focus-visible rule, declared later, adds a second offset ring on the input itself */
.ob-input:focus, .ob-input:focus-visible { outline: none; box-shadow: none; }
.ob-input::placeholder { color: var(--text-faint); }

.prof-guest { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 10px; padding: 14px 18px; margin: 20px 0 4px; font-size: 13px; color: var(--text-dim); }
.prof-guest span { flex: 1; min-width: 180px; }
.prof-card { display: flex; align-items: center; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 24px 26px; margin: 22px 0 16px; flex-wrap: wrap; }
.prof-avatar { width: 74px; height: 74px; border-radius: 14px; background: linear-gradient(140deg, var(--accent), var(--accent-2)); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 30px; font-weight: 600; color: #0e140f; flex-shrink: 0; box-shadow: 0 12px 30px rgba(0,0,0,.35); }
.prof-id { flex: 1; min-width: 160px; }
.prof-name { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
.prof-handle { color: var(--accent); font-size: 15px; font-weight: 600; margin-top: 3px; }
.prof-meta { color: var(--text-faint); font-size: 13px; margin-top: 6px; }
.prof-lvl { text-align: right; padding-left: 16px; border-left: 1px solid var(--line); }
.prof-lvl .lv-num { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.prof-lvl .lv-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 2px 0; }
.prof-lvl .prof-xp { font-size: 13px; color: var(--accent); font-weight: 600; }
.prof-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 8px; }
.prof-stats .stat { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; text-align: center; }
.prof-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; }
.prof-form label { display: flex; flex-direction: column; gap: 7px; font-size: 13px; font-weight: 600; color: var(--text-dim); }
.prof-form select.auth-input { appearance: none; cursor: pointer; }
@media (max-width: 640px) {
  .prof-form { grid-template-columns: 1fr; }
  .prof-stats { grid-template-columns: repeat(2, 1fr); }
  .prof-lvl { border-left: none; padding-left: 0; text-align: left; width: 100%; }
}

/* ================= Community forum ================= */
.comm-wrap { display: grid; grid-template-columns: 240px 1fr; gap: 24px; margin-top: 22px; align-items: start; }
.comm-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 3px; }
.ch-group-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; padding: 14px 10px 6px; }
.ch-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; color: var(--text-dim); font-family: var(--font-body); font-size: 13px; font-weight: 500; padding: 9px 11px; border-radius: 10px; transition: background .15s, color .15s; }
.ch-item svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .8; }
.ch-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-item:hover { background: var(--surface); color: var(--text); }
.ch-item.active { background: var(--surface-2); color: var(--accent); font-weight: 600; }
.comm-main { min-width: 0; }
.comm-head { display: flex; align-items: center; gap: 13px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.comm-ch-ic { width: 42px; height: 42px; border-radius: 10px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; }
.comm-ch-ic svg { width: 20px; height: 20px; color: var(--accent); }
.comm-head h2 { font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1; }
.comm-ch-sub { font-size: 13px; color: var(--text-faint); }

.composer { display: flex; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 18px; }
.composer-body { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.comm-input { width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; color: var(--text); font-family: var(--font-body); font-size: 15px; resize: vertical; }
.comm-input.title { font-weight: 600; }
.comm-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.comm-input::placeholder { color: var(--text-faint); }
.composer-foot { display: flex; align-items: center; justify-content: space-between; }
.composer-hint { font-size: 11px; color: var(--text-faint); }
.reply-composer { margin: 16px 0 0; }
.reply-composer .composer-body { flex-direction: row; align-items: center; }
.reply-composer textarea { min-height: 40px; }

.comm-signin { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 10px; padding: 14px 18px; margin-bottom: 18px; font-size: 13px; color: var(--text-dim); }

.comm-feed, .thread-replies { display: flex; flex-direction: column; gap: 12px; }
.post { display: flex; gap: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 15px 17px; transition: border-color .15s, transform .1s; }
.post.is-disc { cursor: pointer; }
.post.is-disc:hover { border-color: color-mix(in srgb, var(--accent) 35%, transparent); transform: translateY(-1px); }
.post-av { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #0e140f; background: linear-gradient(140deg, var(--accent), var(--accent-2)); }
.post-av.sm { width: 30px; height: 30px; border-radius: 6px; font-size: 11px; }
.post-main { flex: 1; min-width: 0; }
.post-head { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-size: 13px; }
.post-head b { color: var(--text); }
.post-handle { color: var(--accent); font-size: 13px; font-weight: 600; }
.post-time { color: var(--text-faint); font-size: 13px; }
.post-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 5px 0 3px; line-height: 1.25; }
.post-body { font-size: 15px; color: var(--text-dim); line-height: 1.55; margin-top: 3px; word-wrap: break-word; }
.post-foot { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.post-act { background: none; border: none; cursor: pointer; color: var(--text-faint); font-family: var(--font-body); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px; border-radius: 6px; transition: color .15s; }
.post-act:hover { color: var(--text); }
.post-act.liked { color: #d98a76; }
.post-act.soft { cursor: default; }
.post-act.soft:hover { color: var(--text-faint); }
.reply { display: flex; gap: 11px; padding: 12px 0; border-top: 1px solid var(--line); }
.thread-replies { gap: 0; margin-top: 6px; }
.comm-back { background: none; border: none; cursor: pointer; color: var(--text-dim); font-family: var(--font-body); font-size: 13px; font-weight: 600; padding: 6px 0; margin-bottom: 10px; }
.comm-back:hover { color: var(--accent); }

@media (max-width: 900px) {
  .comm-wrap { grid-template-columns: 1fr; gap: 14px; }
  /* wraps instead of scrolling sideways: the last channel (Members) was cut off at the right edge (João, 16 Oct 2026) */
  .comm-side { position: static; flex-direction: row; flex-wrap: wrap; overflow: visible; gap: 7px; padding-bottom: 6px; }
  .comm-side .ch-item { width: auto; }
  .comm-side::-webkit-scrollbar { display: none; }
  .ch-group-label { display: none; }
  .ch-item { flex-direction: row; white-space: nowrap; background: var(--surface); border: 1px solid var(--line); padding: 8px 13px; flex-shrink: 0; }
  .ch-item.active { border-color: var(--accent); }
}

/* ================= Admin-only gating ================= */
html:not(.is-admin) [data-admin] { display: none !important; }
.admin-badge { display: inline-block; vertical-align: middle; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0e140f; background: var(--accent); padding: 3px 8px; border-radius: 6px; margin-left: 8px; position: relative; top: -3px; }

/* ================= Nudges: bell + panel + preferences ================= */
.bell { position: relative; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color .15s, background .15s; }
.bell:hover { color: var(--text); background: var(--surface); }
.bell svg { width: 19px; height: 19px; }
.bell-dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); display: none; }
.nudge-panel { position: absolute; top: 60px; right: 20px; width: 340px; max-width: calc(100vw - 24px); background: #141c16; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.65); padding: 8px; z-index: 200; display: none; flex-direction: column; gap: 4px; }
.nudge-panel.open { display: flex; animation: authIn .18s ease; }
.nudge { display: flex; gap: 12px; align-items: flex-start; text-align: left; background: none; border: none; cursor: pointer; padding: 12px; border-radius: 10px; transition: background .14s; width: 100%; }
.nudge:hover { background: var(--surface-2); }
.nudge-ic { font-size: 22px; line-height: 1.2; flex-shrink: 0; }
.nudge-txt { min-width: 0; }
.nudge-t { font-weight: 700; font-size: 13px; color: var(--text); }
.nudge-b { font-size: 13px; color: var(--text-dim); line-height: 1.45; margin-top: 2px; }
.nudge-empty { padding: 22px 16px; text-align: center; font-size: 13px; color: var(--text-faint); }
.notif-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.notif-row:last-of-type { border-bottom: none; }
.notif-info b { font-size: 15px; }
.notif-info span { display: block; font-size: 13px; color: var(--text-faint); margin-top: 3px; }
.notif-info em { color: var(--accent); font-style: normal; opacity: .85; }
@media (max-width: 1024px) { .nudge-panel { top: calc(52px + env(safe-area-inset-top)); right: 12px; } }

/* Mid-width desktops (1025–1480): keep the essential right-side controls
   (bell + avatar) on screen by shedding the decorative chips + shrinking search */
@media (min-width: 1025px) and (max-width: 1480px) {
  .nav-right .org-chip, .nav-right .xp-chip { display: none; }
  .search { width: 168px; }
  nav.topnav { gap: 12px; }
  .nav-right { gap: 10px; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  .search { display: none; }
}

/* ================= Leader's Cockpit ================= */
.cockpit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.cockpit-head h2 { margin: 0; }
.team-table .empty-note { padding: 24px 12px; }

/* forgot-password link (sign-in mode only) */
.auth-forgot { background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 13px; color: var(--text-faint); padding: 8px 4px 0; align-self: center; }
.auth-forgot:hover { color: var(--accent); text-decoration: underline; }
.auth-gate.signup .signin-only { display: none; }

/* ================= Forum: pins, mentions, moderation ================= */
.post.pinned { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), var(--surface)); }
.pin-badge { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 6px; padding: 2px 8px; margin-right: 2px; }
.mention { color: var(--accent); font-weight: 600; }
.post-act.danger:hover { color: #d98a76; }

/* ================= Elevation pass: hooks, takeaways, voice, device tuning ================= */
/* course invitation copy */
.hook-line { display: block; font-family: var(--font-display); font-size: 1.35em; font-style: italic; color: var(--text); margin-bottom: 6px; letter-spacing: .01em; }
.course-hook { font-family: var(--font-display); font-size: 22px; font-style: italic; color: var(--accent); margin: 6px 0 10px; line-height: 1.3; }
.card-hook { font-size: 13px; color: var(--text-dim); line-height: 1.45; margin: 4px 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-style: italic; }
.chip.choice { color: var(--accent-2); border-color: rgba(var(--accent-2-rgb),.4); }

/* honest AI framing */
.link-quiet { background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 13px; color: var(--text-faint); padding: 10px 2px 0; text-align: left; transition: color .15s; }
.link-quiet:hover { color: var(--accent); text-decoration: underline; }

/* takeaways — the peak-end moment */
.take-overlay { position: fixed; inset: 0; z-index: 320; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(10,14,10,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.take-overlay.open { display: flex; overflow-y: auto; overscroll-behavior: contain; align-items: flex-start; }
.take-card { margin: auto; }
/* the commit button inherited the card's full-width CTA rule and squeezed the input to a sliver */
.take-card .intent-box .btn { width: auto; margin-top: 0; }
/* result folded to a sheet while the learner reviews the moment */
.ck-ov.peek { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; place-items: start end; padding: 72px 18px 18px; }
/* top-right, compact: the bottom is where Vimeo keeps its play/seek bar */
.ck-ov.peek .ck-card { pointer-events: auto; max-height: 30vh; width: min(380px, 100%); padding: 16px 18px; box-shadow: 0 12px 40px rgba(0,0,0,.6); }
@media (max-width: 760px) { .ck-ov.peek { place-items: start center; padding-top: 64px; } .ck-ov.peek .ck-card { max-height: 24vh; } }
.ck-back { width: 100%; justify-content: center; margin-bottom: 12px; position: sticky; top: 0; }
.ck-ov:not(.peek) .ck-back { display: none; }
/* curtain over the Vimeo iframe the moment a lesson ends — hides Vimeo's own end screen */
#vimeoWrap { position: relative; }
/* batch 3 — course intro, certification, quiz feedback, deep dives */
.course-intro { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; margin: 26px var(--page-x, 48px) 6px; padding: 24px 26px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.course-intro h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0 0 12px; }
.ci-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ci-list li { position: relative; padding-left: 26px; line-height: 1.5; color: var(--text); }
.ci-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent-2); font-weight: 700; }
.ci-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--text-dim, var(--text)); line-height: 1.5; }
.ci-note { margin: 14px 0 0; font-size: 13px; color: var(--text-faint); }
@media (max-width: 760px) { .course-intro { grid-template-columns: 1fr; gap: 18px; margin: 18px 16px 4px; padding: 18px; } }
.cert-status { margin: 14px 0 0; font-size: 14px; font-weight: 600; }
.cert-status.ok { color: var(--accent-2); }
.cert-hint { margin: 12px 0 0; font-size: 13.5px; color: var(--text-dim, var(--text)); }
.q-intro .m-sub { margin-top: 10px; }
.q-feedback { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.5; display: grid; gap: 4px; }
.q-feedback.ok { background: rgba(143,177,142,.12); border: 1px solid rgba(143,177,142,.5); color: #d6e8d5; }
.q-feedback.no { background: rgba(248,113,113,.08); border: 1px solid rgba(248,113,113,.45); color: #f1d2d2; }
.q-feedback span { color: var(--text-faint); font-size: 13px; }
.deep-divider { display: flex; flex-direction: column; gap: 2px; padding: 22px 4px 8px; margin-top: 8px; border-top: 1px dashed var(--line); }
.deep-divider b { font-family: var(--font-display); font-size: 19px; font-weight: 600; }
.deep-divider span { font-size: 13px; color: var(--text-faint); }
#vimeoWrap.ended::after { content: ''; position: absolute; inset: 0; background: var(--bg); }
.ai-close { margin-left: 6px; }
/* the home ask bar must read as an input, not a caption (João could not tell it was interactive) */
.ask-line { padding: 10px 14px 10px 16px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 6%, var(--surface, rgba(255,255,255,.04))); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.ask-line:focus-within { border-color: color-mix(in srgb, var(--accent) 65%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.ask-go { background: var(--accent); color: #141210; border-radius: 999px; padding: 8px 14px; font: 600 13px/1 var(--font-body); white-space: nowrap; }
.ask-line:focus-within .ask-go, .ask-go:hover { color: #141210; transform: none; filter: brightness(1.08); }
/* the italic word at the end of the hero title needs room for its overhang inside the clipped reveal */
.hero-h1 { padding-right: .14em; }
.hero-h1 .hw.grad-text { padding-right: .22em; padding-bottom: .06em; }
/* curtain stays clickable-through, and the learner can always replay */
#vimeoWrap.ended::after { pointer-events: none; }
#vimeoWrap .replay-veil { display: none; position: absolute; inset: 0; z-index: 3; place-items: center; align-content: center; gap: 10px; text-align: center; padding: 20px; }
#vimeoWrap.ended .replay-veil { display: grid; }
#vimeoWrap .veil-note { margin: 0; color: var(--text-faint); font-size: 14px; max-width: 420px; }
#vimeoWrap .veil-note:empty { display: none; }
/* the tutor must open ABOVE the full-screen player — it was opening behind it and surfacing later on the home page */
.ai-panel { z-index: 520; }
.ai-fab { z-index: 519; }
/* today's question: closable */
.daily-head { position: relative; }
.daily-x { position: absolute; top: -4px; right: -4px; background: none; border: 0; color: var(--text-faint); font-size: 15px; cursor: pointer; padding: 6px; line-height: 1; }
.daily-x:hover { color: var(--text); }
/* topic chips: a quieter, more premium band */
.topics-band { padding: 18px 0 6px; }
.topics-row { gap: 8px; }
.tag-chip { border-radius: 999px; padding: 7px 12px; font-size: 13px; letter-spacing: .01em; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.tag-chip i { font-style: normal; opacity: .5; font-size: 11px; margin-left: 4px; }
.tag-chip.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pstep.soon { background: rgba(255,255,255,.035); border: 1px dashed var(--line); cursor: default; display: flex; align-items: center; justify-content: center; }
.pstep.soon .pstep-t { color: var(--text-faint); font-weight: 500; letter-spacing: .02em; }
.pstep.soon .pstep-n { opacity: .35; }
.seg.soon { opacity: .55; cursor: default; }
.chip.chip-soon { background: rgba(255,255,255,.1); color: var(--text-faint); }
.empty-note { padding: 28px 22px; border: 1px dashed var(--line); border-radius: 12px; color: var(--text-faint); text-align: center; margin: 10px 0 20px; }
.take-card { width: 100%; max-width: 520px; background: linear-gradient(180deg, rgba(var(--bg2-rgb),.98), rgba(var(--bg-rgb),.99)); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 14px; padding: 36px 34px 30px; text-align: left; animation: authIn .5s cubic-bezier(.2,.7,.3,1); box-shadow: 0 40px 120px rgba(0,0,0,.6); }
.take-spark { font-size: 30px; margin-bottom: 14px; animation: takePop .6s cubic-bezier(.3,1.6,.4,1) both; }
@keyframes takePop { from { transform: scale(0) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.take-card h2 { font-family: var(--font-display); font-size: 30px; font-weight: 600; margin: 8px 0 4px; }
.take-sub { font-size: 13px; color: var(--text-faint); margin: 0 0 20px; }
.take-item { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-top: 1px solid var(--line); opacity: 0; animation: takeIn .5s ease both; }
@keyframes takeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.take-num { width: 26px; height: 26px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent); font-size: 13px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.take-item p { font-size: 15px; line-height: 1.6; color: var(--text-dim); margin: 0; }
.take-card .btn { width: 100%; justify-content: center; margin-top: 22px; }

/* voice search */
.mic-btn { position: relative; background: none; border: none; cursor: pointer; color: var(--text-dim); display: inline-flex; align-items: center; justify-content: center; padding: 6px; border-radius: 6px; transition: color .15s; }
.mic-btn svg { width: 18px; height: 18px; }
.mic-btn:hover { color: var(--text); }
.mic-btn.listening { color: var(--accent); }
.mic-btn.listening::after { content: ''; position: absolute; inset: -2px; border-radius: 10px; border: 1.5px solid var(--accent); animation: micPulse 1.2s ease-out infinite; }
@keyframes micPulse { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.35); } }
.bell.mic-btn { background: var(--surface-2); border: 1px solid var(--line); width: 38px; height: 38px; }
.nav-mic { display: none; }
.pal-voice-state { font-size: 11px; color: var(--accent); white-space: nowrap; display: none; }
.pal-voice-state.on { display: inline; animation: pulse 1.4s ease infinite; }
.palette-input-row { align-items: center; gap: 8px; }

/* device-class adaptation (html classes set by JS: os-*, dev-*) */
html.dev-tablet .nav-mic, html.dev-phone .nav-mic, html.dev-phone-sm .nav-mic, html.dev-phone-lg .nav-mic { display: inline-flex; }
html.dev-phone-sm .hero-content h1 { font-size: clamp(30px, 11vw, 40px); }
html.dev-phone-sm .page-title { font-size: 30px; }
html.dev-phone-sm .btn { padding: 11px 16px; font-size: 13px; }
html.dev-phone-sm .hero-actions { gap: 8px; }
html.dev-phone-lg .hero-content h1 { font-size: clamp(38px, 10.5vw, 52px); }
html.dev-phone-lg .grid { grid-template-columns: repeat(auto-fill, minmax(46%, 1fr)); }
/* small-phone app bar: lockup + controls must all fit (390px was clipping the bell and pushing the burger off-screen) */
@media (max-width: 540px) {
  nav.topnav { gap: 10px; }
  .nav-right { gap: 8px; flex-shrink: 0; }
  .logo { gap: 8px; min-width: 0; }
  .er-mark { height: 32px; width: 25px; }
  .logo-word .er-name { font-size: 18px; letter-spacing: .16em; }
  .logo-word .er-sub { font-size: 11px; letter-spacing: .3em; margin-top: 3px; }
  .lang-btn { padding: 4px 6px; font-size: 11px; }
  .nav-right .bell { width: 36px; height: 36px; }
}
@media (max-width: 380px) {
  html .nav-mic { display: none !important; } /* voice search stays reachable inside the ⌘K palette */
  .logo-word .er-name { font-size: 15px; }
}
html.os-android * { -webkit-tap-highlight-color: transparent; }
html.os-android .btn, html.os-android .ch-item, html.os-android .mod-pill { min-height: 44px; }
html.os-android body { text-rendering: optimizeLegibility; }
@supports (height: 100dvh) {
  .auth-gate, .take-overlay, .onboard-overlay, .player-overlay { min-height: 100dvh; }
}
/* palette comfortable on phones */
@media (max-width: 640px) {
  .palette { width: calc(100vw - 24px); margin-top: calc(14px + env(safe-area-inset-top)); }
  .palette-input-row input { font-size: 15px; } /* prevents iOS zoom-on-focus */
}

/* premium minimal divider between hero and rails (replaces the pillar band) */
.hero-divider { position: relative; height: 1px; margin: 54px auto 46px; max-width: 620px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 45%, transparent) 35%, rgba(var(--accent-2-rgb),.45) 65%, transparent); }
.hero-divider::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; transform: translate(-50%, -50%) rotate(45deg); background: var(--accent); opacity: .8; }
@media (max-width: 700px) { .hero-divider { margin: 38px auto 30px; max-width: 72vw; } }

/* ================= Daily Drop — one question a day ================= */
.daily { max-width: 720px; margin: 0 auto 44px; padding: 22px 26px; background: linear-gradient(180deg, rgba(var(--bg2-rgb),.75), rgba(var(--bg-rgb),.85)); border: 1px solid rgba(var(--accent-2-rgb),.22); border-radius: 14px; }
.daily.done { padding: 16px 22px; }
.daily-head { display: flex; align-items: center; gap: 12px; }
.daily-ic { font-size: 22px; }
.daily-head b { font-size: 15px; display: block; }
.daily-sub { font-size: 13px; color: var(--text-faint); display: block; margin-top: 2px; }
.daily-streak { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.daily-q { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 16px 0 12px; line-height: 1.35; }
.daily-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.daily-opt { text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; color: var(--text-dim); font-family: var(--font-body); font-size: 13px; cursor: pointer; transition: border-color .15s, background .15s; }
.daily-opt:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.daily-opt.right { border-color: var(--accent-2); background: rgba(var(--accent-2-rgb),.12); color: var(--text); }
.daily-opt.wrong { border-color: #d98a76; background: rgba(217,138,118,.1); }
@media (max-width: 640px) { .daily { margin: 0 16px 36px; } .daily-opts { grid-template-columns: 1fr; } }

/* ================= AI Course Studio ================= */
.studio { display: flex; flex-direction: column; gap: 10px; max-width: 680px; }
.studio .btn { align-self: flex-start; }
.studio-status { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-dim); padding: 10px 0; }
.studio-draft { border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 10px; padding: 22px 24px; margin-top: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent); }

/* ================= Motion craft: level-up, skeletons, press feel ================= */
.levelup { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; background: rgba(10,14,10,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: luIn .4s ease both; pointer-events: none; }
.levelup.leave { animation: luOut .5s ease both; }
@keyframes luIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes luOut { from { opacity: 1; } to { opacity: 0; } }
.levelup-card { text-align: center; animation: luCard .6s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes luCard { from { transform: scale(.7) translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.levelup-ring { width: 92px; height: 92px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; font-size: 42px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%); border: 1.5px solid color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 60px color-mix(in srgb, var(--accent) 25%, transparent); animation: luRing 2.2s ease infinite; }
@keyframes luRing { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.levelup-eyebrow { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.levelup-name { font-family: var(--font-display); font-size: 42px; font-weight: 600; color: var(--text); margin-top: 6px; }

.skel { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 25%, rgba(231,237,227,.09) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: skelShine 1.3s ease infinite; }
@keyframes skelShine { to { background-position: -200% 0; } }
.skel-row td { padding: 18px 12px; }
.skel-post { pointer-events: none; }
.skel-post .skel.av { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; }

/* tactile press on cards & primary actions */
.card:active { transform: scale(.985); transition: transform .1s; }
.btn:active { transform: scale(.97); }
/* course hero gently rises */
.course-hero-inner { animation: pageIn .5s ease both; }
@media (prefers-reduced-motion: reduce) {
  .levelup, .levelup-card, .levelup-ring, .skel, .take-spark, .take-item { animation: none !important; }
  .card:active, .btn:active { transform: none; }
}

/* team AI key row (admin) */
.org-key { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: color-mix(in srgb, var(--accent) 6%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 10px; padding: 14px 18px; margin-bottom: 16px; max-width: 680px; }
.org-key .notif-info { max-width: 320px; }

/* ================= Community v2 — Skool-style ================= */
/* wraps instead of scrolling sideways: the last pill (Members) was cut off at the right edge (João, 16 Oct 2026) */
.comm-pills { display: flex; flex-wrap: wrap; gap: 7px; overflow: visible; padding: 18px 0 4px; }
.comm-pills::-webkit-scrollbar { display: none; }
.comm-pills .ch-item { flex-direction: row; white-space: nowrap; background: var(--surface); border: 1px solid var(--line); padding: 9px 14px; flex-shrink: 0; border-radius: 99px; width: auto; }
.comm-pills .ch-item.active { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.comm-wrap2 { display: grid; grid-template-columns: 1fr 300px; gap: 26px; margin-top: 18px; align-items: start; }
.comm-pulse { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 14px; }
.pulse-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.pulse-card h4 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); font-weight: 700; margin-bottom: 12px; }
.pulse-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; border-radius: 6px; }
.pulse-row:hover { background: var(--surface-2); }
.pr-n { width: 18px; font-size: 13px; font-weight: 700; color: var(--text-faint); text-align: center; }
.pr-name { flex: 1; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-xp { font-size: 11px; color: var(--accent); font-weight: 700; }
.pulse-avas { display: flex; flex-wrap: wrap; gap: 8px; }
.pulse-live { cursor: pointer; }
.pulse-live b { display: block; font-size: 13px; line-height: 1.35; }
.pulse-live span { font-size: 13px; color: var(--text-faint); }
.pulse-empty { font-size: 13px; color: var(--text-faint); line-height: 1.5; }
.m-ava { position: relative; width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; color: #0e140f; background: linear-gradient(140deg, var(--accent), var(--accent-2)); cursor: pointer; }
.m-ava.lg { width: 46px; height: 46px; border-radius: 10px; font-size: 15px; }
.m-ava.online::after { content: ''; position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: #6fd08c; border: 2px solid var(--bg); }

/* rich post media */
.post-img { display: block; max-width: 100%; max-height: 420px; border-radius: 10px; margin: 8px 0; border: 1px solid var(--line); }
.post-embed { display: inline-flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 18px; margin: 8px 0; cursor: pointer; font-size: 13px; color: var(--text-dim); transition: border-color .15s; }
.post-embed:hover { border-color: var(--accent); }
.pe-play { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #0e140f; display: grid; place-items: center; font-size: 13px; }
.post-embed-live { position: relative; padding-top: 56.25%; border-radius: 10px; overflow: hidden; margin: 8px 0; border: 1px solid var(--line); }
.post-embed-live iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-link { color: var(--accent-2); text-decoration: underline; text-decoration-color: rgba(var(--accent-2-rgb),.4); word-break: break-all; }

/* reactions */
.rx { background: color-mix(in srgb, var(--accent) 7%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 99px; padding: 3px 10px; font-size: 13px; cursor: pointer; color: var(--text-dim); font-family: var(--font-body); transition: border-color .15s, background .15s; }
.rx.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--text); }
.rx-add { position: relative; cursor: pointer; color: var(--text-faint); font-size: 13px; padding: 2px 6px; border-radius: 99px; }
.rx-add:hover { color: var(--text); }
.rx-picker { display: none; position: absolute; bottom: 130%; left: -10px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; gap: 4px; box-shadow: 0 16px 44px rgba(0,0,0,.5); z-index: 30; white-space: nowrap; }
.rx-add.open .rx-picker { display: flex; }
.rx-opt { background: none; border: none; font-size: 18px; cursor: pointer; padding: 4px; border-radius: 6px; }
.rx-opt:hover { background: var(--surface-2); }

/* polls */
.poll { margin: 10px 0 4px; display: flex; flex-direction: column; gap: 7px; max-width: 460px; }
.poll-opt { position: relative; overflow: hidden; text-align: left; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-body); font-size: 13px; color: var(--text-dim); }
.poll-opt:hover { border-color: var(--accent); }
.poll-opt.mine { border-color: var(--accent); color: var(--text); }
.poll-bar { position: absolute; inset: 0 auto 0 0; background: rgba(var(--accent-2-rgb),.13); transition: width .4s ease; }
.poll-label, .poll-pct { position: relative; }
.poll-pct { font-weight: 700; color: var(--accent); font-size: 13px; }
.poll-total { font-size: 11px; color: var(--text-faint); padding-left: 2px; }
.poll-builder { display: flex; flex-direction: column; gap: 7px; padding: 8px 0 2px; }

/* members directory */
.members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.member-tile { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: border-color .15s; }
.member-tile:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.mt-info { flex: 1; min-width: 0; }
.mt-info b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-meta { display: block; font-size: 11px; color: var(--text-faint); margin-top: 3px; }
.mt-on { font-size: 11px; color: #6fd08c; font-weight: 700; white-space: nowrap; }

/* member profile card */
.member-card-pop { position: fixed; z-index: 500; width: 240px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; box-shadow: 0 24px 70px rgba(0,0,0,.55); animation: authIn .18s ease; }
.mc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.mc-head b { display: block; font-size: 15px; }
.mc-stats { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--text-dim); border-top: 1px solid var(--line); padding-top: 10px; }
.mc-since { font-size: 11px; color: var(--text-faint); margin-top: 8px; }
.mc-on { font-size: 11px; color: #6fd08c; font-weight: 700; margin-top: 6px; }

@media (max-width: 900px) {
  .comm-wrap2 { grid-template-columns: 1fr; }
  .comm-pulse { position: static; order: -1; flex-direction: row; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .comm-pulse::-webkit-scrollbar { display: none; }
  .pulse-card { min-width: 210px; flex-shrink: 0; }
  .comm-pulse .link-quiet { display: none; }
}

/* ================= EdenRise Studio (admin) ================= */
.studio-tabs { margin: 22px 0 4px; }
.pub-chip.edited { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.content-table { display: flex; flex-direction: column; }
.ce-editor .field { margin: 0; }
.ce-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.ce-h3 { font-size: 15px; margin: 22px 0 10px; font-weight: 650; }
.ce-mod { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.ce-mod-n { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); color: var(--text-faint); font-size: 11px; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; margin-top: 8px; }
.ce-mod-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ce-mod-grid input[data-cm="video"] { grid-column: 1 / 2; }
.ce-mins { max-width: 90px; }
.ce-actions { display: flex; gap: 10px; align-items: center; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.btn.danger { color: #d99; border-color: rgba(221,153,153,.3); }
.lv-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.lv-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lv-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-dim); white-space: nowrap; margin-top: 9px; cursor: pointer; }
.lv-check input { accent-color: var(--accent); }
.off-badge { background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; }
@media (max-width: 760px) {
  .ce-two, .ce-mod-grid, .lv-grid { grid-template-columns: 1fr; }
  .lv-row, .ce-mod { flex-wrap: wrap; }
}
.ce-editor .field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 7px; }
.ce-editor select, #bcChannel { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; color: var(--text); font-family: var(--font-body); font-size: 15px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a6c3a5' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }

/* ================= World-class pack ================= */
/* certificates */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.cert-card { background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 10px; overflow: hidden; }
.cert-art { position: relative; padding: 26px 20px 20px; display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); border-bottom: 1px solid var(--line); }
.cert-art > span:first-child { color: var(--accent); font-size: 15px; }
.cert-art b { font-family: var(--font-display); font-size: 18px; line-height: 1.25; }
.cert-d { font-size: 11px; color: var(--text-faint); }
.cert-actions { display: flex; gap: 8px; padding: 12px 14px; flex-wrap: wrap; }
.cert-actions .btn { flex: 1; justify-content: center; text-decoration: none; }
.take-extra { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.rate-block b { display: block; font-size: 13px; margin-bottom: 6px; }
.rate-stars { display: flex; gap: 2px; }
.rate-star { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-faint); padding: 2px; transition: transform .12s, color .12s; }
.rate-star.on { color: var(--accent); }
.rate-star:hover { transform: scale(1.15); color: var(--accent); }

/* assignments */
.asg-card { display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 10px; padding: 14px 18px; margin: 10px 0; cursor: pointer; transition: border-color .15s; }
.asg-card:hover { border-color: var(--accent); }
.asg-card .ct { flex: 1; min-width: 0; }
.asg-card .ct b { display: block; font-size: 15px; }
.asg-card .ct span { font-size: 13px; color: var(--text-faint); }
.asg-over { color: #d99; font-style: normal; font-weight: 700; }
.asg-track { color: var(--accent-2); font-weight: 600; }
.module-row.locked { opacity: .55; cursor: pointer; }

/* field missions */
.mission-card h2 .mis-xp { font-size: 13px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding: 3px 10px; border-radius: 99px; vertical-align: middle; margin-left: 8px; }
.mis-brief { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 10px 0 14px; }
.mis-brief b { font-family: var(--font-display); font-size: 18px; }
.mis-brief p { font-size: 13px; color: var(--text-dim); margin-top: 4px; line-height: 1.5; }
.mis-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.mis-photo-btn { cursor: pointer; }
.mis-thumb { height: 40px; border-radius: 6px; border: 1px solid var(--line); display: block; }
.mis-note { font-size: 13px; color: var(--text-dim); }
.mis-note.warn { color: #d9b38c; }
.mis-ok { font-size: 15px; color: var(--accent-2); font-weight: 600; }
.mq-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.mq-row .ct { flex: 1; min-width: 0; }
.mq-row .ct b { display: block; font-size: 13px; }
.mq-row .ct span { font-size: 13px; color: var(--text-faint); }
.mq-photo { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); cursor: zoom-in; }

/* role-play coach */
.coach-card { max-width: 560px; width: min(560px, 92vw); }
.coach-chat { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin: 14px 0; padding-right: 4px; }
.coach-msg { max-width: 82%; padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.45; }
.coach-msg.them { background: var(--surface-2); border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; }
.coach-msg.me { background: rgba(var(--accent-2-rgb),.16); border: 1px solid rgba(var(--accent-2-rgb),.3); align-self: flex-end; border-bottom-right-radius: 4px; }
.coach-msg.typing { color: var(--text-faint); animation: pulse 1.2s infinite; }
.coach-msg-err { border-color: rgba(216,146,90,.5); color: var(--text-dim); font-size: 13px; }
.coach-input { display: flex; gap: 8px; }
.coach-input input { flex: 1; min-width: 0; }
/* .take-card .btn is width:100% for the takeaways CTA — the coach send button must stay compact */
.coach-input .btn, .coach-score .btn { width: auto; margin-top: 0; flex: 0 0 auto; }
.coach-score .btn { margin-top: 10px; }
@media (max-width: 640px) {
  .coach-input input { font-size: 15px; } /* prevents iOS zoom-on-focus */
}
.coach-foot { margin-top: 10px; text-align: center; }
.coach-score { background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 10px; padding: 16px; margin-top: 6px; }
.coach-score > b { font-family: var(--font-display); font-size: 18px; display: block; margin-bottom: 10px; }
.cs-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.cs-row em { grid-column: 1 / -1; color: var(--text-faint); font-size: 13px; font-style: normal; }
.cs-stars { color: var(--accent); letter-spacing: 2px; }
.cs-tip { font-size: 13px; color: var(--text-dim); margin: 12px 0; line-height: 1.5; }
.coach-invite .btn { margin-top: 4px; }
.modal-x { position: absolute; top: 14px; right: 16px; background: none; border: none; color: var(--text-faint); font-size: 15px; cursor: pointer; }
.modal-x:hover { color: var(--text); }

/* resources + trends */
.res-list { display: flex; flex-direction: column; }
.res-row { display: flex; align-items: center; gap: 10px; padding: 11px 4px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 13px; }
.res-row span { color: var(--accent); }
.res-row:hover { color: var(--accent); }
.bars.sm { height: 110px; }
.bars .bl { font-size: 11px; color: var(--text-faint); }

/* ================= Deep-build pack ================= */
/* ask the academy */
.ask-bar { display: flex; gap: 16px; background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 8%, transparent), rgba(var(--accent-2-rgb),.05)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 14px; padding: 20px 22px; margin: 10px 0; }
.ask-ic { font-size: 22px; color: var(--accent); }
.ask-main { flex: 1; min-width: 0; }
.ask-main b { font-family: var(--font-display); font-size: 18px; }
.ask-main > span { display: block; font-size: 13px; color: var(--text-dim); margin: 3px 0 10px; }
.ask-row { display: flex; gap: 8px; }
.ask-row input { flex: 1; }
.ask-card { max-width: 560px; width: min(560px, 92vw); }
.ask-answer { font-size: 15px; line-height: 1.65; color: var(--text); }
.ask-refs { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ask-ref { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; cursor: pointer; transition: border-color .15s; }
.ask-ref:hover { border-color: var(--accent); }
.ask-ref .ct { flex: 1; min-width: 0; }
.ask-ref .ct b { display: block; font-size: 13px; }
.ask-ref .ct span { font-size: 11px; color: var(--text-faint); }
.ask-go { color: var(--accent); }

/* skills */
.skill-list { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.skill-row { display: grid; grid-template-columns: 150px 1fr 42px; align-items: center; gap: 12px; }
.sk-name { font-size: 13px; color: var(--text-dim); }
.sk-pct { font-size: 13px; color: var(--accent); font-weight: 700; text-align: right; }
.heat-scroll { overflow-x: auto; }
.heat-table { border-collapse: collapse; font-size: 13px; min-width: 640px; }
.heat-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); padding: 6px 8px; text-align: center; font-weight: 700; }
.heat-table td { padding: 4px 8px; text-align: center; }
.heat-table td:first-child { text-align: left; white-space: nowrap; color: var(--text-dim); }
.heat { display: inline-grid; place-items: center; width: 34px; height: 26px; border-radius: 6px; font-weight: 700; font-size: 11px; }
.heat.h0 { background: var(--surface-2); color: var(--text-faint); }
.heat.h1 { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.heat.h2 { background: color-mix(in srgb, var(--accent) 30%, transparent); color: #f0dcb4; }
.heat.h3 { background: rgba(var(--accent-2-rgb),.35); color: var(--text); }

/* digest */
.digest-card { background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 10px; padding: 18px 20px; margin-top: 12px; max-width: 640px; }
.digest-card h3 { font-family: var(--font-display); font-size: 18px; margin: 6px 0 10px; }
.dg-row { font-size: 13px; color: var(--text-dim); padding: 4px 0; line-height: 1.5; }
.dg-action { font-size: 13px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

/* journeys */
.jour-card { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin: 10px 0; cursor: pointer; transition: border-color .15s, transform .15s; }
.jour-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); transform: translateY(-1px); }
.jour-card .ct { flex: 1; min-width: 0; }
.jour-card .ct b { display: block; font-family: var(--font-display); font-size: 18px; }
.jour-card .ct > span { font-size: 13px; color: var(--text-dim); }
.jour-meta { font-size: 11px; color: var(--text-faint); margin-top: 5px; }
.ci.lg { width: 52px; height: 52px; border-radius: 10px; font-size: 22px; }
.jour-ring { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.jour-ring span { width: 42px; height: 42px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--accent); }
.jour-head { display: flex; gap: 18px; align-items: center; margin-top: 14px; }
.jour-done { display: inline-flex; align-items: center; gap: 12px; background: rgba(var(--accent-2-rgb),.12); border: 1px solid rgba(var(--accent-2-rgb),.35); border-radius: 10px; padding: 10px 16px; font-size: 13px; font-weight: 600; margin: 8px 0; }
.jstages { margin: 22px 0; display: flex; flex-direction: column; }
.jstage { display: flex; align-items: center; gap: 16px; padding: 16px 12px; border-left: 2px solid var(--line); margin-left: 16px; position: relative; }
.jstage.done { border-left-color: var(--accent-2); }
.jstage.active { border-left-color: var(--accent); cursor: pointer; }
.jstage.done { cursor: pointer; }
.jstage.locked { opacity: .5; }
.jnode { position: absolute; left: -17px; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.jstage.done .jnode { background: rgba(var(--accent-2-rgb),.2); border-color: var(--accent-2); color: var(--accent-2); }
.jstage.active .jnode { border-color: var(--accent); color: var(--accent); }
.jinfo { margin-left: 28px; flex: 1; min-width: 0; }
.jkind { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); font-weight: 700; }
.jkind em { color: var(--accent); font-style: normal; }
.jinfo b { display: block; font-size: 15px; margin: 3px 0; }
.jsub { font-size: 13px; color: var(--text-faint); }
.jgo { color: var(--accent); font-size: 15px; }

/* flashcards */
.flash-wrap { max-width: 440px; width: min(440px, 92vw); text-align: center; }
.flash-count { font-size: 11px; color: var(--text-faint); font-weight: 700; letter-spacing: .06em; margin: 10px 0; }
.flash-card { background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 14px; min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 26px; cursor: pointer; transition: transform .15s; }
.flash-card:hover { transform: translateY(-2px); }
.flash-card.flipped { background: rgba(var(--accent-2-rgb),.1); border-color: rgba(var(--accent-2-rgb),.4); }
.flash-face { font-family: var(--font-display); font-size: 18px; line-height: 1.45; }
.flash-hint { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.flash-foot { min-height: 46px; display: grid; place-items: center; margin-top: 12px; }

/* board scope */
.board-scope { display: flex; gap: 8px; margin-bottom: 12px; }

/* ================= Product tour + PWA nudge ================= */
#tourOv { position: fixed; inset: 0; z-index: 900; background: rgba(5,9,6,.68); animation: authIn .25s ease; }
.tour-ring { position: fixed; border: 2px solid var(--accent); border-radius: 10px; box-shadow: 0 0 0 9999px rgba(5,9,6,.68), 0 0 30px color-mix(in srgb, var(--accent) 35%, transparent); background: transparent; transition: all .3s ease; pointer-events: none; }
#tourOv { background: transparent; pointer-events: auto; }
.tour-card { position: fixed; width: min(310px, calc(100vw - 24px)); background: #18211a; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 10px; padding: 18px 20px; box-shadow: 0 24px 70px rgba(0,0,0,.7); transition: all .3s ease; z-index: 901; }
.tour-step { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--accent); margin-bottom: 8px; }
.tour-card b { font-family: var(--font-display); font-size: 18px; display: block; }
.tour-card p { font-size: 13px; color: var(--text-dim); line-height: 1.55; margin: 6px 0 14px; }
.tour-btns { display: flex; align-items: center; gap: 10px; }
.pwa-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 850; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 10px; padding: 12px 16px; box-shadow: 0 18px 50px rgba(0,0,0,.55); width: min(430px, calc(100vw - 24px)); animation: authIn .3s ease; }
.pwa-ic { font-size: 22px; }
.pwa-txt { flex: 1; min-width: 0; }
.pwa-txt b { display: block; font-size: 13px; }
.pwa-txt span { font-size: 13px; color: var(--text-dim); }

/* ================= Digests + cockpit filter ================= */
.dig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.dig-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: pointer; transition: border-color .15s, transform .15s; }
.dig-card:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); transform: translateY(-2px); }
.dig-top { position: relative; height: 92px; display: grid; place-items: center; font-size: 22px; }
.dig-week { position: absolute; top: 10px; right: 12px; font-size: 11px; font-weight: 700; letter-spacing: .05em; background: rgba(10,14,10,.55); padding: 3px 9px; border-radius: 99px; color: var(--text-dim); }
.dig-body { padding: 13px 15px; }
.dig-body b { display: block; font-size: 15px; font-family: var(--font-display); line-height: 1.3; }
.dig-body span { font-size: 11px; color: var(--text-faint); }
.dig-modal { max-width: 620px; width: min(620px, 92vw); max-height: 86vh; overflow-y: auto; }
.dig-narrative { margin-top: 14px; }
.dig-narrative p { font-size: 15px; line-height: 1.7; color: var(--text-dim); margin: 10px 0; }
.ck-dept { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; color: var(--text); font-family: var(--font-body); font-size: 13px; }

/* ================= Role readiness + cockpit intelligence ================= */
.ready-wrap { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.jour-ring.lg { width: 92px; height: 92px; }
.jour-ring.lg span { width: 74px; height: 74px; font-size: 18px; }
.ready-rows { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 10px; }
.sk-target { font-style: normal; color: var(--text-faint); font-weight: 400; font-size: 11px; }
.intel-q { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-dim); }
.intel-q .n { color: var(--accent); font-weight: 700; font-size: 11px; white-space: nowrap; }
.gap-card { background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 10px; padding: 14px 16px; margin: 10px 0; display: flex; gap: 12px; align-items: center; }
.gap-card .ct { flex: 1; }
.gap-card .ct b { display: block; font-size: 15px; }
.gap-card .ct span { font-size: 13px; color: var(--text-dim); }
.cockpit-chat { margin-top: 14px; }
.cockpit-chat .coach-chat { max-height: 260px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }


/* ================= iPhone-13-mini-class fit (≤414px) ================= */
@media (max-width: 414px) {
  footer { flex-wrap: wrap; padding: 30px 20px calc(30px + env(safe-area-inset-bottom)); gap: 14px; }
  footer .links { margin-left: 0; justify-content: flex-start; gap: 12px 16px; }
  .path-banner { margin: 44px 16px 8px; }
}

/* ================= 40h Compliance ================= */
.comp-panel .jour-ring.lg span { flex-direction: column; line-height: 1.1; }
.comp-status { font-size: 13px; font-weight: 600; margin-top: 6px; }
.comp-status.ok { color: var(--accent-2); }
.comp-status.behind { color: var(--warn, #d9b38c); }
.comp-note { margin-top: 14px; background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); border-radius: 10px; padding: 11px 15px; font-size: 13px; color: var(--text-dim); cursor: pointer; }
.comp-note:hover { color: var(--text); }
.comp-log { display: flex; flex-direction: column; }
.comp-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; }
.comp-row .cl-t { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-row .cl-meta { color: var(--text-faint); font-size: 13px; white-space: nowrap; }
.comp-cell { font-family: var(--font-mono); font-size: 13px; font-weight: 700; padding: 3px 8px; border-radius: 99px; background: var(--surface-2); }
.comp-cell.ok { background: color-mix(in srgb, var(--success, #6fd08c) 18%, transparent); color: var(--success, #6fd08c); }
.comp-cell.low { background: color-mix(in srgb, var(--warn, #d9b38c) 16%, transparent); color: var(--warn, #d9b38c); }

/* QA: Cockpit header controls wrap on phones (dept filter + export buttons) */
.cockpit-head { flex-wrap: wrap; gap: 12px; }
.cockpit-head > div:last-child { flex-wrap: wrap; }
@media (max-width: 640px) {
  .cockpit-head .ck-dept { flex: 1 1 100%; }
  .cockpit-head > div:last-child { width: 100%; }
}

/* ================= Manager Dashboard (compliance command) ================= */
.mgr-heroes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 16px; }
.mgr-hero { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 18px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.mgr-hero .jour-ring { width: var(--sz, 74px); height: var(--sz, 74px); flex-shrink: 0; }
.mgr-hero .jour-ring span { width: calc(var(--sz, 74px) - 16px); height: calc(var(--sz, 74px) - 16px); font-size: 15px; }
.mh-num { font-family: var(--font-mono, ui-monospace); font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.mh-num small { font-size: 15px; color: var(--text-faint); font-weight: 600; }
.mh-num.bad { color: #d98a8a; }
.mh-lbl { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; font-weight: 700; }
.mh-sub { font-size: 13px; margin-top: 6px; font-weight: 600; }
.mh-sub.ok { color: var(--accent-2); } .mh-sub.bad { color: #d9b38c; }
.badge.mg-ok { background: rgba(var(--accent-2-rgb),.14); color: var(--accent-2); border: 1px solid rgba(var(--accent-2-rgb),.35); }
.badge.mg-bad { background: rgba(217,179,140,.14); color: #d9b38c; border: 1px solid rgba(217,179,140,.4); }
.mgr-dist { display: flex; width: 100%; height: 12px; border-radius: 99px; overflow: hidden; gap: 2px; margin-bottom: 10px; }
.md-seg { border-radius: 6px; min-width: 6px; }
.md-seg.done { background: var(--accent-2); }
.md-seg.ok { background: rgba(var(--accent-2-rgb),.45); }
.md-seg.low { background: rgba(217,179,140,.65); }
.mgr-pace { margin-top: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.pace-chart { width: 100%; height: auto; display: block; }
.pc-grid { stroke: rgba(231,237,227,.08); stroke-width: 1; }
.pc-lbl { fill: var(--text-faint); font-size: 11px; font-family: var(--font-body); }
.pc-ideal { fill: none; stroke: rgba(231,237,227,.3); stroke-width: 1.5; stroke-dasharray: 5 5; }
.pc-actual { fill: none; stroke: var(--accent-2); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pc-actual.warn { stroke: #d9b38c; }
.pc-dot { fill: var(--accent-2); } .pc-dot.warn { fill: #d9b38c; }
.pc-now { fill: var(--accent-2); font-size: 13px; font-weight: 700; font-family: var(--font-body); }
.pc-now.warn { fill: #d9b38c; }
.pc-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 11px; color: var(--text-faint); margin-top: 8px; }
.pc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pc-key { width: 18px; height: 0; border-top: 2.5px solid var(--accent-2); display: inline-block; }
.pc-key.ideal { border-top: 2px dashed rgba(231,237,227,.4); }
.mgr-q { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; }
.mgr-q:hover { background: var(--surface); border-color: var(--line); }
.mgr-q b { font-size: 15px; }
.mgr-reasons { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.mrow { cursor: pointer; }
.mdet { max-width: 520px; width: min(520px, 92vw); max-height: 86vh; overflow-y: auto; }
.mdet-meta { display: flex; gap: 8px 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-faint); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.mdet-meta b { color: var(--text-dim); }
@media (max-width: 640px) { .mgr-heroes { grid-template-columns: 1fr 1fr; } .mh-num { font-size: 22px; } }

/* ================= Phase 5: multi-tenant ================= */
#suspendBar { position: sticky; top: 0; z-index: 950; background: color-mix(in srgb, var(--warn, #d9b38c) 22%, var(--bg)); color: var(--text); border-bottom: 1px solid var(--warn, #d9b38c); padding: 10px var(--gutter, 20px); font-size: 13px; font-weight: 600; text-align: center; }

/* ================= Pain-point pass: modes, trust, story ================= */
.tmode-row { display: flex; gap: 6px; padding: 8px 14px 0; flex-wrap: wrap; }
.tmode { background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: 5px 11px; font-size: 11px; font-weight: 600; color: var(--text-dim); cursor: pointer; font-family: var(--font-body); transition: border-color .15s, color .15s; }
.tmode.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.grounded-note { padding: 5px 16px 0; font-size: 11px; color: var(--text-faint); }
.trust-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.trust-list li { font-size: 13px; color: var(--text-dim); line-height: 1.55; padding-left: 4px; }
.story-card { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.story-text { font-family: var(--font-display); font-size: 18px; line-height: 1.6; font-style: italic; color: var(--text); max-width: 640px; margin-bottom: 10px; }
.player-goal { font-size: 13px; color: var(--accent-2); margin-top: 4px; max-width: 720px; }
.nudge-head { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); padding: 10px 14px 6px; }

/* ===== honesty & trust pass (edr62) ===== */
.trust-peek { margin-top: 14px; }
.trust-peek summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); list-style: none; user-select: none; }
.trust-peek summary::-webkit-details-marker { display: none; }
.trust-peek summary::after { content: ' ▾'; opacity: .6; }
.trust-peek[open] summary::after { content: ' ▴'; }
.trust-peek .trust-list { margin-top: 12px; padding: 14px 16px; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 10px; }
.ask-model { margin-top: 14px; font-size: 11px; color: var(--text-dim); opacity: .75; letter-spacing: .03em; }
.q-flag { font-size: 15px; opacity: .55; }
.q-flag:hover { opacity: 1; color: var(--accent); }
.missed-note { font-size: 13px; color: var(--accent-2); margin: -6px 0 12px; }
.fresh-tag { color: var(--accent-2); }

/* ===== in-video checkpoints (edr64) ===== */
.player-stage { position: relative; }
/* body-level fixed: above the player (z 400) when a lesson ends, and a whole
   dialog of its own when a review session starts from home */
.ck-ov { position: fixed; inset: 0; display: none; place-items: center; background: rgba(8,12,9,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 460; padding: 18px; }
.ck-ov.on { display: grid; }
.ck-card { width: min(560px, 100%); max-height: 100%; overflow-y: auto; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 22px 24px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.ck-q { font-family: var(--font-display); font-size: 22px; line-height: 1.35; margin: 8px 0 14px; }
.ck-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.ck-note { flex: 1; font-size: 13px; color: var(--text-dim); }

/* ===== evidence ledger & verified competency (R2-9/R2-5) + pretest (R2-12) ===== */
.vc-how { font-size: 13px; color: var(--text-dim); line-height: 1.55; max-width: 560px; }
.vc-ledger { margin-top: 4px; font-size: 13px; letter-spacing: .02em; color: var(--text-faint); }
.pre-sub { font-size: 13px; color: var(--text-dim); margin: 4px 0 10px; line-height: 1.5; }

/* ===== transfer loop (R2-18): intention capture + application check-ins ===== */
.intent-box { margin-top: 18px; padding: 16px 18px; background: rgba(var(--accent-2-rgb),.06); border: 1px solid rgba(var(--accent-2-rgb),.2); border-radius: 10px; text-align: left; }
.intent-box .ask-row { display: flex; gap: 10px; margin-top: 10px; }
.intent-box .auth-input { flex: 1; }
.intent-panel .intent-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 0; border-bottom: 1px solid var(--line); }
.intent-panel .intent-row:last-child { border-bottom: none; }
.intent-info { flex: 1; min-width: min(260px, 100%); font-size: 15px; }
.intent-info span { display: block; color: var(--text-dim); font-size: 13px; font-style: italic; margin-top: 3px; }
.intent-btns { display: flex; gap: 8px; }

/* auth-gate privacy link */
.auth-privacy { display:block; text-align:center; margin-top:14px; font-size: 11px; color:var(--dim, #9aa598); text-decoration:none; opacity:.75; }
.auth-privacy:hover { opacity:1; text-decoration:underline; }

/* GDPR consent notice + AI Act disclosure */
.auth-notice { font-size: 11px; color:var(--dim,#9aa598); line-height:1.5; margin:0 0 12px; text-align:center; opacity:.85; }
.auth-notice a { color:inherit; text-decoration:underline; }
.ai-disclosure { font-size: 11px; color:var(--dim,#9aa598); opacity:.7; margin-top:2px; }

/* EAA/a11y pass */
:focus-visible { outline: 2px solid var(--accent, #c8a45d); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* Touch devices have no real hover — without this, a tap leaves cards stuck in
   their lifted state (sticky hover). Lift/reveal effects become hover-only;
   taps still activate normally. */
@media (hover: none) {
  .card:hover { transform: none; box-shadow: none; border-color: var(--line, rgba(231,237,227,.12)); }
  .card:hover .thumb .big-icon { transform: none; }
  .card:hover .card-actions { opacity: 0; transform: translateY(6px); }
  .live-card:hover { transform: none; border-color: var(--line, rgba(231,237,227,.12)); }
}

/* ============================================================================
   PREMIUM LAYER — the declutter pass.
   Diagnosis (measured, 2026-07-26): 105 boxes and 646 words on Home alone; the
   repeating pattern was header → explanatory subtitle → boxed content →
   encouragement line. Four layers where premium products use two. These rules
   remove the two decorative layers WITHOUT touching markup or logic, so every
   change is reversible by deleting this block.
   Principles: separation by SPACE and TYPE, not by outlines. One accent, used
   rarely. Numbers speak; captions don't explain them.
   ========================================================================= */

/* 1 · METRICS, not tiles. A dashboard number needs air, not a frame. */
.stat, .stats > .stat {
  background: none; border: 0; border-radius: 0;
  padding: 0 22px 0 0;
}
.stat:hover { transform: none; border-color: transparent; }
.stats { gap: 40px 44px; }
.stat .num { letter-spacing: -.02em; }
.stat .lbl { color: var(--text-faint); letter-spacing: .01em; }
/* remaining deltas are data ("▲ 12m today") — demote, never shout */
.stat .delta { font-weight: 500; color: var(--text-faint); opacity: .72; margin-top: 6px; }
.stat .delta.warn { opacity: .9; }

/* 2 · SECTION RHYTHM. Headers earn their space; sub-captions whisper. */
.admin-section { margin-top: 64px; }
.admin-section > h2 { letter-spacing: -.015em; margin-bottom: 4px; }
.admin-section > .sect-sub { color: var(--text-faint); opacity: .78; max-width: 56ch; margin-bottom: 22px; }

/* 3 · DE-BUBBLE. Kill the outline on surfaces that spacing already separates.
   Netflix separates with darkness and gaps — not with 129 borders. */
.cert-card, .asg-card, .live-card {
  border-color: transparent;
  background: rgba(231,237,227,.03);
}
/* panels already sit inside .admin-section — no second surface */
.intent-panel, .vc-panel { border-color: transparent; background: none; }
.cert-card:hover, .asg-card:hover, .live-card:hover { border-color: rgba(255,255,255,.13); }

/* 4 · NO BOX-IN-BOX. A panel inside a section wrapper is one box too many. */
.admin-section .admin-section,
.admin-section > .vc-panel, .admin-section > .intent-panel { background: none; border: 0; padding-left: 0; padding-right: 0; }

/* 5 · CHIP DIET. Chips only where they classify; otherwise plain text. */
.badge, .chip { font-weight: 500; letter-spacing: .02em; }

/* 6 · QUIETER EDGES everywhere: one hairline value, not five weights. */
:root { --line: rgba(231,237,227,.09); }

/* ============================================================================
   PREMIUM LAYER 2 — component consolidation.
   Audit found 217 container rules, 26 chip classes, 172 visible borders, and
   five blue-grey backgrounds left over from a different theme sitting inside a
   warm green palette. This block collapses the visual language without
   touching markup: three chip treatments, one hairline, one warm accent,
   no box-inside-a-box. Reversible by deleting the block.
   ========================================================================= */

/* 1 · OFF-PALETTE BUG — cool greys in a warm forest UI. Real defect, not taste. */
.modal { background: rgba(16, 21, 17, .97); }
.onboard-card { background: rgba(16, 21, 17, .94); }
.hero-side { background: rgba(16, 21, 17, .62); }
.snode { background: #141b15; }
.stat .num { background: none; -webkit-text-fill-color: currentColor; color: var(--text); }

/* 2 · CHIPS: 26 classes → 3 treatments. Same shape, same size, always.
   (a) neutral: quiet, borderless, pill */
.chip, .org-chip, .mod-pill, .filter-chip, .tmode, .comp-cell, .rx,
.status-chip, .pub-chip, .badge-hd, .you-tag, .mis-xp, .pin-badge {
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
  padding: 4px 10px; border-radius: 99px;
  border: 0; background: rgba(231,237,227,.07); color: var(--text-faint);
  backdrop-filter: none;
}
/* (b) accent: gold, used sparingly — text-led, not a surface */
.chip.ai, .ai-tag, .xp-chip, .off-badge, .admin-badge, .hero-eyebrow {
  border: 0; background: color-mix(in srgb, var(--accent) 11%, transparent); color: var(--accent);
}
.chip.ai { background: color-mix(in srgb, var(--accent) 14%, transparent); }
/* (c) state: COLOUR ONLY. A status needs no container. */
.due, .due.ok, .review-flag, .status-chip.ok, .status-chip.risk,
.pub-chip.live, .pub-chip.draft, .pub-chip.edited, .badge.mg-ok, .badge.mg-bad,
.card-status {
  background: none; border: 0; padding: 0; border-radius: 0;
  font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
.card-status.done, .due.ok, .status-chip.ok, .pub-chip.live, .badge.mg-ok { color: #8fb18e; }
.card-status.due-soon, .due, .review-flag, .status-chip.risk, .pub-chip.draft, .badge.mg-bad { color: var(--warn, #d9b38c); }
/* the hero eyebrow: a label, not a lozenge */
.hero-eyebrow { background: none; padding: 0; border-radius: 0; color: var(--accent); letter-spacing: .34em; }

/* 3 · ONE WARM ACCENT. Amber #fbbf24 was a second, unrelated warm hue. */
:root { --warn: #d9b38c; }

/* 4 · NO BOX-IN-BOX (each pair verified in the audit) */
.mis-brief, .ask-ref, .cockpit-chat .coach-chat, .trust-peek .trust-list,
.daily-opt, .poll-opt, .comm-input, .nd-notes, .prof-stats .stat, .ck-dept {
  border-color: transparent;
}
/* NOTE: .level-ring-in keeps its background — it is the donut HOLE, not
   decoration. Removing it turns the level ring into a solid pie (verified
   visually). The audit flagged it as a nested box; it is load-bearing. */
.take-card .flash-card { background: none; border: 0; padding: 0; }
.prof-form .ob-handle { background: none; border: 0; padding: 0; }

/* 5 · ROWS: outline only on hover — the pattern .module-row already got right */
.cert-row, .content-row, .assignment-row, .q-opt, .ob-option {
  border-color: transparent; background: rgba(231,237,227,.035);
}
.cert-row:hover, .content-row:hover, .assignment-row:hover, .q-opt:hover, .ob-option:hover {
  border-color: var(--line);
}
.q-opt.correct, .q-opt.wrong { border-color: currentColor; }

/* 6 · one hairline weight (1.5px existed in exactly three places) */
.snode, .m-num, .ob-option { border-width: 1px; }

/* 7 · an emptied subtitle must occupy no space (copy pass deleted ~20 of them) */
.sect-sub:empty { display: none; }
.sect-sub.sub-auto:empty { display: none; margin: 0; }

/* 8 · page-level subtitles collapse when emptied too */
.page-sub:empty { display: none; }

/* ============================================================================
   PREMIUM LAYER 3 — Library, Community, cockpit.
   Measured before: Library 97 boxes / 74 visible borders; the cockpit's manager
   tiles were a grid of boxes each containing a ring; the channel rail was
   borderless on desktop, boxed on mobile and a pill elsewhere (four
   declarations of one control). Same laws as layers 1–2.
   ========================================================================= */

/* 1 · LIBRARY — the artwork IS the card (Netflix). The frame around the frame
   goes; the poster keeps its corners, the text sits on the page. */
.card { background: none; border-color: transparent; box-shadow: none; }
.card:hover { box-shadow: none; border-color: transparent; }
.card .card-body { padding-left: 2px; padding-right: 2px; }
.card:hover .thumb { filter: brightness(1.06); }
.thumb { border-radius: 10px; }

/* 2 · FILTERS are navigation, not buttons — text tabs, one accent for active */
.filter-chip {
  background: none; border: 0; padding: 6px 2px; margin-right: 18px;
  color: var(--text-faint); font-size: 13px; border-radius: 0;
}
.filter-chip:hover { color: var(--text); }
.filter-chip.active {
  /* the pre-existing rule painted a solid accent pill with dark text; with the
     new tab padding that collapsed into a cramped gold box. Text-led instead. */
  background: none !important; color: var(--accent) !important;
  box-shadow: inset 0 -1.5px 0 var(--accent);
}
.filter-row { gap: 0; row-gap: 10px; }

/* 3 · COMMUNITY — one channel-rail treatment everywhere (was four) */
.ch-item, .comm-pills .ch-item { background: none; border: 0; border-radius: 8px; }
.ch-item.active, .comm-pills .ch-item.active { background: rgba(231,237,227,.07); }
.ch-item:hover { background: rgba(231,237,227,.045); }
/* composer held an input that had its own border — one edge, not two */
.composer { background: none; border-color: transparent; padding-left: 0; padding-right: 0; }
.comm-input { border-color: var(--line); }
/* sidebar was four stacked boxes */
.pulse-card { background: none; border-color: transparent; padding-left: 0; padding-right: 0; }
.pulse-card + .pulse-card { border-top: 1px solid var(--line); border-radius: 0; }

/* 4 · COCKPIT — manager tiles follow the .stat law: type and space, no frames */
.mgr-hero, .mgr-pace, .chart-card, .pulse-card, .level-card, .prof-card {
  background: none; border-color: transparent;
}
.mgr-heroes { gap: 32px 40px; }
/* the team table separates by rows, not by an outer frame */
.team-table { background: none; border-color: transparent; }
.team-table th { border-bottom-color: var(--line); }

/* ============================================================================
   PREMIUM LAYER 4 — "cinematic depth" (Dream Motion adaptation)
   Brief: take the template's ORGANISING ideas — bento composition, big section
   rhythm, showcase framing, gradient stage-light — while keeping each brand's
   warm hue and the app's navigation. Everything below uses brand TOKENS
   (--accent/--glow/--bg), so Belong inherits terracotta automatically.
   Note on law 2: bento tiles bring surfaces back deliberately. The original sin
   was MANY UNIFORM SMALL boxes; a bento is FEW, LARGE, VARIED tiles made of
   light rather than outlines. That is the distinction we hold.
   ========================================================================= */

/* 1 · THE STAGE — a warm gradient light behind the content, vignette at edges.
   This is what makes the template feel cinematic rather than flat-dark. */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    /* the key light — warm, high and slightly left, like a stage wash */
    radial-gradient(90% 55% at 38% -8%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
    /* fill light — the secondary brand hue, opposite corner */
    radial-gradient(70% 50% at 100% 6%, color-mix(in srgb, var(--accent-2, var(--accent)) 15%, transparent), transparent 60%),
    /* floor bounce — keeps the lower half from going dead flat */
    radial-gradient(120% 60% at 50% 108%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%);
}
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  /* gentle vignette — enough to focus the centre, never enough to flatten it */
  background: radial-gradient(150% 110% at 50% 42%, transparent 58%, rgba(0,0,0,.42));
}
/* Only #app needs lifting above the stage pseudo-elements. Including .ai-fab /
   .ai-panel here overrode their `position: fixed` at equal specificity and
   dropped the AI tutor into normal flow — the floating button ended up ~4000px
   down the page and the panel added 470px of dead scroll to EVERY route.
   .topnav was unaffected (nav.topnav is more specific) but is removed for
   honesty. Their own z-index (100/200/250) already clears the z-0 stage. */
#app { position: relative; z-index: 1; }

/* 2 · GLASS — elevated surfaces are light, not outlines */
.level-card, .chart-card, .mgr-hero, .prof-card, .pulse-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 14px;
}

/* 3 · BENTO — Progress top row becomes a composed grid, not four equal boxes.
   No markup change: .prog-mini becomes transparent to the grid. */
.prog-top {
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(112px, auto);
  gap: 14px;
}
.level-card { grid-column: 1 / span 3; grid-row: 1 / span 2; }
.prog-mini { display: contents; }
.prog-mini .stat {
  padding: 20px 22px !important;
  display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  border-radius: 14px;
}
.prog-mini .stat:nth-child(1) { grid-column: 4 / span 2; grid-row: 1; }
.prog-mini .stat:nth-child(2) { grid-column: 6;          grid-row: 1; }
.prog-mini .stat:nth-child(3) { grid-column: 4;          grid-row: 2; }
.prog-mini .stat:nth-child(4) { grid-column: 5 / span 2; grid-row: 2; }
.prog-mini .stat .num { font-size: 30px; }

/* 4 · SECTION RHYTHM — the template breathes; so do we */
.admin-section { margin-top: 96px; }
.admin-section > h2 { font-size: 30px; letter-spacing: -.02em; }

/* 5 · SHOWCASE FRAMING — hero art gets stage light, side panel becomes glass */
.hero-side {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 40px 90px rgba(0,0,0,.45);
}
.hero-eyebrow { color: var(--accent); }

/* 6 · GALLERY — Library cards get air and a lift into the light */
.grid { gap: 30px 24px; }
.card { transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .45s; }
@media (hover: hover) {
  .card:hover { transform: translateY(-6px); }
  .card:hover .thumb { filter: brightness(1.1) saturate(1.05); box-shadow: 0 30px 60px rgba(0,0,0,.5); }
}

/* 7 · SCROLL REVEAL — the hidden state is added BY SCRIPT (.will-reveal), so if
   JS never runs nothing is ever invisible. Respects reduced-motion. */
.will-reveal { opacity: 0; transform: translateY(22px); }
.will-reveal.in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) { .will-reveal, .will-reveal.in { opacity: 1; transform: none; transition: none; } }

@media (max-width: 900px) {
  .prog-top { grid-template-columns: repeat(2, 1fr); }
  .level-card { grid-column: 1 / span 2; grid-row: auto; }
  .prog-mini .stat:nth-child(n) { grid-column: auto; grid-row: auto; }
  .admin-section { margin-top: 64px; }
}

/* ============================================================================
   PREMIUM LAYER 5 — "living" motion. The stage should breathe, key surfaces
   should catch light, and numbers should arrive rather than appear.
   Every effect is GPU-cheap (transform/opacity/filter only), pauses under
   prefers-reduced-motion, and never blocks interaction.
   ========================================================================= */

/* 1 · THE STAGE BREATHES — a 22s drift so the light is never static.
   Animating a fixed pseudo-element's transform costs nothing on the main thread. */
@keyframes stageDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-2.5%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
/* transform only — animating this element's OPACITY made every backdrop-filter
   surface in the app (nav, tutor panel, glass tiles) recompute its blur on each
   of the 22s animation's frames, permanently. */
body::before { animation: stageDrift 22s ease-in-out infinite; will-change: transform; }

/* 2 · CRYSTAL SHEEN — a slow specular sweep across glass surfaces. */
@keyframes sheen { 0% { transform: translateX(-120%) skewX(-18deg); } 100% { transform: translateX(320%) skewX(-18deg); } }
/* .hero-side is deliberately absent: it is `position: absolute` (L259) and
   forcing `relative` here dropped it into the hero flex row, on top of the
   headline. Sheen for it is defined separately below with its own containment. */
.level-card, .prog-mini .stat { position: relative; overflow: hidden; }
.level-card::after, .prog-mini .stat::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.055), transparent);
  transform: translateX(-120%) skewX(-18deg); pointer-events: none;
}
.level-card::after { animation: sheen 9s ease-in-out 1.5s infinite; }
.prog-mini .stat::after { animation: sheen 9s ease-in-out 3s infinite; }

/* 3 · THE RING PULSES with its own light while you're on the page */
/* ringGlow removed: .level-card now clips (overflow:hidden for the sheen), so a
   46px box-shadow bloom was invisible AND animating box-shadow repaints every
   frame. Opacity on an inner element is the cheap, visible equivalent. */
@keyframes ringBreathe { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.level-ring::before {
  content: ''; position: absolute; inset: -10%; border-radius: 50%;
  background: radial-gradient(circle, var(--glow), transparent 68%);
  animation: ringBreathe 5.5s ease-in-out infinite; pointer-events: none;
}
.level-ring { position: relative; }

/* 4 · BUTTONS CATCH LIGHT on hover — a sweep, not a colour change */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28), transparent 70%);
  transform: translateX(-130%); transition: transform .75s cubic-bezier(.2,.8,.2,1);
}
@media (hover: hover) { .btn-primary:hover::after { transform: translateX(130%); } }


/* (a float on .hero-side was removed: a CSS animation on `transform` outranks
   GSAP's inline transform, which silently killed the hero panel's slide-in and
   the blank-screen safety net's `transform: none`.) */

@media (prefers-reduced-motion: reduce) {
  body::before, .level-card::after, .prog-mini .stat::after, .hero-side::after,
  .level-ring, .hero-side { animation: none !important; }
  .btn-primary::after { display: none; }
}

/* ============================================================================
   PREMIUM LAYER 6 — corrections. A conflict audit of layers 1–5 found override
   collisions that silently destroyed STATE FEEDBACK and a few layout defects.
   Restoring meaning always outranks restoring uniformity.
   ========================================================================= */

/* 1 · QUIZ ANSWERS — layer 2 collapsed correct/wrong to `border-color:
   currentColor`, making a right answer and a wrong answer look IDENTICAL.
   This is the most damaging regression of the whole redesign. */
.q-opt.correct { border-color: rgba(143,177,142,.75) !important; background: rgba(143,177,142,.12); color: #cfe3ce; }
.q-opt.wrong   { border-color: rgba(248,113,113,.7)  !important; background: rgba(248,113,113,.10); color: #f0c4c4; }

/* 2 · MODULE PILLS — layer 2's `border: 0` erased the "done" indicator */
.mod-pill.done { box-shadow: inset 0 0 0 1px rgba(var(--accent-2-rgb),.45); color: var(--accent-2); }
.mod-pill.current { box-shadow: inset 0 0 0 1px var(--accent); }

/* 3 · COMMUNITY RAIL — the active channel lost its gold identity to a grey tint */
.ch-item.active, .comm-pills .ch-item.active {
  background: color-mix(in srgb, var(--accent) 11%, transparent);
  color: var(--accent);
}

/* 4 · PULSE CARDS — layer 3 zeroed horizontal padding, then layer 4 gave them a
   visible background: content was touching the edge. Also un-square the stack. */
.pulse-card { padding: 16px 18px; }
.pulse-card + .pulse-card { border-top: 0; border-radius: 14px; margin-top: 12px; }
/* .mgr-pace was omitted from layer 4's glass group and sat flat beside glass siblings */
.mgr-pace { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; }

/* 5 · PROFILE STATS were a THIRD .stat treatment (boxed) beside flat and glass */
.prof-stats .stat { background: none; border: 0; border-radius: 0; padding: 4px 0; }

/* 6 · BENTO at 901–1024px: layer 4's 6-col grid applied unguarded in the tablet
   band, where the original stylesheet expected 2 columns. */
@media (min-width: 901px) and (max-width: 1024px) {
  .prog-top { grid-template-columns: repeat(2, 1fr); }
  .level-card { grid-column: 1 / span 2; grid-row: auto; }
  .prog-mini .stat:nth-child(n) { grid-column: auto; grid-row: auto; }
}
/* …and make the composition robust to a changed number of tiles instead of
   silently orphaning a 5th one under the feature card. */
.prog-mini .stat:nth-child(n+5) { grid-column: 1 / -1; }

/* 7 · CARD HOVER — the filter transition was declared on .card but the filter is
   applied to .thumb, so the brightness change snapped instead of easing. */
.thumb { transition: filter .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s cubic-bezier(.2,.8,.2,1); }

/* 8 · TOUR SPOTLIGHT — no z-index meant the new vignette painted over the ring */
.tour-ring { z-index: 899; }

/* 9 · NAME TRUNCATION — a long name expanded the 1fr track and pushed the XP
   column out of the leaderboard row (.pr-name 200 lines away does this right). */
.board-name, .mgr-q b, .sk-name, .jsub {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.board-row { grid-template-columns: 28px 34px minmax(0,1fr) 120px auto; }
/* a very long full name must not overflow the A4 certificate sheet */
.cert-sheet .who, .who { max-width: 100%; overflow-wrap: anywhere; }

/* ================== PREMIUM LAYER 7 — the tutor, quieted ==================
   The panel opened with four stacked text blocks in its head (a spark tile, the
   name, the AI note, a demo badge), then five mode chips, then a lock line, and
   only then the conversation. Six things to read before you could ask anything.
   Now: the name, one greeting, four quiet suggestions, the input, one footnote.
   Nothing was deleted — the modes moved behind the gear, and the AI/demo
   disclosure moved into the footnote where it is still always visible. */
.ai-panel-head { padding: 15px 18px 8px; border-bottom: 0; gap: 8px; }
.ai-panel-head .title {
  flex: 1; font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint);
}
.ai-gear {
  background: none; border: 0; padding: 4px; line-height: 1; cursor: pointer;
  font-size: 14px; color: var(--text-faint); opacity: .65;
  transition: opacity .2s, color .2s;
}
.ai-gear:hover { opacity: 1; color: var(--accent); }

/* the greeting is a line of type, not a chat bubble. It sits in its own pool of
   light, resolves word by word, and the empty panel closes up around it —
   an opening line, not a paragraph floating in a tall empty box. */
.ai-msgs { padding: 4px 20px 12px; }
.ai-panel:not(.has-msgs) .ai-msgs { min-height: 0; }
.ai-hello {
  margin: 0; padding: 20px 0 16px;
  font-family: var(--font-display); font-size: 24px; line-height: 1.22;
  letter-spacing: -.005em; color: var(--text);
}
/* the same signature the hero headline uses — last word warm and italic — so
   the tutor reads as part of the product, not a chat widget bolted onto it.
   (A gradient-clipped line was tried first: the animated word spans inherit
   the transparent text-fill but not the container's gradient, so it paints
   nothing at all.) */
.ai-hello .w:last-of-type {
  font-style: italic;
  color: color-mix(in srgb, var(--accent-2) 72%, var(--text));
}
/* the light it sits in — painted on the container, not as an oversized
   pseudo-element: negative insets inside a scrollable box gave the panel a
   horizontal scrollbar, and z-index:-1 hid the glow behind the panel itself */
.ai-panel:not(.has-msgs) .ai-msgs {
  background: radial-gradient(52% 58% at 24% 44%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%);
}
.ai-hello .w {
  display: inline-block;
  opacity: 0; filter: blur(9px); transform: translateY(9px);
  animation: helloWordIn .62s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--i) * 58ms);
}
@keyframes helloWordIn { to { opacity: 1; filter: blur(0); transform: none; } }
/* insurance: never leave the line invisible if animation never runs */
.ai-hello.settled .w { opacity: 1 !important; filter: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ai-hello .w { animation: none; opacity: 1; filter: none; transform: none; }
}
@media (max-width: 480px) { .ai-hello { font-size: 21px; padding: 16px 0 14px; } }

/* suggestions: text, not five more pills — and gone once you're talking */
.quick-row { padding: 0 20px 12px; gap: 7px 16px; }
.quick {
  background: none; border: 0; padding: 0; font-size: 12.5px; font-weight: 500;
  color: var(--text-faint);
}
.quick:hover { background: none; border-color: transparent; color: var(--accent); }
.ai-panel.has-msgs .quick-row { display: none; }

.ai-foot {
  padding: 0 18px 13px; font-size: 10.5px; line-height: 1.4;
  color: var(--text-faint); opacity: .7;
}
/* modes + live/demo status, relocated into the settings sheet */
.tutor-settings .ts-sub {
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-faint); margin: 16px 0 8px;
}
.tutor-settings .tmode-row { padding: 0; }
.tutor-settings .status { font-size: 11px; font-weight: 600; color: var(--accent-2); margin-top: 14px; }

/* ============ PREMIUM LAYER 8 — the CTA belongs to the brand ============
   Seven rules hard-coded EdenRise's sage (#b6cfb0 → #9bbd97) as the primary
   action colour: every primary button, the tutor send key, the active filter,
   the current module pill, the user's own chat bubble, the toggle and the
   current path node. On a white-label product that is a bug, not a style —
   Belong's terracotta/amber tenant was showing another company's green on the
   first button of the first screen. Derived from --accent-2 so every tenant
   inherits its own, with the dark on-colour that these surfaces need (they are
   light; white text on them measures ~1.9:1). */
:root {
  --cta:       linear-gradient(120deg, color-mix(in srgb, var(--accent-2) 84%, #fff), var(--accent-2));
  --cta-hover: linear-gradient(120deg, color-mix(in srgb, var(--accent-2) 94%, #fff), color-mix(in srgb, var(--accent-2) 90%, #000));
  --cta-shadow: color-mix(in srgb, var(--accent-2) 34%, transparent);
  --on-cta:    #17211a;
}
.btn-primary { background: var(--cta); color: var(--on-cta); box-shadow: 0 8px 26px var(--cta-shadow), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-primary:hover { background: var(--cta-hover); box-shadow: 0 10px 34px var(--cta-shadow), inset 0 1px 0 rgba(255,255,255,.3); }
.ai-send,
.msg.user,
.toggle.on,
.mod-pill.current,
.filter-chip.active,
.seg.current .snode { background: var(--cta); color: var(--on-cta); }
.filter-chip.active { box-shadow: 0 4px 16px var(--cta-shadow); }

/* ========== PREMIUM LAYER 9 — contrast: the opacity tax, repaid ==========
   The base tokens pass (--text-faint is 5.32:1 on --bg). What failed is the
   opacity multipliers the premium layers added on top of them: an audit
   measured .ai-foot at 3.21:1, .stat .delta at 3.32:1, .admin-section .sect-sub
   at 3.71:1 and .ai-gear at ~3.1:1, all under the 4.5:1 AA floor for small text.
   The worst of them was the AI Act Art. 50 disclosure, which the regulation
   requires to be "clear and distinguishable" and accessible — the one line in
   the product that legally may not be the faintest.
   Fix is the same everywhere: drop the multiplier, keep the token. */
.ai-foot            { opacity: 1; color: var(--text-dim); }
.ai-gear            { opacity: 1; color: var(--text-dim); }
.ai-disclosure      { opacity: 1; color: var(--text-dim); }
.stat .delta        { opacity: 1; color: var(--text-dim); }
.stat .delta.warn   { opacity: 1; }
.admin-section > .sect-sub { opacity: 1; color: var(--text-dim); }

/* ====== PREMIUM LAYER 10 — WCAG 2.2 AA, and the transition between routes ======
   Built to 2.2 rather than 2.1 deliberately: EN 301 549 v4 (WCAG 2.2 AA) is
   expected in the OJEU around Oct 2026, so building to 2.1 today means redoing
   the work inside a year — and an enterprise buyer's VPAT question is asked at
   procurement, not after. */

/* 2.4.1 Bypass Blocks — the first control a keyboard user meets */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  padding: 10px 16px; border-radius: 8px;
  background: var(--cta); color: var(--on-cta);
  font: 600 13px/1 var(--font-body); text-decoration: none;
  transition: top .18s cubic-bezier(.2,.8,.2,1);
}
.skip-link:focus { top: 12px; outline: 2px solid var(--text); outline-offset: 2px; }

/* 2.4.11 Focus Not Obscured — the nav is fixed, so tabbing into content parked
   focus underneath it. There was no vertical scroll-padding anywhere. */
html { scroll-padding-top: 92px; }

/* 2.5.8 Target Size (Minimum) — 24x24 CSS px. Measured failures: .lang-btn
   ~21px (~19px under the mobile override), .ai-gear ~22px, .ar-x ~18px. */
.lang-btn, .ai-gear, .assignment-row .ar-x, .rx {
  min-width: 24px; min-height: 24px;
}
.ai-gear { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 640px) { .lang-btn { min-height: 24px; padding: 5px 9px; } }

/* Route transition: short, and it never runs under reduced motion because the
   JS guard skips startViewTransition entirely. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vtOut .16s cubic-bezier(.2,.8,.2,1) both; }
  ::view-transition-new(root) { animation: vtIn  .24s cubic-bezier(.2,.8,.2,1) both; }
}
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn  { from { opacity: 0; transform: translateY(8px); } }
/* the skip target takes programmatic focus; it must not draw a stray ring */
main#app:focus { outline: none; }

/* ===== PREMIUM LAYER 11 — the tenant owns every surface, not just the buttons =====
   An audit walked Belong (terracotta #be594d / amber #f8b556 on #211613) and
   found EdenRise's literals still painting the client's own hero: the left half
   of the hero glowed forest green, a sage orb sat behind the headline, and the
   word "Belong" itself faded from gold into EdenRise's sage. Layer 8 fixed this
   class of bug for buttons and stopped there. A client seeing their brand name
   painted in another company's colours ends the meeting. */
.hero-bg {
  background:
    radial-gradient(ellipse 90% 75% at 78% 12%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
    radial-gradient(ellipse 70% 60% at 12% 88%, color-mix(in srgb, var(--accent-2) 24%, transparent), transparent 66%),
    radial-gradient(ellipse 60% 50% at 50% 50%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--bg) 82%, var(--accent-2)), var(--bg));
}
.orb-1 { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.orb-2 { background: color-mix(in srgb, var(--accent-2) 26%, transparent); }
.grad-text {
  background: linear-gradient(95deg,
    color-mix(in srgb, var(--accent) 55%, #fff) 0%,
    var(--accent) 42%,
    var(--accent-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.avatar { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent)); }
.ai-fab {
  background: conic-gradient(from 200deg, var(--accent), var(--accent-2), color-mix(in srgb, var(--accent) 70%, #000), var(--accent));
  box-shadow: 0 10px 34px color-mix(in srgb, var(--accent) 50%, transparent);
}
/* the flagship AI entry point rendered its ✦ in UA black on near-black:
   measured 1.06:1 — an invisible icon inside a glowing ring, on every screen */
.ai-fab .inner { background: color-mix(in srgb, var(--bg) 86%, #000); color: var(--accent); }

/* Seven cool blue-grey surfaces survived the pass that DESIGN.md law 8 says
   removed them — including the largest surface in the product (the video
   stage), which read blue-purple on a forest page. */
.player-stage, .stage { background-color: color-mix(in srgb, var(--bg) 72%, #000); }
.palette         { background: color-mix(in srgb, var(--bg) 88%, #000); }
.ai-panel        { background: color-mix(in srgb, var(--bg) 90%, #000); }
.notes-drawer    { background: color-mix(in srgb, var(--bg) 88%, #000); }
.avatar-menu     { background: color-mix(in srgb, var(--bg) 86%, #000); }
.rail-arrow      { background: color-mix(in srgb, var(--bg) 84%, transparent); }
.rail-arrow:hover { background: color-mix(in srgb, var(--accent) 18%, var(--bg)); }

/* ---- one-line corrections the audit measured ---- */
/* the nav was on a 1520px column while the entire page is on 1200px: at 1600px
   the logo sat 160px left of the page title, every card, and the footer's own
   copy of the same logo */
nav.topnav { padding: 14px var(--edge); }
/* .btn had no border and .btn-glass a 1px one, so every primary CTA was 2px
   shorter than the secondary beside it and sat 1px lower */
.btn { border: 1px solid transparent; }
/* Cormorant's oldstyle figures render 1 as a capital I: "#I" for rank,
   "I,234 XP" for score, and 3/8 dropping below the baseline */
.num, .mh-num, .stat .num, .prog-mini .num, .kpi .num {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}
/* Layer 8 accidentally beat Layer 3's sanctioned accent underline with a drop
   shadow, so the active filter rendered as a sage smudge cast by an invisible
   box and the underline vanished (DESIGN.md law 15) */
.filter-chip.active {
  box-shadow: inset 0 -1.5px 0 var(--accent);
  background: none;
}
/* the card title sat 3px right of its section heading and 2px right of the
   artwork it labels — leftovers of the card box that Layer 3 removed */
.card { border: 0; }
.card-body { padding: 15px 0 17px; }
/* keyboard users could tab to Play / Add-to-path and never see them */
.card:focus-within .card-actions { opacity: 1; transform: none; }
/* reduced motion: durations were capped but ~15 infinite loops kept cycling */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-iteration-count: 1 !important; }
}
/* a metric that is still loading shows its shape, not an em-dash pretending
   to be a value */
.skel-num { display: inline-block; width: 62px; height: 30px; border-radius: 8px; vertical-align: middle; }

/* ===== PREMIUM LAYER 12 — what a hostile review found in the tab order =====
   The closed tutor panel is opacity:0 + pointer-events:none but still
   display:flex, so it contributed 7 tab stops on every route — including
   behind the login gate, where a keyboard user tabbed through a chat box they
   could not see. Visibility removes it from the tab order and keeps the
   transition (unlike display:none). */
.ai-panel { visibility: hidden; }
.ai-panel.open { visibility: visible; }

/* The wordmark overflowed its own box on a phone and collided with the
   language switch: "EDENRISE" renders 143px inside an 85px box, and the EN
   chip starts at x=139 — 44px of overlap. On Belong the final G sits under it.
   This is a white-label product; the tenant's name cannot be broken. */
@media (max-width: 640px) {
  .logo { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .logo-word { min-width: 0; overflow: hidden; }
  .er-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .er-sub { display: none; }
}
/* The floating tutor button sat on top of every rail's "See all" link — tapping
   the link opened the tutor. */
@media (max-width: 640px) {
  .rail-section:last-of-type, .page > section:last-of-type { padding-bottom: 96px; }
  .ai-fab { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}
/* the AI Act Art. 50 disclosure was the smallest text in the product at 10.5px,
   and an off-scale half-pixel size besides (law 5) */
.ai-foot { font-size: 11px; }
.quick { font-size: 13px; }

/* ═════ PREMIUM LAYER 13 — breathe, lift, move ═════════════════════════════
   Three intents, one pass.

   BREATHE. Not "more empty space" — better rhythm. The hero was 88vh with the
   first course card at y=928 on an 860px screen: on a catalogue product the
   whole first screen proved nothing and the rails still ended 188px short of
   the column. Air goes INSIDE the content (line-height, gaps, padding) while
   the hero gives back enough height for a card to peek.

   LIFT. One elevation ramp instead of eleven ad-hoc shadows, built from light
   rather than outlines (law 17).

   MOVE. Transform and opacity only, hover-capable pointers only, and every bit
   of it off under prefers-reduced-motion. */

:root {
  /* one ramp: rest → hover → floating */
  --e1: 0 2px 10px rgba(0,0,0,.28);
  --e2: 0 14px 38px rgba(0,0,0,.42);
  --e3: 0 30px 80px rgba(0,0,0,.55);
  --lift: cubic-bezier(.2,.9,.25,1);
}

/* ---- breathe ---- */
.hero { min-height: 72vh; }                    /* a card now peeks above the fold */
.hero-copy, .hero-inner { padding-bottom: 8px; }
.page-pad { padding-top: 118px; }
section.rail-section { margin-top: 72px; }     /* was 52 — the rails ran together */
.rail-head { margin-bottom: 20px; }
.page-sub { line-height: 1.65; }
.card-body { padding: 18px 0 22px; }
.card-body h3 { margin-bottom: 6px; letter-spacing: -.005em; }
.msg, .prose, .course-desc, .trust-list li { line-height: 1.62; }

/* the rails held exactly three 300px cards and stopped 188px short of the
   content column, with a "See all →" implying more. Fluid cards let a fourth
   peek, which is what tells a human the row scrolls. */
.rail { gap: 20px; scroll-snap-type: x proximity; scroll-padding-left: var(--edge); }
.card { scroll-snap-align: start; }
@media (min-width: 1025px) { .card { flex: 0 0 calc((100% - 60px) / 3.4); } }
@media (min-width: 641px) and (max-width: 1024px) { .card { flex: 0 0 calc((100% - 20px) / 2.3); } }

/* ---- lift ---- */
.tutor-settings, .avatar-menu, .palette, .notes-drawer, .ai-panel { box-shadow: var(--e3); }
.bento-tile, .level-card, .prog-top .stat, .chart-card { box-shadow: var(--e1); }

/* ---- move ---- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card { transition: transform .42s var(--lift); }
  .card:hover, .card:focus-within { transform: translateY(-6px); }
  .card .thumb { transition: transform .55s var(--lift), box-shadow .42s var(--lift); }
  .card:hover .thumb, .card:focus-within .thumb { transform: scale(1.035); box-shadow: var(--e2); }

  /* the whole row drifts a hair under the cursor — reads as depth, costs one
     transform */
  .rail-section:hover .rail-head h2 { transform: translateX(2px); }
  .rail-head h2 { transition: transform .5s var(--lift); }

  .btn { transition: transform .28s var(--lift), box-shadow .28s var(--lift), background .2s; }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,.3); }
  .btn:active { transform: translateY(0) scale(.985); }

  /* filter tabs: the underline slides in from the left instead of blinking */
  .filter-chip { position: relative; }
  .filter-chip::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px;
    background: var(--accent); transform: scaleX(0); transform-origin: left;
    transition: transform .34s var(--lift);
  }
  .filter-chip:hover::after { transform: scaleX(.35); }
  .filter-chip.active::after { transform: scaleX(1); }

  .mod-pill, .quick, .tmode, .ch-item { transition: transform .26s var(--lift), color .2s, background .2s; }
  .mod-pill:hover, .ch-item:hover { transform: translateX(2px); }
}
/* the active filter's underline now comes from ::after, so drop the inset
   shadow that was doing the same job twice */
.filter-chip.active { box-shadow: none; }

@media (max-width: 640px) {
  .page-pad { padding-top: 96px; }
  section.rail-section { margin-top: 52px; }
  .hero { min-height: 64vh; }
}

/* A rail with three cards ended 218px short of the content column with a
   "See all →" next to it implying more — the fluid width above only helps a
   rail that actually overflows. When there is no fourth card, the row has
   nothing to scroll to: let the cards fill the width and take the dead scroll
   arrows out of the tab order and off the screen. (:has() finally earns its
   keep — the stylesheet had not used it once despite 92% support.) */
@media (min-width: 1025px) {
  /* exactly three: fill the row. One or two: a card that stretches to 1120px
     is not "breathing", it is a billboard — keep those at poster size. */
  .rail:has(.card:nth-child(3)):not(:has(.card:nth-child(4))) .card { flex: 1 1 0; min-width: 0; max-width: 420px; }
  .rail:not(:has(.card:nth-child(3))) .card { flex: 0 0 calc((100% - 60px) / 3.4); }
}
.rail-section:not(:has(.card:nth-child(4))) .rail-arrow { display: none; }

/* ══ PREMIUM LAYER 14 — the flows a phone user could not finish ══════════════
   TEXT SEARCH ON A PHONE. Below 1097px the search pill is display:none, so the
   only search affordance left in the header was a MICROPHONE. A search button
   now sits beside it and opens the palette — the same palette desktop gets
   from ⌘K, which already has fuzzy matching and recents. */
.nav-search-btn { display: none; }
@media (max-width: 1097px) {
  .nav-search-btn { display: grid; place-items: center; }
  .nav-search-btn svg { width: 18px; height: 18px; }
}

/* CARD ACTIONS ON TOUCH. Play and Add-to-path are opacity:0 with only a :hover
   reveal, and the touch stylesheet then re-pinned them to 0 — so on every
   phone and tablet two of a card's three affordances could never be seen or
   used. On a coarse pointer there is no hover to wait for: show them. */
@media (hover: none) {
  .card .card-actions { opacity: 1; transform: none; }
  .card:hover .card-actions { opacity: 1; transform: none; }
}

/* the onboarding option that the disabled button is waiting for */
.nudge-attn { animation: attnPulse .6s ease 2; }
@keyframes attnPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
  50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
}
/* a field the form is complaining about */
.field-bad { border-color: color-mix(in srgb, #e0a08a 70%, transparent) !important; }

/* ══ PREMIUM LAYER 15 — the billboard, and the row that took its place ══════
   The hero carried a five-item path panel beside a 64px headline: two things
   competing to be the first thing read, on the screen that has one job. The
   billboard is now one title, three facts, one action and the progress of the
   course you are actually on — and the path became a row underneath, read left
   to right like everything else on the page. */
.hero-content { max-width: 780px; }
.hero-side { display: none; }               /* moved out; kept for any brand that still renders it */

.path-row-section { margin-top: 40px; }
.path-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(190px, 1fr);
  gap: 12px; overflow-x: auto; scroll-snap-type: x proximity;
  /* without this the snap aligns the first tile to the container edge and
     scrolls straight past the gutter — the row starts 72px left of its own
     heading even though the padding is correct */
  scroll-padding-inline: var(--edge);
  /* the section is already full-bleed and .rail-head carries the gutter, so a
     negative margin here double-counted it and pulled the first step to x=0,
     72px left of its own heading */
  padding: 2px var(--edge) 6px;
  scrollbar-width: none;
}
.path-row::-webkit-scrollbar { display: none; }
.pstep {
  position: relative; scroll-snap-align: start; text-align: left;
  display: grid; gap: 3px; padding: 14px 16px 16px;
  background: color-mix(in srgb, var(--bg) 78%, #fff 3%);
  border: 0; border-radius: 12px; cursor: pointer; font-family: var(--font-body);
  transition: transform .34s var(--lift), background .3s;
}
.pstep:hover, .pstep:focus-visible { transform: translateY(-3px); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.pstep.locked { cursor: default; opacity: .5; }
.pstep.locked:hover { transform: none; background: color-mix(in srgb, var(--bg) 78%, #fff 3%); }
.pstep-n {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: var(--text-dim);
  background: color-mix(in srgb, #fff 8%, transparent);
}
.pstep.done .pstep-n { color: var(--on-cta); background: var(--cta); }
.pstep.current .pstep-n { color: var(--on-cta); background: var(--cta); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.pstep-t { font-size: 13px; font-weight: 600; color: var(--text); margin-top: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pstep-s { font-size: 11px; color: var(--text-faint); }
.pstep-bar { display: block; height: 2px; border-radius: 2px; margin-top: 8px;
  background: color-mix(in srgb, #fff 10%, transparent); overflow: hidden; }
.pstep-bar i { display: block; height: 100%; background: var(--accent); }
@media (max-width: 640px) { .path-row { grid-auto-columns: 78%; } }

/* ── the row, the way a streaming service does it ──────────────────────────
   A hovered card lifts ABOVE its neighbours and shows what it is, instead of
   the whole row staying flat and making you click to find out. The scroll
   container needs vertical room for that, and the cards at each end grow
   inward so nothing expands off-screen. */
.rail { padding-block: 16px 22px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card { transition: transform .38s var(--lift), filter .38s var(--lift); will-change: transform; }
  .card:hover, .card:focus-within { transform: scale(1.055) translateY(-4px); z-index: 5; }
  .card:first-child:hover, .card:first-child:focus-within { transform-origin: left center; }
  .card:last-child:hover,  .card:last-child:focus-within  { transform-origin: right center; }
  /* everything else in the row recedes a little — the row gets a focal point */
  .rail:hover .card:not(:hover) { filter: brightness(.72) saturate(.9); }
  .rail:hover .card:not(:hover) .thumb { transform: none; }
}
/* the paddles: only while the row is hovered, and only when it can move */
.rail-arrow { opacity: 0; transition: opacity .22s ease, background .22s ease; }
@media (hover: hover) {
  .rail-section:hover .rail-arrow { opacity: 1; }
}
.rail-arrow:focus-visible { opacity: 1; }
/* the continue-watching bar: thicker and in the accent, so a half-finished
   course is legible from across the row */
.card-progress { height: 3px; border-radius: 3px; background: color-mix(in srgb, #fff 12%, transparent); }
.card-progress .fill { background: var(--accent); }

/* ── the player's lesson strip ─────────────────────────────────────────────
   1009px of pills in an 836px box with the scrollbar hidden and no fade: the
   fifth lesson was clipped mid-word and the sixth did not exist as far as the
   eye could tell. A mask says "there is more", scroll-snap makes dragging land
   cleanly, and the current lesson is scrolled to centre on open. */
.mod-pills {
  scroll-snap-type: x proximity; scroll-padding-inline: 12px;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent 100%);
  padding-right: 12px;
}
.mod-pill { scroll-snap-align: start; }
/* the strip is a list of lessons — say so to a screen reader */
.mod-pills:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ══ PREMIUM LAYER 16 — what a Netflix teardown actually verified ═══════════
   Two scouts read the live site. Most of the numbers people quote for Netflix
   (the 1.5× hover, the 500ms expand) turned out to be tutorial authors' own
   choices, not measurements — so only the first-hand findings are here.

   MOTION. Their real tokens: 250ms, and TWO curves — a fast-settling one on the
   way in, an ease-in on the way out. Asymmetry is what makes a hover feel
   answered rather than animated. */
:root {
  --t-fast: 250ms;
  --e-in:   cubic-bezier(.32, .94, .6, 1);     /* entering  */
  --e-out:  cubic-bezier(.4, 0, .68, .06);     /* leaving   */
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card { transition: transform var(--t-fast) var(--e-out), filter var(--t-fast) var(--e-out); }
  .card:hover, .card:focus-within { transition-timing-function: var(--e-in); }
  .btn { transition: transform var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out), background .2s; }
  .btn:hover { transition-timing-function: var(--e-in); }
}

/* THE GRADIENT. Every scrim on netflix.com is a THIRTEEN-stop hand-eased ramp,
   never a two-stop fade — that is what kills the banding you get from
   linear-gradient(transparent, #000) on a large dark surface. Same shape here,
   in our own background colour. */
.hero-fade {
  background: linear-gradient(
    rgba(0,0,0,0) 0%,      color-mix(in srgb, var(--bg) 1%,  transparent) 8.333%,
    color-mix(in srgb, var(--bg) 4.3%,  transparent) 16.67%,
    color-mix(in srgb, var(--bg) 10%,   transparent) 25%,
    color-mix(in srgb, var(--bg) 17.6%, transparent) 33.33%,
    color-mix(in srgb, var(--bg) 28%,   transparent) 41.67%,
    color-mix(in srgb, var(--bg) 40%,   transparent) 50%,
    color-mix(in srgb, var(--bg) 52%,   transparent) 58.33%,
    color-mix(in srgb, var(--bg) 62.4%, transparent) 66.67%,
    color-mix(in srgb, var(--bg) 70%,   transparent) 75%,
    color-mix(in srgb, var(--bg) 75.7%, transparent) 83.33%,
    color-mix(in srgb, var(--bg) 79%,   transparent) 91.67%,
    var(--bg) 100%);
}

/* CONTINUE WATCHING. Verified: their fill element sits INSIDE the artwork,
   flush to its bottom edge — not below it in the text block, where ours was.
   A half-finished course now reads from the poster itself. */
.thumb { position: relative; }
.thumb .card-progress {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  height: 4px; border-radius: 0;
  background: rgba(255,255,255,.28);
}
.thumb .card-progress .fill { height: 100%; background: var(--accent); }

/* THE PADDLE. Gated on scroll POSITION, not just hover — at the start of a row
   there is nothing to go back to, so the control is not offered. Their paddle
   is an opaque block that occludes the peeking card rather than a fade. */
.rail-arrow[disabled], .rail-arrow[aria-disabled="true"] { opacity: 0 !important; pointer-events: none; }

/* SEQUENCE NUMERALS. Their Top-10 device is a two-layer data-content trick: a
   thick stroked glyph with a second copy stamped over it to punch the interior.
   Netflix ranks by popularity, which for mandatory training would tell a
   learner the unpopular courses are optional — so we use it for ORDER, where
   the number means something. */
.pstep { padding-left: 42px; }
.pstep-n {
  position: absolute; left: 10px; top: 12px;
  width: auto; height: auto; background: none !important; box-shadow: none !important;
  font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--text) 42%, transparent);
}
.pstep.done .pstep-n, .pstep.current .pstep-n {
  -webkit-text-stroke: 1.5px var(--accent); color: color-mix(in srgb, var(--accent) 22%, transparent);
}

/* ══ PREMIUM LAYER 17 — the billboard and the row that rides over it ════════
   Verified off netflix.com: `.billboard-row` reserves only 40% of viewport
   WIDTH as layout height while `.billboard` paints 56.25vw — so the first row
   overlaps the hero by roughly 16vw rather than starting below it, and the
   hero's own bottom vignette (14.7vw tall, fading to the page colour at 68%)
   is what makes the seam invisible. That overlap is the reason their home page
   reads as one continuous surface instead of a header plus a list. */
.featured-row {
  position: relative; z-index: 3;
  /* must beat the 72px section rhythm as well as clear the divider, or the row
     lands 127px BELOW the hero instead of riding over it */
  margin-top: calc(-1 * clamp(90px, 11vw, 190px));
}
/* the hairline divider exists to separate the hero from what follows — when
   the featured row deliberately overlaps it, there is nothing to divide */
.page:has(.featured-row) .hero-divider { display: none; }
.featured-row .rail-head h2 { font-size: clamp(20px, 1.6vw, 30px); }
/* their bottom vignette is 14.7vw and lands on the page colour at 68% —
   ours was a flat 180px, which is why the seam showed at large widths */
.hero-fade { height: max(180px, 14.7vw); }

/* Row titles on netflix.com are #e5e5e5, not white: the title is a signpost,
   the artwork is the content. Same idea in our own token. */
.rail-head h2 { color: color-mix(in srgb, var(--text) 90%, transparent); }

/* Nav: transparent over the billboard, solid page colour once you leave it,
   over 400ms — their exact treatment, including the permanent top scrim that
   keeps the wordmark legible while transparent. */
.topnav { transition: background-color .4s ease, border-color .4s ease; }
.topnav.over-hero {
  background: linear-gradient(180deg, rgba(0,0,0,.7) 10%, transparent);
  border-bottom-color: transparent;
  backdrop-filter: none;
}
/* the account menu is now the way to everything that is not "carry on" */
.avatar-menu { min-width: 208px; }
.avatar-menu .am-primary { font-weight: 600; color: var(--text); }
.avatar-menu .am-sep { height: 1px; background: var(--line); margin: 6px 4px; }
/* the concierge's answer: two courses, each startable in one click */
.rec-list { display: grid; gap: 8px; margin: 12px 0 6px; }
.rec-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.rec-item b { display: block; font-size: 13px; }
.rec-item span { display: block; font-size: 11px; color: var(--text-faint); margin-top: 2px; }
.rec-note { display: block; font-size: 11.5px; color: var(--text-faint); }

/* ══ PREMIUM LAYER 18 — the billboard is the course's own artwork ═══════════
   The hero art was a 60%-wide panel at 50% opacity behind a mask: decoration
   made from a poster. Netflix gives the artwork the whole billboard and then
   earns the text back with two scrims — a left one for the copy, a bottom one
   that dissolves into the first row. Both verified off their live CSS:
   `linear-gradient(77deg, rgba(0,0,0,.6), transparent 85%)` inset from the
   right at 26.09%, and a 13-stop eased ramp at the bottom.
   The artwork is now the REAL cover of the course you are resuming, at full
   strength, moving slowly. */
.hero-art {
  inset: 0; width: 100%; opacity: 1;
  /* Course posters are title cards — they carry their own lettering. Favour the
     photographic side and crop in, so the artwork's baked-in title does not sit
     under ours (Netflix avoids this by shipping title-less key art plus separate
     logo art; we have one asset, so we frame it). */
  background-size: cover; background-position: 88% 45%;
  -webkit-mask-image: none; mask-image: none;
  transform-origin: 60% 45%;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-art { animation: kenBurns 34s cubic-bezier(.37,0,.63,1) infinite alternate; }
}
@keyframes kenBurns {
  from { transform: scale(1.16) translate3d(0, 0, 0); }
  to   { transform: scale(1.25) translate3d(-1.4%, -1.2%, 0); }
}
/* the copy scrim — Netflix's own angle and inset, in our background colour so
   a tenant's page tone carries through */
.hero::before {
  content: ''; position: absolute; inset: 0 26.09% 0 0; z-index: 2; pointer-events: none;
  background: linear-gradient(77deg,
    color-mix(in srgb, var(--bg) 96%, transparent) 0%,
    color-mix(in srgb, var(--bg) 80%, transparent) 42%,
    transparent 88%);
}
.hero-content { position: relative; z-index: 4; }
.hero-fade { z-index: 3; }
/* the orbs and the grid were doing the decorating the artwork now does */
.hero .orb, .hero-grid { opacity: .35; }

@media (max-width: 900px) {
  .hero-art { width: 100%; opacity: .9; background-position: 62% top;
    -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 92%);
            mask-image: linear-gradient(180deg, #000 35%, transparent 92%); }
  .hero::before { inset: 0; background: linear-gradient(180deg, transparent 8%, color-mix(in srgb, var(--bg) 82%, transparent) 58%); }
}
/* the hub's tabs, and its doorways to what used to have nav slots */
.me-tabs { display: flex; gap: 22px; padding: 8px var(--edge) 0; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.me-tab {
  background: none; border: 0; padding: 10px 0 12px; cursor: pointer;
  font: 600 14px/1 var(--font-body); color: var(--text-faint);
  box-shadow: inset 0 -1.5px 0 transparent; transition: color .2s, box-shadow .2s;
}
.me-tab.on { color: var(--text); box-shadow: inset 0 -1.5px 0 var(--accent); }
.me-tab:hover { color: var(--text); }
.me-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 6px; }
.me-link {
  text-align: left; background: color-mix(in srgb, var(--bg) 78%, #fff 3%); border: 0;
  border-radius: 12px; padding: 16px 18px; cursor: pointer; font-family: var(--font-body);
  transition: transform var(--t-fast) var(--e-out), background var(--t-fast) var(--e-out);
}
.me-link:hover { transform: translateY(-3px); background: color-mix(in srgb, var(--accent) 9%, var(--bg)); }
.me-link b { display: block; font-size: 14px; color: var(--text); }
.me-link span { display: block; font-size: 12px; color: var(--text-faint); margin-top: 3px; }
.md-sep { height: 1px; background: var(--line); margin: 10px 0; }
.md-signout { background: none; border: 0; text-align: left; padding: 10px 0; color: var(--text-dim); font: 500 15px/1 var(--font-body); cursor: pointer; }
/* Course posters are TITLE CARDS — the artwork carries the course name baked
   into it. Netflix never has this problem: they ship title-less key art plus a
   separate logo image. With one asset, cropping cannot escape lettering that
   spans the frame, so the copy side gets a blurred copy of the same photograph
   masked over it: the ghost text dissolves, the light and colour survive, and
   the right side stays sharp. */
.hero-art.blurred {
  filter: blur(26px) saturate(1.08) brightness(.86);
  transform: scale(1.3);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 54%, transparent 80%);
          mask-image: linear-gradient(90deg, #000 0%, #000 54%, transparent 80%);
  animation: none;
}
@media (max-width: 900px) {
  .hero-art.blurred {
    -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 72%);
            mask-image: linear-gradient(180deg, transparent 30%, #000 72%);
  }
}

/* ══ PREMIUM LAYER 19 — sharpness, and one line instead of a box ════════════
   The blurred second layer was smearing the poster's baked lettering into grey
   blobs behind the headline, and the Ken Burns zoom was upscaling a 1400×932
   asset past its own resolution. Both gone: a course can now ship `heroArt` —
   a pre-cropped photograph with no lettering in it — and the drift is small
   enough that the image is never asked for pixels it does not have. */
.hero-art.blurred { display: none; }
.hero-art {
  background-position: 62% 46%;
  image-rendering: auto;
  backface-visibility: hidden;          /* keeps the transform on the GPU crisp */
}
@keyframes kenBurns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(-.9%, -.7%, 0); }
}
/* the copy still needs its own darkness — now the only thing between the text
   and the photograph, so it does the work alone */
.hero::before {
  background: linear-gradient(88deg,
    color-mix(in srgb, var(--bg) 97%, transparent) 0%,
    color-mix(in srgb, var(--bg) 88%, transparent) 34%,
    color-mix(in srgb, var(--bg) 55%, transparent) 58%,
    transparent 82%);
  inset: 0 18% 0 0;
}

/* Ask: one line. It was a bordered card wrapping a heading, a subtitle, an
   input and a filled button — four elements to say "type here". */
.ask-line-wrap { padding-top: 4px; padding-bottom: 4px; }
.ask-line {
  display: flex; align-items: center; gap: 12px;
  padding: 0 4px 12px; border-bottom: 1px solid var(--line);
  transition: border-color .25s var(--e-out);
}
.ask-line:focus-within { border-bottom-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.ask-line .ask-ic { color: var(--accent); font-size: 15px; line-height: 1; }
.ask-line input {
  flex: 1; background: none; border: 0; outline: none; padding: 6px 0;
  font: 400 16px/1.4 var(--font-body); color: var(--text);
}
.ask-line input::placeholder { color: var(--text-faint); }
.ask-go {
  background: none; border: 0; cursor: pointer; padding: 4px 6px;
  color: var(--text-faint); font-size: 17px; line-height: 1;
  transition: color .2s var(--e-out), transform .2s var(--e-out);
}
.ask-line:focus-within .ask-go, .ask-go:hover { color: var(--accent); transform: translateX(2px); }

/* ── nav: a destination label must never wrap. "My learning" was breaking onto
   two lines and shoving the row out of alignment. ── */
.nav-links a { white-space: nowrap; }
.nav-links { gap: 2px; }
@media (min-width: 1025px) and (max-width: 1180px) {
  .nav-links a { padding: 7px 10px; font-size: 12.5px; }
}
/* the course page's quiet third and fourth choices */
.course-quiet { display: flex; gap: 18px; align-items: center; margin-top: 12px; flex-basis: 100%; }
.course-quiet .link-quiet { font-size: 13px; }

/* ══ PREMIUM LAYER 20 — the hero, given depth ══════════════════════════════
   Five layers instead of one flat photograph: grain, the artwork, a light that
   follows the pointer, the copy scrim, the fade into the first row. Everything
   here is transform or opacity, and all of it stops under reduced motion.
   DESIGN.md law 17: depth comes from light, not from borders. */

/* 1 · the artwork drifts at a quarter of the scroll — distance, not lag */
.hero-art { transform: translate3d(0, var(--sy, 0px), 0) scale(1.04); }
/* rate reduced 0.24 → 0.16: enough to feel like depth, not enough to look like a parallax demo */
@media (prefers-reduced-motion: no-preference) {
  .hero-art { animation: kenBurns 40s cubic-bezier(.37,0,.63,1) infinite alternate; }
}
@keyframes kenBurns {
  from { transform: translate3d(0, var(--sy, 0px), 0) scale(1.03); }
  to   { transform: translate3d(0, var(--sy, 0px), 0) scale(1.085); }
}

/* 2 · a wide, soft light that follows the pointer at a tenth of its speed —
       enough to feel lit, not enough to read as an effect */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(58% 62% at var(--mx, 62%) var(--my, 40%),
    color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 66%);
  mix-blend-mode: screen; opacity: .8;
  transition: opacity .6s var(--e-out);
}
@media (prefers-reduced-motion: reduce) { .hero::after { display: none; } }

/* 3 · film grain. A dark gradient with no noise in it is the single clearest
       tell of a rendered surface; 3.5% of animated noise is what stops the sky
       banding and makes the photograph read as film. */
.hero-grid {
  inset: 0; opacity: .14; z-index: 3; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.42'/></svg>");
  background-size: 256px 256px;
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-grid { animation: grainShift 620ms steps(3) infinite; }
}
@keyframes grainShift {
  0%   { background-position: 0 0; }
  33%  { background-position: -18px 12px; }
  66%  { background-position: 14px -16px; }
  100% { background-position: 0 0; }
}

/* 4 · the headline resolves word by word, then the rest of the block follows */
.hero-h1 .hw {
  display: inline-block;
  opacity: 0; filter: blur(10px); transform: translateY(20%);
  animation: heroWord 1s cubic-bezier(.25,.1,.25,1) both;
  animation-delay: calc(200ms + var(--i) * 90ms);
}
@keyframes heroWord { to { opacity: 1; filter: blur(0); transform: none; } }
.hero-eyebrow, .hero-meta, .hero .desc, .hero-actions, .hero-progress {
  animation: heroRise 1s cubic-bezier(.25,.1,.25,1) both;
}
.hero-eyebrow  { animation-delay: 60ms; }
.hero-meta     { animation-delay: 420ms; }
.hero .desc    { animation-delay: 500ms; }
.hero-actions  { animation-delay: 580ms; }
.hero-progress { animation-delay: 660ms; }
@keyframes heroRise { from { opacity: 0; filter: blur(10px); transform: translateY(20%); } to { opacity: 1; filter: blur(0); transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-h1 .hw, .hero-eyebrow, .hero-meta, .hero .desc, .hero-actions, .hero-progress {
    animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important;
  }
}
/* the same guarantee as everywhere else: motion may never leave text invisible */
.hero-settled .hw, .hero-settled .hero-eyebrow, .hero-settled .hero-meta,
.hero-settled .desc, .hero-settled .hero-actions, .hero-settled .hero-progress {
  opacity: 1 !important; filter: none !important;
}

/* 5 · a single light passes across the primary action, once, on arrival */
.hero-actions .btn-primary { position: relative; overflow: hidden; }
.hero-actions .btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.42) 50%, transparent 70%);
  transform: translateX(-120%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-actions .btn-primary::before { animation: ctaSheen 1.1s cubic-bezier(.4,0,.2,1) 1.15s both; }
}
@keyframes ctaSheen { to { transform: translateX(120%); } }

/* the headline earns more size now that it is the only thing competing */
.hero h1 { letter-spacing: -.02em; }


/* ── the rim light. Linear's single most distinctive move: a 1px border whose
   highlight is a 200px elliptical mask that travels — first on the intro
   tween, then on scroll. It is what makes a flat panel read as a physical
   object catching light. Ours runs along the seam where the billboard hands
   over to the first row. ── */
.hero-rim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 4;
  background: color-mix(in srgb, var(--accent-2) 70%, #fff);
  -webkit-mask-image: radial-gradient(ellipse 220px 200px at var(--rim-x, 12%) 50%,
    #000 0%, #0009 30%, #0003 50%, #0000 70%);
          mask-image: radial-gradient(ellipse 220px 200px at var(--rim-x, 12%) 50%,
    #000 0%, #0009 30%, #0003 50%, #0000 70%);
  opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-rim { animation: rimIn 1.5s cubic-bezier(.455,.03,.515,.955) .4s both, rimTravel 9s cubic-bezier(.455,.03,.515,.955) 1.6s infinite alternate; }
}
@keyframes rimIn { 0% { opacity: 0; } 20% { opacity: .85; } 100% { opacity: 1; } }
@keyframes rimTravel { from { --rim-x: 8%; } to { --rim-x: 78%; } }
@property --rim-x { syntax: '<percentage>'; inherits: false; initial-value: 12%; }

/* ══ PREMIUM LAYER 21 — corrections, from six teardowns read out of shipped code ══
   Five sites were read at source level (Stripe, Linear, Apple, Vercel, Framer,
   Netflix, Family). Six bugs in Layer 20 came out of that audit, and four
   verified techniques replaced my own guesses. */

/* BUG · blend modes were escaping their stacking context. `isolation` appeared
   nowhere in 3,400 lines, so screen and overlay were compositing against
   whatever ancestor happened to form a context — including the page's own
   stage lights. */
.hero { isolation: isolate; }

/* BUG · the grain was masked into a blob. .hero-grid carried
   `mask-image: radial-gradient(ellipse 70% 60% at 65% 30%, …)` from its
   previous life as a decorative grid; Layer 20 replaced the background and
   never reset the mask, so the film grain lived in an off-centre ellipse. */
.hero-grid { -webkit-mask-image: none; mask-image: none; }

/* BUG · `overlay` on a #0e140f ground degenerates to multiply — the grain was
   darkening almost nothing at full cost. On a dark surface the dither has to
   ADD light: screen. Opacity drops accordingly (Linear ships its big grain
   plate at .08). And the shift now moves a transform, not background-position,
   which was repainting a full-bleed layer ~5×/second. */
.hero-grid {
  mix-blend-mode: screen; opacity: .05;
  inset: -25%; width: 150%; height: 150%; will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-grid { animation: grainShift 500ms steps(4) infinite; }
}
@keyframes grainShift {
  0%   { transform: translate3d(0,0,0); }
  25%  { transform: translate3d(-2%, 1.5%, 0); }
  50%  { transform: translate3d(1.8%, -2%, 0); }
  75%  { transform: translate3d(-1.2%, -1.4%, 0); }
  100% { transform: translate3d(0,0,0); }
}

/* BUG · the pointer light was painting ABOVE the copy scrim — both pseudos sat
   at z-index 2 and ::after paints later, so moving the cursor lifted the
   luminance behind 92px display type. Law 18 territory. */
.hero::after { z-index: 1; }

/* BUG · blurred decorative orbs at z-index 1 sat ON TOP of the photograph.
   They exist to decorate an empty background; once there is real key art they
   are noise over content, and Tuch et al. (2012) found visual complexity is
   scored at 17ms — before anything else. */
.hero .orb { display: none; }

/* VERIFIED · Netflix masks the media well itself before applying any scrim:
   the artwork fades to 40% between 70% and 100% of hero height, then the
   gradient darkens on top. Two soft passes instead of one hard one. */
.hero-art {
  -webkit-mask-image: linear-gradient(180deg, #fff 70%, rgba(255,255,255,.4) 100%);
          mask-image: linear-gradient(180deg, #fff 70%, rgba(255,255,255,.4) 100%);
}

/* VERIFIED · family.co's headline, read from their shipped bundle: per word,
   937ms, cubic-bezier(.19,1,.22,1), 50ms stagger, y 100%→0 and rotateX −45°→0
   inside an overflow-hidden h1 with perspective 600. The mask is the line box
   itself. This replaces my 14px blur — which was 7× the reference value for a
   blur transition and the most expensive property in the entrance. */
.hero-h1 { perspective: 600px; overflow: hidden; padding-bottom: .32em; margin-bottom: -.18em; padding-right: .3em; }
.hero-h1 .hw {
  opacity: 0; filter: none; transform: translateY(100%) rotateX(-45deg);
  transform-origin: 50% 100%;
  animation: heroWord .937s cubic-bezier(.19, 1, .22, 1) both;
  animation-delay: calc(300ms + var(--i) * 50ms);
}
@keyframes heroWord { to { opacity: 1; transform: translateY(0) rotateX(0); } }
/* their sub-copy lands at 1.0s and the buttons at 1.1s — a curtain, then the
   rest of the block */
.hero-eyebrow  { animation-delay: 200ms; }
.hero-meta     { animation-delay: 1s; }
.hero .desc    { animation-delay: 1.05s; }
.hero-actions  { animation-delay: 1.1s; }
.hero-progress { animation-delay: 1.2s; }

/* the sheen was 0.42 white over an already highlighted sage button — hot
   enough to read as a "buy now" shimmer. Once, softer, shorter. */
.hero-actions .btn-primary::before {
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.26) 50%, transparent 68%);
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-actions .btn-primary::before { animation: ctaSheen 900ms cubic-bezier(.4,0,.2,1) 1.3s both; }
}
/* a hero that has already introduced itself this session does not do it again */
.hero-seen .hw, .hero-seen .hero-eyebrow, .hero-seen .hero-meta,
.hero-seen .desc, .hero-seen .hero-actions, .hero-seen .hero-progress,
.hero-seen .btn-primary::before {
  animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important;
}

/* ── PREMIUM LAYER 22 · the frame around the picture ──────────────────────────
   The hero art was already good; everything touching its edges was not. */

/* 1 · The nav must be readable over ANY tenant's artwork. The scrim was a 66px
   fade, so the search pill — sitting top-right, exactly where this hero puts
   its brightest sky — washed out to unreadable. Netflix solves this with a
   taller, softer top scrim than the bar itself, and it is the reason their
   nav survives every billboard they ship. */
nav.topnav::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 168px;
  background: linear-gradient(180deg, rgba(8,12,9,.82) 0%, rgba(8,12,9,.52) 38%, transparent 100%);
  pointer-events: none; z-index: -1;
}
nav.topnav.scrolled::before { opacity: 0; transition: opacity .35s; }

/* the pill carries its own darkness rather than borrowing the page's */
.search {
  background: rgba(10,15,11,.52);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-color: rgba(231,237,227,.16);
  color: rgba(231,237,227,.72);
}
.search:hover { background: rgba(10,15,11,.68); border-color: rgba(231,237,227,.3); }

/* 2 · The billboard used to STOP — a 180px fade to a flat band, and the eye
   read the seam as the end of the page rather than the start of the rails.
   A longer fade plus a soft floor lets the art dissolve instead of ending. */
.hero-fade {
  height: 320px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(14,20,15,.35) 42%,
    rgba(14,20,15,.78) 72%,
    var(--bg) 100%);
}

/* 3 · The first rail must PEEK. A homepage whose entire second screen is empty
   space teaches the reader there is nothing below; Netflix always leaves a row
   half-visible, and that sliver is what makes the scroll happen. The hero gave
   up 8vh and the gap between it and the first row lost ~90px. */
.hero { min-height: 72vh; padding-bottom: 40px; }
.hero-divider { margin: 22px auto 18px; }
section.rail-section { margin-top: 40px; }
.page-pad.ask-line-wrap { margin-top: 2px; margin-bottom: 2px; }

/* ── PREMIUM LAYER 23 · the path row gets its pictures ────────────────────────
   Every course owns a filmed cover, and this row — the FIRST thing on the
   homepage, the one a buyer sees before anything else — was the last surface
   still drawing flat tinted boxes. A streaming service's numbered row is
   artwork with the numeral over it, never a list with a bullet. */
.pstep.has-art {
  background-size: cover; background-position: center;
  min-height: 132px; align-content: end;
  border: 1px solid rgba(231,237,227,.08);
  overflow: hidden; isolation: isolate;
}
/* Bottom-weighted so the photograph still breathes at the top of the tile
   while the title stays readable over ANY tenant's photography — this has to
   hold for a cover nobody has seen yet, not just for these. */
.pstep.has-art::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(9,13,10,.14) 0%, rgba(9,13,10,.58) 52%, rgba(9,13,10,.92) 100%);
  transition: background .3s;
}
.pstep.has-art:hover, .pstep.has-art:focus-visible { background-color: transparent; }
.pstep.has-art:hover::after, .pstep.has-art:focus-visible::after {
  background: linear-gradient(180deg, rgba(9,13,10,.04) 0%, rgba(9,13,10,.46) 52%, rgba(9,13,10,.88) 100%);
}
/* a locked step stays a sequence you unlock, not a poster of equal weight */
.pstep.has-art.locked { opacity: 1; filter: saturate(.5) brightness(.6); }
.pstep.has-art.locked:hover { filter: saturate(.5) brightness(.6); background-color: transparent; }
.pstep.has-art .pstep-t { font-size: 14px; text-shadow: 0 1px 12px rgba(0,0,0,.75); }
.pstep.has-art .pstep-s { color: rgba(231,237,227,.78); text-shadow: 0 1px 10px rgba(0,0,0,.75); }
.pstep.has-art .pstep-n { background: rgba(9,13,10,.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ── PREMIUM LAYER 24 · the header, reduced to what a header is for ──────────
   Before: seven competing objects — five nav links, an XP chip, a search box,
   a tenant bubble, a language pair, a bell and an avatar. A bar that busy is a
   toolbar, not a header, and it fights every billboard behind it.
   After: menu · identity · search · self. Everything else moved into the panel,
   which is where a destination list belongs once there is more than a handful. */

/* the menu leads, on every viewport — this used to appear under 900px only */
.nav-burger {
  display: inline-flex !important; margin-left: 0; order: -1;
  width: 40px; height: 40px; border-radius: 12px;
  background: transparent; border: 1px solid transparent;
  color: var(--text); cursor: pointer; flex-shrink: 0;
  align-items: center; justify-content: center;
  transition: background .22s, border-color .22s;
}
.nav-burger:hover { background: rgba(231,237,227,.07); border-color: rgba(231,237,227,.12); }
.nav-burger:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* three hairlines, drawn not iconified, so the middle one can shorten on hover
   — the smallest possible signal that the control is alive */
.burger-lines { display: block; width: 18px; }
.burger-lines i {
  display: block; height: 1.5px; border-radius: 2px; background: currentColor;
  transition: width .28s cubic-bezier(.2,.8,.2,1), opacity .22s;
}
.burger-lines i + i { margin-top: 4.5px; }
.burger-lines i:nth-child(1) { width: 18px; }
.burger-lines i:nth-child(2) { width: 13px; opacity: .8; }
.burger-lines i:nth-child(3) { width: 18px; }
.nav-burger:hover .burger-lines i:nth-child(2) { width: 18px; opacity: 1; }

/* what the bar no longer carries */
.topnav .nav-links,
.topnav .xp-chip,
.topnav .org-chip,
.topnav .lang-toggle,
.topnav .nav-search-btn,
.topnav .nav-mic { display: none !important; }

nav.topnav { gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.nav-right { gap: 10px; margin-left: auto; }

/* ── the search field ──────────────────────────────────────────────────────
   One object: field and microphone in a single pill, divided by a hairline.
   A mic sitting loose in a toolbar is read as decoration — inside the search
   field, past a divider, it can only mean "say it instead of typing it". */
.searchbar {
  display: flex; align-items: stretch;
  background: rgba(10,15,11,.5);
  border: 1px solid rgba(231,237,227,.13);
  border-radius: 999px; overflow: hidden;
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.searchbar:hover { border-color: rgba(231,237,227,.24); background: rgba(10,15,11,.62); }
.searchbar:focus-within { border-color: rgba(var(--accent-2-rgb),.55); box-shadow: 0 0 0 4px rgba(var(--accent-2-rgb),.12); }
.topnav .search {
  display: flex; align-items: center; gap: 9px;
  width: 290px; padding: 0 6px 0 15px; min-height: 40px;
  background: none; border: 0; border-radius: 0;
  color: rgba(231,237,227,.62); font-size: 13.5px; cursor: pointer;
  white-space: nowrap; overflow: hidden;
}
.search-ic { width: 16px; height: 16px; flex-shrink: 0; opacity: .75; }
.search-ph { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.topnav .search kbd {
  font-family: var(--font-body); font-size: 10.5px; font-weight: 600;
  color: rgba(231,237,227,.45); background: rgba(231,237,227,.07);
  border: 1px solid rgba(231,237,227,.1); border-radius: 5px;
  padding: 2px 5px; flex-shrink: 0;
}

/* the microphone — labelled, because an unlabelled glyph is a guess */
.searchbar-mic {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 15px 0 12px; border: 0; background: none; cursor: pointer;
  color: var(--accent-2); font-family: var(--font-body);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border-left: 1px solid rgba(231,237,227,.12);
  transition: color .2s, background .2s;
}
.searchbar-mic svg { width: 16px; height: 16px; }
.searchbar-mic:hover { background: rgba(var(--accent-2-rgb),.1); color: var(--text); }
.searchbar-mic:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.mic-label { line-height: 1; }

/* listening: the field itself says so. Concentric rings are the one voice
   idiom every assistant shares, so nobody has to learn ours. */
.mic-rings { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.mic-rings i {
  position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 1px solid var(--accent-2); border-radius: 50%; opacity: 0; transform: scale(.5);
}
.searchbar.listening { border-color: rgba(var(--accent-2-rgb),.6); background: rgba(var(--bg-rgb),.78); }
.searchbar.listening .searchbar-mic { color: #d6e6d5; }
@media (prefers-reduced-motion: no-preference) {
  .mic-btn.listening .mic-rings i { animation: micRing 1.9s cubic-bezier(.2,.7,.3,1) infinite; }
  .mic-btn.listening .mic-rings i:nth-child(2) { animation-delay: .95s; }
}
@keyframes micRing {
  0%   { opacity: .55; transform: scale(.5); }
  100% { opacity: 0;   transform: scale(1.5); }
}
/* reduced motion still gets an unmistakable state, just a still one */
@media (prefers-reduced-motion: reduce) {
  .mic-btn.listening { background: rgba(var(--accent-2-rgb),.18); }
}

/* ── the bell ──────────────────────────────────────────────────────────────
   It was a 38px filled tile with a border, the same weight as a primary
   control. A notification bell is a passive indicator: no box until touched. */
.topnav .bell {
  width: 38px; height: 38px; border-radius: 12px;
  background: transparent; border: 1px solid transparent;
  color: rgba(231,237,227,.6);
  transition: color .2s, background .2s, border-color .2s;
}
.topnav .bell:hover { background: rgba(231,237,227,.07); border-color: rgba(231,237,227,.12); color: var(--text); }
.topnav .bell svg { width: 18px; height: 18px; }
.topnav .bell-dot { top: 9px; right: 10px; width: 6px; height: 6px; border-width: 1.5px; }

.topnav .avatar { width: 32px; height: 32px; font-size: 12px; border-width: 1.5px; }

/* ── the panel ─────────────────────────────────────────────────────────────
   Now the only home for every destination, so it earns real presentation:
   wider, sectioned, and it slides rather than appears. */
.mobile-drawer-panel {
  width: min(340px, 86vw); padding: 20px 18px 26px;
  background: linear-gradient(180deg, #121a13 0%, #0d130e 100%);
  border-right: 1px solid rgba(231,237,227,.09);
  box-shadow: 40px 0 90px rgba(0,0,0,.55);
}
.mobile-drawer-head { margin-bottom: 16px; }
.mobile-drawer-head .org-chip { display: flex; }
.mobile-drawer .xp-chip { display: inline-flex; margin-bottom: 20px; }
.md-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(231,237,227,.34); margin: 4px 0 8px 12px;
}
.mobile-drawer a {
  font-size: 15px; padding: 11px 12px; border-radius: 10px;
  transition: background .18s, color .18s, padding-left .22s;
}
.mobile-drawer a:hover { padding-left: 16px; }
.mobile-drawer a.active { background: rgba(var(--accent-2-rgb),.12); color: var(--text); }
.md-sep { height: 1px; background: rgba(231,237,227,.09); margin: 16px 4px; }
.drawer-lang { margin-top: 18px; width: 100%; }
.drawer-lang .lang-btn { flex: 1; }

/* phones: the field collapses to its glyph, the label would not fit */
@media (max-width: 720px) {
  .topnav .search { width: auto; padding-right: 2px; }
  .topnav .search .search-ph, .topnav .search kbd { display: none; }
  .mic-label { display: none; }
  .searchbar-mic { padding: 0 12px; }
}

/* ── PREMIUM LAYER 25 · key art, for assets that are not full-bleed landscape ─
   Most course posters are title cards: the name is baked into the picture, so
   full-bleed they print the course name twice — once in the artwork, once in
   our own type — and any badge lockup in them fights the palette. When a course
   ships a photographic PLATE cut out of its poster, frame it as key art: a
   right-hand panel that dissolves leftwards into the page, so the copy sits on
   clean darkness and the photograph keeps its own space. */
.hero-art.fit-key {
  inset: 0 0 0 auto; width: 62%;
  /* anchored to the TOP, not centred: the plate is taller than the band, and a
     centred crop guillotined the subject's head against the nav */
  background-size: cover; background-position: 100% 8%;
  opacity: .92;
  /* Two masks intersected, not one. The horizontal fade alone left the plate
     ending on a hard horizontal edge along the hero's floor — invisible on the
     dark left side, obvious under the bright fire on the right. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 26%, #000 62%),
    linear-gradient(180deg, #000 62%, transparent 99%);
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 26%, #000 62%),
    linear-gradient(180deg, #000 62%, transparent 99%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  transform-origin: 70% 45%;
}
/* the plate is an upscale from a 620px crop — a whisper of grain hides the
   softness the way film does, and costs one composited layer */
.hero-art.fit-key::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px; opacity: .05; mix-blend-mode: overlay;
}
/* it must never crowd the headline on a narrow desktop window */
@media (max-width: 1100px) {
  .hero-art.fit-key { width: 74%; opacity: .55;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 55%); }
}
@media (max-width: 700px) {
  .hero-art.fit-key { inset: 0; width: 100%; opacity: .3; background-position: 30% top;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 62%);
    mask-image: linear-gradient(180deg, #000, transparent 62%); }
}

/* ── PREMIUM LAYER 26 · the panel exists on every viewport ───────────────────
   The drawer's entire ruleset lived inside @media (max-width:1024px), and a
   later rule killed it outright above 1025px with !important — correct when it
   was a phone-only fallback for a desktop nav bar, wrong now that it is the
   ONLY place the destinations live. Restated unconditionally, and it opens from
   the LEFT because that is the edge its button sits on. */
.mobile-drawer {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(6,10,7,.62);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: none; opacity: 0; transition: opacity .3s;
}
.mobile-drawer.open { display: block !important; opacity: 1; }
.mobile-drawer-panel {
  position: absolute; top: 0; right: auto; bottom: 0; left: 0;
  width: min(340px, 86vw);
  background: linear-gradient(180deg, #121a13 0%, #0d130e 100%);
  border-left: 0; border-right: 1px solid rgba(231,237,227,.09);
  padding: 20px 18px 26px; display: flex; flex-direction: column; gap: 4px;
  transform: translateX(-100%); transition: transform .38s cubic-bezier(.2,.8,.2,1);
  box-shadow: 40px 0 90px rgba(0,0,0,.55);
  overflow-y: auto;
}
.mobile-drawer.open .mobile-drawer-panel { transform: translateX(0); }
.mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.mobile-drawer-close {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: transparent; border: 1px solid rgba(231,237,227,.12);
  color: var(--text-dim); cursor: pointer; font-size: 14px;
  transition: background .2s, color .2s;
}
.mobile-drawer-close:hover { background: rgba(231,237,227,.08); color: var(--text); }
.mobile-drawer a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 10px;
  color: var(--text-dim); text-decoration: none; font-size: 15px; font-weight: 550;
  transition: background .18s, color .18s, padding-left .22s;
}
.mobile-drawer a:hover { background: rgba(231,237,227,.06); color: var(--text); padding-left: 16px; }
.mobile-drawer a.active { background: rgba(var(--accent-2-rgb),.12); color: var(--accent-2); }
.md-signout {
  margin-top: 6px; padding: 11px 12px; border-radius: 10px; text-align: left;
  background: none; border: 0; color: #e2857a; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: var(--font-body); transition: background .18s;
}
.md-signout:hover { background: rgba(226,133,122,.1); }
/* a chip should be the width of its content, not of the column it sits in */
.mobile-drawer .xp-chip { align-self: flex-start; }
.mobile-drawer-head .org-chip { cursor: default; }

/* ── PREMIUM LAYER 27 · the search field, quieted ────────────────────────────
   Layer 24 got the STRUCTURE right — one pill, mic inside it — and then shouted
   it: a bold letterspaced "VOICE" in caps, a boxed ⌘K badge, and a divider rule
   between the two halves. Three pieces of chrome doing the job of none. What
   makes a field like this read expensive is restraint: one hairline, one glyph
   weight, one text colour, and nothing raised above anything else until you
   touch it. Everything below removes something. */

.searchbar {
  background: rgba(10,15,11,.34);
  border-color: rgba(231,237,227,.09);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
}
.searchbar:hover { background: rgba(10,15,11,.46); border-color: rgba(231,237,227,.16); }
.searchbar:focus-within {
  background: rgba(10,15,11,.62);
  border-color: rgba(var(--accent-2-rgb),.38);
  box-shadow: 0 0 0 3px rgba(var(--accent-2-rgb),.08);
}

.topnav .search { width: 268px; padding: 0 4px 0 14px; min-height: 38px; gap: 10px; }
.search-ic { width: 15px; height: 15px; opacity: .5; stroke-width: 1.3; }
.search-ph { font-size: 13px; font-weight: 400; color: rgba(231,237,227,.5); letter-spacing: .002em; }

/* the shortcut is a hint, not a key-cap. No box, no border, no fill —
   just quiet type that a returning user's eye already knows where to find. */
.topnav .search kbd {
  background: none; border: 0; padding: 0 2px; border-radius: 0;
  font-size: 11px; font-weight: 500; letter-spacing: .06em;
  color: rgba(231,237,227,.3);
}

/* the microphone: sentence case, normal weight, same colour as the placeholder.
   It was uppercase-bold-letterspaced in accent green, which made a secondary
   control the loudest thing in the header. It earns colour on hover and while
   listening — not before. */
.searchbar-mic {
  border-left: 0;                        /* the divider was a line for its own sake */
  padding: 0 14px 0 8px; gap: 7px;
  color: rgba(231,237,227,.5);
  font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none;
}
.searchbar-mic svg { width: 15px; height: 15px; stroke-width: 1.4; }
.searchbar-mic:hover { background: none; color: var(--accent-2); }
.searchbar-mic:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -3px; border-radius: 999px; }
/* a hairline appears only on hover, to show where the field ends and the
   microphone begins — the one moment that distinction actually matters */
.searchbar-mic::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 16px; background: rgba(231,237,227,.14);
  opacity: 0; transition: opacity .25s;
}
.searchbar:hover .searchbar-mic::before,
.searchbar:focus-within .searchbar-mic::before { opacity: 1; }

/* listening is the ONE state allowed to be loud */
.searchbar.listening { border-color: rgba(var(--accent-2-rgb),.5); background: rgba(var(--bg-rgb),.72); }
.searchbar.listening .searchbar-mic { color: var(--accent-2); }
.searchbar.listening .search-ph { color: rgba(var(--accent-2-rgb),.8); }

@media (max-width: 720px) { .searchbar-mic { padding: 0 12px; } }

/* ── PREMIUM LAYER 28 · the listening state, said once ───────────────────────
   Forcing the state on and LOOKING at it showed two things the rules alone did
   not: "Listening…" printed twice inside one small pill, and the mic grew a
   pale chip behind it — an earlier reduced-motion fallback — which broke the
   single-pill silhouette into two objects exactly when attention matters most.
   The word belongs in the placeholder; the button keeps only its icon. */
.searchbar.listening .mic-label { display: none; }
.searchbar.listening .topnav .search kbd,
.searchbar.listening kbd { opacity: 0; transition: opacity .2s; }
.searchbar-mic.listening,
.searchbar.listening .searchbar-mic { background: none; padding-right: 15px; }
/* the rings are the whole signal — give them room and keep them inside the pill */
.searchbar.listening .mic-rings i { border-color: var(--accent-2); }

/* ── the end-of-lesson check — the event that credits an art. 131.º hour ───── */
.ck-card .mc-q { margin-bottom: 14px; }
.ck-card .mc-q .ck-q { font-size: 15px; margin-bottom: 8px; }
.ck-card .q-opt.sel { border-color: var(--accent-2); background: rgba(var(--accent-2-rgb),.12); }
.ck-card .q-opt.sel .radio { border-color: var(--accent-2); background: var(--accent-2); }
.ck-ack { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 4px; cursor: pointer; font-size: 14px; line-height: 1.5; }
.ck-ack input { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--accent-2); }
.ck-foot .btn[disabled] { opacity: .45; cursor: not-allowed; }
/* a lesson watched but unchecked is not a counted hour — say so where the
   learner sees their progress, not at audit time */
.check-pending { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: #e0c98a; background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 99px; padding: 5px 12px; margin-top: 10px; }

/* ── quiz v2 — confidence, feedback, review ────────────────────────────────── */
.mc-conf { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; font-size: 12px; color: var(--text-faint); }
.conf-b { border: 1px solid rgba(231,237,227,.14); background: none; color: var(--text-dim);
  border-radius: 99px; padding: 3px 11px; font-size: 11.5px; cursor: pointer; font-family: var(--font-body);
  transition: all .2s; }
.conf-b.on { border-color: var(--accent-2); color: var(--accent-2); background: rgba(var(--accent-2-rgb),.1); }
.mc-fb { border-left: 2px solid rgba(231,237,227,.12); padding: 8px 0 8px 14px; margin-bottom: 12px; }
.mc-fb.ok { border-left-color: rgba(var(--accent-2-rgb),.55); }
.mc-fb.ko { border-left-color: rgba(224,137,122,.55); }
.mc-fb .ck-q { font-size: 14px; margin-bottom: 4px; }
.mc-ans { font-size: 13px; color: var(--text-dim); margin: 2px 0 4px; }
.mc-why { font-size: 13px; color: var(--text-faint); font-style: italic; margin: 2px 0 8px; }
/* the learning-loop strip under the ask bar — pending checks + due reviews */
.loop-strip { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 var(--edge); margin: 14px 0 0; }
.loop-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600;
  color: #e0c98a; background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 99px; padding: 7px 14px; cursor: pointer; transition: background .2s; }
.loop-chip:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.loop-chip.rev { color: var(--accent-2); background: rgba(var(--accent-2-rgb),.09); border-color: rgba(var(--accent-2-rgb),.3); }
.loop-chip.rev:hover { background: rgba(var(--accent-2-rgb),.16); }

/* ── PREMIUM LAYER 29 · the check, worthy of the moment ─────────────────────
   This card is where the hour becomes real. It should feel like the platform's
   most considered surface, not a popup: generous card, calm rhythm, one accent.
   Everything here refines PREMIUM LAYER 23's bones without new machinery. */
.ck-card {
  width: min(600px, 100%); border-radius: 18px; padding: 30px 32px 26px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 92%, #fff 2%), var(--bg-2));
  border: 1px solid rgba(231,237,227,.11);
  box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.3);
  animation: ckIn .38s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes ckIn { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .ck-card { animation: none; } }
.ck-card .ob-eyebrow { margin-bottom: 6px; }
.ck-card .pre-sub { margin-bottom: 18px; }
.ck-card .ck-q { font-size: 16px; line-height: 1.45; font-weight: 600; margin: 0 0 12px; }
.ck-card .mc-q { margin-bottom: 22px; }
.ck-card .q-opt {
  border: 1px solid rgba(231,237,227,.1); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  transition: border-color .18s, background .18s, transform .18s;
}
.ck-card .q-opt:hover { border-color: rgba(231,237,227,.24); transform: translateX(2px); }
.ck-card .q-opt.sel { transform: none; }
.ck-card .ck-foot { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ck-card .ck-note { font-size: 12.5px; }
/* feedback state: score becomes the headline, spoken in the display face */
.ck-card .ob-eyebrow b { font-family: var(--font-display); font-size: 1.2em; }
.mc-fb { border-radius: 0 10px 10px 0; padding: 10px 4px 12px 16px; margin-bottom: 14px; background: rgba(231,237,227,.02); }
.mc-fb .btn { margin-top: 4px; }
/* the card breathes inside the viewport; the scrollbar whispers */
.ck-ov { padding: 24px; }
.ck-card { max-height: 86vh; scrollbar-width: thin; scrollbar-color: rgba(231,237,227,.18) transparent; }
.ck-card::-webkit-scrollbar { width: 5px; }
.ck-card::-webkit-scrollbar-thumb { background: rgba(231,237,227,.16); border-radius: 99px; }
.ck-card::-webkit-scrollbar-track { background: transparent; }

/* ── moments: the lesson answering in its own voice ────────────────────────── */
.ask-moments { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 16px; }
.ask-moment { display: flex; gap: 14px; align-items: flex-start; cursor: pointer;
  border: 1px solid rgba(231,237,227,.1); border-radius: 12px; padding: 12px 14px;
  transition: border-color .18s, background .18s; }
.ask-moment:hover { border-color: rgba(var(--accent-2-rgb),.4); background: rgba(var(--accent-2-rgb),.05); }
.am-tc { font-family: var(--font-body); font-size: 11.5px; font-weight: 700; color: var(--accent-2);
  background: rgba(var(--accent-2-rgb),.1); border-radius: 7px; padding: 3px 8px; flex-shrink: 0; margin-top: 2px; }
.am-body { min-width: 0; flex: 1; }
.am-body b { font-size: 13.5px; }
.am-course { font-size: 11.5px; color: var(--text-faint); margin-left: 8px; }
.am-body p { font-size: 13px; color: var(--text-dim); font-style: italic; margin: 4px 0 0; line-height: 1.5; }
.ask-moment .ask-go { align-self: center; }
/* transcript lines: clickable, and the spoken one glows */
.nd-line[data-t] { cursor: pointer; border-radius: 8px; padding: 5px 8px; margin: 0 -8px; transition: background .15s; }
.nd-line[data-t]:hover { background: rgba(231,237,227,.05); }
.nd-line.now { background: rgba(var(--accent-2-rgb),.1); }
.nd-line.now .tc { color: var(--accent-2); font-weight: 700; }

/* ── topics: the knowledge, browsable ──────────────────────────────────────── */
.topics-band { margin: 26px 0 6px; }
.topics-band .ob-eyebrow { margin-bottom: 10px; }
.topics-row { margin-bottom: 4px; }
.tag-chip i { font-style: normal; font-size: 10.5px; opacity: .55; margin-left: 4px; }
.topic-lessons { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 8px; max-width: 720px; }
/* the quick-answers shelf sits apart from formation — visibly reference, not curriculum */
.howto-shelf { margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(231,237,227,.08); }

/* ════════ THE EDUCATOR — rebuilt to DESIGN.md ═════════════════════════════
   The first cut broke six laws: a bordered card in the player and a bordered
   pill on the hero (law 3 — separate with space and darkness, not outlines),
   a box inside the player box (law 4), eight half-pixel type sizes (law 5),
   a filled-and-bordered disclosure chip (law 7 — a state chip is COLOUR only),
   an encouragement subtitle under the band header (law 1), and a decorative ◇
   (law 9). Rebuilt with nothing but type, space and one tonal disc.

   Sizes here are only 11 / 13 / 15 / 18 / 22. Gold stays scarce (law 8): the
   role is muted, not accented, because it repeats on every tile. */

/* the disc — the only mass in the component */
.edu-av { border-radius: 50%; background-size: cover; background-position: center;
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.edu-av.mono { font-family: var(--font-display); color: var(--ivory); letter-spacing: .04em; }
.edu-av.xs { width: 22px; height: 22px; font-size: 11px; }
.edu-av.sm { width: 34px; height: 34px; font-size: 13px; }
.edu-av.md { width: 72px; height: 72px; font-size: 22px; }
.edu-av.lg { width: 60px; height: 60px; font-size: 18px; }

/* tonal, not colour-coded: five low-saturation earths so a team of eight stays
   legible without importing a second palette into a warm green UI (law 8) */
.edu-av.mono.t1 { background: #4a5c46; }
.edu-av.mono.t2 { background: #6b5a45; }
.edu-av.mono.t3 { background: #4a6670; }
.edu-av.mono.t4 { background: #7d5f4c; }
.edu-av.mono.t5 { background: #5f7358; }

/* shared type — one treatment wherever the educator appears */
.edu-nm { font-size: 15px; color: var(--text); font-weight: 600; }
.edu-rl { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .1em; }
.edu-badge.synth { font-size: 11px; color: #9fc4cd; text-transform: uppercase; letter-spacing: .1em; }

/* hero byline — text on the page, no container */
.edu-byline { display: inline-flex; align-items: center; gap: 9px; margin: 12px 0 0;
  padding: 0; background: none; border: 0; cursor: pointer; }
.edu-byline .edu-nm { border-bottom: 1px solid transparent; transition: border-color .2s; }
.edu-byline:hover .edu-nm { border-bottom-color: rgba(231,237,227,.35); }

/* module strip — sits between the video and the pills on plain darkness */
.player-edu-strip:empty { display: none; }
.edu-strip { display: flex; align-items: center; gap: 12px; width: calc(100% - 56px);
  margin: 14px 28px 0; padding: 0; background: none; border: 0; cursor: pointer; text-align: left; }
.edu-strip .edu-go { margin-left: auto; font-size: 13px; color: var(--text-faint);
  border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.edu-strip:hover .edu-go { color: var(--text-dim); border-bottom-color: rgba(231,237,227,.28); }

/* the band — discs and names, two layers (law 1) */
.edu-rail { gap: 34px; padding: 4px 0; }
/* 118px broke "Land & machinery" into a hanging "LAND &" — a tenant writes the
   role, so the tile has to hold two words of it and clamp anything longer */
.edu-tile { flex: none; width: 138px; display: flex; flex-direction: column; align-items: center;
  gap: 4px; background: none; border: 0; padding: 0; cursor: pointer;
  transition: transform .25s var(--lift); }
.edu-tile .edu-rl { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.45; text-wrap: balance; }
.edu-tile .edu-av { margin-bottom: 8px; transition: filter .25s; }
.edu-tile .edu-nm, .edu-tile .edu-rl { text-align: center; }
.edu-tile:hover { transform: translateY(-3px); }
.edu-tile:hover .edu-av { filter: brightness(1.14); }

/* the sheet — the one place with room for their own words */
.edu-sheet { max-width: 500px; text-align: left; }
.edu-sheet-top { display: flex; gap: 16px; align-items: center; }
.edu-sheet-top h3 { font-family: var(--font-display); font-size: 22px; margin: 0 0 3px; }
.edu-line { font-size: 15px; color: var(--text-dim); margin: 18px 0 0; line-height: 1.62; }
.edu-why { font-family: var(--font-display); font-size: 18px; line-height: 1.5; font-style: italic;
  color: var(--text); margin: 14px 0 0; padding-left: 16px; border-left: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.edu-sheet-list { margin-top: 22px; }
.edu-sheet-list .module-row { width: 100%; background: none; border: 0;
  border-top: 1px solid var(--line); display: flex; justify-content: space-between; }

@media (max-width: 640px) {
  .edu-strip { width: calc(100% - 28px); margin: 12px 14px 0; }
  .edu-rail { gap: 20px; }
  .edu-tile { width: 112px; }
  .edu-av.md { width: 60px; height: 60px; font-size: 18px; }
}

/* ════════ QUICK WINS + ATTRIBUTION ═══════════════════════════════════════
   Same laws as the educator pass: type and space, no boxes-in-boxes, sizes
   from 11/13/15/18/22 only, gold scarce. The attribution block is deliberately
   quiet — it is a licence condition, not a badge to show off. */
.attrib { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.attrib-lic { font-size: 13px; color: var(--text-dim); line-height: 1.55; }
.attrib-lic a { color: var(--accent); text-decoration: none; }
.attrib-lic a:hover { text-decoration: underline; }
.attrib-src { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.attrib-src span { font-size: 13px; color: var(--text-faint); }
.attrib-lbl { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
.edu-creds { margin: 12px 0 0; padding-left: 18px; }
.edu-creds li { font-size: 13px; color: var(--text-dim); line-height: 1.6; }
.edu-more { display: inline-block; margin-top: 14px; font-size: 13px; color: var(--accent); text-decoration: none; }
.edu-more:hover { text-decoration: underline; }

.qw-secs { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
.qw-card { flex: 0 0 260px; scroll-snap-align: start; cursor: pointer; background: none; border: 0;
  padding: 0; text-align: left; transition: transform .25s var(--lift); }
.qw-card:hover { transform: translateY(-3px); }
.qw-card h3 { font-family: var(--font-display); font-size: 18px; margin: 6px 0 4px; color: var(--text); }
.qw-card p { font-size: 13px; color: var(--text-dim); line-height: 1.55; margin: 0; }
.qw-by { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); margin-top: 8px; }
.qw-deeper { font-size: 13px; color: var(--accent-2); margin-top: 6px; }
.qw-nodeep { font-size: 13px; color: var(--text-faint); }

.qw-sheet { max-width: 560px; text-align: left; }
.qw-video { position: relative; padding-top: 56.25%; margin: 14px 0; border-radius: 14px; overflow: hidden; }
.qw-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.qw-line { font-size: 15px; color: var(--text-dim); line-height: 1.62; }
.qw-next { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.qw-next .btn { margin-top: 8px; }

.qw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 12px; }
.qw-cur { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0;
  border-top: 1px solid var(--line); }
.qw-cur.on .qw-cur-body b { color: var(--accent-2); }
.qw-cur-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qw-cur-body b { font-size: 15px; }
.qw-cur-body span { font-size: 13px; color: var(--text-faint); }
.qw-cur-acts { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex: none; }
.qw-sched { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 10px; }
.qw-sched label { display: flex; flex-direction: column; gap: 5px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); }
.qw-sched select, .qw-sched input { background: var(--surface); border: 1px solid var(--line);
  color: var(--text); border-radius: 10px; padding: 8px 10px; font-size: 13px; }
.qw-note { font-size: 13px; color: var(--text-faint); margin-top: 14px; }

/* ════════ CAPABILITY GRAPH ═══════════════════════════════════════════════
   Rows, not tiles (law 2/3): a capability is a fact with a date, and the state
   is carried by one accent on the left edge rather than a coloured box. */
.cap-list { margin-top: 12px; }
.cap-row { display: flex; align-items: baseline; gap: 14px; padding: 12px 0 12px 14px;
  border-top: 1px solid var(--line); border-left: 2px solid transparent; }
.cap-row:first-child { border-top: 0; }
.cap-name { flex: 1; min-width: 0; font-size: 15px; color: var(--text); font-weight: 600; }
.cap-meta { font-size: 13px; color: var(--text-faint); }
.cap-state { font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-faint); min-width: 108px; text-align: right; }
.cap-proven { border-left-color: rgba(var(--accent-2-rgb),.55); }
.cap-proven .cap-state { color: var(--accent-2); }
.cap-expiring { border-left-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.cap-expiring .cap-state { color: var(--accent); }
.cap-lapsed { border-left-color: rgba(185,133,98,.8); }
.cap-lapsed .cap-state { color: #d9a07c; }
.cap-gap { border-left-color: rgba(231,237,227,.16); }
@media (max-width: 640px) {
  .cap-row { flex-wrap: wrap; gap: 4px 12px; }
  .cap-state { min-width: 0; text-align: left; width: 100%; }
}

/* ════════ THE REEL FEED ══════════════════════════════════════════════════
   Phone-shaped everywhere: a 9:16 column centred on black, so one set of rules
   serves a phone and a desktop and the format never lies about itself.

   Immersive means immersive — `body.reels-open` removes the app header and the
   tutor button, which in the first build sat ON TOP of the feed and dropped the
   FAB onto the primary CTA.

   Sizes stay on the scale (11/13/15/18/22/30), gold stays scarce, and the only
   containers are the ones carrying meaning (law 3, law 5, law 8). */
/* The app chrome is `nav.topnav`, not <header> — the first guess hid nothing
   and left the burger sitting on top of the feed's own exit button. */
body.reels-open .topnav,
body.reels-open header,
body.reels-open .ai-fab,
body.reels-open .bottom-nav { display: none !important; }
body.reels-open { overflow: hidden; }

.reel-wrap { position: fixed; inset: 0; z-index: 260; background: #000; }
.reel-feed {
  position: absolute; inset: 0;
  overflow-y: scroll; scroll-snap-type: y mandatory;
  scrollbar-width: none; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.reel-feed::-webkit-scrollbar { display: none; }
.reel {
  position: relative; height: 100dvh; width: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
}

/* ---- the plate: poster first, media on top when mounted ---- */
.reel-poster, .reel-media {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100vw, calc(100dvh * 9 / 16)); height: 100%;
}
.reel-poster { display: grid; place-items: center; padding: 14vh 9vw;
  background-size: cover; background-position: center; }
.reel-media:empty { display: none; }
.reel-vid { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.reel-hook {
  font-family: var(--font-display); font-size: 30px; line-height: 1.22;
  color: var(--ivory); text-align: center; text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,.4);
}
.reel-poster.t1 { background-color: #24331f; background-image: linear-gradient(168deg,#4a5c46,#141d12); }
.reel-poster.t2 { background-color: #2c231a; background-image: linear-gradient(168deg,#6b5a45,#1d1710); }
.reel-poster.t3 { background-color: #1b2a2f; background-image: linear-gradient(168deg,#4a6670,#101a1e); }
.reel-poster.t4 { background-color: #33221a; background-image: linear-gradient(168deg,#7d5f4c,#21150f); }
.reel-poster.t5 { background-color: #23301f; background-image: linear-gradient(168deg,#5f7358,#131c11); }
.reel-poster.has-art .reel-hook { display: none; }

.reel-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.5) 26%, rgba(0,0,0,.06) 56%, transparent 72%);
}

/* ---- top: where you are, and how to leave ---- */
.reel-top {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 6;
  width: min(100vw, calc(100dvh * 9 / 16));
  padding: calc(12px + env(safe-area-inset-top,0px)) 16px 0;
  display: flex; align-items: center; gap: 14px;
}
.reel-x {
  flex: none; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.14);
  color: #fff; font-size: 16px; backdrop-filter: blur(10px);
}
.reel-prog { flex: 1; display: flex; gap: 3px; }
.reel-prog span {
  flex: 1; height: 2px; border-radius: 2px; background: rgba(255,255,255,.22);
  transition: background .35s ease;
}
.reel-prog span.on { background: rgba(255,255,255,.85); }

/* ---- copy: one column, generous, never fighting the video ---- */
.reel-copy {
  position: relative; z-index: 2;
  width: min(100vw, calc(100dvh * 9 / 16));
  padding: 0 20px calc(34px + env(safe-area-inset-bottom,0px));
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
}
.reel-copy-mid { justify-content: center; height: 100%; padding-bottom: 0; }
.reel-copy h2 { font-family: var(--font-display); font-size: 22px; line-height: 1.24;
  margin: 0; color: #fff; text-wrap: balance; }
.reel-copy p { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.8); margin: 0; }
.reel-meta { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.58); }
.reel-ph { font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: #d9c08c; border: 1px solid rgba(217,192,140,.38); border-radius: 99px; padding: 3px 10px; }
/* the handoff: a line, not a slab */
.reel-deeper {
  margin-top: 8px; padding: 0; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 8px; text-align: left;
  color: #fff; font-size: 15px;
}
.reel-deeper .rd-verb { color: rgba(255,255,255,.62); }
.reel-deeper .rd-name { font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.28);
  padding-bottom: 1px; transition: border-color .2s; }
.reel-deeper .rd-arrow { color: rgba(255,255,255,.62); transition: transform .2s var(--lift); }
.reel-deeper:hover .rd-name { border-bottom-color: rgba(255,255,255,.7); }
.reel-deeper:hover .rd-arrow { transform: translateX(3px); }
.reel-copy .edu-byline { margin: 2px 0 0; }
.reel-copy .edu-nm { color: #fff; }

/* the copy settles as the slide lands — the only motion in the feed */
.reel-copy > * { opacity: 0; transform: translateY(9px); }
.reel.current .reel-copy > * { opacity: 1; transform: none;
  transition: opacity .42s var(--lift), transform .42s var(--lift); }
.reel.current .reel-copy > *:nth-child(2) { transition-delay: .04s; }
.reel.current .reel-copy > *:nth-child(3) { transition-delay: .08s; }
.reel.current .reel-copy > *:nth-child(4) { transition-delay: .12s; }
.reel.current .reel-copy > *:nth-child(5) { transition-delay: .16s; }

/* ---- actions ---- */
.reel-rail {
  position: absolute; right: max(14px, calc((100vw - (100dvh * 9 / 16)) / 2 + 14px));
  bottom: 30vh; z-index: 3; display: flex; flex-direction: column; gap: 14px;
}
.reel-act {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: rgba(0,0,0,.34); border: 1px solid rgba(255,255,255,.14);
  color: #fff; backdrop-filter: blur(10px); transition: transform .2s var(--lift), color .2s;
}
.reel-act:active { transform: scale(.92); }
.reel-act.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.reel-feed:not(.sound) .reel-act .wave { opacity: 0; }
.reel-feed.sound .reel-act .slash { opacity: 0; }

.reel-pause { background: radial-gradient(ellipse at 50% 38%, #1d2c20, #050705 72%); }
.reel-pause .reel-copy-mid { align-items: flex-start; gap: 12px; }

/* ---- first-run affordance ----
   It lived bottom-centre and landed on top of the handoff line. Left-aligned
   copy and a centred hint will always fight for the same corner, so the hint
   moves to the action rail, where nothing else sits, and drops its label — the
   chevron says it, and one nudging arrow is less noise than two words. */
.reel-hint {
  position: absolute; z-index: 5; pointer-events: none;
  right: max(14px, calc((100vw - (100dvh * 9 / 16)) / 2 + 14px));
  bottom: calc(30vh - 42px);
  width: 42px; display: grid; place-items: center;
  color: rgba(255,255,255,.55); transition: opacity .45s ease;
}
.reel-hint.gone { opacity: 0; }
.reel-hint span {
  width: 13px; height: 13px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); animation: reelNudge 1.9s ease-in-out infinite;
}
.reel-hint.gone { opacity: 0; }
.reel-hint span {
  width: 15px; height: 15px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); animation: reelNudge 1.9s ease-in-out infinite;
}
@keyframes reelNudge { 0%,100% { transform: rotate(45deg) translate(0,0); opacity: .5; }
  50% { transform: rotate(45deg) translate(3px,3px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .reel-copy > *, .reel.current .reel-copy > * { opacity: 1; transform: none; transition: none; }
  .reel-hint span { animation: none; }
  .reel-feed { scroll-behavior: auto; }
}

/* ---- home tease ---- */
.reel-chip { flex: 0 0 128px; scroll-snap-align: start; background: none; border: 0; padding: 0;
  cursor: pointer; transition: transform .25s var(--lift); }
.reel-chip:hover { transform: translateY(-3px); }
.reel-chip-art { aspect-ratio: 9/16; border-radius: 14px; display: grid; place-items: center;
  padding: 15px; overflow: hidden; }
.reel-chip-art span { font-family: var(--font-display); font-size: 15px; line-height: 1.24;
  color: var(--ivory); text-align: center; text-wrap: balance; }
.reel-chip-art.t1 { background: linear-gradient(168deg,#4a5c46,#141d12); }
.reel-chip-art.t2 { background: linear-gradient(168deg,#6b5a45,#1d1710); }
.reel-chip-art.t3 { background: linear-gradient(168deg,#4a6670,#101a1e); }
.reel-chip-art.t4 { background: linear-gradient(168deg,#7d5f4c,#21150f); }
.reel-chip-art.t5 { background: linear-gradient(168deg,#5f7358,#131c11); }
.reel-chip-meta { font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-faint); margin-top: 8px; text-align: center; }

/* ---- the reel check: rises over the clip, never traps ---- */
.rc {
  position: absolute; left: 50%; bottom: 0; z-index: 7;
  width: min(100vw, calc(100dvh * 9 / 16));
  transform: translate(-50%, 100%); opacity: 0;
  padding: 20px 20px calc(24px + env(safe-area-inset-bottom,0px));
  background: linear-gradient(to top, rgba(6,8,6,.97), rgba(6,8,6,.9));
  border-top: 1px solid rgba(231,237,227,.1);
  transition: transform .34s var(--lift), opacity .34s var(--lift);
}
.rc.up { transform: translate(-50%, 0); opacity: 1; }
.rc-q { font-family: var(--font-display); font-size: 18px; line-height: 1.35; color: #fff; }
.rc-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.rc-opt {
  text-align: left; padding: 12px 14px; border-radius: 12px; cursor: pointer;
  background: rgba(231,237,227,.06); border: 1px solid rgba(231,237,227,.12);
  color: var(--text); font-size: 15px; line-height: 1.4;
  transition: background .18s, border-color .18s;
}
.rc-opt:hover:not(:disabled) { background: rgba(231,237,227,.11); }
.rc-opt:disabled { cursor: default; }
.rc-opt.right { border-color: rgba(var(--accent-2-rgb),.65); background: rgba(var(--accent-2-rgb),.14); }
.rc-opt.wrong { border-color: rgba(185,133,98,.6); background: rgba(185,133,98,.12); }
.rc-why { font-size: 15px; line-height: 1.55; color: var(--text-dim); margin-top: 13px; }
.rc-why b { color: var(--text); font-weight: 600; }
.rc-skip { margin-top: 14px; padding: 0; background: none; border: 0; cursor: pointer;
  font-size: 13px; color: var(--text-faint); }
.rc-skip:hover { color: var(--text-dim); }
@media (prefers-reduced-motion: reduce) { .rc { transition: none; } }

/* ---- PREMIUM LAYER 21 · reel curation state -------------------------------
   Colour only, inside the meta line that already exists — no second pill on a
   card that already carries one (DESIGN law 7: colour-only state chip; law 20:
   a component is not premium because it is decorated). Only a curator ever sees
   this, because only a curator can act on it. */
.reel-meta .pend, .reel-chip-meta .pend { color: #d9c08c; }

/* ---- PREMIUM LAYER 22 · the gate, made visible ---------------------------
   The evidence behind one question: what was asked, the second of video it
   anchors to, the words spoken there, and what the audit did. Space and one
   quiet rule do the separating — no cards inside cards (DESIGN law 1: two
   layers), no second accent (law 8), state carried by colour alone (law 7). */
.cov-caret { opacity: .45; margin-left: 8px; font-size: 11px; }
.cov-ev { padding: 2px 0 10px 0; border-left: 1px solid rgba(231,237,227,.10); margin: -2px 0 10px 14px; }
.cov-q { padding: 12px 0 12px 16px; }
.cov-q + .cov-q { border-top: 1px solid rgba(231,237,227,.07); }
.cov-q-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.cov-audit { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.cov-audit.verified  { color: var(--accent-2); }
.cov-audit.corrected { color: #d9c08c; }
.cov-audit.unaudited,
.cov-audit.malformed { color: #d98a76; }
.cov-at { font-size: 11px; color: var(--text-faint); letter-spacing: .06em; }
.cov-stem { font-size: 15px; line-height: 1.5; }
.cov-key { font-size: 13px; color: var(--text-dim); margin-top: 6px; }
.cov-said { font-size: 13px; color: var(--text-dim); margin-top: 8px; }
.cov-said q { font-style: italic; opacity: .9; }
.cov-wait { opacity: .5; }
.cov-prov { font-size: 11px; color: var(--text-faint); margin-top: 8px; }

/* ---- PREMIUM LAYER 23 · the reel's text lesson ----------------------------
   Collapsed by default. Open, it is a quiet card over the video — not a modal,
   because the clip keeps playing behind it and swiping still works. */
.reel-read { margin-top: 10px; padding: 0; background: none; border: 0; cursor: pointer;
  color: rgba(247,246,241,.72); font: inherit; font-size: 13px; letter-spacing: .04em;
  border-bottom: 1px solid rgba(247,246,241,.28); padding-bottom: 2px; }
.reel-read:hover { color: #fff; border-bottom-color: rgba(247,246,241,.6); }
.reel-lesson { margin-top: 12px; padding: 14px 16px; border-radius: 14px;
  background: rgba(10,14,11,.72); backdrop-filter: blur(14px);
  font-size: 14.5px; line-height: 1.62; color: rgba(247,246,241,.94); max-width: 34em; }
.reel-vlang { display: block; margin-top: 10px; font-size: 11px; letter-spacing: .06em;
  color: rgba(247,246,241,.5); }

/* ---- PREMIUM LAYER 24 · graph links on a lesson row ----------------------
   One quiet line under the title. Key in the faint tone, values in the dim
   one; no chips, no icons (law 7, law 9). */
.mod-links { margin-top: 5px; font-size: 12px; color: var(--text-dim); line-height: 1.5; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.mod-links .ml-k { color: var(--text-faint); letter-spacing: .04em; margin-right: 4px; }

/* ===== Recall: concept tags at timestamps, recent asks, chat moments ===== */
.mod-tags { flex-basis: 100%; width: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mod-tag { font: inherit; font-size: 11.5px; color: var(--text-dim); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 3px 9px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; line-height: 1.4; }
.mod-tag span { color: var(--accent); font-variant-numeric: tabular-nums; }
.mod-tag:hover, .mod-tag:focus-visible { border-color: var(--accent); color: var(--text); }
.ask-recent { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 0; padding-bottom: 6px; }
.ask-recent-k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-right: 2px; }
.chip.ask-again { cursor: pointer; font: inherit; font-size: 12.5px; }
.ask-moments.compact { margin: 10px 0 0; gap: 6px; }
.ask-moments.compact .ask-moment p { display: none; }
.ask-moments.compact .ask-moment { padding: 6px 0; }
.ask-speak { background: none; border: none; cursor: pointer; font-size: 14px; margin-left: 8px; vertical-align: middle; }
@media (max-width: 480px) { .mod-tags { gap: 5px; } .mod-tag { font-size: 11px; padding: 2px 8px; } }

/* ===== links into the library — an answer that names a lesson is a way in ===== */
.ai-link { color: var(--accent); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ai-link:hover, .ai-link:focus-visible { text-decoration-style: solid; }
.am-link { background: none; border: none; cursor: pointer; font-size: 13px; opacity: .55; padding: 4px; align-self: center; }
.am-link:hover, .am-link:focus-visible { opacity: 1; }

/* ===== CINEMA PLAYER =========================================================
   The video is the screen. The stage is black and opaque — nothing from the
   page underneath shows through — and the chrome (title bar, toolbar, educator
   strip) fades away while the video plays, returning on a tap, a mouse move or
   a pause. On phones the video runs edge to edge. Law 3: darkness, not outlines. */
.player-overlay { background: #000; }
.player-stage, .stage { background-color: #000; }
.player-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  padding: 14px 16px; gap: 12px; align-items: center;
  background: linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,0));
  padding-top: max(14px, env(safe-area-inset-top));
}
.player-top > div { min-width: 0; }
.player-top .pt { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.player-top .ps { font-size: 13px; color: var(--text-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-goal { display: none; }
.player-top .back { width: 38px; height: 38px; flex-shrink: 0; background: rgba(255,255,255,.08); border-color: transparent; }
.pl-ic {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border: 1px solid transparent; color: var(--text); font-size: 16px; cursor: pointer;
  transition: background .2s, transform .2s;
}
.pl-ic svg { width: 18px; height: 18px; }
.pl-ic:hover, .pl-ic:focus-visible { background: rgba(255,255,255,.16); }
.player-stage { padding: 0; }
.player-stage video, .vimeo-wrap { box-shadow: none; outline: none; }
.player-bottom {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 18px 16px; padding-bottom: max(18px, env(safe-area-inset-bottom));
  gap: 10px; flex-wrap: nowrap;
  background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.78));
}
.player-bottom .mod-pills { flex: 1; min-width: 0; }
.player-bottom .mod-pill { font-size: 13px; padding: 7px 12px; background: rgba(255,255,255,.06); border-color: transparent; }
.player-bottom .mod-pill.current { box-shadow: none; background: rgba(255,255,255,.14); color: var(--text); }
.player-bottom .mod-pill.done { box-shadow: none; }
.player-bottom #playerComplete { flex-shrink: 0; white-space: nowrap; }
.player-edu-strip { position: absolute; left: 16px; right: 16px; bottom: 84px; z-index: 2; }
/* the chrome leaves */
.player-top, .player-bottom, .player-edu-strip { transition: opacity .38s ease, transform .38s ease; }
.player-overlay.chrome-hidden .player-top { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.player-overlay.chrome-hidden .player-bottom { opacity: 0; transform: translateY(10px); pointer-events: none; }
.player-overlay.chrome-hidden .player-edu-strip { opacity: 0; pointer-events: none; }
@media (hover: hover) { .player-overlay.chrome-hidden .player-stage { cursor: none; } }
/* desktop: the video is framed on black with room to breathe; phones: edge to edge */
@media (min-width: 641px) {
  .player-stage { padding: 0 48px; }
  .player-stage video, .vimeo-wrap { border-radius: 10px; overflow: hidden; }
  .player-top { padding: 16px 24px; }
  .player-bottom { padding: 22px 24px; }
}
@media (max-width: 640px) {
  .player-stage video, .vimeo-wrap { border-radius: 0; }
  .player-bottom #playerComplete { padding: 9px 14px; }
}
@media (prefers-reduced-motion: reduce) { .player-top, .player-bottom, .player-edu-strip { transition: none; } }

/* ===== lesson rows wrap; chips are a quiet second line, not a fifth column ===== */
.module-row { flex-wrap: wrap; row-gap: 0; }
.module-row .m-title { min-width: 0; }
.mod-tags, .mod-links { flex-basis: 100%; width: 100%; padding-left: 52px; }
.mod-tags { margin-top: 8px; }
.mod-links { margin-top: 6px; }
@media (max-width: 640px) {
  .module-row { gap: 12px; padding: 14px 12px; }
  .mod-tags, .mod-links { padding-left: 48px; }
  .mod-tags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 6px; }
  .mod-tags::-webkit-scrollbar { display: none; }
  .mod-tag { flex-shrink: 0; }
  .mod-tag:nth-child(n+4) { display: none; }
  .mod-links { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
  .mod-links .ml { display: inline; }
}
/* player toolbar on phones: numbers, with the current lesson's name */
.mp-n { display: inline-block; }
.mp-t { margin-left: 5px; }
@media (max-width: 640px) {
  .player-bottom .mod-pill { padding: 7px 10px; min-width: 34px; justify-content: center; display: inline-flex; }
  .player-bottom .mod-pill:not(.current) .mp-t { display: none; }
  .player-bottom .mod-pill:not(.current) .mp-n { margin: 0; }
  .player-bottom #playerComplete { font-size: 13px; padding: 8px 12px; }
}
.nd-head .back { background: rgba(255,255,255,.08) !important; border: 1px solid transparent; color: var(--text); border-radius: 50%; }

/* ===== moments: a line, not a box (Law 3); on phones a grid so the quote gets the width ===== */
.ask-moment { border: 0; background: transparent; padding: 12px 4px; border-radius: 10px; transition: background .2s; }
.ask-moment + .ask-moment { border-top: 1px solid var(--line); border-radius: 0; }
.ask-moment:hover, .ask-moment:focus-visible { background: var(--surface); }
.ask-moment .am-body p { margin: 6px 0 0; font-style: italic; color: var(--text-dim); font-size: 13px; line-height: 1.5; }
@media (max-width: 640px) {
  .ask-moment { display: grid; grid-template-columns: auto 1fr auto auto; column-gap: 10px; align-items: center; }
  .ask-moment .am-body { display: contents; }
  .ask-moment .am-body b { grid-column: 2; }
  .ask-moment .am-body .am-course { grid-column: 2; display: block; }
  .ask-moment .am-body p { grid-column: 1 / -1; margin-top: 8px; }
  .ask-moment .am-link { grid-column: 3; grid-row: 1; }
  .ask-moment .ask-go { grid-column: 4; grid-row: 1; }
  .ask-moment .am-tc { grid-row: 1; }
}

/* ===== pass 5 leftovers ===== */
.page .page { padding-top: 0; animation: none; }            /* a page inside a page (My learning) opened with 250px of nothing */
#playerComplete .lbl-short { display: none; }
@media (max-width: 640px) {
  #playerComplete .lbl-long { display: none; }
  #playerComplete .lbl-short { display: inline; }
  .player-bottom .mod-pill.current { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mod-links .ml + .ml::before { content: ' · '; color: var(--text-faint); }
}
/* My learning: the tabs are the header — the inner page must not open with a header's 96px of air */
.me-tabs + .page > .page-pad:first-child, .page .page > .page-pad:first-child { padding-top: 22px; }

/* ---- today's question: a sheet from the bell, not a card on the home page (16 Oct 2026) ---- */
.daily-ov { position: fixed; inset: 0; z-index: 540; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); }
.daily-ov.open { display: flex; }
.daily-sheet { width: 100%; max-width: 560px; }
.daily-sheet .daily { margin: 0; }
.daily-greet { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0 4px 12px; }
.daily-greet .daily-x { position: static; font-size: 16px; }
.nudge-ic:empty { display: none; }
.nudge-ic svg { width: 16px; height: 16px; }
.mc-stats svg, .mt-meta svg, .daily-streak svg { width: 13px; height: 13px; vertical-align: -2px; }
/* ---- live: month calendar ---- */
.live-cal { max-width: 440px; margin: 0 0 26px; padding: 16px 18px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-family: var(--font-display); font-size: 16px; text-transform: capitalize; }
.cal-nav { background: none; border: 1px solid var(--line); color: var(--text-dim); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1; }
.cal-nav:hover { color: var(--text); border-color: var(--accent); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-dow { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--text-faint); padding-bottom: 4px; }
.cal-cell { position: relative; font-size: 13px; color: var(--text-dim); padding: 7px 0; border-radius: 8px; }
.cal-cell.cal-today { color: var(--text); font-weight: 700; box-shadow: inset 0 0 0 1px var(--line); }
.cal-cell.cal-has { color: var(--text); background: rgba(var(--accent-2-rgb), .12); font-weight: 700; }
.cal-cell.cal-has i { position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--accent); }
.cal-none { margin: 12px 2px 2px; font-size: 13px; color: var(--text-faint); }