/* ============================================================
   Klartext KI — shared stylesheet
   ============================================================ */

/* ---------- design tokens (Snow + Cobalt direction) ---------- */
:root {
  /* SURFACES — Snow foundation, deep cool ink */
  --paper:           #F7F9FC;
  --paper-soft:      #EDF1F8;
  --ink:             #0A1B3D;
  --ink-deep:        #060F26;

  /* INK ON PAPER */
  --ink-primary:     #0A1B3D;
  --ink-secondary:   #3A4866;
  --ink-mute:        #6B7591;

  /* PAPER ON INK */
  --paper-primary:   #FBFAF7;
  --paper-secondary: #C9D0E0;
  --paper-mute:      #7E89A8;

  /* ACCENTS — Cobalt only (colour-only accent voice) */
  --accent-electric:    #2A6FDB;
  --accent-electric-hi: #4D8AEA;
  --accent-warm:        #2A6FDB;
  --accent-warm-deep:   #1F4FA0;

  /* SEMANTIC (warm-leaning) */
  --ok:    #2E8B6B;
  --warn:  #D97A2C;
  --error: #C8412E;

  /* LINES */
  --line-1:      #E5E1D6;
  --line-2:      #C7C1AF;
  --line-dark-1: #1A2B4F;
  --line-dark-2: #2C3D62;

  /* TYPE FAMILIES */
  --font-display: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* TYPE SCALE — desktop · mobile uses clamp() per consumer */
  --fs-display-xl: clamp(64px, 8.5vw, 112px);
  --fs-display:    clamp(48px, 6.5vw, 80px);
  --fs-h1:         clamp(40px, 5vw, 56px);
  --fs-h2:         clamp(30px, 3.6vw, 40px);
  --fs-h3:         clamp(22px, 2.4vw, 28px);
  --fs-h4:         20px;
  --fs-body-lg:    19px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-eyebrow:    12px;
  --fs-mono:       14px;

  --lh-display-xl: 0.92;
  --lh-display:    0.95;
  --lh-h1:         1.02;
  --lh-h2:         1.08;
  --lh-h3:         1.18;
  --lh-h4:         1.3;
  --lh-body-lg:    1.55;
  --lh-body:       1.65;
  --lh-body-sm:    1.55;
  --lh-caption:    1.4;

  --tr-display-xl: -0.045em;
  --tr-display:    -0.04em;
  --tr-h1:         -0.035em;
  --tr-h2:         -0.03em;
  --tr-h3:         -0.022em;
  --tr-h4:         -0.015em;
  --tr-body-lg:    -0.005em;
  --tr-body:       -0.003em;
  --tr-eyebrow:    0.14em;

  /* SPACE LADDER (8-pt base) */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  40px;
  --space-8:  48px;
  --space-9:  56px;
  --space-10: 64px;
  --space-12: 96px;
  --space-14: 128px;
  --space-16: 160px;

  /* SIZE LADDER (icons, avatars, controls) */
  --size-1:  16px;
  --size-2:  20px;
  --size-3:  24px;
  --size-4:  32px;
  --size-5:  40px;
  --size-6:  48px;
  --size-8:  64px;
  --size-10: 80px;
  --size-12: 96px;

  /* SECTION PADDING — Fazore mode generous, Klartext mode tight */
  --section-pad-fazore:   clamp(96px, 12vw, 160px);
  --section-pad-klartext: clamp(64px, 8vw, 96px);

  /* RADII — 18px corner standard */
  --radius-sm: 10px;
  --radius:    18px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* MOTION — easings */
  --ease-enter:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --ease-hover:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-focus:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-lesson:   cubic-bezier(0.22, 1, 0.36, 1);

  /* MOTION — durations */
  --dur-instant:    80ms;
  --dur-micro:     160ms;
  --dur-moderate:  280ms;
  --dur-section:   420ms;
  --dur-page:      380ms;
  --dur-signature: 600ms;

  /* ELEVATION — refined for paper */
  --shadow-soft:  0 1px 2px rgba(10, 27, 61, 0.04);
  --shadow-card:  0 1px 2px rgba(10, 27, 61, 0.04), 0 10px 28px -14px rgba(10, 27, 61, 0.12);
  --shadow-elev:  0 1px 2px rgba(10, 27, 61, 0.06), 0 24px 60px -24px rgba(10, 27, 61, 0.22);

  /* LEGACY ALIASES — preserve existing CSS while new tokens take over.
     DO NOT REMOVE — 4700+ lines depend on these. They point at the new palette. */
  --bg:           var(--paper);
  --bg-2:         var(--paper-soft);
  --surface:      var(--paper);
  --surface-2:    var(--paper-soft);
  --ink-2:        var(--ink-secondary);
  --ink-faint:    var(--paper-mute);
  --line:         var(--line-1);
  --line-soft:    var(--line-1);
  --line-strong:  var(--line-2);
  --brand:        var(--accent-electric);
  --brand-2:      var(--accent-electric-hi);
  --brand-deep:   var(--ink-deep);
  /* cobalt tints */
  --brand-tint:   #E3ECFB;
  --brand-soft:   #A9C5F2;
  --accent:       var(--ok);
  --accent-2:     #3FA384;
  --accent-tint:  #DCEDE5;
  --accent-soft:  #8BC4AC;
  --plum:         #6D28D9;
  --plum-2:       #7C3AED;
  --plum-tint:    #EDE9FE;
  --plum-soft:    #C4B5FD;
  --success:      var(--ok);
  --success-tint: #DCEDE5;
  --warn-tint:    #FBE9D5;
}

[data-theme="dark"] {
  --paper:           #060F26;
  --paper-soft:      #0A1B3D;
  --ink:             #FBFAF7;
  --ink-deep:        #F4F2EC;

  --ink-primary:     #FBFAF7;
  --ink-secondary:   #C9D0E0;
  --ink-mute:        #7E89A8;

  --paper-primary:   #060F26;
  --paper-secondary: #1A2B4F;
  --paper-mute:      #2C3D62;

  --accent-electric:    #5B92EC;
  --accent-electric-hi: #84B0F4;
  --accent-warm:        #5B92EC;
  --accent-warm-deep:   #84B0F4;

  --line-1: #1A2B4F;
  --line-2: #2C3D62;

  --shadow-soft:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -16px rgba(0, 0, 0, 0.6);
  --shadow-elev:  0 1px 2px rgba(0, 0, 0, 0.5), 0 24px 60px -24px rgba(0, 0, 0, 0.8);

  /* legacy aliases auto-inherit because they var() */
  --brand-tint: #1A2447;
  --brand-soft: #3853A8;
  --accent-tint: #142B23;
  --warn-tint: #2B2210;
  --success-tint: #102A1B;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background:
    radial-gradient(1100px 620px at 18% -8%, rgba(42, 111, 219, 0.10), transparent 62%),
    radial-gradient(960px 560px at 92% 2%, rgba(42, 111, 219, 0.07), transparent 60%),
    var(--paper);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--ink-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  min-height: 100vh;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

.num, .tabular, .mono, table, .progress, .codeword, .timer, .percent { font-variant-numeric: tabular-nums; }

/* lang-aware quotes */
:lang(de) q { quotes: "\201E" "\201C" "\201A" "\2018"; }
:lang(en) q { quotes: "\201C" "\201D" "\2018" "\2019"; }

::selection { background: var(--brand-tint); color: var(--ink-primary); }
::-moz-selection { background: var(--brand-tint); color: var(--ink-primary); }

/* ---------- focus states — 2px electric + 2px paper offset per spec ---------- */
:focus-visible {
  outline: 2px solid var(--accent-electric);
  outline-offset: 2px;
  border-radius: 4px;
}
/* tighter radius on pill/rounded elements */
nav.primary a:focus-visible,
.lang-pill button:focus-visible,
.mauer-filters button:focus-visible,
.code-tabs button:focus-visible,
.q-action:focus-visible {
  border-radius: 999px;
}
/* remove outline on elements that provide their own focus ring via border+shadow */
.modal textarea:focus-visible,
.tagebuch textarea:focus-visible,
.code-input:focus-visible,
.modal.compose select:focus-visible,
.modal.compose input[type=text]:focus-visible {
  outline: none;
}
/* toggle: larger, visible ring */
.toggle:focus-visible {
  outline: 2px solid var(--accent-electric);
  outline-offset: 3px;
  border-radius: 999px;
}

/* display headings: tight tracking, weight does the talking */
.display, h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* The Signature Move — single accent word per heading.
   Colour-only accent voice: cobalt, no slant. */
h1 em, h2 em, h3 em, .display em, .display-xl em {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  letter-spacing: var(--tr-display);
  color: var(--accent-electric);
}
[data-theme="dark"] h1 em,
[data-theme="dark"] h2 em,
[data-theme="dark"] h3 em,
[data-theme="dark"] .display em,
[data-theme="dark"] .display-xl em,
.block--dark h1 em,
.block--dark h2 em,
.block--dark h3 em,
.block--dark .display em,
.block--dark .display-xl em {
  color: var(--accent-warm);
}

/* Display tokens — utility classes */
.display-xl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display-xl);
  letter-spacing: var(--tr-display-xl);
}
.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  line-height: 1.2;
}

/* prefers-reduced-motion — global motion reset */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* small caps label */
.label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--ink-mute);
}
.label-brand { color: var(--brand); }
.label-accent { color: var(--accent); }
.label-plum { color: var(--plum); }

/* tabular / mono for dates, durations */
.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: -0.01em; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- layout ---------- */
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 1;
}
@media (max-width: 640px) { .wrap { padding: 0 18px; } }

/* ============================================================
   HEADER
   ============================================================ */
header.top {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(14px);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  border-bottom: 1px solid var(--line-soft);
}
.top-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; gap: 24px;
}
/* brand anchor — CSS owns decoration so inline styles can be removed from HTML */
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brand-mark {
  /* rounded-square optimised for capital K */
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--ink);
  display: grid; place-items: center;
  color: var(--bg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  /* optical nudge: K's diagonals read slightly right-heavy; pull left */
  letter-spacing: -0.04em;
  padding-right: 1px;
  line-height: 1;
  position: relative;
  flex-shrink: 0;
}
/* dark-mode: use a brand-tinted background so the mark reads as colored, not just inverted */
[data-theme="dark"] .brand-mark {
  background: var(--brand-deep);
  color: var(--bg);
}
.brand-mark::after {
  content: "";
  position: absolute;
  right: -2px; bottom: -2px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
}
[data-theme="dark"] .brand-mark::after {
  border-color: var(--bg-2);
}
.brand-name {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.brand-name em { color: var(--brand); font-style: normal; font-weight: 600; }
.brand-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  margin-top: 1px;
}

nav.primary {
  display: flex;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 4px;
}
nav.primary a {
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-mute);
  transition: color .15s ease, background .15s ease;
}
nav.primary a:hover { color: var(--ink); }
nav.primary a.active {
  background: var(--ink);
  color: var(--bg);
}

.top-actions { display: flex; align-items: center; gap: 8px; }
.iconbtn {
  height: 36px;
  min-width: 36px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.iconbtn:hover { background: var(--bg-2); color: var(--ink); border-color: var(--line-strong); }
.iconbtn svg { width: 16px; height: 16px; }
.iconbtn.compact { width: 36px; padding: 0; }

.lang-pill {
  display: inline-flex;
  align-items: center;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 3px;
}
.lang-pill button {
  border: 0;
  background: transparent;
  height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  transition: color .15s ease, background .15s ease;
}
.lang-pill button.on { background: var(--ink); color: var(--bg); }
.lang-pill button:not(.on):hover { color: var(--ink); }

.avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--brand);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

@media (max-width: 900px) {
  nav.primary { display: none; }
  .top-inner { gap: 12px; }
}

@media (max-width: 600px) {
  .brand-sub { display: none; }
  .top-course { display: none; }
  .top-actions { gap: 6px; }
  /* hero carries the primary CTA on mobile, so the header CTA is redundant */
  .top-actions .btn.compact { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: 64px 0 28px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 22px;
}
.hero-eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.7); }
}
h1.hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 5.5vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  color: var(--ink);
}
.hero-lede {
  font-size: 17px;
  color: var(--ink-2);
  max-width: 620px;
  line-height: 1.62;
  margin: 0 0 32px;
}
.hero-lede u {
  text-decoration: none;
  background: linear-gradient(180deg, transparent 60%, var(--brand-tint) 60%);
  padding: 0 2px;
}

/* ============================================================
   JOURNEY rail
   ============================================================ */
.journey {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.journey-step {
  position: relative;
  padding: 14px 16px 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .15s ease;
}
.journey-step .num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.journey-step .label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.journey-step .bar {
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  margin-top: 10px;
  overflow: hidden;
}
.journey-step .bar-fill {
  height: 100%;
  background: var(--ink-mute);
  width: 0;
  transition: width .8s cubic-bezier(.2,.7,.2,1);
}
.journey-step.done .num { color: var(--success); }
.journey-step.done .bar-fill { width: 100%; background: var(--success); }
.journey-step.current {
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.journey-step.current .num { color: var(--brand); }
.journey-step.current .bar-fill { background: var(--brand); width: 55%; }
.journey-step.locked .label { color: var(--ink-mute); }
.journey-step.locked .num { color: var(--ink-faint); }

/* ============================================================
   GRID
   ============================================================ */
main { padding: 16px 0 80px; }
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 24px;
  margin-top: 28px;
}
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; }
  .journey { grid-template-columns: repeat(2, 1fr); }
  .hero { padding-top: 36px; }
}

