/* Самохостинг шрифтов (site2-39): IP посетителей не уходят на
   googleapis/gstatic. Веса по факту использования: 400/500/600/700/800. */
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/unbounded-v12-cyrillic_latin-regular.woff2') format('woff2')}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/unbounded-v12-cyrillic_latin-500.woff2') format('woff2')}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/unbounded-v12-cyrillic_latin-600.woff2') format('woff2')}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/unbounded-v12-cyrillic_latin-700.woff2') format('woff2')}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/unbounded-v12-cyrillic_latin-800.woff2') format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/nunito-sans-v19-cyrillic_latin-regular.woff2') format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/nunito-sans-v19-cyrillic_latin-500.woff2') format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/nunito-sans-v19-cyrillic_latin-600.woff2') format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/nunito-sans-v19-cyrillic_latin-700.woff2') format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/nunito-sans-v19-cyrillic_latin-800.woff2') format('woff2')}
/* ============================================================
   БЕЛАЯ СТУДИЯ — style.css v2
   ============================================================ */

:root{
    --bg:#0C0A10;--bg2:#13111A;--bg3:#1A1724;--card:#1E1B29;--card-hover:#252238;
    --text:#F5F3FA;--text2:#B8B2CC;--text3:#8A84A2;--purple-text:#A78BFA;
    --purple:#8B5CF6;--purple-dim:rgba(139,92,246,.12);--purple-glow:rgba(139,92,246,.3);
    --magenta:#E040A0;--magenta-dim:rgba(224,64,160,.1);--magenta-glow:rgba(224,64,160,.25);
    --neon:#C084FC;--hot:#FF6B9D;--lime:#A3E635;--sun:#FFD84D;
    /* Ореол ошибки — тем же способом, что --purple-dim (site2-26). */
    --hot-dim:rgba(255,107,157,.22);
    --grad:linear-gradient(135deg,var(--purple),var(--magenta),var(--hot));
    --border:rgba(255,255,255,.06);--border2:rgba(255,255,255,.1);
    --font-h:'Unbounded',sans-serif;--font-b:'Nunito Sans',sans-serif;
    --tr:.4s cubic-bezier(.25,.46,.45,.94);--tr-ui:200ms cubic-bezier(.23,1,.32,1);--r:20px;--rs:14px;
    --sh:0 8px 32px rgba(0,0,0,.3);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}ul{list-style:none}
.container{max-width:1240px;margin:0 auto;padding:0 32px}

/* BLOBS */

/* GRAIN */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* UTILITIES */
.sl{font-family:var(--font-h);font-size:.65rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:14px;display:inline-block}
.st{font-family:var(--font-h);font-size:clamp(1.8rem,4vw,3rem);font-weight:700;line-height:1.15;margin-bottom:16px}
.st .gr{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ss{font-size:1rem;color:var(--text2);line-height:1.7;max-width:520px}
.reveal{opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .35s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-h);font-size:.72rem;font-weight:700;padding:12px 26px;border-radius:50px;border:none;cursor:pointer;transition:background-color var(--tr-ui),color var(--tr-ui),border-color var(--tr-ui),transform var(--tr-ui),opacity var(--tr-ui),box-shadow var(--tr-ui),width var(--tr-ui);letter-spacing:.03em;text-align:center}
.btn-g{background:var(--grad);color:#fff}
@media (hover:hover) and (pointer:fine){.btn-g:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--purple-glow)}}.btn-o{background:transparent;border:1.5px solid var(--border2);color:var(--text)}
@media (hover:hover) and (pointer:fine){.btn-o:hover{border-color:var(--purple);color:var(--neon)}}.btn-l{padding:16px 36px;font-size:.78rem}

