/* techroot design system — Calm Editorial (ADR 0012 + Amendment).
   Visual language ported faithfully from Chris's designer artifact
   (docs/assets/techroot-landing-page.html) into our token NAMES so
   every existing component (lessons, self-check, legal, signup)
   inherits unchanged. Self-hosted fonts, no CDN, no build, SSR only.
   Deliberately omitted (honesty/scope): testimonials, pricing. */

/* Self-hosted fonts (ADR 0012). woff2 are an ops drop-in — see
   web/static/fonts/README.md. Until present, the system stack renders
   and the page stays designed. */
@font-face {
  font-family: "Source Serif 4";
  src: url("/static/fonts/source-serif.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/static/fonts/ibm-plex-sans.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color — warm paper, ink, deep-blue accent (artifact palette) */
  --color-bg:            #efe7d6;
  --color-bg-warm:       #efeadc;
  --color-bg-deep:       #1c2024;  /* terminal mock */
  --color-surface:       #efeadc;  /* = bg-warm; inherited by older blocks */
  --color-text:          #161513;
  --color-text-soft:     #3a3733;
  --color-text-muted:    #6b665d;
  --color-border:        #d9d2bf;
  --color-border-soft:   #e6dfca;
  --color-border-strong: #cfc6ad;
  --color-primary:       #6b3a1f;  /* warm root-brown (favicon) */
  --color-primary-hover: #532c17;
  --color-on-primary:    #ffffff;
  --color-success:       #1d6f42;  /* calm "solved" — never Duolingo */
  --color-success-bg:    #e8efe2;

  /* Typography — self-hosted first, quality system fallback */
  --font-display: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-sans:    "IBM Plex Sans", ui-sans-serif, system-ui,
                  -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono",
                  Consolas, Menlo, monospace;

  /* Scale (kept for inner pages / components) */
  --text-xs:    0.8125rem;
  --text-sm:    0.9375rem;
  --text-base:  1rem;
  --text-lg:    1.1875rem;
  --text-xl:    clamp(1.4rem, 1.1rem + 1.3vw, 1.9rem);
  --text-2xl:   clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  --text-3xl:   clamp(2.5rem, 1.7rem + 3.9vw, 5rem);
  --line:       1.55;
  --line-tight: 1.1;

  /* Spacing scale (kept; components depend on it) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  --measure: 45rem;            /* ~720px reading column */
  --wrap:    1320px;
  --gutter:  clamp(20px, 4vw, 56px);
  --radius:  6px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Guard: the full-bleed scene band uses 100vw; clip neutralises the
     scrollbar gutter without creating a scroll container. */
  overflow-x: clip;
}
::selection { background: var(--color-primary); color: #fff; }
a { color: inherit; }

/* Skip link — off-screen until focused (keyboard a11y). */
.skip-link { position: absolute; left: -9999px; top: var(--space-2); z-index: 1100; }
.skip-link:focus {
  left: var(--space-3);
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  text-decoration: none;
}

/* ───────── shell ───────── */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.col  { max-width: var(--measure); margin: 0 auto; }
/* .container — inner pages (lesson/module/legal) reading column */
.container { width: 100%; max-width: var(--measure); margin-inline: auto; padding: 0 var(--gutter); }
main { display: block; padding-block: var(--space-5); }
main.container, main > .container { padding-block: var(--space-5); }

/* ───────── nav ───────── */
nav.top {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border-soft);
}
nav.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 32px; }
.brand {
  font-family: var(--font-display);
  font-weight: 700; font-size: 20px; letter-spacing: -0.01em;
  color: var(--color-text); text-decoration: none;
  display: flex; align-items: center; gap: 10px;
}
.brand .glyph { width: 22px; height: 22px; display: inline-grid; place-items: center; color: var(--color-primary); }
.brand .glyph svg { width: 100%; height: 100%; }
.nav-links { display: flex; gap: 28px; align-items: center; font-size: 14px; color: var(--color-text-soft); }
.nav-links a { text-decoration: none; color: inherit; padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .15s; }
.nav-links a:hover { border-color: var(--color-primary); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
@media (max-width: 720px) { .nav-links { display: none; } }

/* ───────── buttons ───────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 500; font-size: 15px; line-height: 1;
  padding: 14px 22px; border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  background: var(--color-primary); color: #fff;
  transition: transform .12s ease, background .15s, border-color .15s;
}
.btn:hover { background: var(--color-primary-hover); color: #fff; }
.btn.ghost { background: transparent; color: var(--color-text); border-color: var(--color-border); }
.btn.ghost:hover { border-color: var(--color-text); background: transparent; }
.btn.sm { padding: 10px 14px; font-size: 13px; }
.btn .arrow { transition: transform .15s; }
.btn:hover .arrow { transform: translateX(3px); }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn:disabled { opacity: 0.6; cursor: progress; }

/* ───────── eyebrow ───────── */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-primary); font-weight: 500;
  margin: 0 0 18px;
}
.eyebrow::before { content: ""; display: inline-block; width: 34px; height: 1px; background: currentColor; }