/* ============================================================
   CARDS — clean, white, refined
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* unified subtle hover lift across all card-like surfaces */
.card:hover,
.lib-card:hover,
.q-card:hover,
.karte:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-card);
}
.card-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.card-h h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.015em;
  margin: 0;
}
.card-h .h-meta { font-size: 12.5px; color: var(--ink-mute); font-family: var(--font-mono); }

/* ============================================================
   LIVE SESSION — refined
   ============================================================ */
.live {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.live-ribbon {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.live-ribbon .live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
  animation: pulse 2.4s ease-in-out infinite;
}
.live-ribbon .ribbon-meta {
  margin-left: auto;
  color: color-mix(in srgb, var(--bg) 60%, transparent);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-size: 12.5px;
}

.live-body {
  padding: 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
}
@media (max-width: 700px) { .live-body { grid-template-columns: 1fr; padding: 22px; } }

.live-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin: 0 0 8px;
}
.live-sub {
  color: var(--ink-2);
  font-size: 15px;
  margin: 0 0 22px;
  max-width: 480px;
  line-height: 1.6;
}

.live-meta { display: flex; flex-wrap: wrap; gap: 20px 28px; margin-bottom: 24px; }
.live-meta-item { display: flex; gap: 10px; align-items: flex-start; }
.live-meta-item svg { width: 16px; height: 16px; color: var(--brand); margin-top: 2px; flex-shrink: 0; }
.live-meta-item .k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.live-meta-item .v {
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.35;
  margin-top: 2px;
}

.live-cta { display: flex; gap: 8px; flex-wrap: wrap; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform .1s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 15px; height: 15px; }
.btn-primary {
  background: var(--brand);
  color: var(--bg);
  border-color: var(--brand);
}
.btn-primary:hover { background: var(--brand-2); border-color: var(--brand-2); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { background: var(--bg-2); border-color: var(--line-strong); }
.btn-ink { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn-ink:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn-accent { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-2); border-color: var(--accent-2); }

.btn-lg { padding: 13px 20px; font-size: 14.5px; gap: 9px; }
.btn-lg svg { width: 16px; height: 16px; }

/* live host */
.live-host {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px;
  border-left: 1px solid var(--line);
  min-width: 170px;
}
@media (max-width: 700px) {
  .live-host {
    border-left: none;
    border-top: 1px solid var(--line);
    flex-direction: row;
    min-width: 0;
    text-align: left;
    align-items: center;
    gap: 14px;
  }
}
.host-photo {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--bg);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.02em;
}
.live-host .host-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}
.live-host .host-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
  line-height: 1;
}
.live-host .host-role {
  font-size: 12.5px;
  color: var(--ink-mute);
  text-align: center;
  letter-spacing: -0.005em;
}
@media (max-width: 700px) {
  .live-host .host-role { text-align: left; }
}

/* ============================================================
   CONTINUE — refined, no gradient
   ============================================================ */
.continue {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 0;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  transition: border-color .15s ease;
}
.continue:hover { border-color: var(--line-strong); }
@media (max-width: 700px) { .continue { grid-template-columns: 1fr; } }

.cover {
  position: relative;
  background: var(--plum-tint);
  display: grid; place-items: center;
  overflow: hidden;
  min-height: 160px;
}
.cover::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, var(--plum-soft) 0%, var(--plum-tint) 60%, transparent 100%);
  opacity: .9;
}
@media (max-width: 700px) { .cover { aspect-ratio: 16/8; min-height: 0; } }
.cover .play {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  display: grid; place-items: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -6px rgba(0,0,0,.12);
  transition: transform .2s ease;
}
.cover .play svg { width: 20px; height: 20px; margin-left: 2px; }
.continue:hover .play { transform: scale(1.06); }
.cover .cover-tag {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-weight: 500;
}

.continue-body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.continue-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--plum);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
.continue-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.18;
  margin: 0;
  letter-spacing: -0.018em;
}
.continue-meta {
  display: flex;
  gap: 14px;
  color: var(--ink-mute);
  font-size: 12.5px;
  align-items: center;
  flex-wrap: wrap;
}
.continue-meta svg {
  width: 13px; height: 13px;
  margin-right: 4px;
  vertical-align: -2px;
}
.continue-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}
.continue-progress .bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.continue-progress .bar-fill {
  height: 100%;
  background: var(--plum);
  width: 38%;
  border-radius: 2px;
}
.continue-progress .pct {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.continue-state {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  color: var(--ink-secondary);
  flex-wrap: wrap;
}
.continue-state .cs-mod {
  color: var(--accent-electric);
  font-weight: 500;
}
.continue-state .cs-sep {
  color: var(--ink-mute);
}
.continue-state .cs-note {
  font-style: italic;
}

/* ============================================================
   MODULE LIST
   ============================================================ */
.modules { margin-top: 36px; }
.modules h2.modules-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  margin: 0 0 4px;
  letter-spacing: -0.022em;
}
.modules .h-sub {
  color: var(--ink-mute);
  font-size: 14px;
  margin-bottom: 18px;
  max-width: 580px;
}

.module {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .15s ease;
}
.module:hover { border-color: var(--line-strong); }

.module-head {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  cursor: pointer;
  user-select: none;
}
.module-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  background: var(--bg-2);
  color: var(--ink-2);
  border: 1px solid var(--line);
  letter-spacing: 0.02em;
}
.module.done .module-mark {
  background: var(--success-tint);
  border-color: var(--success-tint);
  color: var(--success);
}
.module.done .module-mark svg { width: 14px; height: 14px; }
.module.current .module-mark {
  background: var(--brand);
  color: var(--bg);
  border-color: var(--brand);
}
.module.locked .module-mark {
  background: var(--bg-2);
  color: var(--ink-mute);
}
.module.locked .module-mark svg { width: 12px; height: 12px; }

.module-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.module-title .t {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--ink);
}
.module-title .s {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.4;
}
.module.locked .module-title .t { color: var(--ink-mute); }

.module-status {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--bg-2);
  white-space: nowrap;
  border: 1px solid var(--line);
}
.module.done .module-status {
  background: var(--success-tint);
  color: var(--success);
  border-color: transparent;
}
.module.current .module-status {
  background: var(--brand-tint);
  color: var(--brand);
  border-color: transparent;
}
.module.locked .module-status {
  background: transparent;
  color: var(--ink-mute);
  border: 1px dashed var(--line);
}

.module-chev {
  color: var(--ink-mute);
  transition: transform .25s ease, color .15s ease;
}
.module-chev svg { width: 16px; height: 16px; display: block; }
.module.open .module-chev {
  transform: rotate(180deg);
  color: var(--ink);
}

.module-body {
  padding: 0 22px 18px;
  border-top: 1px solid var(--line-soft);
  display: none;
}
.module.open .module-body { display: block; }
.module-body .intro {
  font-size: 14px;
  color: var(--ink-2);
  margin: 16px 0 12px;
  max-width: 620px;
  line-height: 1.5;
}

.lesson {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background .12s ease, border-color .12s ease;
}
.lesson + .lesson { margin-top: 2px; }
.lesson:hover {
  background: var(--bg-2);
}
.lesson-mark {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-2);
  color: var(--ink-mute);
  border: 1px solid var(--line);
}
.lesson-mark svg { width: 12px; height: 12px; }
.lesson.done .lesson-mark {
  background: var(--success-tint);
  color: var(--success);
  border-color: var(--success-tint);
}
.lesson.current .lesson-mark {
  background: var(--brand);
  color: var(--bg);
  border-color: var(--brand);
}
.lesson-info .lt {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.3;
  font-weight: 500;
}
.lesson-info .ls {
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-top: 2px;
  line-height: 1.4;
}
.lesson.done .lt { color: var(--ink-2); }

.lesson-kind {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.lesson.kind-live .lesson-kind {
  background: var(--accent-tint);
  color: var(--accent);
  border-color: transparent;
}
.lesson-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 500;
}

/* ============================================================
   SIDE COLUMN
   ============================================================ */
.side { display: flex; flex-direction: column; gap: 16px; }

.team {
  position: relative;
  overflow: hidden;
}
.team h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.team h3 em { color: var(--brand); font-style: normal; font-weight: 600; }
.team .team-lede {
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 0 0 20px;
  line-height: 1.5;
}
.team-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.team-photo {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--bg);
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.team-photo.luis { background: var(--brand); }
.team-photo.verena { background: var(--plum); }
.team-info .n {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.team-info .r {
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.3;
  margin-top: 2px;
}
.team-sig {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  text-align: center;
}

.helpcard {
  background: var(--ink);
  color: var(--bg);
  border: none;
  position: relative;
  overflow: hidden;
}
.helpcard::after {
  content: "";
  position: absolute;
  right: -60px; bottom: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .3;
  filter: blur(40px);
  pointer-events: none;
}
.helpcard h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}
.helpcard p {
  font-size: 13.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--bg) 75%, transparent);
  margin: 0 0 18px;
  position: relative;
  z-index: 1;
}
.helpcard .btn { position: relative; z-index: 1; }

.smallcard {
  display: flex; gap: 12px;
  background: var(--brand-tint);
  border: 1px solid color-mix(in srgb, var(--brand-soft) 50%, transparent);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--brand-deep);
  line-height: 1.5;
}
[data-theme="dark"] .smallcard { color: var(--brand); }
.smallcard svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--brand);
}
.smallcard strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   FOOTER
   ============================================================ */
footer.foot {
  border-top: 1px solid var(--line-soft);
  padding: 28px 0 36px;
  color: var(--ink-mute);
  font-size: 13px;
}
.foot-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.foot a {
  color: var(--ink-2);
  text-decoration: none;
  margin-right: 18px;
}
.foot a:hover { color: var(--ink); }

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translate(-50%, 24px);
  background: var(--ink);
  color: var(--bg);
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  box-shadow: var(--shadow-elev);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast svg { width: 15px; height: 15px; color: var(--brand); }

/* ============================================================
   MODAL
   ============================================================ */
.modal-bg {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--ink) 50%, transparent);
  backdrop-filter: blur(4px);
  display: none;
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-bg.show { display: flex; }
.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  max-width: 520px;
  width: 100%;
  padding: 32px;
  box-shadow: var(--shadow-elev);
  position: relative;
}
.modal h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
  margin: 0 0 8px;
  letter-spacing: -0.022em;
}
.modal h3 em { color: var(--brand); font-style: normal; font-weight: 600; }
.modal p {
  color: var(--ink-2);
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.5;
}
.modal textarea {
  width: 100%;
  min-height: 130px;
  resize: vertical;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 15px;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s ease;
}
.modal textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  gap: 12px;
  flex-wrap: wrap;
}
.modal-actions .who { display: flex; align-items: center; }
.modal-actions .who .team-photo { width: 30px; height: 30px; font-size: 12px; }
.modal-actions .who .team-photo + .team-photo { margin-left: -8px; border: 2px solid var(--surface); }
.modal-actions .who .team-photo:first-child { border: 2px solid var(--surface); }
.modal-actions .who span { margin-left: 12px; font-size: 12.5px; color: var(--ink-mute); }
.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  place-items: center;
  color: var(--ink-mute);
}
.modal-close:hover { color: var(--ink); }
.modal-close svg { width: 14px; height: 14px; }

/* ============================================================
   UTILITIES
   ============================================================ */
.row { display: flex; gap: 10px; align-items: center; }
.divider {
  height: 1px;
  background: var(--line-soft);
  margin: 20px 0;
}

/* ============================================================
   LIBRARY PAGE
   ============================================================ */
.lib-hero { padding: 64px 0 32px; max-width: 760px; }

.lib-section { padding: 56px 0 8px; }
.lib-section + .lib-section { padding-top: 24px; }

.lib-section-head { margin-bottom: 28px; max-width: 720px; }
.lib-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.lib-section-eyebrow .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-mute);
}
.lib-section.use .lib-section-eyebrow { color: var(--brand); }
.lib-section.use .lib-section-eyebrow .dot { background: var(--brand); }
.lib-section.practice .lib-section-eyebrow { color: var(--accent); }
.lib-section.practice .lib-section-eyebrow .dot { background: var(--accent); }
.lib-section.watch .lib-section-eyebrow { color: var(--plum); }
.lib-section.watch .lib-section-eyebrow .dot { background: var(--plum); }

.lib-section h2.lib-section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 12px;
  color: var(--ink);
}
.lib-section h2.lib-section-title em { font-style: normal; font-weight: 600; }
.lib-section.use h2.lib-section-title em { color: var(--brand); }
.lib-section.practice h2.lib-section-title em { color: var(--accent); }
.lib-section.watch h2.lib-section-title em { color: var(--plum); }

.lib-section .lib-section-sub {
  color: var(--ink-2);
  font-size: 16px;
  max-width: 600px;
  margin: 0;
  line-height: 1.6;
}

.lib-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 960px) { .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lib-grid { grid-template-columns: 1fr; } }

.lib-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lib-card:hover { border-color: var(--line-strong); }

.lib-card-no {
  position: absolute;
  top: 18px; right: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0.05em;
}

.lib-card-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--bg-2);
  color: var(--ink-2);
  margin-bottom: 2px;
}
.lib-card-icon svg { width: 16px; height: 16px; }
.lib-section.use .lib-card-icon { background: var(--brand-tint); color: var(--brand); }
.lib-section.practice .lib-card-icon { background: var(--accent-tint); color: var(--accent); }
.lib-section.watch .lib-card-icon { background: var(--plum-tint); color: var(--plum); }

