/* ═══════════════════════════════════════════════════════════
   Heart Crystal Dance Academy, открытый формат, сентябрь-октябрь
   Токены и мотив те же, что на странице курса.
   Форма: интерактив это пилюля (999px), всё остальное 0.
   Темп счёта: 180 BPM, доля 0.3333s, такт 2.6667s.
   ═══════════════════════════════════════════════════════════ */
:root{
  --paper:#FAFAFA; --paper-2:#F0F0EE;
  --ink:#141414; --ink-soft:#5C5C5C; --line:#E4E4E4;
  --stage:#101010;
  --pop:#E6006E;        /* заливки без текста: доли счёта, маркеры */
  --pop-ink:#B10054;    /* всё текстовое и CTA */
  --pop-hover:#8C0043;
  --display:'Unbounded','Manrope','Helvetica Neue',Arial,sans-serif;
  --body:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --beat:0.3333s; --bar:2.6667s;
  --gap:clamp(64px,9vw,116px);
  --ease:cubic-bezier(.16,1,.3,1);
}
html{color-scheme:light;scroll-behavior:smooth}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--body);font-size:18px;line-height:1.6;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(230,0,110,.15);
  overflow-x:hidden;
}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(22px,4vw,44px)}
h1,h2,h3{line-height:1.1;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:3px solid var(--pop-ink);outline-offset:4px}
.finale :focus-visible{outline-color:#fff}

.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;left:0;top:0;width:auto;height:auto;clip-path:none;z-index:99;
  background:var(--pop-ink);color:#fff;padding:15px 26px;font-size:18px;font-weight:600;
  text-decoration:none;border-radius:0 0 999px 0}

/* ── ритм-счёт: 1-2-3 · 5-6-7, четвёртая и восьмая молчат ── */
.rhythm{display:flex;gap:10px;align-items:center}
.rhythm.lg{gap:13px}
.rhythm i{width:10px;height:10px;border-radius:50%;background:var(--ink);opacity:.18;display:block}
.rhythm.lg i{width:13px;height:13px}
.rhythm i.rest{background:none;border:1.5px solid var(--ink);opacity:.14}
@media (prefers-reduced-motion:no-preference){
  .rhythm i:not(.rest){animation:beat var(--bar) linear infinite}
  .rhythm i:nth-child(1){animation-delay:0s}
  .rhythm i:nth-child(2){animation-delay:var(--beat)}
  .rhythm i:nth-child(3){animation-delay:calc(var(--beat)*2)}
  .rhythm i:nth-child(5){animation-delay:calc(var(--beat)*4)}
  .rhythm i:nth-child(6){animation-delay:calc(var(--beat)*5)}
  .rhythm i:nth-child(7){animation-delay:calc(var(--beat)*6)}
}
@keyframes beat{
  0%{opacity:1;background:var(--pop);transform:scale(1.55)}
  9%{opacity:1;background:var(--pop);transform:scale(1.05)}
  26%{opacity:.18;background:var(--ink);transform:scale(1)}
  100%{opacity:.18;background:var(--ink);transform:scale(1)}
}

/* ── первый экран ── */
.hero{min-height:100dvh;display:flex;flex-direction:column;justify-content:space-between;
  padding-top:clamp(26px,4vw,40px);padding-bottom:clamp(34px,5vw,56px)}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:24px}
.brandmark{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.01em;line-height:1.3}
.brandmark span{display:block;font-family:var(--body);font-weight:500;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:5px}
.hero-mid{padding-top:clamp(30px,5vw,54px);padding-bottom:clamp(30px,5vw,54px)}
h1{font-family:var(--display);font-weight:700;
  font-size:clamp(28px,4.9vw,62px);letter-spacing:-.045em;margin-bottom:clamp(22px,3vw,32px)}
h1 .ln{display:block;overflow:hidden}
h1 .ln>span{display:block}
h1 em{font-style:normal;color:var(--pop-ink)}
.lede{font-size:clamp(19px,2vw,25px);color:var(--ink-soft);max-width:34ch;line-height:1.45}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.facts{display:flex;flex-wrap:wrap;gap:16px 34px;font-size:15px;color:var(--ink-soft)}
.facts b{display:block;font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink);
  letter-spacing:-.02em;margin-bottom:2px}
@media (prefers-reduced-motion:no-preference){
  h1 .ln>span{transform:translateY(105%);animation:rise .85s var(--ease) forwards}
  h1 .ln:nth-child(1)>span{animation-delay:.15s}
  h1 .ln:nth-child(2)>span{animation-delay:calc(.15s + var(--beat))}
  .hero .lede,.hero-foot{opacity:0;animation:fade .8s var(--ease) forwards}
  .hero .lede{animation-delay:calc(.15s + var(--beat)*2)}
  .hero-foot{animation-delay:calc(.15s + var(--beat)*2.6)}
}
@keyframes rise{to{transform:translateY(0)}}
@keyframes fade{to{opacity:1}}

/* ── кнопка ── */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  min-height:64px;padding:0 42px;border-radius:999px;overflow:hidden;isolation:isolate;
  background:var(--pop-ink);color:#fff;font-size:18px;font-weight:600;
  text-decoration:none;white-space:nowrap;touch-action:manipulation;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)
}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--pop-hover);
  transform:translateY(101%);transition:transform .32s var(--ease)}
.btn:hover::after{transform:translateY(0)}
.btn:hover{box-shadow:0 10px 30px rgba(177,0,84,.26)}
.btn:active{transform:translateY(1px) scale(.985)}
/* состояние «канал ещё не подключён» */
.btn.is-pending{background:var(--ink-soft);cursor:not-allowed;box-shadow:none}
.btn.is-pending::after{content:none}
.btn.is-pending:hover{background:var(--ink-soft);box-shadow:none}
.btn.is-pending:active{transform:none}

/* Узкий телефон. У кнопки 42 пикселя полей с каждой стороны — на экране
   360 это почти четверть ширины, и вместе с nowrap длинная подпись
   перестаёт помещаться. «Записаться на пробное — $20» и испанское
   «Reserve su clase de prueba: $20» распирали страницу за край экрана;
   английская строка короче, поэтому баг долго никто не видел.
   Перенос строки здесь честнее обрезанного текста. */
@media (max-width:520px){
  /* Боковое поле 14, а не 24: под текст остаётся 288 пикселей вместо 268.
     Испанское «Reserve su clase de prueba: $20» занимает 275,6 и при
     24 пикселях не влезало ровно на 7,6 — кнопка уезжала на вторую строку,
     тогда как русская и английская оставались в одну. Разная высота кнопки
     на разных языках заметнее, чем лишние десять пикселей воздуха по краям:
     текст всё равно стоит по центру, и поле работает только как минимум.
     Уже 320 пикселей испанская строка не спасёт — там перенос остаётся,
     но таких экранов почти не осталось. */
  .btn{white-space:normal;text-align:center;line-height:1.3;
       padding:14px;max-width:100%}
}

