/* NONSCHOOL, главная: редизайн 23.09.2026 + маркетинговый план 25.09.2026 + «Петроль» и жидкое стекло 12.10.2026.
   Палитра «Петроль»: значения из mds/palette-final-20261012/build/final.py (блок SITE_CSS), роли в РОЛИ-ЦВЕТА.md.
   Цвет несёт смысл: бирюза = система, выбор и прогресс; зелёный = верно; красный = ошибка; чернила = текст.
   Яркая бирюза это только свет под стеклом: тёмный текст на ней не ставится нигде. */

@font-face { font-family:'Onest'; font-style:normal; font-weight:100 900; src:url(../fonts/onest-cyr.woff2) format('woff2'); font-display:swap; unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Onest'; font-style:normal; font-weight:100 900; src:url(../fonts/onest-lat.woff2) format('woff2'); font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212; }

:root {
  /* чернила: текст, заголовки, плашка второй строки H1, знак NON, чёрные кнопки, тёмные главы.
     Чёрные по слову владельца 12.10 («I like dark letters and words»). Вариант палитры, тёмно-бирюзовые:
     --ink:#04282A; --ink-hover:#0D3D40. Окончательный выбор за владельцем, меняются только эти две величины */
  --ink:#0B0C0C; --ink-hover:#2B2B2B;
  --petrol-ink:#04282A; /* чернила палитры для объёмной графики, независимо от цвета текста */
  --ink-mid:#2A4243; --dim:#556262; --faint:#667172;
  --white:#FFFFFF; --paper:#FAFDFD; --lav:#ECF9F9; --cool:#F3F8F8;
  --line:#D9E1E2; --line-soft:#E7EEEE; --line-control:#858F90;
  --brand:#007479; --brand-fill:#008086; --brand-tint:#DEF9FA; --brand-select:#CCF4F6;
  --brand-mark:#87DFE4; --brand-glow:#A4EBFD; --brand-line:#91DDE1;
  --ok:#026D14; --ok-tint:#E3FCE3;
  --err:#D42746; --err-tint:#FFF2F3;
  --pra:#FC8500; --pra-text:#AD4F00;
  --tg:#229ED9; --tg-text:#12719C; --tg-bubble:#E8F4FB;   /* --tg-text держит 4,85:1 на голубом сообщении */
  --night:var(--ink); --on-night-dim:#A8B9BA;
  --lg-plate:var(--ink); --lg-school:var(--ink);
  /* legacy names used by the live scripts (test bar, cart links, person modal) */
  --accent:var(--brand); --accent-down:#005E62; --band:var(--cool); --paper-legacy:#fff;
  --r-ctl:6px; --r-ui:12px; --r-photo:6px; --r-card:4px; --r-glass:20px;
  --float:0 1px 2px rgba(4,40,42,.05), 0 14px 34px -8px rgba(4,40,42,.16);
  --float-soft:0 1px 2px rgba(4,40,42,.04), 0 8px 22px -10px rgba(4,40,42,.14);
  /* жидкое стекло. Свет под ним двух ступеней: --brand-mark (135,223,228) и --brand-glow (164,235,253) */
  --lg-blur:7px; --lg-sat:1.75;
  --lg-fill:linear-gradient(135deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,.50) 46%, rgba(255,255,255,.64) 100%);
  --lg-fill-calm:linear-gradient(135deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.52) 46%, rgba(255,255,255,.68) 100%);
  --lg-bf:blur(8px) saturate(1.8);
  --lg-sheen:linear-gradient(118deg, rgba(255,255,255,.46) 0%, rgba(255,255,255,0) 24%, rgba(255,255,255,0) 76%, rgba(255,255,255,.20) 100%);
  --lg-fill-tint:linear-gradient(135deg, rgba(222,249,250,.96) 0%, rgba(204,244,246,.72) 50%, rgba(222,249,250,.88) 100%);
  --lg-fill-ok:linear-gradient(135deg, rgba(244,255,244,.94) 0%, rgba(214,249,214,.74) 50%, rgba(238,255,238,.86) 100%);
  --lg-rim:linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.35) 30%, rgba(255,255,255,.12) 62%, rgba(255,255,255,.85) 100%);
  --lg-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -14px 22px -16px rgba(0,116,121,.30), 0 2px 5px rgba(4,40,42,.07), 0 34px 60px -30px rgba(0,116,121,.62);
  --lg-shadow-ok:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -14px 22px -16px rgba(2,109,20,.28), 0 2px 5px rgba(4,40,42,.07), 0 34px 60px -30px rgba(2,109,20,.50);
  --lg-shadow-calm:inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(255,255,255,.38), inset 0 -14px 22px -16px rgba(0,116,121,.24), 0 0 0 1px rgba(4,40,42,.05), 0 1px 2px rgba(4,40,42,.06), 0 20px 36px -24px rgba(4,40,42,.34);
  --lg-shadow-calm-ok:inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(255,255,255,.38), inset 0 -14px 22px -16px rgba(2,109,20,.24), 0 0 0 1px rgba(4,40,42,.05), 0 1px 2px rgba(4,40,42,.06), 0 20px 36px -24px rgba(4,40,42,.34);
  --ease:cubic-bezier(.2,.8,.2,1); --fast:.16s;
  --gut:clamp(20px,4.5vw,64px);
  --sec:clamp(52px,5.4vw,80px);
  --h2:clamp(29px,3.3vw,44px);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; }
body { background:var(--white); color:var(--ink); font-family:'Onest',-apple-system,'Helvetica Neue',Arial,sans-serif; font-weight:420; font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; padding-bottom:0; transition:padding-bottom var(--fast) var(--ease); }
/* запас под fixed-панель записи (её высота приходит из JS как --dock-h): не даёт подвалу
   и последнему блоку страницы навсегда остаться под панелью там, где дальше некуда прокручивать.
   Наложение НА середине прокрутки это не устраняет — так ведёт себя любая fixed-панель. */