/* ───────── typography (inner pages + base) ───────── */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600; line-height: var(--line-tight);
  letter-spacing: -0.02em; margin: 0 0 var(--space-3);
  text-wrap: pretty;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
p  { margin: 0 0 var(--space-3); max-width: var(--measure); }
.lead  { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text-soft); }
.muted { color: var(--color-text-muted); }

code {
  font-family: var(--font-mono); font-size: 0.875em;
  background: var(--color-bg-warm); border: 1px solid var(--color-border);
  border-radius: 4px; padding: 0.1em 0.35em; word-break: break-word;
}
pre {
  font-family: var(--font-mono); font-size: 0.9375rem; line-height: 1.5;
  background: var(--color-bg-warm); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: var(--space-3);
  margin: 0 0 var(--space-3); overflow-x: auto;
}
pre code { background: none; border: 0; padding: 0; font-size: inherit; }
a:hover { color: var(--color-primary); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ───────── hero ───────── */
section.hero { padding: 96px 0 72px; position: relative; }
.hero h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(40px, 6.2vw, 80px); line-height: 1.04;
  letter-spacing: -0.02em; margin: 18px 0 28px; color: var(--color-text);
  text-wrap: pretty; max-width: 23ch;
}
.hero h1 em { font-style: italic; font-weight: 500; color: var(--color-primary); }
.hero .lede {
  font-family: var(--font-display); font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55; color: var(--color-text-soft);
  max-width: 900px; margin-bottom: 36px; text-wrap: pretty;
}
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 20px; }
.hero .micro { font-size: 13.5px; color: var(--color-text-muted); max-width: 520px; }
.hero .micro a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.hero-strip {
  margin-top: 72px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
.hero-strip > div { padding: 24px 28px; border-right: 1px solid var(--color-border); }
.hero-strip > div:last-child { border-right: 0; }
.hero-strip .num { font-family: var(--font-display); font-weight: 500; font-size: 34px; letter-spacing: -0.01em; color: var(--color-text); line-height: 1; margin-bottom: 8px; }
.hero-strip .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.hero-strip .src { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-text-muted); margin-top: 6px; opacity: 0.8; }
@media (max-width: 800px) {
  .hero-strip { grid-template-columns: 1fr; }
  .hero-strip > div { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .hero-strip > div:last-child { border-bottom: 0; }
}

/* ───────── section base ───────── */
section.sec { padding: 88px 0; border-top: 1px solid var(--color-border-soft); }
section.sec.warm { background: var(--color-bg-warm); }
.sec-head { margin-bottom: 48px; }
.sec-head h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; letter-spacing: -0.02em; margin: 14px 0 18px; text-wrap: pretty; }
.sec-head p.kicker { font-family: var(--font-display); font-size: 19px; line-height: 1.55; color: var(--color-text-soft); max-width: 600px; }
/* opt-in centered section head (markup: class="sec-head centered") */
.sec-head.centered { text-align: center; }
.sec-head.centered .eyebrow { justify-content: center; }
.sec-head.centered p.kicker { margin-inline: auto; }

