/*
  site.css
  Consolidated website stylesheet.
  Source order: academy-theme, academy-dark-mode, shared ladder, deprecated products/use-cases, ladder2 overrides.
*/

/* ============================================================
   Source: academy-theme.css
   ============================================================ */
/* ============================================================
   AESOP AI Academy — Shared Theme
   academy-theme.css v1.0.2 | April 2026
   PlayAGame.ai™ | AesopAcademy.org
   
   Usage: <link rel="stylesheet" href="/assets/css/academy-theme.css?v=1.0.0">
   ============================================================ */

/* ─── GOOGLE FONTS IMPORT ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300;1,9..40,400&display=swap');

/* ─── DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Colors */
  --navy:         #0d1b2a;
  --navy-mid:     #16293d;
  --navy-light:   #1e3a52;
  --gold:         #c9a05a;
  --gold-light:   #dbb87a;
  --gold-pale:    #f5e9d0;
  --cream:        #faf8f4;
  --white:        #ffffff;
  --ink:          #1a1a2e;
  --ink-mid:      #2c3e50;
  --ink-light:    #4a5568;
  --ink-muted:    #718096;
  --border:       #e2d9cc;
  --border-light: #ede8df;
  --teal:         #3dd6c0;
  --teal-dark:    #2ba898;
  --green:        #4caf82;
  --amber:        #e6a817;
  --red:          #e05c5c;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(13,27,42,0.08), 0 1px 2px rgba(13,27,42,0.06);
  --shadow-md: 0 4px 16px rgba(13,27,42,0.10), 0 2px 6px rgba(13,27,42,0.07);
  --shadow-lg: 0 12px 40px rgba(13,27,42,0.14), 0 4px 16px rgba(13,27,42,0.08);
  --shadow-gold: 0 4px 24px rgba(201,160,90,0.18);

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Layout — 75vw means 12.5% side padding on desktops, capped at
     1600px so ultrawide monitors don't stretch line lengths past
     readable. min() floor at 1120px keeps tablets/small laptops
     comfortable. */
  --max-w: min(1600px, max(1120px, 75vw));
  --transition: 0.22s ease;
}

/* ─── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: clamp(16px, 1.25vw + 0.5rem, 24px); scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ─── NAV ────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,248,244,0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.nav-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 2rem;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav-brand-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.nav-brand-primary {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  letter-spacing: -0.01em;
  transition: color var(--transition);
}
.nav-brand-primary:hover { color: var(--gold); }
.nav-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
}
.nav-brand-secondary {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--green);
  letter-spacing: 0.01em;
  transition: opacity var(--transition);
}
.nav-brand-secondary:hover { opacity: 0.75; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}
.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-light);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
}
.nav-link:hover {
  background: var(--border-light);
  color: var(--ink);
}
.nav-btn {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.45rem 1rem;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  flex-shrink: 0;
  white-space: nowrap;
}
.nav-btn--forums {
  background: transparent;
  color: var(--teal-dark);
  border: 1.5px solid var(--teal-dark);
}
.nav-btn--forums:hover {
  background: var(--teal-dark);
  color: var(--white);
}
.nav-btn--primary {
  background: var(--navy);
  color: var(--gold-light);
  border: 1.5px solid var(--navy);
}
.nav-btn--primary:hover {
  background: var(--navy-mid);
  box-shadow: var(--shadow-md);
}

/* ─── FOOTER ─────────────────────────────────────────────── */
.footer {
  background: var(--navy);
  color: rgba(255,255,255,0.5);
  padding: 3rem 2rem 2rem;
  font-size: 0.82rem;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 1.75rem;
  margin-bottom: 1.25rem;
}
.footer-brand {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.5rem;
}
.footer-tagline {
  font-style: italic;
  line-height: 1.5;
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
}
.footer-link {
  color: rgba(255,255,255,0.5);
  transition: color var(--transition);
  font-size: 0.82rem;
}
.footer-link:hover { color: var(--gold-light); }
.footer-bottom {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.75rem;
}
.footer-tm   { color: rgba(255,255,255,0.3); }
.footer-patent { color: var(--gold); opacity: 0.6; }

/* ─── SHARED BUTTONS ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  cursor: pointer;
  text-decoration: none;
  border: none;
  font-size: 0.9rem;
}
.btn--primary {
  background: var(--navy);
  color: var(--gold-light);
  padding: 0.75rem 1.5rem;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--navy-mid);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.btn--gold {
  background: var(--gold);
  color: var(--navy);
  padding: 0.85rem 1.8rem;
  box-shadow: var(--shadow-gold);
}
.btn--gold:hover {
  background: var(--gold-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(201,160,90,0.35);
}
.btn--ghost {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  padding: 0.85rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.18);
}
.btn--ghost:hover {
  background: rgba(255,255,255,0.14);
  color: var(--white);
}
.btn--outline-teal {
  background: transparent;
  color: var(--teal-dark);
  border: 1.5px solid var(--teal-dark);
  padding: 0.65rem 1.25rem;
}
.btn--outline-teal:hover {
  background: var(--teal-dark);
  color: var(--white);
}

/* ─── SECTION SHELLS ─────────────────────────────────────── */
.section { padding: 5rem 2rem; }
.section--alt  { background: var(--white); }
.section--dark { background: var(--navy); color: var(--white); }
.section--cream { background: var(--cream); }
.section-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.section-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: 0.9rem;
}
.section--dark .section-title { color: var(--white); }
.section-lead {
  font-size: 1.05rem;
  color: var(--ink-light);
  max-width: 580px;
  line-height: 1.7;
}
.section--dark .section-lead { color: rgba(255,255,255,0.65); }
.section-header { margin-bottom: 3rem; }

/* ─── CARDS ──────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition), transform var(--transition);
}
.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.card--gold-top::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin: -2.25rem -2.25rem 1.75rem -2.25rem;
}
.card--teal-top::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--teal-dark));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  margin: -2.25rem -2.25rem 1.75rem -2.25rem;
}
.card-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* ─── BADGES ─────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: 99px;
}
.badge--dev {
  background: rgba(230,168,23,0.12);
  color: var(--amber);
  border: 1px solid rgba(230,168,23,0.25);
}
.badge--live {
  background: rgba(76,175,130,0.12);
  color: var(--green);
  border: 1px solid rgba(76,175,130,0.25);
}
.badge--pending {
  background: rgba(224,92,92,0.10);
  color: var(--red);
  border: 1px solid rgba(224,92,92,0.2);
}
.badge--gold {
  background: rgba(201,160,90,0.12);
  color: var(--gold);
  border: 1px solid rgba(201,160,90,0.25);
}

/* ─── STATUS LIST ────────────────────────────────────────── */
.status-list {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border-light);
  gap: 1rem;
}
.status-item:last-child { border-bottom: none; }
.status-item-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot--live    { background: var(--green); box-shadow: 0 0 0 2px rgba(76,175,130,0.2); }
.status-dot--dev     { background: var(--amber); box-shadow: 0 0 0 2px rgba(230,168,23,0.2); }
.status-dot--pending { background: var(--red);   box-shadow: 0 0 0 2px rgba(224,92,92,0.2); }
.status-name {
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--ink-mid);
}
.status-tag {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 99px;
  flex-shrink: 0;
}
.status-tag--live    { color: var(--green); background: rgba(76,175,130,0.1); }
.status-tag--dev     { color: var(--amber); background: rgba(230,168,23,0.1); }
.status-tag--pending { color: var(--red);   background: rgba(224,92,92,0.1); }

/* ─── EYEBROW / KICKER TEXT ──────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.25rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(201,160,90,0.3);
  border-radius: 99px;
  background: rgba(201,160,90,0.07);
}
.eyebrow-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  animation: dot-pulse 2.4s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

/* ─── HERO (shared dark hero shell) ─────────────────────── */
.hero {
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
  position: relative;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 65% 40%, rgba(201,160,90,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 10% 80%, rgba(61,214,192,0.07) 0%, transparent 55%),
    linear-gradient(175deg, #0d1b2a 0%, #16293d 60%, #0d1b2a 100%);
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.35;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 5rem 2rem 4.5rem;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 0.4rem;
}
.hero-title em {
  font-style: italic;
  color: var(--gold-light);
}
.hero-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  font-weight: 400;
  font-style: italic;
  color: rgba(255,255,255,0.65);
  margin-bottom: 1.75rem;
  line-height: 1.4;
}
.hero-desc {
  font-size: 1rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
  margin-bottom: 2.25rem;
}
.hero-desc strong { color: rgba(255,255,255,0.95); font-weight: 500; }
.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* ─── PAGE ENTER ANIMATION ───────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fadeUp 0.65s ease both; }
.animate-fade-up-delay { animation: fadeUp 0.65s 0.15s ease both; }

/* ─── BANNER STRIP ───────────────────────────────────────── */
.banner-strip {
  background: var(--gold);
  color: var(--navy);
  padding: 0.6rem 2rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* ─── QUOTE BLOCK ────────────────────────────────────────── */
.quote-section {
  background: var(--navy);
  padding: 4.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.quote-section::before {
  content: '\201C';
  position: absolute;
  top: -0.5rem; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 18rem;
  color: rgba(201,160,90,0.05);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.quote-inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.quote-text {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-style: italic;
  font-weight: 600;
  color: var(--white);
  line-height: 1.45;
  margin-bottom: 1.25rem;
}
.quote-text em { color: var(--gold-light); font-style: normal; }
.quote-source {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

/* ─── STATS STRIP ────────────────────────────────────────── */
.stats-strip {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stat-item {
  padding: 2.5rem 2rem;
  border-right: 1px solid var(--border);
  text-align: center;
}
.stat-item:last-child { border-right: none; }
.stat-number {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.3rem;
}
.stat-label {
  font-size: 0.82rem;
  color: var(--ink-light);
  font-weight: 400;
  line-height: 1.4;
}

/* ─── PAGE HEADER (for inner pages) ─────────────────────── */
.page-header {
  background: var(--navy);
  color: var(--white);
  padding: 3rem 2rem;
  position: relative;
  overflow: hidden;
}
.page-header-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0d1b2a 0%, #16293d 100%);
  opacity: 0.95;
}
.page-header-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
}
.page-header-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255,255,255,0.5);
  margin-bottom: 1.25rem;
  transition: color var(--transition);
}
.page-header-back:hover { color: var(--gold-light); }
.page-header-title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 0.6rem;
}
.page-header-title em { color: var(--gold-light); font-style: italic; }
.page-header-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
  font-style: italic;
  font-family: var(--font-display);
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero-inner { padding: 3.5rem 1.5rem 3rem; }
  .section { padding: 3.5rem 1.5rem; }
  .card-grid-2,
  .card-grid-3 { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-nav { align-items: flex-start; }
}
@media (max-width: 600px) {
  .nav-inner { padding: 0 1rem; gap: 0.75rem; }
  .hero-title { font-size: 2.2rem; }
  .stats-strip { border: none; }
  .stat-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin: 0.25rem;
  }
  .stat-item:last-child { border-right: 1px solid var(--border); }
}

/* ============================================================
   DARK MODE — v1.0.0
   Applied via data-theme="dark" on <html>.
   Uses !important to beat any page-embedded :root blocks.
   Toggle script + pill CSS also live here so ALL pages
   get dark mode just by linking academy-theme.css.
   ============================================================ */

/* Smooth transitions on theme switch */
body, .nav, .card, .footer, .section--alt, .section--cream, .section--dark, .hero {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* ─── DARK MODE TOGGLE (pill switch) ─────────────────────── */
/* Add <button class="dark-mode-toggle" id="darkToggle">
        <span class="dark-mode-toggle__icon" id="darkIcon">☀️</span>
        <span class="dark-mode-toggle__track">
          <span class="dark-mode-toggle__thumb"></span>
        </span>
   </button>
   anywhere in your nav-links div. */
.dark-mode-toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  cursor: pointer; background: none; border: none;
  padding: 0.35rem 0.6rem; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 500;
  color: var(--ink-light); transition: background var(--transition), color var(--transition);
  user-select: none; flex-shrink: 0;
}
.dark-mode-toggle:hover            { background: var(--border-light); color: var(--ink); }
.dark-mode-toggle__track {
  position: relative; width: 34px; height: 19px; border-radius: 99px;
  background: var(--border); border: 1.5px solid var(--border);
  transition: background var(--transition), border-color var(--transition); flex-shrink: 0;
}
.dark-mode-toggle__thumb {
  position: absolute; top: 1.5px; left: 1.5px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--ink-muted);
  transition: transform var(--transition), background var(--transition);
}
[data-theme="dark"] .dark-mode-toggle__track  { background: #c9a05a; border-color: #c9a05a; }
[data-theme="dark"] .dark-mode-toggle__thumb  { transform: translateX(15px); background: #0f1923; }
[data-theme="dark"] .dark-mode-toggle:hover   { background: #2a3a4a; color: #e8e3db; }

/* ─── MODULE LESSON CONTENT PADDING ─────────────────────── */
.lesson-section { padding-left: 5%; padding-right: 5%; }
.story-scene { margin-left: 5%; margin-right: 5%; }
.section-divider { margin-left: 5%; margin-right: 5%; }

/* ─── LEARNER OUTCOMES BLOCK (intro page, under narrative) ── */
/* Injected by .github/scripts/add_course_outcomes.py at the end of the
   intro p-intro story-scene.  Re-uses .story-scene framing so it
   shares left/right margins with the surrounding narrative.            */
.story-scene.learner-outcomes {
  background: rgba(13, 27, 42, 0.04);
  border-left: 3px solid var(--gold);
  padding: 1.4rem 1.75rem 1.6rem;
  border-radius: 6px;
  margin-top: 1.5rem;
}
.learner-outcomes-lead {
  margin-bottom: 0.85rem;
  font-size: 1.02rem;
}
.learner-outcomes-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.learner-outcomes-item {
  position: relative;
  padding-left: 1.5rem;
  padding-bottom: 0.55rem;
  line-height: 1.55;
  font-size: 1rem;
}
.learner-outcomes-item:last-child { padding-bottom: 0; }
.learner-outcomes-item::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--gold);
  font-weight: 600;
}
[data-theme="dark"] .story-scene.learner-outcomes {
  background: rgba(255, 255, 255, 0.04);
}

/* ============================================================
   Source: academy-dark-mode.css
   ============================================================ */
/* ============================================================
   AESOP AI Academy — Dark Mode Theme
   academy-dark-mode.css v1.0.1 | April 2026
   AesopAcademy.org

   Usage:
     <link rel="stylesheet" href="/academy-dark-mode.css">
   Applied by adding data-theme="dark" to <html>.
   Preference persisted in localStorage key: "aesop-theme".
   ============================================================ */

/* ─── DARK MODE TOKEN OVERRIDES ─────────────────────────── */
[data-theme="dark"] {

  /* Surface colors */
  --cream:        #0f1923;   /* page background */
  --white:        #17232f;   /* card / panel background */

  /* Navy STAYS dark navy — do NOT flip to gold.
     Elements that need gold in dark mode are handled
     with explicit rules below, not via this token. */
  --navy:         #0d1b2a;
  --navy-mid:     #16293d;
  --navy-light:   #1e3a52;

  /* Gold stays gold */
  --gold:         #c9a05a;
  --gold-light:   #dbb87a;
  --gold-pale:    rgba(201,160,90,0.12);

  /* Ink → inverted to near-white for body text */
  --ink:          #e8e3db;
  --ink-mid:      #cec8be;
  --ink-light:    #a89f93;
  --ink-muted:    #6e6861;

  /* Borders → subtle on dark surface */
  --border:       #2a3a4a;
  --border-light: #1e2d3d;

  /* Teal stays vibrant on dark */
  --teal:         #3dd6c0;
  --teal-dark:    #2ba898;

  /* Semantic colors — slightly brightened for dark bg */
  --green:        #4fcf8a;
  --amber:        #f0b429;
  --red:          #f07070;

  /* Shadows → deeper on dark */
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.30);
  --shadow-lg:   0 12px 48px rgba(0,0,0,0.55), 0 4px 20px rgba(0,0,0,0.35);
  --shadow-gold: 0 4px 24px rgba(201,160,90,0.22);
}

/* ─── BODY & PAGE BACKGROUND ─────────────────────────────── */
[data-theme="dark"] body {
  background: var(--cream);
  color: var(--ink);
}

/* ─── NAV ────────────────────────────────────────────────── */
[data-theme="dark"] .nav {
  background: rgba(15, 25, 35, 0.96);
  border-bottom-color: var(--border);
}

[data-theme="dark"] .nav-brand-primary {
  color: var(--gold-light);
}
[data-theme="dark"] .nav-brand-primary:hover {
  color: var(--gold);
}

[data-theme="dark"] .nav-link {
  color: var(--ink-light);
}
[data-theme="dark"] .nav-link:hover {
  background: var(--border);
  color: var(--ink);
}

[data-theme="dark"] .nav-btn--primary {
  background: var(--gold);
  color: #0f1923;
  border-color: var(--gold);
}
[data-theme="dark"] .nav-btn--primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}

/* ─── HERO (index page — already dark, tweak overlays) ─── */
[data-theme="dark"] .hero {
  background: #080f17;
}
[data-theme="dark"] .hero-bg {
  background:
    radial-gradient(ellipse 80% 60% at 65% 40%, rgba(201,160,90,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 10% 80%, rgba(61,214,192,0.10) 0%, transparent 55%),
    linear-gradient(175deg, #080f17 0%, #0f1923 60%, #080f17 100%);
}

/* ─── SECTIONS ───────────────────────────────────────────── */
[data-theme="dark"] .section--alt {
  background: #17232f;
}
[data-theme="dark"] .section--cream {
  background: #0f1923;
}
[data-theme="dark"] .section--dark {
  background: #080f17;
}

/* section-title: gold accent on dark is intentional here */
[data-theme="dark"] .section-title {
  color: var(--gold-light);
}
[data-theme="dark"] .section-lead {
  color: var(--ink-light);
}

/* ─── CARDS ──────────────────────────────────────────────── */
[data-theme="dark"] .card {
  background: #17232f;
  border-color: var(--border);
}
[data-theme="dark"] .card:hover {
  border-color: rgba(201,160,90,0.35);
}

/* ─── HEADINGS that use color: var(--navy) in light mode ─── */
/* In light mode these are dark navy text; in dark mode they
   should be light ink — NOT gold. */
[data-theme="dark"] .section-title,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 {
  color: var(--ink);
}

/* section-title overrides the above intentionally to gold */
[data-theme="dark"] .section-title {
  color: var(--gold-light);
}

/* ─── BADGES ─────────────────────────────────────────────── */
[data-theme="dark"] .badge--dev {
  background: rgba(240,180,41,0.14);
  border-color: rgba(240,180,41,0.30);
}
[data-theme="dark"] .badge--live {
  background: rgba(79,207,138,0.12);
  border-color: rgba(79,207,138,0.28);
}
[data-theme="dark"] .badge--pending {
  background: rgba(240,112,112,0.12);
  border-color: rgba(240,112,112,0.25);
}
[data-theme="dark"] .badge--gold {
  background: rgba(201,160,90,0.14);
  border-color: rgba(201,160,90,0.30);
}

/* ─── STATUS LIST ────────────────────────────────────────── */
[data-theme="dark"] .status-item {
  border-bottom-color: var(--border);
}
[data-theme="dark"] .status-name {
  color: var(--ink-mid);
}

/* ─── EYEBROW ────────────────────────────────────────────── */
[data-theme="dark"] .eyebrow {
  border-color: rgba(201,160,90,0.35);
  background: rgba(201,160,90,0.10);
}

/* ─── FOOTER ─────────────────────────────────────────────── */
[data-theme="dark"] .footer {
  background: #080f17;
  border-top: 1px solid var(--gold-pale, rgba(201,160,90,0.18));
  color: var(--ink-mid);
}
[data-theme="dark"] .footer-inner {
  border-bottom-color: var(--border);
}
[data-theme="dark"] .footer-brand {
  color: var(--gold-light);
}
[data-theme="dark"] .footer-tagline {
  color: var(--ink-light);
}
[data-theme="dark"] .footer-link {
  color: var(--ink-mid);
}
[data-theme="dark"] .footer-link:hover {
  color: var(--gold-light);
}
[data-theme="dark"] .footer-tm,
[data-theme="dark"] .footer-patent {
  color: var(--ink-light);
}

/* ─── BANNER STRIP ───────────────────────────────────────── */
[data-theme="dark"] .banner-strip {
  background: #c9a05a;
  color: #0f1923;
}

/* ─── BUTTONS ────────────────────────────────────────────── */
[data-theme="dark"] .btn--primary {
  background: var(--gold);
  color: #0f1923;
}
[data-theme="dark"] .btn--primary:hover {
  background: var(--gold-light);
}

/* ─── DARK MODE TOGGLE BUTTON ────────────────────────────── */
.dark-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-light);
  transition: background var(--transition), color var(--transition);
  user-select: none;
  flex-shrink: 0;
}
.dark-mode-toggle:hover {
  background: var(--border-light);
  color: var(--ink);
}

.dark-mode-toggle__track {
  position: relative;
  width: 34px;
  height: 19px;
  border-radius: 99px;
  background: var(--border);
  border: 1.5px solid var(--border);
  transition: background var(--transition), border-color var(--transition);
  flex-shrink: 0;
}
.dark-mode-toggle__thumb {
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--ink-muted);
  transition: transform var(--transition), background var(--transition);
}

[data-theme="dark"] .dark-mode-toggle__track {
  background: var(--gold);
  border-color: var(--gold);
}
[data-theme="dark"] .dark-mode-toggle__thumb {
  transform: translateX(15px);
  background: #0f1923;
}
[data-theme="dark"] .dark-mode-toggle {
  color: var(--ink-light);
}
[data-theme="dark"] .dark-mode-toggle:hover {
  background: var(--border);
}

.dark-mode-toggle__icon {
  font-size: 0.85rem;
  line-height: 1;
}

