/* "Крок" — спільна дизайн-система школи.
   Палітра й шрифт свідомо взяті з самих PDF-уроків (--accent-deep/--bg-base тощо
   близькі до --accent/--paper у lesson_template_v2.html) — мета: сайт і продукт
   виглядають зробленими однією рукою, а не сайт-обгортка поверх іншого бренду.
   Серифні заголовки звичайним регістром замість ALL-CAPS гротеску — тема
   заспокоєння, форма не повинна "кричати". */

:root{
  --bg-base:#fdfbf6;
  --bg-soft:#f7f4ea;
  --ink:#2b2b26;
  --ink-muted:#6b6558;
  --accent-deep:#4a7a6f;
  --accent-deep-hover:#3c6459;
  --accent-warm:#c98a3e;
  --accent-warm-hover:#ad7431;
  --line:#e8e2d4;
  --card-shadow: 0 14px 32px -18px rgba(43,43,38,.16);
}
*{ box-sizing:border-box; min-width:0; }
html,body{ margin:0; padding:0; overflow-x:hidden; }
body{
  font-family:'PT Sans',Arial,sans-serif;
  color:var(--ink);
  background:var(--bg-base);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
h1,h2,h3{ font-family:'PT Serif',Georgia,serif; font-weight:700; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }
.prose{ max-width:70ch; }

/* ---------- nav ---------- */
nav.top{ position:relative; z-index:2; padding:26px 0; display:flex; align-items:center; justify-content:space-between; }
.logo{ display:flex; align-items:center; gap:10px; }
.logo svg{ width:28px; height:28px; }
.logo-text{ font-family:'PT Serif',Georgia,serif; font-size:19px; font-weight:700; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a.link{ font-size:14.5px; font-weight:600; color:var(--ink-muted); }
.nav-links a.link:hover, .nav-links a.link.active{ color:var(--ink); }
.btn{
  display:inline-block; font-weight:700; font-size:14px; letter-spacing:.01em;
  padding:14px 26px; border-radius:3px; white-space:nowrap; min-height:48px;
  line-height:20px;
}
.btn-primary{ background:var(--accent-warm); color:#fff; }
.btn-primary:hover{ background:var(--accent-warm-hover); }

/* ---------- shared type ---------- */
.eyebrow{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); font-weight:700; margin-bottom:18px; }
h1{ font-size:40px; line-height:1.18; margin:0 0 20px 0; text-wrap:balance; }
h1 em, h2 em{ font-style:italic; color:var(--accent-deep); }

/* ---------- section header (badge + eyebrow + title) ---------- */
.section-head{ text-align:center; margin-bottom:52px; }
.badge{ width:52px; height:52px; margin:0 auto 18px; }
.badge svg{ width:100%; height:100%; }
.section-eyebrow{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); font-weight:700; margin-bottom:10px; }
.section-title{ font-size:28px; font-weight:700; margin:0; }

/* ---------- cards ---------- */
.benefit-card{
  background:var(--bg-base); border-radius:6px; box-shadow:var(--card-shadow);
  border:1px solid var(--line); flex:1 1 260px; padding:30px 26px;
}
.benefit-card svg{ width:32px; height:32px; margin-bottom:18px; }
.benefit-title{ font-family:'PT Serif',Georgia,serif; font-size:17px; font-weight:700; margin-bottom:8px; }
.benefit-body{ font-size:14.5px; color:var(--ink-muted); line-height:1.6; margin:0; }
.benefits-grid{ display:flex; gap:22px; flex-wrap:wrap; }

/* ---------- ціна-анонс ---------- */
.price-old{ font-size:15px; color:var(--ink-muted); text-decoration:line-through; }
.price-free{ font-family:'PT Serif',Georgia,serif; font-size:20px; font-weight:700; color:var(--accent-warm-hover); }

/* ---------- micro-CTA ---------- */
.micro-cta{ display:inline-block; margin-top:16px; font-size:14.5px; font-weight:700; color:var(--accent-deep); }
.micro-cta:hover{ color:var(--accent-deep-hover); text-decoration:underline; }

/* ---------- дисклеймер (спільний для футерів) ---------- */
.disclaimer{ font-size:12.5px; color:var(--ink-muted); line-height:1.6; max-width:62ch; margin-top:18px; }

/* ---------- footer ---------- */
footer{ padding:44px 0 56px; background:var(--bg-soft); }
.footer-row{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:16px; }
.foot-note{ font-size:12.5px; color:var(--ink-muted); font-weight:600; }

@media (max-width:760px){
  nav .nav-links .link{ display:none; }
  h1{ font-size:32px; }
}