/* ───────── problem list ───────── */
.problem-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--color-border); margin: 0; padding: 0; list-style: none; }
.problem-list > li { list-style: none; display: grid; grid-template-columns: 120px 1fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--color-border); align-items: start; }
.problem-list .ix { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; color: var(--color-primary); padding-top: 6px; }
.problem-list h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.25; margin: 0 0 8px; letter-spacing: -0.01em; }
.problem-list p { margin: 0; color: var(--color-text-soft); font-size: 16.5px; max-width: 580px; }
@media (max-width: 640px) { .problem-list > li { grid-template-columns: 1fr; gap: 6px; } .problem-list .ix { padding-top: 0; } }

/* ───────── steps ───────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--color-border); }
.steps > div { padding: 32px 28px 36px; border-right: 1px solid var(--color-border); position: relative; }
.steps > div:last-child { border-right: 0; }
.steps .step-n { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; color: var(--color-text-muted); margin-bottom: 24px; }
.steps .step-icon { width: 38px; height: 38px; border: 1px solid var(--color-text); border-radius: 50%; display: grid; place-items: center; margin-bottom: 20px; color: var(--color-text); }
.steps h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.25; margin: 0 0 10px; }
.steps p { margin: 0; color: var(--color-text-soft); font-size: 15.5px; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } .steps > div { border-right: 0; border-bottom: 1px solid var(--color-border); } .steps > div:last-child { border-bottom: 0; } }

/* ───────── modules (real catalog) ───────── */
.modules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--color-border); }
.module { padding: 28px; border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: background .15s; }
.module:hover { background: color-mix(in srgb, var(--color-primary) 5%, transparent); }
.module:nth-child(2n) { border-right: 0; }
.module .mhead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.module .code { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--color-primary); }
.module .dur { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-text-muted); }
.module h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.22; margin: 0; letter-spacing: -0.005em; }
.module p { margin: 0; color: var(--color-text-soft); font-size: 15px; }
@media (max-width: 720px) { .modules { grid-template-columns: 1fr; } .module { border-right: 0 !important; } }

/* ───────── sample lesson demo (.demo — NOT .lesson, avoids the
   lesson-page collision) ───────── */