section{padding:var(--gap) 0}
.sec-h{font-size:clamp(28px,4.2vw,50px);font-weight:700;letter-spacing:-.035em;
  max-width:17ch;margin-bottom:clamp(26px,3.4vw,42px)}
.lead{font-size:clamp(19px,2vw,25px);color:var(--ink-soft);max-width:52ch}
p+p{margin-top:16px}

/* ── проявление по скроллу ── */
.js .rv{opacity:0;transform:translateY(26px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .75s var(--ease),transform .75s var(--ease)}

/* ── что это: список ── */
.plain{list-style:none;max-width:60ch}
.plain li{padding:20px 0 20px 26px;border-bottom:1px solid var(--line);position:relative;
  font-size:clamp(18px,1.9vw,21px);line-height:1.42}
.plain li:first-child{border-top:1px solid var(--line)}
.plain li::before{content:"";position:absolute;left:0;top:31px;width:8px;height:8px;
  border-radius:50%;background:var(--pop)}
.tbd{color:var(--ink-soft);border-bottom:1px dashed var(--line);padding-bottom:1px}

/* ── цены: две штуки, без таблицы ── */
.prices{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px);max-width:820px}
.prices>*{min-width:0}
.price{border-top:2px solid var(--ink);padding-top:22px}
.price .amt{font-family:var(--display);font-weight:600;font-size:clamp(40px,5.4vw,66px);
  letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;margin-bottom:12px}
.price .name{font-size:clamp(18px,1.9vw,21px);font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.price .sub{font-size:15px;color:var(--ink-soft)}
.pnote{margin-top:clamp(24px,3vw,34px);font-size:18px;color:var(--ink-soft);max-width:56ch}

/* ── кто ведёт ── */
.who{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,52px);max-width:900px}
.who>*{min-width:0}
.shot{background:var(--paper-2);aspect-ratio:4/5;display:flex;flex-direction:column;
  justify-content:flex-end;padding:20px;color:var(--ink-soft);font-size:15px;line-height:1.45;
  min-width:0;overflow:hidden}
.shot .tag{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.who h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,2vw,25px);
  letter-spacing:-.03em;margin:20px 0 6px}
.who .role{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:12px}

/* ── три вопроса ── */
.qa{max-width:70ch}
.qa details{border-top:1px solid var(--line)}
.qa details:last-of-type{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;
  font-size:clamp(18px,1.8vw,21px);font-weight:600;letter-spacing:-.02em;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";position:absolute;right:8px;top:50%;width:13px;height:13px;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease)}
.qa details[open] summary::after{transform:translateY(-25%) rotate(225deg)}
.qa summary:hover{color:var(--pop-ink)}
.qa .a{padding:0 0 24px;color:var(--ink-soft);max-width:62ch}


/* ── расписание в первом экране ── */
.when{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.when b{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,27px);
  letter-spacing:-.03em;color:var(--ink)}
.when span{font-size:17px;color:var(--ink-soft)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(24px,3vw,32px)}
.chips i{font-style:normal;font-size:15px;font-weight:500;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;white-space:nowrap}
.cta-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ask{font-size:16px;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:2px;transition:color .18s var(--ease),border-color .18s var(--ease)}
.ask:hover{color:var(--pop-ink);border-color:var(--pop-ink)}

/* ── три шага ── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,52px);counter-reset:st}
.steps>*{min-width:0}
.step{counter-increment:st;border-top:2px solid var(--ink);padding-top:20px}
.step h3{font-size:clamp(19px,2vw,24px);font-weight:600;letter-spacing:-.025em;margin-bottom:10px}
.step h3::before{content:counter(st);display:block;font-family:var(--display);font-weight:600;
  font-size:14px;color:var(--pop-ink);margin-bottom:12px}
.step p{font-size:17px;color:var(--ink-soft);line-height:1.5}

/* ── как проходит час ── */
.hour{display:grid;grid-template-columns:auto 1fr;gap:0 clamp(20px,3vw,40px);max-width:640px}
.hour dt{font-family:var(--display);font-weight:600;font-size:clamp(17px,1.8vw,20px);
  letter-spacing:-.02em;padding:20px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.hour dd{padding:20px 0;border-top:1px solid var(--line);font-size:clamp(17px,1.8vw,20px)}
.hour dt:last-of-type,.hour dd:last-of-type{border-bottom:1px solid var(--line)}

/* ── с нуля: крупный список отрицаний ── */
.zero{max-width:22ch;font-family:var(--display);font-weight:600;
  font-size:clamp(26px,3.8vw,46px);letter-spacing:-.04em;line-height:1.15;margin-bottom:clamp(26px,3vw,38px)}
.nots{list-style:none;max-width:56ch}
.nots li{font-size:clamp(19px,2vw,25px);line-height:1.4;padding:14px 0 14px 34px;position:relative;
  color:var(--ink-soft)}
.nots li::before{content:"";position:absolute;left:0;top:26px;width:18px;height:2px;background:var(--line)}
.nots li.yes{color:var(--ink);font-weight:600}
.nots li.yes::before{background:var(--pop);width:18px;height:2px}

/* ── цены: три пакета плюс разовое ── */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px)}
.tiers>*{min-width:0}
.tier{border-top:2px solid var(--line);padding-top:20px}
.tier.hot{border-top-color:var(--ink)}
.tier .amt{font-family:var(--display);font-weight:600;font-size:clamp(30px,3.6vw,46px);
  letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;margin-bottom:10px}
.tier .name{font-size:17px;font-weight:600;letter-spacing:-.015em;margin-bottom:6px}
.tier .per{font-size:15px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.tier .exp{font-size:14px;color:var(--ink-soft);margin-top:8px}

/* ── адрес ── */
.place{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,52px);align-items:start}
.place>*{min-width:0}
.addr{font-size:clamp(19px,2vw,25px);line-height:1.45;margin-bottom:22px}
.addr b{display:block;font-family:var(--display);font-weight:600;letter-spacing:-.03em;margin-bottom:6px}
.place .plain li{font-size:17px}

@media (max-width:820px){
  .steps{grid-template-columns:1fr}
  .tiers{grid-template-columns:1fr 1fr}
  .place{grid-template-columns:1fr}
  .hour{grid-template-columns:auto 1fr}
}
@media (max-width:560px){
  .tiers{grid-template-columns:1fr}
}