.lib-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--ink);
}
.lib-card-body {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}

/* prompt box */
.prompt-box {
  margin-top: auto;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 44px 11px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.prompt-box::before {
  content: "›";
  color: var(--brand);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  margin-top: 1px;
  flex-shrink: 0;
}
.prompt-box-text { flex: 1; }
.prompt-copy {
  position: absolute;
  top: 7px; right: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-mute);
  width: 26px; height: 26px;
  border-radius: 6px;
  display: grid; place-items: center;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.prompt-copy:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--bg-2);
}
.prompt-copy svg { width: 12px; height: 12px; }
.prompt-copy.done { color: var(--success); border-color: var(--success-tint); }

/* tip box (watch-out section) */
.tip-box {
  margin-top: auto;
  background: var(--plum-tint);
  border: 1px solid color-mix(in srgb, var(--plum-soft) 40%, transparent);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.5;
  display: flex;
  gap: 10px;
}
.tip-box::before {
  content: "→";
  color: var(--plum);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  flex-shrink: 0;
}
.tip-box strong { color: var(--ink); font-weight: 600; }
.tip-box .tip-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  color: var(--plum);
  font-weight: 600;
  margin-right: 6px;
}

/* closing CTA */
.lib-closer {
  margin: 80px 0 0;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-lg);
  padding: 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
@media (max-width: 720px) {
  .lib-closer { grid-template-columns: 1fr; padding: 28px; }
}
.lib-closer::before {
  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .35;
  filter: blur(50px);
  pointer-events: none;
}
.lib-closer h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 10px;
  position: relative;
  z-index: 1;
}
.lib-closer h2 em { color: var(--brand); font-style: normal; font-weight: 600; }
.lib-closer p {
  font-size: 15px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--bg) 75%, transparent);
  margin: 0;
  max-width: 540px;
  position: relative;
  z-index: 1;
}
.lib-closer .btn { position: relative; z-index: 1; }

/* ============================================================
   MODULES PAGE
   ============================================================ */
.mod-page-hero { padding: 60px 0 16px; max-width: 760px; }

.mod-nav {
  position: sticky;
  top: 64px;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
  padding: 12px 0;
  margin: 32px 0 0;
}
.mod-nav-inner {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mod-nav-inner::-webkit-scrollbar { display: none; }
.mod-nav a {
  text-decoration: none;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.mod-nav a:hover { color: var(--ink); border-color: var(--line-strong); }
.mod-nav a .num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-2);
  color: var(--ink-2);
  padding: 2px 6px;
  border-radius: 5px;
  letter-spacing: 0.02em;
}
.mod-nav a.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.mod-nav a.active .num { background: var(--brand); color: var(--bg); }

.mod-block {
  padding: 56px 0;
  border-top: 1px solid var(--line-soft);
}
.mod-block:first-of-type { border-top: 0; padding-top: 40px; }
.mod-block-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 28px;
}
@media (max-width: 720px) { .mod-block-head { grid-template-columns: 1fr; align-items: start; } }
.mod-block .label-num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 10px;
}
.mod-block.done .label-num { color: var(--success); }
.mod-block.current .label-num { color: var(--brand); }
.mod-block h2.mod-block-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 10px;
  max-width: 660px;
}
.mod-block-lede {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
  max-width: 620px;
}
.mod-block-status {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink-mute);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.mod-block.done .mod-block-status { background: var(--success-tint); color: var(--success); border-color: transparent; }
.mod-block.current .mod-block-status { background: var(--brand-tint); color: var(--brand); border-color: transparent; }
.mod-block.locked .mod-block-status { background: transparent; border-style: dashed; }

.mod-block-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 18px;
}
@media (max-width: 800px) { .mod-block-grid { grid-template-columns: 1fr; } }

/* live card variant inside mod page */
.mod-live {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  position: relative;
}
.mod-live .live-rib {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-tint);
  padding: 5px 10px;
  border-radius: 6px;
  margin-bottom: 14px;
  font-weight: 600;
}
.mod-live .live-rib .live-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.mod-live h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 6px;
}
.mod-live p.live-sub {
  font-size: 13.5px;
  color: var(--ink-2);
  margin: 0 0 16px;
  line-height: 1.5;
}
.mod-live .live-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-bottom: 18px;
}

/* outcomes card */
.outcomes {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.outcomes h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 14px;
  font-weight: 600;
}
.outcomes ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.outcomes li {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.45;
}
.outcomes li::before {
  content: "";
  flex-shrink: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--brand-tint);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E5340' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 11px;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 2px;
}

/* mod lesson list */
.mod-lessons {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mod-lessons h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 8px;
  font-weight: 600;
}

/* resources */
.resources {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.resource-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}
.resource-pill:hover { color: var(--ink); border-color: var(--line-strong); }
.resource-pill svg { width: 14px; height: 14px; color: var(--ink-mute); }

/* ============================================================
   MEIN PLAN PAGE
   ============================================================ */
.plan-hero { padding: 60px 0 32px; max-width: 760px; }

.plan-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
@media (max-width: 760px) { .plan-stats { grid-template-columns: repeat(2, 1fr); } }

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat .k {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.stat .v {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
}
.stat .v .small {
  font-size: 14px;
  color: var(--ink-mute);
  font-weight: 500;
  margin-left: 4px;
}
.stat.brand .v { color: var(--brand); }
.stat.accent .v { color: var(--accent); }

/* week timeline — day columns, events stacked inside */
.week-grid {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 16px;
}
.week-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.week-head > div {
  padding: 12px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border-right: 1px solid var(--line-soft);
  text-align: left;
}
.week-head > div:last-child { border-right: 0; }
.week-head > div.today { color: var(--brand); }
.week-head > div .dnum {
  display: block;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-top: 4px;
  line-height: 1;
}
.week-head > div.today .dnum { color: var(--brand); }

.week-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  min-height: 200px;
}
.day-col {
  padding: 8px;
  border-right: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.day-col:last-child { border-right: 0; }
.day-col.today {
  background: color-mix(in srgb, var(--brand-tint) 60%, transparent);
}
.day-col.empty {
  color: var(--ink-faint);
  font-size: 11.5px;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
}

.event {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--ink);
  border: 1px solid;
  transition: transform .1s ease;
}
.event:hover { transform: translateY(-1px); }
.event .e-time {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: 2px;
  opacity: .85;
  font-weight: 600;
}
.event .e-title {
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.event.live {
  background: var(--accent-tint);
  border-color: color-mix(in srgb, var(--accent-soft) 50%, transparent);
  color: var(--accent);
}
.event.lesson {
  background: var(--brand-tint);
  border-color: color-mix(in srgb, var(--brand-soft) 40%, transparent);
  color: var(--brand);
}
.event.due {
  background: var(--plum-tint);
  border-color: color-mix(in srgb, var(--plum-soft) 40%, transparent);
  color: var(--plum);
}

@media (max-width: 760px) {
  .week-head, .week-body {
    grid-template-columns: 1fr;
  }
  .week-head > div, .day-col { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .week-head > div { display: flex; align-items: baseline; gap: 12px; padding: 10px 16px; }
  .week-head > div .dnum { font-size: 16px; margin: 0; }
  .day-col { min-height: 0; padding: 8px 16px 12px; }
  .day-col.empty { padding: 4px 16px 12px; align-items: flex-start; }
}

/* upcoming list */
.upcoming {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.upcoming-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
  transition: background .12s ease;
}
.upcoming-item:hover { background: var(--bg-2); }
.upcoming-item:last-child { border-bottom: 0; }
.upcoming-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.upcoming-date .m {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
.upcoming-date .d {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1;
  margin-top: 2px;
}
.upcoming-info .ut {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.upcoming-info .us {
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-top: 3px;
}
.upcoming-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 5px;
}
.upcoming-tag.live { background: var(--accent-tint); color: var(--accent); }
.upcoming-tag.lesson { background: var(--brand-tint); color: var(--brand); }
.upcoming-tag.due { background: var(--plum-tint); color: var(--plum); }

/* section heads on plan page */
.plan-section { margin-top: 40px; }
.plan-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 16px;
}
.plan-section-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.022em;
  margin: 0;
}
.plan-section-head .h-sub {
  font-size: 13px;
  color: var(--ink-mute);
}

/* settings row */
.settings-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-soft);
  gap: 16px;
}
.settings-row:last-child { border-bottom: 0; }
.settings-row .sr-l { display: flex; gap: 14px; align-items: center; }
.settings-row .sr-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--bg-2);
  display: grid;
  place-items: center;
  color: var(--ink-2);
  flex-shrink: 0;
}
.settings-row .sr-icon svg { width: 16px; height: 16px; }
.settings-row .sr-info .t { font-size: 14px; font-weight: 500; letter-spacing: -0.005em; }
.settings-row .sr-info .s { font-size: 12.5px; color: var(--ink-mute); margin-top: 2px; }

/* toggle */
.toggle {
  width: 38px; height: 22px;
  border-radius: 999px;
  background: var(--line-strong);
  position: relative;
  cursor: pointer;
  transition: background .15s ease;
  flex-shrink: 0;
  border: 0;
  padding: 0;
}
.toggle::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform .2s ease;
}
.toggle.on { background: var(--brand); }
.toggle.on::after { transform: translateX(16px); }


/* ============================================================
   LESSON PAGE
   ============================================================ */
.lesson-page { padding: 32px 0 0; }
.lesson-crumb {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin-bottom: 16px;
}
.lesson-crumb a { color: var(--ink-mute); text-decoration: none; transition: color .12s ease; }
.lesson-crumb a:hover { color: var(--ink); }
.lesson-crumb svg { width: 12px; height: 12px; }

.lesson-hero { max-width: 760px; margin-bottom: 20px; }
.lesson-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4.8vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 14px;
}
.lesson-hero .lesson-lede {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.62;
  margin: 0;
}

.lesson-meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 32px;
}
.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 12.5px;
  color: var(--ink-2);
  font-weight: 500;
}
.meta-chip svg { width: 14px; height: 14px; color: var(--ink-mute); }
.meta-chip.exercise { background: var(--brand-tint); color: var(--brand); border-color: transparent; }
.meta-chip.exercise svg { color: var(--brand); }
.meta-chip strong { font-weight: 600; color: var(--ink); }

.lesson-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr);
  gap: 36px;
  margin-top: 8px;
  align-items: start;
}
@media (max-width: 940px) {
  .lesson-grid { grid-template-columns: 1fr; }
}

/* video / hero media */
.lesson-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  place-items: center;
  margin-bottom: 28px;
}
.lesson-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 28%, color-mix(in srgb, var(--brand) 60%, transparent) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--plum) 50%, transparent) 0%, transparent 55%);
  opacity: .8;
}
.lesson-media .play-big {
  position: relative;
  z-index: 1;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .2s ease;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--surface) 30%, transparent), 0 20px 48px -16px rgba(0,0,0,.6);
}
.lesson-media .play-big:hover { transform: scale(1.05); }
.lesson-media .play-big svg { width: 28px; height: 28px; margin-left: 3px; }
.lesson-media .media-tag {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 1;
  background: color-mix(in srgb, var(--ink) 60%, transparent);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}
.lesson-media .media-duration {
  position: absolute;
  bottom: 14px; right: 14px;
  z-index: 1;
  background: color-mix(in srgb, var(--ink) 70%, transparent);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

/* TOC card */
.lesson-toc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 36px;
}
.lesson-toc h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 12px;
}
.lesson-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.lesson-toc li {
  counter-increment: toc;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 10px;
  align-items: center;
}
.lesson-toc li:last-child { border-bottom: 0; }
.lesson-toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.lesson-toc li a {
  font-size: 14.5px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.lesson-toc li a:hover { color: var(--brand); }
.lesson-toc li .toc-dur {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

/* lesson section */
.lesson-section {
  padding: 36px 0 32px;
  border-top: 1px solid var(--line-soft);
}
.lesson-section:first-of-type { border-top: 0; padding-top: 0; }
.lesson-section .sec-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
  margin-bottom: 10px;
}
.lesson-section h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3.2vw, 32px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 18px;
}
.lesson-section h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 24px 0 10px;
}
.lesson-section p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 16px;
  max-width: 660px;
}
.lesson-section p strong { color: var(--ink); font-weight: 600; }
.lesson-section ul {
  list-style: none;
  margin: 18px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 660px;
}
.lesson-section ul li {
  padding-left: 26px;
  position: relative;
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.lesson-section ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--brand-tint);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E40AF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 9px;
  background-position: center;
  background-repeat: no-repeat;
}
.lesson-section ul li strong { color: var(--ink); font-weight: 600; }

/* callout: example */
.callout {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 20px 0;
  max-width: 660px;
}
.callout .callout-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 6px;
}
.callout p { margin: 0; font-size: 14.5px; color: var(--ink); line-height: 1.5; }
.callout .callout-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  margin: 4px 0;
  display: block;
  white-space: pre-wrap;
}

/* skeptiker box */
.skeptiker {
  background: var(--plum-tint);
  border: 1px solid color-mix(in srgb, var(--plum-soft) 40%, transparent);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 24px 0;
  max-width: 660px;
  position: relative;
}
.skeptiker .sk-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: 8px;
}
.skeptiker .sk-label svg { width: 13px; height: 13px; }
.skeptiker .sk-q {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}
.skeptiker .sk-a {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}
.skeptiker .sk-a strong { color: var(--ink); font-weight: 600; }