.demo { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .demo { grid-template-columns: 1fr; } }
.demo-copy h3 { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 16px; }
.demo-copy p { color: var(--color-text-soft); font-size: 16.5px; margin: 0 0 14px; }
.demo-copy .bullet { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--color-border); }
.demo-copy .bullet:last-child { border-bottom: 1px solid var(--color-border); }
.demo-copy .bullet .b-ix { font-family: var(--font-mono); font-size: 11px; color: var(--color-primary); letter-spacing: 0.08em; padding-top: 3px; }
.demo-copy .bullet b { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; display: block; margin-bottom: 2px; }
.demo-copy .bullet span { color: var(--color-text-soft); font-size: 15px; }
.terminal { background: var(--color-bg-deep); color: #ece6d8; border-radius: 8px; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.05); }
.terminal .tbar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: #252a2f; border-bottom: 1px solid #0f1215; }
.terminal .tbar .dot { width: 11px; height: 11px; border-radius: 50%; background: #3a4046; }
.terminal .tbar .dot.r { background: #e26a5b; } .terminal .tbar .dot.y { background: #e3b341; } .terminal .tbar .dot.g { background: #5fb56f; }
.terminal .tbar .title { margin-left: auto; font-size: 11.5px; color: #8f8a7e; letter-spacing: 0.04em; }
.terminal .body { padding: 20px 22px 24px; white-space: pre-wrap; margin: 0; color: #ece6d8; }
.terminal .prompt { color: #662424; }
.terminal .cmd { color: #4e4b4b; font-weight: 500; }
.terminal .out { color: #c7c0ad; }
.terminal .hint { color: #a99d85; font-style: italic; }
.terminal .ok { color: #86d091; }
.terminal .blink { display: inline-block; width: 8px; height: 15px; background: #e8e2d4; vertical-align: -2px; margin-left: 2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ───────── faq ───────── */
.faq { border-top: 1px solid var(--color-border); }
.faq details { border-bottom: 1px solid var(--color-border); padding: 20px 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: start; gap: 20px; font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.005em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { flex: 0 0 auto; width: 22px; height: 22px; display: grid; place-items: center; color: var(--color-primary); font-family: var(--font-mono); font-size: 18px; transition: transform .2s; line-height: 1; }
.faq details[open] summary .plus { transform: rotate(45deg); }
.faq .answer { margin-top: 14px; color: var(--color-text-soft); font-size: 16px; max-width: 640px; }

/* ───────── final cta ───────── */
.final-cta { padding: 120px 0 96px; text-align: center; border-top: 1px solid var(--color-border-soft); }
.final-cta h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(36px, 5vw, 64px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 auto 18px; max-width: 760px; text-wrap: balance; }
.final-cta p { font-family: var(--font-display); font-size: 20px; color: var(--color-text-soft); max-width: 560px; margin: 0 auto 32px; }
.final-cta .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.final-cta .micro { font-size: 13.5px; color: var(--color-text-muted); margin-top: 20px; }

/* ───────── footer — deliberately simple: one row (brand + inline
   links), one quiet legal line. No columns, no dead gaps. ───────── */
footer.site { padding: 40px 0; background: var(--color-bg); }
footer.site .f-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
footer.site .brand { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--color-text); text-decoration: none; }
footer.site .f-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; }
footer.site .f-links a { color: var(--color-text-soft); text-decoration: none; }
footer.site .f-links a:hover { color: var(--color-primary); }
footer.site .legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--color-border-soft); font-size: 12px; color: var(--color-text-muted); font-family: var(--font-mono); letter-spacing: 0.06em; max-width: 100% !important; }

/* ───────── card (inner pages: legal scaffolds) ───────── */
.card { border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-5); background: var(--color-bg-warm); margin-block: var(--space-4); }
.card > :last-child { margin-bottom: 0; }
.checks { margin: 0 0 var(--space-3); padding-left: 1.25rem; }
.checks li { margin-bottom: var(--space-2); }

/* Module + lesson lists (inner pages) */
.module-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.module-list .card h2 { margin-bottom: var(--space-1); }
.module-list .card h2 a { text-decoration: none; }
.lesson-list { padding-left: 1.25rem; }
.lesson-list li { margin-bottom: var(--space-2); }

/* Scene takeover — <tr-scene> overlay owns the viewport while it
   plays; :not(:defined) paints the stage before upgrade. */
.tr-scene-lock { overflow: hidden; }
tr-scene:not(:defined) { position: fixed; inset: 0; z-index: 1000; background: #10161b; }

/* Lesson view */
.lesson .step { margin-block: var(--space-4); }

/* ::summary (ADR 0007) */
.step--summary { background: var(--color-bg-warm); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4); }
.step--summary::before { content: "Zusammenfassung"; display: block; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.step--summary > :last-child { margin-bottom: 0; }

/* ::protips (ADR 0008) */
.step--protips { background: var(--color-bg-warm); border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); border-radius: var(--radius); padding: var(--space-4); }
.step--protips::before { content: "Profi-Tipp"; display: block; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-2); }
.step--protips > :last-child { margin-bottom: 0; }

/* Interaction-gate (ADR 0009) */
.tr-gated-hidden { display: none; }
.tr-revealed { animation: tr-reveal 0.4s ease both; }
@keyframes tr-reveal { from { opacity: 0; transform: translateY(0.4rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .tr-revealed { animation: none; }
  .terminal .blink { animation: none; }
}

/* Soft escape (ADR 0006/0009) */
.tr-escape { margin: var(--space-3) 0; }
.tr-escape-btn { font: inherit; font-size: 0.9375rem; cursor: pointer; background: none; border: 0; padding: 0.2rem 0; color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 2px; }
.tr-escape-btn:hover { color: var(--color-text); }
.tr-escape-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* "Neu hier?" gloss disclosure (ADR 0009) */
.tr-gloss { margin: var(--space-3) 0; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg-warm); padding: 0 var(--space-3); }
.tr-gloss > summary { cursor: pointer; padding: var(--space-2) 0; color: var(--color-primary); font-size: 0.9375rem; list-style: none; }
.tr-gloss > summary::-webkit-details-marker { display: none; }
.tr-gloss > summary::before { content: "▸ "; }
.tr-gloss[open] > summary::before { content: "▾ "; }
.tr-gloss[open] { padding-bottom: var(--space-2); }
.tr-gloss dl { margin: 0 0 var(--space-2); }
.tr-gloss dt { font-family: var(--font-mono); font-size: 0.9em; margin-top: var(--space-2); }
.tr-gloss dd { margin: 0; color: var(--color-text-muted); }
.exercise-stub { margin-top: var(--space-3); padding: var(--space-3); border: 1px dashed var(--color-border); border-radius: var(--radius); background: var(--color-bg-warm); }
.exercise-stub pre { margin: var(--space-2) 0 0; padding: var(--space-2); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); overflow-x: auto; }
/* Lesson navigation — "Weiter" is a prominent primary action so it's
   obvious how to continue; prev stays a quiet back-link. */
.lesson-nav { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.lesson-prev { color: var(--color-text-muted); text-decoration: none; font-size: 14px; }
.lesson-prev:hover { color: var(--color-primary); }
.lesson-prev--empty { flex: 0 0 1px; }
.lesson-next { margin-left: auto; }
.lesson-back { margin-top: var(--space-3); font-size: 14px; }
.lesson-back a { color: var(--color-text-muted); text-decoration: none; }
.lesson-back a:hover { color: var(--color-primary); }
@media (max-width: 560px) {
  .lesson-nav { flex-direction: column-reverse; align-items: stretch; }
  .lesson-next { margin-left: 0; justify-content: center; }
}

/* Email signup (Sprint-6) — token-driven; works without JS, signup.js
   adds inline feedback via [data-signup-msg] states. */
.signup { margin: 0; }
.signup-card { margin: 0; }
.lesson-cta { margin-top: var(--space-5); }
.signup__row { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-2); }
.signup__label { display: block; width: 100%; font-size: 0.9375rem; margin-bottom: var(--space-1); color: var(--color-text-muted); }
.signup__input { flex: 1 1 16rem; font: inherit; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); color: var(--color-text); }
.signup__input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.signup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup__msg { margin: var(--space-3) 0 0; min-height: 1.25rem; font-size: 0.9375rem; }
.signup__msg[data-state="ok"] { color: var(--color-success); }
.signup__msg[data-state="err"] { color: var(--color-primary-hover); }
.signup__msg[data-state="pending"] { color: var(--color-text-muted); }
.signup__fineprint { font-size: 0.8125rem; margin: var(--space-2) 0 0; color: var(--color-text-muted); }

/* Legal scaffolds (Sprint-6 Step 5) — disclaimer is the loudest
   element so a placeholder can't pass for binding text. */
.legal { max-width: var(--measure); }
.legal h2 { margin-top: var(--space-5); }
.legal-disclaimer { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-primary); border-left: 4px solid var(--color-primary); border-radius: var(--radius); background: var(--color-bg-warm); }
.legal-disclaimer p { margin: 0; }
.legal-facts { margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-bg-warm); }
.legal-facts h2 { margin-top: 0; }
.legal-facts ul { margin: 0; padding-left: 1.25rem; }
.legal-facts li { margin-bottom: var(--space-2); }