/* ==========================================================================
   Главная страница English Дети
   ========================================================================== */

body { overflow-x: hidden; }
body.site {
  background-color: var(--cream);
  background-image: radial-gradient(rgba(30, 27, 58, .07) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}

/* ---------- Шапка ---------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 248, 236, .86);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 2px solid transparent;
  transition: border-color .2s, box-shadow .2s;
}
.hdr.is-scrolled { border-bottom-color: var(--ink); }
.hdr .wrap { display: flex; align-items: center; gap: 18px; min-height: 72px; }
.hdr nav { display: flex; gap: 4px; margin-left: auto; }
.hdr nav a {
  padding: 8px 12px; border-radius: 999px; text-decoration: none; font-weight: 800; font-size: 15px;
  transition: background .15s;
}
.hdr nav a:hover { background: var(--yellow-soft); }
.hdr .hdr-cta { display: flex; gap: 10px; }
.burger { display: none; margin-left: auto; }
@media (max-width: 1060px) {
  .hdr nav { display: none; }
  .hdr .hdr-cta { margin-left: auto; }
}
@media (max-width: 640px) {
  .hdr .hdr-cta .btn-login { display: none; }
  .hdr .hdr-cta .btn { padding: 10px 16px; min-height: 42px; font-size: 14px; }
  .logo { font-size: 17px; }
  .logo img { width: 38px; height: 38px; }
}

/* ---------- Первый экран ---------- */
.hero { padding: clamp(28px, 6vw, 72px) 0 clamp(40px, 7vw, 90px); position: relative; }
.hero .wrap { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero h1 { margin-bottom: 22px; font-size: clamp(30px, 4vw, 50px); } /* длинный H1 с главным запросом — кегль меньше общего h1 */
@media (max-width: 400px) { .hero h1 { font-size: clamp(26px, 8.2vw, 30px); } }
.hero h1 .squiggle { position: relative; white-space: nowrap; display: inline-block; }
.hero h1 .squiggle svg { position: absolute; left: -2%; bottom: -.16em; width: 104%; height: .34em; }
.hero .lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-2); max-width: 560px; margin-bottom: 30px; }
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.hero .trust { display: flex; flex-wrap: wrap; gap: 10px; }
.hero .trust .chip { background: var(--paper); }
.hero .note { margin-top: 18px; font-size: 14px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.hero .note i { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(34, 184, 148, .2); animation: pulseDot 2s infinite; flex: none; }
@keyframes pulseDot { 50% { box-shadow: 0 0 0 8px rgba(34, 184, 148, 0); } }

.stage { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1 / 1; margin: 0 auto; }
.stage .blob { position: absolute; inset: 6% 4% 4% 6%; }
.stage .fox { position: absolute; left: 22%; top: 20%; width: 56%; filter: drop-shadow(6px 8px 0 rgba(30, 27, 58, .18)); }
.stk {
  position: absolute; background: var(--paper); border: var(--bw) solid var(--ink); border-radius: 18px;
  box-shadow: var(--shadow); padding: 10px 14px; font-weight: 800; line-height: 1.2;
  animation: floaty 6s ease-in-out infinite;
}
.stk.bubble { left: 0; top: 6%; --rot: -6deg; font-family: var(--f-head); font-size: clamp(14px, 2vw, 19px); padding: 12px 16px; }
.stk.bubble::after {
  content: ''; position: absolute; right: 26px; bottom: -14px; width: 22px; height: 22px; background: var(--paper);
  border-right: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink); transform: rotate(45deg) skew(12deg, 12deg);
}
.stk.star { right: 3%; top: 8%; --rot: 8deg; background: var(--yellow); border-radius: 999px; font-size: clamp(14px, 1.8vw, 18px); animation-delay: -2s; }
.stk.word { left: -2%; bottom: 14%; --rot: -4deg; display: flex; gap: 10px; align-items: center; animation-delay: -1s; }
.stk.word .em { font-size: 34px; line-height: 1; }
.stk.word small { display: block; font-weight: 700; color: var(--ink-2); font-size: 13px; }
.stk.word .say { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); background: var(--blue-soft); display: grid; place-items: center; font-size: 16px; }
.stk.lesson { right: -2%; bottom: 4%; --rot: 3deg; background: var(--mint-soft); animation-delay: -3s; min-width: 170px; }
.stk.lesson small { display: block; font-weight: 700; color: var(--ink-2); font-size: 12px; margin-bottom: 2px; }
.stk.lesson .go { display: inline-block; margin-top: 8px; background: var(--mint); color: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 4px 12px; font-size: 13px; }
.letter {
  position: absolute; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  border: var(--bw) solid var(--ink); font-family: var(--f-head); font-weight: 800; font-size: 22px; box-shadow: 3px 3px 0 var(--ink);
  animation: floaty 7s ease-in-out infinite;
}
.letter.a { left: 12%; top: 38%; background: var(--pink); color: #fff; --rot: -12deg; animation-delay: -1.5s; }
.letter.b { right: 8%; top: 40%; background: var(--blue); color: #fff; --rot: 10deg; animation-delay: -4s; }
.letter.c { left: 55%; top: 1%; background: var(--purple); color: #fff; --rot: 6deg; animation-delay: -2.5s; }

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .stage { max-width: 440px; }
}
@media (max-width: 480px) {
  .stk { padding: 8px 10px; border-radius: 14px; }
  .stk.word .em { font-size: 26px; }
  .stk.lesson { min-width: 0; font-size: 14px; }
  .letter { width: 36px; height: 36px; font-size: 17px; border-radius: 11px; }
}

/* ---------- Бегущая строка ---------- */
.ticker-wrap { overflow: hidden; padding: 18px 0; margin: -18px 0; }
.ticker { background: var(--ink); color: #fff; border-block: var(--bw) solid var(--ink); overflow: hidden; transform: rotate(-1.2deg); margin: 0 -20px; }
.ticker-track { display: flex; width: max-content; animation: tick 48s linear infinite; }
.ticker span { font-family: var(--f-head); font-weight: 600; font-size: 20px; padding: 16px 22px; white-space: nowrap; }
.ticker span b { color: var(--yellow); font-weight: 600; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- Заголовки секций ---------- */
.sec-head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head p { font-size: 18px; color: var(--ink-2); }

/* ---------- Боль → решение ---------- */
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pain { position: relative; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.pain .top { padding: 22px 24px 18px; background: var(--cream-2); border-bottom: 2px dashed var(--ink); }
.pain .top .q { font-size: 14px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.pain .top h3 { margin: 6px 0 0; font-size: 19px; }
.pain .bot { padding: 20px 24px 24px; flex: 1; }
.pain .bot .a { display: inline-flex; gap: 6px; align-items: center; font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.pain .bot h4 { font-family: var(--f-head); font-size: 18px; margin-bottom: 8px; }
.pain .bot p { margin: 0; color: var(--ink-2); font-size: 16px; }
.pain .icon { position: absolute; right: 16px; top: 14px; font-size: 38px; }
@media (max-width: 900px) { .pains { grid-template-columns: 1fr; } }

/* ---------- Анатомия урока ---------- */
.anatomy { display: grid; grid-template-columns: 380px 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.donut-box { position: relative; width: 100%; max-width: 380px; aspect-ratio: 1; margin: 0 auto; }
.donut-box svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.donut-box circle.seg { fill: none; stroke-width: 44; transition: stroke-width .2s, opacity .2s; cursor: pointer; }
.donut-box circle.seg.is-dim { opacity: .25; }
.donut-box circle.seg.is-on { stroke-width: 54; }
.donut-box .ring { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.donut-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; }
.donut-center b { display: block; font-family: var(--f-head); font-size: clamp(44px, 7vw, 64px); line-height: 1; }
.donut-center span { font-weight: 800; color: var(--ink-2); }
.donut-center em { display: block; font-style: normal; font-weight: 800; font-size: 15px; margin-top: 6px; color: var(--orange-2); min-height: 1.3em; max-width: 170px; }
.flow-list { display: grid; gap: 10px; }
.flow-item {
  display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 16px; padding: 12px 16px;
  transition: transform .15s, box-shadow .15s; cursor: default;
}
.flow-item:hover, .flow-item.is-on { transform: translateX(6px); box-shadow: var(--shadow); }
.flow-item .m { font-family: var(--f-head); font-weight: 800; font-size: 20px; text-align: center; border-radius: 12px; padding: 8px 0; border: 2px solid var(--ink); }
.flow-item b { display: block; font-size: 17px; }
.flow-item span { color: var(--ink-2); font-size: 15px; }
@media (max-width: 900px) { .anatomy { grid-template-columns: 1fr; } .donut-box { max-width: 300px; } }

/* ---------- Лестница уровней ---------- */
.ladder { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: end; height: 340px; margin-bottom: 28px; }
.step {
  position: relative; border: var(--bw) solid var(--ink); border-radius: 18px 18px 8px 8px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
  padding: 14px 6px; text-align: center; cursor: pointer; background: var(--paper);
  transition: transform .2s, box-shadow .2s; font: inherit; color: inherit;
}
.step:hover { transform: translateY(-4px); }
.step.is-on { transform: translateY(-8px); box-shadow: 6px 10px 0 var(--ink); }
.step .e { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; }
.step .n { font-family: var(--f-head); font-weight: 700; font-size: clamp(12px, 1.3vw, 16px); }
.step .a { font-weight: 800; font-size: 13px; color: var(--ink-2); }
.step .c { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); font-weight: 900; font-size: 12px; background: rgba(255,255,255,.75); border: 2px solid var(--ink); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.ladder-detail { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; padding: 28px; }
.ladder-detail h3 { font-size: clamp(22px, 2.6vw, 30px); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ladder-detail .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ladder-detail .units { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ladder-detail .units .chip { font-size: 13px; font-weight: 700; border-width: 1.5px; }
@media (max-width: 800px) {
  .ladder { height: 260px; gap: 6px; }
  .step { padding: 10px 2px; border-radius: 14px 14px 6px 6px; }
  .step .a { font-size: 11px; }
  .step .c { font-size: 10px; padding: 1px 5px; bottom: 6px; }
  .ladder-detail { grid-template-columns: 1fr; padding: 20px; }
}
@media (max-width: 420px) { .step .n { display: none; } }

/* ---------- Шаги ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; counter-reset: st; }
.steps::before { content: ''; position: absolute; left: 8%; right: 8%; top: 38px; border-top: 3px dashed var(--ink); z-index: 0; }
.stp { position: relative; z-index: 1; text-align: center; }
.stp .num {
  width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%; border: var(--bw) solid var(--ink); box-shadow: var(--shadow);
  display: grid; place-items: center; font-size: 34px; background: var(--paper);
}
.stp h3 { font-size: 18px; margin-bottom: 6px; }
.stp p { color: var(--ink-2); font-size: 15px; margin: 0 auto; max-width: 240px; }
.stp .tag { display: inline-block; margin-top: 10px; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 14px; }
  .steps::before { left: 38px; right: auto; top: 20px; bottom: 20px; border-top: 0; border-left: 3px dashed var(--ink); }
  .stp { display: grid; grid-template-columns: 76px 1fr; gap: 16px; text-align: left; align-items: center; }
  .stp .num { margin: 0; }
  .stp p { margin: 0; max-width: none; }
}

/* ---------- Витрина кабинета ---------- */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 70px); align-items: center; }
.devices { position: relative; min-height: 560px; }
.phone {
  position: absolute; left: 6%; top: 0; width: 290px; background: var(--ink); border-radius: 44px; padding: 12px;
  box-shadow: 10px 12px 0 rgba(30,27,58,.18); transform: rotate(-4deg);
}
.phone .scr { background: var(--cream); border-radius: 34px; overflow: hidden; padding: 18px 14px 20px; min-height: 520px; }
.phone .notch { width: 90px; height: 22px; background: var(--ink); border-radius: 0 0 14px 14px; margin: -18px auto 12px; }
.ph-hi { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ph-hi img { width: 44px; height: 44px; }
.ph-hi b { font-family: var(--f-head); font-size: 17px; display: block; }
.ph-hi span { font-size: 12px; color: var(--ink-2); font-weight: 700; }
.ph-card { background: var(--paper); border: 2px solid var(--ink); border-radius: 16px; padding: 12px; margin-bottom: 10px; box-shadow: 2px 2px 0 var(--ink); }
.ph-card small { display: block; font-size: 11px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.ph-card .big { font-family: var(--f-head); font-size: 15px; font-weight: 700; margin: 2px 0 8px; }
.ph-btn { display: block; text-align: center; background: var(--orange); color: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 8px; font-weight: 900; font-size: 14px; }
.ph-stars { display: flex; align-items: center; justify-content: space-between; }
.ph-stars .bar { height: 10px; border-radius: 999px; background: var(--hair); border: 1.5px solid var(--ink); overflow: hidden; margin-top: 8px; }
.ph-stars .bar i { display: block; height: 100%; width: 68%; background: var(--yellow); }
.ph-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ph-tile { border: 2px solid var(--ink); border-radius: 14px; padding: 10px 8px; text-align: center; font-weight: 800; font-size: 12px; }
.ph-tile .e { font-size: 26px; display: block; }
.parent-card {
  position: absolute; right: 0; bottom: 10px; width: 280px; transform: rotate(3deg); padding: 18px;
}
.parent-card h4 { font-family: var(--f-head); margin-bottom: 10px; }
.parent-card .ln { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1.5px dashed var(--hair); font-size: 15px; }
.parent-card .ln:last-child { border: 0; }
.parent-card .ln b { white-space: nowrap; }
.feat-list { display: grid; gap: 14px; margin: 26px 0 30px; }
.feat { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; }
.feat .i { width: 52px; height: 52px; border-radius: 16px; border: 2px solid var(--ink); display: grid; place-items: center; font-size: 24px; }
.feat b { display: block; font-size: 17px; }
.feat span { color: var(--ink-2); font-size: 15px; }
/* Пометка «скоро» у того, что появится с кабинетом для родителей */
.feat b .badge { font-family: var(--f-body); font-size: 12px; vertical-align: 3px; margin-left: 4px; }
.parent-card .soon-tag { position: absolute; top: -12px; right: 16px; border: 2px solid var(--ink); font-size: 12px; }
@media (max-width: 960px) {
  .showcase { grid-template-columns: 1fr; }
  .devices { min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
  .phone, .parent-card { position: relative; left: auto; right: auto; top: auto; bottom: auto; }
  .phone { width: min(290px, 88vw); }
  .parent-card { width: min(320px, 92vw); transform: rotate(1.5deg); }
}

/* ---------- Цифры ---------- */
.numbers { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: clamp(28px, 5vw, 56px); position: relative; overflow: hidden; }
.numbers h2 { color: #fff; }
.numbers .grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-top: 26px; }
.num-cell b { display: block; font-family: var(--f-head); font-size: clamp(34px, 4.5vw, 54px); line-height: 1; }
.num-cell span { display: block; margin-top: 8px; color: rgba(255,255,255,.75); font-weight: 700; font-size: 15px; }
.num-cell:nth-child(6n+1) b { color: var(--yellow); }
.num-cell:nth-child(6n+2) b { color: #7FB0FF; }
.num-cell:nth-child(6n+3) b { color: #63E0BF; }
.num-cell:nth-child(6n+4) b { color: #FF9CC4; }
.num-cell:nth-child(6n+5) b { color: #B7A5FF; }
.num-cell:nth-child(6n+6) b { color: #FFA46E; }
@media (max-width: 900px) { .numbers .grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .numbers .grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Преподаватель ---------- */
.teacher { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.t-photo { position: relative; max-width: 420px; margin: 0 auto; width: 100%; }
.t-photo .frame { aspect-ratio: 4 / 5; border: var(--bw) solid var(--ink); border-radius: 30px; box-shadow: var(--shadow-lg); overflow: hidden; background: var(--orange-soft); transform: rotate(-2deg); display: grid; place-items: center; }
.t-photo .frame img { width: 100%; height: 100%; object-fit: cover; }
.t-photo .frame img.fallback { width: 70%; height: auto; object-fit: contain; }
.t-photo .tape { position: absolute; top: -14px; left: 50%; width: 120px; height: 32px; background: rgba(255, 201, 60, .85); border: 2px solid var(--ink); transform: translateX(-50%) rotate(-4deg); }
.t-photo .sticker { position: absolute; right: -12px; bottom: 22px; transform: rotate(6deg); }
.t-facts { display: flex; gap: 14px; flex-wrap: wrap; margin: 22px 0; }
.t-fact { padding: 14px 18px; min-width: 130px; }
.t-fact b { display: block; font-family: var(--f-head); font-size: 28px; line-height: 1.1; }
.t-fact span { font-size: 14px; color: var(--ink-2); font-weight: 700; }
.t-about p { font-size: 17px; }
@media (max-width: 900px) { .teacher { grid-template-columns: 1fr; } .t-photo { max-width: 320px; } }

/* ---------- Цены ---------- */
.prices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; }
.price { display: flex; flex-direction: column; position: relative; padding: 26px 22px; }
.price .e { font-size: 36px; }
.price h3 { font-size: 18px; margin: 10px 0 12px; }
.price .sum { font-family: var(--f-head); font-weight: 800; font-size: clamp(28px, 2.7vw, 34px); line-height: 1; white-space: nowrap; }
.price .sum .cur { font-size: .72em; }
.price .per { color: var(--ink-2); font-weight: 700; font-size: 14px; margin: 6px 0 16px; }
.price ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; flex: 1; }
.price li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; font-size: 15px; }
.price li::before { content: '✓'; font-weight: 900; color: var(--mint); }
.price .btn { width: 100%; }
.price.hit { transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.price .hit-tag { position: absolute; top: -16px; right: 16px; transform: rotate(4deg); background: var(--pink); color: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 4px 12px; font-weight: 900; font-size: 13px; }
.pay-strip { margin-top: 30px; display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; padding: 20px 24px; }
.pay-strip .ic { display: flex; gap: 8px; }
.pay-strip .ic span { width: 48px; height: 48px; border-radius: 14px; border: 2px solid var(--ink); display: grid; place-items: center; font-size: 22px; background: var(--paper); }
.pay-strip p { margin: 0; }
@media (max-width: 1060px) { .prices { grid-template-columns: repeat(2, 1fr); } .price.hit { transform: none; } }
@media (max-width: 560px) { .prices { grid-template-columns: 1fr; } .pay-strip { grid-template-columns: 1fr; } }

/* ---------- Телемост ---------- */
.online { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.online .card { text-align: left; }
.online .card .e { font-size: 34px; margin-bottom: 8px; }
.online .card h3 { font-size: 18px; }
.online .card p { margin: 0; color: var(--ink-2); font-size: 15px; }
@media (max-width: 900px) { .online { grid-template-columns: 1fr; } }

/* ---------- Отзывы ---------- */
.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.review p { font-size: 16px; }
.review .who { font-weight: 800; }
.review .src { font-size: 13px; color: var(--ink-3); font-weight: 700; }

/* ---------- Квиз ---------- */
.quiz-wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 5vw, 60px); align-items: start; }
.quiz-wrap > * { min-width: 0; } /* колонка не шире экрана из-за длинной кнопки или названия уровня */
.quiz { padding: clamp(20px, 3vw, 34px); position: relative; }
.quiz-progress { height: 12px; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--cream-2); margin-bottom: 22px; }
.quiz-progress i { display: block; height: 100%; width: 0; background: var(--orange); transition: width .35s cubic-bezier(.2, 1.2, .4, 1); }
.quiz .qstep { display: none; animation: popIn .25s ease; }
.quiz .qstep.is-on { display: block; }
.quiz h3 { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: 18px; }
.opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.opt {
  text-align: left; padding: 14px 16px; min-height: 64px; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper);
  font-weight: 800; display: flex; align-items: center; gap: 12px; transition: transform .12s, box-shadow .12s, background .12s;
}
.opt:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.opt.is-on { background: var(--yellow-soft); box-shadow: 4px 4px 0 var(--ink); }
.opt .e { font-size: 26px; flex: none; }
.opt small { display: block; font-weight: 700; color: var(--ink-2); font-size: 13px; }
.quiz .nav { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.quiz .nav .btn { white-space: normal; text-align: center; max-width: 100%; }
.quiz .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.quiz .form-grid .full { grid-column: 1 / -1; }
.quiz .err { color: var(--red); font-weight: 800; font-size: 14px; min-height: 1.2em; margin-top: 10px; }
.rec { display: grid; grid-template-columns: 70px 1fr; gap: 16px; align-items: center; padding: 18px; border-radius: 18px; border: 2px solid var(--ink); margin-bottom: 16px; }
.rec .e { font-size: 50px; text-align: center; }
.rec b { font-family: var(--f-head); font-size: 20px; display: block; overflow-wrap: anywhere; }
.rec > div { min-width: 0; }
.quiz-side .card { margin-top: 20px; }
.quiz-side ul { padding-left: 20px; margin: 0; }
.quiz-side li { margin-bottom: 6px; }
/* Согласия в заявке: одна обязательная галочка (ПД), политика — ссылкой, реклама — по желанию */
.quiz .consents { display: grid; gap: 10px; margin-top: 2px; }
.quiz .check { font-size: 14.5px; line-height: 1.45; cursor: pointer; }
.quiz .check input { width: 22px; height: 22px; margin: 0; cursor: pointer; }
.quiz .check a { font-weight: 700; }
.quiz .check-note { margin: -4px 0 0 32px; font-size: 13.5px; color: var(--ink-2); }
.quiz .check.is-err { color: var(--red); }
.quiz .check.is-err input { outline: 2px solid var(--red); outline-offset: 2px; }
.quiz .opt-tag { color: var(--ink-3); white-space: nowrap; }
@media (max-width: 900px) { .quiz-wrap { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .opts, .quiz .form-grid { grid-template-columns: 1fr; }
  .quiz .nav .btn-primary { flex: 1 1 auto; }
  /* На телефоне эмодзи над текстом: название уровня («Путешественники») помещается целиком */
  .rec { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
  .rec .e { font-size: 34px; line-height: 1.1; text-align: left; }
  .rec b { font-size: clamp(14px, 4.6vw, 17px); }
}

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; max-width: 860px; margin: 0 auto; }
.faq details { background: var(--paper); border: 2px solid var(--ink); border-radius: 18px; overflow: hidden; }
.faq details[open] { box-shadow: var(--shadow); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 800; font-size: 17px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--f-head); font-size: 26px; line-height: 1; transition: transform .2s; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .ans { padding: 0 22px 20px; color: var(--ink-2); }
.faq .ans p:last-child { margin: 0; }

/* ---------- Финальный призыв ---------- */
.final { text-align: center; padding: clamp(36px, 6vw, 70px) clamp(20px, 4vw, 40px); position: relative; overflow: hidden; }
.final img.fx { width: 130px; margin: 0 auto 14px; }
.final p { font-size: 18px; color: var(--ink-2); max-width: 560px; margin: 0 auto 26px; }
.final .row { justify-content: center; }

/* ---------- Подвал ---------- */
.ftr { padding: 48px 0 110px; border-top: var(--bw) solid var(--ink); background: var(--paper); margin-top: 40px; }
.ftr .cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 28px; }
.ftr h4 { font-family: var(--f-head); margin-bottom: 12px; }
.ftr a { text-decoration: none; font-weight: 700; }
.ftr a:hover { text-decoration: underline; }
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ftr .legal { margin-top: 26px; padding-top: 18px; border-top: 1.5px dashed var(--hair); font-size: 13px; color: var(--ink-3); }
@media (max-width: 800px) { .ftr .cols { grid-template-columns: 1fr; } }

/* Скрытые блоки, зависящие от config.js (legal.js: data-if, data-tax, data-need) */
[data-if][hidden], [data-tax][hidden], [data-need][hidden] { display: none !important; }
.ftr .linkbtn { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; cursor: pointer; text-align: left; }
.ftr .linkbtn:hover { text-decoration: underline; }
.ftr .linkbtn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

/* ---------- Баннер cookie (только если задан metrikaId) ---------- */
.cookie {
  position: fixed; left: 12px; bottom: 12px; z-index: 70;
  width: min(420px, calc(100vw - 24px));
  background: var(--paper); border: var(--bw) solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
  padding: 12px 14px; animation: popIn .2s ease;
}
.cookie p { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; font-size: 14px; line-height: 1.45; }
.cookie .e { font-size: 24px; line-height: 1; flex: none; }
.cookie a { font-weight: 700; }
.cookie-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-btns .btn { flex: 1 1 auto; }
.cookie-btns .btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.cookie-open .mbar { display: none !important; }

/* ---------- Липкая кнопка на мобильных ---------- */
.mbar {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: none; gap: 10px;
  transform: translateY(130%); transition: transform .3s ease;
}
.mbar.is-on { transform: none; }
.mbar .btn { flex: 1; }
.mbar .btn-icon { flex: none; width: 56px; height: 56px; min-height: 56px; border-radius: 999px; font-size: 22px; }
@media (max-width: 760px) { .mbar { display: flex; } }

/* ---------- Появление при прокрутке ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ---------- Волна-разделитель ---------- */
.band { position: relative; }
.band-yellow { background: var(--yellow-soft); }
.band-blue { background: var(--blue-soft); }
.band-mint { background: var(--mint-soft); }
.band-pink { background: var(--pink-soft); }
.band-edge { display: block; width: 100%; height: 36px; }
.band-edge path { fill: currentColor; }

/* ---------- Узкие экраны (320–400px) ----------
   В конце файла, чтобы перекрыть правила выше. Колонки сеток не растягиваются под самый длинный
   неразрывный элемент (кнопка, картинка), длинные кнопки переносят текст — страница не уезжает вбок. */
.hero .wrap > *, .teacher > *, .showcase > *, .quiz-wrap > *, .anatomy > * { min-width: 0; }
@media (max-width: 400px) {
  .hero .cta-row .btn, .row .btn { white-space: normal; text-align: center; }
  .hero .cta-row .btn, .final .row .btn { flex: 1 1 100%; }
  .btn-lg { padding-left: 20px; padding-right: 20px; }
  .phone { width: min(290px, 84vw); transform: rotate(-2deg); }
  .parent-card .ln b { white-space: normal; text-align: right; }
  .t-photo .sticker { right: 0; }
}