/* HEADER */
header{position:fixed;top:0;left:0;width:100%;z-index:1000;padding:16px 0;transition:background .4s,padding .4s,backdrop-filter .4s}
header.scrolled{background:rgba(12,10,16,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:10px 0}
header .container{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{font-family:var(--font-h);font-size:1.1rem;font-weight:800;letter-spacing:.05em;color:var(--text);white-space:nowrap}
nav{display:flex;align-items:center;gap:24px}
nav a{font-size:.82rem;font-weight:600;color:var(--text2);transition:color var(--tr)}
@media (hover:hover) and (pointer:fine){nav a:hover{color:var(--text)}}.h-right{display:flex;align-items:center;gap:20px}
.h-phone{font-size:.82rem;font-weight:700;color:var(--text);white-space:nowrap}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:1001}
.burger span{width:24px;height:2px;background:var(--text);transition:var(--tr);border-radius:2px}

/* HERO */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero-vid{position:absolute;inset:0;z-index:0}
.hero-vid video,.hero-vid .vp{width:100%;height:100%;object-fit:cover}
.hero-vid video.hero-vid__hd{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}.hero-vid video.hero-vid__hd.is-on{opacity:1}
.vp{background:linear-gradient(135deg,#1A1130,#0C0A10 60%,#1a0a20);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:.9rem;text-align:center;flex-direction:column;gap:8px}
.hero-ov{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(12,10,16,.3) 0%,rgba(12,10,16,.6) 50%,rgba(12,10,16,.95) 100%)}
.hero .container{position:relative;z-index:2;padding-top:180px;padding-bottom:120px;width:100%}
.hero-c{max-width:720px}
.hero-ey{font-family:var(--font-h);font-size:.6rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:28px;display:flex;align-items:center;gap:14px}
.hero-ey::before{content:'';width:40px;height:2px;background:var(--grad);border-radius:2px}
.hero h1{font-family:var(--font-h);font-size:clamp(2.4rem,5.5vw,4.2rem);font-weight:800;line-height:1.08;margin-bottom:24px;letter-spacing:-.01em}
.hero h1 .gr{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-t{font-size:1.1rem;color:var(--text2);line-height:1.7;margin-bottom:44px;max-width:520px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:72px}
.hero-stats{display:flex;gap:48px}
.h-stat{position:relative}
.h-stat:not(:last-child)::after{content:'';position:absolute;right:-24px;top:50%;transform:translateY(-50%);width:1px;height:40px;background:rgba(255,255,255,.15)}
.h-stat .n{font-family:var(--font-h);font-size:3rem;font-weight:800;color:#fff;line-height:1;text-shadow:0 0 40px rgba(139,92,246,.3)}
.h-stat .l{font-size:.85rem;color:rgba(255,255,255,.7);margin-top:8px;font-weight:600;white-space:nowrap}

@media(max-width:480px){
  .hero-stats{gap:24px}
  .h-stat .n{font-size:2rem}
  .h-stat .l{font-size:.75rem}
}
/* site2-55: числа из CRM. Плитка без данных скрыта; разделитель — слева у
   каждой ВИДИМОЙ плитки, кроме первой видимой (скрытая не оставляет висящей черты).
   min-height — чтобы строка не прыгала, пока ждём ответ. */
.h-stat[data-stat]:not(.is-on){display:none}
.hero-stats{min-height:78px}
.h-stat:not(:last-child)::after{content:none}
.hero-stats>:is(.h-stat:not([data-stat]),.h-stat.is-on)~:is(.h-stat:not([data-stat]),.h-stat.is-on)::before{content:'';position:absolute;left:-24px;top:50%;transform:translateY(-50%);width:1px;height:40px;background:rgba(255,255,255,.15)}
@media(max-width:480px){
  .hero-stats{min-height:58px}
  .hero-stats>:is(.h-stat:not([data-stat]),.h-stat.is-on)~:is(.h-stat:not([data-stat]),.h-stat.is-on)::before{left:-12px}
}
/*
.hero h1 .gr{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-t{font-size:1.1rem;color:var(--text2);line-height:1.7;margin-bottom:44px;max-width:520px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:72px}
.hero-stats{display:flex;gap:48px}
.h-stat{position:relative}
.h-stat:not(:last-child)::after{content:'';position:absolute;right:-24px;top:50%;transform:translateY(-50%);width:1px;height:40px;background:rgba(255,255,255,.15)}
.h-stat .n{font-family:var(--font-h);font-size:3rem;font-weight:800;color:#fff;line-height:1;text-shadow:0 0 40px rgba(139,92,246,.3)}
.h-stat .l{font-size:.85rem;color:rgba(255,255,255,.7);margin-top:8px;font-weight:600}*/

/* MARQUEE */

/* SOCIAL PROOF */
/* site2-73 п.1: плашка рейтинга крупная в обеих темах (размеры site2-60 из theme-light) */
.sp{padding:36px 0;border-bottom:1px solid var(--border)}
.sp-inner{display:flex;align-items:center;justify-content:center;gap:20px 56px;flex-wrap:wrap}
.sp-item{display:flex;align-items:center;gap:12px;font-size:1.05rem;font-weight:600;color:var(--text)}
.sp-item strong{color:var(--text);font-family:'Unbounded',sans-serif;font-weight:700;font-size:1.5rem;line-height:1}
.sp-item .stars{color:#FACC15;font-size:1.35rem;letter-spacing:2px}
.sp-item .ic{width:28px;height:28px}
@media(max-width:768px){
  .sp{padding:18px 0}
  .sp-inner{gap:10px 24px}
  .sp-item{font-size:.9rem;gap:8px}
  .sp-item strong{font-size:1.1rem}
  .sp-item .stars{font-size:1.05rem}
  .sp-item .ic{width:22px;height:22px}
}

/* CONCEPT */
.concept{padding:120px 0;position:relative;z-index:1}
.concept-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.concept-text .st{margin-bottom:24px}
.concept-text p{font-size:1.05rem;color:var(--text2);line-height:1.8;margin-bottom:16px}
.concept-text p strong{color:var(--text);font-weight:700}
.concept-visual{position:relative;aspect-ratio:4/5;display:flex;align-items:center;justify-content:center}
.concept-visual .cv-img{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity 1.2s ease;filter:drop-shadow(0 20px 40px rgba(0,0,0,.4))}
.concept-visual .cv-img.active{opacity:1}
.concept-visual .cv-img img{max-height:90%;max-width:90%;object-fit:contain}
.concept-visual .cv-img .ph{width:300px;height:500px;background:linear-gradient(145deg,rgba(139,92,246,.1),rgba(224,64,160,.05));border-radius:var(--r);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:.8rem;text-align:center;padding:20px}
.concept-visual::before{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:70%;height:40%;background:radial-gradient(ellipse,var(--purple-dim),transparent 70%);pointer-events:none;z-index:-1}
.concept-dots{display:flex;gap:8px;justify-content:center;margin-top:20px}
.concept-dots span{width:8px;height:8px;border-radius:50%;background:var(--border2);cursor:pointer;transition:background-color var(--tr-ui),color var(--tr-ui),border-color var(--tr-ui),transform var(--tr-ui),opacity var(--tr-ui),box-shadow var(--tr-ui),width var(--tr-ui)}
.concept-dots span.active{background:var(--purple);width:24px;border-radius:4px}

/* FEATURES */
.features{padding:120px 0;background:var(--bg2);position:relative;z-index:1}
.features-h{text-align:center;margin-bottom:64px}
.features-h .ss{margin:0 auto}
.features-g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.features-g--4{grid-template-columns:repeat(4,1fr)}
.fc{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:32px 24px;position:relative;overflow:hidden;transition:transform var(--tr),border-color var(--tr)}
.fc::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad);opacity:0;transition:opacity var(--tr)}
@media (hover:hover) and (pointer:fine){.fc:hover{transform:translateY(-4px);border-color:var(--border2)}.fc:hover::before{opacity:1}}.fc-silhouette{position:absolute;right:-10px;bottom:-10px;font-size:7rem;line-height:1;opacity:.06;pointer-events:none;transition:opacity var(--tr)}
@media (hover:hover) and (pointer:fine){.fc:hover .fc-silhouette{opacity:.1}}.fc-ic{color:var(--purple-text);margin-bottom:14px;line-height:0}
.fc-num{font-family:var(--font-h);font-size:2.4rem;font-weight:800;line-height:1;margin-bottom:12px;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.fc h3{font-family:var(--font-h);font-size:.88rem;font-weight:700;margin-bottom:10px;position:relative;z-index:1}
.fc p{font-size:.88rem;color:var(--text2);line-height:1.6;position:relative;z-index:1}

/* DIRECTIONS */
.directions{padding:120px 0;position:relative;z-index:1}
.directions-h{text-align:center;margin-bottom:64px}
.directions-h .ss{margin:0 auto}
.dir-p{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.dc{position:relative;background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:transform var(--tr),border-color var(--tr)}
@media (hover:hover) and (pointer:fine){.dc:hover{transform:translateY(-5px);border-color:var(--purple)}}.dc-img{width:100%;aspect-ratio:3/2;overflow:hidden}
.dc-img .ph{width:100%;height:100%;background:linear-gradient(135deg,#1A1730,#0E0C18);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:.8rem}
.dc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
@media (hover:hover) and (pointer:fine){.dc:hover .dc-img img{transform:scale(1.06)}}/* site2-60: оживающие карточки (ролик создаёт js/ws-cardvideo.js; первый кадр = картинка) */
.dc-img[data-video]{position:relative}
.dc-img[data-video] video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease,transform .6s ease;pointer-events:none}
.dc-img.is-live video{opacity:1}
@media (hover:hover) and (pointer:fine){.dc:hover .dc-img[data-video] video{transform:scale(1.06)}}.dc-body{padding:20px 22px}
.dc-body h3{font-family:var(--font-h);font-size:.95rem;font-weight:700;margin-bottom:6px}
.dc-body .dd{font-size:.8rem;color:var(--text2);line-height:1.5;margin-bottom:12px}
.dc-body .arr{width:34px;height:34px;background:var(--purple-dim);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--purple-text);transition:background-color var(--tr-ui),color var(--tr-ui),border-color var(--tr-ui),transform var(--tr-ui),opacity var(--tr-ui),box-shadow var(--tr-ui),width var(--tr-ui)}
@media (hover:hover) and (pointer:fine){.dc:hover .arr{background:var(--purple);color:#fff}}/* site2-73 п.9: «Направления» — без стрелки; на картинке полупрозрачная плашка «Записаться»
   (мышь — при наведении, сенсор — всегда); текст карточки во всю ширину. */
#directions .dc-img{position:relative}
#directions .dc-body .dd{margin-bottom:0}
.dc-tap{position:absolute;right:10px;bottom:10px;z-index:2;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-family:var(--font-h);font-weight:700;font-size:.68rem;
  letter-spacing:.02em;pointer-events:none;transition:opacity .25s ease}
@media (hover:hover) and (pointer:fine){.dc-tap{opacity:0}.dc:hover .dc-tap,.dc:focus-within .dc-tap{opacity:1}}
.dc.feat{border-color:var(--magenta)}
.dc.feat::after{content:'Хит';position:absolute;top:14px;right:14px;background:var(--grad);color:#fff;font-family:var(--font-h);font-size:.6rem;font-weight:700;padding:6px 14px;border-radius:50px;z-index:2}
.dc.new{border-color:var(--lime)}
.dc.new::after{content:'Новое';position:absolute;top:14px;right:14px;background:var(--lime);color:var(--bg,#0D0D1A);font-family:var(--font-h);font-size:.6rem;font-weight:700;padding:6px 14px;border-radius:50px;z-index:2}
.dir-s{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dc-m{background:var(--card);border:1px solid var(--border);border-radius:var(--rs);padding:20px 22px;cursor:pointer;transition:background-color var(--tr-ui),color var(--tr-ui),border-color var(--tr-ui),transform var(--tr-ui),opacity var(--tr-ui),box-shadow var(--tr-ui),width var(--tr-ui)}
@media (hover:hover) and (pointer:fine){.dc-m:hover{border-color:var(--purple)}}.dc-m h3{font-family:var(--font-h);font-size:.82rem;font-weight:700;margin-bottom:4px}
.dc-m .dd{font-size:.78rem;color:var(--text3);line-height:1.5}
.dc-m .ar{float:right;margin-top:-24px;color:var(--text3);transition:color var(--tr)}
@media (hover:hover) and (pointer:fine){.dc-m:hover .ar{color:var(--purple-text)}}/* CTA BAND */
.cta-band{padding:80px 0;background:var(--bg2);position:relative;z-index:1}
.cta-band-box{background:var(--card);border:1px solid var(--border);border-radius:24px;padding:48px 56px;display:flex;align-items:center;justify-content:space-between;gap:40px;position:relative;overflow:hidden}
.cta-band-box::before{content:'';position:absolute;top:-80px;right:-80px;width:250px;height:250px;background:radial-gradient(circle,var(--magenta-dim),transparent 70%);pointer-events:none}
.cta-band-text .st{margin-bottom:8px}
.cta-band-text .ss{margin-bottom:0}

/* TEACHERS */
.teachers{padding:120px 0;position:relative;z-index:1}
.teachers-h{text-align:center;margin-bottom:64px}
.teachers-g{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.teachers-g .tc{flex:0 0 calc((100% - 80px)/6)}
.teachers-g .tc.reveal{opacity:1;transform:none}
.tc{text-align:center}
.tc-ph{width:100%;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;margin-bottom:14px;border:1px solid var(--border);position:relative}
.tc-ph::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(12,10,16,.6) 0%,transparent 50%);pointer-events:none}
.tc-ph .ph{width:100%;height:100%;background:linear-gradient(145deg,#1A1730,#0E0C18);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:.75rem}
.tc-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
@media (hover:hover) and (pointer:fine){.tc-ph:hover img{transform:scale(1.04)}}.tc h3{font-family:var(--font-h);font-size:.85rem;font-weight:700;margin-bottom:3px}
.tc p{font-size:.78rem;color:var(--text3)}
/* Рейтинг педагога — появляется, только когда отзывы включены (site-booking-9). */
.tc-rate{margin-top:4px;font-size:.74rem;color:#C08A2E}
.tc-rate span{color:var(--text3)}

/* GALLERY */
.gallery{padding:120px 0;background:var(--bg2);position:relative;z-index:1}
.gallery-h{margin-bottom:48px}
.g-scroll{display:flex;flex-wrap:nowrap;gap:14px;overflow-x:auto;overflow-y:hidden;padding-bottom:16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    /* min-width:0 обязателен: без него min-content ленты (280px плитка) не даёт
       контейнеру сузиться, и страница едет вбок на узком экране вместо того,
       чтобы прокручиваться внутри ленты. Замер 01.09: на 320px документ был
       328px, виновник — эта лента (24+280+24). */
    min-width:0}
.g-scroll::-webkit-scrollbar{height:3px}
.g-scroll::-webkit-scrollbar-track{background:var(--border);border-radius:3px}
.g-scroll::-webkit-scrollbar-thumb{background:var(--purple);border-radius:3px}
.gi{flex:0 0 280px;min-width:280px;height:380px;border-radius:var(--r);overflow:hidden;scroll-snap-align:start;border:1px solid var(--border)}
.gi img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
@media (hover:hover) and (pointer:fine){.gi:hover img{transform:scale(1.04)}}/* CONCERTS — horizontal scroll (like gallery/space) */
.concerts{padding:120px 0;position:relative;z-index:1;overflow:visible}
.concerts .container{overflow:visible}
.concerts-h{margin-bottom:48px}
.c-scroll{display:flex;flex-wrap:nowrap;gap:14px;overflow-x:auto;overflow-y:hidden;padding-bottom:16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.c-scroll::-webkit-scrollbar{height:3px}
.c-scroll::-webkit-scrollbar-track{background:var(--border);border-radius:3px}
.c-scroll::-webkit-scrollbar-thumb{background:var(--purple);border-radius:3px}
.ci{flex:0 0 260px;min-width:260px;height:380px;border-radius:var(--r);overflow:hidden;scroll-snap-align:start;border:1px solid var(--border)}
.ci img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
@media (hover:hover) and (pointer:fine){.ci:hover img{transform:scale(1.04)}}/* MASTERCLASSES — full-width video bg, centered content */
.mc-sec{padding:160px 0;position:relative;z-index:1;overflow:hidden}
.mc-vid-bg{position:absolute;inset:0;z-index:0}
.mc-vid-bg video,.mc-vid-bg .vp{width:100%;height:100%;object-fit:cover}
.mc-vid-bg .vp{background:linear-gradient(135deg,#1A1130,#0C0A10)}
.mc-overlay{position:absolute;inset:0;z-index:1;background:rgba(12,10,16,.75)}
.mc-sec .container{position:relative;z-index:2}
.mc-inner{max-width:800px;margin:0 auto;text-align:center}
.mc-text .st{margin-bottom:20px}
.mc-text p{font-size:1.1rem;color:var(--text2);line-height:1.7;margin-bottom:32px;max-width:600px;margin-left:auto;margin-right:auto}
.mc-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.mc-tag{background:rgba(255,255,255,.06);border:1px solid var(--border2);border-radius:50px;padding:10px 22px;font-size:.82rem;font-weight:600;color:var(--text2);backdrop-filter:blur(4px);transition:background-color var(--tr-ui),color var(--tr-ui),border-color var(--tr-ui),transform var(--tr-ui),opacity var(--tr-ui),box-shadow var(--tr-ui),width var(--tr-ui)}
@media (hover:hover) and (pointer:fine){.mc-tag:hover{border-color:var(--purple);color:var(--neon)}}/* REVIEWS */
.reviews{padding:120px 0;position:relative;z-index:1}
.reviews-h{text-align:center;margin-bottom:48px}
.r-badge{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:40px;flex-wrap:wrap}
.r-badge-box{background:var(--card);border:1px solid var(--border);border-radius:var(--rs);padding:12px 22px;display:flex;align-items:center;gap:10px}
.r-badge-box .stars{color:#FACC15;font-size:.8rem;letter-spacing:1px}
.r-badge-box span{font-size:.82rem;color:var(--text2);font-weight:600}
.r-badge-box strong{color:var(--text)}
.sp-item .ic,.r-badge-box .ic{color:var(--purple-text);flex-shrink:0}
.r-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rc{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:24px 22px;transition:border-color var(--tr)}
@media (hover:hover) and (pointer:fine){.rc:hover{border-color:var(--border2)}}.rc-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.rc-av{width:38px;height:38px;background:var(--purple-dim);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-size:.85rem;font-weight:700;color:var(--purple-text);flex-shrink:0}
.rc-name{font-size:.82rem;font-weight:700}
.rc-date{font-size:.68rem;color:var(--text3)}
.rc-stars{color:#FACC15;font-size:.65rem;letter-spacing:1px;margin-bottom:8px}
.rc-text{font-size:.85rem;color:var(--text2);line-height:1.6}
.r-more{text-align:center;margin-top:28px}
.r-more a{font-family:var(--font-h);font-size:.72rem;font-weight:700;background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;border-bottom:1px dashed var(--purple);padding-bottom:2px}

/* FAQ */
.faq{padding:120px 0;background:var(--bg2);position:relative;z-index:1}
.faq-h{text-align:center;margin-bottom:56px}

/* FAQ: три главных сомнения перепиской (site2-53) */
.fd-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1100px;margin:0 auto 40px;align-items:start}
/* site2-63: облако вопросов — плашки-реплики (как .fd-q) и один общий ответ (как .fd-a) */
.fqc{max-width:980px;margin:0 auto}
.fqc-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.fd-q,.fqc-chip{background:var(--card);border:1px solid var(--border2);font-family:var(--font-h);color:var(--text)}
.fqc-chip{padding:12px 18px;font-size:.9rem;font-weight:700;line-height:1.3;min-height:44px;border-radius:20px 20px 20px 6px;cursor:pointer;transition:border-color var(--tr),background var(--tr),color var(--tr)}
@media (hover:hover) and (pointer:fine){.fqc-chip:hover{border-color:var(--purple)}}.fqc-chip:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.fqc-chip.is-on{background:var(--grad);border-color:transparent;color:#fff}
.fqc-answers{margin-top:18px}
.fd-a,.fqc-a{background:var(--purple-dim);border:1px solid var(--border)}
.fqc-a{max-width:740px;margin:0 auto;padding:22px 24px;position:relative;border-radius:20px 20px 6px 20px;opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease}
.fqc-a.is-on{opacity:1;transform:none}
.fqc-q{font-family:var(--font-h);font-size:.95rem;font-weight:700;margin:0 40px 10px 0}
.fqc-a p{font-size:.92rem;line-height:1.7;color:var(--text2)}
.fqc-a p+p{margin-top:8px}
.fqc-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:1.1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
@media (hover:hover) and (pointer:fine){.fqc-x:hover{border-color:var(--purple)}}@media(prefers-reduced-motion:reduce){.fqc-a{transition:none;opacity:1;transform:none}}
@media(max-width:600px){
  .fqc{position:relative}
  .fqc-chips{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);justify-content:start;overflow-x:auto;scroll-snap-type:x proximity;margin:0 -24px;padding:0 24px 6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .fqc-chips::-webkit-scrollbar{display:none}
  .fqc-chip{white-space:nowrap;scroll-snap-align:start}
  .fqc-a{padding:20px 18px}
}
.fd{display:flex;flex-direction:column;gap:10px}
.fd-q{align-self:flex-start;max-width:88%;padding:16px 20px;border-radius:20px 20px 20px 6px;font-size:.92rem;font-weight:700;line-height:1.35}
.fd-a{align-self:flex-end;max-width:94%;padding:16px 20px 14px;border-radius:20px 20px 6px 20px}
.fd-who{display:block;margin-bottom:8px;font-family:var(--font-h);font-size:.56rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fd-a p{font-size:.9rem;line-height:1.65;color:var(--text2);margin:0 0 10px}
.fd-rest{display:none}
.fd-a.open .fd-rest{display:block}
.fd-more{background:none;border:0;padding:0;cursor:pointer;font-family:var(--font-h);font-size:.68rem;font-weight:700;color:var(--neon)}
@media (hover:hover) and (pointer:fine){.fd-more:hover{text-decoration:underline}}@media(max-width:1024px){.fd-row{grid-template-columns:1fr;max-width:740px;gap:26px}}
/* Телефон: три диалога — лентой с прокруткой вбок (виден край следующего), список плотнее;
   цель site2-53 — секция ≤ 1500 px на 375. */
@media(max-width:600px){
.faq{padding:72px 0}
.faq-h{margin-bottom:32px}
.fd-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -24px 32px;padding:0 24px 6px;scroll-padding-left:24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fd-row::-webkit-scrollbar{display:none}
.fd{flex:0 0 86%;scroll-snap-align:start}
.faq-group{margin:16px 0 4px}
}

/* Компактный футер (site2-58): три строки вместо четырёх колонок. */
footer.ftn{padding:36px 0 28px}
footer.ftn .container{display:flex;flex-direction:column;gap:18px}
.ft-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.ft-main .socials{margin-left:auto}
.ft-logo{font-size:1rem}
.ft-phone{font-family:var(--font-h);font-weight:700;color:var(--text);font-size:.9rem}
.ft-addr,.ft-hours{font-size:.85rem;color:var(--text2)}
@media (hover:hover) and (pointer:fine){.ft-addr:hover,.ft-nav a:hover{color:var(--purple-text)}}.ft-nav a{font-size:.85rem;color:var(--text2);transition:color var(--tr)}
.ft-other{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;font-family:var(--font-h);font-size:.78rem}
.ft-legal{padding-top:16px;border-top:1px solid var(--border);font-size:.75rem;color:var(--text3);gap:4px}
.ft-legal a{color:var(--text3)}
@media (hover:hover) and (pointer:fine){.ft-legal a:hover{color:var(--purple-text)}}.ft-theme{background:none;border:0;padding:0;font:inherit;color:var(--text3);cursor:pointer}
@media (hover:hover) and (pointer:fine){.ft-theme:hover{color:var(--purple-text)}}.ft-theme[aria-pressed="true"]{text-decoration:underline;text-underline-offset:3px;color:var(--text2)}
@media(max-width:768px){
footer.ftn .container{align-items:center;text-align:center;gap:14px}
.ft-row{justify-content:center}
.ft-main{flex-direction:column;gap:6px}
.ft-main .socials{margin:6px 0 0}
.ft-phone{font-size:1.15rem}
.ft-nav{gap:0 14px}
.ft-nav a{display:inline-flex;align-items:center;min-height:44px}
.ft-legal{display:block;line-height:1.7}
}

/* CTA FINAL */
.cta-f{padding:120px 0;position:relative;z-index:1}
.cta-box{background:var(--card);border:1px solid var(--border);border-radius:28px;padding:72px 56px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--sh)}
.cta-box::before{content:'';position:absolute;top:-100px;left:50%;transform:translateX(-50%);width:400px;height:400px;background:radial-gradient(circle,var(--purple-dim),transparent 60%);pointer-events:none}
.cta-box::after{content:'';position:absolute;bottom:-100px;right:-100px;width:300px;height:300px;background:radial-gradient(circle,var(--magenta-dim),transparent 60%);pointer-events:none}
.cta-box .st,.cta-box .ss,.cta-box .btn{position:relative;z-index:1}
.cta-box .ss{margin:0 auto 36px}

/* FOOTER */
footer{padding:56px 0 36px;border-top:1px solid var(--border);position:relative;z-index:1}
footer .container{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.f-brand .logo{margin-bottom:14px}
.f-brand p{font-size:.82rem;color:var(--text3);line-height:1.6;max-width:260px}
.f-col h4{font-family:var(--font-h);font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text3);margin-bottom:16px}
.f-col a{display:block;font-size:.85rem;color:var(--text2);margin-bottom:8px;transition:color var(--tr)}
.f-col span{display:block;font-size:.85rem;color:var(--text2);margin-bottom:8px}
@media (hover:hover) and (pointer:fine){.f-col a:hover{color:var(--purple-text)}}.f-bottom{margin-top:40px;padding-top:20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:var(--text3)}
.f-legal{display:flex;gap:16px;margin-top:6px}
.f-legal a{color:var(--text3);transition:color var(--tr)}
@media (hover:hover) and (pointer:fine){.f-legal a:hover{color:var(--purple-text)}}.socials{display:flex;gap:10px}
.socials a{width:36px;height:36px;border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text2);transition:background-color var(--tr-ui),color var(--tr-ui),border-color var(--tr-ui),transform var(--tr-ui),opacity var(--tr-ui),box-shadow var(--tr-ui),width var(--tr-ui)}
@media (hover:hover) and (pointer:fine){.socials a:hover{border-color:var(--purple);color:var(--purple-text)}}/* ============================================================
   MODAL — redesigned light form with radio buttons
   ============================================================ */
.mo{position:fixed;inset:0;background:rgba(12,10,16,.6);backdrop-filter:blur(10px);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s ease}
.mo.active{opacity:1;pointer-events:all}
.modal{background:#FAFAFA;color:#1A1A1A;border-radius:24px;padding:32px 28px;max-width:420px;width:92%;position:relative;transform:translateY(24px);transition:transform .4s ease;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.mo.active .modal{transform:translateY(0)}
.modal-close{position:absolute;top:14px;right:14px;width:36px;height:36px;background:rgba(0,0,0,.06);border:none;border-radius:50%;color:#666;font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--tr)}
@media (hover:hover) and (pointer:fine){.modal-close:hover{background:rgba(0,0,0,.12)}}.modal h2{font-family:var(--font-h);font-size:1.1rem;font-weight:800;color:#1A1A1A;margin-bottom:4px}
.modal .msub{font-size:.82rem;color:#777;margin-bottom:20px}
.fg{margin-bottom:10px}
.fg label{display:block;font-size:.82rem;font-weight:600;color:#555;margin-bottom:8px}
/* 16px — против авто-зума iOS Safari при фокусе (правило одно для всех полей). */
.fg input[type="text"],.fg input[type="tel"]{width:100%;padding:14px 18px;background:#fff;border:1.5px solid #E0E0E0;border-radius:var(--rs);color:#1A1A1A;font-family:var(--font-b);font-size:16px;outline:none;transition:border-color var(--tr)}
.fg input::placeholder{color:#bbb}
.fg input:focus{border-color:var(--purple)}



.form-submit{width:100%;margin-top:8px;padding:16px;font-size:.85rem;border-radius:var(--rs)}
.fp{font-size:.7rem;color:#999;margin-top:14px;text-align:center;line-height:1.5}
.fp a{color:#777;text-decoration:underline}

/* Hidden field for page source tracking */
.fg-hidden{display:none}

/* MOBILE MENU */
.mm{position:fixed;inset:0;background:rgba(12,10,16,.98);backdrop-filter:blur(20px);z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;opacity:0;pointer-events:none;transition:opacity .4s ease}
.mm.active{opacity:1;pointer-events:all}
.mm a{font-family:var(--font-h);font-size:1.2rem;font-weight:700;color:var(--text)}

/* RESPONSIVE */
@media(max-width:1024px){
    .container{padding:0 24px}
    .concept-grid{grid-template-columns:1fr;gap:48px}
    .features-g{grid-template-columns:repeat(2,1fr)}
    .teachers-g .tc{flex-basis:calc((100% - 48px)/4)}
    
    .r-grid{grid-template-columns:repeat(2,1fr)}
    .cta-band-box{flex-direction:column;text-align:center}
    footer .container{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
    /* 4 направления в ряд живут от 769px (site2-43): на 800–1024 карточки
       ~170–220px и читаемы; телефон — 2×2, в 4 колонки фото нечитаемо. */
    /* site2-52: «Направления» — лента; margin = паддинг .container (24px) */
    .dir-p{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:14px;margin:0 -24px 16px;padding:0 24px 8px;scrollbar-width:none}
    .dir-p::-webkit-scrollbar{display:none}
    .dir-p .dc{flex:0 0 72vw;max-width:300px;scroll-snap-align:start}
    .dir-p .dc.reveal{opacity:1;transform:none}
    .directions{padding:72px 0}.directions-h{margin-bottom:28px}
    /* Шаг 1 записи (.zb-dirs тоже .dir-p) — сетка 2×2, перекрывает ленту */
    .dir-p.zb-dirs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;overflow:visible;margin:0;padding:0}
    .zb-dirs .dc{flex:none;max-width:none}
    .zb-dirs .dc-img{aspect-ratio:4/3;height:auto}
    .zb-dirs .dc-body{padding:10px 12px}
    .zb-dirs .dc-body h3{font-size:.78rem;white-space:nowrap}
    nav,.h-phone{display:none}.burger{display:flex}
    /* На 320px логотип + «Записаться» + бургер не помещались, и страница
       начинала ездить вбок на 8px (замер 01.09). Промежуток шапки на узком
       экране не нужен — между тремя элементами и так пусто. */
    header .container{gap:10px}
    .h-right{gap:12px}
    .features-g,.dir-s,.r-grid{grid-template-columns:1fr}
    /* site2-49: лента вместо 9 экранов карточек; margin = паддинг .container (24px) */
    .teachers-g{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 -24px;padding:0 24px 8px;scrollbar-width:none}
    .teachers-g::-webkit-scrollbar{display:none}
    .teachers-g .tc{flex:0 0 62vw;max-width:260px;scroll-snap-align:start}
    .teachers{padding:72px 0}.teachers-h{margin-bottom:28px}
    
    .hero-stats{gap:28px;flex-wrap:wrap}
    .cta-box,.cta-band-box{padding:40px 24px}
    footer .container{grid-template-columns:1fr;gap:24px}
    .f-bottom{flex-direction:column;gap:12px;text-align:center}
}
@media(max-width:480px){
    .gi{flex:0 0 240px;height:320px}
    
    
}

/* MAX icon hover */

/* ── Мастер записи (site-booking-9, 2026-08-25) ────────────────────────────
   Переиспользует .mo / .modal / .btn / .fg существующей формы. Ничего из них
   НЕ переопределяем: правка .btn под мастер поехала бы по всему лендингу. */
.wsb-modal{max-width:460px;max-height:86vh;overflow-y:auto}
.wsb-back{position:absolute;top:14px;left:14px;width:36px;height:36px;background:rgba(0,0,0,.06);border:none;border-radius:50%;color:#666;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--tr)}
@media (hover:hover) and (pointer:fine){.wsb-back:hover{background:rgba(0,0,0,.12)}}.wsb-modal h2{padding-right:40px}
.wsb-loading{color:#999}

.wsb-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Кнопки направлений — те же .btn .btn-g, что на карточках направлений.
   Здесь только раскладка: ширина по ячейке и перенос длинных названий. */
.wsb-tile{width:100%;white-space:normal;line-height:1.3;padding:14px 16px}
/* Запасной выход в старую форму — не главное действие, поэтому спокойнее. */
.wsb-legacy{width:100%;margin-top:8px;background:transparent;border:1.5px solid #E0E0E0;color:#666}
@media (hover:hover) and (pointer:fine){.wsb-legacy:hover{border-color:var(--purple);color:var(--purple-text)}}.wsb-retry{width:100%}

.wsb-teachers{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.wsb-teacher{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;background:#fff;border:1.5px solid #E0E0E0;border-radius:var(--rs);cursor:pointer;text-align:left;transition:background-color var(--tr-ui),color var(--tr-ui),border-color var(--tr-ui),transform var(--tr-ui),opacity var(--tr-ui),box-shadow var(--tr-ui),width var(--tr-ui)}
@media (hover:hover) and (pointer:fine){.wsb-teacher:hover{border-color:var(--purple)}}.wsb-ph{flex-shrink:0;width:46px;height:46px;border-radius:50%;overflow:hidden;background:#EEE;display:flex;align-items:center;justify-content:center}
.wsb-ph img{width:100%;height:100%;object-fit:cover}
.wsb-noph{font-family:var(--font-h);font-weight:800;color:#999}
.wsb-tx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.wsb-tx b{font-size:.9rem;color:#1A1A1A}
.wsb-tx i{font-style:normal;font-size:.76rem;color:#888}
.wsb-rate{flex-shrink:0;font-size:.8rem;color:#C08A2E}
.wsb-any{width:100%;background:transparent;border:1.5px solid #E0E0E0;color:#666}
@media (hover:hover) and (pointer:fine){.wsb-any:hover{border-color:var(--purple);color:var(--purple-text)}}.wsb-days{display:flex;flex-direction:column;gap:12px}
.wsb-day{display:flex;flex-direction:column;gap:6px}
.wsb-dname{font-size:.78rem;font-weight:700;color:#555;text-transform:capitalize}
.wsb-slots{display:flex;flex-wrap:wrap;gap:8px}
.wsb-slot{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 16px;background:#fff;border:1.5px solid #E0E0E0;border-radius:var(--rs);color:#1A1A1A;font-family:var(--font-b);font-size:.88rem;font-weight:600;cursor:pointer;transition:background-color var(--tr-ui),color var(--tr-ui),border-color var(--tr-ui),transform var(--tr-ui),opacity var(--tr-ui),box-shadow var(--tr-ui),width var(--tr-ui)}
.wsb-slot i{font-style:normal;font-size:.68rem;color:#999;font-weight:500}
@media (hover:hover) and (pointer:fine){.wsb-slot:hover{border-color:var(--purple);color:var(--purple-text)}.wsb-slot:hover i{color:var(--purple-text)}}.wsb-submit{width:100%;margin-top:6px}
.wsb-submit:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.wsb-privacy{display:flex;align-items:flex-start;gap:10px;margin-top:14px;cursor:pointer}
.wsb-privacy input{width:16px;height:16px;flex-shrink:0;margin-top:2px;accent-color:#8B5CF6;cursor:pointer}
.wsb-privacy span{font-size:12px;color:#9B96B0;line-height:1.5}
.wsb-privacy a{color:#8B5CF6;text-decoration:underline}
.wsb-bad{border-color:#F87171 !important}
.wsb-bad-tx{color:#F87171 !important}
.wsb-err{margin-top:10px;font-size:.8rem;color:#F87171}
.wsb-phone{margin-top:12px;font-size:.82rem;color:#777;text-align:center}
.wsb-phone a{color:#8B5CF6;text-decoration:none}

@media(max-width:480px){
    .wsb-tiles{grid-template-columns:1fr}
}

/* ── Форма отзыва о педагоге (site-booking-11 §6) ──────────────────────────
   Переиспользует .mo / .modal / .btn / .fg, как и мастер записи. */
.wsr-modal{max-width:460px;max-height:86vh;overflow-y:auto}
.wsr-cta{margin-top:28px;text-align:center}
.wsr-stars{display:flex;gap:6px;justify-content:center;margin:6px 0 14px}
.wsr-star{background:none;border:none;font-size:1.7rem;line-height:1;color:#DDD;cursor:pointer;padding:2px;transition:color var(--tr)}
.wsr-star.on{color:#F2B01E}
@media (hover:hover) and (pointer:fine){.wsr-star:hover{color:#F2B01E}}.wsr-submit{width:100%}
.wsr-submit:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.wsr-modal select.input-field{width:100%;padding:14px 18px;background:#fff;border:1.5px solid #E0E0E0;border-radius:var(--rs);color:#1A1A1A;font-family:var(--font-b);font-size:16px}
.wsr-modal textarea.input-field{width:100%;padding:14px 18px;background:#fff;border:1.5px solid #E0E0E0;border-radius:var(--rs);color:#1A1A1A;font-family:var(--font-b);font-size:16px;resize:vertical}
.wsr-err{margin-top:10px;font-size:.8rem;color:#F87171;text-align:center}

/* КАК ДОБРАТЬСЯ (12b: блок укладывается в один экран, шаги связаны с фото) */
.route{padding:100px 0;position:relative;z-index:1}
.route-h{margin-bottom:32px}
.route-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}

.route-map{border-radius:var(--r);overflow:hidden;background:var(--bg2);border:1px solid var(--border);aspect-ratio:4/3}
.route-map iframe{display:block;width:100%;height:100%;border:0}
.route-map-stub{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;color:var(--text2);font-size:.9rem;line-height:1.5;
    background:repeating-linear-gradient(135deg,var(--bg2) 0 12px,var(--bg3) 12px 24px)}
.route-pin{font-size:1.7rem;color:var(--purple-text);line-height:0}
.route-map-why{max-width:260px}
/* Светлая кнопка на тёмной заглушке — токенами, без своего цвета.
   `.btn-o` здесь не годится: прозрачная кнопка на штриховке и есть та
   «серая, будто выключенная», на которую жаловался владелец. */
.route-map-stub .btn{background:var(--text);color:var(--bg)}
@media (hover:hover) and (pointer:fine){.route-map-stub .btn:hover{background:#fff}}.route-under{margin-top:10px;font-size:.82rem;color:var(--text3)}
.route-under a{color:var(--neon)}

.route-aside{display:flex;flex-direction:column;gap:14px}
.route-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:10px}
.route-addr{font-family:var(--font-h);font-size:1.15rem;color:var(--text)}
.route-addr-sub{color:var(--text2);font-size:.9rem;margin-bottom:6px}
.route-card .btn{width:100%}

.route-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.route-fact{background:var(--card);border:1px solid var(--border);border-radius:var(--rs);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.route-fact span{color:var(--text3);font-size:.78rem}
.route-fact b{color:var(--text);font-size:.92rem;font-weight:600}

/* list-style снимаем ЯВНО: в сбросе обнулён только ul, а это ol — и стоит
   ему потерять display:flex (медиазапрос, чужая правка), как рядом с нашим
   кружком появится второй, браузерный номер. */
.route-steps{display:flex;flex-direction:column;gap:12px;margin-top:4px;
    list-style:none;padding-left:0;margin-left:0}
.route-steps li{display:flex;gap:12px;align-items:flex-start;color:var(--text2);line-height:1.5;font-size:.95rem}
.route-num{flex:0 0 24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-family:var(--font-h);font-size:.72rem;color:var(--text2);background:var(--bg3);border:1px solid var(--border2)}
.route-num--done{background:var(--grad);color:#fff;border-color:transparent}

.route-photos-h{margin:28px 0 12px;color:var(--text3);font-size:.85rem}
.route-photos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.route-photos figure{position:relative;border-radius:var(--rs);overflow:hidden;background:var(--card);border:1px solid var(--border)}
.route-photos img{width:100%;height:200px;object-fit:cover;display:block}
/* Вертикальный кадр двери: без сдвига половина площади — потолок и плитка. */
.route-door{object-position:center 42%}
.route-badge{position:absolute;top:10px;left:10px;z-index:1;width:24px;height:24px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-size:.72rem;
    color:var(--text);background:var(--bg);border:1px solid var(--border2)}
.route-badge--done{background:var(--grad);color:#fff;border-color:transparent}
.route-photos figcaption{padding:10px 14px;color:var(--text2);font-size:.85rem}

@media(max-width:900px){
    .route{padding:64px 0}
    .route-grid{grid-template-columns:1fr}
    .route-photos{grid-template-columns:1fr}
    .route-photos img{height:220px}
}

/* ЗАПИСЬ НА ПРОБНЫЙ (site-booking-16) */
.zapis{padding:100px 0;position:relative;z-index:1}
.zb{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:32px}
.zb-pill{display:inline-block;padding:6px 14px;border-radius:50px;background:var(--purple-dim);
    color:var(--neon);font-family:var(--font-h);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
.zb .st{margin-bottom:22px}
.zb-load,.zb-empty{color:var(--text2);padding:18px 0}

.zb-step{display:flex;align-items:center;gap:12px;margin:20px 0 14px}
.zb-num{flex:0 0 26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-family:var(--font-h);font-size:.72rem;color:var(--text2);background:var(--bg3);border:1px solid var(--border2)}
.zb-step h3{font-family:var(--font-h);font-size:1.05rem;color:var(--text)}

.zb-chosen{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);
    border:1px solid var(--border);border-radius:var(--rs);padding:12px 16px;margin-bottom:10px}
.zb-chosen-k{color:var(--text3);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.zb-chosen b{color:var(--text)}
.zb-check{width:22px;height:22px;border-radius:50%;background:var(--grad);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:.72rem}
.zb-check--big{width:42px;height:42px;font-size:1.2rem;margin:0 auto 14px}
.zb-link{background:none;border:none;color:var(--neon);cursor:pointer;font-size:.85rem;
    text-decoration:underline;text-underline-offset:3px;padding:0;font-family:var(--font-b)}


.zb-near{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    background:var(--purple-dim);border:1px solid var(--purple);border-radius:var(--rs);padding:18px 20px}
.zb-near span{display:block;color:var(--text3);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.zb-near b{font-family:var(--font-h);font-size:1.05rem;color:var(--text)}
.zb-or{color:var(--text3);font-size:.85rem;margin:18px 0 10px}

.zb-days{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}
.zb-day{flex:0 0 auto;min-width:92px;padding:12px 14px;border-radius:var(--rs);background:var(--card);
    border:1px solid var(--border2);cursor:pointer;transition:background-color var(--tr-ui),color var(--tr-ui),border-color var(--tr-ui),transform var(--tr-ui),opacity var(--tr-ui),box-shadow var(--tr-ui),width var(--tr-ui);text-align:left}
.zb-day span{display:block;color:var(--text3);font-size:.72rem}
.zb-day b{display:block;font-family:var(--font-h);font-size:.92rem;color:var(--text);margin:2px 0}
.zb-day i{font-style:normal;font-size:.72rem;color:var(--text3)}
.zb-day.is-on{background:var(--grad);border-color:transparent}
.zb-day.is-on span,.zb-day.is-on b,.zb-day.is-on i{color:#fff}
.zb-day.is-empty{opacity:.45;cursor:default}

.zb-parts{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.zb-part{display:flex;align-items:flex-start;gap:14px}
.zb-part>span{flex:0 0 64px;color:var(--text3);font-size:.82rem;padding-top:8px}
.zb-slots{display:flex;flex-wrap:wrap;gap:8px}
.zb-slot{padding:9px 16px;border-radius:var(--rs);background:var(--card);border:1px solid var(--border2);
    color:var(--text);font-family:var(--font-h);font-size:.82rem;cursor:pointer;transition:background-color var(--tr-ui),color var(--tr-ui),border-color var(--tr-ui),transform var(--tr-ui),opacity var(--tr-ui),box-shadow var(--tr-ui),width var(--tr-ui)}
@media (hover:hover) and (pointer:fine){.zb-slot:hover{border-color:var(--purple)}}.zb-slot.is-on{background:var(--grad);border-color:transparent;color:#fff}
.zb-slot.is-taken{opacity:.35;text-decoration:line-through;cursor:default}

/* .zb-teachers / .zb-teacher / .zb-teacher--any удалены 01.09 вместе с шагом
   «с кем заниматься»: разметки, которая их использовала, больше нет. */

.zb-hold{color:var(--text3);font-size:.85rem;margin-bottom:12px}
.zb-hold b{color:var(--neon)}
.zb-form{display:flex;flex-direction:column;gap:12px;max-width:420px;position:relative}
/* 16px — НЕ вкусовщина: Safari на iOS увеличивает страницу при фокусе в поле
   с меньшим кеглем, и форма уезжает за экран прямо во время заполнения.
   Ниже 16px здесь опускать нельзя. */
.zb-input{padding:14px 16px;border-radius:var(--rs);background:var(--card);border:1px solid var(--border2);
    color:var(--text);font-family:var(--font-b);font-size:16px}
.zb-input:focus{outline:none;border-color:var(--purple)}
.zb-privacy{display:flex;gap:10px;align-items:flex-start;color:var(--text3);font-size:.78rem;line-height:1.5}
.zb-privacy a{color:var(--neon)}
.zb-err{color:var(--hot);font-size:.85rem}
/* Поле с ошибкой: рамка и короткая тряска. Одного цвета мало — человек
   смотрит на кнопку, а не на поле, и статичную рамку не замечает. */
.zb-input.is-bad{border-color:var(--hot);box-shadow:0 0 0 3px var(--hot-dim)}
@keyframes zbShake{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-6px)}
    40%{transform:translateX(6px)}
    60%{transform:translateX(-4px)}
    80%{transform:translateX(4px)}
}
.zb-input.shake{animation:zbShake .32s ease}
/* Кому движение мешает — оставляем рамку. Тряска здесь усиление, а не
   единственный носитель смысла. */
@media(prefers-reduced-motion:reduce){.zb-input.shake{animation:none}}
.zb-submit{margin-top:4px}

.zb-fallback{margin-top:20px;color:var(--text3);font-size:.85rem}
/* Запасной путь — не сноска. Это второй по важности элемент шага после самой
   сетки: он для тех, у кого не получилось, а таких мы до сих пор теряли
   молча. */
.zb-escape{margin-top:22px;padding:16px 18px;border:1px solid var(--border);
    border-radius:var(--r);background:var(--card);
    display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.zb-escape p{font-size:.88rem;color:var(--text2);margin:0}
/* «Перезвоните мне» по часам администратора (site2-54): вторичная кнопка над карточками. */
.zb-cb{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin:0 0 18px}
.zb-cb-btn{padding:11px 20px;font-size:.74rem}
.zb-cb-note{font-size:.82rem;color:var(--text3)}
.zb-cb-note--solo{margin:0 0 16px}
@media(max-width:480px){.zb-cb-btn{width:100%}.zb-cb{flex-direction:column;align-items:stretch}}
/* Потерянный час: объяснение вместо немого прыжка экрана. */
.zb-notice{margin:14px 0 4px;padding:12px 16px;border-radius:var(--r);
    background:rgba(255,180,80,.12);border:1px solid rgba(255,180,80,.35);
    color:var(--text);font-size:.9rem}
.zb-foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);color:var(--text2);font-size:.85rem}

.zb-done{text-align:center;padding:16px 0}
.zb-done h3{font-family:var(--font-h);font-size:1.3rem;color:var(--text);margin-bottom:8px}
.zb-done-when{font-family:var(--font-h);color:var(--neon);font-size:1.05rem;margin-bottom:6px}
.zb-done-addr{color:var(--text2);margin-bottom:18px}
.zb-done-act{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* «Записать ещё одного» — отдельной строкой под парой кнопок, а не третьей
   в их ряду: это другое намерение, и в ряду оно читалось бы как равнозначное
   «добавить в календарь» (site2-46). */
.zb-second{margin-top:14px}
/* «Показать ещё время» — под сеткой часов, шириной в блок: это продолжение
   ленты, а не действие рядом с записью (site-slots-3). */
.zb-more{display:block;width:100%;margin-top:12px}
/* Стрелки листания недель (site-slots-4) — те же чипы, только уже и без
   подписей: отдельного элемента и новых цветов лента не просит. */
.zb-day--nav{min-width:48px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;font-weight:600;color:var(--text);line-height:1}
@media (hover:hover) and (pointer:fine){.zb-day--nav:hover{border-color:var(--purple)}}.zb-done-note{margin-top:16px;color:var(--text3);font-size:.85rem}
.zb-done-note a{color:var(--neon)}

@media(max-width:600px){
    .zapis{padding:64px 0}
    .zb{padding:22px 18px}
    .zb-part{flex-direction:column;gap:6px}
    .zb-part>span{padding-top:0}
    .zb-near{flex-direction:column;align-items:stretch}
    .zb-near .btn{width:100%}
}

/* ПЕРЕХОД МЕЖДУ АУДИТОРИЯМИ (site2-7) */
/* Ссылка на ДРУГУЮ страницу, а не якорь: отделена разделителем и точкой, иначе
   в ряду одинаковых пунктов читается как ещё один раздел этой же страницы. */
.nav-cross{position:relative;margin-left:14px;padding-left:16px;color:var(--neon);
    white-space:nowrap}
.nav-cross::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:1px;height:14px;background:var(--border2)}
.mm .nav-cross{margin-left:0;padding-left:0;order:-1;
    background:var(--hot);color:#fff;padding:10px 22px;border-radius:50px;
    font-family:var(--font-h);font-size:.8rem}
.mm .nav-cross::before{display:none}

.h-soc{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin-left:10px}
/* Ниже 1280 в шапке не остаётся места: пункт перехода и телефон ломались на
   две строки. Иконки в шапке — добавка, а телефон и переход — нет; прячем
   иконки, они по-прежнему в подвале. */
/* Меню стало короче на два пункта — иконки помещаются с 1100px. Ниже уходят
   в бургер вместе с остальной навигацией. */
@media(max-width:1099px){.h-soc{display:none}}
.h-soc a{display:flex;width:20px;height:20px;opacity:.85;transition:opacity var(--tr)}
@media (hover:hover) and (pointer:fine){.h-soc a:hover{opacity:1}}.cross-band{display:flex;align-items:center;justify-content:space-between;gap:16px;
    max-width:1240px;margin:0 auto;padding:14px 32px;
    background:var(--purple-dim);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
    color:var(--text2);font-size:.92rem;transition:background var(--tr)}
@media (hover:hover) and (pointer:fine){.cross-band:hover{background:var(--card)}}.cross-band-go{flex:0 0 auto;font-family:var(--font-h);font-size:.78rem;color:var(--neon)}
.cross-sec{padding:0 0 40px}
.cross-band--wide{border-radius:var(--r);border:1px solid var(--border);padding:22px 26px}
.cross-band--wide .cross-band-tx b{display:block;font-family:var(--font-h);font-size:1.05rem;
    color:var(--text);margin-bottom:6px}

@media(max-width:900px){
    .cross-band{flex-direction:column;align-items:flex-start;gap:8px;padding:14px 20px}
}

/* Разделитель групп в FAQ: возражения сверху, справка ниже (site2-17) */
.faq-group{margin:26px 0 12px;color:var(--text3);font-size:.82rem;
    letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-h)}

/* Переход между аудиториями. Заметная заливка — решение владельца 01.09:
   человек должен увидеть её сразу. Но НЕ градиент «Записаться»: плоский
   `--hot` из той же палитры читается как своя кнопка и при этом никогда не
   сливается с главным действием страницы. */
.h-kids{white-space:nowrap;background:var(--hot);color:#fff}
@media (hover:hover) and (pointer:fine){.h-kids:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(255,107,157,.35)}}@media(max-width:768px){.h-kids{display:none}}
@media(max-width:1439px){nav{gap:18px}.h-soc{display:none}}
@media(max-width:1199px){nav{gap:12px}}
@media(max-width:1099px){.h-phone{display:none}}
/* site2-49 п.9: на 769–1023 пять ссылок + «Детям 7–15» + «Записаться» не помещаются (замер: +178…201px) —
   ссылки уходят в бургер, «Детям 7–15» остаётся в шапке. Логотип в одну строку только там, где есть место. */
@media(max-width:1023px){nav{display:none}.burger{display:flex}}
@media(max-width:768px){.logo{white-space:normal}}

/* Карточки направлений внутри блока записи: та же вёрстка, чуть плотнее */
.zb-dirs{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:0}
.zb-dirs .dc-body{padding:14px 16px}
.zb-dirs .dc-body h3{margin-bottom:0}

/* Горизонтальный скролл на узком экране (замер 01.09, 320px: документ 328px).
   Виновник назван поимённо — заголовок галереи «Занятия ЗАКАНЧИВАЮТСЯ…»:
   слово в 28.8px неразрывно и требует 280px, плюс отступы контейнера 24+24 =
   328. Ломаем ТОЛЬКО то, что не влезает: overflow-wrap срабатывает лишь когда
   слово шире строки, на широком экране ничего не меняется.
   `html{overflow-x:hidden}` тут не лечение — оно глушит симптом и прячет
   следующую такую же ошибку. */
.st,.ss,.sl,h1,h2,h3{overflow-wrap:break-word}

/* Но ломать слово посреди — плохой вид: «заканчивают/ся» читается как опечатка.
   На экранах уже 360px (это 320px-аппараты, их мало) заголовок чуть мельче —
   тогда слово влезает целиком, и перенос выше остаётся страховкой, которая не
   срабатывает. Пол clamp() трогать нельзя: он правит ВСЕ заголовки до 720px. */
@media(max-width:359px){
    .st{font-size:1.55rem}
}

/* ИКОНКИ МЕССЕНДЖЕРОВ (site2-19)
   Форму задаёт файл-маска, цвет — фон под ней. Так градиент сайта ложится на
   любую иконку независимо от того, чем она залита внутри: раньше Telegram жил
   на currentColor, MAX был картинкой со своей тёмной заливкой и на тёмной
   шапке пропадал, VK — третьим механизмом. */
.ico{display:block;width:100%;height:100%;background:var(--grad);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:center;mask-position:center;
    -webkit-mask-size:contain;mask-size:contain;
    transition:opacity var(--tr)}
.ico--tg{-webkit-mask-image:url(../images/social/telegram.svg);mask-image:url(../images/social/telegram.svg)}
.ico--max{-webkit-mask-image:url(../images/social/max.svg);mask-image:url(../images/social/max.svg)}
.ico--vk{-webkit-mask-image:url(../images/social/vk.svg);mask-image:url(../images/social/vk.svg)}

/* В подвале иконка внутри кружка-рамки — ей нужен внутренний отступ. */
.socials a .ico{width:16px;height:16px;opacity:.9}
@media (hover:hover) and (pointer:fine){.socials a:hover .ico{opacity:1}}/* ГАЛЕРЕЯ ПЕДАГОГА (site2-22). Переиспользует .mo / .modal / .btn — как
   мастер записи и форма отзыва. Своего оверлея не заводим. */
/* site2-52: модалка по ширине фото (.modal: паддинги 28+28) — без пустого столбца справа; крестик — на фото */
.wst-modal{width:min(92vw,520px,calc(56vh * .75 + 56px));max-width:none;max-height:88vh;overflow-y:auto}
.wst-modal .modal-close{top:42px;right:38px;background:rgba(255,255,255,.92);color:#333;z-index:2;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.wst-stage{position:relative;border-radius:var(--r);overflow:hidden;
    aspect-ratio:3/4;max-height:56vh;background:#EEE;margin:0 auto 12px}
.wst-img{width:100%;height:100%;object-fit:cover;display:block}
.wst-nav{position:absolute;top:50%;transform:translateY(-50%);
    width:40px;height:40px;border:none;border-radius:50%;cursor:pointer;
    background:rgba(255,255,255,.85);color:#1A1A1A;font-size:1.4rem;line-height:1;
    display:flex;align-items:center;justify-content:center;transition:background var(--tr)}
@media (hover:hover) and (pointer:fine){.wst-nav:hover{background:#fff}}.wst-prev{left:10px}
.wst-next{right:10px}
.wst-dots{display:flex;gap:6px;justify-content:center;margin-bottom:14px}
.wst-dot{width:7px;height:7px;padding:0;border:none;border-radius:50%;
    background:rgba(0,0,0,.18);cursor:pointer;transition:background var(--tr)}
.wst-dot.is-on{background:var(--hot)}
.wst-bio{font-size:.88rem;line-height:1.6;color:#555;white-space:pre-line;margin-bottom:18px}
.wst-book{width:100%}

/* Признак галереи на карточке в сетке. */
.tc--open{cursor:pointer}
.tc--open:focus-visible{outline:2px solid var(--hot);outline-offset:3px;border-radius:var(--r)}
.tc-count{position:absolute;right:8px;bottom:8px;z-index:1;
    padding:3px 9px;border-radius:50px;font-size:.68rem;
    background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(4px)}

/* ЦЕНЫ (site2-23). Карточка на всю ширину: направления с одинаковым прайсом
   слиты в одну, и трёх колонок больше не нужно. Всё на переменных сайта. */
.prices{padding:100px 0;position:relative;z-index:1}
.prices-h{text-align:center;margin-bottom:24px}
/* Блок шириной 520px без auto-полей прижимается влево, и центрирование текста
   внутри него не спасает — как было у features и directions. */
.prices-h .ss{margin:10px auto 0}
.prices-lead{max-width:660px;color:var(--text2);margin:0 auto 28px;line-height:1.7;text-align:center}
.prices-grid{display:flex;flex-direction:column;gap:20px}
.prices-foot{margin-top:22px;text-align:center;color:var(--text3);font-size:.86rem}

.ptable{background:var(--card);border:1px solid var(--border);border-radius:var(--r);
    padding:26px 24px}
.pt-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.pt-head h3{font-family:var(--font-h);font-size:1.15rem;color:var(--text)}
.pt-note{font-size:.78rem;color:var(--text3)}
.pt-list{flex-basis:100%;font-size:.78rem;color:var(--text3)}

/* Ни одной колонки «по содержимому»: каждая строка — свой грид-контейнер, и
   `auto` в них считается независимо. Прочерк в первой строке делал её колонку
   уже остальных, а fr-колонки забирали освободившееся место — строка уезжала
   относительно шапки. Доли фиксированы, ширина одинакова при любом прайсе. */
.pt-cols,.pt-row{display:grid;grid-template-columns:1.3fr .9fr 1fr 1fr 1.1fr;
    gap:12px;align-items:center}
.ptable--nogain .pt-cols,.ptable--nogain .pt-row{grid-template-columns:1.3fr .9fr 1fr 1fr}
.pt-cols{padding:0 14px 8px;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--text3);border-bottom:1px solid var(--border)}
.pt-cols span:nth-child(3),.pt-cols span:nth-child(4),
.pt-cols span:nth-child(5){text-align:right}

.pt-rows{display:flex;flex-direction:column}
.pt-row{padding:14px;border-radius:var(--rs);border:1px solid transparent}
.pt-n{font-family:var(--font-h);font-size:.92rem;color:var(--text);
    display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Моноширинные цифры: в пропорциональном шрифте «1» уже «2», и столбец из
   1 950 / 2 150 / 2 450 стоит неровно даже при идеальной сетке. */
.pt-per,.pt-sum,.pt-gain{font-variant-numeric:tabular-nums}
.pt-term{font-size:.86rem;color:var(--text2)}
.pt-per{font-size:.86rem;color:var(--text2);text-align:right}
.pt-sum{font-family:var(--font-h);font-size:.95rem;color:var(--text);text-align:right}
.pt-gain{font-size:.86rem;color:var(--neon);text-align:right}
.pt-dash{color:var(--text3)}
/* Подпись колонки внутри ячейки — только на мобильном, где шапки таблицы нет. */
.pt-lbl{display:none}

/* Выделенный тариф — заливкой, рамкой и бейджем (site2-87: без полосы слева). Порядок строк не меняем:
   возрастание цены и есть то, по чему человек читает таблицу. */
.pt-row.is-best{background:color-mix(in srgb,var(--purple) 8%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--purple) 35%,transparent)}
.pt-badge{background:var(--grad);color:#fff;font-style:normal;font-size:.68rem;
    padding:3px 9px;border-radius:50px;white-space:nowrap}

.pt-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
    margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.pt-hint{font-size:.8rem;color:var(--text3)}

.prices-terms{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.pterm{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px}
.pterm p{margin-top:8px;font-size:.86rem;line-height:1.6;color:var(--text2)}

@media(max-width:767px){
    .prices{padding:64px 0}
    /* Пять колонок не влезают: каждый тариф — карточка. */
    .pt-cols{display:none}
    .pt-row,.ptable--nogain .pt-row{grid-template-columns:1fr;gap:6px;
        background:var(--bg2);margin-bottom:10px}
    .pt-c{display:flex;justify-content:space-between;align-items:baseline}
    .pt-lbl{display:inline;font-style:normal;font-size:.72rem;color:var(--text3)}
    .pt-sum,.pt-gain{text-align:left}
    .pt-foot{flex-direction:column;align-items:stretch}
    .pt-foot .btn{width:100%}
    .pt-hint{text-align:center}
    .prices-terms{grid-template-columns:1fr}
}


/* Кнопка на карточке педагога (site2-25). Карточка узкая — кнопка во всю
   ширину и мелким кеглем, иначе текст переносится посередине слова. */
.tc-book,.tc-ask{width:100%;margin-top:12px;font-size:.78rem;padding:10px 12px}

/* ── Блок записи на телефоне (site2-34) ─────────────────────────────────── */
@media(max-width:767px){
    /* Цель нажатия: 44px — минимум, ниже которого промахи по соседнему часу
       становятся правилом, а не случайностью. Здесь это цена ошибки в
       записи на урок. */
    .zb-slot{padding:13px 18px;font-size:.9rem}
    .zb-slots{gap:10px}
    /* Лента дней листается — затенение у правого края говорит об этом,
       пока не долистали до конца. */
    .zb-days-wrap{position:relative}
    .zb-days-wrap::after{content:'';position:absolute;top:0;right:0;bottom:4px;width:38px;
        pointer-events:none;background:linear-gradient(to left,var(--bg),transparent)}
}

/* site2-49 п.13: плашка cookies на телефоне — одна строка ≤60px (стили плашки инлайном → !important) */
#cookie-bar .ck-short{display:none}
@media(max-width:600px){
    #cookie-bar{padding:10px 16px!important}
    #cookie-bar,#cookie-main{flex-wrap:nowrap!important;gap:10px!important}
    #cookie-bar p{font-size:12px!important;line-height:1.3!important;min-width:0!important}
    #cookie-bar .ck-more{display:none}
    #cookie-bar .ck-short{display:inline}
    #cookie-bar button{padding:6px 14px!important;white-space:nowrap}
}

/* site2-52: надстрочник первого экрана на телефоне — одна строка, белый поверх видео */
@media(max-width:480px){
    .hero-ey{font-size:.54rem;letter-spacing:.12em;gap:0;background:none;-webkit-text-fill-color:#fff;color:#fff;opacity:.9;text-shadow:0 1px 8px rgba(0,0,0,.5);white-space:nowrap}
    .hero-ey::before{display:none}
}
/* site2-52: «Записаться к педагогу» — в одну строку */
.tc-book{white-space:nowrap;font-size:.66rem;padding:10px 8px;width:100%}
@media(max-width:380px){
    .zb-dirs .dc-body{padding:10px}
    .zb-dirs .dc-body h3{font-size:.7rem}
}

/* ── site2-58: аудит №2 — телефон ─────────────────────────────── */
.mc-tags-more{display:none}
@media(max-width:768px){
  /* п.11: отзывы — горизонтальная лента, как педагоги и направления */
  .r-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -24px;padding:0 24px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .r-grid::-webkit-scrollbar{display:none}
  .r-grid .rc{flex:0 0 82vw;max-width:340px;scroll-snap-align:start}
  .r-grid .rc.reveal{opacity:1;transform:none}
  /* п.12: призыв «Не уверены?» между двумя лентами — только на компьютере */
  .cta-band{display:none}
  /* п.14: зоны нажатия ≥ 44 px (вид не меняется) */
  .fd-more{display:inline-flex;align-items:center;min-height:44px}
  .mm a{display:flex;align-items:center;min-height:44px}
  .tc-book,.tc-ask{min-height:44px}
  a[href*="87273936786/reviews"]{display:inline-flex;align-items:center;min-height:44px}
  a[href="https://yandex.com/maps/org/white_studio/87273936786/"]{display:inline-flex;align-items:center;min-height:44px}
  /* минимальный кегль 11 px */
  .fd-who{font-size:11px}
  .h-stat .l{font-size:11px}
}
@media(max-width:480px){
  .sp-hide-sm{display:none}
  /* п.13: облако тем МК — первые 6, остальные по кнопке */
  .mc-tags:not(.is-all) .mc-tag:nth-child(n+7){display:none}
  .mc-tags-more{display:flex;width:max-content;align-items:center;min-height:44px;margin:10px auto 0;padding:0 16px;background:none;border:0;cursor:pointer;font-family:var(--font-h);font-size:.72rem;font-weight:700;color:var(--neon)}
  /* п.14: надстрочник первого экрана — читаемо */
  .hero-ey-a{display:none}
  .hero-ey{font-size:.66rem;letter-spacing:.14em}
}
@media(max-width:768px){
  .sl,.zb-pill,.hero-ey{font-size:11px}
}
footer.ftn{padding:30px 0 24px}
@media(max-width:768px){.rc-date,.rc-stars{font-size:11px}}
@media(max-width:768px){.fd-more{font-size:11px}}
@media(max-width:768px){.r-grid{scroll-padding-inline:24px}}

/* ── site2-61: «О студии» — коллаж (только light-preview.html, класс ab-collage) ──
   Видео группы в наклонной рамке, четыре карточки направлений внахлёст (оживают через
   js/ws-cardvideo.js), два предмета, две наклейки, слово «ИГРАЙ» на фоне. */
#about.ab-collage{padding:0;background:var(--bg2)}
html.theme-light #about.ab-collage{background:var(--card)}
#about.ab-collage .container{padding-block:48px}
#about.ab-collage .abc{position:relative;min-height:720px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;isolation:isolate;overflow:hidden}
#about.ab-collage .abc{container-type:inline-size}
#about.ab-collage .abc-stage{container-type:inline-size}
/* site2-65: «ИГРАЙ» целиком и по центру; срез снизу ~десятая высоты букв на любой ширине */
#about.ab-collage .abc-word{position:absolute;left:0;right:0;bottom:-.08em;z-index:-1;text-align:center;font-family:var(--font-h);font-weight:900;font-size:17vw;font-size:19cqw;line-height:.8;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.16;white-space:nowrap;pointer-events:none}
#about.ab-collage .abc-word--m{display:none}
#about.ab-collage .abc-text{padding:48px clamp(0px,3vw,40px) 48px 0;min-width:0}
#about.ab-collage .abc-text p{color:var(--text2);max-width:48ch}
#about.ab-collage .abc-stage{position:relative;height:100%;min-height:620px;min-width:0}
#about.ab-collage .abc-main{position:absolute;left:8%;top:18%;width:78%;aspect-ratio:16/9;border-radius:22px;overflow:hidden;transform:rotate(-3deg);box-shadow:var(--sh);border:6px solid var(--card);background:var(--bg3)}
#about.ab-collage .abc-main video{width:100%;height:100%;object-fit:cover;display:block}
#about.ab-collage .abc-card{position:absolute;width:30%;aspect-ratio:3/2;border-radius:16px;overflow:hidden;border:5px solid var(--card);box-shadow:var(--sh);transform:rotate(var(--r));transition:transform .35s cubic-bezier(.23,1,.32,1);background:var(--bg3);padding:0;cursor:pointer;z-index:2}
/* site2-73 п.4: увеличение спокойнее; .on (автоочерёдность) снята в ws-cardvideo — только наведение */
#about.ab-collage .abc-card.on{transform:rotate(0deg) scale(1.08);z-index:5}@media (hover:hover) and (pointer:fine){#about.ab-collage .abc-card:hover{transform:rotate(0deg) scale(1.08);z-index:5}}#about.ab-collage .abc-card:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
#about.ab-collage .abc-card .dc-img{position:absolute;inset:0;aspect-ratio:auto;height:100%}
#about.ab-collage .abc-card .dc-img img{width:100%;height:100%;object-fit:cover;display:block}
#about.ab-collage .abc-tag{position:absolute;left:8px;bottom:8px;z-index:3;font-family:var(--font-h);font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--card);color:var(--text);padding:4px 8px;border-radius:999px}
#about.ab-collage .abc-c1{left:1%;top:5%;--r:-8deg}
#about.ab-collage .abc-c2{right:2%;top:3%;--r:7deg}
#about.ab-collage .abc-c3{left:3%;bottom:6%;--r:6deg}
#about.ab-collage .abc-c4{right:1%;bottom:9%;--r:-6deg}
#about.ab-collage .abc-sticker{position:absolute;z-index:4;font-family:var(--font-h);font-size:.95rem;font-weight:700;line-height:1.1;padding:12px 16px;border-radius:14px;box-shadow:var(--sh);transform:rotate(var(--r,0deg))}
#about.ab-collage .abc-sticker small{display:block;font-family:var(--font-b);font-weight:600;font-size:.78rem;margin-top:3px}
#about.ab-collage .abc-s1{left:56%;top:58%;background:var(--sun);color:var(--bg);--r:-7deg}
#about.ab-collage .abc-s1 .n{display:block;font-size:1.6rem}
#about.ab-collage .abc-s1:not(.is-on){display:none}
#about.ab-collage .abc-s2{left:12%;top:38%;background:var(--text);color:var(--bg);--r:6deg}
@media(max-width:1100px) and (min-width:861px){#about.ab-collage .abc-card{width:26%}}
@media(max-width:860px){
  #about.ab-collage .abc-word--d{display:none}
  #about.ab-collage .abc-word--m{display:block}
  #about.ab-collage .abc{grid-template-columns:minmax(0,1fr);min-height:0}
  #about.ab-collage .abc-stage{min-height:0;height:auto;aspect-ratio:1/1.05;order:-1;margin-top:32px}
  #about.ab-collage .abc-main{left:6%;width:88%;top:24%}
  #about.ab-collage .abc-card{width:38%}
  #about.ab-collage .abc-sticker{font-size:.72rem;padding:9px 12px}
  #about.ab-collage .abc-s1 .n{font-size:1.2rem}
  #about.ab-collage .abc-text{padding:24px 0 48px}
}
@media(prefers-reduced-motion:reduce){
  #about.ab-collage .abc-card{transition:none}
}

/* ── site2-66: «Отзывы» — колода (только light-preview.html, класс rv-deck) ── */
#reviews.rv-deck{padding:56px 0}
#reviews.rv-deck .rvd{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
#reviews.rv-deck .rvd-score{min-width:0}
#reviews.rv-deck .rvd-score .st{margin-bottom:12px}
#reviews.rv-deck .rvd-numrow{position:relative;display:inline-block}
#reviews.rv-deck .rvd-num{font-family:var(--font-h);font-weight:900;font-size:clamp(5rem,11vw,9.5rem);line-height:.9;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
#reviews.rv-deck .rvd-sticker{position:absolute;right:-96px;bottom:-6px;transform:rotate(-5deg);background:var(--sun);color:var(--bg);font-family:var(--font-h);font-weight:700;font-size:.85rem;line-height:1.1;padding:10px 14px;border-radius:14px;box-shadow:var(--sh);white-space:nowrap}
#reviews.rv-deck .rvd-sticker small{display:block;font-family:var(--font-b);font-weight:600;font-size:.72rem;margin-top:3px}
#reviews.rv-deck .rvd-stars{color:#FACC15;font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:4px;margin-top:18px}
#reviews.rv-deck .rvd-cap{font-size:1.05rem;color:var(--text2);margin:8px 0 18px}
#reviews.rv-deck .rvd-all{font-family:var(--font-h);font-size:.8rem;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#reviews.rv-deck .rvd-stack{min-width:0}
#reviews.rv-deck .r-grid{display:grid;grid-template-columns:1fr;gap:0;touch-action:pan-y;position:relative;margin:0;padding:0;overflow:visible}
#reviews.rv-deck .rc{grid-area:1/1;display:flex;flex-direction:column;gap:18px;padding:36px 36px 30px;opacity:1;max-width:none;flex:none;transition:transform .35s ease,opacity .35s ease,filter .35s ease;cursor:pointer;user-select:none}
#reviews.rv-deck .rc-stars{display:none}
#reviews.rv-deck .rc-text{order:1;font-size:clamp(1.1rem,1.7vw,1.4rem);line-height:1.5;color:var(--text)}
#reviews.rv-deck .rc-text::before{content:'“';display:block;font-family:var(--font-h);font-size:4rem;line-height:.6;height:.5em;color:color-mix(in srgb,var(--purple) 25%,transparent)}
#reviews.rv-deck .rc-head{order:2;margin:0}
/* site2-73 п.8: короткий текст — по центру высоты колоды */
#reviews.rv-deck .rc-text{margin-block:auto}
/* site2-75 п.2: короткий отзыв (≤ 120 символов) — крупнее и по центру карточки */
#reviews.rv-deck .rc--short .rc-text{font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.4}
#reviews.rv-deck .rc-av{width:44px;height:44px;background:var(--grad);color:#fff}
#reviews.rv-deck .rc[data-pos="0"]{z-index:3;transform:none}
#reviews.rv-deck .rc[data-pos="1"]{z-index:2;transform:translate(14px,10px) rotate(3deg);filter:brightness(.96)}
#reviews.rv-deck .rc[data-pos="2"]{z-index:1;transform:translate(-12px,14px) rotate(-4deg);filter:brightness(.92)}
#reviews.rv-deck .rc[data-pos="x"]{z-index:0;opacity:0;pointer-events:none}
#reviews.rv-deck .rc.is-fly,#reviews.rv-deck .rc.is-in{transform:translateX(-120%) rotate(-12deg);opacity:0}
#reviews.rv-deck .rc.is-in{transition:none}
#reviews.rv-deck .rvd-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:24px}
#reviews.rv-deck .rvd-nav button{width:48px;height:48px;border-radius:50%;border:1px solid var(--border2);background:var(--card);color:var(--text);font-size:1.2rem;cursor:pointer}
@media (hover:hover) and (pointer:fine){#reviews.rv-deck .rvd-nav button:hover{border-color:var(--purple)}}#reviews.rv-deck .rvd-count{font-family:var(--font-h);font-size:.8rem;color:var(--text3);min-width:6em;text-align:center;font-variant-numeric:tabular-nums}
#reviews.rv-deck .wsr-cta{margin:14px 0 0 auto;max-width:calc(7 / 12 * 100%);display:flex;justify-content:center}
@media(max-width:860px){
  #reviews.rv-deck{padding:56px 0}
  #reviews.rv-deck .rvd{grid-template-columns:minmax(0,1fr);gap:28px}
  #reviews.rv-deck .rvd-numrow{display:inline-flex;align-items:center;gap:14px}
  #reviews.rv-deck .rvd-sticker{position:static;transform:rotate(-5deg)}
  #reviews.rv-deck .rvd-stars{margin-top:6px}
  #reviews.rv-deck .rc{padding:26px 22px 22px}
  #reviews.rv-deck .rc[data-pos="1"]{transform:translate(7px,6px) rotate(3deg)}
  #reviews.rv-deck .rc[data-pos="2"]{transform:translate(-6px,8px) rotate(-4deg)}
  #reviews.rv-deck .wsr-cta{max-width:none;margin-left:0}
}
@media(prefers-reduced-motion:reduce){#reviews.rv-deck .rc{transition:none}}

/* site2-69: «Почему выбирают нас» — мозаика (только light-preview). .features-g/.fc не трогаем. */
.why-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:210px;gap:14px;
  grid-template-areas:"a a b c" "a a d d" "e f f g" "i i j h"}
/* site2-73 п.5: d = «Личный кабинет» 2×1 под «От нуля» и «12 педагогов»; без МК «метро» 2×1 */
.why-g:has(.why-j:not(.is-on)){grid-template-areas:"a a b c" "a a d d" "e f f g" "i i h h"}
.why-j:not(.is-on){display:none}
.why-a{grid-area:a}.why-b{grid-area:b}.why-c{grid-area:c}.why-d{grid-area:d}.why-e{grid-area:e}
.why-f{grid-area:f}.why-g7{grid-area:g}.why-h{grid-area:h}.why-i{grid-area:i}.why-j{grid-area:j}
.why-t{position:relative;overflow:hidden;border-radius:var(--r);background:var(--card);border:1px solid var(--border);
  padding:22px;display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.why-t h3{font-family:var(--font-h);font-weight:700;font-size:1.05rem;line-height:1.2;margin:0 0 6px}
.why-t p{font-size:.86rem;line-height:1.5;color:var(--text2);margin:0}
.why-t--photo{padding:0;border:0}
.why-t--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
@media (hover:hover) and (pointer:fine){.why-t--photo:hover img{transform:scale(1.06)}}/* site2-75 п.1: текст фото-плитки прижат к низу, высота по содержимому; затемнение — у самого текста
   и растёт вместе с ним (а не фиксированные 55 % плитки). Заголовок ≤ 2 строк, подпись переносится. */
.why-t--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,6,12,.3) 0%,rgba(8,6,12,0) 45%)}
.why-txt{position:relative;z-index:1;padding:56px 22px 22px;width:100%;box-sizing:border-box;
  background:linear-gradient(to top,rgba(8,6,12,.86) 0%,rgba(8,6,12,.66) 60%,rgba(8,6,12,0) 100%)}
.why-t--photo:not(.why-a) h3{font-size:clamp(1rem,1.5vw,1.25rem)}
.why-txt p{overflow:visible;white-space:normal}
.why-link i{font-style:normal}
.why-t--photo h3{overflow-wrap:normal;word-break:normal}
.why-t--photo.why-e h3{font-size:clamp(.85rem,1.05vw,.98rem)}
/* site2-75 п.1: «Личный кабинет» — текст слева, справа нарисованный телефон с тремя занятиями */
.why-t.why-lk{flex-direction:row;align-items:stretch;justify-content:space-between;gap:18px;padding-right:0}
.why-lk-tx{flex:1 1 56%;min-width:0;align-self:flex-end}
.why-lk h3{font-size:1.35rem}
.why-ph{flex:0 0 44%;max-width:260px;margin:22px 4% -46px 0;transform:rotate(6deg);transform-origin:50% 0;border-radius:22px;
  background:#1F1A28;padding:7px;box-shadow:0 14px 34px rgba(23,19,31,.22);border:1px solid rgba(255,255,255,.08);box-sizing:border-box}
.why-ph-s{position:relative;height:100%;box-sizing:border-box;background:#fff;border-radius:16px;padding:22px 9px 10px;display:flex;flex-direction:column;gap:7px;color:#17131F}
.why-ph-s::before{content:"";position:absolute;top:8px;left:50%;width:34%;height:5px;border-radius:3px;background:#1F1A28;transform:translateX(-50%)}
.why-ph-h{font-family:var(--font-h);font-weight:700;font-size:.72rem;margin:0 2px 1px}
.why-ph-r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px;align-items:center;background:#F4F1EC;border-radius:10px;padding:7px 8px;font-size:.66rem;line-height:1.1}
.why-ph-r b{font-family:var(--font-h);font-weight:700;white-space:nowrap}
.why-ph-r em{font-style:normal;color:#6B6577;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.why-ph-r i{font-style:normal;font-weight:600;background:#E4E0EA;color:#524C5E;border-radius:999px;padding:3px 7px;font-size:.6rem;white-space:nowrap}
html.theme-light .why-lk{background:#fff;box-shadow:0 6px 24px rgba(23,19,31,.06)}
.why-t--photo h3,.why-t--photo p{color:#fff}
.why-t--photo p{opacity:.85}
.why-a h3{font-size:clamp(1.4rem,2.4vw,2rem)}
.why-a img{object-position:center 35%}
.why-g7 img{object-position:center 70%}
.why-t--num{justify-content:space-between}
.why-n{font-family:var(--font-h);font-weight:900;font-size:clamp(3rem,5vw,4.6rem);line-height:.9;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.why-t--accent{background:var(--grad);border:0;color:#fff}
.why-t--accent h3{font-size:1.35rem;color:#fff}
.why-t--accent p{color:rgba(255,255,255,.88)}
.why-stk{position:absolute;top:14px;right:12px;transform:rotate(-6deg);background:var(--sun);color:#17131F;
  font-family:var(--font-h);font-weight:700;font-size:.72rem;padding:7px 10px;border-radius:12px;box-shadow:var(--sh)}
.why-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.why-chips button{font:inherit;font-family:var(--font-h);font-weight:700;font-size:.8rem;padding:9px 14px;border-radius:999px;
  border:1px solid var(--border2);background:transparent;color:var(--text);cursor:pointer;transition:background var(--tr),color var(--tr)}
@media (hover:hover) and (pointer:fine){.why-chips button:hover{background:var(--grad);color:#fff;border-color:transparent}}.why-link{margin-top:10px;font-family:var(--font-h);font-weight:700;font-size:.85rem;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;align-self:flex-start}
.why-t--dark{background:var(--night,#0C0A10);border-color:rgba(255,255,255,.08)}
.why-t--dark h3{color:#fff;font-size:1.2rem}
.why-t--dark ul{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.why-t--dark li{color:rgba(255,255,255,.82);font-size:.86rem;padding-left:22px;position:relative}
.why-t--dark li::before{content:"✓";position:absolute;left:0;color:var(--sun);font-weight:700}
html.theme-light .why-t--text,html.theme-light .why-t--num{background:#fff;box-shadow:0 6px 24px rgba(23,19,31,.06)}
.why-g.why-in .why-t{animation:whyUp .6s ease both;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes whyUp{from{transform:translateY(14px)}to{transform:none}}
@media (prefers-reduced-motion: reduce){.why-g.why-in .why-t{animation:none}.why-t--photo img{transition:none}}
@media (max-width:1100px){
  .why-g{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"a a b" "a a c" "d d e" "f f g" "i i j" "h h h"}
  .why-g:has(.why-j:not(.is-on)){grid-template-areas:"a a b" "a a c" "d d e" "f f g" "i i h"}
}
@media (max-width:767px){
  .why-g{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:150px;gap:10px;
    grid-template-areas:"a a" "a a" "b c" "d d" "f f" "e e" "g h" "j j" "i i"}
  .why-g:has(.why-j:not(.is-on)){grid-template-areas:"a a" "a a" "b c" "d d" "f f" "e e" "g h" "i i"}
  .why-t{padding:14px}
  .why-t.why-t--photo{padding:0}
  .why-txt{padding:14px}
  .why-txt{padding:40px 12px 12px}
  .why-g7 p{display:none}
  .why-t.why-e p{font-size:.74rem;line-height:1.4}
  .why-t.why-e h3,.why-t.why-g7 h3{font-size:.8rem;hyphens:none}
  .why-t.why-t--accent{padding-top:42px;justify-content:flex-start}
  .why-t.why-t--accent h3{font-size:.9rem}
  .why-t.why-t--accent p{font-size:.74rem}
  .why-t h3{font-size:.92rem}
  .why-t p{font-size:.78rem}
  .why-c p{font-size:.74rem}
  .why-t--accent h3{font-size:1rem}
  .why-stk{font-size:.56rem;padding:4px 7px;top:8px;right:6px;white-space:nowrap}
  .why-t--dark ul{grid-template-columns:1fr 1fr;gap:4px 12px}
  .why-t--dark li{font-size:.76rem}
  .why-n{font-size:clamp(2.4rem,11vw,3rem)}
  /* site2-75 п.1: ряды без фото — высотой по содержимому (нет полупустых плиток); «Как добраться» в одну строку */
  .why-g{grid-template-rows:150px 150px auto minmax(150px,auto) auto 150px minmax(110px,auto) auto auto;grid-auto-rows:auto}
  .why-link{white-space:nowrap;font-size:.8rem}
  .why-t.why-e h3{font-size:.95rem}
  .why-t.why-lk{gap:10px}
  .why-lk h3{font-size:.98rem}
  .why-ph{flex-basis:42%;margin:14px 2% -40px 0;border-radius:18px;padding:5px}
  .why-ph-s{border-radius:13px;padding:17px 6px 8px;gap:5px}
  .why-ph-s::before{top:6px;height:4px}
  .why-ph-h{font-size:.62rem}
  .why-ph-r{grid-template-columns:minmax(0,1fr) auto;padding:5px 6px;font-size:.58rem;gap:2px 4px}
  .why-ph-r b{grid-column:1 / -1}
  .why-ph-r em{grid-row:2;grid-column:1}
  .why-ph-r i{grid-row:2;grid-column:2}
  .why-ph-r i{padding:2px 5px;font-size:.52rem}
}

/* site2-70: «Пробный — это уже урок», сет-лист (только light-preview). */
/* site2-73 п.2: карточка с роликом — в левой колонке под кнопкой; лист — только текст, ничего поверх.
   Телефон: заголовок → факты → лист → карточка → кнопка. */
#trial{scroll-margin-top:104px}
.trial-w{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:56px;align-items:start;
  grid-template-areas:"h list" "facts list" "btn list" "fig list";grid-template-rows:auto auto auto 1fr}
.trial-h{grid-area:h}.trial-facts{grid-area:facts}.trial-btn{grid-area:btn;justify-self:start}
.trial-fig{grid-area:fig;justify-self:start;margin:38px 0 0 6px;width:300px;max-width:100%}
.trial-r{grid-area:list;align-self:center}
.trial-h .ss{margin:12px 0 18px}
.trial-cap{margin-top:12px;font-family:var(--font-h);font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--text2);text-align:center}
.trial-facts{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-wrap:wrap;gap:8px 18px}
.trial-facts li{font-family:var(--font-h);font-weight:700;font-size:.9rem;color:var(--text)}
.trial-facts li::before{content:"✓";margin-right:7px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.trial-r{position:relative;padding:0}
.setlist{position:relative;background:#FFFDF6;color:#17131F;border-radius:6px;padding:40px 34px 30px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);transform:rotate(-2deg)}
html:not(.theme-light) .setlist{background:#F3EEDF}
.sl-tape{position:absolute;top:-12px;width:92px;height:26px;background:rgba(255,236,160,.72);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.sl-tape--l{left:26px;transform:rotate(-8deg)}
.sl-tape--r{right:26px;transform:rotate(7deg)}
.sl-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.sl-tr{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:start;font-size:1rem;line-height:1.5;padding-left:10px;border-left:3px solid transparent}
.sl-tr b{font-family:var(--font-h);font-weight:700}
.sl-n{font-family:var(--font-h);font-weight:900;font-size:2.4rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.sl-tr--on{border-image:var(--grad) 1}
.sl-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.sl-tabs button{font:inherit;font-family:var(--font-h);font-weight:700;font-size:.78rem;padding:7px 12px;border-radius:16px 16px 16px 5px;
  border:1px solid rgba(23,19,31,.18);background:#fff;color:#17131F;cursor:pointer;transition:background var(--tr),color var(--tr)}
.sl-tabs button[aria-selected="true"]{background:var(--grad);color:#fff;border-color:transparent}
.sl-res{display:block}
.trial-card{position:relative;display:block;width:100%;padding:0;border:6px solid #fff;background:#fff;cursor:pointer;
  transform:rotate(-3deg);border-radius:16px;overflow:hidden;box-shadow:var(--sh)}
.trial-card .dc-img{position:relative;aspect-ratio:3/2}
.trial-card .dc-img img,.trial-card .dc-img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.trial.tr-in .sl-tr{animation:trUp .5s ease both;animation-delay:calc(var(--i,0) * 120ms)}
@keyframes trUp{from{transform:translateY(10px)}to{transform:none}}
@media (prefers-reduced-motion: reduce){.trial.tr-in .sl-tr{animation:none}}
@media (max-width:860px){
  .trial-w{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "facts" "list" "fig" "btn";grid-template-rows:none}
  .trial-r{align-self:auto;margin-bottom:28px}
  .trial-fig{justify-self:center;width:70%;margin:0 0 22px}
  .trial-card{transform:none}
  .trial-btn{justify-self:stretch;text-align:center}
  .setlist{transform:none;padding:34px 18px 24px}
  .sl-tr{grid-template-columns:40px 1fr;font-size:.95rem}
  .sl-n{font-size:1.9rem}
}

/* site2-71: билеты ближайших МК поверх видео (рисует js/ws-events.js; без has-tickets — прежний блок). */
.mc-tickets:empty{display:none}
.mc-sec.has-tickets .mc-tags:not(.is-all) .mc-tag:nth-child(n+7){display:none}
.mc-sec.has-tickets .mc-tags-more{display:flex;width:max-content;align-items:center;min-height:44px;margin:10px auto 0;padding:0 16px;background:none;border:0;cursor:pointer;font-family:var(--font-h);font-size:.72rem;font-weight:700;color:var(--neon)}
.mct-list{display:flex;flex-direction:column;gap:12px}
.mct{position:relative;display:grid;grid-template-columns:86px 1fr;min-height:104px;border-radius:16px;cursor:pointer;text-align:left;
  color:#F5F3FA;background:rgba(18,15,26,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);transition:transform var(--tr),border-color var(--tr)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.mct{background:rgba(18,15,26,.94)}}
.mct:focus-visible{transform:translateX(4px);border-color:var(--purple);outline:none}@media (hover:hover) and (pointer:fine){.mct:hover{transform:translateX(4px);border-color:var(--purple);outline:none}}.mct-date{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px 6px;
  border-right:2px dashed rgba(255,255,255,.22);position:relative}
.mct-date::before,.mct-date::after{content:"";position:absolute;right:-9px;width:16px;height:16px;border-radius:50%;background:#0C0A10}
.mct-date::before{top:-9px}.mct-date::after{bottom:-9px}
.mct-date b{font-family:var(--font-h);font-weight:900;font-size:2rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mct-date span{font-family:var(--font-h);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.mct-date i{font-style:normal;font-size:.72rem;line-height:1.2;color:rgba(255,255,255,.7)}
.mct-body{position:relative;padding:14px 16px;border-radius:0 16px 16px 0;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:6px}
.mct-body[style]::before{content:"";position:absolute;inset:0;background:var(--mct-cover) center/cover no-repeat;opacity:.35;z-index:0}
.mct-body[style]::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,15,26,.92),rgba(18,15,26,.55));z-index:0}
.mct-body>*{position:relative;z-index:1}
.mct h3{font-family:var(--font-h);font-weight:700;font-size:1rem;line-height:1.25;margin:0;color:#fff}
.mct-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.82rem;color:rgba(245,243,250,.78);margin:0}
.mct-meta img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.mct-few{align-self:flex-start;background:var(--sun);color:#17131F;font-family:var(--font-h);font-weight:700;font-size:.7rem;padding:4px 9px;border-radius:9px;transform:rotate(-3deg)}
.mct-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;font-size:.88rem;color:rgba(245,243,250,.82)}
.mc-sec.has-tickets .mct{animation:mctIn .5s ease both;animation-delay:calc(var(--i,0) * 80ms)}
@keyframes mctIn{from{transform:translateY(10px)}to{transform:none}}
@media (prefers-reduced-motion: reduce){.mc-sec.has-tickets .mct{animation:none}}
@media (min-width:1100px){
  .mc-sec.has-tickets .mc-inner{max-width:1200px;text-align:left}
  .mc-sec.has-tickets .mc-text{display:grid;grid-template-columns:minmax(0,1fr) 440px;column-gap:56px;align-items:start}
  .mc-sec.has-tickets .mc-text>*{grid-column:1}
  /* site2-73 п.6в: слева сл/заголовок/абзац/темы/строка с кнопкой (5 рядов, последний 1fr — кнопка прижата
     к низу); справа билеты на всю высоту. Низ кнопки = низ последнего видимого билета (отступ = padding бокса). */
  .mc-sec.has-tickets .mc-text{grid-template-rows:auto auto auto auto 1fr}
  .mc-sec.has-tickets .mc-text>.mc-tickets{grid-column:2;grid-row:1 / 6;align-self:stretch;display:flex;flex-direction:column;position:relative;padding:18px;border-radius:22px;background:rgba(8,6,12,.45)}
  .mc-sec.has-tickets .mc-text p{margin-left:0}
  .mc-sec.has-tickets .mc-tags{justify-content:flex-start}
  .mc-sec.has-tickets .mc-tags:not(.is-all) .mc-tag:nth-child(n+7){display:inline-flex}
  .mc-sec.has-tickets .mc-tags-more{display:none}
  .mc-sec.has-tickets .mc-text>.mct-foot{align-self:end;margin:24px 0 18px;justify-content:flex-start;gap:12px 20px}
  .mc-sec.has-tickets .mct-list{flex:1 1 auto;min-height:calc(4 * 104px + 3 * 12px);max-height:none;height:0;overflow-y:auto;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent);mask-image:linear-gradient(to bottom,#000 88%,transparent)}
  .mc-sec.has-tickets .mct-list::-webkit-scrollbar{display:none}
}
@media (max-width:1099px){
  .mc-sec.has-tickets .mc-tickets{margin:0 -20px 24px;padding:0 20px}
  .mc-sec.has-tickets .mct-list{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 0;scrollbar-width:none}
  .mc-sec.has-tickets .mct-list::-webkit-scrollbar{display:none}
  .mc-sec.has-tickets .mct{flex:0 0 82vw;max-width:340px;scroll-snap-align:start}
  .mct-foot{justify-content:center;text-align:center}
}
/* site2-72: длинный отзыв — «читать полностью» */
#reviews.rv-deck .rc-more{display:inline;background:none;border:0;padding:0;font:inherit;font-size:.8em;font-family:var(--font-h);font-weight:700;color:var(--purple-text);cursor:pointer}

/* site2-73 п.10: подсказка «листайте» у горизонтальных лент (js/ws-hscroll.js, только ≤ 768 px) */
.hs-bar{display:none}
@media(max-width:768px){
  .hscroll.hs-on.hs-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 40px),transparent)}
  .hscroll.hs-on.hs-l{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px);mask-image:linear-gradient(to right,transparent,#000 40px)}
  .hscroll.hs-on.hs-l.hs-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
  .hscroll.hs-on+.hs-bar{display:block;position:relative;width:56px;height:3px;margin:10px auto 0;border-radius:3px;overflow:hidden;
    background:color-mix(in srgb,currentColor 18%,transparent)}
  .hs-bar i{position:absolute;left:0;top:0;height:100%;width:16px;border-radius:3px;background:var(--purple)}
}
/* site2-73 п.5: мозаика на 320–360 px — без обрезанных слов и наклейки за краем */
@media(max-width:360px){.why-link{font-size:.72rem}.why-link i{display:none}.why-t.why-g7 h3{font-size:.7rem}.why-t .why-stk{font-size:.48rem;letter-spacing:0;right:4px;transform:rotate(-4deg)}}
/* site2-74: «Индивидуальные занятия для детей» на телефоне рвало слово пополам — кегль по ширине экрана */
@media(max-width:420px){#prices .st{font-size:clamp(1.3rem,7vw,1.7rem)}}
/* site2-75 п.2: наклейка «Хорошее место» на телефоне — у правого края «5.0», внутри экрана */
@media(max-width:600px){
  #reviews.rv-deck .rvd-numrow{display:inline-block;position:relative}
  #reviews.rv-deck .rvd-sticker{position:absolute;left:calc(100% - 18px);right:auto;bottom:6px;transform:rotate(-4deg);
    white-space:normal;width:max-content;max-width:min(44vw,180px);font-size:.78rem;padding:8px 11px}
}
/* site2-75 п.4: «ИГРАЙ» на телефоне закрыт карточками — скрываем */
@media(max-width:600px){#about.ab-collage .abc-word{display:none}}
/* site2-75 п.6: подписи и надстрочники — не меньше 11 px; кнопки — 40 px мышью, 44 px пальцем */
.fd-who,.hero-ey,.sl,.rc-date,.tc-count,.dc-tap,#about.ab-collage .abc-tag,#reviews.rv-deck .rc-date{font-size:11px}
.btn,.tc-book{min-height:40px}
@media (pointer:coarse){.btn,.tc-book,.why-chips button{min-height:44px}}
/* site2-75 п.6: текст согласия в формах — читаемый (был #9B96B0, контраст 2.7); ссылка подчёркнута */
#privacy-label-text{color:#B3AEC4}
#privacy-label-text a{text-decoration:underline}
/* site2-75 п.8: запись, шаг 1 — без стрелок; на картинке плашка «Выбрать», как «Записаться» в направлениях */
#zapis .dc-body .arr{display:none}
#zapis .dc-body{justify-content:flex-start}
#zapis .dc-img{position:relative}
#zapis .dc-img::after{content:"Выбрать";position:absolute;right:10px;bottom:10px;z-index:2;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-family:var(--font-h);font-weight:700;font-size:11px;
  letter-spacing:.02em;pointer-events:none;transition:opacity .25s ease}
@media (hover:hover) and (pointer:fine){#zapis .dc-img::after{opacity:0}#zapis .dc:hover .dc-img::after,#zapis .dc:focus-within .dc-img::after{opacity:1}}
/* site2-75 п.5: единый ритм секций (страницы с body.rhythm): светлые 112 / 88 / 64, тёмные «сценические» +16.
   Две соседние секции одного фона — у второй верхний отступ вдвое меньше (нет «двойного» шага). */
body.rhythm :is(#why,#directions,#teachers,#trial,#zapis,#gallery,#reviews,#faq,#map,#results,.kids-lesson,.kids-facts,.features){padding-block:112px}
body.rhythm :is(.concerts,.mc-sec,.cta-f){padding-block:128px}
body.rhythm :is(#teachers,#trial,#zapis,#reviews,#map,#directions)+:is(#trial,#zapis,#map,#reviews){padding-top:56px}
@media(max-width:1099px){
  body.rhythm :is(#why,#directions,#teachers,#trial,#zapis,#gallery,#reviews,#faq,#map,#results,.kids-lesson,.kids-facts,.features){padding-block:88px}
  body.rhythm :is(.concerts,.mc-sec,.cta-f){padding-block:104px}
  body.rhythm :is(#teachers,#trial,#zapis,#reviews,#map,#directions)+:is(#trial,#zapis,#map,#reviews){padding-top:44px}
}
@media(max-width:600px){
  body.rhythm :is(#why,#directions,#teachers,#trial,#zapis,#gallery,#reviews,#faq,#map,#results,.kids-lesson,.kids-facts,.features){padding-block:64px}
  body.rhythm :is(.concerts,.mc-sec,.cta-f){padding-block:80px}
  body.rhythm :is(#teachers,#trial,#zapis,#reviews,#map,#directions)+:is(#trial,#zapis,#map,#reviews){padding-top:32px}
}
/* site2-75 п.7: форма заявки — ошибки строкой у поля, экран «Заявка принята» (js/ws-form.js) */
.wsf-err{color:#E5484D;font-size:13px;line-height:1.35;margin:6px 2px 0}
#privacy-label+.wsf-err{margin-top:8px}
.modal input.wsf-bad{border-color:#E5484D!important;box-shadow:0 0 0 3px rgba(229,72,77,.15)}
.modal input[type=checkbox].wsf-bad{outline:2px solid #E5484D;outline-offset:1px}
.wsf-top{color:#E5484D;font-size:13px;line-height:1.4;margin:0 0 12px}
.wsf-top a{color:inherit;font-weight:700;text-decoration:underline;white-space:nowrap}
.modal.is-done>:not(.wsf-ok):not(.modal-close){display:none!important}
.wsf-ok{text-align:center;padding:12px 0 4px;animation:wsfIn .3s ease both}
.wsf-check{width:72px;height:72px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:0 10px 30px rgba(139,92,246,.35)}
.wsf-ok h2{margin:0 0 10px}
.wsf-ok p{color:var(--text2);margin:0 auto 22px;max-width:30ch;line-height:1.5}
.wsf-ok .btn{min-width:160px}
@keyframes wsfIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.wsf-ok{animation:none}}

/* ── site2-76: детская пробная страница (kids-light-preview) — блоки уровня взрослой ── */
.kids-h{text-align:center;margin-bottom:44px}
.kids-h--l{text-align:left;margin-bottom:0}
.kids-h .ss{margin-left:auto;margin-right:auto}
.kids-h--l .ss{margin:12px 0 0}
/* п.1: коллаж — в рамке статичная иллюстрация, наклейка «7–15 лет» строкой */
#about.ab-collage .abc-main img{width:100%;height:100%;object-fit:cover;display:block}
#about.ab-collage--kids .abc-s1 .n{font-size:1.35rem;white-space:nowrap}
#about.ab-collage--kids .abc-s2{max-width:15em}
#about.ab-collage--kids .abc-card .dc-img img{object-position:center 30%}
/* п.2: мозаика — плитка-акцент без наклейки, текст сверху вниз как у остальных */
.why--kids .why-t--accent{justify-content:flex-end}
.why--kids .why-a img{object-position:center 30%}
.why--kids .why-e img{object-position:center 60%}
@media(max-width:767px){.why--kids .why-t.why-t--accent{padding-top:14px;justify-content:flex-end}}
/* п.3: «Что умеет ребёнок» — шкала времени */
.ktl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;position:relative;counter-reset:none}
.ktl::before{content:"";position:absolute;left:0;right:0;top:calc(4.2rem + 7px);height:4px;border-radius:2px;background:var(--grad);opacity:.85}
.ktl-i{position:relative;min-width:0}
.ktl-n{display:block;height:4.2rem;font-family:var(--font-h);font-weight:900;font-size:3.6rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ktl-dot{display:block;width:18px;height:18px;border-radius:50%;background:var(--bg);border:4px solid var(--purple);box-sizing:border-box;margin:0 0 22px;position:relative;z-index:1}
html.theme-light .ktl-dot{background:#fff}
.ktl-i h3{font-family:var(--font-h);font-weight:700;font-size:1.05rem;margin:0 0 8px}
.ktl-i p{color:var(--text2);font-size:.92rem;line-height:1.55;margin:0}
.ktl-i--hi .ktl-n{font-size:4.2rem}
.ktl-i--hi .ktl-dot{width:28px;height:28px;margin:-5px 0 17px -5px;border:0;background:var(--grad);box-shadow:0 0 0 6px color-mix(in srgb,var(--purple) 22%,transparent)}
.ktl-stk{position:absolute;left:5.6rem;top:.6rem;transform:rotate(-6deg);background:var(--sun);color:#17131F;font-family:var(--font-h);font-weight:700;font-size:.72rem;padding:6px 10px;border-radius:10px;box-shadow:var(--sh);white-space:nowrap}
@media(max-width:860px) and (min-width:601px){.ktl{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 32px}.ktl::before{display:none}}
@media(max-width:600px){
  .ktl{grid-template-columns:minmax(0,1fr);gap:28px;padding-left:40px}
  .ktl::before{left:13px;right:auto;top:8px;bottom:8px;width:4px;height:auto;background:linear-gradient(180deg,#8B5CF6,#EC4899)}
  .ktl-n{height:auto;font-size:2.4rem;margin-bottom:6px}
  .ktl-i--hi .ktl-n{font-size:2.9rem}
  .ktl-dot{position:absolute;left:-34px;top:12px;margin:0}
  .ktl-i--hi .ktl-dot{left:-39px;top:10px;margin:0}
  .ktl-stk{left:4.2rem;top:.4rem}
}
/* п.4: «Как проходит урок» — сет-лист (атомы .setlist/.sl-* из #trial) */
.kl-w{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.kl-l{display:flex;flex-direction:column;gap:34px;min-width:0}
.kl-fig{margin:0;width:260px;max-width:70%}
.kl-card{border:6px solid #fff;background:#fff;border-radius:16px;overflow:hidden;transform:rotate(-3deg);box-shadow:var(--sh);aspect-ratio:4/5}
.kl-card img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.kl-r{min-width:0}
@media(max-width:860px){
  .kl-w{grid-template-columns:minmax(0,1fr);gap:32px}
  .kl-l{display:contents}
  .kids-h--l{order:0}.kl-r{order:1}
  .kl-fig{order:2;justify-self:center;margin:0 auto}
}
/* п.5: «Всё, что важно знать» — список в две колонки, без карточек */
.kf{list-style:none;margin:0 auto;padding:0;max-width:1000px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px}
.kf-i{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;align-items:start;padding:26px 0;border-top:1px solid var(--border2)}
.kf-i:nth-child(-n+2){border-top:0}
.kf-ic{color:var(--purple-text);display:flex;padding-top:2px}
.kf-i h3{font-family:var(--font-h);font-weight:700;font-size:1.02rem;margin:0 0 6px}
.kf-i p{color:var(--text2);font-size:.92rem;line-height:1.55;margin:0}
@media(max-width:600px){.kf{grid-template-columns:minmax(0,1fr)}.kf-i:nth-child(2){border-top:1px solid var(--border2)}.kf-i{grid-template-columns:44px minmax(0,1fr);gap:14px;padding:20px 0}}
/* п.7: кнопка «Хочу на мастер-класс» под облаком тем (без билетов) */
.mct-foot--kids{display:flex;justify-content:center;margin-top:22px}
html.theme-light .ktl-i--hi .ktl-dot{background:var(--grad)}

/* ── site2-77: обещания с результатом и факты доверия (только light-preview) ── */
/* п.1: заголовок-обещание первого экрана длиннее прежнего — кегль меньше (≤ 3 строк на 1440, ≤ 5 на 375) */
.hero h1.hero-h--promise{font-size:clamp(1.75rem,3.9vw,3.2rem);max-width:none}
/* п.2: строка-обещание в карточке направления; описание — одной строкой */
/* site2-79 п.2: обещание компактнее — не больше 2 строк, не перебивает название */
/* Шрифт текста, а не заголовков: Unbounded широкий — в карточке 226 px обещание занимало 3 строки при любом кегле ≥ .82rem */
.dc-promise{font-family:var(--font-b);font-weight:700;font-size:.88rem;line-height:1.35;color:var(--hot);margin:0 0 6px}
html.theme-light .dc-promise{color:var(--purple-text)}
#directions .dc-body .dd{margin-bottom:0}
#directions .dc{display:flex;flex-direction:column}
#directions .dc-body{flex:1 1 auto}
/* п.3: пробный урок — плитки фактов 2×2 */
.trial-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 26px}
.trial-tiles li{min-width:0;container-type:inline-size;display:flex;flex-direction:column;gap:4px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;font-family:var(--font-b);font-weight:400}
.trial-tiles li::before{content:none}
.trial-tiles b{font-family:var(--font-h);font-weight:800;font-size:clamp(1.3rem,2.1vw,1.8rem);line-height:1.08;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:block}
/* «0 обязательств» — самое длинное слово; ужимается по ширине плитки, остальные — полным кеглем */
.trial-tiles li:last-child b{font-size:min(clamp(1.3rem,2.1vw,1.8rem),9.4cqi)}
.trial-tiles span{font-size:.84rem;line-height:1.4;color:var(--text2)}
html.theme-light .trial-tiles li{background:#fff;box-shadow:0 6px 24px rgba(23,19,31,.05)}
/* п.4: бейдж Яндекс Карт вместо подписи и ссылки «Читать все отзывы» */
#reviews.rv-deck .rvd-ya{display:inline-flex;align-items:center;gap:12px;margin:14px 0 0;padding:10px 18px 10px 10px;border-radius:999px;background:var(--card);border:1px solid var(--border2);color:var(--text);text-decoration:none;transition:border-color var(--tr),transform var(--tr)}
@media (hover:hover) and (pointer:fine){#reviews.rv-deck .rvd-ya:hover{border-color:#FC3F1D;transform:translateY(-1px)}}html.theme-light #reviews.rv-deck .rvd-ya{background:#fff;box-shadow:0 6px 24px rgba(23,19,31,.06)}
.rvd-ya-ic{flex:none}
.rvd-ya-t{display:flex;flex-direction:column;gap:2px}
.rvd-ya-t b{font-family:var(--font-h);font-weight:700;font-size:1rem}
.rvd-ya-t small{font-size:12px;color:var(--text2)}
#reviews.rv-deck .rvd-note{margin:12px 0 0;text-align:center;font-size:12px;color:var(--text2)}
/* п.5: рассрочка — полоса с градиентной обводкой перед «Вопросами» */
.inst-band{padding:0 0 88px}
.inst-box{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;padding:32px 40px;border-radius:24px;
  border:2px solid transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--grad) border-box}
html.theme-light .inst-box{background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box}
.inst-t h2{font-family:var(--font-h);font-weight:800;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.15;margin:0 0 8px}
.inst-t p{margin:0;color:var(--text2);max-width:52ch}
.inst-btn{flex:none}
@media(max-width:1099px){.inst-band{padding-bottom:64px}}
@media(max-width:600px){
  .inst-band{padding-bottom:48px}
  .inst-box{flex-direction:column;align-items:stretch;padding:24px 20px}
  .inst-btn{width:100%}
  .trial-tiles li{padding:14px}
  .trial-tiles b{font-size:1.3rem}
  .trial-tiles li:last-child b{font-size:min(1.3rem,9.4cqi)}
  .trial-tiles span{font-size:.78rem}
}
@media(max-width:1279px){.dc-promise{font-size:.82rem}}
.inst-t h2 .gr{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ── site2-78: «Абонемент без сюрпризов» — правила списком + полоса рассрочки (только light-preview) ── */
.rules{padding:112px 0}
.rules-h{text-align:center;margin-bottom:44px}
.rules-w{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.rules-w .inst-box{order:-1;flex-direction:column;align-items:flex-start;justify-content:center;gap:22px;height:100%;box-sizing:border-box}
.rl{list-style:none;margin:0;padding:0}
.rl-i{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;padding:18px 0;border-top:1px solid var(--border2)}
.rl-i:first-child{border-top:0;padding-top:0}
.rl-ic{color:var(--purple-text);display:flex;padding-top:2px}
.rl-i h3{font-family:var(--font-h);font-weight:700;font-size:1rem;margin:0 0 4px}
.rl-i p{color:var(--text2);font-size:.9rem;line-height:1.5;margin:0}
@media(max-width:1099px){.rules{padding:88px 0}}
@media(max-width:860px){
  .rules-w{grid-template-columns:minmax(0,1fr);gap:32px}
  .rules-w .inst-box{order:0;height:auto}
}
@media(max-width:600px){.rules{padding:64px 0}.rules-w .inst-box{align-items:stretch}}
body.rhythm :is(#reviews+#rules,#reviews+#prices[style*="none"]+#rules){padding-top:56px}
@media(max-width:1099px){body.rhythm :is(#reviews+#rules,#reviews+#prices[style*="none"]+#rules){padding-top:44px}}
@media(max-width:600px){body.rhythm :is(#reviews+#rules,#reviews+#prices[style*="none"]+#rules){padding-top:32px}}

/* ── site2-79: аудит 2 светлых страниц ── */
#directions .dc-body .dd{font-size:.8rem;color:var(--text2)}
/* п.1: заголовок первого экрана (взрослая светлая) читается на любом кадре ролика */
body.rhythm .hero:has(.hero-h--promise) .hero-ov{background:
  linear-gradient(to right,rgba(12,10,16,.82) 0%,rgba(12,10,16,.72) 36%,rgba(12,10,16,.38) 52%,rgba(12,10,16,0) 62%),
  linear-gradient(to top,rgba(12,10,16,.6) 0%,rgba(12,10,16,0) 40%)}
@media(max-width:1099px){body.rhythm .hero:has(.hero-h--promise) .hero-ov{background:rgba(12,10,16,.55)}}
/* п.5: шапка на телефоне — логотип в одну строку, высота ≤ 60 px */
@media(max-width:600px){
  body.rhythm header,body.rhythm header.scrolled{padding:8px 0}
  body.rhythm header .container{gap:10px}
  body.rhythm .logo{white-space:nowrap;font-size:clamp(.8rem,4.2vw,.95rem)}
  body.rhythm .h-right{gap:10px}
}
@media(max-width:360px){body.rhythm .h-right .btn-g{padding:8px 12px}}
/* п.6: детский коллаж — «ИГРАЙ» по сцене (правая колонка), а не под текстом */
#about.ab-collage--kids .abc-word--d{display:none}
@media(min-width:861px){
  #about.ab-collage--kids .abc-word--m{display:block;left:0;right:0;bottom:-.06em;font-size:19cqw}
}
/* site2-79 п.2: на 769–1099 четыре карточки по ~180 px — обещание в 4–5 строк; две колонки */
@media(min-width:769px) and (max-width:1099px){body.rhythm #directions .dir-p{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── site2-80: меньше призывов (обе пробные страницы, body.rhythm) ── */
/* п.1: первый экран без абзаца — кнопки ближе к заголовку */
body.rhythm .hero h1{margin-bottom:36px}
/* п.1: «Записаться» в шапке — только после первого экрана (класс hero-on ставит скрипт страницы) */
body.rhythm header .h-right .btn-g{transition:opacity .3s ease,transform .3s ease}
body.rhythm header.hero-on .h-right .btn-g{opacity:0;transform:translateY(-6px);pointer-events:none}
/* п.2: плашка «Записаться» на карточках направлений — только мышью при наведении */
@media (hover:none),(pointer:coarse){body.rhythm #directions .dc-tap{display:none}}
/* п.2: спокойные кнопки — педагоги, рассрочка, отзыв, цены: прозрачные с тонкой рамкой */
body.rhythm .teachers-g .tc-book,body.rhythm .teachers-g .tc-ask,body.rhythm .inst-btn,
body.rhythm #reviews .wsr-cta .btn-g,body.rhythm #prices .pt-foot .btn-g{
  background:transparent;color:var(--text);border:1px solid var(--border);box-shadow:none;min-height:40px}
@media (hover:hover) and (pointer:fine){body.rhythm .teachers-g .tc-book:hover,body.rhythm .teachers-g .tc-ask:hover,body.rhythm .inst-btn:hover,
body.rhythm #reviews .wsr-cta .btn-g:hover,body.rhythm #prices .pt-foot .btn-g:hover{
  border-color:var(--purple);transform:none;box-shadow:none}}@media (pointer:coarse){body.rhythm .teachers-g .tc-book,body.rhythm .teachers-g .tc-ask{min-height:44px}}
/* п.3: пробный урок без карточки и кнопки — левая колонка по центру листа */
@media(min-width:861px){
  body.rhythm .trial-w{grid-template-areas:". list" "h list" "facts list" ". list";grid-template-rows:1fr auto auto 1fr}
  body.rhythm .trial-tiles{margin-bottom:0}
}
@media(max-width:860px){body.rhythm .trial-w{grid-template-areas:"h" "facts" "list"}}
/* site2-80 п.4: колода по высоте верхней карточки; карточки сзади — под ней той же высоты */
#reviews.rv-deck .r-grid{align-items:start}
#reviews.rv-deck .rc{padding:32px 32px 28px}
#reviews.rv-deck .rc[data-pos="0"]{position:relative}
#reviews.rv-deck .rc:not([data-pos="0"]){position:absolute;inset:0}
#reviews.rv-deck .rc-text{margin-block:0}
#reviews.rv-deck .rvd-score .rvd-nav{justify-content:flex-start;margin-top:22px}
@media(max-width:860px){
  #reviews.rv-deck .rc{padding:26px 22px 22px}
  #reviews.rv-deck .rvd{display:flex;flex-direction:column;gap:28px}
  #reviews.rv-deck .rvd-score{display:contents}
  #reviews.rv-deck .rvd-score>*{order:1}
  #reviews.rv-deck .rvd-stack{order:2}
  #reviews.rv-deck .rvd-score .rvd-nav{order:3;justify-content:center;margin-top:4px;position:relative;z-index:4}
}
#reviews.rv-deck .rvd-note{margin-top:24px}

/* ── site2-81: проверка site2-79/80 ── */
/* п.1: задние карточки колоды — только подложка (фон, рамка, тень), без текста;
   высота = верхней (absolute inset:0 из site2-80), вылезающее содержимое обрезано. */
#reviews.rv-deck .rc:not([data-pos="0"]){overflow:hidden}
#reviews.rv-deck .rc:not([data-pos="0"]) > *{visibility:hidden}
/* под стопкой — 20 px от фактического низа, включая выглядывающие края задних карточек */
#reviews.rv-deck .rvd-note{margin-top:56px}
#reviews.rv-deck .wsr-cta{margin-top:12px}
#reviews.rv-deck .rvd-stack:not(:has(.rvd-note)) .wsr-cta,#reviews.rv-deck .r-grid + .wsr-cta{margin-top:48px}
@media(max-width:860px){#reviews.rv-deck .rvd-note{margin-top:38px}}
/* п.2: наклейка «Хорошее место 2026» на телефоне — под «5.0», в потоке, внутри экрана */
@media(max-width:600px){
  #reviews.rv-deck .rvd-numrow{display:block;position:static}
  #reviews.rv-deck .rvd-sticker{position:static;display:inline-block;transform:rotate(-3deg);margin-top:8px;
    left:auto;right:auto;bottom:auto;width:auto;max-width:100%;white-space:normal}
}
/* п.3: три цифры первого экрана на телефоне — всегда в один ряд */
@media(max-width:600px){
  .hero-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .h-stat:not(:last-child)::after{right:-6px}
  .h-stat .n{font-size:clamp(1.5rem,7vw,2rem)}
  .h-stat .l{white-space:normal;line-height:1.25}
}
/* site2-81 п.1: «Оставить отзыв» — в колонке колоды, сразу под ней (раньше —
   под всей строкой, ниже левой колонки: большая пустота под стопкой).
   Стопка + кнопка центрируются по высоте левой колонки одной группой. */
@media(min-width:861px){
  #reviews.rv-deck .container{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto auto 1fr;column-gap:56px}
  #reviews.rv-deck .rvd{display:contents}
  #reviews.rv-deck .rvd-score{grid-column:1;grid-row:1 / 5;align-self:center}
  #reviews.rv-deck .rvd-stack{grid-column:2;grid-row:2}
  #reviews.rv-deck .wsr-cta{grid-column:2;grid-row:3;margin:56px 0 0;max-width:none}
  #reviews.rv-deck .rvd:has(.rvd-note) ~ .wsr-cta{margin-top:12px}
}
/* site2-82 п.0: первый экран на телефоне — содержимое прижато к низу (после
   site2-80 заголовок, кнопки и цифры стояли в верхней половине, ниже — пустое
   видео); высота экрана ограничена, цифры — последним над нижним краем. */
@media(max-width:600px){
  body.rhythm .hero{min-height:min(100svh,760px);flex-direction:column;justify-content:flex-end;align-items:stretch}
  body.rhythm .hero .container{padding-top:96px;padding-bottom:clamp(56px,9svh,72px)}
}
/* site2-83 п.4: детский первый экран — ряд цифр в одну линию (плитка «7–15 лет» без
   data-stat переносилась), кнопка в одну строку: на ≤420 — «Записать ребёнка». */
@media(max-width:600px){
  .hero-stats .h-stat .n{white-space:nowrap}
  .hero-stats:has(> .h-stat:not([data-stat])) .h-stat .n{font-size:clamp(1.15rem,5.4vw,1.6rem)}
  .hero-stats:has(> .h-stat:not([data-stat])){grid-template-columns:repeat(3,auto);justify-content:space-between;column-gap:10px}
}
@media(max-width:420px){.hb-tail{display:none}}
.btn:has(> .hb-tail){gap:0}
/* site2-83 п.8: «Записаться к педагогу» — читаемый размер (было 10,5 px). */
.tc-book{font-size:.78rem}
/* site2-83 п.8: на 375 шапка (логотип + «Записаться» + бургер) шире экрана на 27 px —
   бургер выходил за правый край. Ужимаем логотип и зазоры на узких экранах. */
@media(max-width:400px){
  body.rhythm header .container{gap:8px}
  body.rhythm .h-right{gap:8px}
  body.rhythm .h-right .btn-g{padding:8px 12px}
  body.rhythm .logo{letter-spacing:.02em}
}

/* ── bots-site-1: полоса Telegram-бота над шапкой и блок в подтверждении записи ── */
.botbar{position:fixed;top:0;left:0;width:100%;z-index:1001;height:var(--bb);background:var(--bg2);border-bottom:1px solid var(--border2);color:var(--text2);font-size:.82rem}
body.has-botbar{--bb:38px}
body.has-botbar header{top:var(--bb)}
body.has-botbar .hero .container{padding-top:calc(180px + var(--bb))}
body.has-botbar .mm{padding-top:var(--bb)}
.botbar-in{display:flex;align-items:center;justify-content:center;gap:14px;height:100%}
.botbar-t{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.botbar-btn{flex:0 0 auto;color:var(--neon);font-family:var(--font-h);font-size:.7rem;font-weight:700;letter-spacing:.03em;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.botbar-btn:hover{color:var(--text)}}.botbar-x{flex:0 0 auto;background:none;border:none;color:var(--text3);font-size:1.2rem;line-height:1;cursor:pointer;padding:4px 6px}
.botbar-short{display:none}
/* site-3: две равные кнопки — Telegram и МАКС, с иконками каналов */
.botbar--two .botbar-btn{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:1px solid var(--border2);border-radius:999px;line-height:1.2}
.botbar--two .botbar-btn .ico{display:inline-block;width:14px;height:14px;flex:0 0 14px}
@media (hover:hover) and (pointer:fine){.botbar--two .botbar-btn:hover{border-color:var(--neon)}}.botbar-xs{display:none}
@media(max-width:768px){
  .botbar--two .botbar-in{gap:6px}
  .botbar--two .botbar-btn{gap:4px;padding:2px 7px}
  .botbar--two .botbar-t{font-size:.7rem}
}
@media(max-width:340px){
  .botbar--two .botbar-short{display:none}
  .botbar--two .botbar-xs{display:inline}
}
@media(max-width:768px){
  body.has-botbar{--bb:34px}
  body.has-botbar .hero .container{padding-top:calc(120px + var(--bb))}
  .botbar{font-size:.74rem}
  .botbar-btn{font-size:.66rem}
  .botbar-x{padding:4px 2px}
  .botbar-in{gap:10px;justify-content:space-between}
  .botbar-full{display:none}
  .botbar-short{display:inline}
}
.zb-bot{margin:4px auto 16px;max-width:420px;padding:14px 16px;border:1px solid var(--border2);border-radius:var(--rs);background:var(--purple-dim)}
.zb-bot b{display:block;font-family:var(--font-h);font-size:.9rem;color:var(--text);margin-bottom:6px}
.zb-bot p{color:var(--text2);font-size:.86rem;margin-bottom:12px}
.zb-bot-act{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ── site2-85 (22.10): десктоп — шапка, первый экран, сетка педагогов, видео «Сцена» ── */
/* п.1: иконки ботов из шапки убраны (они в верхней полосе botbar); мобильное меню и футер — со своими ссылками */
.h-soc{display:none!important}
@media(min-width:1100px){
  /* п.2: шапка крупнее */
  header nav{gap:30px}
  header nav a{font-size:16px;font-weight:500}
  header .h-phone{font-size:17px;font-weight:600}
  /* п.3: «Записаться» выезжает справа после первого экрана; на первом экране её нет (нулевая ширина) — справа «Детям» */
  body.rhythm header .h-right{gap:0}
  body.rhythm header .h-right .h-phone{margin-right:20px}
  body.rhythm header .h-right .btn-g{max-width:180px;margin-left:12px;opacity:1;overflow:hidden;white-space:nowrap;transform:none;
    transition:max-width .35s ease-out,opacity .35s ease-out,margin-left .35s ease-out,padding .35s ease-out}
  body.rhythm header.hero-on .h-right .btn-g{max-width:0;margin-left:0;padding-left:0;padding-right:0;opacity:0;pointer-events:none;transform:none}
}
@media(min-width:1100px) and (max-width:1279px){header nav{gap:22px}header nav a{font-size:15px}}
@media(prefers-reduced-motion:reduce){body.rhythm header .h-right .btn-g{transition:none}}

/* п.4: заголовок первого экрана — заглавными (только обещание взрослой; детский не трогаем).
   site2-90: размер — как до site2-85 (владелец 23.10: «когда был меньше, было лучше»); одно правило + медиа */
body.rhythm .hero h1.hero-h--promise{text-transform:uppercase;font-size:clamp(32px,4.6vw,44px);line-height:1.02;letter-spacing:-.01em;
  max-width:1000px;text-wrap:balance;hyphens:none;overflow-wrap:normal}
@media(max-width:600px){body.rhythm .hero h1.hero-h--promise{font-size:clamp(26px,7vw,32px)}}
@media(min-width:1100px){body.rhythm .hero h1.hero-h--promise{font-size:clamp(36px,3.6vw,52px);max-width:20ch}}

/* п.5: цифры первого экрана — крупно, градиентом, ровной ширины; подписи заглавными */
body.rhythm .hero-stats{gap:44px}
body.rhythm .h-stat .n{font-size:clamp(44px,4.2vw,62px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;filter:drop-shadow(0 2px 14px rgba(0,0,0,.45));display:inline-block}
body.rhythm .h-stat .l{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.6);
  margin-top:10px;text-shadow:0 1px 8px rgba(0,0,0,.55)}
body.rhythm .hero-stats>:is(.h-stat:not([data-stat]),.h-stat.is-on)~:is(.h-stat:not([data-stat]),.h-stat.is-on)::before{
  left:-22px;top:0;height:100%;transform:none;background:rgba(255,255,255,.15)}
@media(max-width:768px){
  body.rhythm .hero-stats{gap:28px}
  body.rhythm .h-stat .n{font-size:2.2rem}
  body.rhythm .h-stat .l{font-size:10px;letter-spacing:.1em}
  body.rhythm .hero-stats>:is(.h-stat:not([data-stat]),.h-stat.is-on)~:is(.h-stat:not([data-stat]),.h-stat.is-on)::before{left:-14px}
}

/* п.7: сетка педагогов — карточки одной ширины (min-width:0 вместо auto: длинная кнопка больше не растягивает карточку),
   5 в ряд на ≥ 1100, 3 на 768–1099, неполный последний ряд — по центру; имя/направление/кнопка по одной линии */
@media(min-width:769px){
  .teachers-g{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
  .teachers-g .tc{min-width:0;display:flex;flex-direction:column}
  .teachers-g .tc>.btn{margin-top:auto;width:100%;font-size:13px;white-space:normal;line-height:1.25;padding:10px 12px}
}
@media(min-width:1100px){.teachers-g .tc{flex:0 0 calc((100% - 64px)/5);max-width:calc((100% - 64px)/5)}}
@media(min-width:769px) and (max-width:1099px){.teachers-g .tc{flex:0 0 calc((100% - 32px)/3);max-width:calc((100% - 32px)/3)}}

/* п.8: плитка «Сцена, а не зачёт» — видео вместо фото, затемнение и подпись как у фото */
.why-t--photo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
@media(min-width:769px){.teachers-g .tc>:nth-last-child(2){margin-bottom:12px}}
.why-t--photo video{transition:transform .6s ease,opacity .45s ease}
@media (hover:hover) and (pointer:fine){.why-t--photo:hover video{transform:scale(1.06)}}.why-t--photo video.why-vid--hd{opacity:0}
.why-t--photo video.why-vid--hd.is-on{opacity:1}
@media(prefers-reduced-motion:reduce){.why-t--photo video{transition:none}}
/* site2-85 п.4: колонка первого экрана шире под заголовок заглавными (720 → вся ширина контейнера) */
@media(min-width:1100px){body.rhythm .hero-c:has(.hero-h--promise){max-width:min(1180px,100%)}
}

/* ============================================================
   site2-87 (23.10): разбор Impeccable + Emil — контраст, мелкий текст,
   отклик на нажатие, появление блоков, поверхности браузера.
   Ховеры всего файла завёрнуты в @media (hover:hover) and (pointer:fine) скриптом.
   ============================================================ */
/* 1. Контраст: «Детям / Взрослым» — белый ≥ 4,5:1 (#CF3370 = 4,8:1) */
.h-kids,.mm .nav-cross{background:#CF3370}
/* 2. Мелкий текст: функциональный ≥ 11 px, основной ≥ 13–14 px */
.btn{font-size:13px}
.btn.btn-l{font-size:14px}
.fd-more{font-size:12px}
.zb-pill{font-size:11.5px}
.why-t .why-stk{font-size:12px}
@media(max-width:768px){
  body.rhythm .h-stat .l,.h-stat .l{font-size:12px;letter-spacing:0;text-transform:none;white-space:normal;line-height:1.25}
  .why-t .why-stk{font-size:11px;padding:4px 8px;white-space:normal;max-width:96px;text-align:center;line-height:1.15}
  .why-g .why-t p{font-size:13px;line-height:1.4}
}
@media(max-width:360px){.why-t .why-stk{font-size:11px;letter-spacing:0;max-width:88px}}
/* 7. Локация вместо строки над заголовком */
.hero-loc{margin-top:18px;font-size:13px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.72)}
/* 3. Отклик на нажатие */
.btn,.wsb-slot,.zb-day,.zb-slot,.wsb-teacher,.fqc-chip,.mc-tag,.socials a,.concept-dots span,.mc-tags-more{-webkit-tap-highlight-color:transparent}
.btn:active,.wsb-slot:active,.zb-day:active,.zb-slot:active,.wsb-teacher:active,.fqc-chip:active,.mc-tag:active,.socials a:active,.mc-tags-more:active{transform:scale(.97);transition:transform 160ms ease-out}
.dc:active,.dc-m:active,.mct:active,.fd:active,.tc:active,.route-card:active{transform:scale(.985);transition:transform 160ms ease-out}
/* 6. Появление: только заголовки секций и карточки сеток; в сетках — лесенка 50 мс (до 6 ступеней) */
@keyframes ws-rv{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.reveal.visible{animation:ws-rv 450ms cubic-bezier(.23,1,.32,1) backwards}
:is(.tc,.dc,.fd,.mct,.why-t).reveal.visible:nth-child(2){animation-delay:50ms}
:is(.tc,.dc,.fd,.mct,.why-t).reveal.visible:nth-child(3){animation-delay:100ms}
:is(.tc,.dc,.fd,.mct,.why-t).reveal.visible:nth-child(4){animation-delay:150ms}
:is(.tc,.dc,.fd,.mct,.why-t).reveal.visible:nth-child(5){animation-delay:200ms}
:is(.tc,.dc,.fd,.mct,.why-t).reveal.visible:nth-child(n+6){animation-delay:250ms}
@media(prefers-reduced-motion:reduce){.reveal,.reveal.visible{opacity:1;transform:none;animation:none}}
/* 8. Поверхности браузера */
::selection{background:rgba(139,92,246,.35);color:#fff}
html.theme-light ::selection{background:rgba(109,59,239,.22);color:#17131F}
input,textarea{caret-color:var(--purple)}
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,[tabindex]:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,.dc:focus-visible,.zb-slot:focus-visible,.zb-day:focus-visible,.wsb-slot:focus-visible{outline:2px solid var(--purple-text);outline-offset:2px}
p a,li a,.ss a,.faq a,.fd-a a,.fqc-a a{text-underline-offset:3px}
/* 9. Выделенный тариф — заливкой и рамкой, не полосой слева; свечение — только у главной кнопки */
.wsf-check{box-shadow:0 10px 30px rgba(0,0,0,.28)}

/* ============================================================
   site2-88 (23.10): добор мобильного — вспышка тапа, первый экран на iPhone,
   вырез и полоска, переносы заголовков.
   ============================================================ */
/* 1. Без серой вспышки iOS: нажатие показывает :active (site2-87 п.3) */
a,button,[role="button"],label,summary,.dc,.dc-m,.mct,.fd,.tc,.zb-day,.zb-slot,.wsb-slot,.wsb-teacher,.fqc-chip,.mc-tag{-webkit-tap-highlight-color:transparent}
/* 3. Вырез и полоска (viewport-fit=cover): шапка, полоса ботов, меню, модалки, cookie */
header,.botbar{padding-left:env(safe-area-inset-left)!important;padding-right:env(safe-area-inset-right)!important}
.mm{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.mo{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#cookie-bar{padding-bottom:calc(16px + env(safe-area-inset-bottom))!important;padding-left:max(24px,env(safe-area-inset-left))!important;padding-right:max(24px,env(safe-area-inset-right))!important}
@media(max-width:768px){#cookie-bar{padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))!important}}
footer{padding-bottom:calc(36px + env(safe-area-inset-bottom))}
/* 5. Переносы: заголовки — ровными строками, абзацы — без висячих слов */
h1,h2,h3,.st{text-wrap:balance}
p,.ss,li{text-wrap:pretty}
/* site2-89 п.3: кнопки верхней полосы ботов — 13 px на компьютере (было .7rem = 11,2 px); телефон — как было */
@media(min-width:769px){.botbar-btn,.botbar--two .botbar-btn{font-size:13px}}
/* site2-89 п.3: подпись согласия под формой записи — 13 px (была .7rem = 11,2 px) */
.fp{font-size:13px}