/* exercise box */
.exercise-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  margin: 32px 0;
}
.exercise-box .ex-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 10px;
}
.exercise-box .ex-eyebrow svg { width: 14px; height: 14px; }
.exercise-box h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 8px;
}
.exercise-box .ex-sub {
  font-size: 14.5px;
  color: var(--ink-2);
  margin: 0 0 18px;
  line-height: 1.5;
}
.exercise-box .ex-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.exercise-box .ex-steps li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  padding: 0;
}
.exercise-box .ex-steps li::before {
  content: counter(exstep);
  counter-increment: exstep;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--bg);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  margin-top: -2px;
}
.exercise-box .ex-steps {
  counter-reset: exstep;
}
.exercise-box .ex-steps .step-body {
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.5;
}
.exercise-box .ex-steps .step-body strong { font-weight: 600; }
.exercise-box .ex-steps .step-body .step-hint {
  display: block;
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 3px;
}

.ex-prompt-box {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.55;
  margin-top: 8px;
  white-space: pre-wrap;
}

/* tagebuch entry */
.tagebuch {
  background: var(--brand-tint);
  border: 1px solid color-mix(in srgb, var(--brand-soft) 30%, transparent);
  border-radius: var(--radius);
  padding: 24px;
  margin: 36px 0 0;
}
.tagebuch .tb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin-bottom: 10px;
}
.tagebuch .tb-eyebrow svg { width: 14px; height: 14px; }
.tagebuch h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--ink);
}
.tagebuch .tb-prompt {
  font-size: 14.5px;
  color: var(--ink-2);
  margin: 0 0 14px;
  line-height: 1.5;
}
.tagebuch textarea {
  width: 100%;
  min-height: 80px;
  resize: vertical;
  border: 1px solid color-mix(in srgb, var(--brand-soft) 50%, transparent);
  background: var(--surface);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 14.5px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tagebuch textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}
.tagebuch .tb-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  gap: 12px;
}
.tagebuch .tb-help {
  font-size: 12px;
  color: var(--ink-mute);
}
.tagebuch .tb-help a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* SIDEBAR */
.lesson-side {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 940px) {
  .lesson-side { position: relative; top: 0; }
}

.side-progress {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.side-progress .sp-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.side-progress .sp-head .sp-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
.side-progress .sp-head .sp-pct {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brand);
  font-weight: 600;
}
.side-progress .sp-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.side-progress .sp-bar-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 2px;
  transition: width .8s cubic-bezier(.2,.7,.2,1);
}

.side-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.side-card h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 12px;
  font-weight: 600;
}
.side-card.resources ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.side-card.resources ul li a {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 8px;
  margin: 0 -8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  transition: background .12s ease;
}
.side-card.resources ul li a:hover { background: var(--bg-2); }
.side-card.resources .r-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--bg-2);
  color: var(--ink-2);
}
.side-card.resources .r-icon.pdf { background: color-mix(in srgb, var(--accent-tint) 60%, transparent); color: var(--accent); }
.side-card.resources .r-icon.slides { background: var(--brand-tint); color: var(--brand); }
.side-card.resources .r-icon.audio { background: var(--plum-tint); color: var(--plum); }
.side-card.resources .r-icon svg { width: 15px; height: 15px; }
.side-card.resources .r-name {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.side-card.resources .r-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 500;
  display: block;
  margin-top: 2px;
}
.side-card.resources .r-size {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
}

.side-card.glossary ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.side-card.glossary li {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.side-card.glossary li:last-child { border-bottom: 0; padding-bottom: 0; }
.side-card.glossary .gl-term {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.005em;
  display: block;
  margin-bottom: 3px;
}
.side-card.glossary .gl-def {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* lesson nav (prev/next) */
.lesson-nav {
  margin: 56px 0 0;
  padding-top: 32px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) { .lesson-nav { grid-template-columns: 1fr; } }
.lesson-nav a {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s ease, background .12s ease;
}
.lesson-nav a:hover { border-color: var(--line-strong); background: var(--bg-2); }
.lesson-nav .ln-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.lesson-nav .ln-label svg { width: 12px; height: 12px; }
.lesson-nav .ln-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.lesson-nav .next { text-align: right; }
.lesson-nav .next .ln-label { justify-content: flex-end; }

/* mark complete */
.complete-row {
  margin: 40px 0 0;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.complete-row .cr-info .t {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.015em;
}
.complete-row .cr-info .s {
  font-size: 13.5px;
  color: var(--ink-mute);
  margin-top: 3px;
}
.complete-row .complete-btn.done {
  background: var(--success);
  border-color: var(--success);
  color: var(--bg);
  pointer-events: none;
}


/* ============================================================
   DIE MAUER (anonymous Q&A wall)
   ============================================================ */
.mauer-hero { padding: 56px 0 24px; max-width: 760px; }

.mauer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0 20px;
  flex-wrap: wrap;
}
.mauer-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.mauer-filters button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 999px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.mauer-filters button:hover { color: var(--ink); border-color: var(--line-strong); }
.mauer-filters button.on {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}

.mauer-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-mute);
}
.mauer-sort select {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  padding: 7px 28px 7px 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 14px;
  cursor: pointer;
  transition: border-color .15s ease;
}
.mauer-sort select:focus-visible {
  outline: 2.5px solid var(--brand);
  outline-offset: 1px;
  border-color: var(--brand);
}

.q-stack { display: flex; flex-direction: column; gap: 12px; }

.q-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.q-card:hover { border-color: var(--line-strong); }

.q-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.q-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-2);
  color: var(--ink-2);
  font-size: 14px;
  flex-shrink: 0;
}
.q-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.q-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--ink-mute);
  font-weight: 500;
}
.q-meta .sep { margin: 0 6px; opacity: .5; }
.q-topic {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
}
.q-topic.m1 { background: var(--success-tint); color: var(--success); border-color: transparent; }
.q-topic.m2 { background: var(--brand-tint); color: var(--brand); border-color: transparent; }
.q-topic.m3 { background: var(--accent-tint); color: var(--accent); border-color: transparent; }
.q-topic.m4 { background: var(--plum-tint); color: var(--plum); border-color: transparent; }

.q-body {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17.5px;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0 0 16px;
}

.q-answer {
  background: var(--bg-2);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 14px;
  border-left: 3px solid var(--brand);
}
.q-answer .ans-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.q-answer .ans-photo {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  color: var(--bg);
  flex-shrink: 0;
}
.q-answer .ans-photo.luis { background: var(--brand); }
.q-answer .ans-photo.verena { background: var(--plum); }
.q-answer .ans-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.q-answer .ans-name .verified {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand);
  margin-left: 8px;
}
.q-answer .ans-name .verified svg { width: 11px; height: 11px; }
.q-answer p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 0 6px;
}
.q-answer p:last-child { margin-bottom: 0; }
.q-answer p strong { color: var(--ink); font-weight: 600; }
.q-answer ul { margin: 6px 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); line-height: 1.55; }

.q-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.q-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  font-size: 12.5px;
  color: var(--ink-mute);
  font-weight: 500;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.q-action:hover { color: var(--ink); border-color: var(--line-strong); background: var(--bg-2); }
.q-action svg { width: 13px; height: 13px; }
.q-action .count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.q-action.on { background: var(--brand-tint); color: var(--brand); border-color: transparent; }
.q-action.on .count { color: var(--brand); }
.q-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--accent-tint);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.q-flag svg { width: 11px; height: 11px; }

.q-pending {
  border-left: 3px solid var(--ink-faint);
  background: var(--surface-2);
  padding: 14px 18px;
  border-radius: 10px;
  margin: 0 0 14px;
  font-size: 13.5px;
  color: var(--ink-mute);
  font-style: italic;
}

/* compose box */
.mauer-compose {
  position: sticky;
  bottom: 16px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  padding: 10px 10px 10px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow-elev);
  margin: 20px 0 0;
  z-index: 30;
}
.mauer-compose .mc-prompt {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -0.01em;
}
.mauer-compose .btn-accent {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--bg);
  margin-left: auto;
}
.mauer-compose .btn-accent:hover { background: var(--brand-tint); }
@media (max-width: 600px) {
  .mauer-compose { border-radius: 14px; flex-direction: column; align-items: flex-start; padding: 14px 16px; }
  .mauer-compose .btn-accent { margin-left: 0; align-self: stretch; justify-content: center; }
}

/* compose modal — extends .modal */
.modal.compose textarea { min-height: 110px; }
.modal.compose .anon-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 10px;
}
.modal.compose .anon-line svg { width: 14px; height: 14px; color: var(--brand); }
.modal.compose select, .modal.compose input[type=text] {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  outline: none;
  margin-top: 10px;
  transition: border-color .15s ease;
}
.modal.compose select:focus-visible,
.modal.compose input[type=text]:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}


/* ============================================================
   WENN-DANN-KARTEN (printable)
   ============================================================ */
.karten-hero { padding: 56px 0 32px; max-width: 720px; }

.karten-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.karten-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1080px) { .karten-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .karten-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .karten-grid { grid-template-columns: 1fr; } }

.karte {
  aspect-ratio: 3 / 4;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  position: relative;
  page-break-inside: avoid;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.karte::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
}
.karte.b1::after { background: var(--brand); }
.karte.b2::after { background: var(--plum); }
.karte.b3::after { background: var(--accent); }
.karte.b4::after { background: var(--ink); }

.karte-no {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.karte-no .of {
  margin-left: 4px;
  opacity: .6;
}

.karte-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  margin-bottom: auto;
  background: var(--bg-2);
  color: var(--ink-2);
}
.karte-icon svg { width: 18px; height: 18px; }
.karte.b1 .karte-icon { background: var(--brand-tint); color: var(--brand); }
.karte.b2 .karte-icon { background: var(--plum-tint); color: var(--plum); }
.karte.b3 .karte-icon { background: var(--accent-tint); color: var(--accent); }
.karte.b4 .karte-icon { background: var(--bg-2); color: var(--ink); }

.karte-wenn {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 14px;
  margin-bottom: 4px;
}
.karte-wenn-body {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 10px;
}
.karte-arrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 4px;
}
.karte.b2 .karte-arrow { color: var(--plum); }
.karte.b3 .karte-arrow { color: var(--accent); }
.karte.b4 .karte-arrow { color: var(--ink); }
.karte-arrow svg { width: 12px; height: 12px; }

.karte-dann {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink-2);
}

.karten-howto {
  margin: 56px 0 0;
  padding: 32px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.karten-howto h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.022em;
  margin: 0 0 10px;
}
.karten-howto p {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 12px;
  max-width: 580px;
}
.karten-howto ol {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
  padding-left: 18px;
}

/* PRINT */
@media print {
  body { background: white; }
  *, *::before, *::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  header.top, footer.foot, .karten-actions, .karten-howto, .toast, .modal-bg { display: none !important; }
  main { padding: 0 !important; }
  .wrap { padding: 0 12px !important; }
  .karten-hero { padding: 0 0 12px !important; }
  .karten-hero h1 { font-size: 20px !important; letter-spacing: -0.02em !important; }
  .karten-hero .hero-lede { display: none !important; }
  .karten-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .karte {
    aspect-ratio: 3 / 4;
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1px solid #999 !important;
    border-radius: 8px !important;
    padding: 14px 14px 12px !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  .karte::after {
    display: block !important;
    height: 3px !important;
    /* keep the brand-colour bar in print */
  }
  .karte-no { font-size: 9px !important; margin-bottom: 8px !important; color: #666 !important; }
  .karte-icon { display: none !important; }
  .karte-wenn { font-size: 8.5px !important; margin-top: 0 !important; color: #666 !important; }
  .karte-wenn-body { font-size: 12.5px !important; margin-bottom: 8px !important; line-height: 1.3 !important; color: #000 !important; }
  .karte-arrow { font-size: 9px !important; margin-bottom: 3px !important; }
  .karte-dann { font-size: 11.5px !important; line-height: 1.3 !important; color: #333 !important; }
  /* print 4-up after first 4 if page allows */
  .karte:nth-child(4n+1) { break-before: auto; }
}


/* ============================================================
   CODEWORT-GENERATOR
   ============================================================ */
.code-page { max-width: 620px; margin: 0 auto; padding: 60px 28px 80px; }

.code-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 4.4vw, 44px);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 14px 0 14px;
}
.code-hero h1 em { color: var(--brand); font-style: normal; font-weight: 600; }
.code-hero p {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}

.code-stage {
  margin: 36px 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
}

/* wallet card */
.wallet {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px;
  aspect-ratio: 1.585 / 1; /* credit card ratio */
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-card);
  page-break-inside: avoid;
  overflow: hidden;
}
.wallet::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--plum) 50%, var(--accent) 100%);
}
.wallet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.wallet-brand {
  display: flex; align-items: center; gap: 8px;
}
.wallet-brand .brand-mark { width: 24px; height: 24px; border-radius: 7px; font-size: 13px; }
.wallet-brand .brand-mark::after { display: none; }
.wallet-brand .wb-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: -0.015em;
}
.wallet-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}

.wallet-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 16px 0;
}
.wallet-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 40px);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.wallet-word.placeholder {
  color: var(--ink-faint);
  font-weight: 600;
}
.wallet-hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 10px;
  font-weight: 600;
}

.wallet-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.wallet-foot .wf-text {
  font-size: 11px;
  color: var(--ink-mute);
  line-height: 1.4;
  max-width: 60%;
}
.wallet-foot .wf-sig {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--ink-2);
}