/* ── первый экран в две колонки: текст слева, вертикальное видео справа ── */
/* Вертикальные отступы по отдельности. Сокращённое padding:X 0 обнуляло
   боковые поля, которые даёт .wrap: у .wrap и .hero-body одинаковая
   специфичность, а .hero-body стоит ниже и побеждал — весь текст первого
   экрана прилипал к левому краю телефона. Ровно та же ловушка, что
   когда-то была у .done; см. комментарий там же. */
.hero-body{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);
  align-items:center;flex:1;
  padding-top:clamp(24px,4vw,44px);padding-bottom:clamp(24px,4vw,44px)}
.hero-body>*{min-width:0}
.vframe{position:relative;border-radius:20px;overflow:hidden;background:var(--paper-2);
  aspect-ratio:9/16;max-height:min(66vh,620px);margin-left:auto;width:100%;max-width:400px}
.vframe video{width:100%;height:100%;object-fit:cover;display:block}
.vcap{font-size:14px;color:var(--ink-soft);margin-top:12px;text-align:right;max-width:400px;margin-left:auto}

/* ── блок «а потом танцуете»: видео слева, текст справа ── */
.social{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,4vw,64px);align-items:center}
.social>*{min-width:0}
.social .vframe{margin-left:0;max-width:340px}
.social p{font-size:clamp(19px,2vw,25px);line-height:1.45;color:var(--ink-soft);max-width:44ch}
.social p b{color:var(--ink);font-weight:600}

/* ── настоящая фотография вместо заглушки ── */
.band .shotimg{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;max-height:600px}

@media (max-width:900px){
  .hero-body{grid-template-columns:1fr;gap:32px;align-items:start}
  .vframe{margin-left:0;max-width:100%;max-height:none;aspect-ratio:4/5}
  .vcap{text-align:left;margin-left:0;max-width:100%}
  .social{grid-template-columns:1fr}
  .social .vframe{max-width:100%;aspect-ratio:4/5}
}


/* ── навигация ── */
.nav{display:flex;gap:clamp(16px,2.4vw,30px);align-items:center;flex-wrap:wrap}
.nav a{font-size:16px;font-weight:500;color:var(--ink-soft);text-decoration:none;
  padding:6px 0;border-bottom:2px solid transparent;transition:color .18s var(--ease),border-color .18s var(--ease)}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--pop)}
.brandrow{display:flex;align-items:center;gap:18px}
@media (max-width:700px){
  .nav{gap:14px}
  .nav a{font-size:15px}
}

/* ── страница пакетов ── */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,36px);align-items:stretch}
.packs>*{min-width:0}
/* Два варианта вместо трёх пакетов (с 17.09.2026). Две колонки, но не
   на всю ширину: две карточки по 600px каждая смотрелись бы как баннеры. */
.packs.two{grid-template-columns:repeat(2,1fr);max-width:760px}
.pack{border-top:2px solid var(--line);padding-top:24px;display:flex;flex-direction:column}
.pack.hot{border-top-color:var(--ink)}
.pack .amt{font-family:var(--display);font-weight:600;font-size:clamp(34px,4.2vw,54px);
  letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;margin-bottom:12px}

/* Цена акцентным цветом: это главное число в блоке, ради него человек сюда
   и смотрит, а чёрным оно тонуло среди прочего чёрного текста.
   Правило общее для обеих страниц: на лендинге контейнер .tier, на странице
   пакетов .pack, и покрасив только один, я бы их снова развёл. */