body.has-dock-space { padding-bottom:calc(var(--dock-h, 0px) + 16px); }
::selection { background:var(--brand); color:#fff; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }
button { font:inherit; color:inherit; }
h1, h2, h3 { text-wrap:balance; }
p { text-wrap:pretty; }
:focus-visible { outline:2px solid var(--brand); outline-offset:3px; border-radius:2px; }
/* разделы, куда страница переносит фокус сама (tabindex=-1), без рамки: Safari рисовал её вокруг всего блока */
[tabindex="-1"]:focus { outline:none; }
/* клавиатурный фокус не прячется под нижней панелью */
html:has(.has-dock-space) { scroll-padding-bottom:calc(var(--dock-h, 0px) + 16px); }
.on-dark :focus-visible { outline-color:#fff; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

.wrap { max-width:1280px; margin:0 auto; padding-inline:var(--gut); }
section { padding-block:var(--sec); }
.s-head { font-weight:800; font-size:var(--h2); letter-spacing:-.024em; line-height:1.08; max-width:22ch; }
.s-lead { color:var(--dim); font-size:19px; line-height:1.55; max-width:56ch; margin-top:16px; }
.s-top { margin-bottom:clamp(32px,3.6vw,52px); }

/* ---------- жидкое стекло ----------
   Разрешено владельцем 12.10.2026. Стекло это материал объектов, которые уже были карточками, окнами
   или плавающими панелями: новых коробок оно не создаёт. Свет стоит только под стеклом.
   Стекло настоящее: размытие и насыщение фона (backdrop-filter), обод, блик и тень от толщины. Текст на
   стекле обязан проходить контраст одной заливкой, без размытия: где-то оно не отрисуется. Поэтому на
   шапке и заявке стоит только тёмный текст, а заливка под ним не прозрачнее проверенной. */
.path .ui, .ccard, .crow, .plan-card, .chat { position:relative; isolation:isolate; border:0; border-radius:var(--r-glass); background:var(--lg-fill-calm); -webkit-backdrop-filter:var(--lg-bf); backdrop-filter:var(--lg-bf); box-shadow:var(--lg-shadow-calm); }
/* блик по поверхности и пятно света, которое идёт за указателем (--mx, --my ставит glass.js) */
.path .ui::after, .ccard::after, .crow::after, .chat::after { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(18em circle at var(--mx,50%) var(--my,-60%), rgba(255,255,255,.55), rgba(255,255,255,0) 62%), var(--lg-sheen); }
/* обод: свет ловится сверху слева и снизу справа */
.stage .ui::before, .path .ui::before, .ccard::before, .crow::before, .chat::before, .plan-card::after, .dock::before { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; padding:1.5px; background:var(--lg-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events:none; }
/* свет под группой стекла: псевдоэлемент главы, без узлов в разметке и без движения */
.journey, .platform, .tg-section, .courses, .pricing { position:relative; isolation:isolate; }
.journey::before, .tg-section::before, .courses::before, .pricing::before, .pf-row::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; }

/* ---------- logo ---------- */
.mark { display:inline-flex; align-items:center; text-decoration:none; color:var(--ink); line-height:1; }
.nslogo { display:block; height:1.66em; width:13.61em; }
.on-dark { --lg-plate:#fff; --lg-non:var(--ink); --lg-school:#fff; }

/* ---------- actions: black fill, ink outline, text with arrow ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:0 26px; border-radius:var(--r-ctl); border:1px solid var(--ink); background:var(--ink); color:#fff; font-weight:600; font-size:16px; line-height:1.2; text-decoration:none; text-align:center; cursor:pointer; transition:background-color var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.btn:hover { background:var(--ink-hover); border-color:var(--ink-hover); }
.btn.outline { background:transparent; color:var(--ink); }
.btn.outline:hover { background:var(--ink); color:#fff; border-color:var(--ink); }
.btn.sm { min-height:40px; padding:0 16px; font-size:15px; }
.btn.onnight { background:#fff; color:var(--ink); border-color:#fff; }
.btn.onnight:hover { background:#E3ECEC; border-color:#E3ECEC; }
.btn.ondark-line { background:transparent; color:#fff; border-color:rgba(255,255,255,.5); }
.btn.ondark-line:hover { background:#fff; color:var(--ink); border-color:#fff; }
/* главное действие страницы: запись на консультацию. Одна и на светлом, и на тёмном: белый текст
   на бирюзе кнопки, лёгкий глянец в духе стекла. Под градиентом сплошной цвет той же ступени. */
.btn.brand { background:var(--brand-fill) linear-gradient(180deg, #088A90 0%, var(--brand-fill) 20%, #007A80 100%); border-color:#007A80; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 12px 22px -14px rgba(0,116,121,.60); }
.btn.brand:hover { background:var(--brand-fill) linear-gradient(180deg, var(--brand-fill) 0%, #00767C 100%); border-color:#00747A; }
.on-dark .btn.brand { box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 0 0 1px rgba(135,223,228,.28); }
.on-dark .btn.brand:focus-visible { outline-color:#fff; }
.textlink { display:inline; color:var(--ink); font-weight:600; font-size:16px; line-height:1.4; text-decoration:none; cursor:pointer; background:none; border:0; padding:0; }
.textlink { transition:color var(--fast) var(--ease); }
/* стрелка через неразрывный пробел: на узком экране она не уходит одна на новую строку */
.textlink::after { content:"\00A0\2192"; font-weight:500; }
.textlink.plus::after { content:"\00A0+"; }
.textlink:hover { color:var(--brand); }
.on-dark .textlink, .on-dark .textlink:hover { color:#fff; }
.undercta { font-size:14px; color:var(--dim); margin-top:14px; }

/* выбранное: бледная бирюза, бирюзовая рамка и текст («A2 выбран ✓»). Не зелёный (это «верно»)
   и не заливка главной кнопки: выбор и действие не спорят. Анимация галочки из релиза. */
.pickbtn { position:relative; isolation:isolate; }
.pickbtn.is-picked, .btn.outline.pickbtn.is-picked { background:var(--brand-tint); color:var(--brand); border-color:var(--brand); }
.pickbtn.is-picked:hover, .btn.outline.pickbtn.is-picked:hover { background:var(--brand-select); color:var(--brand); border-color:var(--brand); }
.pickbtn.is-picked .pick-label::after { content:" \2713"; }
.selection-enhanced.is-picked .pick-label::after { content:none; }
.btn.selection-enhanced { display:inline-grid; grid-template-areas:"label"; }
.selection-enhanced > .pick-label, .selection-enhanced::before, .selection-enhanced::after { grid-area:label; }
.selection-enhanced::before { content:attr(data-pick-label); visibility:hidden; pointer-events:none; }
/* кнопка своей ширины (окно программы) держит место и под «A2 выбран», и под галочку */
.btn.selection-enhanced::after { content:attr(data-picked-label); grid-area:label; visibility:hidden; pointer-events:none; }
.cpanel .btn.selection-enhanced { padding-inline:34px; }
.pick-surface { position:absolute; inset:-1px; z-index:1; display:grid; place-items:center; padding-inline:34px; border-radius:inherit; border:1px solid var(--brand); background:var(--brand-tint); color:var(--brand); pointer-events:none; clip-path:inset(0 0 0 100%); transition:clip-path .42s cubic-bezier(.22,1,.36,1); }
.is-picked > .pick-surface { clip-path:inset(0); }
.is-picked:hover > .pick-surface { background:var(--brand-select); }
.pick-mark { position:absolute; z-index:2; right:10px; top:50%; width:22px; height:22px; transform:translateY(-50%); color:var(--brand); opacity:0; pointer-events:none; transition:opacity .12s linear; }
.is-picked > .pick-mark { opacity:1; transition-delay:80ms; }
.pick-check { display:block; width:22px; height:22px; overflow:visible; }
.pick-check path { fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0; }
.pick-spark { position:absolute; left:9.5px; top:9.5px; width:3px; height:3px; border-radius:50%; background:var(--brand); opacity:0; }
.btn.lvl-done, .btn.outline.lvl-done { background:var(--brand-tint); color:var(--brand); border-color:var(--brand); }
.btn.lvl-done:hover { background:var(--brand-select); color:var(--brand); }

/* ---------- header ---------- */
/* стекло. Пункты меню стоят средними чернилами (--ink-mid): на заливке от 70% они держат 5,06:1 даже над
   чёрным и без размытия. Прозрачнее 70% заливку не делать */
header.top { position:sticky; top:0; z-index:50; background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.70)); -webkit-backdrop-filter:blur(18px) saturate(1.8); backdrop-filter:blur(18px) saturate(1.8); border-bottom:1px solid transparent; transition:border-color .2s linear, box-shadow .2s linear; }
header.top.is-scrolled { border-bottom-color:rgba(4,40,42,.07); box-shadow:inset 0 -1px 0 rgba(255,255,255,.75), 0 14px 30px -24px rgba(4,40,42,.40); }
.topbar { display:flex; align-items:center; gap:28px; height:68px; }
.topbar .mark { font-size:16.5px; margin-right:auto; }
.topnav { display:flex; gap:28px; font-size:15px; }
.topnav a { color:var(--ink-mid); text-decoration:none; padding-block:6px; transition:color var(--fast) var(--ease); }
.topnav a:hover, .topnav a[aria-current="page"] { color:var(--ink); }
.top-cta { flex:none; }
@media (max-width:860px) {
  html { scroll-padding-top:118px; }
  .topbar { flex-wrap:wrap; height:auto; gap:0 16px; padding-top:10px; }
  .topbar .mark { font-size:15px; }
  .topnav { order:3; flex-basis:100%; gap:22px; overflow-x:auto; white-space:nowrap; padding:8px 0 10px; scrollbar-width:none;
            -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent); }
  .topnav::-webkit-scrollbar { display:none; }
  .topnav a { flex:none; }
  .topnav a:last-child { padding-right:28px; }
  .top-cta { min-height:38px; padding:0 14px; font-size:14.5px; }
}

/* ---------- hero ---------- */
.hero { position:relative; isolation:isolate; background:var(--paper); padding-block:clamp(40px,4.6vw,76px) clamp(48px,5.4vw,88px); overflow:hidden; }
/* свет под карточками сцены: три размытых пятна, медленный дрейф. Первый экран утверждён владельцем, не менять */
.lg-aur { position:absolute; inset:0 0 0 38%; z-index:-1; pointer-events:none; }
.lg-aur i { position:absolute; border-radius:50%; filter:blur(56px); will-change:transform; }
.lg-aur i:nth-child(1) { left:10%; top:34%; width:42%; height:62%; background:var(--brand-mark); opacity:.48; animation:lg1 26s ease-in-out infinite alternate; }
.lg-aur i:nth-child(2) { left:38%; top:-14%; width:50%; height:74%; background:var(--brand-glow); opacity:.74; animation:lg2 31s ease-in-out infinite alternate; }
.lg-aur i:nth-child(3) { right:-4%; bottom:-16%; width:40%; height:56%; background:var(--brand-mark); opacity:.36; animation:lg3 35s ease-in-out infinite alternate; }
@keyframes lg1 { to { transform:translate(8%,10%) scale(1.12); } }
@keyframes lg2 { to { transform:translate(-10%,-8%) scale(.92); } }
@keyframes lg3 { to { transform:translate(-14%,12%) scale(1.14); } }
.hgrid { display:grid; grid-template-columns:minmax(0,46fr) minmax(0,54fr); gap:clamp(28px,4vw,64px); align-items:center; }
.hero h1 { font-weight:800; font-size:clamp(34px,3.55vw,52px); letter-spacing:-.03em; line-height:1.06; max-width:12ch; }
.hero h1 .hl-line { display:block; margin-top:.5em; font-size:.6em; line-height:1.36; letter-spacing:-.018em; max-width:none; }
.hero h1 .hl { background:var(--ink); color:#fff; padding:.06em .22em .1em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.hero .s-lead { margin-top:24px; font-size:19px; max-width:40ch; }
.cta-row { display:flex; align-items:center; flex-wrap:wrap; gap:14px 28px; margin-top:32px; }
.hero .cta-row { gap:12px; }
.hero .cta-row .btn { padding:0 22px; }

/* product stage: sizes in em so the whole scene scales with its column (1em = 16px at 600px) */
.stage-wrap { container-type:inline-size; width:100%; max-width:640px; justify-self:end; }
.stage { position:relative; width:100%; aspect-ratio:600/584; font-size:calc(100cqw / 600 * 16); }
.stage .ui { position:absolute; isolation:isolate; background:var(--lg-fill); -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)); backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-sat)); border-radius:1.25em; box-shadow:var(--lg-shadow); font-size:1em; line-height:1.4; }
/* блик, который идёт за указателем */
.stage .ui::after { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:radial-gradient(22em circle at var(--mx,18%) var(--my,-10%), rgba(255,255,255,.75), rgba(255,255,255,0) 60%); mix-blend-mode:soft-light; }
.ui-k { font-size:.8125em; color:var(--dim); font-weight:500; line-height:1.3; }
.ui-title { font-size:.9375em; font-weight:600; line-height:1.35; color:var(--ink); }
.w-err { color:var(--err); text-decoration:underline; text-decoration-thickness:.12em; text-underline-offset:.2em; text-decoration-color:var(--err); }
.w-fix { color:var(--ok); text-decoration:underline; text-decoration-thickness:.12em; text-underline-offset:.2em; }
.w-gone { color:var(--err); text-decoration:line-through; text-decoration-thickness:.08em; }
.saved { display:inline-flex; align-items:center; gap:.45em; color:var(--brand); font-size:.8125em; font-weight:600; }
.saved::before { content:""; width:.42em; height:.42em; border-radius:50%; background:currentColor; flex:none; }
.soon b { color:var(--ok); font-weight:600; }

.stage .st-cover { position:absolute; right:4.2em; top:.25em; width:8.2em; transform:rotate(5deg); filter:drop-shadow(0 .7em 1em rgba(4,40,42,.2)); }
.stage .st-cover img { width:100%; border-radius:.15em; }
.st-lesson { left:0; top:1.8em; width:25em; padding:1.25em 1.35em 1.1em; }
.st-lesson .ui-k { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.15em 1em; }
.st-lesson .ui-title { margin-top:.4em; }
.st-answer { margin-top:.85em; padding:.75em .9em; border-radius:.5em; background:rgba(255,255,255,.58); border:1px solid rgba(255,255,255,.7); box-shadow:inset 0 1px 2px rgba(4,40,42,.06); font-size:1.25em; font-weight:600; letter-spacing:-.01em; line-height:1.3; }
.st-teacher { display:flex; gap:.7em; align-items:flex-start; margin-top:1em; padding-top:.9em; border-top:1px solid rgba(4,40,42,.10); }
.st-teacher img { width:2.5em; height:2.5em; border-radius:50%; object-fit:cover; flex:none; }
.st-teacher b { display:block; font-size:.875em; font-weight:600; }
.st-teacher span { display:block; font-size:.9375em; }
.st-profile { left:5em; top:20.6em; width:15.5em; padding:1.05em 1.2em 1.1em; }
.st-pair { margin-top:.45em; font-size:1.375em; font-weight:700; letter-spacing:-.015em; display:flex; flex-wrap:wrap; gap:0 .45em; align-items:baseline; line-height:1.25; }
.st-pair + .st-pair { margin-top:.15em; }
.stage .st-pair { font-size:1.25em; }
.st-profile .ui-sub { margin-top:.1em; font-size:.875em; color:var(--dim); }
.st-profile .saved { margin-top:.7em; }
.st-ex { right:0; top:25.2em; width:21em; padding:1.05em 1.2em 1.05em; }
/* упражнение с верным ответом: зелёное стекло */
.stage .st-ex { background:linear-gradient(135deg, rgba(240,255,240,.80) 0%, rgba(205,247,205,.50) 50%, rgba(236,255,236,.66) 100%); box-shadow:var(--lg-shadow-ok); }
.st-ex .ui-sent { margin-top:.5em; font-size:1em; white-space:nowrap; font-weight:600; line-height:1.35; }
.gap { display:inline-block; min-width:2.4em; border-bottom:.1em solid var(--ok); text-align:center; line-height:1.15; }
.gap span { color:var(--ok); }
.chips { display:flex; gap:.5em; margin-top:.75em; }
.chip { display:inline-flex; align-items:center; gap:.35em; padding:.3em .75em; border-radius:.4em; border:1px solid rgba(4,40,42,.14); font-size:.875em; font-weight:600; background:rgba(255,255,255,.7); }
.chip.is-ok { border-color:var(--ok); color:var(--ok); background:rgba(255,255,255,.8); }
.chip.is-ok::after { content:"\2713"; }
.st-ex .soon { display:flex; align-items:center; gap:.55em; margin-top:.85em; padding-top:.8em; border-top:1px solid rgba(4,40,42,.10); font-size:.8125em; color:var(--dim); }
.st-ex .soon img { width:1.6em; height:1.6em; border-radius:50%; }
.st-trail { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
/* fixDE: two bottom-to-left connectors, radius 16 in the proportional 600x584 scene.
   Card heights: lesson 16.625em + 3px, profile 8.7875em, exercise 10.146875em + 3px.
   The 297 start sits at most 1.3px inside the lesson rim; no stroke crosses a plate. */
.st-trail path { fill:none; stroke:var(--brand-line); stroke-width:1.5; stroke-linecap:butt; stroke-dasharray:1; stroke-dashoffset:0; }

/* one-shot entrance in pure CSS (no script needed to become visible, no flash of the final
   frame). Under 5 s, so no pause control is required. Reduced motion shows the final frame. */
@media (prefers-reduced-motion:no-preference) {
  .stage .st-cover { animation:st-cover .8s var(--ease) both; }
  .stage .st-lesson { animation:st-in .7s var(--ease) .15s both; }
  .stage .st-answer .w-err { animation:st-err .3s linear .95s both; }
  .stage .st-teacher { animation:st-fade .45s var(--ease) 1.45s both; }
  .stage .st-trail path { animation:st-draw 1.6s cubic-bezier(.45,0,.2,1) 2s both; }
  .stage .st-profile { animation:st-in .7s var(--ease) 2.45s both; }
  .stage .st-ex { animation:st-in .7s var(--ease) 3.05s both; }
  .stage .chip.is-ok { animation:st-ok .3s linear 3.75s both; }
  .stage .chip.is-ok::after { animation:st-okmark .3s linear 3.75s both; }
  .stage .gap { animation:st-gapline .3s linear 4s both; }
  .stage .gap span { animation:st-fade .35s linear 4s both; }
}
@keyframes st-in { from { opacity:0; transform:translateY(.8em); } }
@keyframes st-cover { from { opacity:0; transform:rotate(5deg) translateY(.8em); } }
@keyframes st-fade { from { opacity:0; } }
@keyframes st-err { from { color:var(--ink); text-decoration-color:transparent; } }
@keyframes st-draw { from { stroke-dashoffset:1; } }
@keyframes st-ok { from { border-color:rgba(4,40,42,.14); color:var(--ink); background:rgba(255,255,255,.7); } }
@keyframes st-okmark { from { color:transparent; } }
@keyframes st-gapline { from { border-bottom-color:var(--ink); } }

@media (min-width:901px) and (max-width:1180px) {
  .hgrid { grid-template-columns:minmax(0,40fr) minmax(0,60fr); gap:28px; }
  .hero h1 { font-size:clamp(32px,3.5vw,40px); }
  .hero .s-lead { font-size:17.5px; }
}
@media (max-width:900px) {
  .hgrid { grid-template-columns:minmax(0,1fr); }
  .hero h1 { max-width:none; }
  .stage-wrap { justify-self:center; max-width:560px; }
  /* текст и сцена идут столбиком: свет остаётся под карточками и не заходит под абзац */
  .lg-aur { inset:44% 0 0 0; }
  .lg-aur i:nth-child(1) { left:-10%; top:8%; width:70%; height:60%; }
  .lg-aur i:nth-child(2) { left:30%; top:30%; width:80%; height:60%; }
  .lg-aur i:nth-child(3) { display:none; }
}
@media (max-width:620px) {
  .hero h1 { font-size:clamp(31px,8.4vw,38px); }
  .hero h1 .hl-line { font-size:.64em; }
  .hero .s-lead { font-size:17.5px; }
  .hero .cta-row { flex-direction:column; align-items:stretch; gap:14px; }
  .hero .cta-row .btn { width:100%; }
  .hero .cta-row .textlink { align-self:center; }
  /* phone: the same story as a column of real-size cards, no trail */
  .stage-wrap { container-type:normal; margin-top:8px; }
  .stage { aspect-ratio:auto; font-size:15px; display:grid; gap:12px; }
  .stage .ui, .stage .st-cover { position:relative; left:auto; right:auto; top:auto; width:auto; }
  .stage .st-cover { display:none; }
  .st-profile { margin-left:18px; }
  .st-ex { margin-left:36px; }
  .st-trail { display:none; }
  .st-ex .ui-sent { white-space:normal; }
}

/* ---------- proof strip ---------- */
.proof { padding-block:clamp(26px,2.6vw,36px); border-bottom:1px solid var(--line-soft); }
.proof-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; }
/* min-width:0 на самой ячейке: без него авто-минимум grid-элемента равен min-content его
   содержимого, и длинное слово («филологических») раздвигало колонку шире 1fr и обрезалось
   справа под overflow-x:clip — с короткими подписями это было незаметно, тут стало реальным */
.proof-list li { min-width:0; padding:4px 24px; border-left:1px solid var(--line); }
.proof-list li:first-child { padding-left:0; border-left:0; }
.proof-list b { display:block; font-size:clamp(20px,1.8vw,26px); font-weight:800; letter-spacing:-.02em; line-height:1.2; overflow-wrap:break-word; }
.proof-list span { display:block; margin-top:4px; font-size:15px; color:var(--dim); line-height:1.4; }
@media (max-width:860px) {
  .proof-list { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:18px; }
  .proof-list li:nth-child(3) { padding-left:0; border-left:0; }
}
@media (max-width:380px) {
  .proof-list li { padding-inline:14px; } .proof-list span { font-size:14px; }
  .topbar { column-gap:10px; }
  .topbar .mark { font-size:11.5px; }
  .top-cta { padding:0 11px; font-size:14px; }
}
@media (max-width:360px) {
  :root { --gut:16px; }
}


/* ---------- «Узнаёте себя?»: боль крупно, ответ школы рядом ---------- */
.pains { margin-top:clamp(28px,3.4vw,48px); border-top:1px solid var(--line); }
.pain-row { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(24px,5vw,88px); row-gap:10px; align-items:baseline; padding-block:clamp(26px,2.8vw,40px); border-bottom:1px solid var(--line); }
.pain-row dt { font-size:clamp(24px,2.55vw,36px); font-weight:700; letter-spacing:-.022em; line-height:1.16; text-wrap:balance; }
.pain-row dd { font-size:18px; color:var(--dim); line-height:1.6; max-width:44ch; }
/* завершающая фраза стоит ровно посередине между линией последней «боли» и краем секции:
   сверху отступ равен нижнему полю секции, своего нижнего отступа нет */
.pain-claim { margin:var(--sec) auto 0; text-align:center; }
.pc-main { display:block; font-size:clamp(24px,2.55vw,36px); font-weight:700; line-height:1.35; letter-spacing:-.025em; text-wrap:balance; }
.pc-not { color:var(--dim); white-space:nowrap; }
.pc-yes { color:var(--ink); background:var(--brand-select); padding:.02em .16em .06em; border-radius:.14em; -webkit-box-decoration-break:clone; box-decoration-break:clone; white-space:nowrap; }
.pc-sub { display:block; margin-top:14px; font-size:18px; line-height:1.55; color:var(--dim); }
.pain-claim.is-italic .pc-main { font-style:italic; font-synthesis:style; font-weight:600; }
@media (max-width:760px) {
  .pain-row { grid-template-columns:minmax(0,1fr); }
  .pain-row dd { font-size:17px; }
}

/* ---------- one error, the whole path ---------- */
.journey { background:var(--cool); }
/* тихий общий свет главы */
.journey::before { background:
  radial-gradient(ellipse 66% 52% at 52% 48%, rgba(164,235,253,.26), rgba(164,235,253,.10) 46%, rgba(164,235,253,0) 78%); }
.path-box { position:relative; }
.path { position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); column-gap:clamp(16px,1.8vw,28px); row-gap:0; list-style:none; }
.path > li { position:relative; display:grid; grid-row:span 3; grid-template-rows:subgrid; align-content:start; }
.path .ui { padding:18px 18px 16px; min-height:142px; font-size:16px; }
/* последний шаг, верный вариант закреплён: зелёное стекло, как упражнение на первом экране */
.path > li:last-child .ui { background:var(--lg-fill-ok); box-shadow:var(--lg-shadow-calm-ok); }
.path h3 { margin-top:18px; font-size:18px; font-weight:700; line-height:1.3; letter-spacing:-.01em; }
.path p { margin-top:6px; font-size:15.5px; color:var(--dim); line-height:1.55; }
.path .p-sent { margin-top:8px; font-size:20px; font-weight:600; line-height:1.3; letter-spacing:-.01em; }
.path .p-teach { display:flex; gap:12px; align-items:flex-start; margin-top:10px; }
.path .p-teach img { width:48px; height:48px; border-radius:50%; object-fit:cover; flex:none; }
.path .p-teach b { display:block; font-size:14px; font-weight:600; }
.path .p-teach span { display:block; font-size:16px; line-height:1.4; }
.path .st-pair { font-size:20px; margin-top:8px; }
.path .st-pair + .st-pair { margin-top:2px; }
.p-fix s { color:var(--err); text-decoration-thickness:.08em; }
.p-fix ins { color:var(--ok); text-decoration:none; font-weight:700; }
.path .p-fix { font-size:18px; line-height:1.4; }
.path .p-fix + .p-teach { margin-top:12px; padding-top:12px; border-top:1px solid rgba(4,40,42,.10); }
.path .p-fix + .p-teach img { width:36px; height:36px; }
.path .p-fix + .p-teach span { font-size:14.5px; color:var(--dim); }
.path .saved { font-size:13px; margin-top:10px; }
.path .soon-line { margin-top:10px; font-size:14px; color:var(--dim); }
.soon b, .chat-note b { white-space:nowrap; }
/* Прозрачность только на самой поверхности и подписях: предок стекла остаётся непрозрачным. */
.path > li { --path-delay:0s; }
.path > li:nth-child(2) { --path-delay:.14s; }
.path > li:nth-child(3) { --path-delay:.28s; }
.path > li:nth-child(4) { --path-delay:.42s; }
@media (prefers-reduced-motion:no-preference) {
  .path > li.will-enter > :is(.ui, h3, p) { opacity:0; transform:translateX(-22px); }
  .path > li.will-enter.is-in > :is(.ui, h3, p) { opacity:1; transform:none; transition:opacity .45s var(--ease) var(--path-delay), transform .65s var(--ease) var(--path-delay); }
}
@media (max-width:980px) {
  .path { grid-template-columns:1fr 1fr; row-gap:40px; }
  .path > li { display:flex; flex-direction:column; grid-row:auto; }
  .path > li:nth-child(3) { --path-delay:0s; }
  .path > li:nth-child(4) { --path-delay:.14s; }
}
@media (max-width:620px) {
  .path { grid-template-columns:minmax(0,1fr); row-gap:28px; }
  .path > li:nth-child(n) { --path-delay:0s; }
  .path .ui { min-height:0; }
}

/* ---------- people ---------- */
.lead-person { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,4.4vw,72px); align-items:center; }
.portrait { margin:0; justify-self:start; width:100%; max-width:380px; }
.portrait img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-photo); background:var(--cool); }
.person-role-k { font-size:15px; font-weight:600; color:var(--dim); }
.person-name { margin-top:6px; font-size:clamp(28px,2.7vw,38px); font-weight:800; letter-spacing:-.022em; line-height:1.1; }
.person-role { margin-top:8px; font-size:18px; color:var(--dim); }
.facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 32px; margin-top:28px; list-style:none; max-width:560px; }
.facts li { min-width:0; }   /* см. .proof-list li: тот же авто-минимум grid-элемента от min-content */
/* нечётный последний факт (у Светланы теперь три, не четыре, после ухода строки про ЕГЭ) занимает
   обе колонки, а не оставляет пустую ячейку рядом с собой */