/* generator controls */
.code-controls {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.code-controls h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.018em;
  margin: 0 0 16px;
}
.code-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-2);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 18px;
}
.code-tabs button {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mute);
  transition: color .15s ease, background .15s ease;
}
.code-tabs button.on { background: var(--ink); color: var(--bg); }
.code-tabs button:not(.on):hover { color: var(--ink); }

.code-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--ink);
  background: var(--surface-2);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.code-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent); }

.code-gen-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.code-rules {
  background: var(--brand-tint);
  border: 1px solid color-mix(in srgb, var(--brand-soft) 30%, transparent);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.code-rules h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-deep);
  margin: 0 0 12px;
}
.code-rules ol {
  margin: 0; padding: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.5;
}
.code-rules ol li::marker {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--brand);
}

/* print: just the wallet card (credit-card size) */
@media print {
  *, *::before, *::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: white !important; }
  header.top, footer.foot, .code-controls, .code-rules, .code-hero, .modal-bg, .toast, .lesson-crumb, .code-actions { display: none !important; }
  .code-page { padding: 10mm; max-width: 100%; display: flex; align-items: flex-start; }
  .code-stage { gap: 0 !important; }
  .wallet {
    width: 85.6mm;
    height: 53.98mm;
    aspect-ratio: unset !important;
    border: 1px solid #555 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    background: #fff !important;
    padding: 14px 18px !important;
  }
  .wallet::after {
    /* keep gradient bar */
    height: 4px !important;
  }
  .wallet-word { font-size: 26px !important; }
  .wallet-hint { font-size: 9px !important; }
  .wallet-foot .wf-text { font-size: 9.5px !important; }
}


/* tool cards (Bibliothek Werkzeuge section) */
.lib-card.tool-card {
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.lib-card.tool-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.lib-card.tool-card .lib-card-icon {
  width: 40px; height: 40px;
}
.lib-card.tool-card .lib-card-icon svg { width: 18px; height: 18px; }
.tool-foot {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.lib-section.tools .lib-section-eyebrow { color: var(--ink); }
.lib-section.tools .lib-section-eyebrow .dot { background: var(--ink); }
.lib-section.tools h2.lib-section-title em { color: var(--brand); }


/* ============================================================
   LIBRARY TOPICS (modularized)
   ============================================================ */

/* sticky topic nav */
.lib-topic-nav {
  position: sticky;
  top: 64px;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
  padding: 12px 0;
  margin: 0 0 24px;
}
.lib-topic-nav-inner {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.lib-topic-nav-inner::-webkit-scrollbar { display: none; }
.lib-topic-nav a {
  text-decoration: none;
  color: var(--ink-mute);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.lib-topic-nav a:hover { color: var(--ink); border-color: var(--line-strong); }
.lib-topic-nav a .num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-2);
  color: var(--ink-2);
  padding: 2px 6px;
  border-radius: 5px;
  letter-spacing: 0.02em;
}
.lib-topic-nav a.active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.lib-topic-nav a.active .num { background: var(--brand); color: var(--bg); }

/* topic block — replaces lib-section-head */
.lib-topic {
  padding: 64px 0 0;
  border-top: 1px solid var(--line-soft);
}
.lib-topic:first-of-type { border-top: 0; padding-top: 48px; }

.lib-topic-head {
  display: grid;
  grid-template-columns: 72px 60px 1fr auto;
  gap: 20px;
  align-items: center;
  margin-bottom: 32px;
}
@media (max-width: 760px) {
  .lib-topic-head { grid-template-columns: 56px 48px 1fr; }
  .lib-topic-head .topic-meta { grid-column: 1 / -1; margin-top: 4px; }
}

.topic-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 52px;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.lib-topic.prompts .topic-num { color: var(--brand); }
.lib-topic.work .topic-num { color: var(--accent); }
.lib-topic.security .topic-num { color: var(--plum); }
.lib-topic.tools .topic-num { color: var(--ink); }

.topic-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.topic-icon svg { width: 22px; height: 22px; }
.lib-topic.prompts .topic-icon { background: var(--brand-tint); color: var(--brand); }
.lib-topic.work .topic-icon { background: var(--accent-tint); color: var(--accent); }
.lib-topic.security .topic-icon { background: var(--plum-tint); color: var(--plum); }
.lib-topic.tools .topic-icon { background: var(--bg-2); color: var(--ink); }

.topic-headtext h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 34px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 4px;
  color: var(--ink);
}
.topic-headtext .topic-lede {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
  max-width: 560px;
}

.topic-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: right;
  line-height: 1.5;
}
.topic-meta .meta-count {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* ============================================================
   DASHBOARD "from the library" section
   ============================================================ */
.dash-lib {
  margin-top: 48px;
}
.dash-lib-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.dash-lib-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  margin: 0;
  letter-spacing: -0.022em;
}
.dash-lib-head .h-sub {
  color: var(--ink-mute);
  font-size: 13.5px;
}
.dash-lib-head .h-sub a { color: var(--brand); text-decoration: none; font-weight: 500; }
.dash-lib-head .h-sub a:hover { text-decoration: underline; text-underline-offset: 3px; }

.dash-lib-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 940px) { .dash-lib-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dash-lib-grid { grid-template-columns: 1fr; } }

.dash-lib-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  position: relative;
  overflow: hidden;
}
.dash-lib-card::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
}
.dash-lib-card.prompts::after { background: var(--brand); }
.dash-lib-card.work::after { background: var(--accent); }
.dash-lib-card.security::after { background: var(--plum); }
.dash-lib-card.tools::after { background: var(--ink); }
.dash-lib-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-card); }

.dash-lib-card .dlc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dash-lib-card .dlc-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.dash-lib-card .dlc-icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
}
.dash-lib-card .dlc-icon svg { width: 16px; height: 16px; }
.dash-lib-card.prompts .dlc-icon { background: var(--brand-tint); color: var(--brand); }
.dash-lib-card.work .dlc-icon { background: var(--accent-tint); color: var(--accent); }
.dash-lib-card.security .dlc-icon { background: var(--plum-tint); color: var(--plum); }
.dash-lib-card.tools .dlc-icon { background: var(--bg-2); color: var(--ink); }

.dash-lib-card h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
}
.dash-lib-card .dlc-body {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.45;
  margin: 0;
}
.dash-lib-card .dlc-foot {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
}
.dash-lib-card .dlc-foot svg { width: 11px; height: 11px; }


/* ============================================================
   MINI COURSE: "AI you actually didn't know you could do"
   Bonus self-paced course, 3 lessons. Reuses existing tokens.
   ============================================================ */

/* hero on the overview page */
.mini-hero { padding: 56px 0 12px; max-width: 760px; }
.mini-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.028em;
  margin: 8px 0 16px;
}
.mini-hero .mini-lede {
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 680px;
}

/* spine: 3 lesson cards */
.mini-spine { margin: 40px 0 56px; display: grid; gap: 16px; }
.mini-card {
  display: block;
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  position: relative;
}
.mini-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.mini-card .mc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.mini-card .mc-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--ink-mute);
}
.mini-card .mc-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--bg-2);
  color: var(--ink-mute);
  border: 1px solid var(--line);
}
.mini-card.optin .mc-tag { background: var(--warn-tint); color: var(--warn); border-color: var(--warn-tint); }
.mini-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 8px;
}
.mini-card .mc-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0;
}
.mini-card .mc-foot {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--brand);
}
.mini-card .mc-foot svg { width: 14px; height: 14px; }

/* hack block (used in Mini-Top10 and Mini-Terminal) */
.mini-hack {
  margin: 56px 0 0;
  padding-top: 40px;
  border-top: 1px solid var(--line-soft);
}
.mini-hack:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.mini-hack-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.mini-hack-rank {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  font-weight: 600;
}
.mini-hack-needs {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--ink-mute);
}
.mini-hack-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.22;
  margin: 6px 0 18px;
}
.mini-hack-situation {
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink-2);
  margin: 0 0 22px;
}
.mini-hack-unlock {
  background: var(--brand-tint);
  border-left: 3px solid var(--brand);
  padding: 18px 22px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 0 0 20px;
}
.mini-hack-unlock-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand);
  display: block;
  margin-bottom: 6px;
}
.mini-hack-unlock-text {
  font-size: 16.5px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}
.mini-hack-payoff {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-mute);
  margin: 20px 0 0;
}

/* terminal safety banner (Mini-Terminal page) */
.mini-safety {
  margin: 28px 0 12px;
  padding: 18px 22px;
  background: var(--warn-tint);
  border: 1px solid var(--warn-tint);
  border-left: 3px solid var(--warn);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.mini-safety-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--warn);
  display: block;
  margin-bottom: 6px;
}
.mini-safety p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink); }

/* small note block for editable tool-recommendation in lesson 0 */
.mini-note {
  margin: 24px 0;
  padding: 16px 20px;
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-mute);
}
.mini-note .note-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-mute);
  display: block;
  margin-bottom: 4px;
}

/* dashboard bonus-course card matches dash-lib-card styling but uses accent */
.dash-lib-card.bonus::after { background: var(--accent); }
.dash-lib-card.bonus .dlc-icon { background: var(--accent-tint); color: var(--accent); }

/* mini-hack move chip — front-loads the pattern under the 10 hacks */
.mini-hack-move {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.mini-hack-move[data-move="show"]            { background: var(--accent-tint); color: var(--accent); }
.mini-hack-move[data-move="specific-detail"] { background: var(--brand-tint);  color: var(--brand); }
.mini-hack-move[data-move="name-the-job"]    { background: var(--plum-tint);   color: var(--plum); }

/* the three-moves pre-frame box (shown before the 10 hacks) */
.mini-moves-frame {
  margin: 32px 0 8px;
  padding: 22px 24px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.mini-moves-frame .mmf-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-mute);
  display: block;
  margin-bottom: 8px;
}
.mini-moves-frame h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0 0 10px;
}
.mini-moves-frame ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.mini-moves-frame li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.mini-moves-frame li .mmf-chip {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.mini-moves-frame li[data-move="show"] .mmf-chip            { background: var(--accent-tint); color: var(--accent); }
.mini-moves-frame li[data-move="specific-detail"] .mmf-chip { background: var(--brand-tint);  color: var(--brand); }
.mini-moves-frame li[data-move="name-the-job"] .mmf-chip    { background: var(--plum-tint);   color: var(--plum); }

/* four scannable question blocks on Mini-PickAI */
.pick-questions { display: grid; gap: 16px; margin: 22px 0 0; }
.pick-q {
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .15s ease;
}
.pick-q:hover { border-color: var(--line-strong); }
.pick-q h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0 0 8px;
}
.pick-q p { font-size: 15px; line-height: 1.6; color: var(--ink-mute); margin: 0; }

/* per-hack safety reminder on Mini-Terminal (repeats inside every hack on purpose) */
.mini-hack-safety {
  margin: 14px 0 18px;
  padding: 10px 16px;
  background: var(--warn-tint);
  border-left: 2px solid var(--warn);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}
.mini-hack-safety strong {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--warn);
  display: block;
  margin-bottom: 3px;
}

/* ============================================================
   FAZORE LANDING — bilingual marketing page
   Scoped to body.fazore-page so it doesn't leak into the course pages.
   ============================================================ */

body.fazore-page .brand-mark.fz {
  background: var(--brand);
  color: #fff;
  border-radius: 8px;
  position: relative;
}
body.fazore-page .brand-mark.fz::after {
  content: "";
  position: absolute;
  right: -3px; bottom: -3px;
  width: 9px; height: 9px;
  background: var(--accent);
  border: 2.5px solid var(--bg);
  border-radius: 50%;
}
body.fazore-page .brand-dot {
  color: var(--accent);
  font-weight: 500;
}

/* hero */
.fz-hero {
  padding: 56px 0 36px;
  max-width: 900px;
}
.fz-hero .hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 12px 0 18px;
  max-width: 880px;
}
@media (max-width: 720px) { .fz-hero .hero-title { font-size: 38px; } }
.fz-hero .hero-lede {
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 760px;
}

/* trust points */
.fz-trust {
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 820px) { .fz-trust { grid-template-columns: 1fr; } }
.fz-trust li {
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.fz-trust .trust-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 6px;
}
.fz-trust .trust-body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}

/* generic section heading */
.section-head { max-width: 760px; margin: 64px 0 28px; }
.section-head.compact { margin: 48px 0 18px; }
.section-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand);
  margin-bottom: 10px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: -0.022em;
  line-height: 1.18;
  margin: 0 0 12px;
}
.section-head h2 .emph { color: var(--ink); font-style: normal; }
.section-head h2 em { color: var(--brand); font-style: normal; }
.section-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-mute);
  max-width: 680px;
  margin: 0;
}

/* audience fork */
.fz-fork { margin: 0; }
.fork-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 8px;
}
@media (max-width: 820px) { .fork-cards { grid-template-columns: 1fr; } }
.fork-card {
  display: block;
  padding: 28px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  position: relative;
}
.fork-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; height: 4px; width: 64px;
  border-radius: var(--radius-lg) 0 var(--radius-lg) 0;
}
.fork-card.biz::before { background: var(--brand); }
.fork-card.edu::before { background: var(--accent); }
.fork-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: var(--shadow-card); }
.fork-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.fork-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.018em;
  line-height: 1.22;
  margin: 0 0 6px;
}
.fork-sub {
  font-size: 13.5px;
  color: var(--ink-mute);
  margin: 0 0 18px;
  letter-spacing: 0.01em;
}
.fork-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}
.fork-list li {
  padding: 8px 0;
  font-size: 14.5px;
  color: var(--ink);
  border-top: 1px solid var(--line-soft);
}
.fork-list li:first-child { border-top: 0; }
.fork-list li::before {
  content: "·";
  color: var(--accent);
  font-weight: 700;
  margin-right: 8px;
}
.fork-foot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand);
}
.fork-foot svg { width: 14px; height: 14px; }