.pack .amt, .tier .amt{color:var(--pop-ink)}
.pack .name{font-size:clamp(19px,2vw,23px);font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.pack .per{font-size:16px;color:var(--ink-soft);font-variant-numeric:tabular-nums;margin-bottom:4px}
.pack .exp{font-size:15px;color:var(--ink-soft);margin-bottom:22px}
/* Кнопки пакетов контурные, а не залитые. Когда карточки встали в один
   столбец, кнопка растянулась во всю ширину, и три розовые плиты подряд
   забивали собой и цену, и главную кнопку страницы внизу: розовым было
   залито почти четверть блока. Контур оставляет кнопку кнопкой и палец
   попадает в ту же площадь, но пятна на экране больше нет.

   Заодно вернулась разница между «купить пакет» и «записаться на пробное»:
   сплошной заливкой на странице теперь помечено только одно действие.
   При наведении кнопка заливается — тем же ::after, что и у всех
   остальных, поэтому текст в этот момент становится белым. */
.pack .btn{margin-top:auto;width:100%;
  background:transparent;color:var(--pop-ink);border:1.5px solid var(--pop-ink)}
.pack .btn:hover{color:#fff;box-shadow:0 8px 22px rgba(177,0,84,.16)}
.pack .flagline{display:inline-block;align-self:flex-start;width:fit-content;background:var(--pop-ink);color:#fff;font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:999px;margin-bottom:14px}

/* Три пакета в ряд держатся только на широком экране. Без этого правила
   сетка оставалась трёхколоночной и на телефоне: колонки по 92 пикселя,
   «Válido por 6 semanas» в две строки, а плашка «Лучшая цена» сдвигала
   среднюю карточку вниз, и цены переставали стоять на одной линии.
   Соседняя сетка .tiers на лендинге ломается точно так же — здесь это
   просто забыли дописать. */
@media (max-width:700px){
  .packs{grid-template-columns:1fr;gap:28px}
}

/* Оплата мимо сайта. Тихая строка под пакетами, а не ещё одна кнопка:
   кнопка обещала бы самообслуживание, а здесь человеку отвечает Оксана
   и заводит его руками. Цвет как у прочих пояснений, чтобы не спорить
   с ценами и кнопками покупки, которые тут главные. */
.paynote{margin-top:clamp(26px,3.2vw,38px);font-size:16px;line-height:1.55;color:var(--ink-soft)}
.paynote a{color:var(--pop-ink);text-decoration:none;
  border-bottom:1px solid var(--line);padding-bottom:1px;
  transition:border-color .18s var(--ease)}
.paynote a:hover{border-color:var(--pop-ink)}

/* ── юридические страницы ──
   Класс .legal-page, а не .legal: .legal давно занят мелким текстом
   дисклеймера в подвале, и одинаковое имя разносило стили в обе
   стороны — подвал получал лишние отступы, страницы урезанную ширину.
   Длинный текст, который читают только когда он зачем-то понадобился.
   Колонка уже, чем на лендинге: строка в 90 символов на широком экране
   нечитаема, а здесь читают именно построчно и въедливо. */
.legal-page{padding-top:clamp(30px,5vw,60px);padding-bottom:clamp(50px,7vw,90px);max-width:760px}
/* «Политика конфиденциальности» — одно слово в 419 пикселей, переносить
   его негде, и на экране 360 оно распирало страницу до 440. Разрешаем
   перенос по слогам: браузер знает правила русского, потому что lang.js
   ставит на <html> настоящий язык. break-word — страховка на случай,
   если словарь переносов недоступен: некрасивый разрыв лучше, чем
   уехавшая за край страница. */
.legal-page h1{font-family:var(--display);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(27px,4.4vw,50px);line-height:1.06;margin-bottom:14px;
  hyphens:auto;overflow-wrap:break-word}
.legal-page h2{font-family:var(--display);font-weight:600;letter-spacing:-.025em;
  font-size:clamp(19px,2.2vw,25px);line-height:1.2;
  margin-top:clamp(30px,3.6vw,44px);margin-bottom:12px}
.legal-page p{font-size:17px;line-height:1.62;color:var(--ink);margin-bottom:14px}
.legal-page .upd{font-size:15px;color:var(--ink-soft);margin-bottom:6px}
/* Фраза, которую человек должен увидеть, даже если читает по диагонали:
   что номер телефона не уходит на сторону. */
.legal-page .strong{font-weight:600}
.legal-page a{color:var(--pop-ink);text-decoration:none;
  border-bottom:1px solid var(--line);transition:border-color .18s var(--ease)}
.legal-page a:hover{border-color:var(--pop-ink)}
.legal-page .legal-nav{margin-top:clamp(34px,4vw,50px);padding-top:22px;
  border-top:1px solid var(--line);font-size:16px}

/* ── страница после оплаты ── */
/* Вертикальные отступы задаются по отдельности. Сокращённая запись
   padding: X 0 обнуляла боковые поля, которые даёт .wrap: у .done и .wrap
   одинаковая специфичность, а .done стоит ниже и побеждал. Текст на всех
   четырёх страницах прилипал к краям экрана. Остальные секции в этом файле
   пишут padding-top/padding-bottom по отдельности ровно поэтому. */
.done{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}
.done h1{font-size:clamp(30px,5vw,64px);margin-bottom:clamp(20px,2.6vw,28px)}
.done .lead{margin-bottom:clamp(30px,4vw,44px)}
.done-facts{display:grid;gap:0;max-width:620px;margin-bottom:clamp(30px,4vw,42px)}
.done-facts div{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,32px);
  padding:18px 0;border-top:1px solid var(--line);font-size:clamp(17px,1.8vw,20px)}
.done-facts div:last-child{border-bottom:1px solid var(--line)}
.done-facts b{font-weight:600;white-space:nowrap;color:var(--pop-ink);font-size:15px;padding-top:3px}

/* Колонка подписей должна быть одна на все строки. Без этого каждая строка
   меряет свою подпись сама, и текст начинается в шести разных местах: по-русски
   разброс доходил до 138px, по-английски до 62px. Подписи в двух языках разной
   длины, поэтому ширину нельзя задать числом — её задаёт самая длинная подпись,
   а это умеет только subgrid. Браузер без subgrid получает прежнее поведение. */
@supports (grid-template-columns:subgrid){
  .done-facts{grid-template-columns:auto 1fr;column-gap:clamp(16px,3vw,32px)}
  .done-facts div{grid-column:1/-1;grid-template-columns:subgrid;gap:normal}
}

/* На телефоне колонка текста осталась бы шириной с ладонь: подпись встаёт
   над значением, строка занимает всю ширину. */
@media (max-width:560px){
  .done-facts{grid-template-columns:1fr}
  .done-facts div{grid-template-columns:1fr;gap:5px}
  .done-facts b{white-space:normal}
}

/* ── кто ведёт: один совместный кадр слева, текст справа ── */
.duo{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,64px);align-items:center}
.duo>*{min-width:0}
.duo .photo{border-radius:20px;overflow:hidden;background:var(--paper-2);aspect-ratio:3/4;
  display:flex;flex-direction:column;justify-content:flex-end;padding:22px;
  color:var(--ink-soft);font-size:15px;line-height:1.45}
.duo .photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:20px}
.duo .names{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.6vw,32px);
  letter-spacing:-.035em;line-height:1.2;margin-bottom:10px}
.duo .role{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:22px}
.duo p{font-size:clamp(18px,1.9vw,21px);line-height:1.5;color:var(--ink-soft);max-width:46ch}
.duo p+p{margin-top:16px}
@media (max-width:820px){ .duo{grid-template-columns:1fr;gap:28px} }

/* ── научный блок: шесть процессов на шести долях сальсы ── */
.simul{font-size:clamp(21px,2.5vw,31px);line-height:1.35;letter-spacing:-.03em;
  max-width:26ch;margin-bottom:clamp(26px,3.2vw,38px)}
.simul b{font-weight:600;color:var(--pop-ink)}

.beatgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.beatgrid>*{min-width:0}
.bcard{border:1px solid var(--line);border-radius:16px;padding:clamp(18px,2.2vw,26px);
  background:var(--paper);transition:border-color .3s var(--ease),background .3s var(--ease)}
.bcard .n{font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink-soft);
  margin-bottom:12px;transition:color .3s var(--ease)}
.bcard .t{font-size:clamp(17px,1.8vw,20px);font-weight:600;letter-spacing:-.02em;line-height:1.3}
.bcard .s{font-size:15px;color:var(--ink-soft);line-height:1.45;margin-top:8px}

@media (prefers-reduced-motion:no-preference){
  .bcard{animation:cardbeat var(--bar) linear infinite}
  .bcard .n{animation:cardnum var(--bar) linear infinite}
  .bcard:nth-child(1),.bcard:nth-child(1) .n{animation-delay:0s}
  .bcard:nth-child(2),.bcard:nth-child(2) .n{animation-delay:var(--beat)}
  .bcard:nth-child(3),.bcard:nth-child(3) .n{animation-delay:calc(var(--beat)*2)}
  .bcard:nth-child(4),.bcard:nth-child(4) .n{animation-delay:calc(var(--beat)*4)}
  .bcard:nth-child(5),.bcard:nth-child(5) .n{animation-delay:calc(var(--beat)*5)}
  .bcard:nth-child(6),.bcard:nth-child(6) .n{animation-delay:calc(var(--beat)*6)}
}
@keyframes cardbeat{
  0%{border-color:var(--pop);background:var(--paper-2)}
  11%{border-color:var(--pop);background:var(--paper-2)}
  36%{border-color:var(--line);background:var(--paper)}
  100%{border-color:var(--line);background:var(--paper)}
}
@keyframes cardnum{
  0%{color:var(--pop-ink)} 11%{color:var(--pop-ink)}
  36%{color:var(--ink-soft)} 100%{color:var(--ink-soft)}
}

.roles{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid var(--line);margin-top:clamp(32px,3.8vw,48px)}
.roles>div{padding:clamp(22px,2.6vw,30px) clamp(26px,3vw,44px) clamp(22px,2.6vw,30px) 0}
.roles>div+div{padding-left:clamp(26px,3vw,44px);padding-right:0;border-left:1px solid var(--line)}
.roles .lbl{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pop-ink);margin-bottom:14px}
.roles p{font-size:17px;line-height:1.5;color:var(--ink-soft);max-width:38ch}