.facts li:last-child:nth-child(odd) { grid-column:1 / -1; }
.facts b { display:block; font-size:24px; font-weight:800; letter-spacing:-.02em; line-height:1.15; overflow-wrap:break-word; }
.facts span { display:block; margin-top:3px; font-size:15px; color:var(--dim); line-height:1.4; }
/* узкий телефон: «преподавательского» не помещалось в полколонки */
@media (max-width:400px) { .facts, .second-person .facts { grid-template-columns:minmax(0,1fr); gap:14px; } }
.person-text { margin-top:26px; font-size:17px; line-height:1.6; max-width:54ch; }
.person-links { display:flex; flex-wrap:wrap; gap:14px 30px; margin-top:26px; }
.second-person { display:grid; grid-template-columns:200px minmax(0,1fr); gap:clamp(24px,3vw,44px); align-items:center; margin-top:clamp(40px,4.4vw,64px); padding-top:clamp(36px,4vw,56px); border-top:1px solid var(--line); }
.second-person img { width:200px; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-photo); background:var(--cool); }
.second-person .person-name { font-size:clamp(24px,2.1vw,28px); }
.second-person .person-role { font-size:17px; }
.second-person .facts { margin-top:18px; }
.second-person .facts b { font-size:19px; }
.second-person .person-text { margin-top:16px; font-size:16px; color:var(--dim); }
@media (max-width:900px) {
  .lead-person { grid-template-columns:minmax(0,1fr); }
  .portrait { max-width:340px; }
}
@media (max-width:560px) {
  .portrait { max-width:none; }
  .second-person { grid-template-columns:112px minmax(0,1fr); align-items:start; }
  .second-person img { width:112px; }
  .second-person .facts, .second-person .person-text { grid-column:1 / -1; }
  .second-person > div { display:contents; }
  .second-person .sp-head { grid-column:2; align-self:center; }
  .facts b { font-size:21px; }
}

