@font-face{
    font-family:"Bebas Neue Cyrillic";
    src:url("/assets/fonts/bebas.ttf") format("truetype");
    font-weight:400; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:"Sprite Graffiti";
    src:url("/assets/fonts/graffiti.otf") format("opentype");
    font-weight:400; font-style:normal; font-display:swap;
  }
  :root{
    --blue:#2E3192; --red:#D62828; --yellow:#FFD600; --ink:#14130F; --white:#FFFFFF;
    --r:4px;
    --display:"Bebas Neue Cyrillic","Oswald","Arial Narrow",Arial,sans-serif;
    --body:Helvetica,Arial,sans-serif;
    --graffiti:"Sprite Graffiti",var(--display);
  }
  *{box-sizing:border-box; margin:0; padding:0}
  html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
  body{background:var(--white); color:var(--ink); font-family:var(--body); font-size:18px; line-height:1.55; overflow-x:clip}
  img{display:block; max-width:100%}
  a{color:inherit}
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px}

  /* якорь не должен уезжать под липкую шапку */
  section[id]{scroll-margin-top:86px}
  /* видимый фокус для клавиатуры */
  :focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:2px}
  .band-blue :focus-visible, .band-dark :focus-visible{outline-color:var(--yellow)}

  /* ---------- topbar ---------- */
  .topbar{position:sticky; top:0; z-index:40; background:var(--white); border-bottom:1px solid var(--ink)}
  .progress{position:absolute; left:0; right:0; bottom:-1px; height:3px; background:transparent}
  .progress i{display:block; height:100%; width:0; background:var(--yellow); transition:width .12s linear}
  .topbar .wrap{display:flex; align-items:center; gap:26px; padding-top:10px; padding-bottom:10px}
  .brand{display:flex; align-items:center; gap:10px; margin-right:auto; text-decoration:none}
  .brand img{height:62px; width:auto}
  .brand .sub{display:flex; flex-direction:column; gap:1px; line-height:1.2}
  .brand .sub b{font-family:var(--body); font-weight:700; font-size:13.5px; letter-spacing:.01em}
  .brand .sub i{font-family:var(--body); font-style:normal; font-weight:600; font-size:12.5px;
                letter-spacing:.03em; opacity:.7}
  .navlink{font-weight:700; font-size:14.5px; text-decoration:none; padding:6px 2px}
  .navlink:hover{background:var(--yellow)}
  /* Ссылка на соседний лендинг. Остальные пункты меню просто прокручивают
     страницу, а эта уводит на другой сайт — без отбивки читается как ещё один
     раздел, и человек её не замечает. Отделяем чертой и стрелкой «наружу».
     Стрелку рисуем уголком из рамок: символ ↗ есть не во всех шрифтах. */
  .navlink.cross{position:relative; margin-left:20px}
  .navlink.cross::before{content:""; position:absolute; left:-11px; top:50%; margin-top:-8px;
                         width:1.5px; height:16px; background:rgba(20,19,15,.22)}
  .navlink.cross::after{content:""; display:inline-block; width:5px; height:5px; margin-left:7px;
                        vertical-align:2px; border-top:2px solid currentColor;
                        border-right:2px solid currentColor; transform:rotate(-45deg);
                        opacity:.55; transition:opacity .15s}
  .navlink.cross:hover::after{opacity:1}
  /* переключатель языка */
  .lang{display:flex; align-items:center; gap:2px; flex:0 0 auto; border:1.5px solid var(--ink); border-radius:var(--r); overflow:hidden}
  .lang a{font-family:var(--display); font-size:15px; letter-spacing:.06em; text-decoration:none;
          padding:7px 10px 5px; line-height:1; transition:background .15s, color .15s}
  .lang a:hover{background:var(--yellow)}
  .lang a.on{background:var(--ink); color:var(--white)}
  .lang a.on:hover{background:var(--ink)}

  .btn{display:inline-block; font-family:var(--display); font-size:20px; letter-spacing:.05em; text-transform:uppercase;
       padding:12px 24px 10px; border-radius:var(--r); border:2px solid var(--ink);
       text-decoration:none; cursor:pointer; transition:background .15s,color .15s,border-color .15s}
  .btn-red{background:var(--red); border-color:var(--red); color:var(--white)}
  .btn-red:hover{background:var(--ink); border-color:var(--ink)}
  .btn-ghost{background:transparent; color:var(--ink)}
  .btn-ghost:hover{background:var(--ink); color:var(--white)}
  .btn-yellow{background:var(--yellow); border-color:var(--yellow); color:var(--ink)}
  .btn-yellow:hover{background:var(--white); border-color:var(--white)}
  .btn-white-ghost{background:transparent; color:var(--white); border-color:var(--white)}
  .btn-white-ghost:hover{background:var(--white); color:var(--ink)}
  .btn-sm{font-size:17px; padding:9px 18px 7px}

  /* ---------- hero ---------- */
  .hero{padding:32px 0 0}
  .hero-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:44px; align-items:start}
  /* надзаголовок = название главы: крупно, Bebas, с живой линией */
  .eyebrow{display:flex; align-items:center; gap:14px; font-family:var(--display); font-weight:400;
           font-size:clamp(19px,1.7vw,24px); letter-spacing:.07em; text-transform:uppercase; margin-bottom:14px}
  .eyebrow::before{content:""; width:14px; height:14px; background:var(--red); border-radius:2px; flex:0 0 auto}
  .eyebrow::after{content:""; flex:0 1 190px; height:2px; background:currentColor; opacity:.3;
                  transform:scaleX(0); transform-origin:left}
  .rv.in .eyebrow::after, .eyebrow.in::after{
    animation:stripe-in .8s cubic-bezier(.2,.7,.3,1) .15s forwards, stripe-breathe 7s ease-in-out 1.3s infinite}
  .band-dark .eyebrow::before, .band-blue .eyebrow::before, .poster-dark .eyebrow::before,
  .poster-blue .eyebrow::before, .poster-red .eyebrow::before{background:var(--yellow)}
  h1{font-family:var(--display); font-weight:400; font-size:clamp(44px,4.6vw,68px); line-height:.98;
     letter-spacing:.005em; text-transform:uppercase; margin:0 0 18px}
  h1 .graf{font-family:var(--graffiti); text-transform:none; color:var(--red); font-size:1.06em; line-height:1;
           display:inline-block; transform:rotate(-2.5deg); padding:.02em .04em 0}
  .lede{font-size:19.5px; line-height:1.55}
  .lede b .hl, .hl{background-image:url("/assets/img/marker.png"); background-size:100% 100%; background-repeat:no-repeat;
      -webkit-box-decoration-break:clone; box-decoration-break:clone; padding:.06em .12em; margin:0 -.1em}
  .chips{display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 0}
  .chip{font-size:13.5px; font-weight:600; border:1px solid var(--ink); border-radius:2px;
        padding:5px 11px; background:var(--white)}
  .cta-row{display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin:24px 0 0}
  .secondary{font-weight:700; font-size:15.5px; text-decoration:none; border-bottom:2.5px solid var(--yellow); padding-bottom:2px}
  .secondary:hover{background:var(--yellow)}
  .notes{margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:10px 26px}
  .note{font-size:14.5px; font-style:italic; line-height:1.5}

  .heroart{position:relative; display:flex; justify-content:flex-end}
  /* баухаус разобран на слои: чёрная сетка держит структуру, цветные блоки живут */
  .bh{position:relative; width:100%; max-width:410px; aspect-ratio:.73}
  .bh img{position:absolute; display:block; height:auto}
  .bh-black{opacity:0; transition:opacity .8s ease .1s}
  .rv.in .bh-black{opacity:1}
  /* стартовые состояния заданы в keyframes: fill-mode backwards подставит их до запуска,
     поэтому без анимации элементы просто видны — ничего не «залипает» невидимым */
  .bh-bar{transform-origin:top center}
  .bh-bar.up{transform-origin:bottom center}
  /* один общий цикл 6с: волна пробегает по брускам и повторяется бесконечно */
  .rv.in .bh-bar{animation:bh-grow .9s cubic-bezier(.2,.7,.3,1) var(--gd,0s) backwards,
                           bh-wave 6s ease-in-out var(--dl,1.2s) infinite}
  .rv.in .bh-sq{animation:bh-pop .7s cubic-bezier(.2,1.3,.4,1) var(--gd,0s) backwards,
                          bh-tilt 6s ease-in-out var(--dl,1.2s) infinite}
  @keyframes bh-grow{from{transform:scaleY(0)} to{transform:scaleY(1)}}
  @keyframes bh-wave{0%,100%{transform:scaleY(1)} 45%{transform:scaleY(.72)}}
  @keyframes bh-pop{from{transform:scale(.55) rotate(-9deg); opacity:0} to{transform:scale(1) rotate(0deg); opacity:1}}
  @keyframes bh-tilt{0%,100%{transform:rotate(0deg) scale(1)} 45%{transform:rotate(7deg) scale(1.07)}}

  /* ---------- quest path ---------- */
  .quest{margin-top:20px; padding-bottom:24px}
  .quest .row{display:flex; align-items:flex-end; gap:26px}
  .qfig{flex:0 0 auto; text-align:center}
  .qfig.start{margin-bottom:30px}
  .qfig.end{margin-bottom:55px}
  .qfig .who{font-size:13px; font-style:italic; margin-top:6px}
  .qfig img.knight{height:98px; width:auto; margin:0 auto}
  .qfig img.dragon{height:114px; width:auto; margin:0 auto; transform:scaleX(-1)}
  .track{flex:1 1 auto; position:relative}
  .track .line{position:absolute; left:-8px; right:-8px; top:17px; height:3px; background:var(--ink)}
  .marks{position:relative; display:flex; justify-content:space-between; align-items:flex-start; padding:0 2%}
  .lvlw{display:flex; flex-direction:column; align-items:center; gap:9px; width:150px; min-width:0}
  .lvl{width:37px; height:37px; border:2.5px solid var(--ink); border-radius:var(--r); background:var(--white);
       font-family:var(--display); font-size:21px; display:flex; align-items:center; justify-content:center;
       padding-top:3px}
  .lvl.on{background:var(--yellow)}
  .lvlname{font-size:12px; line-height:1.3; font-weight:600; text-align:center; min-height:32px}

  /* ---------- экран 2: видео ---------- */
  .s2{border-top:1px solid var(--ink); margin-top:10px; padding:56px 0 48px}
  .s2-head{display:grid; grid-template-columns:1.35fr 1fr; gap:40px; align-items:end; margin-bottom:30px}
  h2{font-family:var(--display); font-weight:400; font-size:clamp(32px,3.4vw,50px); line-height:1.02;
     letter-spacing:.005em; text-transform:uppercase; margin:0}
  .s2sub{font-size:18.5px; line-height:1.55}
  .vframe{position:relative; aspect-ratio:16/9; background:var(--ink); border-radius:var(--r); overflow:hidden}
  .vframe .scene{position:absolute; inset:0; width:100%; height:100%}
  .play{border-radius:50%; background:var(--yellow); border:none; cursor:pointer;
        display:flex; align-items:center; justify-content:center; transition:transform .18s}
  .vframe .play{position:absolute; left:50%; top:57%; width:88px; height:88px; transform:translate(-50%,-50%)}
  .vframe .play:hover{transform:translate(-50%,-50%) scale(1.07)}
  .play svg{display:block; margin-left:5px}
  .vmeta{position:absolute; left:100px; bottom:20px; color:var(--white); font-size:12.5px; font-weight:700;
         letter-spacing:.08em; text-transform:uppercase; background:var(--ink); padding:4px 10px; border-radius:2px}
  .speech{margin-top:34px; max-width:920px; font-size:17.5px; line-height:1.65}
  .speech p{margin:0 0 1em}
  .lead-line{font-family:var(--display); font-size:clamp(24px,2.3vw,33px); text-transform:uppercase;
             line-height:1.12; letter-spacing:.005em; margin:0 0 18px}
  .ub{text-decoration:underline; text-decoration-color:var(--blue); text-decoration-thickness:1.5px; text-underline-offset:4px}
  .ur{text-decoration:underline; text-decoration-color:var(--red); text-decoration-thickness:1.5px; text-underline-offset:4px}
  .vs{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 18px}
  .vcard{position:relative; border:1.5px solid var(--ink); border-radius:var(--r); padding:18px 20px 16px;
         font-size:16.5px; line-height:1.55; overflow:hidden; transition:transform .25s ease;
         display:grid; grid-template-columns:1fr 84px; gap:14px; align-items:center}
  .vcard:hover{transform:translateY(-3px)}
  .vcard::before{content:""; position:absolute; top:0; left:0; right:0; height:5px; background:var(--blue);
                 transform:scaleX(0); transform-origin:left}
  .vcard.red::before{background:var(--red); transform-origin:right}
  .vcard.in::before{animation:stripe-in .75s cubic-bezier(.2,.7,.3,1) .1s forwards, stripe-breathe 5.5s ease-in-out 1.2s infinite}
  @keyframes stripe-in{from{transform:scaleX(0)} to{transform:scaleX(1)}}
  @keyframes stripe-breathe{0%,100%{transform:scaleX(1)} 50%{transform:scaleX(.78)}}
  .vcard .ill-sm{width:100%; height:auto; pointer-events:none}
  .vcard p{margin:0}
  .tblock{position:relative; border:2px solid var(--ink); border-radius:var(--r); padding:18px 22px 6px; margin:30px 0 22px}
  .graf-word{font-family:var(--graffiti); color:var(--red); font-size:clamp(34px,3.2vw,46px); line-height:1;
             display:inline-block; transform:rotate(-2deg); background:var(--white); padding:0 12px;
             margin:-40px 0 10px 2px; transform-origin:left center}
  .rv.in .graf-word{animation:graf-pop .6s cubic-bezier(.2,1.3,.4,1) .25s both}
  @keyframes graf-pop{from{transform:rotate(-9deg) scale(.86); opacity:0} to{transform:rotate(-2deg) scale(1); opacity:1}}
  /* иллюстрации-коллажи, как в книге */
  .ill{display:block; width:100%; height:auto}
  .withill{display:grid; grid-template-columns:1fr 246px; gap:36px; align-items:center; margin:0 0 1em}
  .withill > div > p:last-child{margin-bottom:0}
  .tblock .withill{grid-template-columns:1fr 186px; gap:28px; margin:0}
  .withill.katya{grid-template-columns:1fr 300px; align-items:start}
  .withill.foe{grid-template-columns:158px 1fr; gap:34px; align-items:center}
  .withill.foe img{image-rendering:pixelated}
  /* портрет Екатерины Молчановой: 2:3 — ровно пропорции исходника, ничего не режем.
     Без рамки и без полосы: фото стоит само по себе. */
  .photobox{aspect-ratio:2/3; overflow:hidden; border-radius:var(--r); background:var(--white)}
  .photobox img{width:100%; height:100%; object-fit:cover; display:block}
  /* фото слева, текст справа */
  .withill.katya.photo-left{grid-template-columns:300px 1fr}
  .floaty{animation:floaty 7s ease-in-out infinite}
  .floaty.slow{animation-duration:9s; animation-delay:-3s}
  @keyframes floaty{0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-9px) rotate(-1.2deg)}}
  .s2note{margin-top:18px; font-size:14.5px; font-style:italic}
  /* цена в первом экране: для обожжённой аудитории спрятанная цена = «сейчас начнут греть» */
  .heroprice{margin:16px 0 0; font-size:16.5px; line-height:1.55;
             border-left:4px solid var(--yellow); padding:3px 0 3px 15px}
  .heroprice b{font-family:var(--display); font-weight:400; font-size:1.28em; letter-spacing:.01em}

  /* ---------- общие секции ---------- */
  section{padding:64px 0}
  .sec{border-top:1px solid var(--ink)}
  .band-dark{background:var(--ink); color:var(--white); border-top:none}
  .band-dark h2, .band-dark h3{color:var(--white)}
  .band-blue{background:var(--blue); color:var(--white); border-top:none}
  .band-blue h2{color:var(--white)}
  .band-red{background:var(--red); color:var(--white); border-top:none}
  .band-red h2{color:var(--white)}
  .band-yellow{background:var(--yellow); border-top:none}
  .sechead{max-width:900px; margin-bottom:26px}
  .sechead h2{margin-bottom:14px}

  /* ПОСТЕР — цветная полоса только под заголовок; содержимое идёт ниже на белом */
  .poster{padding:56px 0 52px; border-top:none}
  .poster-dark{background:var(--ink); color:var(--white)}
  .poster-blue{background:var(--blue); color:var(--white)}
  .poster-yellow{background:var(--yellow); color:var(--ink)}
  .poster-red{background:var(--red); color:var(--white)}
  .poster h2{margin:0; color:inherit}
  .poster .graf-head{margin:0 0 4px}
  .poster .lead{margin-top:14px; opacity:.88}
  .poster-dark .graf-head, .poster-blue .graf-head, .poster-red .graf-head{color:var(--yellow)}
  .poster-yellow .graf-head{color:var(--red)}
  .after-poster{padding-top:46px; border-top:none}

  /* бегущая строка — этапы пути идут непрерывно */
  .ticker{background:var(--ink); color:var(--white); overflow:hidden; padding:15px 0; border:none}
  .ticker .track2{display:flex; width:max-content; animation:tick 42s linear infinite}
  .ticker:hover .track2{animation-play-state:paused}
  .ticker span{font-family:var(--display); font-size:26px; letter-spacing:.04em; text-transform:uppercase;
               padding:0 26px; white-space:nowrap; display:flex; align-items:center; gap:26px}
  .ticker span::after{content:""; width:11px; height:11px; background:var(--yellow); border-radius:2px; flex:0 0 auto}
  @keyframes tick{from{transform:translateX(0)} to{transform:translateX(-50%)}}

  /* экран с крупными цифрами */
  .numbers{background:var(--ink); color:var(--white); padding:58px 0}
  .nums{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
  .nums div{border-left:2px solid rgba(255,255,255,.28); padding-left:20px}
  .nums b{display:block; font-family:var(--display); font-weight:400; font-size:clamp(52px,7vw,104px);
          line-height:.92; color:var(--yellow); font-variant-numeric:tabular-nums}
  .nums b span{display:inline}
  .nums .plus{font-family:var(--body); font-style:normal; font-weight:400; font-size:.46em; vertical-align:.42em; margin-left:.04em}
  .nums > div > span{display:block; font-size:15.5px; margin-top:6px; letter-spacing:.04em; text-transform:uppercase}

  /* полноэкранный кадр-заявление */
  .statement{padding:76px 0; text-align:center; overflow:hidden}
  .statement .wrap{max-width:1460px}   /* шире обычного: фразе нужна одна строка */
  .statement .st{font-family:var(--display); font-weight:400; font-size:clamp(46px,9vw,132px); line-height:.94;
                 text-transform:uppercase; letter-spacing:.01em; margin:0}
  .statement .st em{font-style:normal; color:var(--red)}
  .st-row{display:flex; align-items:center; justify-content:center; gap:clamp(18px,4vw,58px)}
  /* высота задана обеим фигурам — так рука с лампочкой и рука с молотком
     выглядят одинаковыми по величине, несмотря на разные пропорции картинок */
  .st-fig{position:relative; flex:0 0 auto; height:clamp(104px,13.5vw,196px)}
  .st-fig img{height:100%; width:auto; display:block}
  /* лампочка «загорается»: сама пульсирует, вокруг вспыхивают лучи */
  .rays{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
  .rays line{stroke:var(--yellow); stroke-width:6.5; stroke-linecap:round}
  .rays g{transform-box:view-box; transform-origin:39px 22px; animation:ray-flash 3s ease-in-out infinite}
  @keyframes ray-flash{0%,100%{opacity:.2; transform:scale(.8)} 55%{opacity:1; transform:scale(1.14)}}
  .bulb img{animation:bulb-glow 3s ease-in-out infinite}
  @keyframes bulb-glow{0%,100%{transform:scale(1)} 55%{transform:scale(1.05)}}
  /* рука с молотком: отзеркалена и бьёт — замах и удар */
  .tool img{transform-origin:58% 72%; animation:hammer 1.9s cubic-bezier(.4,0,.25,1) infinite}
  @keyframes hammer{
    0%{transform:scaleX(-1) rotate(0deg)} 32%{transform:scaleX(-1) rotate(-17deg)}
    43%{transform:scaleX(-1) rotate(8deg)} 51%{transform:scaleX(-1) rotate(1deg)}
    64%,100%{transform:scaleX(-1) rotate(0deg)}}
  /* пульсирует только знак «не равно» */
  .statement .st em{display:inline-block; animation:neq-pulse 3.4s ease-in-out infinite}
  @keyframes neq-pulse{0%,100%{transform:scale(1)} 50%{transform:scale(1.13)}}
  .statement .sub{margin-top:18px; font-size:17px; font-style:italic; opacity:.72}

  /* пулл-цитата — разрывает полотно текста */
  .pull{font-family:var(--display); font-size:clamp(23px,2.5vw,34px); line-height:1.12; text-transform:uppercase;
        letter-spacing:.01em; border-left:6px solid var(--red); padding:4px 0 4px 22px; margin:26px 0; max-width:24ch}
  .aside{font-style:italic; font-size:16.5px; line-height:1.6; opacity:.78; max-width:70ch; margin:0 0 1em}
  .lead{font-size:19px; line-height:1.55; max-width:78ch}
  .muted{opacity:.72}
  .txt{max-width:76ch; font-size:17.5px; line-height:1.65}
  .txt p{margin:0 0 1em}
  .txt p:last-child{margin-bottom:0}
  h3{font-family:var(--display); font-weight:400; font-size:23px; text-transform:uppercase;
     letter-spacing:.01em; line-height:1.1; margin:0 0 8px}
  .graf-head{font-family:var(--graffiti); font-size:clamp(38px,4.4vw,64px); line-height:1;
             display:inline-block; transform:rotate(-2deg); color:var(--red); margin:0 0 6px}
  .band-dark .graf-head, .band-blue .graf-head, .band-red .graf-head{color:var(--yellow)}

  /* маркированные списки в стиле бренда */
  ul.plain{list-style:none; padding:0; margin:0 0 6px; max-width:78ch}
  ul.plain li{position:relative; padding:12px 0 12px 26px; border-bottom:1px solid rgba(20,19,15,.16)}
  ul.plain li:last-child{border-bottom:none}
  ul.plain li::before{content:""; position:absolute; left:0; top:20px; width:11px; height:11px;
                      background:var(--red); border-radius:2px}
  .band-dark ul.plain li{border-bottom-color:rgba(255,255,255,.22)}
  .band-dark ul.plain li::before, .band-blue ul.plain li::before{background:var(--yellow)}
  .band-blue ul.plain li{border-bottom-color:rgba(255,255,255,.3)}

  /* иконки-галочки и кресты (вектор, не эмодзи) */
  .ic{flex:0 0 auto; margin-top:3px}
  .li-ic{display:flex; gap:11px; align-items:flex-start}
  ul.plain li.li-ic{padding-left:0}
  ul.plain li.li-ic::before{content:none}

  /* карточки-сетки */
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  .card{position:relative; overflow:hidden; border:1.5px solid var(--ink); border-radius:var(--r);
        padding:24px 24px 22px; background:var(--white); transition:transform .25s ease}
  .card:hover{transform:translateY(-3px)}
  .card::before{content:""; position:absolute; top:0; left:0; right:0; height:5px; background:var(--yellow);
                transform:scaleX(0); transform-origin:left}
  .card.c-red::before{background:var(--red)}
  .card.c-blue::before{background:var(--blue); transform-origin:right}
  .rv.in .card::before, .card.in::before{
    animation:stripe-in .75s cubic-bezier(.2,.7,.3,1) .12s forwards, stripe-breathe 6.5s ease-in-out 1.2s infinite}
  .band-dark .card{background:#1d1b16; border-color:#3a352b; color:var(--white)}
  .band-blue .card, .band-red .card, .band-yellow .card{color:var(--ink)}
  .band-blue .card h3, .band-red .card h3, .band-yellow .card h3{color:var(--ink)}
  /* на цветных полосах маркер — сплошной, иначе текст «проваливается» на просветах мазка */
  .band-blue .hl, .band-red .hl, .band-dark .hl{
    background-image:linear-gradient(var(--yellow),var(--yellow)); color:var(--ink); padding:.08em .16em}
  .card p{margin:0; font-size:16.5px; line-height:1.6}
  .card .num{font-family:var(--display); font-size:15px; letter-spacing:.06em; color:var(--red); margin-bottom:4px}
  /* карточки «точка А» */
  .points .pt{font-family:var(--display); font-size:17px; letter-spacing:.08em; text-transform:uppercase;
              color:var(--red); margin-bottom:6px}
  .points .card.c-blue .pt{color:var(--blue)}
  .points h3{font-size:21px; margin-bottom:10px}
  .points p{margin:0 0 10px}
  .points .bonus{background:var(--yellow); border-radius:var(--r); padding:11px 14px; font-size:15.5px; margin:12px 0 0}
  /* карточек нечётное число — последняя занимает всю строку, чтобы не висела дыра */
  .points .card:nth-child(odd):last-child{grid-column:1 / -1}

  .card.c-ink::before{background:var(--ink)}
  .changes h3{font-size:30px; color:var(--blue); margin-bottom:10px}
  .changes p{font-size:18px; line-height:1.5}

  /* до / после (обжигаются → у нас) */
  .balist{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .ba{position:relative; overflow:hidden; border:1.5px solid var(--ink); border-radius:var(--r);
      padding:18px 20px 16px; transition:transform .25s ease}
  .ba:hover{transform:translateY(-3px)}
  .ba::before{content:""; position:absolute; top:0; left:0; right:0; height:5px; background:var(--red);
              transform:scaleX(0); transform-origin:left}
  .rv.in .ba::before, .ba.in::before{
    animation:stripe-in .7s cubic-bezier(.2,.7,.3,1) .1s forwards, stripe-breathe 6s ease-in-out 1.1s infinite}
  .ba .quote{font-weight:700; font-size:17px; line-height:1.4; margin:0 0 12px}
  .ba .lbl{display:block; font-family:var(--display); font-size:14.5px; letter-spacing:.07em;
           text-transform:uppercase; color:var(--red); margin-bottom:5px}
  .ba .ans{font-size:16px; line-height:1.55; margin:0; padding-top:12px; border-top:1px solid rgba(20,19,15,.16)}
  .ba .ans .lbl{color:var(--blue); display:flex; align-items:center; gap:8px}
  .tick-sm{width:26px; height:auto; flex:0 0 auto}

  /* схема «мышление в центре» — баухаус: ядро + линии-уголки к трём силам */
  .scheme{position:relative; margin:30px 0 26px; padding:34px 0 6px; max-width:940px}
  .scheme .ai{position:absolute; top:0; left:0; right:0; display:flex; align-items:center; gap:14px;
              font-family:var(--display); font-size:15px; letter-spacing:.09em; text-transform:uppercase}
  .scheme .ai::after{content:""; flex:1 1 auto; height:2px; background:var(--ink); opacity:.28;
                     transform:scaleX(0); transform-origin:left}
  .rv.in .scheme .ai::after{animation:stripe-in 1s cubic-bezier(.2,.7,.3,1) .2s forwards,
                                      stripe-breathe 7.5s ease-in-out 1.4s infinite}
  /* ядро по центру, от него — стебель, шина и три ветви */
  /* жёлтое ядро наезжает на мозг под наклоном — коллаж */
  .core{position:absolute; left:50%; top:50%; width:min(340px,84%); z-index:2;
        transform:translate(-50%,-50%) rotate(-3.5deg); background:var(--yellow); color:var(--ink);
        border-radius:var(--r); padding:24px 20px 20px; text-align:center}
  .core b{display:block; font-family:var(--display); font-weight:400; font-size:clamp(32px,3.4vw,46px);
          line-height:1; letter-spacing:.02em}
  .core span{display:block; font-size:13.5px; margin-top:7px; letter-spacing:.06em; text-transform:uppercase}
  /* мозг рядом с ядром */
  /* ядро строго по центру: пустая третья колонка уравновешивает мозг слева */
  .corerow{position:relative; display:flex; justify-content:center; align-items:center}
  .corerow .brain{width:clamp(280px,38vw,500px); height:auto; display:block}
  .corerow::after{content:""; position:absolute; left:calc(50% - 1px); top:100%; width:2px; height:34px; background:var(--ink)}
  .bus{position:relative; height:40px; margin-top:34px; display:grid; grid-template-columns:repeat(3,1fr)}
  .bus::before{content:""; position:absolute; top:0; left:16.66%; right:16.66%; height:2px; background:var(--ink)}
  .bus i{position:relative}
  /* прямая линия + треугольный наконечник, указывающий на карточку */
  .bus i::after{content:""; position:absolute; left:calc(50% - 1px); top:0; width:2px; height:calc(100% - 11px); background:var(--ink)}
  .bus i::before{content:""; position:absolute; left:calc(50% - 8px); bottom:0; width:0; height:0;
                 border-left:8px solid transparent; border-right:8px solid transparent; border-top:12px solid var(--ink)}
  .forces{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
  .force{position:relative; overflow:hidden; border:1.5px solid var(--ink); border-radius:var(--r);
         padding:20px 20px 18px; background:var(--white); transition:transform .25s ease}
  .force:hover{transform:translateY(-3px)}
  .force::before{content:""; position:absolute; top:0; left:0; right:0; height:5px; background:var(--red);
                 transform:scaleX(0); transform-origin:left}
  .force:nth-child(2)::before{background:var(--blue); transform-origin:right}
  .force:nth-child(3)::before{background:var(--ink)}
  .rv.in .force::before{animation:stripe-in .75s cubic-bezier(.2,.7,.3,1) .15s forwards,
                                  stripe-breathe 6.5s ease-in-out 1.3s infinite}
  .force .tick{width:40px; height:auto; margin-bottom:10px}
  .force b{display:block; font-family:var(--display); font-weight:400; font-size:20px; text-transform:uppercase;
           letter-spacing:.02em; margin-bottom:3px}
  .force span{font-size:15.5px; opacity:.72}
  /* граффити-строка внутри текста */
  .graf-line{display:inline-block; font-family:var(--graffiti); color:var(--red); line-height:1.05;
             font-size:clamp(30px,4.3vw,58px); transform:rotate(-1.5deg); margin:24px 0 16px}

  /* программа — аккордеоны */
  .acc{border-top:1px solid var(--ink)}
  .acc details{border-bottom:1px solid var(--ink)}
  .acc summary{list-style:none; cursor:pointer; padding:18px 0 0; display:grid;
               grid-template-columns:1fr 20px; gap:0 18px; align-items:center}
  .acc details[open] summary{padding-bottom:18px}
  .acc .sumhead{grid-column:1; grid-row:1; display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline;
                font-family:var(--display); font-size:clamp(20px,2vw,26px); text-transform:uppercase; letter-spacing:.01em}
  .acc summary::-webkit-details-marker{display:none}
  .acc summary::after{grid-column:2; grid-row:1}
  .acc summary::after, .faq summary::after{content:""; margin-left:auto; flex:0 0 auto; width:20px; height:20px;
    align-self:center; transition:transform .25s ease;
    background:linear-gradient(var(--red),var(--red)) center/20px 3px no-repeat,
               linear-gradient(var(--red),var(--red)) center/3px 20px no-repeat}
  .acc details[open] summary::after, .faq details[open] summary::after{
    background:linear-gradient(var(--red),var(--red)) center/20px 3px no-repeat; transform:rotate(180deg)}
  .acc summary:hover{background:linear-gradient(var(--yellow),var(--yellow)) left bottom/100% 3px no-repeat}
  .acc .weeks{font-family:var(--body); font-size:13.5px; font-weight:600; text-transform:none; letter-spacing:0; opacity:.65}
  /* результат виден и в свёрнутом модуле */
  .acc .peek{grid-column:1; grid-row:2; display:flex; gap:12px; align-items:flex-start;
             padding:8px 0 18px 0; font-size:16px; line-height:1.5; max-width:80ch}
  .acc .peek b{flex:0 0 auto; font-family:var(--display); font-weight:400; font-size:14.5px; letter-spacing:.07em;
               text-transform:uppercase; color:var(--red); padding-top:3px}
  .acc details[open] .peek{display:none}
  .acc .body{padding:0 0 24px; max-width:82ch}
  .acc .body > p{margin:0 0 12px; font-size:17px; line-height:1.6}
  .result{border-left:4px solid var(--yellow); padding:12px 0 12px 16px; margin-top:14px; font-size:17px}
  .result b{display:block; font-family:var(--display); font-size:14px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:3px}
  /* результат-плашка «уровень пройден»: персонаж стоит внутри и смотрит на текст */
  .result.hero{position:relative; background:var(--yellow); border-left:none; border-radius:var(--r);
               padding:18px 24px 16px; margin-top:26px; display:grid; grid-template-columns:100px 1fr;
               gap:22px; align-items:end}
  .result.hero img{width:100%; height:auto; image-rendering:pixelated; margin-top:-46px; align-self:end;
                   filter:drop-shadow(0 0 0 transparent)}
  .result.hero .txt2{align-self:center}
  .result.hero.right{grid-template-columns:1fr 112px}
  .result.hero.right img{transform:scaleX(-1)}

  /* тарифы */
  .tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:6px; align-items:stretch}
  .tier{position:relative; border:1.5px solid var(--ink); border-radius:var(--r); padding:26px 24px 24px;
        display:flex; flex-direction:column; background:var(--white); transition:transform .25s ease}
  .tier:hover{transform:translateY(-4px)}
  .tier::before{content:""; position:absolute; top:0; left:0; right:0; height:6px; background:var(--blue)}
  .tier.t2::before{background:var(--yellow)}
  .tier.t3::before{background:var(--red)}
  .tier.pop{border-width:2.5px}
  /* четыре периода клуба — сетка на четыре колонки, на планшете две */
  .tiers.four{grid-template-columns:repeat(4,1fr); gap:14px}
  .tiers.four .tier{padding:22px 18px 20px}
  .tiers.four .tname{font-size:26px}
  @media (max-width:1080px){ .tiers.four{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:640px){ .tiers.four{grid-template-columns:1fr} }
  /* две дороги наверху страницы оплаты: новичок и тот, кто продлевает */
  .roads{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:0 0 30px}
  .road{border:1.5px solid var(--ink); border-radius:var(--r); padding:22px 24px 22px;
        display:flex; flex-direction:column}
  .road h3{margin:0 0 6px}
  .road p{font-size:16px; line-height:1.6; margin:0 0 16px}
  .road .btn{margin-top:auto; text-align:center}
  @media (max-width:720px){ .roads{grid-template-columns:1fr} }
  .ribbon{position:absolute; top:-13px; right:18px; background:var(--yellow); color:var(--ink);
          font-family:var(--display); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
          padding:5px 12px 3px; border-radius:var(--r)}
  .tname{font-family:var(--display); font-size:30px; text-transform:uppercase; line-height:1; margin:4px 0 4px}
  .tfor{font-size:14.5px; opacity:.72; margin-bottom:16px}
  .tlist{list-style:none; padding:0; margin:0 0 14px; display:grid; gap:9px; font-size:16px; line-height:1.5}
  .tno{font-size:15px; color:var(--red); margin:0 0 12px}
  .gift{font-size:14.5px; font-weight:600; background:var(--yellow); padding:8px 12px; border-radius:var(--r); margin-bottom:12px}
  .access{font-size:13.5px; opacity:.7; padding-top:12px; border-top:1px dashed rgba(20,19,15,.3)}
  .price{margin:12px 0 16px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
  .price .big{font-family:var(--display); font-size:44px; line-height:.9}
  .price .wave{font-size:13.5px; opacity:.7}
  .tier .btn{width:100%; text-align:center; margin-top:auto}
  .infobox{border:1.5px solid var(--ink); border-radius:var(--r); padding:22px 24px; margin-top:18px}
  .infobox.club{border-style:dashed}
  .infobox h3{margin-bottom:6px}
  .infobox p{margin:0 0 12px; font-size:16.5px; line-height:1.6}
  .btnrow{display:flex; flex-wrap:wrap; gap:12px}

  /* шаги после оплаты */
  .steps{counter-reset:st; display:grid; gap:0; max-width:82ch}
  .step{display:grid; grid-template-columns:52px 1fr; gap:18px; padding:18px 0; border-bottom:1px solid rgba(20,19,15,.16)}
  .step:last-child{border-bottom:none}
  .step .n{counter-increment:st; font-family:var(--display); font-size:30px; line-height:1;
           width:44px; height:44px; border:2px solid var(--ink); border-radius:var(--r);
           display:flex; align-items:center; justify-content:center; padding-top:4px}
  .step .n::before{content:counter(st)}
  .step:first-child .n{background:var(--yellow)}
  .step p{margin:0; font-size:17px; line-height:1.6}

  /* гарантия */
  .gcols{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px}
  .gcol{background:var(--white); border:1.5px solid var(--ink); border-radius:var(--r); padding:20px 22px}
  .gcol h3{font-size:19px; margin-bottom:10px}
  .gcol ul.plain li{border-bottom-color:rgba(20,19,15,.14); font-size:16px; padding:9px 0 9px 24px}
  .gcol ul.plain li::before{top:17px; width:9px; height:9px}

  /* FAQ */
  .faq details{border-bottom:1px solid var(--ink); padding:0}
  .faq details:first-child{border-top:1px solid var(--ink)}
  .faq summary{list-style:none; cursor:pointer; padding:17px 0; display:flex; gap:14px; align-items:baseline;
               font-weight:700; font-size:18px}
  .faq summary::-webkit-details-marker{display:none}
  .faq .body{padding:0 0 18px; max-width:80ch; font-size:16.5px; line-height:1.65}
  .faq .body p{margin:0}

  /* ---------- блоки страницы клуба ---------- */
  .inclub{background:var(--yellow); border-radius:var(--r); padding:11px 14px; font-size:15.5px; margin:12px 0 0}
  .figico{width:88px; height:auto; display:block; margin:0 0 14px}
  .figico.pix{image-rendering:pixelated; width:64px}
  .fig-slot{width:88px; height:88px; margin:0 0 14px; border:2px dashed var(--ink); border-radius:var(--r);
            display:flex; align-items:center; justify-content:center; font-size:12px; opacity:.5}
  .card.dashed{border-style:dashed}
  .topics .card, .feats .card{display:flex; flex-direction:column}
  .topics .card .btn{margin-top:auto; align-self:flex-start}
  .quotebox{border-style:dashed}
  .quotebox .note{margin:0}
  /* цена */
  /* текст в ценовом блоке — по левому краю: центрованные абзацы читаются тяжело */
  .pricebox{border:2.5px solid var(--ink); border-radius:var(--r); padding:34px 30px 30px; text-align:left;
            max-width:620px; margin:0 auto; position:relative; overflow:hidden}
  .pricebox::before{content:""; position:absolute; top:0; left:0; right:0; height:6px; background:var(--yellow);
                    transform:scaleX(0); transform-origin:left}
  .rv.in.pricebox::before{animation:stripe-in .8s cubic-bezier(.2,.7,.3,1) .1s forwards,
                                    stripe-breathe 6s ease-in-out 1.2s infinite}
  .bigprice{display:flex; align-items:baseline; justify-content:flex-start; gap:10px}
  .pricebox .btn{display:block; text-align:center}
  .bigprice .num{font-family:var(--display); font-size:clamp(56px,7vw,92px); line-height:.92}
  .bigprice .per{font-size:17px; opacity:.7}
  .freeze{background:var(--yellow); border-radius:var(--r); padding:12px 16px; font-size:16px;
          margin:18px 0; text-align:left}
  /* сетка цен: чем длиннее подписка, тем дешевле месяц */
  .prices{width:100%; border-collapse:collapse; margin:18px 0 0; text-align:left}
  .prices th{font-family:var(--display); font-weight:400; font-size:14px; letter-spacing:.06em;
             text-transform:uppercase; opacity:.6; padding:0 0 7px}
  .prices td{padding:10px 0; border-top:1px solid rgba(20,19,15,.16); font-size:16.5px}
  .prices tr:last-child td{border-bottom:1px solid rgba(20,19,15,.16)}
  .prices th:nth-child(2), .prices td:nth-child(2){text-align:right; white-space:nowrap;
                                                   font-family:var(--display); font-size:1.35em; padding-right:18px}
  .prices th:nth-child(2){font-family:var(--display); font-size:14px; padding-right:18px}
  .prices td:nth-child(3){font-size:15px; opacity:.72}
  /* строка с льготным предложением выделена: это то, что мы предлагаем в первую очередь */
  .prices tr:nth-child(2) td{background:rgba(46,49,146,.06)}
  .prices tr:nth-child(2) td:nth-child(2){color:var(--blue)}
  .pnote{font-family:var(--display); font-weight:400; font-size:1.15em; letter-spacing:.01em; display:block}
  .phint{display:block; font-size:13px; letter-spacing:.05em; text-transform:uppercase;
         color:var(--blue); margin-top:2px}
  @media (max-width:860px){
    .prices th, .prices td{font-size:14.5px; padding:9px 6px}
    .prices td:nth-child(2){font-size:1.2em; padding-right:10px}
    .prices td:nth-child(3){font-size:13px}
    .phint{font-size:11.5px}
  }
  /* На узких телефонах (320px) таблица не помещалась и правая колонка
     обрезалась рамкой окошка — человек не видел, как именно он платит. */
  @media (max-width:400px){
    .pricebox{padding:22px 12px 20px}
    .prices th, .prices td{font-size:13.5px; padding:8px 3px}
    .prices td:nth-child(2){font-size:1.1em; padding-right:6px}
    .prices th:nth-child(2){padding-right:6px}
    .prices td:nth-child(3){font-size:11.5px; line-height:1.35}
    .pnote{font-size:1.05em}
    .phint{font-size:10.5px}
  }

  /* ================= КЛУБ: своя сборка из тех же атомов =================
     Палитра, шрифты, радиус и коллажи общие с курсом. Различаются:
     ведущий цвет (ультрамарин вместо красного), метафора (цикл вместо пути),
     посадка первого экрана (по центру) и способ деления страницы (синяя «спина»). */

  /* логотип клуба — квадратный композиционный знак, ему нужна высота */
  .club .brand img{height:84px}
  .club .brand .sub i{font-size:14px; opacity:.75}
  .club .footlogo img{height:84px}

  /* 1. ведущий цвет — ультрамарин */
  .club .btn-red{background:var(--blue); border-color:var(--blue)}
  .club .btn-red:hover{background:var(--ink); border-color:var(--ink)}
  /* Кнопка на буткэмп: красная, потому что красный — цвет ABC100.
     На синем клубе это редкий акцент, поэтому кнопку видно и не путаешь с клубными. */
  .btn-abc{background:var(--red); border-color:var(--red); color:var(--white)}
  .btn-abc:hover{background:var(--ink); border-color:var(--ink)}
  .club .eyebrow::before{background:var(--blue)}
  .club .card::before{background:var(--blue)}
  .club .card.c-red::before{background:var(--red)}
  .club .card.c-ink::before{background:var(--ink)}
  .club .graf{color:var(--blue)}
  .club .graf-head{color:var(--blue)}
  .club .ticker{background:var(--blue)}
  .club .steps .n{border-color:var(--blue)}
  .club .step:first-child .n{background:var(--blue); color:var(--white)}
  .club .acc summary::after, .club .faq summary::after{
    background:linear-gradient(var(--blue),var(--blue)) center/20px 3px no-repeat,
               linear-gradient(var(--blue),var(--blue)) center/3px 20px no-repeat}
  .club .faq details[open] summary::after{
    background:linear-gradient(var(--blue),var(--blue)) center/20px 3px no-repeat}
  .club ul.plain li::before{background:var(--blue)}

  /* 2. первый экран по центру, баухаус разложен по краям */
  .club .hero{position:relative; overflow:hidden; padding:44px 0 8px}
  .club .hero-grid{grid-template-columns:1fr; gap:0; text-align:center; max-width:800px; margin:0 auto}
  .club .hero .eyebrow{justify-content:center}
  .club .hero .eyebrow::after{display:none}
  .club .hero h1{margin-left:auto; margin-right:auto}
  .club .hero .lede{margin-left:auto; margin-right:auto}
  .club .hero .chips, .club .hero .cta-row{justify-content:center}
  .club .hero .notes{grid-template-columns:1fr; text-align:center}
  .club .hero .note{margin-left:auto; margin-right:auto}
  .bhside{position:absolute; top:52px; bottom:24px; width:130px; display:flex; flex-direction:column;
          align-items:center; justify-content:space-around; pointer-events:none}
  .bhside.left{left:1.5%}
  .bhside.right{right:1.5%}
  .bhside .bh-bar{height:clamp(90px,15vh,190px); width:auto}
  .bhside .bh-sq{width:58px; height:auto}

  /* 3. недельный цикл вместо пути */
  .cycle{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
         max-width:720px; margin:26px auto 0; padding-bottom:40px}
  .cnode{position:relative; border:1.5px solid var(--ink); border-radius:var(--r);
         padding:14px 12px 12px; background:var(--white)}
  .cnode b{display:block; font-family:var(--display); font-weight:400; font-size:22px;
           text-transform:uppercase; line-height:1}
  .cnode span{display:block; font-size:14.5px; opacity:.7; margin-top:4px}
  .cnode:nth-of-type(-n+2)::after{content:""; position:absolute; right:-18px; top:50%; width:0; height:0;
    border-top:6px solid transparent; border-bottom:6px solid transparent;
    border-left:10px solid var(--blue); transform:translateY(-50%)}
  .cloop{position:absolute; left:16%; right:16%; bottom:0; height:26px;
         border:3px solid var(--blue); border-top:none; border-radius:0 0 var(--r) var(--r)}
  .cloop::before{content:""; position:absolute; left:-6px; top:-12px; width:0; height:0;
    border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:12px solid var(--blue)}
  .cloop i{position:absolute; bottom:-6px; width:9px; height:9px; background:var(--blue); border-radius:2px;
           animation:cyc 4.5s linear infinite}
  @keyframes cyc{from{left:100%} to{left:0}}

  .club .pull{max-width:38ch}
  .norisk li{font-size:18px; padding:14px 0 14px 28px}
  .norisk li b{font-family:var(--display); font-weight:400; font-size:1.15em; letter-spacing:.01em}

  /* честное предупреждение в первом экране: видео — возражение №1,
     оно должно стоять выше линии сгиба, а не всплывать в середине */
  /* правое поле шире левого — там живёт восклицательный знак, текст под него не заезжает */
  .honest{position:relative; margin:18px auto 0; max-width:66ch; font-size:16.5px; line-height:1.6;
          background:var(--yellow); border-radius:var(--r); padding:15px 66px 15px 20px; text-align:left}
  /* рваный знак заходит на край жёлтой плашки — чтобы глаз споткнулся
     о главное возражение, а не проскочил его */
  .honest .excl{position:absolute; right:-30px; top:50%; width:60px; height:auto;
                transform:translateY(-50%) rotate(13deg); pointer-events:none; z-index:2}
  .honest.rv .excl{opacity:0; transform:translateY(-50%) rotate(13deg) scale(.6);
                   transition:transform .6s cubic-bezier(.2,1.5,.4,1) .35s, opacity .4s ease .35s}
  .honest.rv.in .excl{opacity:1; transform:translateY(-50%) rotate(13deg) scale(1)}
  @media (prefers-reduced-motion: reduce){
    .honest.rv .excl{opacity:1; transform:translateY(-50%) rotate(13deg); transition:none}
  }
  .static .honest .excl{opacity:1 !important; transition:none !important;
                        transform:translateY(-50%) rotate(13deg) !important}

  /* цитаты участниц — каждая стоит рядом с тем обещанием, которое доказывает */
  .qline{margin:22px 0 0; max-width:76ch; font-size:16.5px; line-height:1.62; font-style:italic;
         border-left:4px solid var(--yellow); padding:3px 0 3px 17px}
  .qline i{display:block; font-style:normal; font-family:var(--display); font-weight:400;
           font-size:14px; letter-spacing:.05em; text-transform:uppercase; opacity:.6; margin-top:9px}
  .qline.in-card{margin:14px 0 18px; font-size:15px; border-left-color:var(--blue)}
  .qline.in-card i{font-size:12.5px; margin-top:7px}
  /* ---------- цитаты когорты ----------
     Без скрипта — обычная сетка (так их видно всегда, даже если скрипт не сработал).
     Со скриптом превращаются в слайд-шоу: одна цитата на экране, остальные ждут.
     Так блок перестаёт быть длинной лентой, которую надо пролистывать. */
  .voices .qline{margin:0; max-width:none}
  /* overflow:hidden обязателен: цитаты, которые ждут очереди, стоят сдвинутыми
     вправо и без него растягивают страницу вбок на телефоне */
  .voices.slides{position:relative; display:block; margin-top:26px; overflow:hidden}
  .voices.slides .qline{position:absolute; left:0; right:0; top:0;
                        opacity:0; transform:translateX(34px); pointer-events:none;
                        transition:opacity .5s ease, transform .5s ease}
  .voices.slides .qline.on{opacity:1; transform:none; pointer-events:auto; position:relative}
  .voices.slides .qline.out{opacity:0; transform:translateX(-34px)}
  .vdots{display:flex; gap:9px; justify-content:center; margin-top:18px}
  .vdots button{width:10px; height:10px; padding:0; border:1.5px solid var(--ink);
                border-radius:50%; background:transparent; cursor:pointer;
                transition:background .2s ease, transform .2s ease}
  .vdots button[aria-current="true"]{background:var(--ink); transform:scale(1.25)}
  .vdots button:hover{background:var(--yellow)}
  @media (prefers-reduced-motion:reduce){
    .voices.slides .qline{transition:opacity .2s ease; transform:none}
    .voices.slides .qline.out{transform:none}
  }
  .voices .qline:nth-child(2){border-left-color:var(--blue)}
  .voices .qline:nth-child(3){border-left-color:var(--red)}
  .voices .qline:nth-child(4){border-left-color:var(--ink)}

  /* две победы за 14 дней — конкретика вместо «двух кусков системы» */
  .wins{display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:88ch; margin:0 0 34px}
  .win{display:flex; gap:16px; align-items:flex-start; border:1.5px solid var(--ink);
       border-radius:var(--r); padding:20px 20px 21px}
  .win .wn{flex:0 0 auto; width:40px; height:40px; border-radius:var(--r); background:var(--blue);
           color:var(--white); font-family:var(--display); font-weight:400; font-size:26px;
           line-height:41px; text-align:center}
  .win p{margin:0; font-size:16.5px; line-height:1.6}
  .subh{font-family:var(--display); font-weight:400; text-transform:uppercase; line-height:1.05;
        font-size:clamp(24px,2.6vw,34px); margin:0 0 12px}
  /* рваная галочка рядом с обещанием «вы ничем не рискуете» */
  .subrow{display:flex; align-items:center; gap:18px; margin:0 0 14px}
  .subrow .subh{margin:0}
  .tickbig{flex:0 0 auto; width:74px; height:auto; transform:rotate(-6deg)}

  /* якорь цены: 19 € без опоры для сравнения читаются как «несерьёзно» */
  /* Заголовки браузер разбивает по строкам сам и часто оставляет висячее слово.
     balance выравнивает строки по длине, pretty не даёт оборваться последней.
     Старые браузеры свойство игнорируют — там работает склейка из typo.py. */
  h1, h2, h3, .graf-head, .graf-line, .tname{text-wrap:balance}
  .lede, .lead, .tfor, .formlead{text-wrap:pretty}

  /* Обращение Кати на втором экране — пока не снято видео.
     Не карточка и не рамка: письмо от человека, поэтому мягкая подложка,
     жёлтая полоса слева и круглый портрет рядом с текстом. */
  /* Фотография слева во всю высоту блока, текст рядом. Маленький кружок
     не читался, особенно на телефоне: человека надо УВИДЕТЬ, это половина
     смысла блока. Сетка, а не flex — так колонка с фото держит ширину. */
  .saykatya{display:grid; grid-template-columns:300px 1fr; gap:0;
            max-width:940px; margin:30px auto 0; border-radius:var(--r);
            background:rgba(255,214,0,.16); overflow:hidden;
            border-left:5px solid var(--yellow)}
  .saykatya .pf{display:block; align-self:stretch; min-height:100%}
  /* Колонка 300px при высоте блока ~400px даёт ровно пропорции снимка,
     поэтому кадр не режется. Если текст вырастет и блок станет выше,
     обрезка пойдёт снизу, а не по макушке — за это отвечает 15%. */
  .saykatya .pf img{width:100%; height:100%; min-height:340px;
                    object-fit:cover; object-position:50% 15%; display:block}
  .saykatya .txt{padding:30px 34px}
  .saykatya .txt p{font-size:17.5px; line-height:1.62; margin:0 0 13px}
  .saykatya .txt p:last-child{margin-bottom:0}
  /* Первая строка набрана узким Bebas и рядом с обычным текстом кажется мельче,
     хотя должна вести. Поэтому здесь она крупнее обычной .lead-line. */
  .saykatya .txt p.lead-line{font-size:clamp(27px,3.4vw,37px); margin-bottom:14px}
  .saykatya .sign{font-family:var(--display); font-size:15px; letter-spacing:.05em;
                  text-transform:uppercase; opacity:.6; margin-top:16px}
  @media (max-width:860px){
    /* На телефоне фото сверху во всю ширину. Кадр НЕ режем: фотография
       вертикальная, и в горизонтальном окне у Кати срезало макушку.
       Показываем её целиком, в своих пропорциях. */
    .saykatya{grid-template-columns:1fr}
    .saykatya .pf img{width:100%; height:auto; min-height:0;
                      aspect-ratio:auto; object-fit:contain}
    .saykatya .txt{padding:22px 20px 24px}
    .saykatya .txt p{font-size:16.5px}
  }

  .anchor{margin:18px 0 0; font-size:16px; line-height:1.6; text-align:left;
          border-left:4px solid var(--blue); padding:2px 0 2px 15px}

  /* ---------- «товар с фото»: картинка у каждого тарифа ----------
     Требование банка к сайту на эквайринг: товары с фото, описанием и ценой. */
  .tcover{display:flex; align-items:center; justify-content:center; height:112px;
          margin:0 0 16px; border-radius:var(--r); background:rgba(20,19,15,.05); overflow:hidden}
  .tcover img{max-height:88px; width:auto}
  .tafter{font-size:14px; letter-spacing:.03em; text-transform:uppercase;
          font-family:var(--display); color:var(--red); margin:0 0 10px}

  /* ---------- форма перед оплатой ----------
     Банк присылает только сумму, без имени плательщика. Без формы оплату
     не с кем связать и доступ некуда отправить. */
  .payform{max-width:560px; margin:0 auto; border:2.5px solid var(--ink); border-radius:var(--r);
           padding:28px 26px 26px; background:var(--white)}
  /* Первое, что человек видит после нажатия кнопки тарифа: подтверждение выбора.
     Раньше здесь стоял выпадающий список — и выходило, что вопрос задают заново,
     хотя человек уже ответил. Теперь выбор показан как факт, рядом — «поменять». */
  .chosen{border-left:4px solid var(--blue); padding:3px 0 3px 15px; margin:0 0 22px}
  .chosen .cl{display:block; font-family:var(--display); font-size:14px; letter-spacing:.07em;
              text-transform:uppercase; opacity:.6; margin-bottom:3px}
  .chosen .cn{display:block; font-family:var(--display); font-weight:400; font-size:clamp(26px,3.4vw,34px);
              line-height:1.02; letter-spacing:.01em}
  .chosen .cch{display:inline-block; margin-top:9px; font-size:14.5px; font-weight:700;
               text-decoration:none; border-bottom:2px solid var(--yellow); padding-bottom:1px}
  .chosen.none .cn{font-size:20px; opacity:.55}
  .formh{font-family:var(--display); font-weight:400; font-size:clamp(24px,3vw,30px);
         text-transform:uppercase; letter-spacing:.01em; line-height:1.05; margin:0 0 6px}
  .formlead{font-size:16px; line-height:1.55; margin:0 0 20px; opacity:.75}

  /* ---------- шаг оплаты ----------
     Когда тариф уже выбран, витрину убираем со страницы: человек нажал «оплатить»
     и должен увидеть форму, а не те же самые карточки — иначе кажется, что ничего
     не произошло. Заодно убираем карточку «напишите мне»: на шаге оплаты она
     работает как дверь наружу, а нам нужно, чтобы человек дошёл до конца. */
  body.checkout #vhod,
  body.checkout #tarify,
  body.checkout #periody,
  body.checkout .personal{display:none}
  .payform .fld{display:block; margin:0 0 16px}
  .payform .fld > span{display:block; font-weight:700; font-size:15px; margin:0 0 6px}
  .payform .fld > span i{font-style:normal; color:var(--red)}
  .payform .fld em{display:block; font-style:normal; font-size:13.5px; opacity:.62; margin-top:5px}
  .payform input[type=text], .payform input[type=email], .payform select{
           width:100%; font-family:var(--body); font-size:16px; color:var(--ink);
           padding:11px 13px; border:1.5px solid rgba(20,19,15,.35); border-radius:var(--r);
           background:var(--white); appearance:none}
  .payform input:focus, .payform select:focus{outline:none; border-color:var(--blue);
           box-shadow:0 0 0 3px rgba(46,49,146,.16)}
  .payform .chk{display:flex; gap:11px; align-items:flex-start; margin:20px 0 18px; font-size:15px; line-height:1.5}
  .payform .chk input{flex:0 0 auto; width:20px; height:20px; margin-top:1px; accent-color:var(--blue)}
  .payform .btn{width:100%; text-align:center}
  .payform .btn[disabled]{opacity:.4; pointer-events:none}
  .payform .note{margin:14px 0 0}
  /* строка про неудачную отправку — заметная, но не пугающая */
  .payform .formfail{margin:12px 0 0; padding:10px 13px; border-radius:var(--r);
                     background:rgba(214,40,40,.09); border-left:3px solid var(--red)}
  /* ловушка для роботов: людям не видна, боты её заполняют и отсеиваются */
  .payform .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
  .okpanel{max-width:560px; margin:0 auto; border:2.5px solid var(--blue); border-radius:var(--r);
           padding:28px 26px 26px; background:var(--white)}
  .okpanel h3{font-family:var(--display); font-weight:400; font-size:30px; letter-spacing:.01em; margin:0 0 10px}
  .okpanel p{font-size:16px; line-height:1.6; margin:0 0 12px}
  @media (max-width:560px){
    .payform, .okpanel{padding:22px 18px 20px}
  }

  /* Состав модуля по неделям: слева жирная неделя, под ней уроки помельче.
     Это витрина программы — человек должен видеть, что покупает. */
  .weeks-list{list-style:none; margin:14px 0 0; padding:0}
  .weeks-list li{padding:11px 0 11px 16px; border-left:3px solid var(--yellow); margin-bottom:9px}
  .weeks-list li b{display:block; font-size:16.5px; line-height:1.35}
  .weeks-list li span{display:block; margin-top:3px; font-size:15px; line-height:1.55; opacity:.78}
  @media (max-width:560px){
    .weeks-list li b{font-size:15.5px}
    .weeks-list li span{font-size:14px}
  }

  /* живые голоса участниц. Кружок сделан под видео: когда придут кружочки из
     телеграма, вместо монограммы в .av встаёт превью и треугольник play — размер,
     сетка и отступы уже готовы, менять ничего не придётся. */
  .voices{display:grid; grid-template-columns:repeat(2,1fr); gap:22px 34px; margin-top:26px}
  .voice{display:flex; gap:16px; align-items:flex-start}
  .voice .av{flex:0 0 auto; width:74px; height:74px; border-radius:50%; overflow:hidden;
             display:flex; align-items:center; justify-content:center;
             font-family:var(--display); font-weight:400; font-size:26px; letter-spacing:.03em;
             color:var(--white); background:var(--blue); line-height:1; padding-top:3px}
  .voice .av.a2{background:var(--red)}
  .voice .av.a3{background:var(--ink)}
  .voice .av.a4{background:var(--yellow); color:var(--ink)}
  .voice p{margin:0; font-size:16px; line-height:1.55}
  .voice p b{font-family:var(--display); font-weight:400; font-size:1.2em; letter-spacing:.01em}

  /* доказательства цифрами вместо пустых скобок (не путать с .nums на странице курса) */
  .proof .big{display:block; font-family:var(--display); font-weight:400; line-height:.94;
              font-size:clamp(46px,5.6vw,70px); color:var(--blue); margin:0 0 10px}
  .proof .card.c-red .big{color:var(--red)}
  .proof .card.c-ink .big{color:var(--ink)}
  /* Bebas рисует «+» как «±» — плюс ставим шрифтом текста */
  .proof .big i{font-style:normal; font-family:var(--body); font-size:.4em; vertical-align:.62em; margin-left:3px}
  .proof p{margin:0; font-size:16px; line-height:1.55}

  /* 4. синяя «спина» вместо цветных постеров */
  .club .sec{border-top:none; padding:0}
  .club .sec > .wrap{border-left:4px solid var(--blue); padding-top:52px; padding-bottom:52px; padding-left:38px}
  .club .sec:last-of-type > .wrap{padding-bottom:56px}

  /* финал + подвал */
  .final h2{font-size:clamp(30px,3.8vw,54px)}
  footer{background:var(--ink); color:var(--white); padding:38px 0 46px; font-size:15px; line-height:1.7}
  footer a{color:var(--yellow)}
  .footrow{display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center; margin-bottom:16px}
  .footlogo{background:var(--white); border-radius:var(--r); padding:12px 16px; display:inline-flex; flex:0 0 auto}
  .footlogo img{height:56px; width:auto}
  /* данные исполнителя и контакты — требование закона «Про електронну комерцію» */
  .company{display:grid; grid-template-columns:1fr 1fr; gap:16px 34px; margin:20px 0 18px; padding:18px 0;
           border-top:1px solid rgba(255,255,255,.2); border-bottom:1px solid rgba(255,255,255,.2);
           font-size:14.5px; line-height:1.65}
  .company b{display:block; font-family:var(--display); font-weight:400; font-size:14px; letter-spacing:.07em;
             text-transform:uppercase; color:var(--yellow); margin-bottom:5px}
  .company a{color:var(--white); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35)}
  .company a:hover{border-bottom-color:var(--yellow)}
  .footlinks{display:flex; flex-wrap:wrap; gap:8px 22px; font-size:14.5px}
  .footlinks a{text-decoration:none; border-bottom:1px solid rgba(255,214,0,.45); padding-bottom:2px}
  .footlinks a:hover{border-bottom-color:var(--yellow)}
  .fab{position:fixed; right:20px; bottom:20px; z-index:50; background:var(--ink); color:var(--white);
       border-radius:40px; padding:13px 20px 13px 16px; text-decoration:none; font-weight:700; font-size:15px;
       display:flex; align-items:center; gap:10px; box-shadow:0 6px 20px rgba(0,0,0,.28); transition:background .18s}
  .fab:hover{background:var(--red)}

  /* липкая панель покупки — только на телефоне, появляется после первого экрана */
  .mobcta{position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; gap:10px; align-items:center;
          padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:var(--white);
          border-top:1.5px solid var(--ink); transform:translateY(105%); transition:transform .3s cubic-bezier(.2,.7,.3,1)}
  .mobcta.show{transform:none}
  .mobcta .btn{flex:1 1 auto; text-align:center}
  .mobcta .bot{flex:0 0 auto; width:48px; height:48px; border:1.5px solid var(--ink); border-radius:var(--r);
               display:flex; align-items:center; justify-content:center; color:var(--ink); text-decoration:none}
  .mobcta .bot:hover{background:var(--ink); color:var(--white)}

  /* окно с готовым сообщением перед переходом в телеграм.
     Телеграм не подставляет текст в личный чат — поэтому копируем за человека. */
  .tgmodal{position:fixed; inset:0; z-index:80; background:rgba(20,19,15,.72);
           display:flex; align-items:center; justify-content:center; padding:20px}
  .tgmodal[hidden]{display:none}
  .tgcard{position:relative; width:100%; max-width:530px; max-height:90vh; overflow-y:auto;
          background:var(--white); border:2px solid var(--ink); border-radius:var(--r); padding:30px 30px 26px}
  .tgcard::before{content:""; position:absolute; top:0; left:0; right:0; height:6px; background:var(--yellow)}
  .tgcard b{display:block; font-family:var(--display); font-weight:400; font-size:28px;
            text-transform:uppercase; line-height:1.05; margin-bottom:10px}
  .tgcard p{font-size:15.5px; line-height:1.55; margin:0 0 16px; opacity:.85}
  .tgtext{display:block; width:100%; font:16px/1.5 var(--body); color:var(--ink);
          background:var(--white); border:1.5px solid var(--ink); border-radius:var(--r);
          padding:13px 15px; resize:vertical}
  .tgrow{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
  .tgrow .btn{flex:1 1 auto; text-align:center}
  .tgclose{position:absolute; top:9px; right:11px; width:34px; height:34px; border:none; background:none;
           font-size:27px; line-height:1; color:var(--ink); opacity:.5; cursor:pointer}
  .tgclose:hover{opacity:1}
  .tghint{margin:12px 0 0 !important; font-weight:700; color:var(--blue); opacity:1 !important}
  .tghint[hidden]{display:none}

  /* личный контакт с Катей: не «служба поддержки», а конкретный человек.
     Портрет во весь рост карточки + значок телеграма — сразу видно, куда ведёт клик. */
  /* Карточка «напишите мне». Была в толстой чёрной рамке — фотография вставала
     в прямоугольник и блок читался тяжело. Теперь: без рамки, мягкая подложка,
     цветная полоса слева и круглый портрет. */
  .personal{display:flex; gap:24px; align-items:center; max-width:790px; margin:26px auto 0;
            border:0; border-left:5px solid var(--red); border-radius:var(--r);
            padding:20px 26px; text-decoration:none;
            background:rgba(214,40,40,.055); transition:background .18s ease}
  .personal:hover, .personal:focus-visible{background:rgba(214,40,40,.11);
            transform:none; box-shadow:none}
  .club .personal{border-left-color:var(--blue); background:rgba(46,49,146,.055)}
  .club .personal:hover, .club .personal:focus-visible{background:rgba(46,49,146,.11); box-shadow:none}
  .personal .pf{flex:0 0 auto; width:162px; height:162px; border-radius:50%; overflow:hidden}
  /* кадр обрезан заранее под квадрат (katya-round / katya-club-round) — сдвигать не нужно */
  .personal .pf img{width:100%; height:100%; object-fit:cover; display:block}
  .personal .pt{font-size:16px; line-height:1.55}
  .personal .pt b{display:block; font-family:var(--display); font-weight:400; font-size:24px;
                  text-transform:uppercase; letter-spacing:.01em; line-height:1.05; margin-bottom:8px}
  .plink{display:inline-flex; align-items:center; gap:8px; margin-top:12px;
         font-weight:700; border-bottom:2px solid var(--yellow); padding-bottom:2px}
  .plink svg{flex:0 0 auto; color:var(--blue)}

  /* ---------- юридические документы: оферта, политика ---------- */
  .doc{max-width:840px; margin:0 auto; padding:44px 28px 70px}
  .doc .back{display:inline-block; font-size:15px; font-weight:700; text-decoration:none;
             border-bottom:2px solid var(--yellow); margin-bottom:26px}
  /* строка над документом: возврат слева, переключатель языков справа */
  .docbar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
  .docbar .back{margin-bottom:20px}
  .docbar .lang{margin-bottom:20px}
  .doc h1{font-size:clamp(28px,4vw,46px); line-height:1.04; margin-bottom:10px}
  .doc .meta{font-size:15px; opacity:.7; margin-bottom:8px}
  .doc .warn{background:var(--yellow); border-radius:var(--r); padding:15px 19px;
             font-size:15.5px; line-height:1.55; margin:22px 0}
  .doc h2{font-size:clamp(20px,2.2vw,27px); line-height:1.1; margin:34px 0 12px}
  .doc h3{font-size:17px; margin:22px 0 8px; text-transform:none; letter-spacing:0;
          font-family:var(--body); font-weight:700}
  .doc p, .doc li{font-size:16px; line-height:1.62}
  .doc p{margin:0 0 11px}
  .doc ol, .doc ul{margin:0 0 11px; padding-left:22px}
  .doc li{margin-bottom:6px}
  .doc .req{border:1.5px solid var(--ink); border-radius:var(--r); padding:18px 22px; margin:20px 0}
  .doc .req p{margin:0 0 5px; font-size:15.5px}
  .doc a{color:inherit}
  @media (max-width:860px){ .doc{padding:30px 20px 56px} .doc p, .doc li{font-size:15.5px} }

  /* ссылка внутри абзаца */
  .ilink{font-weight:700; text-decoration:none; border-bottom:2px solid var(--yellow)}
  .ilink:hover{border-bottom-color:var(--blue)}

  /* финал: что человек закроет за две недели — по каждой боли, с которой он пришёл */
  .finlist{list-style:none; max-width:70ch; margin:22px auto 20px; display:grid; gap:12px; text-align:left}
  .finlist li{position:relative; padding-left:27px; font-size:17px; line-height:1.55}
  .finlist li::before{content:""; position:absolute; left:0; top:.52em; width:11px; height:11px;
                      background:var(--yellow); border-radius:1px}

  /* ---------- motion (деликатное) ---------- */
  .rv{opacity:0; transform:translateY(16px); transition:opacity .65s ease, transform .65s cubic-bezier(.2,.7,.3,1)}
  .rv.in{opacity:1; transform:none}
  /* Боковой въезд только на широком экране. На телефоне карточка занимает
     всю ширину, и сдвиг на 38px делает страницу шире экрана — её можно
     утащить вбок. Поэтому там работает обычный въезд снизу от .rv.
     Условие стоит именно здесь, в базовом правиле: перебивать его ниже
     нельзя — запущенный переход держит своё значение и не отдаёт. */
  @media (min-width:861px){
    .rv-l{transform:translateX(-38px)}
    .rv-r{transform:translateX(38px)}
  }
  .rv-l.in,.rv-r.in{transform:none}
  /* маркер «прорисовывается» при появлении */
  .rv .hl{background-size:0% 100%; transition:background-size .75s cubic-bezier(.3,.8,.4,1) .25s}
  .rv.in .hl{background-size:100% 100%}
  @media (prefers-reduced-motion: reduce){
    .rv{transition:none; opacity:1; transform:none}
    .rv .hl{background-size:100% 100%; transition:none}
    .floaty, .vcard.in::before{animation:none}
    .vcard.in::before{transform:scaleX(1)}
    html{scroll-behavior:auto}
  }
  .static .rv{transition:none !important; opacity:1 !important; transform:none !important}
  .static .hl{background-size:100% 100% !important; transition:none !important}
  .static .floaty, .static .ticker .track2{animation:none !important}
  .static .bh-bar, .static .bh-sq, .static .rays g, .static .bulb img,
  .static .st em{animation:none !important; transform:none !important}
  .static .tool img{animation:none !important; transform:scaleX(-1) !important}
  .static .bh-black{opacity:1 !important; transition:none !important}
  @media (prefers-reduced-motion: reduce){
    .bh-bar, .bh-sq{animation:none !important; transform:none !important; opacity:1 !important}
    .bh-black{opacity:1}
    .rays g, .bulb img, .st em{animation:none !important; transform:none !important}
    .tool img{animation:none !important; transform:scaleX(-1) !important}
  }
  @media (prefers-reduced-motion: reduce){ .ticker .track2{animation:none} }
  .static .vcard::before, .static .card::before, .static .ba::before,
  .static .eyebrow::after, .static .scheme .ai::after{animation:none !important; transform:scaleX(1) !important}
  .static .graf-word{animation:none !important}

  /* ---------- mobile ---------- */
  @media (max-width:860px){
    /* На телефоне в шапке оставляем только переходы на другие страницы:
       «Программа» и «Клуб». Кнопка выбора тарифа не нужна — она и так
       всегда под пальцем в липкой полосе внизу, а место в шапке занимает. */
    .topbar .navlink{display:none}
    .topbar .navlink.keep{display:inline-block; font-size:13px; padding:6px 0; letter-spacing:.01em}
    .topbar .navlink.cross{margin-left:12px}
    .topbar .navlink.cross::before{left:-7px; height:13px}
    .topbar .navlink.cross::after{width:4px; height:4px; margin-left:5px; border-width:1.5px}
    .topbar .btn-sm{display:none}
    .topbar .wrap{gap:10px}
    .brand img{height:40px}
    .brand .sub{display:none}
    .lang a{font-size:13px; padding:6px 8px 4px}
    .hero{padding-top:30px}
    .hero-grid{grid-template-columns:1fr; gap:34px}
    h1{font-size:clamp(36px,10.4vw,56px)}
    .heroart{display:none}
    .notes{grid-template-columns:1fr}
    .quest .row{gap:12px}
    .qfig img.knight{height:64px}
    .qfig img.dragon{height:76px}
    /* путь героя разворачивается вертикально — названия этапов видны */
    .quest .row{flex-direction:column; align-items:flex-start; gap:0}
    .qfig.start{margin:0 0 6px 0}
    .qfig.end{align-self:flex-end; margin:8px 0 0 0}
    .track{width:100%; padding:6px 0}
    .track .line{left:18px; right:auto; top:0; bottom:0; width:2px; height:auto}
    .marks{flex-direction:column; align-items:flex-start; gap:14px; padding:0}
    .lvlw{flex-direction:row; align-items:center; gap:14px; width:100%}
    .lvl{width:38px; height:38px; font-size:21px; border-width:2.5px; flex:0 0 auto}
    .lvlname{text-align:left; min-height:0; font-size:15px}
    .s2{padding:40px 0 36px}
    .s2-head{grid-template-columns:1fr; gap:16px; margin-bottom:22px}
    .vframe .play{width:62px; height:62px}
    .vmeta{left:64px; bottom:14px; font-size:11px}
    .speech{font-size:16.5px}
    .vs{grid-template-columns:1fr; gap:10px}
    .tblock{padding:14px 16px 4px}
    .graf-word{margin-top:-34px; padding:0 8px}
    .withill, .tblock .withill, .withill.katya, .withill.foe{grid-template-columns:1fr; gap:12px}
    .withill.foe img{width:104px; justify-self:start; order:-1}
    /* На телефоне фото Кати идёт ПЕРЕД текстом: иначе человек упирается
       в четыре абзаца и не понимает, кто с ним разговаривает. */
    .withill.katya .photobox{order:-1; max-width:230px; margin:0 0 6px}
    .corerow .brain{width:100%}
    .corerow::after{height:22px}
    .result.hero{grid-template-columns:80px 1fr; gap:14px; padding:14px 16px 12px}
    .result.hero img{margin-top:-34px}
    .result.hero.right{grid-template-columns:1fr 88px}
    .photobox{max-width:260px; margin:0 auto}
    .withill .ill{width:128px; justify-self:end}
    .tblock .withill .ill{width:112px}
    .vcard{grid-template-columns:1fr 62px; gap:12px; padding:14px 16px}
    section{padding:44px 0}
    .grid2, .grid3, .forces, .tiers, .gcols{grid-template-columns:1fr}
    .card{padding:18px 18px}
    .ba .now, .ba .then{grid-template-columns:1fr; gap:5px; padding:13px 16px}
    .acc summary{flex-wrap:wrap; gap:4px 12px; padding:15px 0}
    .acc .weeks{width:100%}
    .eyebrow{flex-wrap:wrap; gap:10px 12px; align-items:baseline}
    .eyebrow::after{flex:1 0 100%; max-width:none; margin-top:2px}
    .poster{padding:38px 0 34px}
    .after-poster{padding-top:32px}
    .scheme{padding-top:0}
    .scheme .ai{position:static; margin-bottom:16px; font-size:13px; letter-spacing:.05em}
    .core{width:90%; padding:15px 12px 12px}
    .bus{display:none}
    .forces{grid-template-columns:1fr; gap:12px; margin-top:22px}
    .force{padding:16px 16px 14px}
    .graf-line{font-size:clamp(26px,8vw,38px); margin:18px 0 12px}
    .ticker{padding:11px 0}
    .ticker span{font-size:20px; padding:0 16px; gap:16px}
    .numbers{padding:38px 0}
    .nums{grid-template-columns:1fr 1fr; gap:18px}
    .nums div{padding-left:14px}
    .statement{padding:46px 0}
    .st-row{flex-direction:column; gap:14px}
    .st-fig{height:96px}
    .statement .sub{font-size:15.5px}
    .balist{grid-template-columns:1fr}
    .pull{font-size:22px; padding-left:16px; margin:20px 0}
    .points h3{font-size:19px}
    .step{grid-template-columns:44px 1fr; gap:14px}
    .step .n{width:38px; height:38px; font-size:25px}
    .price .big{font-size:38px}
    .fab{display:none}
    .mobcta{display:flex}
    footer{padding-bottom:118px}   /* место под липкую панель, чтобы не было белой полосы */
    .footrow{gap:12px}
    .company{grid-template-columns:1fr; gap:14px}
    .pricebox{padding:24px 18px 22px}
    .figico{width:52px}
    .fig-slot{width:52px; height:52px}
    /* клуб на телефоне */
    .bhside{display:none}
    .club .brand img{height:58px}
    .club .footlogo img{height:64px}
    .club .hero{padding:30px 0 4px}
    .cycle{grid-template-columns:1fr; gap:10px; padding-bottom:0; max-width:none}
    .cnode:nth-of-type(-n+2)::after{right:auto; left:50%; top:auto; bottom:-13px;
      border-left:6px solid transparent; border-right:6px solid transparent;
      border-top:10px solid var(--blue); border-bottom:none; transform:translateX(-50%)}
    .cloop{display:none}
    .club .sec > .wrap{padding-left:20px; padding-top:38px; padding-bottom:38px; border-left-width:3px}
    .club .hero .eyebrow{flex-wrap:nowrap; align-items:flex-start; text-align:left}
    .club .hero .eyebrow::before{margin-top:4px}
    .honest{padding:13px 48px 13px 15px; font-size:15.5px}
    .honest .excl{width:38px; right:-6px}
    .withill.katya.photo-left{grid-template-columns:1fr}
    .wins{grid-template-columns:1fr; gap:12px; margin-bottom:26px}
    .win{padding:16px 16px 17px; gap:13px}
    .win .wn{width:34px; height:34px; font-size:22px; line-height:35px}
    .qline{font-size:15.5px; padding-left:14px; margin-top:18px}
    .tgmodal{padding:14px; align-items:flex-start; padding-top:34px}
    .tgcard{padding:24px 20px 20px}
    .tgcard b{font-size:23px}
    .tgrow .btn{flex:1 1 100%}
    /* На телефоне кружок 92px читался как мелкая аватарка — человека в нём
       не разглядеть. Кладём фото сверху во всю ширину карточки, текст под ним. */
    .personal{display:block; padding:0; overflow:hidden}
    /* Кадр НЕ режем: в горизонтальном окне у Кати срезало макушку.
       Показываем снимок целиком, в его собственных пропорциях. */
    .personal .pf{width:100%; height:auto; aspect-ratio:auto; border-radius:0; display:block}
    .personal .pf img{width:100%; height:auto; object-fit:contain; object-position:center}
    .personal .pt{display:block; padding:18px 20px 20px}
    .personal .pt{font-size:15.5px}
    .personal .pt b{font-size:20px}
    .finlist li{font-size:16px; padding-left:23px}
    .subrow{gap:12px}
    .tickbig{width:54px}
    .voices{grid-template-columns:1fr; gap:18px}
    .voice .av{width:60px; height:60px; font-size:22px}
    .voice p{font-size:15.5px}
  }