/* course catalog */
.fz-catalog { padding-top: 24px; }
.course-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 12px 0 0;
}
@media (max-width: 820px) { .course-grid { grid-template-columns: 1fr; } }
.course-card {
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.course-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
.course-card.flagship { border-color: var(--ink); border-width: 1.5px; }
.course-card.spotlight { background: var(--accent-tint); border-color: var(--accent-soft); }

.cc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  min-height: 22px;
}
.cc-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--ink-mute);
}
.cc-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.cc-badge.ready { background: var(--accent-tint); color: var(--accent-2); }
.cc-badge.legal { background: #FEF3C7; color: #92400E; }
.cc-badge.new   { background: var(--brand-tint); color: var(--brand); }
.cc-badge.gap   { background: var(--ink); color: var(--bg); }

.cc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--ink-mute);
}
.cc-meta span { display: inline-flex; align-items: center; gap: 5px; }
.cc-meta svg { width: 13px; height: 13px; }

.course-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.018em;
  line-height: 1.22;
  margin: 4px 0 6px;
}
.cc-sub {
  font-size: 14px;
  font-style: italic;
  color: var(--ink-mute);
  margin: 0 0 14px;
}
.cc-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 16px;
}
.cc-topics {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 5px;
}
.cc-topics li {
  font-size: 13.5px;
  color: var(--ink-mute);
  padding-left: 16px;
  position: relative;
  line-height: 1.45;
}
.cc-topics li::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: var(--accent);
  font-weight: 700;
}

/* pillars (under Companies) */
.pillars-head { margin: 56px 0 18px; }
.pillars-head h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 820px) { .pillar-grid { grid-template-columns: 1fr; } }
.pillar-card {
  padding: 24px 26px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pillar-icon {
  width: 40px; height: 40px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--accent);
}
.pillar-icon svg { width: 20px; height: 20px; }
.pillar-card h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.pillar-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}

/* how we work — 4 steps */
.fz-how { padding-top: 24px; }
.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 940px) { .how-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .how-grid { grid-template-columns: 1fr; } }
.how-step {
  padding: 22px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
}
.hs-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--ink-mute);
}
.hs-icon {
  width: 38px; height: 38px;
  background: var(--accent-tint);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin: 10px 0 14px;
}
.hs-icon svg { width: 18px; height: 18px; }
.how-step h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.how-step p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: 0 0 12px;
}
.hs-when {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--brand);
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--brand-tint);
}

/* team */
.fz-team { padding-top: 24px; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 8px;
}
@media (max-width: 820px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
  padding: 28px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.team-card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.team-photo.big {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: #fff;
  flex-shrink: 0;
}
.team-photo.big.verena { background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%); }
.team-photo.big.luis   { background: linear-gradient(135deg, #047857 0%, #064E3B 100%); }
.team-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.015em;
}
.team-role {
  font-size: 13.5px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.team-card > p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.team-stations {
  list-style: none;
  padding: 14px 0 0;
  margin: 0;
  border-top: 1px solid var(--line-soft);
}
.team-stations li {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  padding: 4px 0;
  letter-spacing: 0.01em;
}

/* quotes */
.fz-quotes { padding-top: 24px; }
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 4px;
}
@media (max-width: 940px) { .quote-grid { grid-template-columns: 1fr; } }
.quote-card {
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
}
.quote-card::before {
  content: "";
  position: absolute;
  left: 26px; top: 12px;
  width: 22px; height: 2px;
  background: var(--accent);
  border-radius: 1px;
}
.quote-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 16px 0 14px;
}
.quote-by .qb-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
}
.quote-by .qb-role {
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-top: 2px;
}

/* FAQ */
.fz-faq { padding-top: 24px; }
.faq-list { margin-top: 8px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 10px;
  transition: border-color .15s ease;
}
.faq-item[open] { border-color: var(--line-strong); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.faq-item summary svg {
  width: 18px; height: 18px;
  color: var(--ink-mute);
  transition: transform .2s ease;
  flex-shrink: 0;
}
.faq-item[open] summary svg { transform: rotate(45deg); }
.faq-item p {
  margin: 0;
  padding: 0 22px 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-mute);
}

/* final CTA */
.fz-final {
  margin: 80px 0 56px;
  padding: 48px 40px;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-lg);
  text-align: center;
}
.fz-final h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 38px;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 14px;
  color: #fff;
}
.fz-final h2 .emph { color: #fff; font-style: normal; }
.fz-final p {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  max-width: 640px;
  margin: 0 auto 28px;
}
.final-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.btn.big { padding: 14px 22px; font-size: 15.5px; }
.fz-final .btn-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}
.fz-final .btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.fz-final .btn-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}
.fz-final .btn-ghost:hover { border-color: #fff; }
.final-note {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin: 0;
  letter-spacing: 0.02em;
}

/* footer override on Fazore */
.fz-foot { margin-top: 0; background: var(--bg-2); border-top: 1px solid var(--line); }
.fz-foot .foot-links a { color: var(--ink-mute); }
.fz-foot .foot-links a:hover { color: var(--ink); }
.fz-foot .foot-sig { color: var(--ink-mute); }

/* btn.compact for the header CTA */
.btn.compact { padding: 8px 14px; font-size: 13.5px; }

/* ============================================================
   MODULAR INK BLOCKS — Fazore landing rhythm
   Paper → ink → paper alternation. Three ink blocks per page:
   #wie (methodology), .fz-quotes (testimonial), .fz-final (CTA).
   Scope: only direct section content turns paper-cream; nested
   cards (.quote-card, .how-step) keep their own palette.
   ============================================================ */
.block--dark {
  background: var(--ink);
  color: var(--paper-primary);
  padding-block: var(--section-pad-fazore);
  position: relative;
}
.block--dark .section-eyebrow,
.block--dark .eyebrow {
  color: var(--accent-warm);
}
/* Section-head content sits on the dark surface — flip to paper */
.block--dark .section-head h2,
.block--dark .section-head h3,
.block--dark .section-head p,
.block--dark > h2,
.block--dark > h3,
.block--dark > p {
  color: var(--paper-primary);
}
.block--dark .section-lede,
.block--dark p.section-lede {
  color: var(--paper-secondary);
}
.block--dark a:not(.btn) {
  color: var(--accent-warm);
}
/* ink-block buttons: warm ochre primary, paper outline secondary */
.block--dark .btn-primary {
  background: var(--accent-warm);
  color: var(--ink);
  border-color: var(--accent-warm);
}
.block--dark .btn-primary:hover {
  background: var(--accent-warm-deep);
  border-color: var(--accent-warm-deep);
}
.block--dark .btn-ghost {
  color: var(--paper-primary);
  border-color: var(--paper-secondary);
  background: transparent;
}
.block--dark .btn-ghost:hover {
  border-color: var(--paper-primary);
}
.block--dark hr {
  border-color: var(--line-dark-1);
}
/* Quote cards inside ink block: transparent panel with paper-on-ink type */
.block--dark .quote-card {
  background: transparent;
  border: 1px solid var(--line-dark-2);
}
.block--dark .quote-card p {
  color: var(--paper-primary);
}
.block--dark .quote-by .qb-name {
  color: var(--paper-primary);
}
.block--dark .quote-by .qb-role {
  color: var(--paper-secondary);
}
/* how-step cards keep their paper background — they read as cards on a dark board.
   No overrides needed; the .how-step's own var(--surface) + var(--line) hold. */
.block--dark .final-note {
  color: var(--paper-mute);
}
/* Final CTA already has its own .fz-final styling at line ~4820.
   Strip the legacy bg/color so .block--dark wins cleanly. */
.fz-final.block--dark {
  background: var(--ink);
  margin: 0;
  padding-inline: 0;
  border-radius: 0;
}
.fz-final.block--dark h2 {
  color: var(--paper-primary);
}
.fz-final.block--dark p {
  color: var(--paper-secondary);
}
.fz-final.block--dark > .wrap {
  text-align: center;
}

/* Fazore section paper padding — bigger breathing room than Klartext */
.fazore-page section:not(.block--dark):not(.fz-hero) {
  padding-block: var(--section-pad-fazore);
}

/* ============================================================
   STUDY MODE — Klartext KI page utilities  (Phase 4)
   ============================================================
   Atmospheric contract: paper-dominant (75%), motion only on
   state change, no marketing surfaces. Applies to Dashboard.html,
   Lesson.html, Module.html, Mauer.html.
   ============================================================ */

/* ---------- Lesson sticky title bar ----------
   Slim bar that appears after the lesson hero leaves view. */
.lesson-titlebar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line-1);
  padding: 10px 0;
  transform: translateY(-100%);
  transition: transform var(--dur-moderate) var(--ease-enter);
  pointer-events: none;
}
.lesson-titlebar.show {
  transform: translateY(0);
  pointer-events: auto;
}
.lesson-titlebar .wrap {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--fs-body-sm);
}
.lesson-titlebar .lt-num {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--ink-mute);
  flex-shrink: 0;
}
.lesson-titlebar .lt-title {
  color: var(--ink-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.lesson-titlebar .lt-state {
  margin-left: auto;
  font-family: var(--font-body);
  color: var(--ink-secondary);
  font-size: var(--fs-body-sm);
  flex-shrink: 0;
}
.lesson-titlebar .lt-close {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink-mute);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color var(--dur-micro) var(--ease-hover);
}
.lesson-titlebar .lt-close:hover { color: var(--ink-primary); }
@media (max-width: 640px) {
  .lesson-titlebar .lt-state { display: none; }
}

/* ---------- Lesson pivot section ----------
   The visceral transition between Watch+Read and Do. Background
   warms into ochre-tinted paper. The room temperature changes. */
.lesson-pivot {
  background: linear-gradient(
    180deg,
    var(--paper-soft),
    color-mix(in srgb, var(--accent-warm) 10%, var(--paper-soft))
  );
  border-block: 1px solid color-mix(in srgb, var(--accent-warm) 40%, var(--line-1));
  padding-block: var(--space-10);
  padding-inline: var(--space-5);
  margin-block: var(--space-8);
  text-align: center;
  border-radius: var(--radius);
}
.lesson-pivot .pivot-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--accent-warm-deep);
  margin-bottom: var(--space-3);
}
.lesson-pivot h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
  margin: 0;
  color: var(--ink-primary);
  font-weight: 500;
}
.lesson-pivot h3 em {
  font-style: italic;
  color: var(--accent-warm-deep);
  font-weight: 400;
}

/* ---------- Lesson act labels ----------
   The 4-act rhythm: Enter, Watch+Read, Pivot, Do, Close.
   Acts are quiet sectional anchors, not loud headers. */
.lesson-act {
  scroll-margin-top: 80px;
}
.lesson-act > .act-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: var(--space-8) 0 var(--space-4);
}
.lesson-act > .act-label::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--line-2);
}

/* ---------- Module hierarchy boost ----------
   Dashboard journey + Module.html lessons:
   current 1.5× brighter, locked recedes 0.55 + grayscale,
   done quietly affirmed. */
.journey-step.current {
  transform: scale(1.04);
  transform-origin: left center;
}
.journey-step.current .label {
  font-size: 1.5em;
  font-weight: 500;
  color: var(--ink-primary);
  font-family: var(--font-display);
  letter-spacing: -0.015em;
}
.journey-step.current .num {
  color: var(--accent-electric);
}
.journey-step.locked {
  opacity: 0.55;
  filter: grayscale(0.3);
}
.journey-step.locked .label {
  color: var(--ink-mute);
}
.journey-step.done .label {
  color: var(--ink-secondary);
}

/* Module.html lesson states — apply the same visual logic */
.mod-block.current .mod-block-title { color: var(--ink-primary); }
.mod-block.locked {
  opacity: 0.62;
  filter: grayscale(0.25);
}
.mod-block.locked .mod-block-title { color: var(--ink-mute); }
.mod-block.done .mod-block-title { color: var(--ink-secondary); }

.lesson.current {
  border-color: color-mix(in srgb, var(--accent-electric) 35%, var(--line-1));
  background: color-mix(in srgb, var(--accent-electric) 3%, var(--paper));
}
.lesson.current .lesson-mark {
  background: var(--accent-electric);
  color: var(--paper-primary);
  animation: subtle-pulse 2.4s ease-in-out infinite;
}
@keyframes subtle-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-electric) 40%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-electric) 0%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .lesson.current .lesson-mark { animation: none; }
}

/* ---------- Codewort persistent strip (Dashboard) ----------
   Per Five Signature Artefacts #3 — the family code word
   follows the learner out of the screen and back into real life. */
.codewort-strip {
  margin: var(--space-5) 0 var(--space-6);
  padding: var(--space-3) var(--space-5);
  border: 1px dashed color-mix(in srgb, var(--accent-warm) 50%, var(--line-1));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent-warm) 5%, var(--paper));
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  color: var(--ink-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.codewort-strip i {
  width: 16px;
  height: 16px;
  color: var(--accent-warm-deep);
  flex-shrink: 0;
}
.codewort-strip em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--accent-warm-deep);
  font-size: 1.15em;
}
.codewort-strip a {
  margin-left: auto;
  color: var(--accent-electric);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-electric) 30%, transparent);
}
.codewort-strip a:hover { border-bottom-color: var(--accent-electric); }