/* ---------- platform: show first, caption second ---------- */
.platform { background:var(--lav); }
.pf-row { position:relative; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,4vw,64px); align-items:center; }
/* свет за снимком: у обычного ряда справа сверху, у перевёрнутого слева снизу. Поле света шире ряда на поле
   страницы и выше его на пятую часть: пятна гаснут внутри поля и не обрезаются */
.pf-row::before { inset:-20% calc(-1 * var(--gut)); background:
  radial-gradient(ellipse 24% 34% at 76% 34%, rgba(135,223,228,.80), rgba(135,223,228,.32) 46%, rgba(135,223,228,0) 100%),
  radial-gradient(ellipse 26% 34% at 52% 66%, rgba(255,255,255,.95), rgba(255,255,255,.40) 46%, rgba(255,255,255,0) 100%); }
.pf-row.rev::before { background:
  radial-gradient(ellipse 24% 34% at 24% 66%, rgba(135,223,228,.80), rgba(135,223,228,.32) 46%, rgba(135,223,228,0) 100%),
  radial-gradient(ellipse 26% 34% at 48% 34%, rgba(255,255,255,.95), rgba(255,255,255,.40) 46%, rgba(255,255,255,0) 100%); }
.pf-row + .pf-row { margin-top:clamp(44px,5vw,80px); }
.pf-row.rev { grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.pf-row.rev .pf-shot { order:-1; }
.pf-shot { margin:0; }
.platform .s-top { margin-bottom:clamp(36px,4vw,60px); }
/* снимок настоящий и непрозрачный: стекла на нём нет, он стоит над светом в тонкой раме */
.window.crop { background:#fff; }
.pf-shot.window { border-radius:14px; border:1px solid rgba(4,40,42,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(4,40,42,.06), 0 22px 40px -26px rgba(4,40,42,.36); }
.pf-shot.tall { max-width:500px; width:100%; justify-self:center; }
.pf-row > .pf-text h3 { font-size:clamp(24px,2.3vw,32px); font-weight:800; letter-spacing:-.02em; line-height:1.15; }
.pf-row > .pf-text p { font-size:18px; margin-top:14px; }
.window { background:var(--cool); border-radius:var(--r-ui); border:1px solid var(--line-soft); box-shadow:var(--float-soft); overflow:hidden; }
.window.fit { position:relative; aspect-ratio:16/10.6; }
.window.fit picture { position:absolute; inset:0; display:block; }
.window.fit img { width:100%; height:100%; object-fit:contain; }
.pf-pair { display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,40px); margin-top:clamp(40px,4.6vw,72px); }
.pf-fig { margin:0; }
.pf-fig .pf-text { margin-top:22px; }
.window img { width:100%; }
.pf-text h3 { font-size:22px; font-weight:700; letter-spacing:-.012em; line-height:1.25; }
.pf-text p { margin-top:10px; font-size:17px; color:var(--dim); line-height:1.6; max-width:44ch; }
.pf-text .s-head + .s-lead { margin-bottom:0; }
.pf-text .thesis { margin-top:clamp(28px,3vw,40px); padding-top:24px; border-top:1px solid var(--line); }
.tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; list-style:none; }
.tiles figure { margin:0; }
.tiles img { width:100%; aspect-ratio:1036/1160; object-fit:cover; object-position:top; border-radius:8px; border:1px solid var(--line-soft); background:#fff; }
.tiles figcaption { margin-top:8px; font-size:14px; color:var(--dim); line-height:1.35; }
@media (max-width:900px) {
  .pf-pair { grid-template-columns:minmax(0,1fr); }
  .pf-row, .pf-row.rev { grid-template-columns:minmax(0,1fr); }
  .pf-row.rev .pf-shot { order:0; }
  .pf-row::before, .pf-row.rev::before { inset:24% calc(-1 * var(--gut)) -10%; background:radial-gradient(ellipse 46% 46% at 54% 52%, rgba(135,223,228,.74), rgba(135,223,228,.30) 46%, rgba(135,223,228,0) 100%); }
  .tiles { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ---------- Telegram ---------- */
.tg-section { border-top:1px solid var(--line-soft); background:var(--white); }
.tg-word { color:var(--tg); white-space:nowrap; }
.tg-word svg { display:inline-block; width:.74em; height:.74em; margin-left:.12em; vertical-align:-.02em; }
.bots { display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.4vw,36px); }
.bot { display:flex; flex-direction:column; }
.bot-head { display:flex; align-items:center; gap:14px; min-height:64px; }
.bot-head img { width:52px; height:52px; border-radius:50%; flex:none; }
.bot-head b { display:block; font-size:20px; font-weight:700; line-height:1.2; }
.bot-head span { display:block; font-size:15px; color:var(--dim); line-height:1.4; margin-top:2px; }
.tg-section::before { background:
  radial-gradient(ellipse 30% 40% at 30% 66%, rgba(164,235,253,.62), rgba(164,235,253,.22) 48%, rgba(164,235,253,0) 76%),
  radial-gradient(ellipse 30% 40% at 74% 58%, rgba(135,223,228,.44), rgba(135,223,228,.16) 48%, rgba(135,223,228,0) 76%); }
/* панель чата тонирована, иначе белые сообщения на ней не видны */
.chat { margin-top:20px; flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; padding:24px 22px 24px; background:var(--lg-fill-tint); }
.msg { max-width:82%; padding:10px 14px 11px; border-radius:14px; background:#fff; font-size:16px; line-height:1.45; box-shadow:0 1px 1px rgba(4,40,42,.06); }
.msg.in { align-self:flex-start; border-bottom-left-radius:5px; }
.msg.out { align-self:flex-end; background:var(--tg-bubble); border-bottom-right-radius:5px; }
.msg .m-line { display:block; }
.msg .m-muted { color:var(--dim); }
.msg.voice { display:flex; align-items:center; gap:12px; min-width:240px; }
.vplay { width:38px; height:38px; border-radius:50%; background:var(--tg); display:grid; place-items:center; flex:none; }
.vplay::before { content:""; margin-left:3px; border-style:solid; border-width:7px 0 7px 11px; border-color:transparent transparent transparent #fff; }
.wave { display:flex; align-items:center; gap:2.5px; height:26px; flex:1; }
.wave i { display:block; width:3px; border-radius:2px; background:#7FBFE3; }
.voice-t { font-size:13px; color:var(--tg-text); font-variant-numeric:tabular-nums; }
.score { font-size:22px; font-weight:800; letter-spacing:-.01em; }
.kbd { align-self:flex-start; max-width:82%; width:100%; }
.kbd span { display:block; text-align:center; padding:10px 14px; border-radius:10px; background:rgba(255,255,255,.78); font-size:15px; font-weight:500; color:var(--ink); }
.chat-note { align-self:center; margin-top:4px; padding:5px 12px; border-radius:999px; background:rgba(255,255,255,.7); font-size:13.5px; color:var(--dim); }
.chat-note b { color:var(--ok); font-weight:600; }
.bot-more { margin-top:18px; }
@media (min-width:861px) {
  /* соседние боты: общие линии названий, начала чатов и ссылок при любой длине описания */
  .bots { grid-template-rows:auto 1fr auto; row-gap:0; }
  .bot { display:grid; grid-row:span 3; grid-template-rows:subgrid; }
  .bot-head { align-items:flex-start; }
  .bot-head img { align-self:center; }
}
@media (max-width:860px) {
  .bots { grid-template-columns:minmax(0,1fr); gap:44px; }
  .chat { min-height:0; }
  .tg-section::before { display:none; }
  /* Свет в строке чата: он следует за высотой панели, а не за высотой главы. */
  .bot { position:relative; display:grid; grid-template-rows:auto 1fr auto; grid-template-columns:minmax(0,1fr); }
  .bot > * { grid-column:1; }
  .bot-head { grid-row:1; }
  .bot .chat { grid-row:2; }
  .bot-more { grid-row:3; }
  .bot::before { content:""; grid-area:2 / 1; margin-top:20px; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 60% 48% at 50% 50%, rgba(164,235,253,.50), rgba(164,235,253,.16) 48%, rgba(164,235,253,0) 80%); }
  .bot:nth-child(2)::before { background:radial-gradient(ellipse 60% 48% at 50% 50%, rgba(135,223,228,.42), rgba(135,223,228,.14) 48%, rgba(135,223,228,0) 80%); }
}
@media (max-width:420px) { .chat { padding:18px 14px 20px; } .msg { max-width:90%; font-size:15.5px; } .msg.voice { min-width:0; } }

/* ---------- courses: compact catalogue on the home page ---------- */
.courses { background:var(--paper); }
.courses::before { background:
  radial-gradient(ellipse 36% 30% at 24% 44%, rgba(135,223,228,.34), rgba(135,223,228,.12) 48%, rgba(135,223,228,0) 74%),
  radial-gradient(ellipse 40% 34% at 78% 62%, rgba(164,235,253,.56), rgba(164,235,253,.20) 48%, rgba(164,235,253,0) 74%); }
.cgrid4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); }
.ccard { display:flex; flex-direction:column; padding:22px 22px 20px; transition:box-shadow var(--fast) var(--ease); }
.ccard:hover { box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.38), inset 0 -12px 20px -16px rgba(0,116,121,.26), 0 0 0 1px rgba(0,116,121,.20), 0 1px 3px rgba(4,40,42,.05), 0 30px 50px -30px rgba(0,116,121,.58); }
/* выбранный курс: бирюзовая кромка и тон выбранного под стеклом */
.ccard:has(.is-picked) { background:var(--lg-fill-tint); box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,0), inset 0 -14px 22px -16px rgba(0,116,121,0), 0 0 0 1.5px var(--brand), 0 1px 2px rgba(4,40,42,0), 0 26px 46px -30px rgba(0,116,121,.55); }
.ccard .cbook { display:flex; justify-content:center; align-items:flex-end; height:230px; padding-bottom:8px; perspective:900px; }
.ccard .bk { width:148px; transform:rotateY(-14deg); transform-style:preserve-3d; transition:transform .3s var(--ease); box-shadow:0 16px 28px -10px rgba(4,40,42,.38); }
.ccard:hover .bk { transform:rotateY(-4deg); }
.ccard .bk img { width:100%; }
.course-meta { display:flex; gap:10px; margin-top:18px; font-size:14px; color:var(--dim); }
.course-meta span:first-child { color:var(--ink); font-weight:700; }
.chead { display:block; margin-top:6px; font-size:19px; font-weight:800; letter-spacing:-.012em; line-height:1.2; }
.ccard .clead { margin-top:8px; font-size:15px; color:var(--dim); line-height:1.5; }
.ccard .ccopy { display:flex; flex-direction:column; flex:1; min-width:0; }
.ccard .course-foot { margin-top:auto; padding-top:16px; }
.ccard .morebtn { font-size:15px; }
.ccard .morebtn::before { content:""; position:absolute; inset:0; }
.ccard .course-detail, .ccard .course-hidden { display:none; }
.cgrid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.6vw,22px); margin-top:clamp(14px,1.6vw,22px); }
.picked-note { display:none; font-size:13px; font-weight:600; color:var(--brand); }
.ccard:has(.is-picked) .picked-note { display:inline; }
.ccard.wide .course-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ccard.wide { flex-direction:row; gap:22px; align-items:center; }
.ccard.wide .cbook { height:auto; width:118px; flex:none; padding:0; }
.ccard.wide .bk { width:108px; }
.ccard.wide .ccopy { display:flex; flex-direction:column; min-height:100%; flex:1; }
.ccard.wide .course-meta { margin-top:0; }
.cgroup { margin:clamp(30px,3.4vw,46px) 0 14px; font-size:15px; font-weight:600; color:var(--dim); }
/* кнопка выбора над ссылкой-подложкой «Программа курса», которая делает кликабельной всю карточку;
   у выбранной подписи поле под галочку с обеих сторон, чтобы текст оставался по центру */