/* ─── SMOOTH TRANSITION ON THEME SWITCH ─────────────────── */
html {
  transition: color 0.25s ease, background-color 0.25s ease;
}
body,
.nav,
.card,
.footer,
.section--alt,
.section--cream,
.section--dark {
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

/* ─── DARK-BACKGROUND HERO SECTIONS ─────────────────────── */
/* These sections have permanently dark backgrounds — their
   headings must stay white/gold regardless of dark mode token
   overrides. Scoped tightly to avoid affecting other h1/h2. */
[data-theme="dark"] .tx-hero h1,
[data-theme="dark"] .courses-hero h1,
[data-theme="dark"] .tracker-hero h1 {
  color: #ffffff;
}
[data-theme="dark"] .tx-hero h1 span,
[data-theme="dark"] .courses-hero h1 span,
[data-theme="dark"] .tracker-hero h1 span {
  color: #dbb87a;
}
[data-theme="dark"] .tx-hero p,
[data-theme="dark"] .courses-hero p,
[data-theme="dark"] .tracker-hero p {
  color: rgba(255,255,255,0.65);
}

/* ─── POLICY PAGES ───────────────────────────────────────── */
/* Accordion-style pages (ada-policy, ai-policy) */
[data-theme="dark"] .pol-section-head h2  { color: var(--ink); }
[data-theme="dark"] .pol-body             { color: var(--ink-light); }
[data-theme="dark"] .pol-body strong      { color: var(--ink-mid); }
[data-theme="dark"] .group-label          { color: var(--ink-mid); }
[data-theme="dark"] .policy-body h2,
[data-theme="dark"] .policy-body h3       { color: var(--ink); }
[data-theme="dark"] .policy-body p,
[data-theme="dark"] .policy-body li       { color: var(--ink-light); }
[data-theme="dark"] .policy-body p strong,
[data-theme="dark"] .callout p strong     { color: var(--ink-mid); }

/* Doc-style pages (ferpa-coppa, data-retention, bias-audit, engine-transparency) */
[data-theme="dark"] .policy-eyebrow       { color: var(--ink-mid); }
[data-theme="dark"] .doc-section h2,
[data-theme="dark"] .doc-section h3       { color: var(--ink); border-bottom-color: var(--border); }
[data-theme="dark"] .doc-section p,
[data-theme="dark"] .doc-section li       { color: var(--ink-light); }
[data-theme="dark"] .doc-section strong   { color: var(--ink-mid); }
[data-theme="dark"] .doc-section a        { color: var(--teal); }
[data-theme="dark"] .law-line             { background: var(--border); }
[data-theme="dark"] .law-badge            { background: var(--navy-mid); color: var(--ink-mid); }
[data-theme="dark"] .law-cite             { color: var(--ink-light); }
[data-theme="dark"] .data-table th        { background: var(--navy-mid); color: var(--ink-mid); }
[data-theme="dark"] .data-table td        { color: var(--ink-light); border-bottom-color: var(--border); }
[data-theme="dark"] .data-table tr:hover td { background: var(--navy-light); }
[data-theme="dark"] .callout-blue         { background: rgba(37,99,235,0.12); border-color: rgba(37,99,235,0.3); color: var(--ink-light); }
[data-theme="dark"] .callout-green        { background: rgba(22,163,74,0.12); border-color: rgba(22,163,74,0.3); color: var(--ink-light); }
[data-theme="dark"] .callout-gold         { background: rgba(201,160,90,0.12); border-color: rgba(201,160,90,0.3); color: var(--ink-light); }
[data-theme="dark"] .contact-card         { background: var(--navy-mid); border-color: var(--border); }
[data-theme="dark"] .contact-card .role   { color: var(--ink-light); }
[data-theme="dark"] .contact-card a       { color: var(--teal); }
[data-theme="dark"] .vendor-link          { background: var(--navy-mid); color: var(--ink-mid); border-color: var(--border); }
[data-theme="dark"] .badge-green          { background: rgba(22,163,74,0.15); color: var(--green); }
[data-theme="dark"] .badge-amber          { background: rgba(201,160,90,0.15); color: var(--amber); }
[data-theme="dark"] .pipeline-step,
[data-theme="dark"] .flow-step            { background: var(--navy-mid); color: var(--ink); }
[data-theme="dark"] .flow-diagram         { background: var(--navy-mid); }

/* ============================================================
   Source: components/ladder.css
   ============================================================ */
:root {
  --ladder-bg: #f5f1e8;
  --ladder-panel: #ffffff;
  --ladder-line: #ded4c5;
  --ladder-soft: #f0e8dc;
  --ladder-ink: #18283a;
  --ladder-muted: #62717f;
  --ladder-good: #735f9e;
  --ladder-focus: #c9a05a;
}


body {
  background: #ffffff;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
.ladder-select,
.ladder-input {
  border-radius: 7px;
}

button {
  border: 1px solid var(--navy);
  background: var(--navy);
  color: var(--gold-light);
  cursor: pointer;
  font-weight: 700;
  padding: 0.55rem 0.8rem;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

button:hover {
  background: var(--navy-mid);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

button.secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--ladder-line);
}

.ladder-nav {
  max-width: 1500px;
}

.ladder-top-actions {
  align-items: center !important;
  display: flex !important;
  gap: 0.5rem;
}

.theme-toggle {
  align-items: center;
  border: 1px solid rgba(201, 160, 90, 0.42);
  border-radius: 7px;
  background: transparent;
  color: #62717f;
  display: inline-flex;
  font-weight: 800;
  min-height: 42px;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.theme-toggle:hover {
  background: rgba(201, 160, 90, 0.08);
  color: #8f681c;
}

[data-theme="dark"] .theme-toggle {
  border-color: rgba(219, 184, 122, 0.42);
  color: #b7c0c8;
}

[data-theme="dark"] .theme-toggle:hover {
  background: rgba(219, 184, 122, 0.12);
  color: #dbb87a;
}

.ladder-select,
.ladder-input,
.learner-actions input,
.chat-form input,
.assessment-form textarea {
  border: 1px solid var(--ladder-line);
  background: var(--white);
  color: var(--ladder-ink);
  min-height: 40px;
  padding: 0.45rem 0.65rem;
}

.ladder-select {
  min-height: 42px !important;
  padding: 0.55rem 0.65rem !important;
}

.language-custom {
  min-width: 150px;
}

.ladder-select.wide {
  min-width: min(420px, 100%);
}

.ladder-app {
  box-sizing: border-box;
  width: min(calc(100% - 2rem), 1800px);
  max-width: none;
  margin: 0 auto;
  padding: 1rem 0 3rem;
}

.ladder-hero {
  display: grid;
  grid-template-columns: minmax(280px, 0.62fr) minmax(720px, 1.38fr);
  gap: 1rem;
  align-items: start;
  padding: 1.15rem 0 1rem;
}

.ladder-hero-copy {
  background:
    radial-gradient(circle at 92% 8%, rgba(219, 184, 122, 0.18), transparent 32%),
    linear-gradient(145deg, #07111d 0%, #102235 58%, #07111d 100%);
  background-color: #07111d;
  border: 1px solid rgba(219, 184, 122, 0.36);
  box-shadow: 0 22px 48px rgba(10, 24, 38, 0.18);
  color: #f7fbff;
  overflow: hidden;
  padding: clamp(1.2rem, 2.6vw, 2rem);
  position: relative;
}

.ladder-hero-copy::before,
.ladder-hero-copy::after {
  content: "";
  pointer-events: none;
  position: absolute;
}

.ladder-hero-copy::before {
  border: 1px solid rgba(219, 184, 122, 0.18);
  height: 78%;
  left: 1rem;
  top: 11%;
  width: 38%;
}

.ladder-hero-copy::after {
  background:
    linear-gradient(90deg, rgba(219, 184, 122, 0), rgba(219, 184, 122, 0.58), rgba(219, 184, 122, 0)),
    linear-gradient(90deg, rgba(219, 184, 122, 0), rgba(219, 184, 122, 0.42), rgba(219, 184, 122, 0));
  height: 3px;
  left: 1.4rem;
  right: 1.4rem;
  top: 58%;
  transform: rotate(-2deg);
}

.hero-panels {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ladder-hero h1 {
  color: #ffe7a8;
  font-family: var(--font-display);
  font-size: clamp(3rem, 5.2vw, 4.8rem);
  line-height: 0.95;
  margin: 0.35rem 0 0.8rem;
  position: relative;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.42),
    0 0 24px rgba(219, 184, 122, 0.44),
    0 0 52px rgba(219, 184, 122, 0.12);
  z-index: 1;
}

.ladder-hero h1::after {
  background: linear-gradient(90deg, #bda7ff, #dbb87a, rgba(219, 184, 122, 0));
  content: "";
  display: block;
  height: 6px;
  margin-top: 0.38rem;
  max-width: 260px;
}

.eyebrow,
.panel-label {
  color: var(--gold);
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ladder-hero .eyebrow {
  background: #103246;
  border: 1px solid rgba(219, 184, 122, 0.48);
  color: #fff5cf;
  display: inline-flex;
  letter-spacing: 0.18em;
  padding: 0.52rem 0.7rem;
  position: relative;
  z-index: 1;
}

.hero-text {
  background: #102235;
  border: 1px solid rgba(219, 184, 122, 0.42);
  color: #e8f1f7;
  font-size: clamp(0.96rem, 1.6vw, 1.12rem);
  line-height: 1.5;
  max-width: 760px;
  padding: 0.75rem 0.9rem;
  position: relative;
  z-index: 1;
}

.learner-panel,
.ladder-toolbar,
.topic-panel,
.conversation-panel,
.transcript-panel {
  background: var(--ladder-panel);
  border: 1px solid var(--ladder-line);
  box-shadow: var(--shadow-sm);
}

.learner-panel {
  padding: 0.75rem;
}

.hero-panels .learner-panel {
  min-height: 0;
}

.learner-panel strong {
  color: var(--navy);
  display: block;
  font-size: 1.02rem;
  line-height: 1.15;
  margin: 0.2rem 0 0.55rem;
}

.learner-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}

.topic-search-panel {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.topic-search-panel strong {
  color: var(--navy);
  display: block;
  font-size: 1.02rem;
  line-height: 1.15;
  margin: 0.2rem 0 0.55rem;
}

.topic-search-input {
  border: 1px solid var(--ladder-line);
  background: var(--white);
  color: var(--ladder-ink);
  font-size: 0.84rem;
  min-height: 34px;
  padding: 0.34rem 0.5rem;
  width: 100%;
}

.topic-search-results {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.5rem;
  max-height: 86px;
  overflow: auto;
}

.topic-search-result {
  border: 1px solid var(--ladder-line);
  background: var(--ladder-soft);
  color: var(--ladder-ink);
  display: grid;
  gap: 0.22rem;
  padding: 0.55rem;
  text-align: left;
  transform: none;
  width: 100%;
}

.topic-search-result:hover {
  background: #fff9ea;
  box-shadow: none;
  color: var(--ladder-ink);
  transform: none;
}

.topic-search-result strong {
  color: var(--navy);
  font-size: 0.95rem;
  line-height: 1.2;
  margin: 0;
}

.topic-search-result small {
  color: var(--ladder-muted);
  display: block;
  line-height: 1.25;
}

.topic-search-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.25rem;
}

.topic-search-actions button {
  font-size: 0.76rem;
  padding: 0.35rem 0.5rem;
}

.topic-search-empty {
  color: var(--ladder-muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.evaluation-panel {
  display: flex;
  flex-direction: column;
}

.evaluation-panel p {
  color: #34495d;
  font-size: 0.78rem;
  line-height: 1.25;
  margin: -0.15rem 0 0.65rem;
  max-height: 2.5em;
  overflow: hidden;
}

.evaluation-cooldown {
  border-top: 1px solid var(--ladder-line);
  color: var(--ladder-muted) !important;
  font-size: 0.76rem !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  padding-top: 0.55rem;
}

.evaluation-controls {
  display: grid;
  gap: 0.45rem;
  margin-top: auto;
}

.evaluation-field {
  display: grid;
  gap: 0.25rem;
}

.evaluation-field span {
  color: var(--ladder-muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.evaluation-select {
  border: 1px solid var(--ladder-line);
  background: var(--white);
  color: var(--ladder-ink);
  font-size: 0.82rem;
  min-height: 32px;
  padding: 0.32rem 0.45rem;
  width: 100%;
}

.identity-attestation {
  align-items: start;
  color: var(--ladder-muted);
  display: grid;
  font-size: 0.78rem;
  gap: 0.5rem;
  grid-template-columns: auto minmax(0, 1fr);
  line-height: 1.35;
}

.identity-attestation input {
  accent-color: var(--gold);
  margin-top: 0.15rem;
  min-height: auto;
  min-width: 0;
  width: auto;
}

.account-gate {
  border-top: 1px solid rgba(219, 184, 122, 0.28);
  display: grid;
  gap: 0.55rem;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
}

.account-gate-head {
  align-items: center;
  display: flex;
  gap: 0.6rem;
  justify-content: space-between;
}

.account-gate-head span {
  color: #ffe7a8;
  font-size: 0.84rem;
  font-weight: 900;
  line-height: 1.2;
}

.account-gate p {
  color: #d8e5ef;
  font-size: 0.78rem;
  line-height: 1.35;
  margin: 0;
}

.account-form {
  display: grid;
  gap: 0.48rem;
}

.account-actions {
  display: grid;
  gap: 0.48rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-actions button,
#accountConfirmAdultBtn {
  min-height: 36px;
  padding: 0.42rem 0.55rem;
}

.account-attestation {
  color: #d8e5ef;
}

.evaluation-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: space-between;
  margin-top: 0.65rem;
}

.evaluation-actions button {
  padding: 0.42rem 0.65rem;
}

.architecture-link {
  flex: 0 0 auto;
  font-size: 0.86rem;
  min-height: 38px;
  padding: 0.45rem 0.7rem;
  width: auto;
}

.evaluation-actions button:disabled,
.certification-workspace-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.evaluation-actions a {
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 800;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.evaluation-actions a:hover {
  color: var(--navy);
  text-decoration: underline;
}

.certification-workspace-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.architecture-dialog-content {
  color: var(--ladder-ink);
}

.certification-guide {
  display: grid;
  gap: 1rem;
  line-height: 1.45;
}

.certification-guide-lead {
  color: var(--ladder-ink);
  font-size: 1.02rem;
  line-height: 1.55;
  margin: 0;
}

.certification-guide-callout,
.certification-guide-note {
  background: var(--ladder-soft);
  border: 1px solid var(--ladder-line);
  border-radius: 7px;
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem;
}

.certification-guide-callout span {
  color: var(--ladder-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.certification-guide-callout strong {
  color: var(--navy);
  font-size: 1rem;
}

.certification-guide-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.certification-guide-grid section {
  border: 1px solid var(--ladder-line);
  border-radius: 7px;
  padding: 0.9rem;
}

.certification-guide h4 {
  color: var(--navy);
  font-size: 1rem;
  margin: 0 0 0.55rem;
}

.certification-guide ol,
.certification-guide ul {
  margin: 0;
  padding-left: 1.1rem;
}

.certification-guide li + li {
  margin-top: 0.35rem;
}

.certification-guide-note {
  grid-template-columns: auto minmax(0, 1fr);
}

.certification-guide-note strong {
  color: var(--navy);
}

.hero-panels .evaluation-actions .architecture-link {
  justify-self: start;
  width: auto !important;
}

.ladder-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(220px, 320px) minmax(220px, 320px);
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 0.9rem;
}

.placement-toolbar {
  align-items: stretch;
  gap: 1.15rem;
  grid-template-columns: minmax(280px, 0.72fr) minmax(520px, 1.55fr);
  padding: 1rem;
}

.placement-toolbar.is-collapsed {
  align-items: center;
  grid-template-columns: minmax(0, 1fr);
  min-height: 76px;
  padding: 0.75rem 1rem;
}

.placement-summary {
  align-self: start;
}

.placement-toolbar.is-collapsed .placement-summary {
  align-items: center;
  display: grid;
  gap: 0.35rem 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
}

.placement-toolbar.is-collapsed .placement-summary .panel-label {
  grid-column: 1;
}

.placement-toolbar.is-collapsed .placement-summary h2 {
  grid-column: 1;
  margin: 0;
}

.placement-toolbar.is-collapsed .placement-summary p {
  grid-column: 1;
  margin: 0;
}

.placement-toolbar.is-collapsed .placement-actions {
  grid-column: 2;
  grid-row: 1 / span 3;
  justify-content: flex-end;
  margin: 0;
}

.placement-toolbar.is-collapsed .placement-chat,
.placement-toolbar.is-collapsed .placement-progress {
  display: none;
}

.placement-progress {
  align-self: end;
}

.placement-chat {
  display: flex;
  flex-direction: column;
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 480px;
  min-width: 0;
}

.placement-summary h2 {
  color: var(--navy);
  font-family: var(--font-display);
  line-height: 1.1;
  margin: 0.25rem 0 0.35rem;
}

.placement-summary p {
  color: var(--ink-light);
}

.placement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.placement-profile-prompt {
  align-items: center;
  background: #fff9ea;
  border: 1px solid rgba(201, 160, 90, 0.55);
  border-radius: 8px;
  color: var(--ladder-ink);
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  grid-column: 1 / -1;
  margin-top: 0.7rem;
  padding: 0.65rem;
}

.placement-profile-prompt strong {
  color: var(--navy);
}

.placement-profile-prompt span {
  color: var(--ladder-muted);
  flex: 1 1 260px;
  font-size: 0.82rem;
  line-height: 1.3;
}

.placement-profile-prompt div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.placement-toolbar.is-collapsed .placement-profile-prompt {
  margin-top: 0.25rem;
  padding: 0.5rem 0.6rem;
}

.assessment-chat-head {
  align-items: center;
  border-bottom: 1px solid var(--ladder-line);
  display: flex;
  gap: 0.9rem;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.7rem;
}

.assessment-chat-head strong {
  color: var(--navy);
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.1;
  margin-top: 0.18rem;
}

.assessment-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.assessment-nav button {
  padding: 0.45rem 0.65rem;
}

.assessment-log {
  background: #fbfaf6;
  border: 1px solid var(--ladder-line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
  max-height: min(58vh, 540px);
  min-height: 360px;
  overflow: auto;
  padding: 0.9rem;
  scroll-behavior: smooth;
  scrollbar-color: var(--gold) var(--ladder-soft);
}

.assessment-log:focus-visible {
  outline: 3px solid rgba(94, 124, 64, 0.28);
  outline-offset: 2px;
}

.assessment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  margin-top: 0.75rem;
  align-items: stretch;
}

.assessment-form textarea {
  border-radius: 8px;
  line-height: 1.45;
  min-height: 96px;
  padding: 0.75rem;
  resize: vertical;
}

.assessment-form textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(94, 124, 64, 0.16);
  outline: none;
}

.assessment-form button {
  min-width: 94px;
}

.placement-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.placement-metrics span,
.placement-metrics small {
  background: var(--ladder-soft);
  border: 1px solid var(--ladder-line);
  color: var(--ladder-ink);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.3rem 0.4rem;
}

.placement-metrics small {
  flex-basis: 100%;
  font-weight: 500;
}

.assigned-rungs-panel {
  background: #fff;
  border: 1px solid var(--ladder-line);
  border-radius: 8px;
  flex-basis: 100%;
  margin-top: 0.25rem;
  max-height: 360px;
  overflow: auto;
}

.assigned-rungs-panel summary {
  color: var(--navy);
  cursor: pointer;
  font-weight: 800;
  padding: 0.65rem 0.75rem;
}

.assigned-rungs-panel > ul {
  display: grid;
  gap: 0.65rem;
  list-style: none;
  margin: 0;
  padding: 0 0.75rem 0.75rem;
}

.assigned-rungs-panel > ul > li {
  border-top: 1px solid var(--ladder-line);
  padding-top: 0.65rem;
}

.assigned-rungs-panel strong,
.assigned-rungs-panel span {
  display: block;
}

.assigned-rungs-panel span {
  color: var(--ladder-muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.assigned-rungs-panel ol {
  display: grid;
  gap: 0.35rem;
  list-style: none;
  margin: 0.55rem 0 0;
  padding: 0;
}

.assigned-rung-link {
  background: #f7f2e8;
  border: 1px solid var(--ladder-line);
  color: var(--ladder-ink);
  display: block;
  font-size: 0.78rem;
  line-height: 1.25;
  padding: 0.45rem 0.5rem;
  text-align: left;
  width: 100%;
}

.assigned-rung-link:hover {
  background: var(--gold-light);
  color: var(--navy);
  transform: none;
}

.progress-meter {
  background: var(--ladder-soft);
  border: 1px solid var(--ladder-line);
  height: 12px;
  margin: 0.4rem 0 0.2rem;
  overflow: hidden;
}

.progress-meter span {
  background: linear-gradient(90deg, var(--gold), var(--gold));
  display: block;
  height: 100%;
  width: 0%;
}

.workspace {
  display: grid;
  grid-template-columns: 308px minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(201, 160, 90, 0.18);
  box-shadow: var(--shadow-sm);
  padding: 0.65rem;
}

.workspace > *,
.tier-meta,
.topic-column {
  min-width: 0;
}

.tier-rail {
  background: var(--ladder-panel);
  border: 1px solid var(--ladder-line);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: visible;
  padding: 0;
}

.rail-head {
  align-items: center;
  background:
    radial-gradient(circle at 50% 18%, rgba(219, 184, 122, 0.34), transparent 30%),
    radial-gradient(circle at 82% 22%, rgba(219, 184, 122, 0.22), transparent 24%),
    linear-gradient(160deg, #081421 0%, #10243a 48%, #07111d 100%);
  background-color: #07111d;
  border-bottom: 1px solid rgba(219, 184, 122, 0.45);
  box-sizing: border-box;
  color: var(--white);
  display: flex;
  flex-direction: column;
  gap: 0.52rem;
  justify-content: center;
  min-height: 190px;
  overflow: hidden;
  padding: 1.15rem 1rem;
  position: relative;
  text-align: center;
}

.rail-head::before,
.rail-head::after {
  content: "";
  pointer-events: none;
  position: absolute;
}

.rail-head::before {
  border: 1px solid rgba(219, 184, 122, 0.22);
  border-radius: 50%;
  height: 190px;
  top: -82px;
  width: 190px;
}

.rail-head::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  height: 2px;
  left: 18%;
  top: 63%;
  transform: rotate(-8deg);
  width: 64%;
}

.rail-product-label {
  color: #f8dd9a;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  line-height: 1;
  position: relative;
  text-shadow: 0 0 18px rgba(219, 184, 122, 0.45);
  text-transform: uppercase;
  z-index: 1;
}

.rail-product-title {
  color: #ffe7a8;
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 3.8vw, 3.35rem);
  font-weight: 900;
  line-height: 0.95;
  position: relative;
  text-shadow:
    0 0 3px rgba(255, 255, 255, 0.8),
    0 0 18px rgba(219, 184, 122, 0.9),
    0 0 42px rgba(115, 95, 158, 0.34);
  z-index: 1;
}

.rail-tier-status {
  background: #102235;
  border: 1px solid rgba(219, 184, 122, 0.62);
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 900;
  justify-content: center;
  line-height: 1.15;
  padding: 0.45rem 0.7rem;
  position: relative;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.34);
  text-transform: uppercase;
  z-index: 1;
}

.tier-list {
  background: var(--ladder-panel);
  border: 1px solid var(--ladder-line);
  border-top: none;
  display: grid;
  gap: 0.7rem;
  grid-auto-rows: 136px;
  max-height: none;
  overflow: visible;
  padding: 0.75rem;
}

.tier-item {
  border-bottom: 0;
  min-height: 0;
}

.tier-button {
  align-items: start;
  background: transparent;
  border: 1px solid var(--ladder-line);
  border-radius: 8px;
  box-sizing: border-box;
  color: var(--ladder-ink);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-areas:
    "number meta"
    "number progress";
  gap: 0.2rem 0.55rem;
  height: 100%;
  justify-items: stretch;
  min-height: 0;
  padding: 0.68rem;
  text-align: left;
  transform: none;
  width: 100%;
}

.tier-button:hover,
.tier-button.active {
  background: var(--ladder-soft);
  box-shadow: none;
  transform: none;
}

.tier-button.placed-out {
  background: rgba(115, 95, 158, 0.18);
  border: 1px solid rgba(115, 95, 158, 0.42);
  color: var(--ladder-ink);
}

.tier-button.placed-out .tier-number {
  background: var(--ladder-good);
}

.tier-button.placed-out .tier-progress {
  color: #5b477e;
}

.tier-button.has-assigned {
  background: #fff9ea;
}

.tier-button.has-assigned .tier-progress {
  color: #8f681c;
}

.tier-number {
  align-items: center;
  background: var(--tier-accent);
  color: var(--white);
  display: inline-flex;
  font-size: 19.2px;
  font-weight: 900;
  grid-area: number;
  height: 30px;
  justify-content: center;
  line-height: 1;
  margin-top: 0.05rem;
  width: 30px;
}

.tier-meta {
  display: block;
  grid-area: meta;
  min-width: 0;
  overflow: hidden;
}

.tier-meta strong {
  display: block;
  font-size: 19.2px;
  line-height: 1.06;
  overflow-wrap: anywhere;
}

.tier-meta strong,
.topic-head h2,
.panel-heading h3 {
  color: var(--navy);
}

.tier-meta small {
  color: var(--ladder-muted);
  display: block;
  display: -webkit-box;
  font-size: 14.4px;
  font-weight: 800;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-height: 1.08;
  margin-top: 0.18rem;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
}

.tier-progress {
  color: var(--ladder-muted);
  align-self: end;
  font-size: 13.2px;
  font-weight: 900;
  grid-area: progress;
  line-height: 1;
  justify-self: start;
  min-width: 0;
  overflow-wrap: anywhere;
}

.topic-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
  overflow: visible;
  padding: 0.55rem 0.75rem;
  background: #142437;
  border: 1px solid #26384a;
  border-top: 0;
}

.topic-strip button {
  align-items: center;
  background: #1a2d43;
  border-color: rgba(219, 184, 122, 0.6);
  box-sizing: border-box;
  color: var(--gold-light);
  display: inline-flex;
  flex: 0 0 42px;
  font-size: 0.95rem;
  height: 42px;
  justify-content: center;
  line-height: 1;
  min-width: 42px;
  padding: 0;
  transform: none;
  width: 42px;
}

.topic-strip button:hover {
  background: #213952;
  box-shadow: none;
  transform: none;
}

.topic-strip button.assigned {
  border-color: var(--gold);
  color: var(--gold-light);
}

.topic-strip button.placed {
  background: rgba(115, 95, 158, 0.22);
  border-color: rgba(115, 95, 158, 0.6);
  color: #fff8e8;
}

.topic-strip button.active {
  background: var(--navy-mid);
  box-shadow: inset 0 -3px 0 var(--gold);
}

.topic-head {
  align-items: start;
  background: var(--navy);
  color: var(--white);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem;
}

.topic-head h2 {
  color: var(--gold-light);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1.1;
  margin-top: 0.2rem;
}

.topic-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}

.topic-panel,
.conversation-panel,
.transcript-panel {
  padding: 1rem;
}

.conversation-panel {
  margin-bottom: 1rem;
}

.resource-panel {
  margin-bottom: 1rem;
}

.panel-heading {
  align-items: center;
  border-bottom: 1px solid var(--ladder-line);
  display: flex;
  gap: 0.7rem;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.65rem;
}

.panel-heading p {
  color: var(--ladder-muted);
  font-size: 0.84rem;
  margin-top: 0.1rem;
}

.vocab-list,
.resource-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.topic-panel {
  background: var(--ladder-soft);
}

.vocab-definition-panel {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--ladder-soft);
}

.vocab-definition-box {
  background: #fbfaf6;
  border: 1px solid var(--ladder-line);
  flex: 1;
  min-height: 132px;
  overflow: auto;
  padding: 0.75rem;
}

.vocab-definition-box strong {
  color: var(--navy);
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.1;
  margin-bottom: 0.45rem;
}

.vocab-definition-box p {
  color: var(--ladder-ink);
  line-height: 1.45;
}

.vocab-definition-box small {
  color: var(--ladder-muted);
  display: block;
  font-size: 0.76rem;
  line-height: 1.25;
  margin-top: 0.65rem;
}

.vocab-prompt-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

.vocab-prompt-form input {
  border: 1px solid var(--ladder-line);
  min-height: 34px;
  padding: 0.35rem 0.5rem;
}

.vocab-prompt-form button {
  min-height: 34px;
  padding: 0.35rem 0.6rem;
}

.vocab-pill,
.resource-chip {
  background: #fffdf8;
  border: 1px solid #b9aa92;
  color: #102235;
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.25;
  padding: 0.35rem 0.5rem;
}

.vocab-pill.done {
  background: #f2edff;
  border-color: #735f9e;
  color: #23183d;
}

.vocab-pill:hover,
.vocab-pill:focus-visible,
.vocab-pill.active {
  background: var(--navy-mid);
  border-color: var(--navy-mid);
  color: #fff;
  transform: none;
}

.resource-chip {
  background: #f6efe2;
  border-color: #c8b58f;
  color: #17283a;
  text-decoration: underline;
  text-decoration-color: rgba(23, 40, 58, 0.35);
  text-underline-offset: 3px;
}

.chat-log {
  background: #fbfaf6;
  border: 1px solid var(--ladder-line);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  min-height: 510px;
  max-height: 720px;
  overflow: auto;
  padding: 0.8rem;
}

.message {
  border: 1px solid var(--ladder-line);
  max-width: 88%;
  padding: 0.65rem 0.75rem;
  color: #102235;
  font-size: 0.9rem;
  line-height: 1.5;
}

.message p {
  margin: 0.25rem 0;
}

.message ol,
.message ul {
  margin: 0.25rem 0;
  padding-left: 1.5rem;
}

.message li {
  margin: 0.15rem 0;
}

.assessment-log .message {
  line-height: 1.48;
  max-width: min(96%, 780px);
  padding: 0.8rem 0.9rem;
}

.message.assistant {
  align-self: flex-start;
  background: var(--white);
}

/* Certification exam messages - visual distinction */
.message.exam {
  background: #f8f4e6;
  border: 2px solid #c9a05a;
  border-left: 5px solid #c9a05a;
  box-shadow: 0 2px 8px rgba(201, 160, 90, 0.15);
}

.message.user {
  align-self: flex-end;
  background: #f2edff;
  border-color: rgba(115, 95, 158, 0.35);
}

.message strong {
  color: var(--navy);
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.message h2,
.message h3,
.message h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0.5rem 0 0.25rem 0;
  line-height: 1.3;
}

.message h2 {
  font-size: 0.95rem;
}

.message h3 {
  font-size: 0.9rem;
}

.message h4 {
  font-size: 0.85rem;
}

.standards-review-offer {
  align-self: flex-start;
  background: #fff8ea;
  border: 1px solid rgba(201, 160, 90, 0.55);
  color: #102235;
  max-width: min(92%, 720px);
  padding: 0.8rem 0.9rem;
}

.standards-review-offer strong {
  color: var(--navy);
  display: block;
  font-size: 0.92rem;
  margin-bottom: 0.35rem;
}

.standards-review-offer p {
  color: #34495d;
  line-height: 1.52;
  margin: 0;
}

.standards-review-error {
  color: #8a1f1f !important;
  font-weight: 700;
  margin-top: 0.45rem !important;
}

.standards-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.standards-review-actions button,
.standards-review-actions a {
  align-items: center;
  border: 1px solid var(--navy);
  display: inline-flex;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  justify-content: center;
  min-height: 36px;
  padding: 0.45rem 0.7rem;
  text-decoration: none;
}

.standards-review-actions button {
  background: var(--navy);
  color: #ffe7a8;
  cursor: pointer;
}

.standards-review-actions button.secondary,
.standards-review-actions a {
  background: transparent;
  color: var(--navy);
}

.standards-review-actions button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.standards-review-event {
  border-color: rgba(91, 71, 126, 0.45);
}

.chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.transcript-list {
  display: grid;
  gap: 0.55rem;
}

.transcript-event {
  border: 1px solid rgba(201, 160, 90, 0.42);
  background: #fbfaf6;
  padding: 0.55rem 0.7rem;
}

.transcript-event strong {
  color: var(--navy);
  display: block;
}

.transcript-event small,
#progressText {
  color: var(--ladder-muted);
}

.placement-toolbar #progressText {
  color: #d8e5ef;
}

.learner-panel {
  background: #eef8f5;
  border-color: rgba(115, 95, 158, 0.38);
}

.topic-search-panel {
  background: #fff5df;
  border-color: rgba(201, 160, 90, 0.5);
}

.evaluation-panel {
  background: #f2edff;
  border-color: rgba(111, 61, 130, 0.28);
}

.placement-toolbar {
  background: #102235;
  border-color: rgba(115, 95, 158, 0.52);
  color: #f7fbff;
}

.placement-toolbar .panel-label,
.placement-toolbar .assessment-chat-head span {
  color: #f8dd9a;
}

.placement-toolbar h2,
.placement-toolbar strong {
  color: #ffffff;
}

.placement-toolbar p,
.placement-toolbar small {
  color: #d8e5ef;
}

.placement-toolbar button {
  background: #dbb87a;
  border-color: #dbb87a;
  color: #102235;
}

.placement-toolbar button.secondary {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.conversation-panel {
  background: #1a2a3a;
  border-color: rgba(115, 95, 158, 0.8);
  border: none;
  border-bottom: 3px solid #735f9e;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.conversation-panel .panel-heading {
  background: #0f1923;
  border-bottom: 2px solid #735f9e;
}

.conversation-panel .panel-heading h3 {
  color: #ffffff;
}

:root .conversation-panel .panel-heading p {
  color: #ffffff !important;
}


.conversation-panel .panel-label {
  color: #dbb87a;
}

.chat-log {
  background: #243142;
  border-color: rgba(115, 95, 158, 0.5);
  color: #e8e3db;
}

.resource-panel {
  background: #eef7ff;
  border-color: rgba(72, 121, 166, 0.38);
}

.transcript-panel {
  background: #152538;
  border-color: rgba(219, 184, 122, 0.42);
  color: #f7fbff;
}

.transcript-panel .panel-heading {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}

.transcript-panel .panel-heading h3,
.transcript-panel .panel-heading span {
  color: #ffffff;
}

.transcript-event {
  background: #203246;
  border-left-color: #dbb87a;
}

.transcript-event strong {
  color: #ffffff;
}

.transcript-event small {
  color: #c9d7e3;
}





































































.ladder-nav .nav-brand-group {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  min-width: auto !important;
  max-width: none !important;
}

.ladder-nav .nav-brand-logo {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 2px;
  background: #000 url("/components/ladder4.png?v=1") center / cover no-repeat;
}

.ladder-nav .nav-brand-primary {
  color: #8f681c !important;
}

.ladder-nav .nav-brand-primary:hover {
  color: #8f681c !important;
}

.ladder-nav {
  max-width: 100% !important;
  padding: 0 10px !important;
  margin: 0 !important;
}

.nav-pathway-divider {
  display: inline-block !important;
  height: 24px !important;
  background: rgba(201, 160, 90, 0.2) !important;
  margin: 0 0.75rem !important;
}

.nav-pathway-links {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-shrink: 0;
}

.nav-pathway-link {
  color: #62717f;
  text-decoration: none;
  font-weight: 750;
  font-size: 0.9rem;
  padding: 0.5rem 0.65rem;
  border-radius: 4px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.nav-pathway-link:hover {
  background: rgba(201, 160, 90, 0.1);
  color: #8f681c;
}

.nav-pathway-link.active {
  color: #8f681c;
  background: rgba(201, 160, 90, 0.08);
}

[data-theme="dark"] .nav-pathway-divider {
  background: rgba(219, 184, 122, 0.2) !important;
}

[data-theme="dark"] .nav-pathway-link {
  color: #b7c0c8;
}

[data-theme="dark"] .nav-pathway-link:hover {
  background: rgba(219, 184, 122, 0.15);
  color: #dbb87a;
}

[data-theme="dark"] .nav-pathway-link.active {
  color: #dbb87a;
  background: rgba(219, 184, 122, 0.12);
}

.ladder-nav .nav-brand-secondary {
  color: #8f681c;
  font-size: 0.7rem !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.nav-cert-count {
  background: rgba(219, 184, 122, 0.28) !important;
  border-radius: 10px !important;
  color: #102235 !important;
  display: inline-flex !important;
  font-size: 0.65rem !important;
  font-weight: 900 !important;
  margin-left: 0.3rem !important;
  min-width: 18px !important;
  align-items: center !important;
  justify-content: center !important;
  height: 18px !important;
  padding: 0 0.3rem !important;
  flex-shrink: 0 !important;
}


.nav-version {
  color: #8f681c !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  margin-left: 0.5rem !important;
  padding: 0.25rem 0.4rem !important;
  background: rgba(219, 184, 122, 0.15) !important;
  border-radius: 4px !important;
}

.authentication-required {
  background: #f2edff !important;
  border: 1px solid rgba(115, 95, 158, 0.35) !important;
  border-radius: 7px !important;
  color: #102235 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
  margin-bottom: 0.65rem !important;
  margin-top: 0.5rem !important;
  width: 100% !important;
}

.auth-link {
  color: #102235 !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  text-decoration: none !important;
}

.auth-link:hover {
  color: #102235 !important;
  text-decoration: underline !important;
}

.evaluation-actions button,
.evaluation-actions a {
  color: #102235 !important;
}

.evaluation-actions button:hover,
.evaluation-actions a:hover {
  color: #102235 !important;
}

.architecture-link {
  color: #102235 !important;
}

.credential-demo-link {
  color: #102235 !important;
}

.learner-panel .panel-label,
.topic-search-panel .panel-label,
.evaluation-panel .panel-label,
.evaluation-actions a {
  color: #5b477e;
}

.placement-profile-prompt strong,
.assessment-log .message strong {
  color: #102235;
}

.placement-profile-prompt span,
.assessment-log .message,
.conversation-panel .panel-heading p,
.topic-search-empty,
.vocab-definition-box small {
  color: #34495d;
}

.placement-toolbar button.secondary,
.assessment-nav button.secondary,
.placement-profile-prompt button.secondary {
  background: #2b3745;
  border-color: #2b3745;
  color: #ffffff;
}

.tier-number {
  background: #102235 !important;
  border: 1px solid rgba(219, 184, 122, 0.52);
  color: #ffffff;
}

.tier-button.active,
.tier-button:hover {
  color: #102235;
}

.tier-button.active .tier-meta strong,
.tier-button:hover .tier-meta strong {
  color: #102235;
}

.tier-button.active .tier-meta small,
.tier-button.active .tier-progress,
.tier-button:hover .tier-meta small,
.tier-button:hover .tier-progress {
  color: #34495d;
}



.dark-mode-toggle__thumb {
  background: #8f681c !important;
}

.assessment-log {
  background: #fbfaf6 !important;
  color: #102235 !important;
}

.topic-strip {
  background: #142437 !important;
  color: #f8dd9a !important;
}

.certification-workspace-panel .panel-label {
  color: #5b477e !important;
}











@media (max-width: 1180px) {
  .workspace,
  .ladder-hero,
  .ladder-toolbar {
    grid-template-columns: 1fr;
  }

  .hero-panels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .placement-chat,
  .placement-progress {
    grid-column: auto;
    grid-row: auto;
  }

  .placement-chat {
    min-height: 0;
  }

  .tier-rail {
    position: static;
  }

  .tier-list {
    overflow: visible;
    max-height: none;
  }
}

@media (max-width: 980px) {
  .hero-panels {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1181px) {
  .rail-head,
  .topic-head {
    min-height: 222px;
  }
}

@media (max-width: 760px) {
  .nav-inner {
    height: auto;
    padding: 0.8rem;
    flex-wrap: wrap;
  }

  .ladder-top-actions {
    margin-left: 0;
    width: 100%;
  }

  .hero-panels {
    grid-template-columns: 1fr;
  }

  .ladder-app {
    width: min(calc(100% - 1rem), 1800px);
    padding: 0.5rem 0 2rem;
  }

  .topic-grid,
  .learner-actions,
  .vocab-prompt-form,
  .chat-form,
  .assessment-form {
    grid-template-columns: 1fr;
  }

  .assessment-chat-head {
    align-items: stretch;
    flex-direction: column;
  }

  .assessment-nav {
    justify-content: stretch;
  }

  .assessment-nav button {
    flex: 1;
  }

  .assessment-log {
    max-height: 55vh;
    min-height: 310px;
  }

  .placement-toolbar.is-collapsed .placement-summary {
    grid-template-columns: 1fr;
  }

  .placement-toolbar.is-collapsed .placement-actions {
    grid-column: 1;
    grid-row: auto;
    justify-content: stretch;
  }

  .placement-toolbar.is-collapsed .placement-actions button {
    flex: 1;
  }

  .placement-profile-prompt,
  .placement-profile-prompt div {
    align-items: stretch;
    flex-direction: column;
  }

  .topic-strip {
    margin-inline: 0;
    overscroll-behavior-x: contain;
  }

  .tier-rail {
    overflow: visible;
    padding: 0;
  }

  .rail-head {
    padding: 1rem;
  }

  .tier-list {
    display: grid;
    gap: 0.65rem;
    grid-auto-rows: 136px;
    padding: 0.75rem;
  }

  .tier-item {
    border-bottom: 0;
  }

  .tier-button {
    align-items: start;
    border: 1px solid var(--ladder-line);
    border-radius: 8px;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas:
      "number meta"
      "number progress";
    gap: 0.2rem 0.6rem;
    min-height: 0;
    padding: 0.75rem;
  }

  .tier-number {
    grid-area: number;
    height: 32px;
    width: 32px;
  }

  .tier-meta {
    grid-area: meta;
  }

  .tier-meta strong {
    font-size: 19.2px;
    line-height: 1.06;
  }

  .tier-meta small {
    font-size: 14.4px;
    line-height: 1.08;
  }

  .tier-progress {
    align-self: end;
    grid-area: progress;
    font-size: 13.2px;
    line-height: 1;
    justify-self: start;
  }

  .topic-head,
  .panel-heading {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Final product-surface pass: keep the page white, make the work panels feel unified. */
.ladder-hero {
  align-items: start !important;
  gap: 1.25rem !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.hero-panels {
  align-self: start !important;
  display: contents !important;
  gap: 1rem !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.hero-panels .learner-panel,
.hero-panels .topic-search-panel,
.hero-panels .evaluation-panel {
  min-height: 360px !important;
}

.ladder-hero-copy {
  align-self: stretch !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #102235 !important;
  grid-column: span 2 !important;
  min-height: 360px !important;
  overflow: visible !important;
  padding: 0.65rem 0.45rem !important;
}

.ladder-hero-copy::before,
.ladder-hero-copy::after {
  display: none !important;
}

.hero-kicker-row {
  align-items: flex-start !important;
  display: flex !important;
  gap: 1rem !important;
  justify-content: space-between !important;
}

.hero-kicker-row .eyebrow {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.hero-kicker-row .education-focus-control {
  flex: 0 0 min(240px, 38%) !important;
}

.hero-certifications-row {
  align-items: center !important;
  display: flex !important;
  gap: 0.5rem !important;
  margin-top: 0.5rem !important;
}

.hero-cert-label {
  color: var(--ladder-muted) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
}

.hero-cert-count {
  background: rgba(201, 160, 90, 0.15) !important;
  border-radius: 10px !important;
  color: var(--ladder-focus) !important;
  display: inline-flex !important;
  font-size: 0.85rem !important;
  font-weight: 900 !important;
  min-width: 24px !important;
  align-items: center !important;
  justify-content: center !important;
  height: 24px !important;
  padding: 0 0.4rem !important;
}

.ladder-hero .eyebrow {
  background: transparent !important;
  border: 0 !important;
  color: #5b477e !important;
  display: block !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.16em !important;
  line-height: 1.45 !important;
  max-width: 46ch !important;
  padding: 0 !important;
}

.ladder-hero h1 {
  color: #102235 !important;
  font-size: clamp(3.45rem, 5.6vw, 5.55rem) !important;
  line-height: 0.9 !important;
  margin: 1.15rem 0 0.65rem !important;
  text-shadow: 0 8px 24px rgba(16, 34, 53, 0.12) !important;
}

.ladder-hero h1::after {
  background: linear-gradient(90deg, #5b477e, #dbb87a, rgba(219, 184, 122, 0)) !important;
  height: 5px !important;
  max-width: 215px !important;
}

.hero-text {
  background: transparent !important;
  border: 0 !important;
  color: #34495d !important;
  display: -webkit-box !important;
  font-size: 1.08rem !important;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  line-height: 1.45 !important;
  max-width: 55ch !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.ladder-hero-stats {
  display: grid !important;
  gap: 0.55rem !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  margin-top: 1.15rem !important;
  max-width: 100% !important;
}

.ladder-hero-stat {
  align-items: center !important;
  background: linear-gradient(180deg, rgba(16, 34, 53, 0.045), rgba(219, 184, 122, 0.05)) !important;
  border-top: 2px solid rgba(219, 184, 122, 0.72) !important;
  color: #102235 !important;
  display: grid !important;
  justify-items: center !important;
  min-width: 0 !important;
  padding: 0.58rem 0.62rem 0.54rem !important;
  text-align: center !important;
}

.ladder-hero-stat strong {
  color: #102235 !important;
  display: block !important;
  font-family: var(--font-ui) !important;
  font-size: clamp(1rem, 1.35vw, 1.24rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

.ladder-hero-stat span {
  color: #5b477e !important;
  display: block !important;
  font-size: 0.66rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.2 !important;
  margin-top: 0.32rem !important;
  text-transform: uppercase !important;
}

.ladder-hero-stat--primary {
  border-top-color: #5b477e !important;
}

.hero-ribbon-section {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  margin-top: 1.15rem !important;
}

.hero-ribbon-label {
  color: #5b477e !important;
  display: block !important;
  font-size: 0.78rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.hero-ribbon-track {
  display: grid !important;
  gap: 0.42rem !important;
  grid-template-columns: repeat(15, minmax(0, 1fr)) !important;
  width: 100% !important;
}

.hero-ribbon-slot {
  align-items: center !important;
  background: linear-gradient(180deg, rgba(16, 34, 53, 0.035), rgba(16, 34, 53, 0.01)) !important;
  border: 1px dashed rgba(91, 71, 126, 0.24) !important;
  color: rgba(16, 34, 53, 0.48) !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  justify-items: center !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0.38rem 0.2rem 0.45rem !important;
  position: relative !important;
  text-align: center !important;
}

.hero-ribbon-slot.has-ribbon {
  border: 0 !important;
  box-shadow: 0 12px 24px rgba(16, 34, 53, 0.12) !important;
  color: #ffffff !important;
  overflow: hidden !important;
}

.hero-ribbon-slot.has-ribbon::after {
  background: rgba(255, 255, 255, 0.72) !important;
  bottom: -10px !important;
  clip-path: polygon(0 0, 50% 62%, 100% 0, 100% 100%, 0 100%) !important;
  content: "" !important;
  height: 20px !important;
  left: 0 !important;
  opacity: 0.7 !important;
  position: absolute !important;
  right: 0 !important;
}

.hero-ribbon-number {
  align-items: center !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  font-size: 0.62rem !important;
  font-weight: 900 !important;
  height: 20px !important;
  justify-content: center !important;
  line-height: 1 !important;
  width: 20px !important;
}

.hero-ribbon-medal {
  font-size: clamp(0.58rem, 0.72vw, 0.76rem) !important;
  font-weight: 950 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  margin-top: 0.2rem !important;
  text-transform: uppercase !important;
}

.hero-ribbon-tier {
  display: none !important;
  font-size: 0.5rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.05 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  padding: 0 0.05rem !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.hero-ribbon-slot.is-empty .hero-ribbon-medal::before {
  color: rgba(91, 71, 126, 0.35) !important;
  content: "-" !important;
  font-size: 1.1rem !important;
}

.ribbon-certification {
  background: linear-gradient(180deg, #d9bd78 0%, #b88435 100%) !important;
}

.ribbon-expert-challenge {
  background: linear-gradient(180deg, #7e67b3 0%, #4d3f7f 100%) !important;
}

.ribbon-mastery-challenge {
  background:
    radial-gradient(circle at 50% 15%, rgba(255, 231, 168, 0.32), transparent 34%),
    linear-gradient(180deg, #102235 0%, #07111d 100%) !important;
  outline: 1px solid rgba(219, 184, 122, 0.55) !important;
  outline-offset: -1px !important;
}

.ribbon-mastery-challenge .hero-ribbon-medal {
  color: #ffe7a8 !important;
}

.hero-panels .learner-panel,
.hero-panels .topic-search-panel,
.hero-panels .evaluation-panel {
  align-self: stretch !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(219, 184, 122, 0.11), transparent 28%),
    linear-gradient(145deg, #111d2a 0%, #17293b 100%) !important;
  border: 1px solid rgba(219, 184, 122, 0.34) !important;
  box-shadow: 0 18px 36px rgba(8, 18, 31, 0.18) !important;
  color: #e8e3db !important;
  height: 100% !important;
  min-height: 360px !important;
}

.hero-panels .panel-label,
.hero-panels .learner-panel strong,
.hero-panels .topic-search-panel strong,
.hero-panels .evaluation-panel strong {
  color: #ffe7a8 !important;
}

.hero-panels .topic-search-panel p,
.hero-panels .evaluation-panel p,
.hero-panels .topic-search-empty,
.hero-panels .topic-search-results {
  color: #d8e5ef !important;
}

.hero-panels input,
.hero-panels select {
  background: #07111d !important;
  border-color: rgba(219, 184, 122, 0.28) !important;
  color: #f7fbff !important;
  min-width: 0 !important;
}

.hero-panels input::placeholder {
  color: #9aa7b4 !important;
}

.hero-panels button {
  background: #07111d !important;
  border-color: rgba(219, 184, 122, 0.42) !important;
  color: #dbb87a !important;
}

.hero-panels button:hover {
  background: #102235 !important;
  color: #ffe7a8 !important;
}

.hero-panels .evaluation-actions a {
  color: #ffe7a8 !important;
}

.hero-panels .learner-actions {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.hero-panels .learner-actions button {
  white-space: nowrap !important;
}

.hero-panels .evaluation-controls {
  margin-top: 1rem !important;
}

.hero-panels .evaluation-actions {
  align-items: stretch !important;
  display: grid !important;
  gap: 0.7rem !important;
  grid-template-columns: 1fr !important;
  justify-content: stretch !important;
}

.hero-panels .evaluation-actions button {
  width: 100% !important;
}

.hero-panels .topic-search-results {
  max-height: 280px !important;
  overflow: auto !important;
}

.hero-panels .learner-panel {
  background:
    radial-gradient(circle at 100% 0%, rgba(219, 184, 122, 0.12), transparent 30%),
    linear-gradient(145deg, #101b28 0%, #152638 100%) !important;
}

.hero-panels .topic-search-panel {
  background:
    radial-gradient(circle at 100% 0%, rgba(219, 184, 122, 0.14), transparent 30%),
    linear-gradient(145deg, #151f2c 0%, #1b2f43 100%) !important;
}

.hero-panels .evaluation-panel {
  background:
    radial-gradient(circle at 100% 0%, rgba(115, 95, 158, 0.28), transparent 32%),
    linear-gradient(145deg, #15172a 0%, #23183d 100%) !important;
}

@media (max-width: 1180px) {
  .ladder-hero {
    grid-template-columns: 1fr !important;
  }

  .hero-panels {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ladder-hero-copy {
    grid-column: auto !important;
    min-height: 0 !important;
  }

  .ladder-hero-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .hero-ribbon-track {
    grid-template-columns: repeat(15, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .hero-kicker-row {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .hero-kicker-row .education-focus-control {
    flex-basis: auto !important;
    max-width: 360px !important;
  }

  .ladder-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .hero-ribbon-track {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .hero-panels {
    grid-auto-rows: 1fr !important;
    grid-template-columns: 1fr !important;
  }

  .hero-panels .learner-panel,
  .hero-panels .topic-search-panel,
  .hero-panels .evaluation-panel {
    min-height: 0 !important;
  }
}

/* Ladder dark mode */
[data-theme="dark"] {
  --ladder-bg: #07111d;
  --ladder-panel: #111d2a;
  --ladder-line: #304252;
  --ladder-soft: #172638;
  --ladder-ink: #e8e3db;
  --ladder-muted: #b7c0c8;
  --ladder-good: #bda7ff;
  --ladder-focus: #dbb87a;
}

[data-theme="dark"] body {
  background: #07111d !important;
}

[data-theme="dark"] .ladder-app {
  background: #07111d !important;
}

[data-theme="dark"] .workspace {
  background: #0b1622 !important;
  border-color: #304252 !important;
}

[data-theme="dark"] .ladder-hero-copy,
[data-theme="dark"] .placement-toolbar,
[data-theme="dark"] .placement-chat,
[data-theme="dark"] .placement-progress,
[data-theme="dark"] .topic-head,
[data-theme="dark"] .topic-panel,
[data-theme="dark"] .conversation-panel,
[data-theme="dark"] .resource-panel,
[data-theme="dark"] .transcript-panel,
[data-theme="dark"] .certification-workspace-panel,
[data-theme="dark"] .tier-rail,
[data-theme="dark"] .rail-head,
[data-theme="dark"] .tier-list,
[data-theme="dark"] .assigned-rungs-panel,
[data-theme="dark"] .chat-log,
[data-theme="dark"] .assessment-log,
[data-theme="dark"] .vocab-definition-box,
[data-theme="dark"] .transcript-list {
  background: #111d2a !important;
  border-color: #304252 !important;
  color: #e8e3db !important;
}

[data-theme="dark"] .ladder-hero-copy,
[data-theme="dark"] .placement-toolbar,
[data-theme="dark"] .topic-head,
[data-theme="dark"] .conversation-panel,
[data-theme="dark"] .transcript-panel {
  background:
    radial-gradient(circle at 92% 8%, rgba(219, 184, 122, 0.14), transparent 34%),
    linear-gradient(145deg, #07111d 0%, #102235 58%, #07111d 100%) !important;
}

[data-theme="dark"] .topic-panel,
[data-theme="dark"] .resource-panel,
[data-theme="dark"] .certification-workspace-panel,
[data-theme="dark"] .placement-chat,
[data-theme="dark"] .placement-progress,
[data-theme="dark"] .assigned-rungs-panel,
[data-theme="dark"] .vocab-definition-box,
[data-theme="dark"] .chat-log,
[data-theme="dark"] .assessment-log {
  background: #142233 !important;
}

[data-theme="dark"] .panel-heading,
[data-theme="dark"] .conversation-panel .panel-heading,
[data-theme="dark"] .transcript-panel .panel-heading,
[data-theme="dark"] .assessment-chat-head {
  background: #0d1723 !important;
  border-color: #304252 !important;
  color: #e8e3db !important;
}

[data-theme="dark"] .ladder-hero h1,
[data-theme="dark"] .placement-summary h2,
[data-theme="dark"] .assessment-chat-head strong,
[data-theme="dark"] .topic-head h2,
[data-theme="dark"] .panel-heading h3,
[data-theme="dark"] .panel-heading strong,
[data-theme="dark"] .topic-panel strong,
[data-theme="dark"] .conversation-panel strong,
[data-theme="dark"] .resource-panel strong,
[data-theme="dark"] .transcript-panel strong,
[data-theme="dark"] .rail-product-title,
[data-theme="dark"] .tier-meta strong,
[data-theme="dark"] .vocab-definition-box strong,
[data-theme="dark"] .message strong {
  color: #fff7df !important;
}

[data-theme="dark"] .hero-text,
[data-theme="dark"] .placement-summary p,
[data-theme="dark"] .placement-toolbar p,
[data-theme="dark"] .placement-toolbar small,
[data-theme="dark"] .topic-head,
[data-theme="dark"] .panel-heading p,
[data-theme="dark"] .topic-panel p,
[data-theme="dark"] .conversation-panel p,
[data-theme="dark"] .resource-panel p,
[data-theme="dark"] .transcript-panel p,
[data-theme="dark"] .vocab-definition-box p,
[data-theme="dark"] .message,
[data-theme="dark"] .transcript-event small,
[data-theme="dark"] .tier-meta small,
[data-theme="dark"] .tier-progress,
[data-theme="dark"] .topic-search-empty,
[data-theme="dark"] .vocab-definition-box small {
  color: #d8e5ef !important;
}

[data-theme="dark"] .eyebrow,
[data-theme="dark"] .panel-label,
[data-theme="dark"] .rail-product-label,
[data-theme="dark"] .transcript-panel .panel-heading span,
[data-theme="dark"] .topic-head .panel-label,
[data-theme="dark"] .placement-toolbar .panel-label {
  color: #ffe7a8 !important;
}

[data-theme="dark"] .tier-button,
[data-theme="dark"] .assigned-rung-link,
[data-theme="dark"] .topic-search-result,
[data-theme="dark"] .vocab-pill,
[data-theme="dark"] .resource-chip,
[data-theme="dark"] .message.assistant,
[data-theme="dark"] .message.user,
[data-theme="dark"] .standards-review-offer,
[data-theme="dark"] .vocab-card,
[data-theme="dark"] .rung-card,
[data-theme="dark"] .transcript-event,
[data-theme="dark"] .placement-metrics span,
[data-theme="dark"] .placement-metrics small,
[data-theme="dark"] .progress-meter {
  background: #172638 !important;
  border-color: #304252 !important;
  color: #e8e3db !important;
}

[data-theme="dark"] .standards-review-offer p {
  color: #d8e5ef !important;
}

[data-theme="dark"] .standards-review-actions button.secondary,
[data-theme="dark"] .standards-review-actions a {
  border-color: #dbb87a !important;
  color: #ffe7a8 !important;
}

[data-theme="dark"] .standards-review-actions button:not(.secondary) {
  background: #dbb87a !important;
  border-color: #dbb87a !important;
  color: #07111d !important;
}

[data-theme="dark"] .topic-search-result strong,
[data-theme="dark"] .assigned-rung-link strong,
[data-theme="dark"] .vocab-card strong,
[data-theme="dark"] .rung-card strong,
[data-theme="dark"] .standards-review-offer strong,
[data-theme="dark"] .transcript-event strong {
  color: #fff7df !important;
}

[data-theme="dark"] .topic-search-result small,
[data-theme="dark"] .resource-chip,
[data-theme="dark"] .assigned-rung-link span,
[data-theme="dark"] .assigned-rung-link small {
  color: #d8e5ef !important;
}

[data-theme="dark"] .tier-button:hover,
[data-theme="dark"] .tier-button.active,
[data-theme="dark"] .vocab-pill.active,
[data-theme="dark"] .vocab-pill:focus-visible,
[data-theme="dark"] .vocab-pill:hover,
[data-theme="dark"] .resource-chip:hover,
[data-theme="dark"] .topic-search-result:hover,
[data-theme="dark"] .assigned-rung-link:hover {
  background: #26384d !important;
  border-color: #dbb87a !important;
  color: #fff7df !important;
}

[data-theme="dark"] .tier-button:hover *,
[data-theme="dark"] .tier-button.active *,
[data-theme="dark"] .vocab-pill.active *,
[data-theme="dark"] .vocab-pill:focus-visible *,
[data-theme="dark"] .vocab-pill:hover *,
[data-theme="dark"] .resource-chip:hover *,
[data-theme="dark"] .topic-search-result:hover *,
[data-theme="dark"] .assigned-rung-link:hover * {
  color: #fff7df !important;
}

[data-theme="dark"] .ladder-select,
[data-theme="dark"] .ladder-input,
[data-theme="dark"] .learner-actions input,
[data-theme="dark"] .topic-search-input,
[data-theme="dark"] .evaluation-select,
[data-theme="dark"] .chat-form input,
[data-theme="dark"] .assessment-form textarea,
[data-theme="dark"] .vocab-prompt-form input {
  background: #07111d !important;
  border-color: #304252 !important;
  color: #f7fbff !important;
}

[data-theme="dark"] .ladder-select::placeholder,
[data-theme="dark"] .ladder-input::placeholder,
[data-theme="dark"] .learner-actions input::placeholder,
[data-theme="dark"] .topic-search-input::placeholder,
[data-theme="dark"] .chat-form input::placeholder,
[data-theme="dark"] .assessment-form textarea::placeholder,
[data-theme="dark"] .vocab-prompt-form input::placeholder {
  color: #9aa7b4 !important;
}

[data-theme="dark"] button.secondary,
[data-theme="dark"] .assessment-nav button.secondary,
[data-theme="dark"] .placement-profile-prompt button.secondary {
  background: #172638 !important;
  border-color: #304252 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .ladder-nav {
  background: #07111d !important;
  border-color: rgba(219, 184, 122, 0.32) !important;
}

[data-theme="dark"] .ladder-nav .nav-brand-primary,
[data-theme="dark"] .ladder-nav .nav-brand-secondary,
[data-theme="dark"] .dark-mode-toggle,
[data-theme="dark"] .dark-mode-toggle__icon,
[data-theme="dark"] .nav-btn {
  color: #ffe7a8 !important;
}

[data-theme="dark"] .dark-mode-toggle {
  background: #111d2a !important;
  border-color: #304252 !important;
}

[data-theme="dark"] .nav-cert-count {
  background: #dbb87a !important;
  color: #07111d !important;
}

[data-theme="dark"] .hero-ribbon-label {
  color: #ffe7a8 !important;
}

[data-theme="dark"] .ladder-hero-stat,
[data-theme="dark"] .hero-ribbon-slot {
  background: #111d2a !important;
  border-color: rgba(219, 184, 122, 0.36) !important;
  color: #d8e5ef !important;
}

[data-theme="dark"] .ladder-hero-stat strong,
[data-theme="dark"] .ladder-hero-stat span,
[data-theme="dark"] .hero-ribbon-number,
[data-theme="dark"] .hero-ribbon-tier,
[data-theme="dark"] .hero-ribbon-medal {
  color: #f7fbff !important;
}

[data-theme="dark"] .hero-ribbon-slot.is-empty .hero-ribbon-medal::before {
  color: #9aa7b4 !important;
}

.conversation-panel #conversationTitle,
[data-theme="dark"] .conversation-panel #conversationTitle {
  color: #ffffff !important;
}

#architectureDialog,
#architectureDialog * {
  color: #000000 !important;
}

#architectureDialog .topic-panel,
#architectureDialog .panel-heading,
#architectureDialog .certification-guide-callout,
#architectureDialog .certification-guide-note,
#architectureDialog .certification-guide-grid section {
  background: #ffffff !important;
  border-color: #2b3745 !important;
}

#architectureDialog .certification-guide-callout,
#architectureDialog .certification-guide-note {
  background: #f7f7f7 !important;
}

#architectureDialog button {
  background: #ffffff !important;
  border-color: #2b3745 !important;
}

.ladder-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  padding: 1.25rem 1rem 2rem;
  color: var(--ladder-muted);
  font-size: 0.78rem;
  text-align: center;
}

.certification-mode-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.ladder-legal span:last-child {
  color: var(--ladder-focus);
  font-weight: 700;
}

/* ============================================================
   Source: theladder-products/products.css
   ============================================================ */
:root {
  --products-page: #ffffff;
  --products-ink: #102235;
  --products-muted: #34495d;
  --products-panel: #ffffff;
  --products-soft: #fbfaf6;
  --products-soft-2: #f2eadb;
  --products-line: #ded4c5;
  --products-navy: #07111d;
  --products-navy-2: #172331;
  --products-gold: #dbb87a;
  --products-gold-light: #ffe7a8;
  --products-violet: #5b477e;
  --products-violet-dark: #23183d;
  --products-danger: #a13428;
}

[data-theme="dark"] {
  --products-page: #0f1923;
  --products-ink: #e8e3db;
  --products-muted: #b7c0c8;
  --products-panel: #172331;
  --products-soft: #101b26;
  --products-soft-2: #203242;
  --products-line: #304252;
  --products-navy: #07111d;
  --products-navy-2: #172331;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--products-page);
  color: var(--products-ink);
}

button,
input,
select {
  font: inherit;
}

.products-nav {
  background: var(--products-navy);
  border-bottom: 1px solid rgba(219, 184, 122, 0.22);
  height: auto;
}

.products-nav .nav-inner {
  align-items: center;
  display: flex;
  gap: 0.8rem;
  height: auto;
  margin: 0 auto;
  max-width: 1720px;
  min-height: 72px;
  padding: 0 1.2rem;
}

.brand-link,
.nav-link,
.hub-link {
  text-decoration: none;
}

.brand {
  color: var(--products-gold-light);
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 800;
}

.nav-divider {
  background: rgba(219, 184, 122, 0.24);
  height: 28px;
  width: 1px;
}

[data-theme="dark"] .nav-divider {
  background: rgba(219, 184, 122, 0.18);
}

.nav-link {
  color: #e8e3db;
  font-weight: 750;
  padding: 0.5rem 0.65rem;
}

.nav-link.active {
  color: var(--products-gold-light);
}

.products-nav .nav-link:hover {
  background: rgba(255, 231, 168, 0.1);
  color: var(--products-gold-light);
}

[data-theme="dark"] .nav-link {
  color: #b7c0c8;
}

[data-theme="dark"] .nav-link.active {
  color: #dbb87a;
}

[data-theme="dark"] .products-nav .nav-link:hover {
  background: rgba(219, 184, 122, 0.15);
  color: #dbb87a;
}

.nav-spacer {
  flex: 1;
}

.theme-toggle,
.hub-link {
  align-items: center;
  border: 1px solid rgba(219, 184, 122, 0.42);
  border-radius: 7px;
  display: inline-flex;
  font-weight: 800;
  min-height: 42px;
  padding: 0.55rem 0.85rem;
}

.theme-toggle {
  background: transparent;
  color: #e8e3db;
  cursor: pointer;
}

.hub-link {
  background: var(--products-gold);
  color: var(--products-navy);
  text-transform: uppercase;
}

.products-app {
  margin: 0 auto;
  max-width: 1800px;
  padding: 1.2rem 1rem 3rem;
}

.products-hero {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) 420px;
  margin-bottom: 1rem;
}

.hero-copy,
.hero-stats,
.category-rail,
.catalog-panel,
.product-detail {
  border: 1px solid var(--products-line);
  border-radius: 8px;
}

.hero-copy {
  background:
    radial-gradient(circle at 96% 0%, rgba(219, 184, 122, 0.22), transparent 31%),
    linear-gradient(145deg, #07111d 0%, #102235 58%, #07111d 100%);
  color: #f7fbff;
  min-height: 270px;
  padding: clamp(1.4rem, 3vw, 2.6rem);
}

.hero-kicker {
  color: var(--products-gold-light);
  font-weight: 850;
  letter-spacing: 0.08em;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.hero-copy h1 {
  color: var(--products-gold-light);
  font-family: var(--font-display);
  font-size: 4.6rem;
  line-height: 0.95;
  margin: 0 0 1rem;
  text-wrap: balance;
}

.hero-title-row {
  align-items: start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.education-focus-control {
  background: rgba(7, 17, 29, 0.82);
  border: 1px solid rgba(219, 184, 122, 0.48);
  border-radius: 8px;
  display: grid;
  flex: 0 0 min(240px, 100%);
  gap: 0.35rem;
  padding: 0.65rem;
}

.education-focus-control span {
  color: var(--products-gold-light);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.education-focus-control select {
  background: #07111d;
  border: 1px solid rgba(219, 184, 122, 0.5);
  border-radius: 7px;
  color: #ffffff;
  min-height: 42px;
  padding: 0.45rem 0.6rem;
  width: 100%;
}

.hero-text {
  color: #f7fbff;
  font-size: 1.18rem;
  line-height: 1.55;
  margin: 0;
  max-width: 72ch;
  text-wrap: pretty;
}

.hero-stats {
  background: var(--products-panel);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
  padding: 1rem;
}

.hero-stats div {
  background: var(--products-soft);
  border: 1px solid var(--products-line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: 1rem;
}

.hero-stats strong {
  color: var(--products-violet);
  font-size: 2.1rem;
  line-height: 1;
}

[data-theme="dark"] .hero-stats strong {
  color: var(--products-gold-light);
}

.hero-stats span {
  color: var(--products-muted);
  font-weight: 750;
  margin-top: 0.4rem;
}

.products-layout {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: 300px minmax(520px, 1fr) 380px;
}

.products-page .products-layout {
  column-gap: 0.5rem;
  grid-template-columns: 340px minmax(520px, 1fr) 360px;
}

.use-cases-page .products-layout {
  column-gap: 0.5rem;
  grid-template-columns: 320px minmax(520px, 1fr) 360px;
}

.category-rail,
.catalog-panel,
.product-detail {
  background: var(--products-panel);
}

.category-rail,
.product-detail {
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  overscroll-behavior: contain;
  position: sticky;
  scrollbar-gutter: stable;
  top: 88px;
}

.rail-head,
.catalog-tools {
  border-bottom: 1px solid var(--products-line);
}

.central-course-workspace {
  background: var(--products-soft);
  border-bottom: 1px solid var(--products-line);
  padding: 0.72rem;
}

.central-course-workspace .course-conversation-workspace {
  background: #1a2a3a;
  border: 0;
  border-bottom: 3px solid #735f9e;
  border-radius: 8px;
  box-shadow: none;
  grid-template-columns: 1fr;
  margin-top: 0;
  padding: 0.9rem;
}

.central-course-workspace .workspace-head {
  align-items: center;
  background: #0f1923;
  border-bottom: 2px solid #735f9e;
  margin: -0.9rem -0.9rem 0;
  padding: 0.8rem 0.9rem;
  grid-column: 1 / -1;
}

.central-course-workspace .workspace-head strong,
.central-course-workspace .workspace-head small {
  color: #ffffff;
}

.central-course-workspace .course-chat-log {
  max-height: 620px;
  min-height: 360px;
}

.central-course-workspace .course-chat-form {
  border: 1px solid #d7c8ad;
  gap: 0.55rem;
  grid-template-columns: 1fr;
  padding: 0.65rem;
}

.central-course-workspace .course-chat-form label {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.central-course-workspace .course-chat-form textarea {
  box-sizing: border-box;
  height: 48px;
  line-height: 1.25;
  min-height: 48px;
  resize: none;
  width: 100%;
}

.central-course-workspace .course-chat-actions {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: auto auto;
  justify-content: end;
}

.central-course-workspace .course-chat-actions button {
  min-height: 42px;
  padding: 0.45rem 0.85rem;
}

.rail-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0.82rem 0.9rem;
}

.rail-head h2 {
  font-size: 1rem;
  margin: 0;
}

.rail-head span {
  color: var(--products-muted);
  font-size: 0.86rem;
  font-weight: 750;
}

.category-list {
  display: grid;
  gap: 0.28rem;
  padding: 0.65rem;
}

.category-button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--products-ink);
  cursor: pointer;
  display: flex;
  gap: 0.55rem;
  min-height: 44px;
  justify-content: space-between;
  overflow: hidden;
  padding: 0.42rem 0.55rem;
  text-align: left;
}

.category-button:hover,
.category-button.active {
  background: var(--products-soft);
  border-color: var(--products-line);
}

.category-button strong {
  font-size: 0.86rem;
  line-height: 1.12;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.category-button span {
  color: var(--products-muted);
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 750;
}

.catalog-tools {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(0, 1fr) 200px 200px;
  padding: 1rem;
}

@media (max-width: 720px) {
  .catalog-tools {
    grid-template-columns: minmax(0, 1fr);
  }
}

.request-panel {
  background: var(--products-soft);
  border-bottom: 1px solid var(--products-line);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  padding: 1rem;
  position: relative;
}

.request-copy {
  align-self: start;
  display: grid;
  gap: 0.35rem;
}

.request-copy span,
.request-form span,
.admin-auth-panel span,
.request-card-side span {
  color: var(--products-violet);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-theme="dark"] .request-copy span,
[data-theme="dark"] .request-form span,
[data-theme="dark"] .admin-auth-panel span,
[data-theme="dark"] .request-card-side span {
  color: var(--products-gold-light);
}

.request-copy h2 {
  font-size: 1.2rem;
  line-height: 1.15;
  margin: 0;
}

.request-copy p {
  color: var(--products-muted);
  line-height: 1.45;
  margin: 0;
  max-width: 48ch;
}

.request-form {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.request-form label,
.admin-auth-panel label,
.request-card-side label {
  display: grid;
  gap: 0.35rem;
}

.request-reason-field {
  grid-column: 1 / -1;
}

.request-form input,
.request-form select,
.request-form textarea,
.admin-auth-panel input,
.request-card-side textarea {
  background: var(--products-panel);
  border: 1px solid var(--products-line);
  border-radius: 7px;
  color: var(--products-ink);
  min-height: 42px;
  padding: 0.55rem 0.7rem;
  resize: vertical;
  width: 100%;
}

.request-form button,
.admin-auth-panel button,
.admin-card-actions button,
.secondary-admin-button {
  background: var(--products-navy);
  border: 1px solid var(--products-navy);
  border-radius: 7px;
  color: var(--products-gold-light);
  cursor: pointer;
  font-weight: 900;
  min-height: 42px;
  padding: 0.55rem 0.8rem;
}

.request-form button {
  align-self: end;
  justify-self: start;
  min-width: 156px;
  white-space: nowrap;
}

.request-form button:disabled,
.admin-auth-panel button:disabled,
.admin-card-actions button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.request-message {
  border: 1px solid var(--products-line);
  border-radius: 7px;
  font-weight: 800;
  grid-column: 2;
  margin: 0;
  padding: 0.65rem 0.75rem;
}

.request-message[data-tone="success"] {
  background: #f5ecd9;
  color: #332407;
}

.request-message[data-tone="warning"],
.request-message[data-tone="error"] {
  background: #fff0ed;
  color: var(--products-danger);
}

.request-message[hidden] {
  display: none;
}

.admin-queue-link {
  color: var(--products-violet);
  display: inline-flex;
  font-weight: 850;
  grid-column: 2;
  justify-self: start;
  line-height: 1.25;
  margin-top: -0.2rem;
  text-wrap: balance;
}

[data-theme="dark"] .request-panel {
  background: #101b26;
}

[data-theme="dark"] .request-form input,
[data-theme="dark"] .request-form select,
[data-theme="dark"] .request-form textarea,
[data-theme="dark"] .admin-auth-panel input,
[data-theme="dark"] .request-card-side textarea {
  background: #07111d;
  border-color: #304252;
  color: #e8e3db;
}

[data-theme="dark"] .request-message[data-tone="success"] {
  background: #203242;
  color: var(--products-gold-light);
}

[data-theme="dark"] .request-message[data-tone="warning"],
[data-theme="dark"] .request-message[data-tone="error"] {
  background: #2b1a1c;
  color: #ffd3cc;
}

[data-theme="dark"] .admin-queue-link {
  color: var(--products-gold-light);
}

.search-field,
.select-field {
  display: grid;
  gap: 0.35rem;
}

.search-field span,
.select-field span,
.detail-label,
.empty-label {
  color: var(--products-violet);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-theme="dark"] .search-field span,
[data-theme="dark"] .select-field span,
[data-theme="dark"] .detail-label,
[data-theme="dark"] .empty-label {
  color: var(--products-gold-light);
}

.search-field input,
.select-field select {
  background: var(--products-soft);
  border: 1px solid var(--products-line);
  border-radius: 7px;
  color: var(--products-ink);
  min-height: 44px;
  padding: 0.55rem 0.7rem;
  width: 100%;
}

.search-field input::placeholder {
  color: #5e6d7a;
}

[data-theme="dark"] .search-field input::placeholder {
  color: #c3ccd5;
}

.product-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  padding: 1rem;
}

.product-card {
  background: var(--products-soft);
  border: 1px solid var(--products-line);
  border-radius: 8px;
  color: var(--products-ink);
  cursor: pointer;
  display: grid;
  gap: 0.7rem;
  min-height: 190px;
  padding: 1rem;
  text-align: left;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.product-card:hover,
.product-card.active {
  background: #fff8e8;
  border-color: rgba(219, 184, 122, 0.8);
  transform: translateY(-1px);
}

[data-theme="dark"] .product-card:hover,
[data-theme="dark"] .product-card.active {
  background: #203242;
  border-color: rgba(219, 184, 122, 0.7);
}

.card-top {
  align-items: start;
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
}

.product-card h3 {
  font-size: 1.05rem;
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}

.product-number,
.depth-pill {
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.product-number {
  color: var(--products-muted);
}

.depth-pill {
  background: var(--products-navy);
  color: var(--products-gold-light);
  padding: 0.28rem 0.48rem;
}

.product-type {
  color: var(--products-violet);
  font-size: 0.84rem;
  font-weight: 850;
  margin: 0;
}

[data-theme="dark"] .product-type {
  color: var(--products-gold-light);
}

.product-reason {
  color: var(--products-muted);
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0;
}

.product-detail {
  min-height: 0;
}

.detail-inner {
  display: grid;
  gap: 0.78rem;
  padding: 1rem;
}

.detail-inner h2 {
  font-size: 1.55rem;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

.detail-inner p {
  color: var(--products-muted);
  line-height: 1.5;
  margin: 0;
}

.course-launch-panel {
  background: #fff8e8;
  border: 1px solid rgba(219, 184, 122, 0.88);
  border-radius: 8px;
  display: grid;
  gap: 0.55rem;
  padding: 0.8rem;
}

.course-launch-panel > span,
.course-level-field span,
.cert-stack-label {
  color: var(--products-violet);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.course-launch-panel strong {
  color: var(--products-ink);
  font-size: 1.08rem;
  line-height: 1.2;
}

.course-launch-panel p {
  color: var(--products-muted);
  font-size: 0.94rem;
}

.course-level-field {
  display: grid;
  gap: 0.35rem;
}

.course-level-field select {
  background: var(--products-panel);
  border: 1px solid var(--products-line);
  border-radius: 7px;
  color: var(--products-ink);
  min-height: 40px;
  padding: 0.45rem 0.6rem;
}

.course-launch-button {
  background: var(--products-navy);
  border: 1px solid var(--products-navy);
  border-radius: 7px;
  color: var(--products-gold-light);
  cursor: pointer;
  font-weight: 900;
  min-height: 42px;
  padding: 0.55rem 0.8rem;
  width: 100%;
}

.course-launch-button:hover,
.course-launch-button:focus-visible,
.course-launch-button[aria-current="true"] {
  background: #102235;
  border-color: #102235;
  color: #fff7df;
}

[data-theme="dark"] .course-launch-panel {
  background: #203242;
  border-color: rgba(219, 184, 122, 0.7);
}

[data-theme="dark"] .course-launch-panel > span,
[data-theme="dark"] .course-level-field span,
[data-theme="dark"] .cert-stack-label {
  color: var(--products-gold-light);
}

[data-theme="dark"] .course-launch-panel strong {
  color: #fff7df;
}

[data-theme="dark"] .course-level-field select {
  background: #07111d;
  border-color: #304252;
  color: #e8e3db;
}

[data-theme="dark"] .course-launch-button {
  background: var(--products-gold);
  border-color: var(--products-gold);
  color: var(--products-navy);
}

[data-theme="dark"] .course-launch-button:hover,
[data-theme="dark"] .course-launch-button:focus-visible,
[data-theme="dark"] .course-launch-button[aria-current="true"] {
  background: var(--products-gold-light);
  border-color: var(--products-gold-light);
  color: var(--products-navy);
}

.course-start-notice {
  background: #fff8e8;
  border: 1px solid rgba(219, 184, 122, 0.8);
  border-radius: 8px;
  color: var(--products-ink);
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem;
}

.course-start-notice[hidden] {
  display: none;
}

.course-start-notice strong {
  color: var(--products-violet);
}

.course-start-notice span {
  color: var(--products-muted);
  line-height: 1.45;
}

.course-start-notice small {
  color: var(--products-muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.course-conversation-workspace {
  background: var(--products-soft);
  border: 1px solid var(--products-line);
  border-radius: 7px;
  display: grid;
  gap: 0.75rem;
  margin-top: 0.35rem;
  padding: 0.75rem;
}

.course-conversation-workspace[hidden] {
  display: none;
}

.course-conversation-workspace strong {
  color: var(--products-ink);
}

.course-conversation-workspace p {
  color: var(--products-muted);
  font-size: 0.9rem;
  line-height: 1.45;
  margin: 0;
}

.workspace-empty {
  display: grid;
  gap: 0.3rem;
}

.workspace-head {
  align-items: start;
  border-bottom: 1px solid var(--products-line);
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding-bottom: 0.65rem;
}

.workspace-head div {
  display: grid;
  gap: 0.2rem;
}

.workspace-head span,
.course-chat-form label {
  color: var(--products-violet);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.workspace-head small {
  color: var(--products-muted);
  font-size: 0.78rem;
  font-weight: 750;
  text-align: right;
}

.course-chat-log {
  background: #243142;
  border: 1px solid rgba(115, 95, 158, 0.5);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  max-height: 430px;
  min-height: 320px;
  overflow-y: auto;
  padding: 0.8rem;
}

.course-message {
  border: 1px solid var(--products-line);
  border-radius: 8px;
  display: grid;
  gap: 0.25rem;
  line-height: 1.48;
  max-width: 88%;
  padding: 0.65rem 0.75rem;
}

.course-message span {
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.course-message.assistant {
  align-self: flex-start;
  background: #ffffff;
  border: 1px solid var(--products-line);
}

.course-message.assistant span {
  color: var(--products-navy);
}

.course-message.assistant p {
  color: #102235;
}

.course-message.user {
  align-self: flex-end;
  background: #f2edff;
  border-color: rgba(115, 95, 158, 0.35);
}

.course-message.user span,
.course-message.user p {
  color: #102235;
}

.course-chat-form {
  background: #ffffff;
  border: 1px solid #d7c8ad;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(16, 34, 53, 0.08);
  display: grid;
  gap: 0.5rem;
  padding: 0.65rem;
}

.course-chat-form textarea {
  background: #ffffff;
  border: 2px solid #c7b89f;
  border-radius: 7px;
  color: #102235;
  font: inherit;
  line-height: 1.45;
  min-height: 110px;
  padding: 0.65rem;
  resize: vertical;
}

.course-chat-form textarea:focus {
  border-color: var(--products-gold);
  box-shadow: 0 0 0 3px rgba(219, 184, 122, 0.22);
  outline: none;
}

.course-chat-form textarea::placeholder {
  color: #53667a;
}

.course-chat-actions {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: auto auto;
}

.course-chat-actions button {
  background: var(--products-gold);
  border: 1px solid var(--products-gold);
  border-radius: 7px;
  color: var(--products-navy);
  cursor: pointer;
  font-weight: 900;
  min-height: 40px;
  padding: 0.5rem 0.65rem;
}

.course-chat-actions .secondary-course-button {
  background: transparent;
  border-color: var(--products-line);
  color: var(--products-ink);
}

[data-theme="dark"] .course-conversation-workspace {
  background: #101b26;
  border-color: #304252;
}

[data-theme="dark"] .course-conversation-workspace strong {
  color: #fff7df;
}

[data-theme="dark"] .workspace-head span {
  color: var(--products-gold-light);
}

[data-theme="dark"] .course-message.assistant {
  background: #ffffff;
  border-color: var(--products-line);
}

[data-theme="dark"] .course-message.assistant span,
[data-theme="dark"] .course-message.assistant p {
  color: #102235;
}

[data-theme="dark"] .course-chat-form {
  background: #ffffff;
  border-color: #d7c8ad;
}

[data-theme="dark"] .course-chat-form label {
  color: #5d457b;
}

[data-theme="dark"] .course-chat-form textarea {
  background: #ffffff;
  border-color: #c7b89f;
  color: #102235;
}

[data-theme="dark"] .course-chat-form textarea::placeholder {
  color: #53667a;
}

[data-theme="dark"] .course-chat-actions .secondary-course-button {
  border-color: #304252;
  color: #e8e3db;
}

[data-theme="dark"] .course-start-notice {
  background: #203242;
  border-color: rgba(219, 184, 122, 0.7);
}

[data-theme="dark"] .course-start-notice strong {
  color: var(--products-gold-light);
}

.cert-stack {
  display: grid;
  gap: 0.44rem;
}

.cert-option {
  align-items: center;
  border: 1px solid var(--products-line);
  border-radius: 8px;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: minmax(0, 1fr) 92px;
  padding: 0.5rem;
}

.cert-option strong {
  display: block;
  font-size: 0.92rem;
  line-height: 1.15;
  margin-bottom: 0;
}

.cert-option {
  background: var(--products-navy);
  color: #f7fbff;
}

.cert-option p {
  color: #e8e3db;
  display: none;
}

.cert-option button {
  background: var(--products-gold);
  border: 1px solid var(--products-gold);
  border-radius: 7px;
  color: var(--products-navy);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 850;
  margin-top: 0;
  min-height: 34px;
  padding: 0.35rem 0.55rem;
  width: auto;
}

.cert-option button:hover,
.cert-option button:focus-visible,
.cert-option button[aria-current="true"] {
  background: var(--products-gold-light);
  border-color: var(--products-gold-light);
}

.empty-state {
  color: var(--products-muted);
  grid-column: 1 / -1;
  padding: 2rem;
  text-align: center;
}

.products-admin {
  margin: 0 auto;
  max-width: 1480px;
  padding: 1.2rem 1rem 3rem;
}

.admin-hero {
  background:
    radial-gradient(circle at 94% 0%, rgba(219, 184, 122, 0.18), transparent 32%),
    linear-gradient(145deg, #07111d 0%, #102235 62%, #07111d 100%);
  border: 1px solid var(--products-line);
  border-radius: 8px;
  color: #f7fbff;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) 300px;
  margin-bottom: 1rem;
  padding: clamp(1.4rem, 3vw, 2.4rem);
}

.admin-hero h1 {
  color: var(--products-gold-light);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 0.95;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}

.admin-hero p {
  color: #f7fbff;
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0;
  max-width: 68ch;
}

.admin-summary {
  align-self: stretch;
  background: rgba(7, 17, 29, 0.82);
  border: 1px solid rgba(219, 184, 122, 0.48);
  border-radius: 8px;
  display: grid;
  place-content: center;
  text-align: center;
}

.admin-summary strong {
  color: var(--products-gold-light);
  font-size: 3.2rem;
  line-height: 1;
}

.admin-summary span {
  color: #f7fbff;
  font-weight: 800;
}

.admin-auth-panel,
.admin-queue {
  background: var(--products-panel);
  border: 1px solid var(--products-line);
  border-radius: 8px;
  padding: 1rem;
}

.admin-auth-panel {
  display: grid;
  gap: 0.85rem;
  margin: 0 auto;
  max-width: 460px;
}

.admin-auth-panel h2,
.queue-toolbar h2 {
  margin: 0;
}

.admin-auth-panel p,
.queue-toolbar p {
  color: var(--products-muted);
  margin: 0;
}

.admin-error {
  background: #fff0ed;
  border: 1px solid rgba(161, 52, 40, 0.35);
  border-radius: 7px;
  color: var(--products-danger);
  font-weight: 800;
  padding: 0.65rem 0.75rem;
}

.admin-error[hidden],
.admin-queue[hidden],
.admin-auth-panel[hidden] {
  display: none;
}

.queue-toolbar {
  align-items: center;
  border-bottom: 1px solid var(--products-line);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: -1rem -1rem 1rem;
  padding: 1rem;
}

.queue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.filter-btn {
  background: var(--products-soft);
  border: 1px solid var(--products-line);
  border-radius: 999px;
  color: var(--products-ink);
  cursor: pointer;
  font-weight: 850;
  min-height: 36px;
  padding: 0.35rem 0.75rem;
}

.filter-btn.active {
  background: var(--products-gold);
  border-color: var(--products-gold);
  color: var(--products-navy);
}

.secondary-admin-button {
  background: transparent;
  color: var(--products-ink);
}

.admin-request-list {
  display: grid;
  gap: 0.85rem;
}

.admin-request-card {
  background: var(--products-soft);
  border: 1px solid var(--products-line);
  border-radius: 8px;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) 340px;
  padding: 1rem;
}

.request-card-heading {
  align-items: center;
  color: var(--products-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.86rem;
  font-weight: 800;
  gap: 0.5rem;
  justify-content: space-between;
}

.status-pill {
  background: var(--products-navy);
  border-radius: 999px;
  color: var(--products-gold-light);
  padding: 0.25rem 0.55rem;
}

.admin-request-card h3 {
  font-size: 1.45rem;
  line-height: 1.18;
  margin: 0.65rem 0 0.75rem;
}

.admin-request-card dl {
  display: grid;
  gap: 0.6rem;
  margin: 0;
}

.admin-request-card dt {
  color: var(--products-violet);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-request-card dd {
  color: var(--products-muted);
  line-height: 1.45;
  margin: 0.16rem 0 0;
}

.request-card-side {
  display: grid;
  gap: 0.7rem;
}

.admin-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.danger-admin-button {
  background: #fff0ed !important;
  border-color: rgba(161, 52, 40, 0.35) !important;
  color: var(--products-danger) !important;
}

.request-history {
  border-top: 1px solid var(--products-line);
  display: grid;
  gap: 0.3rem;
  padding-top: 0.65rem;
}

.request-history strong {
  color: var(--products-ink);
}

.request-history p,
.local-request-note {
  color: var(--products-muted);
  font-size: 0.86rem;
  line-height: 1.4;
  margin: 0;
}

.local-request-note {
  color: var(--products-danger);
  font-weight: 800;
  margin-top: 0.75rem;
}

[data-theme="dark"] .filter-btn,
[data-theme="dark"] .admin-request-card {
  background: #101b26;
}

[data-theme="dark"] .secondary-admin-button {
  color: #e8e3db;
}

[data-theme="dark"] .admin-request-card dt {
  color: var(--products-gold-light);
}

[data-theme="dark"] .admin-error,
[data-theme="dark"] .danger-admin-button {
  background: #2b1a1c !important;
  border-color: rgba(255, 211, 204, 0.35) !important;
  color: #ffd3cc !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--products-gold);
  outline-offset: 2px;
}

@media (max-width: 1240px) {
  .products-layout {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .products-page .products-layout,
  .use-cases-page .products-layout {
    column-gap: 0.5rem;
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .product-detail {
    grid-column: 1 / -1;
    min-height: 0;
    position: static;
  }
}

@media (max-width: 900px) {
  .products-nav {
    background: var(--products-navy);
  }

  .products-nav .nav-inner {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    height: auto;
    min-height: 0;
    padding: 0.75rem 1rem;
  }

  .nav-spacer,
  .nav-divider {
    display: none;
  }

  .brand-link {
    grid-column: 1 / -1;
  }

  .nav-link,
  .theme-toggle,
  .hub-link {
    justify-content: center;
    width: 100%;
  }

  .hub-link {
    grid-column: 1 / -1;
  }

  .products-hero,
  .products-layout,
  .catalog-tools,
  .central-course-workspace .course-conversation-workspace,
  .request-panel,
  .admin-hero,
  .admin-request-card {
    grid-template-columns: 1fr;
  }

  .central-course-workspace .workspace-head {
    grid-column: auto;
  }

  .central-course-workspace .course-chat-form {
    border: 1px solid #d7c8ad;
    grid-template-columns: 1fr;
    padding: 0.65rem;
  }

  .hero-title-row {
    align-items: stretch;
    flex-direction: column;
  }

  .education-focus-control {
    flex-basis: auto;
    max-width: 360px;
  }

  .category-rail {
    position: static;
  }

  .category-list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .hero-copy h1 {
    font-size: 3.1rem;
  }

  .hero-stats {
    grid-template-columns: 1fr;
  }

  .queue-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .queue-actions {
    justify-content: flex-start;
  }

  .admin-queue-link {
    grid-column: 1;
    margin-top: 0;
  }
}

@media (max-width: 560px) {
  .products-app {
    padding-inline: 0.75rem;
  }

  .hero-copy {
    min-height: 0;
  }

  .hero-copy h1 {
    font-size: 2.45rem;
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .request-form {
    grid-template-columns: 1fr;
  }

  .request-message {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===========================================================================
   Task 25 — Placement assessment panel
   =========================================================================== */
.placement-panel {
  background: var(--products-soft);
  border-bottom: 1px solid var(--products-line);
  padding: 0.9rem;
}

.placement-head {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: space-between;
}

.placement-copy span {
  color: var(--products-violet);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.placement-copy h2 {
  color: var(--products-ink);
  margin: 0.2rem 0 0.35rem;
}

.placement-copy p {
  color: var(--products-muted);
  margin: 0;
  max-width: 52ch;
}

.placement-toggle {
  background: var(--products-violet);
  border: 1px solid var(--products-violet);
  border-radius: 8px;
  color: #ffffff;
  cursor: pointer;
  font-weight: 900;
  min-height: 44px;
  padding: 0.6rem 0.95rem;
  white-space: nowrap;
}

.placement-toggle:hover,
.placement-toggle:focus-visible {
  background: var(--products-violet-dark);
}

.placement-conversation {
  margin-top: 0.9rem;
}

.placement-conversation[hidden] {
  display: none;
}

.placement-result {
  background: var(--products-panel);
  border: 1px solid var(--products-line);
  border-radius: 8px;
  margin-top: 0.8rem;
  padding: 0.85rem;
}

.placement-result[hidden] {
  display: none;
}

.placement-result strong {
  color: var(--products-ink);
  display: block;
  margin-bottom: 0.35rem;
}

.placement-scores {
  color: var(--products-muted);
  font-weight: 700;
  margin: 0 0 0.6rem;
}

.placement-block {
  margin-bottom: 0.6rem;
}

.placement-block-label {
  color: var(--products-violet);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.placement-block ul {
  list-style: none;
  margin: 0.3rem 0 0;
  padding: 0;
}

.placement-block li {
  border-bottom: 1px solid var(--products-line);
  color: var(--products-ink);
  padding: 0.3rem 0;
}

.placement-block li small {
  color: var(--products-muted);
  display: block;
  font-size: 0.78rem;
}

.placement-empty,
.placement-reasoning {
  color: var(--products-muted);
  font-style: italic;
  margin: 0.3rem 0 0;
}

/* ===========================================================================
   Task 27 — Certification exam workspace + outcome
   =========================================================================== */
.cert-workspace[hidden] {
  display: none;
}

.cert-close {
  background: transparent;
  border: 1px solid #735f9e;
  border-radius: 7px;
  color: #ffffff;
  cursor: pointer;
  font-weight: 800;
  margin-left: auto;
  padding: 0.35rem 0.7rem;
}

.cert-close:hover,
.cert-close:focus-visible {
  background: rgba(115, 95, 158, 0.35);
}

.cert-outcome {
  background: var(--products-panel);
  border: 1px solid var(--products-line);
  border-left: 4px solid var(--products-violet);
  border-radius: 8px;
  margin: 0.7rem 0;
  padding: 0.85rem;
}

.cert-outcome[hidden] {
  display: none;
}

.cert-outcome[data-outcome="pass"] {
  border-left-color: #2f7d4f;
}

.cert-outcome[data-outcome="non-pass"] {
  border-left-color: var(--products-danger);
}

.cert-outcome-headline {
  color: var(--products-ink);
  display: block;
  font-size: 1.02rem;
  margin-bottom: 0.4rem;
}

.cert-rationale,
.cert-validation,
.cert-challenge {
  color: var(--products-muted);
  margin: 0.35rem 0 0;
}

.cert-validation strong {
  color: var(--products-ink);
}

.rubric-list {
  list-style: none;
  margin: 0.6rem 0;
  padding: 0;
}

.rubric-row {
  border-bottom: 1px solid var(--products-line);
  display: grid;
  gap: 0.1rem 0.6rem;
  grid-template-columns: 1fr auto;
  padding: 0.4rem 0;
}

.rubric-dim {
  color: var(--products-ink);
  font-weight: 700;
}

.rubric-status {
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.rubric-row small {
  color: var(--products-muted);
  grid-column: 1 / -1;
}

.rubric-pass .rubric-status {
  color: #2f7d4f;
}

.rubric-fail .rubric-status {
  color: var(--products-danger);
}

.rubric-unknown .rubric-status {
  color: var(--products-muted);
}

/* Task 30 — identity-assurance gate (shown before a certification starts). */
.identity-gate-body {
  color: var(--products-ink);
  display: grid;
  gap: 0.7rem;
  padding: 0.2rem;
}

.identity-gate-intro {
  color: var(--products-ink);
  margin: 0;
}

.identity-gate-account {
  color: var(--products-muted);
  font-size: 0.9rem;
  margin: 0;
}

.identity-gate-account strong {
  color: var(--products-ink);
}

.identity-levels {
  display: grid;
  gap: 0.5rem;
}

.identity-level {
  background: var(--products-soft);
  border: 1px solid var(--products-line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 0.2rem 0.6rem;
  grid-template-columns: auto 1fr;
  padding: 0.6rem 0.7rem;
}

.identity-level.selected {
  border-color: var(--products-violet);
  box-shadow: 0 0 0 2px rgba(91, 71, 126, 0.25);
}

.identity-level.disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.identity-level input[type="radio"] {
  align-self: start;
  margin-top: 0.2rem;
}

.identity-level-label {
  color: var(--products-ink);
  font-weight: 800;
}

.identity-level-desc,
.identity-level-note {
  color: var(--products-muted);
  font-size: 0.86rem;
  grid-column: 2;
}

.identity-level-note {
  font-style: italic;
}

.identity-check {
  align-items: start;
  color: var(--products-ink);
  display: grid;
  gap: 0.5rem;
  grid-template-columns: auto 1fr;
}

.identity-check[hidden] {
  display: none;
}

.identity-check input[type="checkbox"] {
  margin-top: 0.2rem;
}

.identity-resolved {
  color: var(--products-muted);
  margin: 0;
}

.identity-resolved strong {
  color: var(--products-ink);
}

.identity-gate-actions {
  display: flex;
  justify-content: flex-end;
}

.identity-gate-actions button {
  background: var(--products-gold);
  border: 1px solid var(--products-gold);
  border-radius: 7px;
  color: var(--products-navy);
  cursor: pointer;
  font-weight: 900;
  min-height: 42px;
  padding: 0.5rem 1rem;
}

.identity-gate-actions button:hover,
.identity-gate-actions button:focus-visible {
  background: var(--products-gold-light);
}

.identity-gate-error {
  color: var(--products-danger);
  font-weight: 700;
  margin: 0;
}

.identity-gate-error[hidden] {
  display: none;
}

@media (max-width: 560px) {
  .placement-head {
    flex-direction: column;
  }

  .placement-toggle {
    width: 100%;
  }
}

/* ============================================================
   Source: theladder-use-cases/use-cases.css
   ============================================================ */
/* ---------------------------------------------------------------------------
   Use-Cases page-scoped styles (Tasks 30 + 31)
   Loaded AFTER /theladder-products/products.css. Adds only the few styles the
   shared stylesheet does not provide: the language selector inside the hero
   control row and the lightweight certification identity-assurance gate. All
   colors reuse the products.css custom properties so light/dark stay in sync.
   --------------------------------------------------------------------------- */

/* Stack the Education Focus + Language controls in the hero title row. */
.hero-controls {
  display: flex;
  flex: 0 0 min(260px, 100%);
  flex-direction: column;
  gap: 0.6rem;
}
.hero-controls .education-focus-control {
  flex: 1 1 auto;
}

/* Identity-assurance gate — built from existing card tokens. */
.uc-identity-gate {
  display: grid;
  gap: 0.7rem;
}
.uc-identity-gate > strong {
  font-size: 1.02rem;
}
.uc-identity-field {
  display: grid;
  gap: 0.3rem;
}
.uc-identity-field > span {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}
.uc-identity-field select,
.uc-identity-field input {
  border: 1px solid rgba(120, 120, 120, 0.45);
  border-radius: 7px;
  min-height: 40px;
  padding: 0.45rem 0.6rem;
  width: 100%;
  background: inherit;
  color: inherit;
  font: inherit;
}
.uc-identity-desc {
  font-size: 0.85rem;
  margin: 0;
  opacity: 0.85;
}
.uc-identity-account {
  display: grid;
  gap: 0.55rem;
  padding: 0.6rem;
  border: 1px dashed rgba(120, 120, 120, 0.4);
  border-radius: 8px;
}
.uc-identity-account-actions,
.uc-identity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.uc-identity-attest {
  align-items: start;
  display: flex;
  gap: 0.5rem;
  font-size: 0.88rem;
  line-height: 1.4;
}
.uc-identity-attest input {
  margin-top: 0.2rem;
}
.uc-identity-error {
  color: #b3261e;
  font-size: 0.85rem;
  margin: 0;
}
[data-theme="dark"] .uc-identity-error {
  color: #ff8a80;
}
.uc-identity-actions {
  justify-content: flex-end;
}
.uc-identity-actions #ucIdentityBegin {
  font-weight: 700;
}

@media (max-width: 720px) {
  .hero-controls {
    flex: 1 1 100%;
  }
}

/* ============================================================
   Source: components/ladder2.css
   ============================================================ */
/* ladder2.css — Fensea-style editorial skin for The Ladder, AESOP navy/gold.
   White, open, text-forward. One section per screen (scroll-snap). NOTHING BLOCKY:
   no cards, no panels, no boxed inputs — open type, hairline dividers.
   Loaded LAST (after ladder.css) and scoped under body.l2 so this skin wins. */

:root {
  --l2-bg:        #ffffff;
  --l2-bg-2:      #f7f5f0;
  --l2-ink:       #0d1b2a;   /* navy as the display "charcoal" */
  --l2-ink-2:     #33414f;
  --l2-muted:     #7a8590;
  --l2-line:      #e7e2d8;   /* hairline */
  --l2-gold:      #c9a05a;
  --l2-gold-deep: #a07d3a;
  --l2-display:   'Hanken Grotesk', 'DM Sans', system-ui, sans-serif;
}

/* one section at a time */
html {
  font-size: 75%;           /* scale all rem-based text to 75% so content fits the page */
  scroll-snap-type: none;
  scroll-padding-top: 56px;  /* nav is smaller at 75% type */
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-snap-type: none; scroll-behavior: auto; } }

[data-theme="dark"] body.l2 {
  --l2-bg: #0f1924;
  --l2-bg-2: #16212d;
  --l2-ink: #f1ece2;
  --l2-ink-2: #cfc6b8;
  --l2-muted: #93a2af;
  --l2-line: #2a3a4a;
  --l2-gold: #dbb87a;
  --l2-gold-deep: #dbb87a;
}
/* One unifying dark color everywhere — neutralize ladder.css's !important dark
   fills (which used a different navy and re-introduced boxes). */
[data-theme="dark"] body.l2 { background: var(--l2-bg) !important; }
[data-theme="dark"] body.l2 main.ladder-app { background: transparent !important; }
/* soft, fully-blended glow across the whole viewport (no hard column edge) */
[data-theme="dark"] body.l2::before {
  background-image:
    radial-gradient(120vw 85vh at 50% -8%, rgba(96, 128, 168, 0.12), transparent 60%),
    radial-gradient(80vw 70vh at 88% 112%, rgba(201, 160, 90, 0.05), transparent 60%);
}
[data-theme="dark"] body.l2 .nav {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="dark"] body.l2 .ladder-nav { background: transparent !important; }
[data-theme="dark"] body.l2 .ladder-hero,
[data-theme="dark"] body.l2 .ladder-hero-copy,
[data-theme="dark"] body.l2 .workspace,
[data-theme="dark"] body.l2 .tier-rail,
[data-theme="dark"] body.l2 .topic-column,
[data-theme="dark"] body.l2 .topic-panel,
[data-theme="dark"] body.l2 .topic-head,
[data-theme="dark"] body.l2 .conversation-panel,
[data-theme="dark"] body.l2 .placement-toolbar,
[data-theme="dark"] body.l2 .placement-summary,
[data-theme="dark"] body.l2 .placement-chat,
[data-theme="dark"] body.l2 .learner-panel,
[data-theme="dark"] body.l2 .hero-panels,
[data-theme="dark"] body.l2 .l2-card,
[data-theme="dark"] body.l2 .l2-gate,
[data-theme="dark"] body.l2 .ladder-hero-stat,
[data-theme="dark"] body.l2 .hero-ribbon-slot {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--l2-ink) !important;
}
[data-theme="dark"] body.l2 .rail-head { border-bottom: 1px solid var(--l2-line) !important; }
[data-theme="dark"] body.l2 .ladder-hero-stat strong,
[data-theme="dark"] body.l2 .ladder-hero-stat span,
[data-theme="dark"] body.l2 .l2-card h3,
[data-theme="dark"] body.l2 .topic-head h2 { color: var(--l2-ink) !important; }
[data-theme="dark"] body.l2 .ladder-hero-stat--primary strong,
[data-theme="dark"] body.l2 .l2-profile-stat { color: var(--l2-gold) !important; }

body.l2 {
  background: var(--l2-bg);
  color: var(--l2-ink);
  font-family: 'Hanken Grotesk', 'DM Sans', system-ui, sans-serif;
  overflow-x: clip;   /* contain the full-bleed hero aurora — no horizontal scrollbar */
}
/* barely-there warm blooms on white (cached fixed layer — never bg-attachment) */
body.l2::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(55vw 55vw at 6% 12%, rgba(201, 160, 90, 0.06), transparent 60%),
    radial-gradient(50vw 50vw at 94% 88%, rgba(13, 27, 42, 0.04), transparent 60%);
}

/* ============================================================
   INTRO SPLASH — marketing image that dissolves into the page
   ============================================================ */
.l2-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--l2-bg);
  overflow: hidden;
  transition: opacity 0.9s ease, visibility 0.9s ease;
}
.l2-preloader::before,
.l2-preloader::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 0;
  width: min(1420px, 185vw);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  filter: blur(42px) saturate(1.65);
  opacity: 0.82;
}
.l2-preloader::before {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 20%, rgba(255, 235, 104, 0.98) 28%, rgba(255, 171, 31, 0.82) 42%, rgba(255, 93, 12, 0.48) 58%, transparent 76%),
    radial-gradient(circle at 15% 48%, rgba(255, 151, 19, 0.95), transparent 34%),
    radial-gradient(circle at 87% 42%, rgba(255, 225, 87, 0.95), transparent 36%),
    radial-gradient(circle at 44% 92%, rgba(255, 101, 13, 0.72), transparent 30%);
  animation: l2-cloud-burst 0.62s ease-in-out infinite alternate;
}
.l2-preloader::after {
  width: min(1680px, 220vw);
  background:
    radial-gradient(circle at 52% 50%, transparent 0 24%, rgba(255, 196, 44, 0.78) 36%, rgba(255, 110, 16, 0.42) 54%, transparent 74%),
    radial-gradient(circle at 24% 22%, rgba(255, 227, 95, 0.64), transparent 30%),
    radial-gradient(circle at 80% 77%, rgba(255, 126, 20, 0.68), transparent 38%);
  animation: l2-cloud-surge 0.48s ease-in-out infinite alternate-reverse;
}
.l2-preloader__img {
  position: relative;
  z-index: 1;
  width: min(640px, 84vw);
  height: auto;
  border-radius: 14px;
  box-shadow: 0 30px 80px -40px rgba(13, 27, 42, 0.45);
  animation: l2-splash-in 1.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.l2-preloader__img--ladder4 {
  border-radius: 0;
  box-shadow:
    0 0 60px 20px rgba(255, 221, 87, 0.48),
    0 0 150px 54px rgba(255, 130, 20, 0.52);
}
@keyframes l2-cloud-burst {
  0%   { opacity: 0.62; transform: translate(-53%, -49%) scale(0.92) rotate(-7deg); }
  100% { opacity: 1; transform: translate(-47%, -52%) scale(1.16) rotate(12deg); }
}
@keyframes l2-cloud-surge {
  0%   { opacity: 0.5; transform: translate(-45%, -56%) scale(0.96) rotate(16deg); }
  100% { opacity: 0.92; transform: translate(-55%, -44%) scale(1.22) rotate(-14deg); }
}
@keyframes l2-splash-in {
  0%   { opacity: 0; filter: blur(16px); transform: scale(0.95); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}
body.l2-loaded .l2-preloader { opacity: 0; visibility: hidden; pointer-events: none; }
body.l2.l2-loaded #l2Preloader {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .l2-preloader::before, .l2-preloader::after { animation: none; opacity: 0.28; transform: translate(-50%, -50%) scale(1.05); }
  .l2-preloader__img { animation: none; }
  .l2-preloader { transition: opacity 0.3s ease, visibility 0.3s ease; }
}
body.l2 main.ladder-app, body.l2 footer { opacity: 0; transition: opacity 0.8s ease 0.25s; }
body.l2-loaded main.ladder-app, body.l2-loaded footer { opacity: 1; }

/* ============================================================
   NAV — thin, text links flow to sections
   ============================================================ */
body.l2 .nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: transparent;
  border-bottom: none;
  box-shadow: none;          /* academy .nav box-shadow was the "line" */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Fensea-style nav: large brand flush left, links spread across the middle with
   big gaps, actions flush right. */
body.l2 .ladder-nav {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 1.4rem 2.5%;
  height: auto;
  min-height: 4rem;      /* preserve the original nav height now that the inline
                            links/actions were replaced by absolute overlays — keeps
                            the hero (ornaments) from sliding up */
  box-sizing: border-box;
  position: relative;
}
body.l2 {
  --l2-nav-logo-size: 44px;
  --l2-nav-word-top: 0.43in;
  --l2-nav-word-center-adjust: calc(0.85rem + 6px);
  --l2-nav-logo-edge: calc(var(--l2-nav-word-top) + var(--l2-nav-word-center-adjust) - (var(--l2-nav-logo-size) / 2));
}
body.l2 .nav-brand-group {
  position: absolute;
  top: var(--l2-nav-logo-edge);
  left: var(--l2-nav-logo-edge);
  z-index: 220;
  flex: 0 0 auto;
}
body.l2 .nav-brand-logo {
  width: var(--l2-nav-logo-size);
  height: var(--l2-nav-logo-size);
}
/* Two equal zones split at the page center: links right-aligned to (center-0.5in),
   actions left-aligned to (center+0.5in) -> the gap between Certification and
   English is centered over the middle ornament's two circles. */
body.l2 .ladder-top-actions { flex: 1 1 0; justify-content: flex-start; padding-left: 0.5in; margin-left: 0; position: relative; top: 0.375in; }
/* nav links nudged down 1/4in (relative = no nav-height/page change) */
body.l2 .l2-navlinks { position: relative; top: 0.375in; }
body.l2 .nav-brand-primary {
  font-family: var(--l2-display);
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: -0.01em;
}
/* match the page title navy (beat ladder.css's gold !important brand color) */
body.l2 .nav-brand-primary,
body.l2 .nav-brand-primary:hover,
[data-theme="dark"] body.l2 .nav-brand-primary,
[data-theme="dark"] body.l2 .nav-brand-primary:hover {
  color: var(--l2-ink) !important;
}
body.l2 .nav-brand-primary sup, body.l2 sup { color: var(--l2-gold); }
body.l2 .l2-navlinks { display: flex; justify-content: flex-end; gap: clamp(2.4rem, 5.5vw, 5rem); margin: 0; flex: 1 1 0; padding-right: 0.5in; }
body.l2 .l2-navlink {
  font-family: var(--l2-display);
  font-weight: 500;
  font-size: 1.7rem;
  color: var(--l2-ink-2);
  text-decoration: none;
  position: relative;
  padding: 0.2rem 0;
}
body.l2 .l2-navlink::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 2px; background: var(--l2-gold); transition: width 0.25s ease;
}
/* underline/color keyed on a JS class (set on real mouseenter, cleared on scroll)
   instead of :hover — :hover is geometric and re-fires when a sticky nav word
   lands under a resting cursor on scroll. See setupNavActions in ladder2-app.js. */
body.l2 .l2-navlink.is-navhover { color: var(--l2-ink); }
body.l2 .l2-navlink.is-navhover::after { width: 100%; }
body.l2 .ladder-top-actions { gap: clamp(2.4rem, 5.5vw, 5rem); }   /* match the center nav-links gap */
/* actions match the center nav links' font + size */
body.l2 .ladder-top-actions #l2Lang,
body.l2 .ladder-top-actions .theme-toggle,
body.l2 .ladder-top-actions .nav-btn {
  font-family: var(--l2-display) !important;
  font-weight: 500 !important;
  font-size: 1.7rem !important;
  color: var(--l2-ink-2) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  border: none;
  background: none;
  padding: 0.2rem 0;
}
body.l2 .ladder-top-actions #l2Lang:hover,
body.l2 .ladder-top-actions .theme-toggle:hover,
body.l2 .ladder-top-actions .nav-btn:hover { color: var(--l2-ink) !important; }
/* dark-mode control is now a single sun/moon icon */
body.l2 .ladder-top-actions .theme-toggle { display: inline-flex; align-items: center; padding: 0.2rem; cursor: pointer; }
body.l2 .ladder-top-actions .theme-toggle svg { width: 28px; height: 28px; display: block; }
/* kill the dark-mode box ladder.css puts on .ladder-select (#l2Lang) */
body.l2 .ladder-top-actions #l2Lang { background: transparent !important; border: none !important; box-shadow: none !important; }

/* ── six nav words centered over the six ornament line segments ───────
   Mirrors the .hero-ornaments flex (identical gap + group widths) and is
   window-centered, so each word sits over its line segment at any width.
   Words stay at the original nav vertical level; English + the sun/moon
   move to the upper-right corner. */
body.l2 .hero-navlabels-wrap {
  position: absolute;
  left: 10%; right: 10%;                /* == main.ladder-app's 80% centered column */
  top: 0.43in;                          /* lands the words at the original nav row (cy~57) */
  z-index: 210;
  pointer-events: none;                 /* only the words themselves are clickable */
}
body.l2 .hero-navlabels {
  display: flex;
  justify-content: center;
  gap: 0.5in;                           /* == .hero-ornaments gap */
  width: fit-content;
  max-width: 96vw;                      /* == .hero-ornaments */
  margin: 0 auto;                       /* centers when it fits in the column, left-anchors
                                           (overflowing right) when it doesn't — identical to
                                           .hero-ornaments at every width */
  pointer-events: auto;
}
body.l2 .hero-navlabel-group {
  position: relative;
  flex: 0 0 auto;
  width: clamp(220px, 24vw, 380px);     /* == .hero-ornament width */
  height: 1.7rem;
}
body.l2 .hero-navlabel-group--language {
  width: auto;
  min-width: 8.6rem;
  height: 2.72rem;
}
body.l2 .hero-navlabel-group--support {
  width: auto;
  min-width: 5.7rem;
}
body.l2 .hero-language-control {
  display: inline-flex;
  align-items: center;
  position: relative;
  height: 2.72rem;
}
body.l2 .hero-language-control::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.05rem;
  height: 1.05rem;
  transform: translateY(-50%);
  color: var(--l2-ink-2);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 0 20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 0 0 20'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 0 20'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 0 0 20'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
body.l2 .hero-language-control:hover::before,
body.l2 .hero-language-control:focus-within::before {
  color: var(--l2-ink);
}
body.l2 #l2Lang.hero-language-select {
  -webkit-appearance: none !important;
  appearance: none !important;
  min-height: 0 !important;
  height: 2.72rem !important;
  width: 8.1rem !important;
  padding: 0 1.2rem 0 1.45rem !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a96a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right center / 10px auto no-repeat !important;
  color: var(--l2-ink-2) !important;
  cursor: pointer;
  font-family: var(--l2-display) !important;
  font-weight: 500 !important;
  font-size: 1.7rem !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}
body.l2 #l2Lang.hero-language-select:hover,
body.l2 #l2Lang.hero-language-select:focus {
  color: var(--l2-ink) !important;
  outline: none;
}
body.l2 #l2Lang.hero-language-select option {
  color: var(--l2-ink);
  font-size: 1rem;
}
body.l2 .hero-navlabel {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 0;
}
body.l2 .hero-navlabel--l { left: 20.7%; }   /* left line-segment center (91/440) */
body.l2 .hero-navlabel--r { left: 79.3%; }   /* right line-segment center (349/440) */
body.l2 .hero-navlabel--support { position: static; display: inline-block; transform: none; }
body.l2 .hero-navlabel::after { left: 50%; transform: translateX(-50%); }  /* center the hover underline */

/* sun/moon stacked above the language word — upper-right corner */
body.l2 .ladder-corner-controls {
  position: absolute;
  top: 0.165in;          /* flag is shorter than the old "English" box — drop the stack
                            so the flag lands on the words' line (cy~58) on desktop */
  right: 2.5%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* sun/moon sits over the flag (left of the dropdown caret) */
  gap: 0.07in;
  z-index: 210;
}
body.l2 .ladder-corner-controls .theme-toggle {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 32px !important; height: 32px !important; min-height: 0 !important; padding: 0 !important;
  color: var(--l2-ink) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(13, 27, 42, 0.12) !important;
  border-radius: 999px !important;
  line-height: 0 !important; cursor: pointer; order: 0;
  box-shadow: 0 6px 18px rgba(13, 27, 42, 0.08) !important;
}
body.l2 .ladder-corner-controls .theme-toggle svg { width: 28px; height: 28px; display: block; }
[data-theme="dark"] body.l2 .ladder-corner-controls .theme-toggle {
  color: var(--l2-gold) !important;
  background: rgba(15, 25, 36, 0.78) !important;
  border-color: rgba(219, 184, 122, 0.34) !important;
}
/* language control shows a little US flag instead of the word "English"
   (flag emoji renders as the letters "US" on Windows, so use an inline SVG). */
body.l2 .ladder-corner-controls #l2Lang {
  -webkit-appearance: none !important; appearance: none !important;
  width: 44px !important; height: 15px !important; min-height: 0 !important;
  padding: 0 !important; border: none !important; box-shadow: none !important;
  border-radius: 0 !important;   /* beat .ladder-select's 7px radius — on a 15px-tall box
                                    it rounds into a pill and clips the flag's corners */
  font-size: 0 !important; color: transparent !important;   /* hide the "English" text */
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 20'><rect width='38' height='20' fill='%23fff'/><g fill='%23b22234'><rect width='38' height='1.54'/><rect y='3.08' width='38' height='1.54'/><rect y='6.15' width='38' height='1.54'/><rect y='9.23' width='38' height='1.54'/><rect y='12.31' width='38' height='1.54'/><rect y='15.38' width='38' height='1.54'/><rect y='18.46' width='38' height='1.54'/></g><rect width='15.2' height='10.77' fill='%233c3b6e'/><g fill='%23fff'><circle cx='2' cy='1.6' r='.5'/><circle cx='5' cy='1.6' r='.5'/><circle cx='8' cy='1.6' r='.5'/><circle cx='11' cy='1.6' r='.5'/><circle cx='14' cy='1.6' r='.5'/><circle cx='3.5' cy='3.6' r='.5'/><circle cx='6.5' cy='3.6' r='.5'/><circle cx='9.5' cy='3.6' r='.5'/><circle cx='12.5' cy='3.6' r='.5'/><circle cx='2' cy='5.5' r='.5'/><circle cx='5' cy='5.5' r='.5'/><circle cx='8' cy='5.5' r='.5'/><circle cx='11' cy='5.5' r='.5'/><circle cx='14' cy='5.5' r='.5'/><circle cx='3.5' cy='7.5' r='.5'/><circle cx='6.5' cy='7.5' r='.5'/><circle cx='9.5' cy='7.5' r='.5'/><circle cx='12.5' cy='7.5' r='.5'/><circle cx='2' cy='9.4' r='.5'/><circle cx='5' cy='9.4' r='.5'/><circle cx='8' cy='9.4' r='.5'/><circle cx='11' cy='9.4' r='.5'/><circle cx='14' cy='9.4' r='.5'/></g></svg>") left center / auto 15px no-repeat,
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238a96a3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") right center / 10px auto no-repeat !important;   /* flag + dropdown caret */
  cursor: pointer; order: 1;
}
body.l2 .ladder-corner-controls #l2Lang option { color: var(--l2-ink); font-size: 1rem; }
body.l2 .ladder-corner-controls #l2Lang:hover,
body.l2 .ladder-corner-controls .theme-toggle:hover { color: var(--l2-ink) !important; }
/* below ~1320px the rightmost word (Transcript) reaches the corner and would
   collide with English on the same line — tuck the sun/moon + English up into
   the very top-right corner instead (English no longer on the words' line). */
@media (max-width: 1320px) {
  body.l2 .ladder-corner-controls { top: 0.04in; gap: 0.02in; }
  body.l2 .ladder-corner-controls .theme-toggle { width: 28px !important; height: 28px !important; }
  body.l2 .ladder-corner-controls .theme-toggle svg { width: 20px !important; height: 20px !important; }
  body.l2 .ladder-corner-controls #l2Lang { width: 34px !important; height: 12px !important; background-size: auto 12px, 8px auto !important; }
}

/* ============================================================
   SECTIONS — one screen each, open, header + hairline divider
   ============================================================ */
body.l2 main.ladder-app {
  width: 80%;
  max-width: none;
  margin: 0 auto;
  padding-bottom: 0;
  background: transparent;   /* let the one fixed gradient layer show through — no seam at the column edge */
}
body.l2 .l2-section {
  min-height: 100vh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(5.5rem, 11vh, 8rem) 0 3rem;
  box-sizing: border-box;
}
body.l2 #certification {
  scroll-margin-top: -1.3in;
}
body.l2 #training {
  scroll-margin-top: -0.625in;
}
body.l2 .l2-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;   /* title left, learner ID right (Profile) */
  gap: 1.1rem;
  padding-bottom: 1.4rem;
  margin-bottom: 2.4rem;
  border-bottom: 1px solid var(--l2-line);
}
/* learner ID — right side of the Profile header */
body.l2 .l2-learner-id { flex: 0 0 auto; text-align: right; line-height: 1.25; }
body.l2 .l2-learner-id-label {
  display: block;
  font-family: var(--l2-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.72rem; color: var(--l2-gold-deep);
}
body.l2 .l2-learner-id-value {
  font-family: var(--l2-display); font-weight: 700; font-size: 1.15rem; color: var(--l2-ink);
  word-break: break-all;
}
body.l2 .l2-num {
  font-family: var(--l2-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: var(--l2-gold);
  flex: 0 0 auto;
}
body.l2 .l2-eyebrow, body.l2 .panel-label, body.l2 .hero-cert-label,
body.l2 .hero-ribbon-label, body.l2 .rail-product-label {
  display: block;
  font-family: var(--l2-display);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--l2-gold-deep);
}
body.l2 .l2-section-title {
  font-family: var(--l2-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.95;
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  color: var(--l2-ink);
  margin: 0.35rem 0 0;
}
body.l2 .l2-section-lead {
  max-width: 58ch;
  margin: 0 0 2.4rem;
  color: var(--l2-ink-2);
  font-size: 1.18rem;
  line-height: 1.65;
}
/* Profile: lead text left, Learner ID across from it on the right */
body.l2 .l2-profile-lead-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.4rem;
}
body.l2 .l2-profile-lead-row .l2-section-lead { margin-bottom: 0; }
@media (max-width: 700px) {
  body.l2 .l2-profile-lead-row { flex-direction: column; gap: 1.2rem; }
  body.l2 .l2-profile-lead-row .l2-learner-id { text-align: left; }
}
body.l2 #profile { justify-content: flex-start; }
/* Profile → Open courses: bulleted list, title only + inline Resume */
body.l2 .l2-open-courses-block { margin-top: 1.6rem; }
body.l2 .l2-open-courses-block .panel-label { margin-bottom: 0.9rem; }
body.l2 .l2-open-list {
  list-style: disc;
  padding-left: 1.4rem;
  margin: 0;
  display: grid;
  gap: 0.7rem;
}
body.l2 .l2-open-item {
  color: var(--l2-ink);
  font-size: 1.15rem;
  line-height: 1.4;
}
body.l2 .l2-open-item::marker { color: var(--l2-gold); }
body.l2 .l2-open-resume {
  margin-left: 0.9rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--l2-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--l2-gold-deep);
  vertical-align: 0.06em;
}
body.l2 .l2-open-resume:hover { text-decoration: underline; }
body.l2 .l2-open-empty { color: var(--l2-ink-2); font-size: 1.08rem; margin: 0; }

/* Profile supporting text is intentionally larger, while the "Profile" heading keeps
   the shared section-title scale. */
body.l2 #profile .l2-eyebrow,
body.l2 #profile .panel-label {
  font-size: 1.08rem !important;
}
body.l2 #profile .hero-cert-label {
  font-size: 1.35rem !important;
}
body.l2 #profile .l2-section-lead {
  font-size: 1.77rem !important;
}
body.l2 #profile .l2-learner-id-label {
  font-size: 1.08rem !important;
}
body.l2 #profile .l2-learner-id-value {
  font-size: 1.725rem !important;
}
body.l2 #profile .hero-cert-count {
  font-size: 1.275rem !important;
}
body.l2 #profile .ladder-hero-stat strong {
  font-size: clamp(1.5rem, 2.025vw, 1.86rem) !important;
}
body.l2 #profile .ladder-hero-stat span {
  font-size: 0.99rem !important;
}
body.l2 #profile .l2-btn {
  font-size: 1.23rem !important;
}
body.l2 #profile .l2-open-resume {
  font-size: 1.17rem !important;
}
body.l2 #profile .l2-open-item {
  font-size: 1.725rem !important;
}
body.l2 #profile .l2-open-empty {
  font-size: 1.62rem !important;
}

/* ============================================================
   1 · MARKETING — open editorial hero
   ============================================================ */
body.l2 #marketing { padding-top: 0.5in; justify-content: flex-start; }
/* three ornamental dividers in a row, centered above the eyebrow (½in gaps) */
body.l2 .hero-ornaments {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5in;
  width: fit-content;
  max-width: 96vw;
  margin: 0 auto 0.5in;   /* gap below ornaments == nav->ornaments gap (#marketing padding-top) */
}
body.l2 .hero-ornament {
  flex: 0 0 auto;
  width: clamp(220px, 24vw, 380px);
  height: auto;
  color: var(--l2-ink-2);
}
body.l2 #marketing .eyebrow { margin-top: 0; }
/* left-side "Why Employers Trust the Ladder" block, centered in the left
   whitespace and aligned with the "Every AI Product" cascade line */
body.l2 #marketing { position: relative; overflow: visible; isolation: isolate; }

/* ── living multi-colour aurora behind the hero ───────────────────────
   Three translucent blobs (gold, cool teal, warm peach) drift + breathe
   on independent timers and overlap, so the colours blend and morph — a
   living cloud centred up behind the eyebrow → "THE LADDER AI" → cascade.
   Transform/opacity only (no per-frame blur) → compositor-cheap, no
   renderer freeze. Frozen under reduced-motion; richer in dark mode. */
body.l2 .hero-aurora {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(-1 * (100vw - 100%) / 2);   /* full-bleed: break out of the 80% column */
  width: 100vw;
  z-index: 0;
  pointer-events: none;
  overflow-x: clip;     /* clip horizontally at the viewport edges (full-bleed) */
  overflow-y: visible;  /* but NOT vertically — let the cloud feather up into the
                           transparent nav instead of hitting a straight clip line */
}
body.l2 .aurora-blob {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);   /* base centre — used when motion is reduced */
  will-change: transform, opacity;
}
/* gold — primary, widest, sits behind the title */
body.l2 .aurora-blob.a {
  left: 50%; top: 40%;        /* centre lowered ~1.5in vs the original */
  width: min(88vw, 1320px);
  height: min(110vh, 1300px); /* tall enough that the soft top still reaches the nav */
  background: radial-gradient(closest-side, rgba(244, 214, 130, 0.34), rgba(244, 214, 130, 0) 72%);
  animation: aurora-a 22s ease-in-out infinite;
}
/* soft blue — cool accent in the brand-navy family (not teal) */
body.l2 .aurora-blob.b {
  left: 34%; top: 30%;
  width: min(64vw, 880px);
  height: min(95vh, 1080px);
  background: radial-gradient(closest-side, rgba(140, 165, 222, 0.26), rgba(140, 165, 222, 0) 72%);
  animation: aurora-b 16s ease-in-out infinite;
}
/* warm peach — adds warmth variety on the other side */
body.l2 .aurora-blob.c {
  left: 68%; top: 50%;
  width: min(62vw, 860px);
  height: min(60vh, 700px);
  background: radial-gradient(closest-side, rgba(242, 170, 140, 0.24), rgba(242, 170, 140, 0) 72%);
  animation: aurora-c 18s ease-in-out infinite;
}
/* big horizontal travel + pronounced horizontal grow/shrink (scaleX),
   with scaleY held near 1 so the cloud breathes wide, not tall */
@keyframes aurora-a {
  0%, 100% { transform: translate(-50%, -50%) translate(-13%, -3%) scale(0.82, 1);    opacity: 0.82; }
  50%      { transform: translate(-50%, -50%) translate(11%, 4%)   scale(1.38, 1.06); opacity: 1;    }
}
@keyframes aurora-b {
  0%, 100% { transform: translate(-50%, -50%) translate(15%, 3%)   scale(1.32, 0.96); opacity: 0.68; }
  50%      { transform: translate(-50%, -50%) translate(-17%, -5%) scale(0.84, 1.08); opacity: 1;    }
}
@keyframes aurora-c {
  0%, 100% { transform: translate(-50%, -50%) translate(-15%, 5%)  scale(0.88, 1.04); opacity: 0.76; }
  50%      { transform: translate(-50%, -50%) translate(16%, -4%)  scale(1.42, 0.94); opacity: 1;    }
}
/* keep all hero content above the aurora */
body.l2 #marketing > .ladder-hero { position: relative; z-index: 1; }
body.l2 #marketing > .why-trust,
body.l2 #marketing > .ladder-stairs-aside { z-index: 1; }
/* dark mode: richer against the navy */
[data-theme="dark"] body.l2 .aurora-blob.a { background: radial-gradient(closest-side, rgba(240, 205, 130, 0.40), rgba(240, 205, 130, 0) 72%); }
[data-theme="dark"] body.l2 .aurora-blob.b { background: radial-gradient(closest-side, rgba(150, 175, 230, 0.32), rgba(150, 175, 230, 0) 72%); }
[data-theme="dark"] body.l2 .aurora-blob.c { background: radial-gradient(closest-side, rgba(244, 175, 145, 0.30), rgba(244, 175, 145, 0) 72%); }
@media (prefers-reduced-motion: reduce) {
  body.l2 .aurora-blob { animation: none; }
}

body.l2 .why-trust {
  position: absolute;
  left: 0;
  width: 27%;
  top: 215px;            /* raised 1in from the "Every AI Product" alignment */
  text-align: center;
}
body.l2 .why-trust-title {
  font-family: var(--l2-display);
  font-weight: 800;
  font-size: 1.8rem;   /* 20% larger */
  line-height: 1.2;
  color: var(--l2-ink);
  display: inline-block;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--l2-gold);
  margin: 0 0 1.4rem;
}
body.l2 .why-trust-list {
  list-style: disc;
  text-align: left;
  padding-left: 1.2rem;
  margin: 0;
  display: grid;
  gap: 0.9rem;
}
body.l2 .why-trust-list li {
  color: var(--l2-ink-2);
  font-size: 1.22rem;   /* 20% larger */
  line-height: 1.5;
}
[data-theme="dark"] body.l2 .why-trust-title {
  color: var(--l2-ink) !important;
}
[data-theme="dark"] body.l2 .why-trust-list li {
  color: var(--l2-ink-2) !important;
}
/* right-side staircase illustration (theme-swapped), centered in the right
   whitespace; vertical centre aligned with the "Every AI Product" line */
body.l2 .ladder-stairs-aside {
  position: absolute;
  right: 0.5in;   /* moved 1/2in left from the right-whitespace centre */
  width: 26%;
  top: 135px;     /* image vertical centre aligns with the "Every AI Product" line */
  text-align: center;
}
body.l2 .ladder-stairs { width: 100%; max-width: 400px; height: auto; display: block; margin: 0 auto; }
body.l2 .ladder-stairs--dark { display: none; }
[data-theme="dark"] body.l2 .ladder-stairs--light { display: none; }
[data-theme="dark"] body.l2 .ladder-stairs--dark { display: block; }
body.l2 .ladder-stairs-caption {
  font-family: var(--l2-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--l2-ink);
  margin: 1rem 0 0;
}
body.l2 .ladder-hero {
  display: grid;
  grid-template-columns: 1fr !important;   /* beat ladder.css's 4-col !important grid */
  gap: 3.5rem;
  align-items: center;
  justify-items: center;
}
body.l2 .ladder-hero h1 {
  font-family: var(--l2-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.85;
  font-size: clamp(3.6rem, 9vw, 8rem);
  color: var(--l2-ink);
  margin: 0.4rem 0 0;
}
/* kill the gradient underline ladder.css draws under the hero title */
body.l2 .ladder-hero h1::after { display: none !important; }
/* living gold "AI" — animated shimmering gradient + soft glow */
body.l2 .ai-shimmer {
  background: linear-gradient(100deg,
    #a07d3a 0%, #c9a05a 20%, #fff1cf 38%, #f4d98a 50%, #fff1cf 62%, #c9a05a 80%, #a07d3a 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 0 10px rgba(201, 160, 90, 0.55));
  -webkit-text-stroke: 0.5px #0d1b2a;   /* animated navy hairline edge — pops over the glow */
  animation: ai-shimmer 8s linear infinite, ai-glow 5s ease-in-out infinite, blue-edge 2.6s ease-in-out infinite;
}
@keyframes ai-shimmer {
  to { background-position: 220% center; }
}
/* gold glow + a pulsing blue halo (the AI's blue edge highlight; baked into
   the filter because ai-glow overrides filter while it animates) */
@keyframes ai-glow {
  0%, 100% { filter: drop-shadow(0 0 1.5px rgba(13, 27, 42, 0.55)) drop-shadow(0 0 8px rgba(201, 160, 90, 0.45)); }
  50%      { filter: drop-shadow(0 0 3px rgba(13, 27, 42, 0.80)) drop-shadow(0 0 18px rgba(219, 184, 122, 0.85)); }
}
/* navy edge stroke pulse for the gradient "AI" (stroke-colour only — text-shadow
   is unreliable on background-clip text, so its navy halo lives in ai-glow) */
@keyframes blue-edge {
  0%, 100% { -webkit-text-stroke-color: #0d1b2a; }
  50%      { -webkit-text-stroke-color: #1e3a52; }
}
@media (prefers-reduced-motion: reduce) {
  body.l2 .ai-shimmer { animation: none; background-position: 50% center; }
}
body.l2 .eyebrow {
  font-family: var(--l2-display);
  font-weight: 800;
  /* !important to beat ladder.css's .ladder-hero .eyebrow !important rule */
  font-size: 1.6rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  color: var(--l2-gold-deep) !important;
  max-width: none !important;
  line-height: 1.2 !important;
}
body.l2 .hero-text {
  color: var(--l2-ink-2);
  font-size: 1.2rem;
  line-height: 1.65;
  max-width: 46ch;
  margin-top: 1.3rem;
}
/* cascaded hero tagline — staircase of lines, divider, then the payoff */
/* center the whole hero copy (and now the page, since the side panel is gone) */
body.l2 .ladder-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: none !important;
  margin: 0 auto;
  grid-column: 1 / -1 !important;   /* beat ladder.css's span-2 !important */
}
/* cascade: keep the staircase internally, center the block as a unit */
body.l2 .hero-cascade {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: fit-content;
  margin: 1.7rem auto 0;
  gap: 0.35rem;
  transform: translateX(8px);   /* nudge the blurb 8px to the right */
}
body.l2 .hero-cascade-line {
  font-family: var(--l2-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 2.3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--l2-ink);
}
body.l2 .hero-cascade-line:nth-child(2) { margin-left: 2.4rem; }
body.l2 .hero-cascade-line:nth-child(3) { margin-left: 4.8rem; }
body.l2 .hero-cascade-divider {
  width: 100%;
  height: 2px;
  background: var(--l2-gold);
  /* tuned so (Every AI Use Case -> gold line) == (title -> Every AI Concept) */
  margin: 2rem 0 0.75rem;
}
body.l2 .hero-cascade-final {
  font-family: var(--l2-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  letter-spacing: -0.01em;
  color: var(--l2-gold-deep);
  -webkit-text-stroke: 0.5px #0d1b2a;   /* animated navy hairline edge — pops over the glow */
  paint-order: stroke fill;           /* stroke behind the gold so the fill stays crisp */
  animation: cascade-blue-edge 2.6s ease-in-out infinite;
}
@keyframes cascade-blue-edge {
  0%, 100% { -webkit-text-stroke-color: #0d1b2a; text-shadow: 0 0 3px rgba(13, 27, 42, 0.50); }
  50%      { -webkit-text-stroke-color: #1e3a52; text-shadow: 0 0 7px rgba(13, 27, 42, 0.75); }
}
@media (prefers-reduced-motion: reduce) {
  body.l2 .hero-cascade-final { animation: none; }
}
body.l2 .l2-hero-primary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.6rem;
  padding: 1rem 1.8rem;
  min-height: 3.35rem;
  border-radius: 8px;
  background: var(--l2-gold);
  color: #0d1b2a;
  box-shadow: 0 14px 32px rgba(201, 160, 90, 0.32);
  font-family: var(--l2-display);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
}
body.l2 .l2-hero-primary-cta:hover,
body.l2 .l2-hero-primary-cta:focus-visible {
  background: var(--l2-gold-deep);
  color: #0d1b2a;
  box-shadow: 0 18px 40px rgba(201, 160, 90, 0.45);
  transform: translateY(-1px);
}
body.l2 .l2-hero-primary-cta:focus-visible {
  outline: 3px solid rgba(13, 27, 42, 0.35);
  outline-offset: 3px;
}
body.l2 .hero-certifications-row { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.6rem; }
body.l2 .hero-cert-count { font-family: var(--l2-display); font-weight: 800; font-size: 1.4rem; color: var(--l2-ink); }
body.l2 .ladder-hero-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  grid-template-columns: none !important;
  gap: 1.5rem 2.4rem !important;
  margin-top: 2.4rem !important;
  border-top: 1px solid var(--l2-line);
  padding-top: 1.75rem;
}
body.l2 .ladder-hero-stat {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  flex: 0 0 auto;
}
body.l2 .ladder-hero-stat strong {
  display: block; font-family: var(--l2-display); font-weight: 800;
  font-size: 2rem; color: var(--l2-ink); line-height: 1;
}
body.l2 .ladder-hero-stat span {
  display: block; margin-top: 0.4rem; font-size: 0.8rem;
  letter-spacing: 0.04em; color: var(--l2-muted); text-transform: uppercase;
}
body.l2 .ladder-hero-stat--primary strong { color: var(--l2-gold-deep); }
body.l2 .hero-ribbon-section { margin-top: 2rem; }
body.l2 .hero-ribbon-track { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
/* right column: open, no panel */
body.l2 .hero-panels, body.l2 .learner-panel {
  background: none !important; border: none !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 0 !important;
}
body.l2 .hero-panels { border-left: 1px solid var(--l2-line); padding-left: 3rem !important; }
body.l2 #l2HeroFocusList { margin-top: 1.2rem; display: grid; gap: 0.5rem; justify-items: start; }
/* override ladder.css's !important dark fill on .hero-panels button/select */
body.l2 .hero-panels button {
  background: none !important; border: none !important; color: var(--l2-ink) !important;
}
body.l2 .hero-panels button:hover { background: none !important; color: var(--l2-gold-deep) !important; }

/* ============================================================
   2 · PROFILE — open columns with hairline dividers (no cards)
   ============================================================ */
body.l2 .l2-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.5rem;
}
body.l2 .l2-card, body.l2 .l2-gate {
  background: none !important; border: none !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 0 !important;
}
body.l2 .l2-profile-grid > * + * { border-left: 1px solid var(--l2-line); padding-left: 2.5rem !important; }
body.l2 .l2-card h3 {
  font-family: var(--l2-display); font-weight: 800; font-size: 1.4rem;
  color: var(--l2-ink); margin: 0.6rem 0 0.8rem;
}
body.l2 .l2-card p { color: var(--l2-ink-2); line-height: 1.6; margin: 0 0 1rem; }
body.l2 .l2-profile-stat {
  font-family: var(--l2-display); font-weight: 800; font-size: 3rem;
  color: var(--l2-gold-deep); line-height: 1; margin: 0.6rem 0 0.4rem;
}
body.l2 .l2-cert-strip { margin: 0 0 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--l2-line); }
body.l2 .l2-feedback-form { display: grid; gap: 1.1rem; margin-top: 0.5rem; }
body.l2 .l2-feedback-form label, body.l2 .evaluation-field > span {
  display: block; font-family: var(--l2-display); font-weight: 800;
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--l2-muted); margin-bottom: 0.35rem;
}
body.l2 .l2-feedback-sent { color: var(--l2-gold-deep); font-weight: 700; }

/* ============================================================
   OPEN INPUTS — underline only, no boxes
   ============================================================ */
body.l2 .l2-feedback-form input, body.l2 .l2-feedback-form select, body.l2 .l2-feedback-form textarea,
body.l2 .evaluation-select, body.l2 .account-form input,
body.l2 .chat-form textarea, body.l2 .assessment-form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--l2-line);
  border-radius: 0;
  color: var(--l2-ink);
  padding: 0.55rem 0;
  font: inherit;
}
body.l2 .l2-feedback-form textarea, body.l2 .chat-form textarea, body.l2 .assessment-form textarea {
  resize: vertical; min-height: 3rem;
}
body.l2 .l2-feedback-form input:focus, body.l2 .l2-feedback-form select:focus,
body.l2 .l2-feedback-form textarea:focus, body.l2 .evaluation-select:focus,
body.l2 .account-form input:focus, body.l2 .chat-form textarea:focus,
body.l2 .assessment-form textarea:focus {
  outline: none; border-bottom-color: var(--l2-gold);
}

/* ============================================================
   3 · ASSESSMENT
   ============================================================ */
body.l2 .placement-toolbar, body.l2 .workspace {
  background: none !important; border: none !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 0 !important;
}
body.l2 .placement-summary { padding-right: 2rem; }
body.l2 #l2PlacementStatus { font-family: var(--l2-display); font-weight: 800; }
/* Pin the relocated Start-assessment CTA to the conversation window's upper-RIGHT corner.
   ladder.css already makes .assessment-chat-head flex/space-between but align-items:center,
   which vertically centers the enlarged button; override to flex-start so it sits at the top. */
body.l2 .assessment-chat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
/* Group Start assessment + Reset together at the header's upper-right. */
body.l2 .assessment-head-actions { display: flex; gap: 0.6rem; align-items: center; }
/* Reset: strip the inherited dark navy fill so it reads as a plain text button beside the gold CTA. */
body.l2 #l2ResetPlacement { background: none !important; box-shadow: none !important; color: var(--l2-muted) !important; padding: 0.85rem 0.6rem; }
body.l2 #l2ResetPlacement:hover { background: none !important; color: var(--l2-gold-deep) !important; }
/* ladder.css styled .placement-toolbar as a dark navy box with white/pale text; ladder2
   makes the toolbar transparent, so re-tint its text to the page ink palette (theme-aware
   vars keep dark mode correct — ink/ink-2 flip to light there). Without this the heading
   was white-on-white in light mode. */
body.l2 .placement-toolbar h2, body.l2 .placement-toolbar strong { color: var(--l2-ink); }
body.l2 .placement-toolbar p, body.l2 .placement-toolbar small { color: var(--l2-ink-2); }
/* Assessment layout: top-align the two columns so the conversation sits at the same
   level as the description (instead of the description cell stretching to match the tall
   chat box), and keep the conversation compact so the section's centered content leaves
   whitespace at the bottom rather than the chat box reaching the page edge. */
body.l2 .placement-toolbar {
  align-items: start;
  /* narrow the description column (cap its right edge) so the conversation window pulls
     left and sits right next to it. */
  grid-template-columns: minmax(200px, 18rem) minmax(0, 1fr);
}
/* ladder.css pins .placement-chat at min-height:480px (legacy fixed panel); drop that floor
   so the conversation column sizes to its content and rides up with the centered section. */
body.l2 #assessment .placement-chat {
  display: grid;
  gap: 0.8rem;
  align-content: start;
  min-height: 0;
  max-width: none;
}
body.l2 #assessment .assessment-log {
  min-height: clamp(24rem, calc(62vh - 12rem), 32rem);
  max-height: 52vh;
}
/* Pull the Assessment content to the top of the section so the compact description +
   conversation pair rides up the page. The shared .l2-section centers content vertically;
   override for #assessment only. */
body.l2 #assessment { justify-content: flex-start; }
/* Put the actual section description and the assessment conversation in the same
   layout context. The toolbar wrapper is only structural here; display:contents lets
   its two children sit in the Assessment section grid. */
body.l2 #assessment {
  display: grid;
  grid-template-columns: minmax(220px, 32rem) minmax(360px, 58.8rem);
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 1.25rem;
  align-content: start;
  justify-content: start;
}
body.l2 #assessment .l2-section-head {
  grid-column: 1 / -1;
  margin-bottom: 0.75rem;
}
body.l2 #assessment > .l2-section-lead {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  max-width: none;
}
body.l2 #assessment .placement-toolbar {
  display: contents;
}
body.l2 #assessment .placement-summary {
  grid-column: 1;
  grid-row: 3;
  padding-right: 0;
}
body.l2 #assessment .placement-chat {
  grid-column: 2;
  grid-row: 2 / span 2;
  width: 100%;
}
body.l2 #assessment .l2-assessment-done {
  grid-column: 1 / -1;
}
@media (max-width: 900px) {
  body.l2 #assessment {
    display: flex;
    gap: 0;
  }
  body.l2 #assessment .placement-toolbar {
    display: grid;
  }
}
/* Enlarge Assessment-section body text for readability (scoped to #assessment so the
   Training/Certification screens, which share these components, are unaffected). The
   section title and the Start-assessment button are intentionally left at their base size. */
body.l2 #assessment .l2-section-lead { font-size: 1.5rem; }
body.l2 #assessment .panel-label { font-size: 0.92rem; }
body.l2 #assessment #l2PlacementStatus { font-size: 2rem; }
body.l2 #assessment .placement-summary p { font-size: 1.25rem; }
body.l2 #assessment .assessment-chat-head strong { font-size: 1.1rem; }
body.l2 #assessment .l2-msg__role { font-size: 0.78rem; }
body.l2 #assessment .l2-msg__body { font-size: 1.2rem; }
body.l2 #assessment .assessment-form textarea { font-size: 1.15rem; }
body.l2 #assessment .placement-actions button,
body.l2 #assessment .assessment-form button { font-size: 1.05rem; }
body.l2 .l2-assessment-done {
  display: none; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; padding-top: 1.5rem; border-top: 1px solid var(--l2-line);
}
body.l2.placement-complete #assessment .l2-section-lead,
body.l2.placement-complete #assessment .ladder-toolbar { display: none; }
body.l2.placement-complete .l2-assessment-done { display: flex; }
body.l2 .l2-assessment-done strong { font-family: var(--l2-display); font-weight: 800; font-size: 1.5rem; color: var(--l2-ink); display: block; }

/* ============================================================
   4 · TRAINING — text-tab focus toggle + open rail
   ============================================================ */
body.l2 .l2-focus-toggle {
  display: inline-flex; gap: 2rem; background: none; border: none;
  border-bottom: 1px solid var(--l2-line); padding: 0; margin-bottom: 2.2rem;
}
body.l2 .l2-focus-btn {
  background: none; border: none; border-radius: 0; padding: 0.7rem 0;
  font-family: var(--l2-display); font-weight: 700; font-size: 1.05rem;
  color: var(--l2-muted); cursor: pointer; position: relative;
}
body.l2 .l2-focus-btn::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px;
  background: var(--l2-gold); transition: width 0.25s ease;
}
body.l2 .l2-focus-btn:hover { color: var(--l2-ink); }
body.l2 .l2-focus-btn.is-active { color: var(--l2-ink); }
body.l2 .l2-focus-btn.is-active::after { width: 100%; }

body.l2 .l2-gate { margin-bottom: 2rem; }
body.l2 .l2-gate h3 { font-family: var(--l2-display); font-weight: 800; font-size: 1.4rem; margin: 0.5rem 0; color: var(--l2-ink); }
body.l2 .l2-gate p { color: var(--l2-ink-2); line-height: 1.6; max-width: 60ch; }

body.l2 #training .l2-section-head {
  align-items: flex-start;
  position: relative;
  padding-right: calc(48% + 1.25rem);
  min-height: 8.6rem;
}
body.l2 #certification .l2-section-head {
  align-items: flex-start;
  position: relative;
  padding-right: calc(48% + 1.25rem);
  min-height: 8.6rem;
}
body.l2 #training .l2-section-head,
body.l2 #certification .l2-section-head {
  border-bottom: 0;
}
body.l2 #training .l2-section-head::after,
body.l2 #certification .l2-section-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: calc(48% + 1.25rem);
  bottom: 0;
  height: 1px;
  background: var(--l2-line);
}
body.l2 #training { justify-content: flex-start; }
body.l2 #training .l2-section-head > .training-chat-column {
  position: absolute;
  top: 0;
  right: 0;
  width: min(48%, 52rem);
  min-width: min(100%, 360px);
}
body.l2 #certification .l2-section-head > .training-chat-column {
  position: absolute;
  top: 0;
  right: 0;
  width: min(48%, 52rem);
  min-width: min(100%, 360px);
}
body.l2 #training .workspace,
body.l2 #certification .workspace {
  grid-template-columns: minmax(430px, 1fr) minmax(360px, 0.95fr);
  gap: 1.25rem;
  align-items: start;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}