/* ---------- Lesson honest length counter ----------
   "8 Min" with "du bist 0:00 hier" underneath. */
.lesson-length {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.lesson-length .ll-total {
  color: var(--ink-secondary);
  font-weight: 500;
}
.lesson-length .ll-actual {
  color: var(--ink-mute);
  font-size: 12px;
}

/* ---------- Cohort whisper — visible, never named ---------- */
.cohort-whisper {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--ink-mute);
  font-style: italic;
  margin-block: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.cohort-whisper i {
  width: 14px;
  height: 14px;
  color: var(--accent-warm-deep);
  opacity: 0.7;
}

/* ---------- Artefact-state progress (replaces percentage) ---------- */
.artefact-state {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--paper-soft);
  border: 1px solid var(--line-1);
  border-radius: var(--radius);
}
.artefact-state .as-label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.artefact-state .as-line {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink-primary);
  font-weight: 500;
}
.artefact-state .as-line strong {
  color: var(--accent-electric);
  font-weight: 600;
}
.artefact-state .as-note {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--ink-secondary);
}

/* ---------- Lesson mid-page anchor ----------
   Sits before the footer. Prev · Ask Luis · Next. */
.lesson-bottom-anchor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-10) 0 var(--space-8);
  padding: var(--space-5) 0;
  border-block: 1px solid var(--line-1);
}
.lesson-bottom-anchor a,
.lesson-bottom-anchor button.ask {
  color: var(--accent-electric);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border-bottom: 1px solid transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  background: transparent;
  padding-bottom: 2px;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-hover);
}
.lesson-bottom-anchor a:hover,
.lesson-bottom-anchor button.ask:hover {
  border-bottom-color: var(--accent-electric);
}
.lesson-bottom-anchor .ask {
  color: var(--ink-secondary);
}
.lesson-bottom-anchor .ask:hover {
  color: var(--ink-primary);
  border-bottom-color: var(--ink-secondary);
}
.lesson-bottom-anchor i {
  width: 14px;
  height: 14px;
}
@media (max-width: 640px) {
  .lesson-bottom-anchor {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
}

/* ---------- Demoted text-link CTAs (was buttons) ----------
   Per study-rule #4: one primary action per screen. Everything
   else becomes a quiet inline text link. */
.text-link-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-electric);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-electric) 30%, transparent);
  padding-bottom: 2px;
  transition: border-color var(--dur-micro) var(--ease-hover),
              color var(--dur-micro) var(--ease-hover);
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  cursor: pointer;
}
.text-link-cta:hover {
  border-bottom-color: var(--accent-electric);
}
.text-link-cta i {
  width: 14px;
  height: 14px;
}

/* ---------- Hide global footer on lesson pages ----------
   Per Study-Mode Rule 7: no footer below the lesson fold.
   The mid-page anchor (.lesson-bottom-anchor) replaces it.
   We keep the SHELL markers intact so sync-shell.py still works. */
body.lesson-page > footer.foot { display: none; }

/* ---------- Disabled "coming soon" affordance ----------
   Per architect sweep: dead href="#" links converted to a quiet
   disabled state with a "soon" tag — never silently broken. */
.text-link-cta.disabled,
.text-link-cta[aria-disabled="true"] {
  color: var(--ink-mute);
  border-bottom-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}
.text-link-cta.disabled .soon-tag,
.text-link-cta[aria-disabled="true"] .soon-tag,
.btn.disabled .soon-tag,
.btn[aria-disabled="true"] .soon-tag,
a[aria-disabled="true"] .soon-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--accent-warm-deep);
  margin-left: 8px;
}
a.disabled,
a[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}
.btn.disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}

.text-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  margin-top: var(--space-4);
}

/* ---------- Sticky compose bar (Mauer) ----------
   Per punch list: compose bar at the bottom of Mauer.html means
   only loud people find it. Make it sticky and always visible. */
.mauer-compose-sticky {
  position: sticky;
  bottom: var(--space-4);
  z-index: 30;
  margin: var(--space-6) auto;
  max-width: 760px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elev);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mauer-compose-sticky .mcs-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.mauer-compose-sticky .mcs-icon {
  width: 22px;
  height: 22px;
  color: var(--accent-warm-deep);
  flex-shrink: 0;
}
.mauer-compose-sticky .mcs-prompt {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink-primary);
  font-weight: 500;
}
.mauer-compose-sticky textarea {
  width: 100%;
  min-height: 56px;
  resize: vertical;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-sm);
  background: var(--paper-soft);
  padding: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--ink-primary);
  line-height: 1.5;
  transition: border-color var(--dur-micro) var(--ease-focus);
}
.mauer-compose-sticky textarea:focus {
  outline: 2px solid var(--accent-electric);
  outline-offset: 2px;
  border-color: var(--accent-electric);
}
.mauer-compose-sticky .mcs-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.mauer-compose-sticky .mcs-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
}
@media (max-width: 720px) {
  .mauer-compose-sticky {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: none;
    margin: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  }
  /* Pad the bottom of the q-stack so the last card isn't hidden behind the sticky bar */
  .q-stack { padding-bottom: 180px; }
}

/* ================================================================
   SIGNATURE ARTEFACTS — P5
   1) Tone Comparator
   2) EU AI Act Risk Ruler
   3) Codewort Vault
   4) Mauer Wall Physics
   5) Mini-PickAI Decision Card
================================================================ */

/* ============================================================
   (1) TONE COMPARATOR — Methode section, block--dark
   ============================================================ */
.tone-comparator-head {
  margin-top: var(--space-12);
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.tone-comparator-head .tc-eyebrow {
  color: var(--accent-warm);
  display: inline-block;
}
.tone-comparator-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.022em;
  margin: var(--space-3) 0 var(--space-3);
  color: var(--paper-primary);
}
.tone-comparator-head h3 em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent-warm);
}
.tone-comparator-head .tc-lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--paper-secondary);
  margin: 0;
}

.tone-comparator {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (max-width: 820px) {
  .tone-comparator { grid-template-columns: 1fr; }
}

.tone-card {
  position: relative;
  padding: var(--space-6) var(--space-6) var(--space-5);
  background: transparent;
  border: 1px solid var(--line-dark-2);
  border-left: 3px solid var(--line-dark-2);
  border-radius: var(--radius);
  color: var(--paper-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  cursor: pointer;
  outline: none;
  transition:
    color var(--dur-moderate) var(--ease-hover),
    border-color var(--dur-moderate) var(--ease-hover),
    background var(--dur-moderate) var(--ease-hover),
    transform var(--dur-moderate) var(--ease-hover);
}
.tone-card:focus-visible {
  outline: 2px solid var(--accent-electric-hi);
  outline-offset: 3px;
}

.tone-card .tone-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: inherit;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity var(--dur-moderate) var(--ease-hover),
    transform var(--dur-moderate) var(--ease-hover);
  min-height: 14px;
}
.tone-card .tone-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--paper-mute);
}
.tone-card .tone-quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.38;
  letter-spacing: -0.018em;
  margin: 0;
  color: var(--paper-primary);
  transition: color var(--dur-moderate) var(--ease-hover);
}
.tone-card .tone-foot {
  margin-top: auto;
  font-size: 13px;
  line-height: 1.45;
  color: var(--paper-mute);
  font-style: italic;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--dur-moderate) var(--ease-hover),
    transform var(--dur-moderate) var(--ease-hover);
}

/* Hover over the row: heat the two competitors, cool Fazore */
.tone-comparator:hover .tone-card:not(.tone-card--fazore),
.tone-comparator:focus-within .tone-card:not(.tone-card--fazore),
.tone-comparator .tone-card.is-active:not(.tone-card--fazore),
.tone-comparator.is-cycling .tone-card.is-active:not(.tone-card--fazore) {
  color: var(--warn);
  border-color: var(--warn);
  border-left-color: var(--warn);
  background: rgba(217, 122, 44, 0.06);
}
.tone-comparator:hover .tone-card--fazore,
.tone-comparator:focus-within .tone-card--fazore,
.tone-comparator .tone-card--fazore.is-active,
.tone-comparator.is-cycling .tone-card--fazore.is-active {
  color: var(--accent-electric-hi);
  border-color: var(--accent-electric);
  border-left-color: var(--accent-electric);
  background: rgba(31, 75, 255, 0.08);
  transform: translateY(-2px);
}

/* When the row is hovered/active at all, reveal labels and footers on ALL cards */
.tone-comparator:hover .tone-card .tone-label,
.tone-comparator:focus-within .tone-card .tone-label,
.tone-comparator .tone-card.is-active .tone-label,
.tone-comparator:hover .tone-card .tone-foot,
.tone-comparator:focus-within .tone-card .tone-foot,
.tone-comparator .tone-card.is-active .tone-foot {
  opacity: 1;
  transform: translateY(0);
}

/* While hovered, sibling tone-quote stays neutral on non-warm cards;
   Fazore quote also cools */
.tone-comparator:hover .tone-card--fazore .tone-quote,
.tone-comparator:focus-within .tone-card--fazore .tone-quote,
.tone-comparator .tone-card--fazore.is-active .tone-quote {
  color: var(--accent-electric-hi);
}
.tone-comparator:hover .tone-card:not(.tone-card--fazore) .tone-quote,
.tone-comparator:focus-within .tone-card:not(.tone-card--fazore) .tone-quote,
.tone-comparator .tone-card.is-active:not(.tone-card--fazore) .tone-quote {
  color: var(--warn);
}

/* The tag colour follows the state too */
.tone-comparator:hover .tone-card:not(.tone-card--fazore) .tone-tag,
.tone-comparator .tone-card.is-active:not(.tone-card--fazore) .tone-tag {
  color: var(--warn);
}
.tone-comparator:hover .tone-card--fazore .tone-tag,
.tone-comparator .tone-card--fazore.is-active .tone-tag {
  color: var(--accent-electric-hi);
}

@media (prefers-reduced-motion: reduce) {
  .tone-card,
  .tone-card .tone-label,
  .tone-card .tone-foot,
  .tone-card .tone-quote {
    transition: none;
  }
  .tone-comparator:hover .tone-card--fazore,
  .tone-comparator:focus-within .tone-card--fazore {
    transform: none;
  }
}

/* ============================================================
   (2) RISK RULER — Course 02 card
   ============================================================ */
.risk-ruler {
  margin: var(--space-5) 0 var(--space-5);
  padding: var(--space-4) var(--space-4) var(--space-3);
  background: var(--paper-soft);
  border: 1px solid var(--line-1);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.rr-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.rr-eyebrow-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-mute);
}
.rr-current {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-warm-deep);
  transition: color var(--dur-moderate) var(--ease-hover);
}
.rr-current-num {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Recolour the rr-current label per active tier */
.risk-ruler[data-active="0"] .rr-current { color: var(--ink-mute); }
.risk-ruler[data-active="1"] .rr-current { color: var(--ok); }
.risk-ruler[data-active="2"] .rr-current { color: var(--accent-warm-deep); }
.risk-ruler[data-active="3"] .rr-current { color: var(--warn); }
.risk-ruler[data-active="4"] .rr-current { color: var(--error); }

/* Track */
.rr-track {
  position: relative;
  height: 28px;
  padding-top: 12px;
}
.rr-track::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 12px;
  height: 4px;
  background: var(--line-2);
  border-radius: 2px;
}
.rr-track-fill {
  position: absolute;
  left: 0; top: 12px;
  height: 4px;
  width: 50%;
  background: var(--accent-warm-deep);
  border-radius: 2px;
  transition:
    width var(--dur-moderate) var(--ease-hover),
    background-color var(--dur-moderate) var(--ease-hover);
}
.risk-ruler[data-active="0"] .rr-track-fill { background: var(--ink-mute); }
.risk-ruler[data-active="1"] .rr-track-fill { background: var(--ok); }
.risk-ruler[data-active="2"] .rr-track-fill { background: var(--accent-warm-deep); }
.risk-ruler[data-active="3"] .rr-track-fill { background: var(--warn); }
.risk-ruler[data-active="4"] .rr-track-fill { background: var(--error); }

.rr-ticks {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: var(--space-1);
}
.rr-tier {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-mute);
  text-align: center;
  cursor: pointer;
  padding: 6px 2px 0;
  position: relative;
  user-select: none;
  transition: color var(--dur-moderate) var(--ease-hover);
}
.rr-tier::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 8px;
  background: var(--line-2);
}
.risk-ruler[data-active="0"] .rr-tier[data-tier="0"],
.risk-ruler[data-active="1"] .rr-tier[data-tier="1"],
.risk-ruler[data-active="2"] .rr-tier[data-tier="2"],
.risk-ruler[data-active="3"] .rr-tier[data-tier="3"],
.risk-ruler[data-active="4"] .rr-tier[data-tier="4"] {
  color: var(--ink-primary);
  font-weight: 700;
}

/* Hide the native range input visually but keep it interactive — let it lie
   over the track for a draggable thumb experience */