.ccard .course-purchase { position:relative; z-index:2; width:100%; margin-top:14px; min-height:46px; padding:0 14px; font-size:15px; }
.ccard .btn.selection-enhanced { display:grid; }
/* рабочие курсы на главной как в 23.09: без кнопки выбора (правило сильнее строки выше) */
.ccard.wide .course-purchase, .ccard.wide .btn.selection-enhanced { display:none; }
.courses-foot { display:flex; flex-wrap:wrap; align-items:center; gap:16px 30px; margin-top:clamp(28px,3vw,40px); }
@media (max-width:1080px) { .cgrid4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .cgrid2 { grid-template-columns:minmax(0,1fr); } }
@media (max-width:520px) {
  .cgrid4 { grid-template-columns:minmax(0,1fr); }
  .ccard { flex-direction:row; gap:18px; align-items:flex-start; padding:18px; }
  .ccard .cbook { height:auto; width:96px; flex:none; padding:0; }
  .ccard .bk, .ccard.wide .bk { width:92px; transform:none; }
  .ccard .ccopy { display:flex; flex-direction:column; flex:1; min-width:0; }
  .ccard .course-meta { margin-top:0; }
  /* телефон: кнопка выбора на всю ширину карточки под обложкой и текстом, иначе «A2 выбран» не помещается */
  .ccard:not(.wide) { display:grid; grid-template-columns:96px minmax(0,1fr); gap:0 18px; align-items:start; }
  .ccard:not(.wide) .cbook { grid-row:1 / span 4; }
  .ccard:not(.wide) .ccopy { display:contents; }
  .ccard:not(.wide) .ccopy > * { grid-column:2; }
  .ccard:not(.wide) .course-foot { padding-top:10px; }
  .ccard:not(.wide) .ccopy > .course-purchase { grid-column:1 / -1; }
  .ccard.wide .cbook { width:96px; }
  .ccard.wide { gap:18px; align-items:flex-start; }
}

