:root{
  --ink:#0f172a;
  --ink-soft:#475569;
  --ink-faint:#94a3b8;
  --bg:#f6f7fb;
  --card:#ffffff;
  --green:#16a34a;
  --green-dark:#14532d;
  --green-soft:#f0fdf4;
  --green-line:#bbf7d0;
  --gold:#f59e0b;
  --gold-dark:#b45309;
  --gold-soft:#fffbeb;
  --gold-line:#fde68a;
  --red:#ef4444;
  --red-soft:#fef2f2;
  --red-line:#fecaca;
  --blue:#2563eb;
  --blue-soft:#eff6ff;
  --blue-line:#bfdbfe;
  --purple:#8b5cf6;
  --line:#e2e8f0;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 1px 3px rgba(15,23,42,.06), 0 8px 24px -12px rgba(15,23,42,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--green-dark)}
.wrap{max-width:1000px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px}

header.top{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.top-inner{
  max-width:1000px;margin:0 auto;padding:10px 20px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.top-logo{font-weight:800;letter-spacing:-.3px;text-decoration:none;color:var(--ink);white-space:nowrap}
.top-logo span{color:var(--green)}
nav.main-nav{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
nav.main-nav a{
  font-size:14px;text-decoration:none;color:var(--ink-soft);
  padding:6px 12px;border-radius:999px;border:1px solid transparent;font-weight:600;
}
nav.main-nav a:hover{border-color:var(--line);color:var(--ink);background:#fff}
nav.main-nav a.active{background:var(--green);border-color:var(--green);color:#fff}

.breadcrumb{
  font-size:13px;color:var(--ink-faint);padding:18px 0 0;
}
.breadcrumb a{color:var(--ink-faint);text-decoration:none}
.breadcrumb a:hover{color:var(--green-dark);text-decoration:underline}
.breadcrumb span.sep{margin:0 6px}

.hero{
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(245,158,11,.28), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(22,163,74,.35), transparent 60%),
    linear-gradient(160deg,#0b1220 0%, #0f2a1d 100%);
  color:#fff;
  padding:72px 0 64px;
}
.hero.small{padding:48px 0 44px}
.hero .kicker{
  display:inline-block;font-size:13px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:#86efac;margin-bottom:14px;
}
.hero h1{font-size:clamp(32px,6vw,54px);line-height:1.05;letter-spacing:-1.5px;margin-bottom:8px}
.hero.small h1{font-size:clamp(26px,4.5vw,40px)}
.hero h1 .gold{color:var(--gold)}
.hero .sub{font-size:clamp(16px,2.2vw,20px);color:#cbd5e1;max-width:680px;margin-top:14px}
.hero .meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px;font-size:14px;color:#94a3b8}
.hero .meta b{color:#fff}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

section{padding:48px 0 8px}
section:last-of-type{padding-bottom:24px}
.sec-label{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--green);margin-bottom:8px}
h1{font-size:clamp(28px,4.5vw,40px);letter-spacing:-1px;line-height:1.15}
h2{font-size:clamp(24px,4vw,34px);letter-spacing:-.8px;line-height:1.15;margin-bottom:10px}
h3{font-size:20px;letter-spacing:-.3px;margin-bottom:8px}
h4{font-size:17px;margin-bottom:6px}
.lead{color:var(--ink-soft);max-width:760px;margin-bottom:26px;font-size:17px}
p{margin-bottom:12px}
p:last-child{margin-bottom:0}

.btn{
  display:inline-block;padding:11px 20px;border-radius:12px;font-weight:700;font-size:15px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit;
  transition:.15s;
}
.btn.primary{background:var(--green);color:#fff}
.btn.primary:hover{background:var(--green-dark)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn.ghost:hover{background:rgba(255,255,255,.1)}
.btn.light{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.light:hover{border-color:var(--ink-faint)}
.btn.gold{background:var(--gold);color:#3b2606}
.btn.gold:hover{background:var(--gold-dark);color:#fff}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);
}
.book-banner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:linear-gradient(150deg,#fffbeb,#fef3c7);
  border:1px solid var(--gold-line);border-radius:var(--radius);
  padding:18px 22px;box-shadow:var(--shadow);
}
.book-banner b{font-size:16.5px}
.book-banner .bb-sub{font-size:14px;color:var(--ink-soft);margin-top:2px}
.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:1fr 1fr}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.four{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
a.card-link{text-decoration:none;color:inherit;display:block;transition:.15s}
a.card-link:hover{transform:translateY(-3px);border-color:var(--green-line);box-shadow:0 12px 30px -12px rgba(22,163,74,.35)}
a.card-link .more{color:var(--green-dark);font-weight:700;font-size:14px;margin-top:10px;display:inline-block}
.pill{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;background:var(--green-soft);color:var(--green-dark);
  border:1px solid var(--green-line);margin-bottom:10px;
}
.pill.gold{background:var(--gold-soft);color:var(--gold-dark);border-color:var(--gold-line)}
.pill.blue{background:var(--blue-soft);color:#1d4ed8;border-color:var(--blue-line)}
.pill.red{background:var(--red-soft);color:#b91c1c;border-color:var(--red-line)}

.dads{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dad{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:relative;overflow:hidden}
.dad::before{content:"";position:absolute;inset:0 auto 0 0;width:6px}
.dad.poor::before{background:var(--blue)}
.dad.rich::before{background:var(--green)}
.dad h3{font-size:20px;margin-bottom:2px}
.dad .who{font-size:13px;color:var(--ink-soft);margin-bottom:14px}
.dad ul{list-style:none;display:grid;gap:8px}
.dad li{padding-left:22px;position:relative;font-size:15px}
.dad li::before{position:absolute;left:0;top:0;font-weight:800}
.dad.poor li::before{content:"–";color:var(--blue)}
.dad.rich li::before{content:"+";color:var(--green)}
.quote{margin-top:16px;padding:12px 14px;border-radius:12px;font-style:italic;font-size:14px;background:var(--bg);color:var(--ink-soft)}

table.compare{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:15px}
table.compare th,table.compare td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.compare th{background:var(--bg);font-size:13px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-soft)}
table.compare tr:last-child td{border-bottom:none}
table.compare td:first-child{font-weight:700;width:26%}
.table-scroll{overflow-x:auto;border-radius:var(--radius)}

.lesson-head{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start;margin-bottom:6px}
.lesson-head .num{
  width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:24px;color:#fff;background:linear-gradient(140deg,var(--green),var(--green-dark));
}
.lesson-head.gold .num{background:linear-gradient(140deg,var(--gold),var(--gold-dark))}

.callout{border-radius:var(--radius-sm);padding:16px 18px;margin:16px 0;border:1px solid}
.callout .callout-title{font-weight:800;font-size:13px;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px}
.callout.example{background:var(--green-soft);border-color:var(--green-line)}
.callout.example .callout-title{color:var(--green-dark)}
.callout.tip{background:var(--gold-soft);border-color:var(--gold-line)}
.callout.tip .callout-title{color:var(--gold-dark)}
.callout.info{background:var(--blue-soft);border-color:var(--blue-line)}
.callout.info .callout-title{color:#1d4ed8}
.callout.warn{background:var(--red-soft);border-color:var(--red-line)}
.callout.warn .callout-title{color:#b91c1c}
.callout p:last-child{margin-bottom:0}

details.vertiefung{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);margin:16px 0;overflow:hidden}
details.vertiefung summary{
  cursor:pointer;padding:14px 18px;font-weight:700;font-size:15px;list-style:none;
  display:flex;align-items:center;gap:10px;background:var(--bg);
}
details.vertiefung summary::-webkit-details-marker{display:none}
details.vertiefung summary::before{content:"+";font-weight:900;color:var(--green);font-size:18px;width:18px;text-align:center}
details.vertiefung[open] summary::before{content:"–"}
details.vertiefung .inner{padding:18px}
details.vertiefung .inner > *:last-child{margin-bottom:0}

.flow{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.flow-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.flow-card h4{font-size:17px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.dot.g{background:var(--green)}
.dot.r{background:var(--red)}
.flow-card ul{list-style:none;display:grid;gap:6px;font-size:15px;color:var(--ink-soft)}
.flow-card.bad li::before{content:"← ";color:var(--red);font-weight:800}
.flow-card.good li::before{content:"+ ";color:var(--green);font-weight:800}
.tagline{margin-top:14px;font-weight:700;font-size:15px}
.flow-card.bad .tagline{color:var(--red)}
.flow-card.good .tagline{color:var(--green)}

.quadrant{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.q{border-radius:var(--radius);padding:22px;color:#fff;min-height:150px}
.q h4{font-size:20px;margin-bottom:6px;color:#fff}
.q p{font-size:14px;opacity:.92}
.q .letter{font-size:13px;font-weight:800;letter-spacing:2px;opacity:.75;margin-bottom:6px}
.q.e{background:linear-gradient(150deg,#3b82f6,#1d4ed8)}
.q.s{background:linear-gradient(150deg,#8b5cf6,#6d28d9)}
.q.b{background:linear-gradient(150deg,#f59e0b,#b45309)}
.q.i{background:linear-gradient(150deg,#22c55e,#15803d)}

.crit{background:#fff7ed;border:1px solid #fed7aa;border-radius:var(--radius);padding:26px;margin-top:8px}
.crit h3{margin-bottom:12px;font-size:20px}
.crit ul{list-style:none;display:grid;gap:10px}
.crit li{padding-left:26px;position:relative;font-size:15px;color:#7c2d12}
.crit li::before{
  content:"!";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;
  background:var(--red);color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;
  justify-content:center;margin-top:3px;
}
.verdict{margin-top:18px;padding:14px 16px;border-radius:12px;background:#fff;border:1px dashed #fdba74;font-size:15px}

.progress-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.overall{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.overall .pct{font-size:40px;font-weight:900;letter-spacing:-2px;color:var(--green-dark);line-height:1}
.bar{height:10px;border-radius:999px;background:var(--line);overflow:hidden;flex:1;min-width:180px}
.bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green),#22c55e);width:0;transition:width .5s}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.stat{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px}
.stat .val{font-size:24px;font-weight:900;letter-spacing:-1px}
.stat .lbl{font-size:13px;color:var(--ink-soft);margin-bottom:6px}
.stat .bar{height:6px;min-width:0;margin-top:10px}
.stat .bar-fill.gold{background:linear-gradient(90deg,var(--gold),#fbbf24)}
.stat .bar-fill.blue{background:linear-gradient(90deg,var(--blue),#60a5fa)}
.stat .bar-fill.purple{background:linear-gradient(90deg,var(--purple),#a78bfa)}

.mark-done{
  display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px;margin:26px 0 8px;flex-wrap:wrap;
}
.mark-done .txt{font-size:15px;color:var(--ink-soft);flex:1;min-width:200px}
.mark-done.done{border-color:var(--green-line);background:var(--green-soft)}

.pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:36px 0 12px}
.pager a{
  display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:16px 18px;text-decoration:none;color:var(--ink);transition:.15s;
}
.pager a:hover{border-color:var(--green-line)}
.pager .dir{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--ink-faint);margin-bottom:4px}
.pager .ttl{font-weight:700;font-size:15px}
.pager a.next{text-align:right}

.todo{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:8px}
.todo-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.todo-card .step{font-size:12px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.todo-card h4{font-size:17px;margin-bottom:6px}
.todo-card p{font-size:14.5px;color:var(--ink-soft)}

.quiz{background:linear-gradient(160deg,#0b1220,#0f2a1d);border-radius:24px;padding:32px;color:#fff;margin-top:8px}
.quiz h3{font-size:24px;letter-spacing:-.5px;margin-bottom:8px}
.quiz .qmeta{font-size:13px;color:#94a3b8;margin-bottom:18px}
.qitem{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px;margin-bottom:12px}
.qitem p{font-weight:700;margin-bottom:10px;font-size:15.5px}
.answers{display:grid;gap:8px}
.answers button{
  text-align:left;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.2);
  background:transparent;color:#e2e8f0;font-size:14.5px;cursor:pointer;transition:.15s;font-family:inherit;
}
.answers button:hover{background:rgba(255,255,255,.1)}
.answers button.correct{background:var(--green);border-color:var(--green);color:#fff;font-weight:700}
.answers button.wrong{background:var(--red);border-color:var(--red);color:#fff}
.qresult{font-size:14px;margin-top:8px;color:#94a3b8;min-height:20px}
.qresult b{color:#86efac}
.qresult.bad b{color:#fca5a5}
#score{margin-top:16px;font-size:16px;font-weight:700;color:#86efac;min-height:24px}
.quiz-modes{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.quiz-modes button{
  padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:transparent;
  color:#e2e8f0;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;
}
.quiz-modes button:hover{background:rgba(255,255,255,.1)}
.quiz-modes button.active{background:var(--gold);border-color:var(--gold);color:#3b2606}

.flash-wrap{max-width:640px;margin:0 auto}
.flashcard{perspective:1200px;height:300px;cursor:pointer;margin-bottom:18px}
.flashcard-inner{position:relative;width:100%;height:100%;transition:transform .55s;transform-style:preserve-3d}
.flashcard.flipped .flashcard-inner{transform:rotateY(180deg)}
.flashcard-face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:30px;border-radius:24px;box-shadow:var(--shadow);
}
.flashcard-front{background:linear-gradient(150deg,#0b1220,#0f2a1d);color:#fff}
.flashcard-front .cat{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#86efac;margin-bottom:14px}
.flashcard-front .qtext{font-size:clamp(19px,3vw,26px);font-weight:800;letter-spacing:-.5px;line-height:1.3}
.flashcard-back{background:var(--card);border:2px solid var(--green-line);transform:rotateY(180deg);color:var(--ink)}
.flashcard-back .atext{font-size:clamp(16px,2.4vw,19px);line-height:1.6}
.flashcard-back .hint{position:absolute;bottom:16px;font-size:12px;color:var(--ink-faint)}
.flash-hint{text-align:center;font-size:13px;color:var(--ink-faint);margin-bottom:16px}
.flash-controls{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.flash-controls button{
  padding:12px 22px;border-radius:12px;font-weight:800;font-size:15px;cursor:pointer;font-family:inherit;
  border:1px solid var(--line);background:var(--card);
}
.flash-controls button.know{border-color:var(--green);background:var(--green);color:#fff}
.flash-controls button.know:hover{background:var(--green-dark)}
.flash-controls button.again{border-color:var(--gold);color:var(--gold-dark);background:var(--gold-soft)}
.flash-controls button.again:hover{background:#fde68a}
.flash-stats{display:flex;gap:18px;justify-content:center;font-size:14px;color:var(--ink-soft);margin-top:18px;flex-wrap:wrap}
.flash-end{text-align:center;padding:40px 20px}
.flash-end h3{font-size:26px;margin-bottom:10px}
.flash-end .big{font-size:48px;font-weight:900;color:var(--green-dark);letter-spacing:-2px}

.calc-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;align-items:start}
.calc-field{margin-bottom:20px}
.calc-field label{display:flex;justify-content:space-between;font-size:14px;font-weight:700;margin-bottom:8px}
.calc-field label output{color:var(--green-dark);font-weight:900}
input[type=range]{width:100%;accent-color:var(--green);height:28px;cursor:pointer}
.calc-results{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.calc-res{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px}
.calc-res .lbl{font-size:12.5px;color:var(--ink-soft);margin-bottom:4px}
.calc-res .val{font-size:22px;font-weight:900;letter-spacing:-1px}
.calc-res.highlight{background:var(--green-soft);border-color:var(--green-line)}
.calc-res.highlight .val{color:var(--green-dark)}
.chart-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.chart-box svg{display:block;width:100%;height:auto}
.legend{display:flex;gap:18px;font-size:13px;color:var(--ink-soft);margin-top:10px;flex-wrap:wrap}
.legend .sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}

.glossar-tools{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.glossar-tools input{
  flex:1;min-width:220px;padding:12px 16px;border-radius:12px;border:1px solid var(--line);
  font-size:15px;font-family:inherit;background:var(--card);
}
.glossar-tools input:focus{outline:2px solid var(--green-line);border-color:var(--green)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;color:var(--ink-soft);
}
.chips button:hover{border-color:var(--ink-faint)}
.chips button.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.gloss-entry{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 20px;margin-bottom:10px}
.gloss-entry h4{font-size:17px;margin-bottom:4px}
.gloss-entry .cat-tag{font-size:11.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
.gloss-entry p{font-size:14.5px;color:var(--ink-soft)}
.gloss-entry p b{color:var(--ink)}
.gloss-empty{text-align:center;color:var(--ink-faint);padding:30px;display:none}

.checklist{display:grid;gap:10px}
.check-item{
  display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:14px 16px;cursor:pointer;transition:.15s;
}
.check-item:hover{border-color:var(--green-line)}
.check-item input{display:none}
.check-item .box{
  width:22px;height:22px;border-radius:7px;border:2px solid var(--line);flex:none;margin-top:2px;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;color:#fff;transition:.15s;
}
.check-item .day{font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--gold);margin-bottom:2px}
.check-item .txt{font-size:15px}
.check-item.checked{border-color:var(--green-line);background:var(--green-soft)}
.check-item.checked .box{background:var(--green);border-color:var(--green)}
.check-item.checked .box::after{content:"✓"}
.check-item.checked .txt{text-decoration:line-through;color:var(--ink-soft)}

details.faq{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);margin-bottom:10px;overflow:hidden}
details.faq summary{cursor:pointer;padding:14px 18px;font-weight:700;font-size:15px;list-style:none;display:flex;gap:10px;align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"?";width:20px;height:20px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font-weight:900;font-size:12px;display:flex;align-items:center;justify-content:center;flex:none}
details.faq .inner{padding:0 18px 16px 48px;color:var(--ink-soft);font-size:14.5px}

footer.site{padding:40px 0 64px;color:var(--ink-soft);font-size:13.5px}
footer.site .box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
footer.site b{color:var(--ink)}

@media (max-width:720px){
  .dads,.flow,.quadrant,.grid.two{grid-template-columns:1fr}
  .calc-grid{grid-template-columns:1fr}
  .pager{grid-template-columns:1fr}
  .pager a.next{text-align:left}
  .lesson-head{grid-template-columns:1fr;gap:10px}
  nav.main-nav{margin-left:0;width:100%}
  nav.main-nav a{padding:5px 10px;font-size:13px}
  .hero{padding:48px 0 44px}
  .quiz{padding:22px}
}
@media print{
  header.top,nav.main-nav,.pager,.mark-done,.quiz-modes{display:none}
  body{background:#fff}
}