.claim{font-size:clamp(19px,2vw,25px);line-height:1.45;color:var(--ink-soft);
  max-width:52ch;margin-top:clamp(30px,3.6vw,44px)}

.srcbox{margin-top:clamp(28px,3.4vw,40px);border-top:1px solid var(--line);padding-top:20px}
.srcbox summary{list-style:none;cursor:pointer;font-size:15px;font-weight:600;color:var(--ink-soft);
  padding:6px 26px 6px 0;position:relative;display:inline-block}
.srcbox summary::-webkit-details-marker{display:none}
.srcbox summary::after{content:"";position:absolute;right:4px;top:11px;width:8px;height:8px;
  border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:rotate(45deg);transition:transform .25s var(--ease)}
.srcbox details[open] summary::after{transform:rotate(225deg)}
.srcbox summary:hover{color:var(--pop-ink)}
.srcbox ul{list-style:none;display:grid;gap:9px;max-width:76ch;margin-top:14px}
.srcbox li{font-size:14px;line-height:1.45;color:var(--ink-soft)}
.srcbox a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
.srcbox a:hover{color:var(--pop-ink)}
.disclaimer{margin-top:16px;font-size:13px;line-height:1.5;color:var(--ink-soft)}

@media (max-width:820px){
  .beatgrid{grid-template-columns:1fr 1fr}
  .roles{grid-template-columns:1fr}
  .roles>div{padding-right:0}
  .roles>div+div{padding-left:0;border-left:none;border-top:1px solid var(--line)}
}
@media (max-width:520px){ .beatgrid{grid-template-columns:1fr} }

/* ── эмблема пакета на странице благодарности ── */
/* Эмблема пакета. Была картинкой 1000x1000, и слово под числом было вшито
   в пиксели по-русски: англичанин и испанец видели «занятий» на своей
   странице. Теперь она собрана из тех же кирпичей, что и весь сайт —
   точки это тот же .rhythm, что в шапке, а подпись обычный текст с парой
   l-ru/l-en/l-es, поэтому язык переключается вместе со страницей.
   Заодно ушли 27 КБ картинки и появилась резкость на любом экране. */
.packmark{width:100%;max-width:620px;margin-bottom:clamp(26px,3.2vw,36px)}
.packmark .art{width:clamp(178px,20vw,214px);aspect-ratio:1;margin:0 auto;
  padding:15px 12px;border:1px solid var(--line);border-radius:14px;background:var(--paper);
  display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;align-items:center;
  text-align:center}
/* Точки мельче, чем в шапке: внутри рамки они украшение, а не элемент
   интерфейса, и в полный рост занимали бы половину эмблемы. */
.packmark .rhythm{gap:7px}
.packmark .rhythm i{width:7px;height:7px}
.packmark .rhythm i.rest{border-width:1px}
.packmark .num{font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(52px,6.4vw,68px);letter-spacing:-.05em;line-height:.86;
  font-variant-numeric:tabular-nums}
.packmark .cap{font-size:clamp(13px,1.5vw,15px);color:var(--ink-soft);margin-top:8px}
.packmark .wm{align-self:end;font-size:8px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);opacity:.7;line-height:1.4}

/* ── финал ── */
/* ── личный кабинет ──
   Первая версия была плоским списком из пяти разнородных фактов —
   абонемент, расписание, адрес, дресс-код и чат в одном ряду с одинаковым
   весом. На вопрос "сколько у меня осталось" глаз не находил ответ быстрее,
   чем читая всё подряд. Здесь три явных уровня вместо одного плоского:
   1) карточка абонемента — единственное, что реально нужно каждый день,
   2) практика — вторично, тише по контрасту,
   3) история — третично, свёрнута до одной строки-выжимки. */
.cab{padding-top:clamp(36px,5vw,60px);padding-bottom:clamp(60px,8vw,100px)}
.cab-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px}
.cab .hi{font-size:clamp(17px,1.8vw,20px);color:var(--ink-soft)}

/* Мини-кнопка: то же семейство, что и .btn (пилюля 999px, та же анимация
   нажатия), но маленькая и контурная — для второстепенных действий,
   которые всё равно должны читаться как кнопка, а не как ссылка. */
.btn-mini{display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;padding:0 16px;border-radius:999px;flex:none;
  border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);
  font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;
  touch-action:manipulation;
  transition:color .18s var(--ease),border-color .18s var(--ease),
             background .18s var(--ease),transform .18s var(--ease)}