/* full catalogue page */
.catalog { display:grid; gap:18px; }
.crow { display:grid; grid-template-columns:260px minmax(0,1fr); gap:clamp(24px,3.4vw,56px); align-items:start; padding:clamp(24px,3vw,40px); }
.crow:has(.is-picked) { background:var(--lg-fill-tint); box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1.5px var(--brand), 0 26px 46px -30px rgba(0,116,121,.55); }
.crow .cbook { display:flex; justify-content:center; perspective:900px; padding-top:8px; }
.crow .bk { width:200px; transform:rotateY(-14deg); transition:transform .3s var(--ease); box-shadow:0 18px 32px -10px rgba(4,40,42,.38); }
.crow:hover .bk { transform:rotateY(-4deg); }
.crow .course-meta { margin-top:0; }
.crow .chead { font-size:24px; margin-top:8px; }
.crow .clead { margin-top:10px; font-size:18px; font-weight:600; line-height:1.45; }
.crow .course-detail { margin-top:14px; color:var(--dim); font-size:16px; line-height:1.6; }
.crow .course-detail p + p { margin-top:10px; }
.crow .course-detail b { color:var(--ink); font-weight:600; }
.cfacts { display:grid; grid-template-columns:repeat(4,minmax(0,auto)); justify-content:start; gap:14px 34px; margin-top:20px; font-size:14px; color:var(--dim); }
.cfacts b { display:block; color:var(--ink); font-weight:700; font-size:16px; }
.course-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px; margin-top:24px; }
@media (max-width:860px) { .cfacts { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .crow { grid-template-columns:minmax(0,1fr); } .crow .bk { width:150px; } .course-actions .btn { width:100%; } }

/* ---------- отзывы: сразу после механизма, до выбора курса ----------
   26.09: карточки голосового/видео отзыва вели в Telegram, а обещали плеер на месте — убраны (аудит
   26.09); один текстовый отзыв Владимира остаётся, ссылка называет, что ведёт вовне, плюс общая ссылка
   на канал. Второй колонки больше нет — блок читается как один сфокусированный отзыв, не витрина. */
.voices { border-top:1px solid var(--line-soft); }
.voices .wrap { position:relative; }
.vq { margin:0; max-width:640px; }
.vq blockquote { margin:0; }
.vq blockquote p { font-size:clamp(21px,2vw,27px); font-weight:500; line-height:1.4; letter-spacing:-.012em; }
.vq figcaption { margin-top:22px; }
.vq figcaption b { display:block; font-size:17px; font-weight:700; }
.vq figcaption span { display:block; margin-top:2px; font-size:15px; color:var(--dim); }
.vq-more { margin-top:16px; }
.vq-channel { margin-top:28px; padding-top:24px; border-top:1px solid var(--line-soft); }
/* Реплика из непрозрачных слоёв: перспектива внутри въезжающей группы сохраняет толщину при проявлении. */
.bub { display:none; position:absolute; right:calc(var(--gut) + 12px); top:50%; width:320px; height:320px; margin-top:-160px; pointer-events:none; }
.bub-entry { position:absolute; inset:0; perspective:1100px; }
.bub-3d { position:absolute; inset:12px 0 8px; transform-style:preserve-3d; transform:rotateY(-24deg) rotateX(8deg) rotateZ(-5deg); }
.bub svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.bub-floor { position:absolute; left:15%; right:5%; bottom:0; height:28px; border-radius:50%; background:var(--petrol-ink); opacity:.20; filter:blur(16px); }
.bub-dot { position:absolute; inset:0; transform-style:preserve-3d; }
.bub-dot-depth { position:absolute; inset:0; transform-style:preserve-3d; }
@media (min-width:1100px) and (max-width:1279px) {
  .bub { display:block; width:250px; height:250px; margin-top:-125px; }
}
@media (min-width:1280px) { .bub { display:block; } }

/* ---------- pricing ---------- */
.pricing { border-top:1px solid var(--line-soft); }
.pricing-help { margin-top:18px; }
.pricing-scroll { position:relative; isolation:isolate; margin-top:clamp(28px,3vw,40px); }
/* колонка рекомендованного тарифа: стеклянная плита на всю высоту таблицы. Ширины колонок заданы
   table-layout:fixed: названия строк 21%, остальное поровну на четыре тарифа, Community третий */
.pricing-scroll::before { content:""; position:absolute; z-index:-1; top:-10px; bottom:-10px; left:60.5%; width:19.75%; border-radius:var(--r-glass); pointer-events:none;
  background:var(--lg-sheen), var(--lg-fill-tint); -webkit-backdrop-filter:var(--lg-bf); backdrop-filter:var(--lg-bf);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1.5px rgba(255,255,255,.55), 0 0 0 1px rgba(0,116,121,.14), 0 30px 54px -30px rgba(0,116,121,.55); }
.pricing::before { background:radial-gradient(ellipse 34% 48% at 70% 60%, rgba(164,235,253,.46), rgba(164,235,253,.16) 48%, rgba(164,235,253,0) 78%); }
table.plans { border-collapse:collapse; width:100%; table-layout:fixed; }
table.plans th, table.plans td { text-align:left; padding:14px 18px; border-bottom:1px solid var(--line); font-size:15.5px; vertical-align:top; }
table.plans tr:first-child th { position:relative; padding-top:40px; font-weight:700; font-size:18px; border-bottom:2px solid var(--ink); }
table.plans th.rowname { width:21%; }
table.plans th small { display:block; font-weight:420; font-size:14px; color:var(--dim); margin-top:2px; }
table.plans .price { font-weight:700; font-size:20px; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.plans .rowname { color:var(--dim); font-size:14.5px; }
table.plans .no { color:var(--dim); }
table.plans th:nth-child(4), table.plans td:nth-child(4) { border-bottom-color:rgba(0,116,121,.16); }
table.plans th:nth-child(4)::before { content:"ХИТ ПРОДАЖ"; position:absolute; top:16px; left:18px; color:var(--brand); font-size:12px; font-weight:600; letter-spacing:.05em; }
table.plans .ctarow td { border-bottom:0; padding-top:20px; padding-bottom:22px; }
.ctarow .btn { display:flex; width:100%; min-height:48px; padding:0 12px; font-size:15px; }
.ctarow .btn.selection-enhanced, .plan-card .btn.selection-enhanced { display:grid; }
.plans-mobile { display:none; }
.plan-card { display:flex; flex-direction:column; padding:22px; }
.plan-card.recommended { background:var(--lg-fill-tint); }
.plan-card.recommended::before { content:"ХИТ ПРОДАЖ"; display:block; margin-bottom:6px; color:var(--brand); font-size:12px; font-weight:600; letter-spacing:.05em; }
.plan-card h3 { font-size:22px; line-height:1.15; }
.plan-card .plan-sub { color:var(--dim); font-size:14px; margin-top:3px; }
.plan-list { list-style:none; margin:18px 0; flex:1; }
.plan-list li { border-top:1px solid var(--line); padding:10px 0; font-size:15px; }
.plan-card.recommended .plan-list li { border-top-color:rgba(0,116,121,.16); }
.plan-list span { color:var(--dim); display:block; font-size:13px; }
.plan-card .btn { width:100%; }
@media (max-width:1000px) {
  .pricing-scroll { display:none; }
  .plans-mobile { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:28px; }
}
@media (max-width:640px) { .plans-mobile { grid-template-columns:minmax(0,1fr); } }

/* ---------- final ---------- */
.final { background:var(--night); color:#fff; }
.final h2 { font-weight:800; font-size:clamp(30px,3.6vw,48px); letter-spacing:-.024em; line-height:1.06; max-width:18ch; }
.final p { color:var(--on-night-dim); max-width:48ch; margin:16px 0 30px; font-size:18px; }
footer { background:var(--white); }
.ftr { display:flex; align-items:center; flex-wrap:wrap; gap:14px 28px; padding-block:30px; font-size:14px; color:var(--dim); }
.ftr .mark { font-size:14px; margin-right:auto; }
.ftr a { color:var(--dim); text-decoration:none; }
.ftr a:hover { color:var(--ink); }

/* ---------- reveal (decoration only; content is visible without JS) ---------- */
@media (prefers-reduced-motion:no-preference) {
  .reveal-on .will-reveal:not(.bot):not(.bub), .reveal-on .bot.will-reveal > * { opacity:0; transform:translateY(14px); }
  .reveal-on .will-reveal.is-in:not(.bot):not(.bub), .reveal-on .bot.will-reveal.is-in > * { opacity:1; transform:none; transition:opacity .6s var(--ease), transform .8s var(--ease); }
  .reveal-on .bub.will-reveal .bub-entry { opacity:0; transform:translateX(120px) rotateY(12deg); }
  .reveal-on .bub.will-reveal.is-in .bub-entry { opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); }
  .reveal-on .bub.will-reveal .bub-dot { opacity:0; }
  .reveal-on .bub.will-reveal.is-in .bub-dot { opacity:1; transition:opacity .24s var(--ease) .9s; }
  .reveal-on .bub.will-reveal.is-in .bub-dot:nth-of-type(2) { transition-delay:1.04s; }
  .reveal-on .bub.will-reveal.is-in .bub-dot:nth-of-type(3) { transition-delay:1.18s; }
}
@media print {
  .path > li.will-enter > :is(.ui, h3, p), .reveal-on .will-reveal:not(.bot):not(.bub), .reveal-on .bot.will-reveal > *, .reveal-on .bub.will-reveal .bub-entry, .reveal-on .bub.will-reveal .bub-dot { opacity:1; transform:none; transition:none !important; }
}

/* ---------- modals: level test, course, person, diploma ---------- */
.tmask { position:fixed; inset:0; background:rgba(11,12,12,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; }
.tmask.open { display:flex; }
.tpanel, .cpanel { background:#fff; position:relative; max-height:88vh; overflow:auto; border-radius:var(--r-ui); box-shadow:0 24px 60px rgba(4,40,42,.28); }
.tpanel { width:min(620px,100%); padding:38px 38px 32px; }
.cpanel { width:min(760px,100%); padding:36px 38px 32px; }
.tbar { position:absolute; left:0; top:0; height:3px; background:var(--brand); width:0%; transition:width .3s var(--ease); }
.tclose { position:absolute; right:12px; top:8px; border:0; background:none; font-size:28px; line-height:1; color:var(--dim); cursor:pointer; padding:6px 10px; border-radius:var(--r-ctl); }
.tclose:hover { color:var(--ink); }
.test-scope { font-size:14px; font-weight:600; color:var(--dim); }
.tmeta { font-size:14px; color:var(--dim); margin-top:4px; }
.tq { font-size:21px; font-weight:600; line-height:1.45; margin:16px 0 20px; min-height:92px; }
.topt { display:block; width:100%; text-align:left; font:inherit; font-size:17px; padding:13px 16px; margin-top:10px; background:#fff; border:1px solid var(--line); border-radius:var(--r-ctl); cursor:pointer; transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease); }
.topt:hover { border-color:var(--ink); background:var(--cool); }
.tres-lvl { font-weight:800; font-size:54px; letter-spacing:-.02em; line-height:1; margin:14px 0 12px; }
.lvlplate { background:var(--ink); color:#fff; padding:.06em .22em .12em; display:inline-block; }
.tres-course { font-size:17px; margin-bottom:10px; }
.tres-course b { font-weight:700; }
.tres-note { margin-top:10px; font-size:14px; line-height:1.5; color:var(--dim); max-width:46ch; }
.tpanel .cta-row { margin-top:20px; }
@media (prefers-reduced-motion:no-preference) {
  .tmask.open .tpanel, .tmask.open .cpanel { animation:tin .2s var(--ease); }
  @keyframes tin { from { opacity:0; transform:translateY(10px); } }
}
.cgrid { display:grid; grid-template-columns:170px minmax(0,1fr); gap:28px; align-items:start; margin-top:16px; }
.cgrid img { width:100%; box-shadow:0 14px 28px -8px rgba(4,40,42,.3); }
.cgrid h3 { font-weight:800; font-size:26px; letter-spacing:-.015em; line-height:1.15; }
.clead2 { font-weight:600; font-size:18px; line-height:1.45; margin:8px 0 12px; }
.cpanel p.d { font-size:16px; line-height:1.6; color:var(--dim); margin-bottom:10px; }
.cpanel p.d b { color:var(--ink); font-weight:600; }
.cpanel .cfacts { margin:16px 0 4px; grid-template-columns:repeat(2,minmax(0,auto)); }
.cpanel .cta-row { margin-top:22px; }
.person-modal-role { color:var(--dim); font-weight:600; font-size:16px; margin:4px 0 14px; }
.diploma-full { margin-top:18px; width:100%; border:1px solid var(--line); border-radius:4px; }
@media (max-width:560px) {
  .tpanel, .cpanel { padding:30px 22px 24px; }
  .tq { font-size:18px; min-height:0; }
  .cgrid { grid-template-columns:minmax(0,1fr); }
  .cgrid img { max-width:140px; }
  .cpanel .cta-row { flex-direction:column; align-items:stretch; }
  .cpanel .cta-row .btn { width:100%; }
}

/* ---------- нижняя панель записи ----------
   Пока ничего не выбрано: «Не знаете, какой курс выбрать?» и «Поможем». После выбора:
   «Ваш выбор, N из 3», состав и следующий шаг. Прячется на первом экране, у финала и под окнами. */
/* Самый стеклянный объект страницы: под ним проходит вся страница. Заливка под текстом 60–56%, под кнопкой
   до 32%; на ней только чернильный текст: при 56% он держит 4,83:1 над чёрным даже без размытия (у чёрных
   чернил 6,04:1). 56% взято с запасом: у бирюзовых чернил порог 4,5:1 наступает около 54%.
   Серые подписи и бирюзовые ссылки живут только в раскрытом списке, у него своя плотная подложка */
.dock { --lg-bf:blur(22px) saturate(1.9); position:fixed; left:50%; bottom:16px; z-index:60; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"body body" "sum go"; align-items:center; column-gap:14px; padding:9px 9px 9px 20px; width:min(720px, calc(100vw - 32px)); transform:translateX(-50%); isolation:isolate; background:radial-gradient(52% 150% at 82% 140%, rgba(135,223,228,.46), rgba(135,223,228,0) 72%), linear-gradient(100deg, rgba(255,255,255,.60) 0%, rgba(255,255,255,.56) 76%, rgba(255,255,255,.32) 100%); -webkit-backdrop-filter:var(--lg-bf); backdrop-filter:var(--lg-bf); border:0; border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.40), inset 0 -10px 16px -12px rgba(0,116,121,.26), 0 0 0 1px rgba(4,40,42,.06), 0 2px 6px rgba(4,40,42,.08), 0 24px 46px -22px rgba(4,40,42,.42); }
.dock::after { content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; background:var(--lg-sheen); }
/* порядок в разметке: сводка, строки, кнопка. Так Tab после раскрытия идёт в строки, а видно их над полосой */
.dock-help, .dock-sum { grid-area:sum; }
.dock-go { grid-area:go; }
.dock-body { grid-area:body; }
.dock-help { min-width:0; font-size:15.5px; font-weight:700; line-height:1.3; }
.dock-help[hidden], .dock-sum[hidden], .dock-sent[hidden], .dock-go[hidden] { display:none; }
.dock[hidden], .tmask.open ~ .dock { display:none; }
.dock-sum { min-width:0; max-width:100%; justify-self:start; display:grid; grid-template-columns:minmax(0,auto) 22px; grid-template-areas:"title chev" "value chev"; align-items:center; gap:1px 8px; padding:4px 0; background:none; border:0; border-radius:var(--r-ctl); font:inherit; color:var(--ink); text-align:left; cursor:pointer; }
.dock-t { grid-area:title; }
.dock-v { grid-area:value; min-width:0; }
.dock-t { font-size:15.5px; font-weight:700; line-height:1.3; }
/* счётчик выбора: чернильный текст с бирюзовой точкой, как «● сохранено в профиль» */
.dock.has-pick .dock-t { font-size:14px; font-weight:600; }
.dock.has-pick .dock-t::before { content:""; display:inline-block; width:.5em; height:.5em; margin-right:.5em; border-radius:50%; background:var(--brand); vertical-align:.08em; }
.dock-chev { grid-area:chev; width:22px; height:22px; border-radius:50%; background:var(--ink); color:var(--paper); display:grid; place-items:center; transition:transform var(--fast) var(--ease); }
.dock-chev::before { content:""; width:7px; height:7px; border-top:2px solid currentColor; border-left:2px solid currentColor; transform:translateY(2px) rotate(45deg); }
.dock.is-open .dock-chev { transform:rotate(180deg); }
.dock.is-sent { grid-template-columns:1fr; grid-template-areas:"sum"; padding:16px 20px; }
.dock-sent { grid-area:sum; font-size:15.5px; font-weight:600; line-height:1.4; }
@media (min-width:621px) {
  .dock.is-sent { width:max-content; max-width:calc(100vw - 32px); text-align:center; }
}
.dock-v { max-width:100%; font-size:15.5px; font-weight:600; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dock-v:empty { display:none; }
.dock-go { flex:none; min-height:46px; padding:0 22px; border-radius:13px; }
.dock-body { margin:-9px -9px 9px -20px; padding:10px 20px 12px; border-bottom:1px solid var(--line-soft); border-radius:22px 22px 0 0; background:rgba(255,255,255,.94); }
.dock-body[hidden] { display:none; }
.cart-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:10px 0; border-top:1px solid var(--line-soft); font-size:15px; }
.cart-row:first-child { border-top:0; }
.cart-lbl { color:var(--dim); font-size:14px; flex:none; }
.cart-val { font-weight:600; text-align:right; }
.cart-val.done { color:var(--ink); }
.cart-val.done::after { content:" \2713"; content:" \2713" / ""; color:var(--brand); }
.cart-val button { font:inherit; font-size:14.5px; font-weight:600; color:var(--brand); background:none; border:0; padding:0; cursor:pointer; }
.cart-val button:hover { color:var(--accent-down); }
.cart-hint { font-size:14px; line-height:1.45; color:var(--dim); margin-top:8px; }
@media (max-width:620px) {
  .dock { left:0; right:0; bottom:0; width:auto; transform:none; border-radius:0; }
  .dock { column-gap:10px; padding:8px 10px 8px 16px; padding-bottom:max(8px, env(safe-area-inset-bottom)); }
  .dock-body { margin:-8px -10px 8px -16px; padding:6px 16px 10px; border-radius:0; }
  .dock-t, .dock-v, .dock-help { font-size:14.5px; }
  .dock.has-pick .dock-t { font-size:13.5px; }
  .dock-go { min-height:44px; padding:0 12px; font-size:14px; }
  .dock.has-pick .dock-t::before { display:none; }
  .dock-body { max-height:50vh; overflow:auto; }
}

/* ---------- запись на консультацию ---------- */
.lpanel { width:min(500px,100%); padding:0; display:flex; flex-direction:column; overflow:hidden; }
.lview:not([hidden]) { display:flex; flex-direction:column; min-height:0; }
.lplain { padding:36px 38px 32px; overflow:auto; }
/* поля прокручиваются, «Записаться» и строка согласия всегда видны внизу окна */
#lform { display:flex; flex-direction:column; min-height:0; }
.lscroll { display:grid; gap:18px; min-height:0; overflow:auto; padding:36px 38px 20px; overscroll-behavior:contain; }
.lfoot { display:grid; gap:10px; padding:14px 38px 22px; border-top:1px solid var(--line-soft); background:#fff; }
.ltitle { font-size:clamp(23px,2.2vw,27px); font-weight:800; letter-spacing:-.018em; line-height:1.15; padding-right:30px; }
.ltitle:focus { outline:none; }
.lsub { margin-top:8px; font-size:16px; color:var(--dim); line-height:1.5; }
.lpicked { margin-top:14px; padding:10px 14px; border-radius:var(--r-ctl); background:var(--brand-tint); font-size:15px; line-height:1.45; }
.lpicked b { color:var(--brand); font-weight:700; }
.lfield { display:grid; gap:7px; min-width:0; margin:0; padding:0; border:0; }
.lfield > label, .lfield > legend { font-size:15px; font-weight:600; color:var(--ink); }
.lfield > legend { padding:0; margin-bottom:7px; }
/* пример формата отдельной строкой, а не в placeholder: он пропадает при вводе и хуже читается
   скринридером (GOV.UK Design System, hint text вместо placeholder-примера) */
.lhint { display:block; margin-top:-2px; font-size:14px; color:var(--dim); }
.lhint[hidden] { display:none; }
.lfield input[type=text], .lfield input[type=tel] { width:100%; min-height:48px; padding:10px 14px; font:inherit; font-size:17px; color:var(--ink); background:#fff; border:1px solid var(--line-control); border-radius:var(--r-ctl); transition:border-color var(--fast) var(--ease); }
.lfield input::placeholder { color:var(--faint); }
.lfield input:hover { border-color:var(--faint); }
.lfield input:focus-visible { outline:2px solid var(--brand); outline-offset:0; border-color:var(--brand); }
.lfield input[aria-invalid=true] { border-color:var(--err); }
.lphone { display:flex; align-items:center; width:100%; background:var(--paper); border:1px solid var(--line-control); border-radius:var(--r-ctl); }
.lphone[hidden] { display:none; }
.lphone-pre { padding-left:14px; font-size:17px; font-weight:600; color:var(--ink); user-select:none; }
.lfield .lphone input { min-width:0; padding-left:8px; border:0; background:transparent; }
.lfield .lphone input:focus-visible { outline:none; }
.lphone:hover { border-color:var(--faint); }
.lphone:focus-within { outline:2px solid var(--brand); outline-offset:0; border-color:var(--brand); }
.lphone:has([aria-invalid=true]) { border-color:var(--err); }
#ltg-help, #ldone-p a { color:var(--brand); text-decoration:underline; text-underline-offset:2px; }
#ldone-fix { align-self:flex-start; margin:10px 0 20px; }
.seg { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; background:var(--cool); border:1px solid var(--line); border-radius:var(--r-ctl); }
.seg label { position:relative; display:block; }
.seg input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.seg span { display:flex; align-items:center; justify-content:center; min-height:40px; border-radius:4px; border:1px solid transparent; font-size:15.5px; font-weight:600; color:var(--dim); transition:background-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.seg input:checked + span { background:#fff; color:var(--brand); border-color:var(--brand); }
.seg input:focus-visible + span { outline:2px solid var(--brand); outline-offset:2px; }
.hp { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.lerr { color:var(--err); font-size:15px; line-height:1.45; }
.lerr:empty { display:none; }
.lsubmit { width:100%; }
.lsubmit:disabled { opacity:.7; cursor:progress; }
.lconsent { font-size:13px; line-height:1.45; color:var(--dim); }
#ldone-view .btn { margin-top:22px; align-self:flex-start; }
#lfail-view .cta-row { margin-top:22px; }
@media (max-width:560px) {
  #lmask { padding:10px; }
  #lmask .lpanel { max-height:calc(100dvh - 20px); }
  #lmask .tclose { top:4px; right:6px; }
  .lplain { padding:24px 18px 20px; }
  .lscroll { gap:13px; padding:22px 18px 14px; }
  .lfoot { gap:8px; padding:12px 18px 14px; }
  .ltitle { font-size:21px; }
  .lsub { font-size:15px; margin-top:6px; }
  .lpicked { margin-top:10px; padding:8px 12px; font-size:14.5px; }
  .lfield { gap:5px; }
  .lfield > legend { margin-bottom:5px; }
  .lfield input[type=text], .lfield input[type=tel] { min-height:46px; }
  .seg span { min-height:38px; }
  .lconsent { font-size:12.5px; }
}

/* До 760px снимаем постоянную работу GPU. Заливки, обод, блик и тени прежние;
   шапка, плашка заявки и карточки первого экрана сохраняют размытие. */
@media (max-width:760px) {
  /* Только имя: длительности и остальные параметры утверждённого первого экрана не меняются.
     Без анимации transform:none оставляет пятна в начальной позиции keyframes. */
  .lg-aur i { animation-name:none !important; will-change:auto; }
  /* !important снимает и inline-преломление glass.js при узком окне с мышью. */
  .path .ui, .ccard, .crow, .plan-card, .chat, .pricing-scroll::before {
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  .tmask { -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(11,12,12,.62); }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition-duration:0s !important; animation-duration:0s !important; }
  .lg-aur i { animation:none !important; }   /* правила пятен сильнее по специфичности, без !important дрейф не снимается */
}
/* Браузер без размытия фона. Сплошными становятся поверхности, под которыми проходит содержимое страницы:
   шапка, заявка и карточки первого экрана. Карточки ниже остаются полупрозрачными: под ними только неподвижный
   свет, и их текст проходит контраст без размытия (это замерено). Блок стоит ПЕРЕД настройкой «меньше
   прозрачности», чтобы она его перекрывала */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  header.top { background:rgba(255,255,255,.96); }
  .dock, .stage .ui { background:#fff; }
  .stage .st-ex { background:#F1FDF1; }
  .tmask { background:rgba(11,12,12,.62); }
}
/* системная настройка «меньше прозрачности»: все стеклянные поверхности сплошные */
@media (prefers-reduced-transparency:reduce) {
  /* !important: преломление ставит фильтр прямо в style карточки, и настройку могут включить уже после загрузки */
  header.top, .dock, .stage .ui, .path .ui, .ccard, .crow, .plan-card, .chat, .pricing-scroll::before { -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  header.top, .dock, .dock-body, .stage .ui, .path .ui, .ccard, .crow, .plan-card { background:#fff; }
  .stage .st-ex, .path > li:last-child .ui { background:#F1FDF1; }
  .ccard:has(.is-picked), .crow:has(.is-picked), .plan-card.recommended, .pricing-scroll::before, .chat { background:var(--brand-tint); }
  .tmask { -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(11,12,12,.62); }
}
/* режим принудительных цветов (высокая контрастность Windows): заливки и тени система убирает, поэтому
   стеклянным объектам возвращается рамка, которой у них больше нет в обычном режиме */
@media (forced-colors:active) {
  header.top, .dock { background:Canvas; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  .stage .ui, .path .ui, .ccard, .crow, .plan-card, .chat, .dock { border:1px solid CanvasText; }
  .ccard:has(.is-picked), .crow:has(.is-picked) { border:2px solid Highlight; }
  .pricing-scroll::before { border:1px solid CanvasText; }
  .lg-aur, .journey::before, .tg-section::before, .bot::before, .courses::before, .pricing::before, .pf-row::before { display:none; }
}