body.l2 .training-nav-panel,
body.l2 .training-left-column,
body.l2 .training-chat-column {
  min-width: 0;
}
body.l2 .training-left-column .l2-section-lead {
  margin-bottom: 2rem;
}
body.l2 .training-tier-picker {
  width: 100%;
  margin: 0;
}
body.l2 .training-focus-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
body.l2 .training-tier-picker .rail-tier-status {
  display: block;
  margin: 0 0 0.9rem;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-family: var(--l2-display);
  font-weight: 800;
  font-size: 1.45rem;
  color: var(--l2-ink);
  justify-content: flex-start;
  text-shadow: none;
  text-transform: none;
}
body.l2 .training-tier-dropdown {
  position: relative;
  width: 100%;
}
body.l2 .training-tier-dropdown summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.4rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--l2-line);
  border-radius: 6px;
  background: var(--l2-paper);
  box-shadow: 0 14px 36px rgba(13, 27, 42, 0.08);
  cursor: pointer;
  list-style: none;
}
body.l2 .training-tier-dropdown summary::-webkit-details-marker {
  display: none;
}
body.l2 .training-tier-dropdown summary::after {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  border-right: 2px solid var(--l2-gold-deep);
  border-bottom: 2px solid var(--l2-gold-deep);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}
body.l2 .training-tier-dropdown[open] summary::after {
  transform: rotate(225deg);
}
body.l2 .training-tier-current {
  font-family: var(--l2-display);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--l2-ink);
}
body.l2 .training-tier-menu {
  display: grid !important;
  gap: 0 !important;
  grid-auto-rows: auto !important;
  max-height: min(42vh, 28rem) !important;
  overflow: auto !important;
  margin-top: 0.55rem;
  padding: 0 !important;
  border: 1px solid var(--l2-line);
  border-radius: 6px;
  background: var(--l2-paper);
  box-shadow: 0 18px 42px rgba(13, 27, 42, 0.12);
}
body.l2 .l2-tier-option {
  width: 100%;
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  text-align: left;
  min-height: 0;
  padding: 0.42rem 0.65rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  line-height: 1.15;
}
body.l2 .l2-tier-option::after {
  display: none;
}
body.l2 .l2-tier-option:hover,
body.l2 .l2-tier-option.is-active {
  background: rgba(201, 160, 90, 0.12);
}
body.l2 .l2-tier-option .l2-rail-num {
  font-size: 0.98rem;
  line-height: 1.1;
}
body.l2 .l2-tier-option .l2-tier-meta small {
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.1;
}
body.l2 .l2-tier-option .l2-tier-meta strong {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.15;
}
body.l2 .training-selected-rungs {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.2rem 1rem !important;
  width: 100%;
  padding: 1rem 0 0 !important;
}
body.l2 .training-selected-rungs .l2-rail-item {
  position: relative;
  padding: 0.38rem 0 0.38rem 1.15rem;
  font-size: 0.864rem;
  line-height: 1.25;
}
body.l2 .training-selected-rungs .l2-rail-item::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.82rem;
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
body.l2 .training-selected-rungs .l2-rail-item::after {
  display: none;
}
body.l2 .training-rung-description {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--l2-line);
  color: var(--l2-gold-deep);
  font-size: 1.2rem;
  line-height: 1.55;
}
body.l2 .training-chat-panel {
  display: grid;
  gap: 0.8rem;
  align-content: start;
}
body.l2 .training-chat-panel .l2-msg__role {
  font-size: calc(0.6rem * var(--training-chat-scale, 1));
}
body.l2 .training-chat-panel .l2-msg__body {
  font-size: calc(1rem * var(--training-chat-scale, 1));
}
body.l2 .training-chat-panel textarea {
  font-size: calc(1rem * var(--training-chat-scale, 1));
}
body.l2 .training-chat-panel .l2-msg + .l2-msg {
  border-top: 1px solid var(--l2-line);
  padding-top: 0.9rem;
}
body.l2 .training-chat-panel .chat-form {
  border-top: 1px solid var(--l2-line);
  margin-top: 0;
  padding-top: 0.9rem;
}
body.l2 .training-text-size {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.4rem;
  color: var(--l2-muted);
  font-family: var(--l2-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body.l2 .training-text-size input {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--l2-gold);
}
body.l2 .training-standards-eval {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.35rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--l2-line);
}
body.l2 .training-eval-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--l2-ink);
  font-size: 0.9rem;
  font-weight: 700;
}
body.l2 .training-eval-check input {
  inline-size: 1rem;
  block-size: 1rem;
  accent-color: var(--l2-gold);
}
body.l2 .training-eval-action {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.85rem;
  align-items: center;
}
body.l2 .training-eval-action p {
  margin: 0;
  color: var(--l2-muted);
  font-size: 0.84rem;
  line-height: 1.4;
}
body.l2 .training-eval-run {
  justify-self: start;
  min-height: 2.35rem;
  border: 1px solid var(--l2-line);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  background: var(--l2-ink);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
body.l2 .training-eval-run::after {
  display: none;
}
body.l2 .training-eval-run:disabled {
  opacity: 0.55;
  cursor: wait;
}
body.l2 .training-eval-status {
  min-height: 1.2em;
  margin: 0;
  color: var(--l2-muted);
  font-size: 0.86rem;
  line-height: 1.45;
}
body.l2 .training-eval-status.is-error {
  color: #9f3412;
}
body.l2 .training-account-gate {
  flex: 0 1 34rem;
  margin: 0;
  padding: 0 0 0 1.5rem;
  border-left: 1px solid var(--l2-line);
  border-bottom: 0;
}
body.l2 .training-account-gate h3 {
  font-size: 1.2rem;
  margin: 0.25rem 0;
}
body.l2 .training-account-gate p {
  max-width: none;
  margin: 0.35rem 0 0.45rem;
  line-height: 1.45;
}
body.l2 .training-chat-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  min-height: 2.2rem;
}
body.l2 .training-chat-actions #l2StartChat {
  margin-left: auto;
}
body.l2 .training-chat-actions #l2ResetChat {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--l2-muted) !important;
  padding: 0.85rem 0.6rem;
}
body.l2 .training-chat-actions #l2ResetChat:hover {
  background: transparent !important;
  color: var(--l2-gold-deep) !important;
}
body.l2 .training-chat-panel .chat-log {
  min-height: clamp(24rem, calc(62vh - 12rem), 32rem);
}