.btn-mini:hover{color:var(--pop-ink);border-color:var(--pop-ink);background:#FBE7F0}
.btn-mini:active{transform:translateY(1px) scale(.985)}
.btn-mini:focus-visible{outline:2px solid var(--pop-ink);outline-offset:2px}
/* Внутри строки фактов — на своей строке и с отступом сверху. */
.btn-mini-wide{margin-top:10px}
.cab h1{font-family:var(--display);font-weight:700;letter-spacing:-.045em;
  font-size:clamp(26px,3.4vw,40px);margin-bottom:clamp(30px,4vw,44px)}

/* Карточка абонемента — единственный явный контейнер на странице.
   Радиус 20px — тот же бакет, что у media (packmark), не изобретаю третий. */
.mcard{border:1px solid var(--line);border-radius:20px;
  padding:clamp(22px,3vw,32px);margin-bottom:clamp(30px,4vw,42px)}
.mcard-top{display:flex;justify-content:space-between;align-items:baseline;
  flex-wrap:wrap;gap:8px;margin-bottom:clamp(18px,2.4vw,24px)}
.mcard-name{font-weight:600;font-size:17px}
.mcard-exp{font-size:14px;color:var(--ink-soft)}

.mstat{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
/* Месяц без ограничений в кабинете — вместо счётчика занятий. */
.mmonthly{margin:6px 0 18px}
.mmonthly b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(26px,4vw,34px);
  letter-spacing:-.03em;line-height:1.1;margin-bottom:8px}
.mmonthly span{display:block;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.mstat b{font-family:var(--display);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(52px,7vw,72px);line-height:1;color:var(--pop-ink);
  font-variant-numeric:tabular-nums}
.mstat .of{font-size:20px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.mstat .lbl{font-size:15px;color:var(--ink-soft)}

/* Полоса заполнения — не украшение, а мотивированный сигнал: сколько от
   пакета уже прожито, без пересчёта в уме "7 из 12". */
.mbar{height:6px;border-radius:999px;background:var(--paper-2);overflow:hidden;
  margin-bottom:clamp(18px,2.4vw,24px)}
.mbar i{display:block;height:100%;background:var(--pop-ink);border-radius:999px}

.mcard .wv-badge{margin:0;padding:14px 16px;border-radius:12px}
.mcard .btn{width:100%;margin-top:clamp(18px,2.4vw,24px)}

.wv-badge{display:flex;align-items:flex-start;gap:12px;
  font-size:15px;font-weight:600;line-height:1.4}
/* Точка выравнивается по первой строке, не по центру всего блока —
   иначе на переносе в три строки она повисает у второй. 3px ловит
   капхайт Manrope 15px/600 в этой отрисовке. */
.wv-badge .dot{margin-top:3px;width:9px;height:9px;border-radius:50%;flex:none}
.wv-badge.ok{background:var(--paper-2);color:var(--ink-soft)}
.wv-badge.no{background:#FBE7F0;color:var(--pop-ink);border:1px solid #F0C2D8}
.wv-badge.ok .dot{background:var(--ink-soft)}
.wv-badge.no .dot{background:var(--pop-ink)}

/* Практика — вторично: тише подписи, чем в карточке абонемента, и без
   рамки, чтобы глаз не путал её с главным блоком. */
.cab h2{font-family:var(--display);font-weight:600;font-size:15px;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink-soft);
  margin:0 0 clamp(14px,2vw,18px)}
.cab-block{margin-bottom:clamp(40px,5vw,56px)}
/* Подписи "Перед занятием" — приглушённые, не акцентные: это вторичный
   блок, .done-facts b в общем styles.css красит их в --pop-ink для
   страниц благодарности, где это уместно, здесь — спорило бы с
   приглушённым h2 и отбирало бы внимание у карточки абонемента. */
.cab .done-facts b{color:var(--ink)}
/* Основной текст крупнее, чем на страницах благодарности: там его читают
   один раз после оплаты, здесь — возвращаются регулярно и с телефона. */
.cab .done-facts div{font-size:clamp(18px,1.9vw,21px)}

/* История — третична по иерархии, но плашки акцентные: даты посещений
   это единственное на странице, что человек «заработал», и розовый тут
   читается как отметка о сделанном, а не как предупреждение. */
.visits-sum{font-size:16px;margin-bottom:14px}
.visits-sum b{font-weight:600;color:var(--pop-ink)}
.visits{display:flex;flex-wrap:wrap;gap:8px}
.visits span{font-size:14px;font-weight:600;color:var(--pop-ink);background:#FBE7F0;
  border-radius:999px;padding:7px 14px;font-variant-numeric:tabular-nums}
.visits-help{margin-top:16px;font-size:16px;color:var(--ink-soft);max-width:52ch;line-height:1.5}

/* Экран входа в кабинет. Узкая колонка по центру — здесь центрирование
   уместно, в отличие от самого кабинета: на экране одно действие и
   выравнивать его не с чем. */
.gate{max-width:380px;margin:0 auto;padding-top:clamp(40px,8vh,90px);
  padding-bottom:clamp(60px,8vw,100px)}
.gate h1{font-family:var(--display);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(26px,3.4vw,34px);margin-bottom:10px}
.gate .sub{font-size:17px;color:var(--ink-soft);margin-bottom:26px;line-height:1.5}
.gate label{display:block;font-size:15px;font-weight:600;margin-bottom:7px}
.gate input{width:100%;min-height:56px;padding:0 18px;font:inherit;font-size:17px;
  border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);
  margin-bottom:18px}
.gate input:focus-visible{outline:2px solid var(--pop-ink);outline-offset:1px;
  border-color:var(--pop-ink)}
.gate .btn{width:100%}
.gate .err{color:var(--pop-ink);font-size:16px;line-height:1.45;margin-bottom:16px;
  min-height:1px}
.gate .switch{margin-top:20px;font-size:16px;color:var(--ink-soft);text-align:center}
.gate .switch button{background:none;border:0;padding:0;font:inherit;font-size:16px;
  font-weight:600;color:var(--pop-ink);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px}
.gate .switch button:focus-visible{outline:2px solid var(--pop-ink);outline-offset:2px}

/* ── согласие на SMS (sms.html) ──────────────────────────────────────
   Форма шире входа в кабинет: рядом с галочкой стоит обязательный текст
   про частоту, тарифы оператора и STOP, и в 380 пикселях он превращается
   в простыню. */
.gate-wide{max-width:460px}
.gate .switch a{color:var(--pop-ink);font-weight:600}

/* Галочка настоящая и видимая. Никаких подмен через opacity:0 плюс
   нарисованный квадрат: проверяющий Twilio смотрит и глазами, и в код,
   а спрятанный input — ровно тот случай, за который отказывают. */
.optin{display:flex;gap:12px;align-items:flex-start;margin:22px 0 12px}
.optin input[type=checkbox]{flex:none;width:22px;height:22px;margin:1px 0 0;
  accent-color:var(--pop-ink);cursor:pointer}
.optin label{font-weight:500;font-size:16px;line-height:1.45;margin:0;cursor:pointer}
.optin input[type=checkbox]:focus-visible{outline:2px solid var(--pop-ink);outline-offset:2px}

.gate .fine{font-size:14px;line-height:1.5;color:var(--ink-soft);margin:0 0 22px}
.gate .fine a{color:var(--ink-soft);text-decoration:underline}
.gate .fine b{font-weight:700;color:var(--ink)}

/* Пока идёт первый запрос — не мигаем пустым макетом. */
/* Опять longhand: сокращённая запись съедала боковые поля от .wrap,
   и надпись «загружаем» упиралась в край экрана. */
.cab-loading{padding-top:clamp(40px,8vh,90px);padding-bottom:clamp(40px,8vh,90px);
  color:var(--ink-soft);font-size:17px}

/* Кнопка чата — явно кнопка, но вторичная: акцентная заливка вместо
   сплошного розового, чтобы не спорить с «Продлить» за главное действие.
   Своя анимация: у .btn заливка выезжает снизу через ::after, здесь она
   не нужна, поэтому ::after снят и работает обычный переход фона. */
.btn-chat{background:#FBE7F0;color:var(--pop-ink);border:1px solid #F0C2D8;
  width:100%;margin-top:clamp(18px,2.4vw,24px);
  transition:background .2s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn-chat::after{content:none}
.btn-chat:hover{background:#F7D9E8;box-shadow:0 8px 24px rgba(177,0,84,.16)}



@media (max-width:560px){
  .mcard-top{flex-direction:column;align-items:flex-start;gap:4px}
}

.finale{background:var(--stage);color:#fff;padding:var(--gap) 0}
.finale .rhythm i{background:#fff;opacity:.2}
.finale .rhythm i.rest{background:none;border-color:rgba(255,255,255,.3);opacity:1}
@media (prefers-reduced-motion:no-preference){
  /* только имя: сокращённая запись animation: сбросила бы задержки в 0 */
  .finale .rhythm i:not(.rest){animation-name:beatDark}
}
@keyframes beatDark{
  0%{opacity:1;background:var(--pop);transform:scale(1.55)}
  9%{opacity:1;background:var(--pop);transform:scale(1.05)}
  26%{opacity:.2;background:#fff;transform:scale(1)}
  100%{opacity:.2;background:#fff;transform:scale(1)}
}
.finale h2{font-family:var(--display);font-weight:700;font-size:clamp(32px,5.4vw,72px);
  letter-spacing:-.045em;margin:clamp(22px,3vw,32px) 0 20px}
.finale p{color:rgba(255,255,255,.72);max-width:48ch;font-size:clamp(18px,1.8vw,21px)}
.finale .btn{background:#fff;color:var(--stage);margin-top:clamp(28px,3.6vw,40px)}
.finale .btn::after{background:var(--pop)}
.finale .btn:hover{background:var(--pop);color:#fff;box-shadow:0 10px 34px rgba(230,0,110,.34)}

footer{padding:44px 0 60px;font-size:15px;color:var(--ink-soft)}
footer p+p{margin-top:8px}

@media (max-width:820px){
  .prices,.who{grid-template-columns:1fr}
  .hero-foot{align-items:flex-start}
}
@media (max-width:560px){
  .hero{min-height:auto;justify-content:flex-start;
    padding-top:26px;padding-bottom:44px;gap:clamp(30px,8vw,48px)}
  .hero-top{flex-direction:column;align-items:flex-start;gap:18px}
  .hero-mid{padding-top:0;padding-bottom:0}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:26px}
  .hero-foot .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::after,*::before{animation:none!important;transition:none!important}
  h1 .ln>span{transform:none}
  .hero .lede,.hero-foot{opacity:1}
}

/* ═══════════════════════════════════════════════════════════
   ДВА ЯЗЫКА И НОВАЯ СТРУКТУРА (ТЗ от 29.08.2026)
   Оба текста лежат в разметке рядом, лишний скрывается здесь.
   Так правка делается один раз и версии не расходятся.
   ═══════════════════════════════════════════════════════════ */

/* Правило обязано идти раньше остальных display: без него любой
   display:flex/grid перебивает атрибут hidden, и скрытое видно. */
[hidden]{display:none!important}

/* Скрываем два неактивных языка, а не «прячем все и показываем один»:
   второй способ требовал бы восстанавливать display, а у .btn он
   inline-flex, у строк фактов grid — вернуть их через revert нельзя,
   кнопки бы развалились. */
html[data-lang="ru"] .l-en, html[data-lang="ru"] .l-es,
html[data-lang="en"] .l-ru, html[data-lang="en"] .l-es,
html[data-lang="es"] .l-ru, html[data-lang="es"] .l-en{display:none}

/* ── переключатель языка ── */
.brandright{display:flex;align-items:center;gap:clamp(14px,2vw,22px);margin-left:auto}
.langsw{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;flex:none}
.langsw button{font:inherit;font-size:13px;font-weight:700;letter-spacing:.06em;
  padding:7px 13px;border:0;background:none;color:var(--ink-soft);cursor:pointer;
  transition:background .18s,color .18s}
.langsw button[aria-pressed="true"]{background:var(--ink);color:#fff}

/* ── набор ── */
.enroll .wrap{border-top:2px solid var(--ink);padding-top:clamp(26px,3.4vw,40px)}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pop-ink);margin-bottom:12px}
.enroll-lede{font-size:clamp(18px,1.9vw,22px);line-height:1.5;color:var(--ink-soft);
  max-width:54ch;margin-top:clamp(16px,2vw,22px)}
.enroll-price{display:flex;align-items:baseline;gap:12px;margin:clamp(24px,3vw,34px) 0 20px}
.enroll-price b{font-family:var(--display);font-weight:600;letter-spacing:-.04em;
  font-size:clamp(38px,5.4vw,64px);line-height:1}
.enroll-price span{font-size:16px;color:var(--ink-soft)}
.enroll-list{list-style:none;display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:clamp(26px,3vw,34px)}
.enroll-list li{font-size:16px;color:var(--ink-soft);padding-left:20px;position:relative}
.enroll-list li::before{content:"";position:absolute;left:0;top:11px;width:11px;height:2px;background:var(--pop)}
.enroll-note{font-size:16px;color:var(--ink-soft);max-width:56ch;margin-top:20px;line-height:1.5}

/* ── переключение ── */
.reset{background:var(--paper-2)}
.reset .wrap{padding-top:var(--gap);padding-bottom:var(--gap)}
.reset p{font-size:clamp(17px,1.8vw,20px);line-height:1.6;color:var(--ink-soft);
  max-width:58ch;margin-top:18px}
.reset-lede{font-weight:600;color:var(--ink)!important}
.reset-punch{font-family:var(--display);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(22px,2.8vw,34px)!important;line-height:1.3!important;
  color:var(--ink)!important;max-width:24ch!important;margin-top:clamp(28px,3.4vw,40px)!important}
.reset-after{max-width:52ch}
.reset-fine{font-size:15px!important;color:var(--ink-soft);max-width:52ch;
  padding-top:18px;border-top:1px solid var(--line);margin-top:clamp(28px,3.4vw,38px)!important}

/* ── мозг ── */
.brain-lede{font-size:clamp(18px,1.9vw,22px);line-height:1.55;max-width:56ch}
.formula{font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(15px,1.9vw,22px);line-height:1.5;color:var(--pop-ink);
  margin:clamp(26px,3.2vw,38px) 0;max-width:22ch}
.why{margin-top:clamp(34px,4vw,52px);border-top:1px solid var(--line);padding-top:clamp(24px,3vw,34px)}
.why-h{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:18px}
.why-list{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.why-list li{font-size:15px;font-weight:600;letter-spacing:-.01em;padding:9px 16px;
  border:1px solid var(--line);border-radius:999px}
.why-aging{font-size:clamp(17px,1.8vw,20px);line-height:1.5;color:var(--ink-soft);
  max-width:58ch;margin-top:clamp(22px,2.6vw,30px)}

/* ── что такое social dancing ── */
.isnt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:start}
.isnt>*{min-width:0}
.isnt-p{font-size:clamp(18px,1.9vw,22px);line-height:1.5;color:var(--ink-soft)}
.roles-note{font-size:16px;color:var(--ink-soft);max-width:56ch;margin-top:clamp(22px,2.6vw,30px)}

/* ── культура ── */
.culture{background:var(--paper-2)}
.culture .wrap{padding-top:var(--gap);padding-bottom:var(--gap)}
.culture p{font-size:clamp(17px,1.8vw,20px);line-height:1.6;color:var(--ink-soft);
  max-width:60ch;margin-top:18px}
.culture-punch{color:var(--ink)!important;font-weight:600}

/* ── для взрослых ── */
.ladder{font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(14px,1.6vw,19px);line-height:1.6;color:var(--pop-ink);
  margin-top:clamp(26px,3vw,36px);max-width:34ch}
.adults-note{font-size:clamp(17px,1.8vw,20px);line-height:1.55;color:var(--ink-soft);
  max-width:58ch;margin-top:clamp(20px,2.4vw,28px)}

/* ── преподаватели ── */
.years{font-family:var(--display);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(19px,2.2vw,26px);color:var(--pop-ink);margin:14px 0 18px}
.fears{margin-top:clamp(38px,4.4vw,60px);border-top:1px solid var(--line);padding-top:clamp(24px,3vw,34px)}
.fears-h{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:18px}
.fears ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.fears li{font-size:15px;color:var(--ink-soft);padding:9px 16px;
  border:1px solid var(--line);border-radius:999px}
.fears>p{font-size:clamp(17px,1.8vw,20px);line-height:1.5;max-width:52ch}
.two{margin-top:clamp(34px,4vw,52px);border-left:2px solid var(--pop);
  padding:4px 0 4px clamp(18px,2.4vw,28px)}
.two-h{font-family:var(--display);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(20px,2.4vw,28px);margin-bottom:12px}
.two p{font-size:clamp(17px,1.8vw,20px);line-height:1.55;color:var(--ink-soft);max-width:56ch}

/* ── программа ── */
.stepn{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pop-ink);margin-bottom:10px}
.steps .step h3::before{content:none}   /* нумерацию даёт .stepn, счётчик не нужен */
.path{margin-top:clamp(40px,4.6vw,64px);border-top:1px solid var(--line);padding-top:clamp(24px,3vw,34px)}
.path-h{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:18px}
.path ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;margin-bottom:22px}
.path li{font-family:var(--display);font-weight:600;font-size:clamp(13px,1.5vw,16px);
  letter-spacing:-.02em;padding:8px 14px;border:1px solid var(--line);border-radius:999px}
.path li:last-child{border-color:var(--ink);background:var(--ink);color:#fff}
.path li+li::before{content:"→";display:inline-block;margin-right:10px;margin-left:-4px;
  color:var(--ink-soft);font-family:var(--body);font-weight:400}
.path>p{font-size:clamp(17px,1.8vw,20px);line-height:1.55;color:var(--ink-soft);max-width:58ch}

/* ── пакеты и расписание ── */
.tiers.three{grid-template-columns:repeat(3,1fr)}
.tiers.two{grid-template-columns:repeat(2,1fr);max-width:640px}
.sched{background:var(--paper-2)}
.sched .wrap{padding-top:var(--gap);padding-bottom:var(--gap)}
.sched-row{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,64px);margin:clamp(24px,3vw,34px) 0 20px}
.sched-row div{border-top:2px solid var(--ink);padding-top:16px;min-width:150px}
.sched-row b{display:block;font-size:clamp(19px,2.2vw,26px);font-weight:600;letter-spacing:-.025em}
.sched-row span{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(24px,3vw,38px);letter-spacing:-.03em;margin-top:6px}
.sched>.wrap>p{font-size:17px;color:var(--ink-soft);max-width:50ch}

/* ── финал и подвал ── */
.goal-punch{font-family:var(--display);font-weight:600;letter-spacing:-.03em;
  font-size:clamp(19px,2.2vw,26px);margin-top:22px}
.legal{font-size:14px!important;color:var(--ink-soft);max-width:60ch;
  margin-top:18px!important;line-height:1.5}

/* Ссылки на юридические страницы. Мельче основного текста подвала, но
   не серее: до них должно быть можно дойти, а не выискивать. */
.footlinks{margin-top:14px;font-size:14px}
.footlinks a{color:var(--ink-soft);text-decoration:none;
  border-bottom:1px solid var(--line);transition:color .18s var(--ease),border-color .18s var(--ease)}
.footlinks a:hover{color:var(--pop-ink);border-color:var(--pop-ink)}

/* ── семь карточек вместо шести ──
   Цикл всё так же ложится на такт: семь долей на карточки, восьмая пауза. */
@media (prefers-reduced-motion:no-preference){
  .bcard:nth-child(4),.bcard:nth-child(4) .n{animation-delay:calc(var(--beat)*3)}
  .bcard:nth-child(5),.bcard:nth-child(5) .n{animation-delay:calc(var(--beat)*4)}
  .bcard:nth-child(6),.bcard:nth-child(6) .n{animation-delay:calc(var(--beat)*5)}
  .bcard:nth-child(7),.bcard:nth-child(7) .n{animation-delay:calc(var(--beat)*6)}
}
.bcard .n{text-transform:uppercase;letter-spacing:.09em}

@media (max-width:860px){
  .isnt{grid-template-columns:1fr}
  .tiers.three{grid-template-columns:1fr}
  .tiers.two{grid-template-columns:1fr}
  .brandright{gap:12px}
}
@media (max-width:520px){
  .enroll-list{gap:8px 18px}
  .langsw button{padding:6px 11px;font-size:12px}
}


/* ── настоящие фотографии ──
   Одна рамка на все: 3:2, тот же радиус, что у видео, подпись под
   кадром. Снято не в Naples и не вчера, поэтому годы и города стоят
   под каждым кадром, а не один раз где-то внизу.
   Кадров мало и они настоящие: лучше три сильных, чем лента слабых. */
/* Ни aspect-ratio, ни object-fit: они резали кадр повторно, уже в
   браузере. Каждая фотография показывается в своих пропорциях.
   Ширина ограничена 700 px: снимки старые, около 1080 px по ширине,
   и растягивать их сверх этого — значит показывать их хуже, чем они
   есть. Лучше меньше и резко. */
.pic{margin:clamp(30px,3.6vw,48px) 0;max-width:700px}
.pic img{width:100%;height:auto;display:block;border-radius:20px;
  background:var(--paper-2)}
.pic figcaption{font-size:14px;color:var(--ink-soft);margin-top:12px}

/* ── шапка на узком экране ──
   Название, ритм и переключатель втроём не влезают в 331 px: название
   разваливалось на четыре строки, а переключатель вылезал за поля
   содержимого на 18 px. Разводим на две строки — выбрасывать ничего
   не нужно, ритм это мотив бренда. */
@media (max-width:600px){
  .brandrow{flex-wrap:wrap;gap:14px;width:100%}
  .brandmark{width:100%}
  .brandright{margin-left:0;width:100%;justify-content:space-between}
}