.rr-input {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 100%;
  margin: -38px 0 0;     /* pull up over the track */
  height: 28px;
  background: transparent;
  cursor: grab;
  outline: none;
  z-index: 2;
}
.rr-input:focus-visible {
  outline: 2px solid var(--accent-electric);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.rr-input::-webkit-slider-runnable-track {
  height: 28px;
  background: transparent;
}
.rr-input::-moz-range-track {
  height: 28px;
  background: transparent;
}

/* The thumb — a pill labelled with the tier number via ::after on its sibling.
   On webkit we style the thumb itself. */
.rr-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--accent-warm-deep);
  box-shadow: 0 4px 10px rgba(10, 27, 61, 0.18);
  margin-top: -10px;
  cursor: grab;
  transition: border-color var(--dur-moderate) var(--ease-hover), transform var(--dur-micro) var(--ease-hover);
}
.rr-input::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.08); }
.rr-input::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--accent-warm-deep);
  box-shadow: 0 4px 10px rgba(10, 27, 61, 0.18);
  cursor: grab;
  transition: border-color var(--dur-moderate) var(--ease-hover);
}
.risk-ruler[data-active="0"] .rr-input::-webkit-slider-thumb { border-color: var(--ink-mute); }
.risk-ruler[data-active="1"] .rr-input::-webkit-slider-thumb { border-color: var(--ok); }
.risk-ruler[data-active="2"] .rr-input::-webkit-slider-thumb { border-color: var(--accent-warm-deep); }
.risk-ruler[data-active="3"] .rr-input::-webkit-slider-thumb { border-color: var(--warn); }
.risk-ruler[data-active="4"] .rr-input::-webkit-slider-thumb { border-color: var(--error); }
.risk-ruler[data-active="0"] .rr-input::-moz-range-thumb { border-color: var(--ink-mute); }
.risk-ruler[data-active="1"] .rr-input::-moz-range-thumb { border-color: var(--ok); }
.risk-ruler[data-active="2"] .rr-input::-moz-range-thumb { border-color: var(--accent-warm-deep); }
.risk-ruler[data-active="3"] .rr-input::-moz-range-thumb { border-color: var(--warn); }
.risk-ruler[data-active="4"] .rr-input::-moz-range-thumb { border-color: var(--error); }

.rr-explainer {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-primary);
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--paper);
  border-left: 3px solid var(--accent-warm-deep);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: border-color var(--dur-moderate) var(--ease-hover);
}
.risk-ruler[data-active="0"] .rr-explainer { border-left-color: var(--ink-mute); }
.risk-ruler[data-active="1"] .rr-explainer { border-left-color: var(--ok); }
.risk-ruler[data-active="2"] .rr-explainer { border-left-color: var(--accent-warm-deep); }
.risk-ruler[data-active="3"] .rr-explainer { border-left-color: var(--warn); }
.risk-ruler[data-active="4"] .rr-explainer { border-left-color: var(--error); }

.rr-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.rr-foot-arrow {
  letter-spacing: 0;
  color: var(--ink-mute);
  opacity: 0.7;
}

@media (max-width: 540px) {
  .rr-tier { font-size: 9px; letter-spacing: 0.04em; }
  .rr-track { padding-top: 14px; }
  .rr-input { margin-top: -40px; }
}
@media (prefers-reduced-motion: reduce) {
  .rr-current,
  .rr-track-fill,
  .rr-tier,
  .rr-input::-webkit-slider-thumb,
  .rr-input::-moz-range-thumb,
  .rr-explainer { transition: none; }
}

/* ============================================================
   (3) CODEWORT VAULT — overlay + entry
   ============================================================ */
body.vault-locked { overflow: hidden; }
body.vault-locked .code-page,
body.vault-locked main,
body.vault-locked footer.foot { opacity: 0; pointer-events: none; }
body.vault-open .code-page {
  opacity: 1;
  animation: vault-body-rise var(--dur-signature) var(--ease-enter) both;
}
@keyframes vault-body-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vault-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--ink-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  opacity: 1;
  transition: opacity var(--dur-signature) var(--ease-exit);
}
.vault-overlay.dismissed {
  opacity: 0;
  pointer-events: none;
}
.vault-overlay.vault-skip {
  transition-duration: 0ms;
  opacity: 0;
  pointer-events: none;
}

/* Subtle paper-grain over navy via radial gradient — atmospheric only */
.vault-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(31, 75, 255, 0.18), transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(232, 180, 92, 0.10), transparent 55%);
  pointer-events: none;
}

.vault-card {
  position: relative;
  max-width: 520px;
  width: 100%;
  text-align: center;
  color: var(--paper-primary);
  z-index: 1;
}
.vault-card .vault-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-electric-hi);
  margin-bottom: var(--space-4);
}
.vault-card .vault-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0 0 var(--space-3);
}
.vault-card .vault-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent-warm);
}
.vault-card .vault-hint {
  font-size: 15px;
  line-height: 1.55;
  color: var(--paper-secondary);
  margin: 0 auto var(--space-6);
  max-width: 380px;
}

#vaultForm {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}
.vault-input {
  width: 100%;
  max-width: 460px;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--accent-electric);
  color: var(--paper-primary);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-align: center;
  padding: var(--space-3) var(--space-2);
  outline: none;
  caret-color: var(--accent-electric-hi);
  animation: vault-pulse 1.8s ease-in-out infinite;
}
.vault-input::placeholder {
  color: var(--paper-mute);
  letter-spacing: 0.4em;
  opacity: 0.6;
}
.vault-input:focus { border-bottom-color: var(--accent-electric-hi); }

@keyframes vault-pulse {
  0%, 100% { box-shadow: 0 6px 0 -6px rgba(31, 75, 255, 0.0); }
  50%      { box-shadow: 0 6px 0 -2px rgba(31, 75, 255, 0.55); }
}

.vault-card .vault-foot {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-mute);
  margin: 0;
}

.vault-overlay.shake .vault-card {
  animation: vault-shake 0.32s ease-out;
}
@keyframes vault-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Welcome banner after entry */
.vault-welcome {
  margin: 0 0 var(--space-7);
  text-align: left;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--line-1);
}
.vault-welcome-eye {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-warm-deep);
  margin-bottom: var(--space-2);
}
.vault-welcome-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink-primary);
  margin: 0 0 var(--space-3);
}
.vault-welcome-h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent-electric);
}
.vault-welcome-lede {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-secondary);
  margin: 0;
  max-width: 540px;
}

@media (prefers-reduced-motion: reduce) {
  .vault-overlay { transition: opacity 0.01ms; }
  .vault-input   { animation: none; }
  body.vault-open .code-page { animation: none; }
  .vault-overlay.shake .vault-card { animation: none; }
}

/* ============================================================
   (4) MAUER WALL PHYSICS — paper-textured, pinned questions
   ============================================================ */
.q-card {
  --rot: 0deg;
  transform: rotate(var(--rot));
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.015)),
    var(--paper);
  box-shadow:
    0 1px 1px rgba(10, 27, 61, 0.04),
    0 10px 24px -14px rgba(10, 27, 61, 0.22);
  transition:
    transform var(--dur-moderate) var(--ease-lesson),
    box-shadow var(--dur-moderate) var(--ease-hover),
    border-color .15s ease;
}
/* The pin — small navy push-pin centred at the top edge */
.q-card::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--ink-secondary), var(--ink-deep) 70%);
  transform: translateX(-50%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255,255,255,0.25);
  z-index: 2;
  pointer-events: none;
}
.q-card:hover {
  box-shadow:
    0 1px 2px rgba(10, 27, 61, 0.06),
    0 16px 32px -16px rgba(10, 27, 61, 0.28);
}

/* Pinned (brass thumbtack) — featured question of the week */
.q-card.pinned {
  border-color: var(--accent-warm);
  box-shadow:
    0 1px 2px rgba(10, 27, 61, 0.05),
    0 14px 30px -14px rgba(184, 132, 58, 0.35);
}
.q-card.pinned::before {
  width: 16px;
  height: 16px;
  top: -8px;
  background:
    radial-gradient(circle at 35% 25%, #F4D27A 0%, var(--accent-warm) 45%, var(--accent-warm-deep) 90%);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    0 0 0 2px rgba(232, 180, 92, 0.15);
}

/* The Luis/Verena pinned-quote note that sits just above the pinned card */
.q-pin-note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--accent-warm-deep);
  text-align: center;
  margin: var(--space-5) 0 calc(-1 * var(--space-1));
  letter-spacing: -0.005em;
}

/* "Ich auch" nudge — the card visibly rises a few px */
.q-card.nudge {
  animation: q-nudge-up var(--dur-moderate) var(--ease-lesson);
}
@keyframes q-nudge-up {
  0%   { transform: rotate(var(--rot)) translateY(0); }
  55%  { transform: rotate(var(--rot)) translateY(-10px); }
  100% { transform: rotate(var(--rot)) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .q-card { transform: none; transition: none; }
  .q-card.nudge { animation: none; }
}

/* ============================================================
   (5) MINI-PICKAI DECISION CARD
   ============================================================ */
.pick-decision-section {
  margin-top: var(--space-7);
}
.pick-decision {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (max-width: 880px) {
  .pick-decision { grid-template-columns: 1fr; }
}

/* Toggles column */
.pd-toggles {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.pd-toggle {
  border: 1px solid var(--line-1);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4) var(--space-4);
  margin: 0;
  background: var(--paper);
}
.pd-toggle legend {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--ink-primary);
  padding: 0 var(--space-1);
  margin-bottom: var(--space-2);
}
.pd-toggle {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pd-toggle > label,
.pd-toggle label:not(:has(legend)) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  cursor: pointer;
  padding: 8px 14px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink-secondary);
  transition:
    border-color var(--dur-micro) var(--ease-hover),
    color var(--dur-micro) var(--ease-hover),
    background var(--dur-micro) var(--ease-hover);
}
.pd-toggle label:hover {
  border-color: var(--ink-secondary);
  color: var(--ink-primary);
}
.pd-toggle input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-mute);
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--dur-micro), background var(--dur-micro);
}
.pd-toggle input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent-electric);
  outline-offset: 2px;
}
.pd-toggle input[type="radio"]:checked {
  border-color: var(--accent-electric);
  background: radial-gradient(circle, var(--accent-electric) 0 45%, transparent 50%);
}
.pd-toggle label:has(input[type="radio"]:checked) {
  border-color: var(--accent-electric);
  background: rgba(31, 75, 255, 0.06);
  color: var(--ink-primary);
  font-weight: 500;
}

.pd-toggle--triple { /* triple option still flows column on mobile */ }

/* Group buttons into a row */
.pd-toggle {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.pd-toggle legend {
  flex-basis: 100%;
  margin-bottom: var(--space-2);
}

/* The decision card — feels like a business card */
.pd-card {
  position: sticky;
  top: var(--space-7);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5), rgba(0,0,0,0.02)),
    var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-5) var(--space-4);
  box-shadow:
    0 1px 2px rgba(10, 27, 61, 0.06),
    0 16px 36px -18px rgba(10, 27, 61, 0.24);
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: box-shadow var(--dur-moderate) var(--ease-hover);
}
.pd-card.pd-flash {
  animation: pd-flash var(--dur-moderate) var(--ease-hover);
}
@keyframes pd-flash {
  0%   { box-shadow: 0 1px 2px rgba(10, 27, 61, 0.06), 0 16px 36px -18px rgba(10, 27, 61, 0.24); }
  50%  { box-shadow: 0 1px 2px rgba(31, 75, 255, 0.18), 0 0 0 3px rgba(31, 75, 255, 0.10), 0 16px 36px -18px rgba(10, 27, 61, 0.24); }
  100% { box-shadow: 0 1px 2px rgba(10, 27, 61, 0.06), 0 16px 36px -18px rgba(10, 27, 61, 0.24); }
}
.pd-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line-1);
}
.pd-card-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.022em;
  color: var(--ink-primary);
}
.pd-card-brand em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent-electric);
}
.pd-card-type {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: right;
}
.pd-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pd-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-warm-deep);
  margin: 0;
  font-weight: 700;
}
.pd-card-line {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.022em;
  color: var(--ink-primary);
  margin: 0;
}
.pd-card-tool {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--accent-electric);
  display: inline-block;
  padding: 0 2px;
  transition: color var(--dur-moderate) var(--ease-hover);
}
.pd-card-tool-dot { color: var(--ink-primary); }
.pd-card-memory { color: var(--ink-secondary); font-weight: 400; font-size: 17px; }
.pd-card-return { color: var(--accent-warm-deep); font-style: italic; font-weight: 400; font-size: 16px; }
.pd-card-because {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-mute);
  margin: var(--space-2) 0 0;
  padding-top: var(--space-3);
  border-top: 1px dashed var(--line-1);
}
.pd-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-1);
}
.pd-card-sig { font-style: italic; font-family: var(--font-display); }

.pd-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.pd-disclaimer {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--ink-mute);
  margin: 0;
  line-height: 1.55;
  font-style: italic;
}

@media (max-width: 880px) {
  .pd-card { position: static; }
  .pd-actions { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-card,
  .pd-card.pd-flash,
  .pd-toggle label,
  .pd-toggle input[type="radio"] { transition: none; animation: none; }
}

/* Print: emit only the wallet card */
@media print {
  body * { visibility: hidden; }
  .pd-card, .pd-card * { visibility: visible; }
  .pd-card {
    position: absolute;
    top: 10mm;
    left: 10mm;
    width: 90mm;
    box-shadow: 0 0 0 1px var(--line-2);
    page-break-inside: avoid;
  }
}

/* Klartext KI top-bar course-entry link */
.top-course {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-secondary);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-1);
  transition: color var(--dur-micro) var(--ease-hover), border-color var(--dur-micro) var(--ease-hover);
}
.top-course:hover,
.top-course:focus-visible {
  color: var(--accent-electric);
  border-color: var(--accent-electric);
}
.top-course i {
  width: 14px;
  height: 14px;
}
@media (max-width: 760px) {
  .top-course span { display: none; }
  .top-course { padding: 6px 8px; }
}