[data-theme="dark"] body.l2 .training-tier-dropdown summary,
[data-theme="dark"] body.l2 .training-tier-menu {
  background: #111c2a;
  border-color: rgba(201, 160, 90, 0.36);
  box-shadow: none;
}
[data-theme="dark"] body.l2 .training-tier-current,
[data-theme="dark"] body.l2 .l2-tier-option .l2-tier-meta strong {
  color: #f6f1e8;
}
[data-theme="dark"] body.l2 .l2-tier-option .l2-tier-meta small {
  color: rgba(246, 241, 232, 0.72);
}
[data-theme="dark"] body.l2 .training-rung-description {
  color: var(--l2-gold);
}
[data-theme="dark"] body.l2 .l2-tier-option:hover,
[data-theme="dark"] body.l2 .l2-tier-option.is-active {
  background: rgba(201, 160, 90, 0.16);
}

body.l2 .tier-rail { background: none !important; border: none !important; padding: 0 !important; }
body.l2 .rail-head { background: transparent !important; padding: 0 0 1rem !important; border-bottom: 1px solid var(--l2-line); margin-bottom: 1rem; min-height: 0 !important; }
body.l2 .rail-product-title { display: block; font-family: var(--l2-display); font-weight: 800; font-size: 1.3rem; color: var(--l2-ink); }
body.l2 .rail-tier-status { display: block; font-size: 0.8rem; color: var(--l2-muted); margin-top: 0.2rem; }
body.l2 .tier-list { display: grid; gap: 0.1rem; max-height: none; overflow: visible; }
body.l2 .l2-rail-group { display: block; border-bottom: 1px solid var(--l2-line); }
body.l2 .l2-rail-grouphead {
  width: 100%; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.7rem;
  align-items: start; text-align: left; background: none; border: none; border-radius: 0;
  padding: 0.75rem 0; cursor: pointer; line-height: 1.3;
}
body.l2 .l2-rail-num { font-family: var(--l2-display); font-weight: 800; color: var(--l2-gold); font-size: 0.95rem; }
body.l2 .l2-rail-group.is-open .l2-rail-grouphead strong, body.l2 .l2-rail-grouphead:hover strong { color: var(--l2-gold-deep); }
body.l2 .l2-rail-meta { min-width: 0; }
body.l2 .l2-rail-meta strong { display: block; font-family: var(--l2-display); font-weight: 700; font-size: 0.92rem; color: var(--l2-ink); }
body.l2 .l2-rail-meta small { display: block; color: var(--l2-muted); font-size: 0.72rem; margin-top: 0.15rem; }
body.l2 .l2-rail-items { display: grid; gap: 0; padding: 0 0 0.6rem 2.3rem; }
body.l2 .l2-rail-item {
  width: 100%; text-align: left; background: none; border: none; border-radius: 0;
  padding: 0.4rem 0; color: var(--l2-ink-2); font-weight: 500; cursor: pointer;
  border-left: 2px solid transparent; padding-left: 0.8rem;
}
body.l2 .l2-rail-item:hover { color: var(--l2-ink); }
body.l2 .l2-rail-item.is-active { color: var(--l2-gold-deep); border-left-color: var(--l2-gold); font-weight: 700; }

/* Clean tier list — number + "Tier N" + title; rungs open in the right window. */
body.l2 .l2-tier-item {
  width: 100%; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.7rem;
  align-items: center; text-align: left; background: none; border: none; border-radius: 0;
  border-bottom: 1px solid var(--l2-line); padding: 0.8rem 0; cursor: pointer; line-height: 1.3;
}
body.l2 .l2-tier-item::after { display: none; }
body.l2 .l2-tier-meta { min-width: 0; }
body.l2 .l2-tier-meta small { display: block; color: var(--l2-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; }
body.l2 .l2-tier-meta strong { display: block; font-family: var(--l2-display); font-weight: 700; font-size: 0.95rem; color: var(--l2-ink); }
body.l2 .l2-tier-item:hover .l2-tier-meta strong,
body.l2 .l2-tier-item.is-active .l2-tier-meta strong,
body.l2 .l2-tier-item:hover .l2-rail-num,
body.l2 .l2-tier-item.is-active .l2-rail-num { color: var(--l2-gold-deep); }

/* Right-hand "blue window with gold text": the selected tier's rungs (navy in both themes). */
body.l2 .rung-panel {
  background: #11203a; border: 1px solid rgba(201, 160, 90, 0.28); border-radius: 8px;
  padding: 1.1rem 1.3rem; margin-bottom: 1.5rem;
}
body.l2 .rung-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.7rem; }
body.l2 .rung-panel-title { font-family: var(--l2-display); font-weight: 800; font-size: 1.05rem; color: var(--l2-gold); }
body.l2 .rung-panel-head small { color: rgba(255, 255, 255, 0.55); font-size: 0.72rem; white-space: nowrap; }
body.l2 .rung-panel-list { display: grid; gap: 0; }
body.l2 .rung-pick {
  width: 100%; text-align: left; background: none; border: none; border-radius: 0;
  padding: 0.6rem 0; color: var(--l2-gold); font-family: var(--l2-display); font-weight: 600;
  font-size: 0.9rem; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, 0.08); line-height: 1.35;
}
body.l2 .rung-pick:last-child { border-bottom: none; }
body.l2 .rung-pick::after { display: none; }
body.l2 .rung-pick:hover { color: #fff; }
body.l2 .rung-pick.is-active { color: #fff; font-weight: 800; }

body.l2 .topic-head { border-bottom: 1px solid var(--l2-line); padding-bottom: 1rem; margin-bottom: 1.5rem; }
body.l2 .topic-head h2 { font-family: var(--l2-display); font-weight: 800; font-size: 1.7rem; color: var(--l2-ink); margin: 0.3rem 0 0; }
body.l2 .conversation-panel { background: none; border: none; }
body.l2 .panel-heading h3 { font-family: var(--l2-display); font-weight: 800; color: var(--l2-ink); }
body.l2 .panel-heading p { color: var(--l2-muted); }

/* ============================================================
   5 · CERTIFICATION
   ============================================================ */
body.l2 .evaluation-field { display: grid; gap: 0.25rem; margin: 1.1rem 0; }
body.l2 .account-attestation, body.l2 .identity-attestation {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem;
  align-items: start; margin: 1.1rem 0; color: var(--l2-ink-2); line-height: 1.5;
}
body.l2 .evaluation-cooldown { color: var(--l2-gold-deep); font-size: 0.92rem; line-height: 1.5; margin: 0.5rem 0 0; }
body.l2 .certification-mode-bar {
  background: none; border: none; border-top: 1px solid var(--l2-gold);
  border-bottom: 1px solid var(--l2-gold); border-radius: 0; padding: 1rem 0; margin-bottom: 1.5rem;
}
body.l2 .l2-cert-grid {
  border-top: 0;
  margin-top: 0;
}
body.l2 .certification-left-column {
  display: grid;
  gap: 1.25rem;
}
body.l2 .certification-nav-panel {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--l2-line);
}
body.l2 .certification-tier-picker .training-rung-description {
  margin-bottom: 0;
}
body.l2 .certification-setup-panel,
body.l2 .certification-exam-panel {
  display: grid;
  gap: 0.85rem;
}
body.l2 .certification-setup-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
body.l2 .certification-setup-panel[hidden],
body.l2 .certification-exam-panel[hidden] {
  display: none !important;
}
body.l2 .certification-setup-panel > .panel-label,
body.l2 .certification-target,
body.l2 .certification-setup-panel .identity-attestation,
body.l2 .certification-setup-panel .account-attestation,
body.l2 .certification-setup-panel .evaluation-cooldown,
body.l2 .certification-account-gate,
body.l2 .certification-start-btn,
body.l2 .certification-record-link {
  grid-column: 1 / -1;
}
body.l2 .certification-target {
  margin: 0.15rem 0 0.35rem;
  color: var(--l2-ink);
  font-family: var(--l2-display);
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.35;
}
body.l2 .certification-setup-panel .evaluation-field {
  margin: 0;
}
body.l2 .certification-setup-panel .evaluation-field select {
  width: 100%;
}
body.l2 .certification-setup-panel .identity-attestation,
body.l2 .certification-setup-panel .account-attestation {
  margin: 0.25rem 0;
}
body.l2 .certification-account-gate {
  grid-column: 1 / 2 !important;
  justify-self: start;
  width: 320px;
  max-width: 100%;
  margin: 0.3rem 0 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--l2-line);
}
body.l2 .certification-account-gate .account-form,
body.l2 .certification-account-gate .account-actions {
  width: 100%;
}
body.l2 .certification-account-gate #l2AccountSignOut {
  width: 100%;
  text-align: center;
}
body.l2 .certification-start-btn {
  width: 100%;
  justify-content: center;
  margin-top: 0.35rem;
  min-height: 3.2rem;
  font-size: 1.08rem !important;
}
body.l2 .certification-record-link {
  display: flex;
  justify-content: center;
  font-size: 0.9rem;
}
body.l2 .certification-chat-panel .panel-heading {
  border-bottom: 1px solid var(--l2-line);
  padding-bottom: 0.8rem;
}
body.l2 .certification-mode-actions {
  display: grid;
  gap: 0.85rem;
  margin-top: 0.65rem;
}
body.l2 .certification-mode-action {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}
body.l2 .certification-mode-action p {
  margin: 0;
  color: var(--l2-ink-2);
  font-size: 0.86rem;
  line-height: 1.45;
  text-align: left;
}
body.l2 .certification-mode-action button,
body.l2 .certification-mode-action button.secondary {
  justify-self: stretch;
  justify-content: center;
  width: 100%;
  min-height: 2.35rem;
  border: 1px solid var(--l2-line);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  background: var(--l2-ink);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
}
body.l2 .certification-mode-action button::after {
  display: none;
}
body.l2 .certification-chat-panel .chat-log,
body.l2 .certification-chat-panel .certification-mode-bar + .chat-log {
  height: clamp(14rem, calc(62vh - 20rem), 22rem);
  min-height: clamp(14rem, calc(62vh - 20rem), 22rem);
}
@media (max-width: 720px) {
  body.l2 .training-eval-action {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  body.l2 .certification-mode-action {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

/* ============================================================
   CHAT — open, no bubbles
   ============================================================ */
body.l2 .chat-log, body.l2 .assessment-log {
  display: flex; flex-direction: column; gap: 1.3rem;
  min-height: 200px; max-height: 52vh; overflow: auto;
  padding: 1.2rem 0; background: none; border: none;
  border-top: 1px solid var(--l2-line);
}
body.l2 .l2-msg { max-width: 82%; }
body.l2 .l2-msg--user { margin-left: auto; text-align: right; }
body.l2 .l2-msg--system { max-width: 100%; text-align: center; }
body.l2 .l2-msg__role {
  font-family: var(--l2-display); font-weight: 800; font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--l2-gold-deep);
}
body.l2 .l2-msg__body { color: var(--l2-ink); line-height: 1.6; margin-top: 0.2rem; }
body.l2 .l2-msg--user .l2-msg__body { color: var(--l2-ink-2); }
body.l2 .l2-msg--system .l2-msg__body { color: var(--l2-gold-deep); font-weight: 600; }
body.l2 .chat-form, body.l2 .assessment-form {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem;
  align-items: end; margin-top: 0.5rem; padding-top: 0.5rem;
}
body.l2 .progress-meter { height: 2px; background: var(--l2-line); margin: 0.5rem 0; }
body.l2 .progress-meter span { display: block; height: 100%; width: 0; background: var(--l2-gold); transition: width 0.3s ease; }

/* ============================================================
   BUTTONS — text + animated gold underline (no blocks)
   ============================================================ */
body.l2 button, body.l2 .l2-btn {
  background: none; border: none; border-radius: 0; box-shadow: none;
  color: var(--l2-ink); font-family: var(--l2-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem;
  padding: 0.4rem 0; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.4rem; position: relative;
}
body.l2 button::after, body.l2 .l2-btn::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px;
  width: 100%; background: var(--l2-gold); transform: scaleX(1); transform-origin: left; transition: transform 0.22s ease;
}
body.l2 button:hover, body.l2 .l2-btn:hover { transform: none; box-shadow: none; background: none; color: var(--l2-gold-deep); }
body.l2 button.secondary, body.l2 .l2-btn--ghost { color: var(--l2-muted); }
body.l2 button.secondary::after, body.l2 .l2-btn--ghost::after { transform: scaleX(0); }
body.l2 button.secondary:hover::after, body.l2 .l2-btn--ghost:hover::after { transform: scaleX(1); }
body.l2 .theme-toggle::after, body.l2 #l2Lang::after, body.l2 .nav-btn::after { display: none; }
body.l2 .nav-btn { text-transform: none; letter-spacing: 0; font-weight: 700; }

/* Prominent primary CTA — a filled gold button (matches the hero "Sign Up" primary)
   so the key action reads as primary, not as just another underline link. Navy text
   is hardcoded for guaranteed contrast on gold in both light and dark themes. */
body.l2 .l2-cta {
  background: var(--l2-gold); color: #0d1b2a;
  padding: 0.85rem 1.7rem; border-radius: 3px; font-size: 1.25rem; letter-spacing: 0.1em; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(201, 160, 90, 0.35);
  transition: background 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
}
body.l2 .l2-cta::after { display: none; }   /* filled button, not the underline style */
body.l2 .l2-cta:hover {
  background: var(--l2-gold-deep); color: #0d1b2a;
  transform: translateY(-1px); box-shadow: 0 4px 16px rgba(201, 160, 90, 0.5);
}
body.l2 button.certification-start-btn {
  width: 100%;
  justify-content: center;
  min-height: 3.6rem;
  font-size: 1.35rem !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
body.l2 .ladder-legal { display: none; }
body.l2 .l2-footer {
  min-height: 100vh; scroll-snap-align: start;
  display: flex; flex-direction: column; justify-content: center;
  width: 80%; max-width: none; margin: 0 auto;
  padding: clamp(5rem, 11vh, 8rem) 0 3rem; box-sizing: border-box;
}
body.l2 .l2-footer-cta {
  font-family: var(--l2-display); font-weight: 800; letter-spacing: -0.01em;
  line-height: 1; font-size: clamp(2.6rem, 6.5vw, 5.5rem); color: var(--l2-ink); margin: 0 0 3rem;
}
body.l2 .l2-footer-cta a { color: var(--l2-gold-deep); text-decoration: none; border-bottom: 3px solid var(--l2-gold); }
body.l2 .l2-footer-grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem;
  border-top: 1px solid var(--l2-line); padding-top: 2.5rem;
}
body.l2 .l2-footer-col h4 {
  font-family: var(--l2-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.72rem; color: var(--l2-gold-deep); margin: 0 0 1rem;
}
body.l2 .l2-footer-col a { display: block; color: var(--l2-ink-2); text-decoration: none; margin-bottom: 0.55rem; }
body.l2 .l2-footer-col a:hover { color: var(--l2-gold-deep); }
body.l2 .l2-footer-legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--l2-line); color: var(--l2-muted); font-size: 0.82rem; line-height: 1.6; }
/* Support & feedback, relocated to the bottom of the page (just above the footer nav) */
body.l2 .l2-footer-support { width: min(560px, 100%); margin: 0 0 3rem; scroll-margin-top: 6rem; }
body.l2 .l2-footer-support h3 { font-family: var(--l2-display); font-weight: 800; font-size: 1.4rem; color: var(--l2-ink); margin: 0.35rem 0 1rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  html { scroll-snap-type: none; }
  body.l2 .ladder-hero { grid-template-columns: 1fr; }
  body.l2 .hero-panels { border-left: none; padding-left: 0 !important; }
  body.l2 .l2-navlinks { display: none; }
  body.l2 .l2-profile-grid > * + * { border-left: none; padding-left: 0 !important; }
  body.l2 .l2-cert-grid { grid-template-columns: 1fr !important; }
  body.l2 #training .l2-section-head {
    padding-right: 0;
    min-height: 0;
  }
  body.l2 #certification .l2-section-head {
    padding-right: 0;
    min-height: 0;
  }
  body.l2 #training .l2-section-head::after,
  body.l2 #certification .l2-section-head::after {
    right: 0;
  }
  body.l2 #training .l2-section-head > .training-chat-column {
    position: static;
    width: 100%;
    min-width: 0;
  }
  body.l2 #certification .l2-section-head > .training-chat-column {
    position: static;
    width: 100%;
    min-width: 0;
  }
  body.l2 .l2-footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  body.l2 .l2-section { min-height: 0; }
}

/* ============================================================
   HERO EMAIL ONBOARDING — bottom-centre of #marketing
   (replaces login/account creation; brand navy/gold over the aurora)
   ============================================================ */
body.l2 .l2-signup {
  position: relative;
  z-index: 1;                 /* above the hero aurora */
  width: min(560px, 92%);
  margin: 2.4rem auto 0;
  text-align: center;
}
body.l2 .l2-signup-eyebrow {
  font-family: var(--l2-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--l2-ink);
  margin: 0 0 0.9rem;
}
body.l2 .l2-signup-form,
body.l2 .l2-signin-form { display: flex; gap: 0.6rem; align-items: stretch; }
body.l2 .l2-signin-form { margin-top: 0.6rem; }
body.l2 .l2-signup-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--l2-line);
  border-radius: 10px;
  background: #fff;
  color: #0d1b2a;
  font: inherit;
  font-size: 1.05rem;
}
[data-theme="dark"] body.l2 .l2-signup-input { background: #0b1622; color: var(--l2-ink); }
body.l2 .l2-signup-input:focus {
  outline: none;
  border-color: var(--l2-gold);
  box-shadow: 0 0 0 3px rgba(201, 160, 90, 0.2);
}
body.l2 .l2-signup-btn {
  flex: 0 0 auto;
  padding: 0 1.7rem;
  border: 0;
  border-radius: 10px;
  background: var(--l2-gold);
  color: #15233a;
  font-family: var(--l2-display);
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
}
body.l2 .l2-signup-btn:hover { filter: brightness(1.05); }
body.l2 .l2-signup-msg { margin: 0.8rem 0 0; font-size: 0.95rem; color: var(--l2-ink-2); }
body.l2 .l2-signup-msg[data-state="error"] { color: #c0492f; }
body.l2 .l2-signup-msg[data-state="ok"] { color: var(--l2-gold-deep); }
body.l2 .l2-signup-signin {
  display: inline-block;
  margin-top: 0.85rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--l2-gold-deep);
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: 0;
}
body.l2 .l2-signup-signin:hover { text-decoration: underline; }
body.l2 .l2-signed-in {
  display: flex; gap: 1rem; align-items: baseline; justify-content: center;
  font-size: 1rem; color: var(--l2-ink);
}
body.l2 .l2-signup:has(.l2-signed-in:not([hidden])) {
  width: min(430px, calc(100vw - 4rem));
  margin-left: auto;
  margin-right: auto;
  padding: 1.05rem 1.15rem;
  border-radius: 8px;
}
body.l2 .l2-signup:has(.l2-signed-in:not([hidden])) .l2-signed-in {
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  text-align: left;
}
body.l2 .l2-signed-in b {
  overflow-wrap: anywhere;
}
/* the sign-out button inherits a stacked-layout margin-top (and has uppercase
   padding + a 2px ::after underline). Drop the margin and the button's vertical
   padding so its text baseline lines up with the "Signed in as…" text. */
body.l2 .l2-signed-in .l2-signup-signin {
  margin-top: 0;
  padding: 0.68rem 0.9rem;
  line-height: 1.1;
  text-align: center;
}
body.l2 .l2-signup.is-signed-in {
  width: min(430px, calc(100vw - 4rem)) !important;
  max-width: calc(100vw - 6rem);
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none;
}
@media (max-width: 560px) {
  body.l2 .l2-signup-form, body.l2 .l2-signin-form { flex-direction: column; }
  body.l2 .l2-signup-btn { padding: 0.9rem; }
}
@media (max-width: 900px) {
  body.l2 .l2-signup.is-signed-in {
    width: min(360px, calc(100vw - 2rem)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none;
  }
}

/* ── collapse zone (placed last so it wins over the base hero rules): as the
   viewport narrows the centered title grows into the side asides. Keep the
   staircase image out of the big title, and lift the email signup up toward
   "Trained and Certified". ────────────────────────────────────────────────── */
@media (min-width: 901px) and (max-width: 1500px) {
  body.l2 .ladder-stairs-aside { width: 19%; right: 1.5%; }
  body.l2 .ladder-stairs { max-width: 300px; }
  /* shrink the email form with the page (it was pinned at 560px the whole zone) */
  body.l2 .l2-signup { margin-top: -1.5rem; width: clamp(360px, 37vw, 560px); }
  body.l2 .l2-signup:has(.l2-signed-in:not([hidden])) {
    width: min(420px, 32vw);
    margin-right: clamp(2.5rem, 9vw, 8rem);
  }
  body.l2 .l2-signup.is-signed-in {
    width: min(430px, calc(100vw - 4rem)) !important;
    margin-right: auto !important;
    transform: none;
  }
}

/* Final certification exam action override: keep these as real filled buttons,
   not inherited underline links. */
body.l2 .certification-mode-action {
  grid-template-columns: 16.5rem minmax(0, 1fr);
  align-items: center;
}
body.l2 .certification-mode-action p {
  margin: 0 !important;
  text-align: left !important;
}
body.l2 .certification-mode-action button,
body.l2 .certification-mode-action button.secondary {
  justify-self: stretch !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 2.35rem !important;
  border: 1px solid var(--l2-line) !important;
  border-radius: 8px !important;
  padding: 0.55rem 0.85rem !important;
  background: var(--l2-ink) !important;
  color: #fff !important;
  font-weight: 800 !important;
  text-align: center !important;
}
body.l2 .certification-mode-action button::after {
  display: none !important;
}