/* ============================================================================
   Stellar Squad v2 — токены и первый экран
   Тема: design-system/themes/stellar-v2.json. Значения ниже берутся ОТТУДА,
   руками в компонентах цвет не пишется.
   ========================================================================= */

@font-face{font-family:Tektur;src:url(fonts/Tektur-var.woff2) format('woff2-variations');
 font-weight:400 900;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:Golos;src:url(fonts/GolosText-var.woff2) format('woff2-variations');
 font-weight:400 900;font-display:swap}

:root{
 /* --- цвет: снят с канала, k-means в Oklab. Нейтрали тёплые намеренно --- */
 --ink:oklch(0.130 0.008 52);
 --s1:oklch(0.205 0.012 50);
 --s2:oklch(0.255 0.013 48);
 --edge:oklch(0.315 0.014 45);
 --mut:oklch(0.660 0.012 50);
 --pap:oklch(0.960 0.004 60);
 --acc:oklch(0.700 0.240 322);
 --acc-ink:oklch(0.130 0.008 52);
 /* циан живёт ТОЛЬКО внутри логотипа — вторая половина расщепления */
 --logo-cyan:oklch(0.878 0.134 197);

 /* --- шкала отступов: 4 8 12 20 32 52 84 136, соседних значений нет --- */
 --sp1:4px; --sp2:8px; --sp3:12px; --sp4:20px;
 --sp5:32px; --sp6:52px; --sp7:84px; --sp8:136px;

 /* --- шкала кеглей: семь ступеней, соседних нет --- */
 --t1:13px; --t2:15px; --t3:18px;
 --t4:clamp(20px,1.6vw,22px);
 --t5:clamp(24px,2.3vw,30px);
 --t6:clamp(32px,3.6vw,46px);
 --t7:clamp(40px,7.4vw,96px);

 /* --- клетка сигнатуры --- */

 --wrap:1180px;
 --dur:160ms;
 --ease:cubic-bezier(0.25,0.46,0.45,0.94);
}
@media (max-width:860px){ :root{ --sp8:52px; --sp7:52px; } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--pap);
 font:400 var(--t2)/1.55 Golos,system-ui,sans-serif;
 font-variant-numeric:tabular-nums;
 -webkit-font-smoothing:antialiased}
a{color:inherit}
b,strong{font-weight:500}   /* без этого <b> внутри 700 даёт 900 */
h1,h2,h3,p,ul{margin:0}
ul{list-style:none;padding:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--sp4)}

/* ---------------------------------------------------------------- шапка -- */
.top{border-bottom:1px solid var(--edge)}
.top .wrap{display:flex;align-items:center;gap:var(--sp5);
 min-height:60px;padding-block:var(--sp3)}
.mark{font:700 var(--t3)/1 Tektur;font-stretch:100%;text-transform:uppercase;
 letter-spacing:.01em;text-decoration:none;white-space:nowrap;position:relative}
/* расщепление логотипа: циан слева, маджента справа — как на аватаре канала */
.mark span{position:relative;z-index:2;color:var(--pap)}
.mark::before,.mark::after{content:attr(data-w);position:absolute;inset:0;z-index:1}
.mark::before{color:var(--logo-cyan);transform:translateX(-1.5px)}
.mark::after{color:var(--acc);transform:translateX(1.5px)}
.nav{display:flex;gap:var(--sp4);margin-left:auto;
 font:500 var(--t1)/1 Golos;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.nav a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;
 text-decoration:none;transition:color var(--dur) var(--ease)}
.nav a:hover{color:var(--pap)}
.dm{font:600 var(--t2)/1 Tektur;font-stretch:85%;color:var(--acc);
 text-decoration:none;white-space:nowrap;transition:opacity var(--dur) var(--ease)}
.dm:hover{opacity:.78}
/* На узком экране меню НЕ прячется, а переезжает второй строкой и скроллится
   вбок. Гамбургер не берём: он тянет состояние и слушатель matchMedia, и старая
   версия на нём уже спотыкалась — открытое меню переживало поворот экрана. */
.top .wrap{flex-wrap:wrap}
@media (max-width:860px){
 .top .wrap{gap:var(--sp3) var(--sp4);padding-bottom:0}
 .dm{margin-left:auto}
 .nav{order:3;flex:1 0 100%;margin-left:0;gap:var(--sp3);
  font-size:12px;letter-spacing:.02em;
  overflow-x:auto;scrollbar-width:none;
  border-top:1px solid var(--edge)}
 .nav::-webkit-scrollbar{display:none}
}

/* ------------------------------------------------------------ первый экран */
.hero{position:relative;overflow:hidden;
 padding-block:var(--sp8) var(--sp7)}
.hero .wrap{position:relative;z-index:3}
/* Затемнение под колонкой текста. Одной маски на плашке мало: прожектор такой
   яркий, что даже сквозь 40 % альфы строка «отыграем в эфире» давала 3.58:1
   при норме 4.5. Замерено по пикселям, не на глаз. */
.hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
 background:linear-gradient(90deg,var(--ink) 0 30%,
   color-mix(in oklch, var(--ink) 45%, transparent) 58%, transparent 76%)}
.kicker{max-width:46ch;font:500 var(--t1)/1 Golos;letter-spacing:.14em;text-transform:uppercase;
 color:var(--mut);margin-bottom:var(--sp4)}
.h1{font:700 var(--t7)/0.94 Tektur;font-stretch:100%;text-transform:uppercase;
 letter-spacing:-.01em;max-width:14ch}
.plat{font:400 var(--t3)/1.5 Golos;color:var(--mut);margin-top:var(--sp4);max-width:52ch}
.plat b{color:var(--pap);font-weight:500}

/* ряд работы: клетка равна матчу, буква — исход */

/* вход */
.go{display:flex;gap:var(--sp4);align-items:center;flex-wrap:wrap;margin-top:var(--sp6)}
.btn{--shift:0px;position:relative;display:inline-flex;align-items:center;justify-content:center;
 gap:var(--sp2);background:var(--acc);color:var(--acc-ink);border:0;
 padding:0 var(--sp5);height:52px;min-width:236px;overflow:hidden;
 font:600 var(--t3)/1 Tektur;font-stretch:85%;text-transform:uppercase;
 letter-spacing:.02em;text-decoration:none;cursor:pointer}
.btn .lbl,.btn .arw{display:inline-flex;align-items:center;
 transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.btn .arw{position:absolute;opacity:0;transform:translateX(-14px)}
.btn:hover .lbl{transform:translateX(14px);opacity:0}
.btn:hover .arw{opacity:1;transform:translateX(0)}
.btn svg{width:19px;height:19px;fill:currentColor}
.live{display:inline-flex;align-items:center;gap:var(--sp2);
 font:400 var(--t2)/1.4 Golos;color:var(--mut)}
.live b{color:var(--pap);font-weight:500}

/* --- фон: три варианта, переключаются атрибутом на body --------------- */
.plate{position:absolute;inset:0;z-index:1;pointer-events:none}
body[data-bg="clean"] .plate{display:none}

/* CSS-текстура: полосы плёнки и дуги с аватара канала. 0 КБ */
body[data-bg="css"] .plate{
 background:
  repeating-linear-gradient(0deg,color-mix(in oklch, var(--pap) 3%, transparent) 0 1px,transparent 1px 3px),
  radial-gradient(120% 80% at 88% 18%,color-mix(in oklch, var(--acc) 9%, transparent) 0%,transparent 62%),
  radial-gradient(90% 70% at 96% 84%,color-mix(in oklch, var(--logo-cyan) 5.5%, transparent) 0%,transparent 60%);
 mask-image:linear-gradient(90deg,transparent 0 30%,#000 78%)}
body[data-bg="css"] .plate::after{content:"";position:absolute;inset:0;
 background:repeating-linear-gradient(102deg,transparent 0 58px,color-mix(in oklch, var(--pap) 4.5%, transparent) 58px 59px);
 mask-image:linear-gradient(90deg,transparent 0 44%,#000 92%)}

/* Сгенерированная фактура: ночное поле, свет только справа */
body[data-bg="img"] .plate{
 background:url(img/hero-plate.webp) right center / cover no-repeat;
 mask-image:linear-gradient(90deg,transparent 0 26%,#000 72%)}
body[data-bg="img"] .plate::after{content:"";position:absolute;inset:0;
 background:repeating-linear-gradient(0deg,color-mix(in oklch, var(--pap) 2.8%, transparent) 0 1px,transparent 1px 3px)}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{transition-duration:1ms !important;animation-duration:1ms !important}
}

/* Выбранное — бумагой, а не акцентом: пятнадцать клеток мадженты оказались
   стеной, которая забивала кнопку. Акцент остался ровно на границе выбора —
   там, где он несёт смысл «вот сколько взяли». Поймано пробой на 1440. */

/* На узком экране свет лез прямо под заголовок — маска уходит по вертикали,
   картинка живёт ниже текста. Поймано пробой на 390. */
@media (max-width:860px){
 /* На 390 строка про эфир падала ровно на прожектор: 4.03:1 при норме 4.5.
    Числа стопов подобраны по замеру, а не на глаз — см. _research-v2/contrast.py */
 .hero::after{background:linear-gradient(180deg,var(--ink) 0 26%,
   color-mix(in oklch, var(--ink) 80%, transparent) 56%,
   color-mix(in oklch, var(--ink) 62%, transparent) 78%,
   color-mix(in oklch, var(--ink) 20%, transparent) 96%, transparent 100%)}
 body[data-bg="img"] .plate{background-position:62% center;
  mask-image:linear-gradient(180deg,transparent 0 30%,#000 74%)}
 body[data-bg="css"] .plate{mask-image:linear-gradient(180deg,transparent 0 34%,#000 80%)}
}

/* =========================================================== первый экран */
.hero-grid{display:grid;gap:var(--sp6)}

/* ======================================================= лестница услуг */
.step-wrap{border-top:1px solid var(--edge);padding-block:var(--sp7)}
.sh{font:700 var(--t6)/1 Tektur;font-stretch:100%;text-transform:uppercase;letter-spacing:-.01em}

.step{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:var(--sp5);
 border-top:1px solid var(--edge);margin-top:var(--sp6)}
/* Правая половина у 01 и 02 была наполовину пуста: ✓ замер — текст занимал
   513 и 647 из 788 px. Дело не в длине текста, а в том, что у трёх ступеней
   при разном содержимом была одна раскладка. Короткие ступени сужены —
   пустота ушла ЗА рамку, и длина линии правила стала третьим сигналом веса. */
.step-s{max-width:720px}
.step-m{max-width:880px}
/* Плотность РАЗНАЯ намеренно: буст приносит больше всех и занимает больше всех */
.step-s{padding-block:var(--sp5)}
.step-m{padding-block:var(--sp6)}
.step-l{padding-block:var(--sp7)}
@media (max-width:860px){
 .step{grid-template-columns:1fr;gap:var(--sp4)}
 .step-s,.step-m{padding-block:var(--sp5)}
 .step-l{padding-block:var(--sp6)}
}
.step-n{font:600 var(--t1)/1 Tektur;font-stretch:75%;letter-spacing:.14em;color:var(--mut)}
/* Важность ступени читается тремя вещами разом: кегль названия, кегль цены
   и вертикальный воздух. Одного номера 01/02/03 для этого мало. */
.step-t{margin-top:var(--sp3);font:700 var(--t4)/1.1 Tektur;font-stretch:100%;text-transform:uppercase}
.step-m .step-t{font-size:var(--t5)}
.step-l .step-t{font-size:var(--t6);line-height:1.02}
.step-p{margin-top:var(--sp2);font:600 var(--t3)/1.2 Tektur;font-stretch:85%;color:var(--pap)}
.step-m .step-p{font-size:var(--t4)}
.step-l .step-p{font-size:var(--t5)}
.step-s .step-d{max-width:46ch}
.step-l .step-d{max-width:56ch;font-size:var(--t4)}
.step-p span{font:400 var(--t2)/1 Golos;color:var(--mut)}
.step-d{max-width:58ch;font-size:var(--t3);color:var(--mut)}
.step-d b{color:var(--pap);font-weight:500}
/* у подписки клеток нет намеренно: покупается не счёт дел, а месяц доступа */
.btn-s{height:46px;min-width:200px;margin-top:var(--sp4);font-size:var(--t2)}
.also{display:flex;flex-wrap:wrap;gap:var(--sp2) var(--sp4);margin-top:var(--sp5);
 font-size:var(--t2);color:var(--mut)}
.also li{border:1px solid var(--edge);padding:8px var(--sp3)}
.also b{color:var(--pap);font-weight:500}

/* ====================================================== доказательство */
.proof{border-top:1px solid var(--edge);padding-block:var(--sp7)}
.pr{display:grid;gap:var(--sp5);margin-top:var(--sp6);padding-top:var(--sp6);
 border-top:1px solid var(--edge)}
.pr:first-of-type{border-top:0;padding-top:0}
.pr-t{font:700 var(--t4)/1.1 Tektur;font-stretch:100%;text-transform:uppercase}
.pr-d{margin-top:var(--sp3);max-width:54ch;font-size:var(--t2);color:var(--mut)}
.pr-d b{color:var(--pap);font-weight:500}

/* сетка кадров закрытых уикендов */
/* ═══ раскладка кадров: два варианта, переключаются data-proof на body ═══
   Причина: ✓ замер 12.09 — кадры 372 px, скриншоты чата 560 px, то есть чат
   крупнее в 1.51 раза по ширине и втрое по площади. Приоритет был перевёрнут:
   буст главный товар, а его доказательство еле видно. Чат тоже уменьшен,
   но НЕ ниже 450 px: на 300 его текст перестаёт читаться, а весь смысл этих
   кадров именно в читаемом сообщении. */
.slots{display:grid;gap:var(--sp5) var(--sp4)}

/* А · первый крупным во всю ширину, два под ним вполовину */
body[data-proof="wide-first"] .slots{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-proof="wide-first"] .slots>li:first-child{grid-column:1 / -1}

/* Б · горизонтальная прокрутка, кадры фиксированной ширины */
body[data-proof="scroll"] .slots{display:flex;gap:var(--sp4);overflow-x:auto;
 scroll-snap-type:x mandatory;padding-bottom:var(--sp3);
 scrollbar-color:var(--edge) transparent}
body[data-proof="scroll"] .slots>li{flex:0 0 660px;max-width:88vw;scroll-snap-align:start}

@media (max-width:860px){
 body[data-proof="wide-first"] .slots{grid-template-columns:1fr}
 body[data-proof="scroll"] .slots>li{flex:0 0 86vw}
}

/* отзывы: настоящие кадры, ники закрыты мозаикой */
.otz{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),450px));
 justify-content:start;gap:var(--sp4)}
.otz figure{margin:0}
.otz img{display:block;width:100%;height:auto;border:1px solid var(--edge)}
.otz figcaption{margin-top:var(--sp3);font:500 var(--t1)/1.4 Golos;
 letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}

/* ============================================================== вопросы */
.qa{border-top:1px solid var(--edge);padding-block:var(--sp6)}
/* Тринадцать вопросов развёрнутыми занимали полстраницы. Аккордеон на
   родных details: состояние держит браузер, скрипта не нужно. Общий name
   закрывает предыдущий вопрос при открытии следующего — список не растёт
   под руками. Одна колонка, не две: раскрытый ответ во второй колонке
   толкает соседний, и строки перестают совпадать. */
.qs{margin-top:var(--sp6);border-top:1px solid var(--edge)}
.q{border-bottom:1px solid var(--edge)}
.q>summary{display:flex;align-items:baseline;justify-content:space-between;
 gap:var(--sp4);padding:var(--sp4) 0;cursor:pointer;list-style:none;
 font:600 var(--t3)/1.35 Tektur;font-stretch:85%;color:var(--pap);
 transition:color var(--dur) var(--ease)}
.q>summary::-webkit-details-marker{display:none}
.q>summary:hover{color:var(--acc)}
.q>summary:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
/* Плюс, повёрнутый в крест: одна фигура на оба состояния, без второй иконки */
.q>summary::after{content:"+";flex:0 0 auto;line-height:1;
 font:400 var(--t4)/1 Tektur;color:var(--mut);
 transition:transform var(--dur) var(--ease),color var(--dur) var(--ease)}
.q[open]>summary{color:var(--pap)}
.q[open]>summary::after{transform:rotate(45deg);color:var(--acc)}
.q p{margin:0 0 var(--sp5);max-width:64ch;font:400 var(--t2)/1.6 Golos;
 color:var(--mut)}
.q p a{color:var(--acc);text-decoration:none}
.q p a:hover{text-decoration:underline}
/* Раскрытие высотой: до interpolate-size анимировать auto было нечем, и
   вместо этого держали max-height наугад. Где не поддержано — открывается
   мгновенно, что тоже верно. */
@supports (interpolate-size:allow-keywords){
 :root{interpolate-size:allow-keywords}
 .q::details-content{height:0;overflow:hidden;
  transition:height var(--dur) var(--ease),content-visibility var(--dur) allow-discrete}
 .q[open]::details-content{height:auto}
}
.q-more{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp4) var(--sp6);
 margin-top:var(--sp6)}
.q-more p{max-width:46ch;font:400 var(--t2)/1.6 Golos;color:var(--mut)}

/* ============================================================= контакты */
.ct{border-top:1px solid var(--edge);padding-block:var(--sp6) var(--sp5)}
.ct-main .ct-v{font-size:var(--t4);color:var(--acc)}
.ct-foot{margin-top:var(--sp5);max-width:64ch;font-size:var(--t1);color:var(--mut)}
@media (max-width:600px){ .ct-k{flex:1 0 100%} .ct-list li{gap:var(--sp1)} }

.step-go{margin-top:var(--sp4);font-size:var(--t2)}
.step-go a{color:var(--mut);text-decoration:none;border-bottom:1px solid var(--edge);
 padding-bottom:3px;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.step-go a:hover{color:var(--pap);border-color:var(--mut)}

/* ============================================ ряд работы: щит = один матч */
/* На 390 буква ушла бы в 9 px — там щит работает заливкой, как в самой игре.
   Смысл не теряется: залитых столько же, сколько побед. */

/* настоящий кадр рядом с ещё не присланными слотами */
.shot{padding:0;border:0;background:transparent}
.shot figure{margin:0}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--edge)}
.shot figcaption{display:flex;flex-wrap:wrap;gap:var(--sp2) var(--sp3);align-items:baseline;
 margin-top:var(--sp3);font:500 var(--t1)/1.4 Golos;letter-spacing:.08em;text-transform:uppercase}
.shot figcaption b{font-family:Tektur;font-stretch:75%;font-weight:600;font-size:var(--t2);color:var(--pap)}
.shot figcaption span{color:var(--mut)}

/* ── эфиры: человек должен узнать о них ДО подвала ─────────────────────── */
.air-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp2) var(--sp4);
 margin-top:var(--sp5);padding-top:var(--sp4);border-top:1px solid var(--edge)}
.air-line b{font:600 var(--t3)/1.3 Tektur;font-stretch:85%;color:var(--pap)}
.air-line span{font-size:var(--t2);color:var(--mut)}
.air-line a{color:var(--mut);text-decoration:none;border-bottom:1px solid var(--edge);
 padding-bottom:2px;font:500 var(--t1)/1.4 Golos;letter-spacing:.04em;
 transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.air-line a:hover{color:var(--pap);border-color:var(--mut)}

/* ── куда писать: три разные вещи с разной важностью ───────────────────── */
.ct-main{display:block;max-width:640px;border:1px solid var(--edge);padding:var(--sp5)}
.ct-main .ct-k{display:block;flex:none;margin-bottom:var(--sp3)}
.ct-main .ct-v{font:700 var(--t6)/1 Tektur;font-stretch:100%;color:var(--acc);
 text-transform:none;letter-spacing:-.01em}
.ct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
 gap:var(--sp5) var(--sp6);margin-top:var(--sp6);max-width:640px}
.ct-grid h3{font:500 var(--t1)/1.4 Golos;letter-spacing:.12em;text-transform:uppercase;
 color:var(--mut);margin-bottom:var(--sp3)}
.ct-grid ul{display:grid;gap:var(--sp2)}
.ct-grid a{font:600 var(--t2)/1.5 Tektur;font-stretch:85%;color:var(--pap);text-decoration:none;
 transition:color var(--dur) var(--ease)}
.ct-grid a:hover{color:var(--acc)}
.ct-grid .why{margin-top:var(--sp2);font:400 var(--t1)/1.4 Golos;color:var(--mut)}
.ct-ad{margin-top:var(--sp5);max-width:52ch;font-size:var(--t1);color:var(--mut)}
.ct-ad a{color:var(--mut)}

/* ── о нас ─────────────────────────────────────────────────────────────
   Три слоя: абзацы, строка показателей, отзывы. Показатели набраны Tektur'ом
   и опущены на общую линию сетки — это не карточки: ни рамок по кругу, ни
   фона, только верхняя черта, как у строки таблицы. */
.about{border-top:1px solid var(--edge);padding-block:var(--sp6)}
.ab-say{max-width:68ch;margin-top:var(--sp5)}
.ab-lead{font:500 var(--t4)/1.4 Tektur;font-stretch:85%;color:var(--pap);
 letter-spacing:-.005em}
.ab-p{font:400 var(--t3)/1.6 Golos;color:var(--mut);margin-top:var(--sp4)}
.ab-p span{color:inherit}

/* Не auto-fit: при четырёх показателях он даёт на средних ширинах 3+1 —
   ряд с дырой справа. Два шага ровнее: 4 в строку от 900 px, 2×2 ниже. */
.nums{display:grid;gap:var(--sp4) var(--sp5);margin-top:var(--sp6);
 grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.nums{grid-template-columns:repeat(4,1fr)}}
.nums li{border-top:1px solid var(--edge);padding-top:var(--sp3)}
.nums b{display:block;font:700 var(--t5)/1 Tektur;font-stretch:85%;
 color:var(--pap);letter-spacing:-.02em;white-space:nowrap}
/* «13–15/15»: знаменатель тише и мельче — иначе четвёртый показатель
   зрительно тяжелее трёх остальных и строка теряет ровность. */
.nums b i{font-style:normal;font-size:.5em;color:var(--mut);letter-spacing:0}
.nums span{display:block;margin-top:var(--sp2);font:400 var(--t2)/1.35 Golos;
 color:var(--mut)}

/* ── что говорят клиенты ───────────────────────────────────────────────── */
.tst{margin-top:var(--sp7);padding-top:var(--sp6);border-top:1px solid var(--edge)}
.tst-lead{max-width:56ch;margin-top:var(--sp4);font:400 var(--t3)/1.5 Golos;
 color:var(--mut)}
.tst-lead b{color:var(--pap);font-weight:500}
.tst-note{max-width:52ch;margin-top:var(--sp2);font:400 var(--t1)/1.4 Golos;
 color:var(--mut)}
.tst-shots{display:grid;gap:var(--sp4);margin-top:var(--sp5);
 grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
@media (min-width:900px){.tst-shots{grid-template-columns:repeat(3,1fr)}}
/* Кадры разной высоты: без этого подписи встают лесенкой — каждая под своим
   кадром. Колонка на всю высоту строки прижимает подписи к общей линии. */
.tst-shots figure{margin:0;display:flex;flex-direction:column;height:100%}
.tst-shots figcaption{margin-top:auto;padding-top:var(--sp3)}
.tst-shots img{display:block;width:100%;height:auto;border:1px solid var(--edge)}
.tst-shots figcaption{font:500 var(--t1)/1.4 Golos;
 letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.tst-after{max-width:64ch;margin-top:var(--sp5);font:400 var(--t3)/1.5 Golos;
 color:var(--mut)}

/* контакты внутри «Заказать»: заголовок ступенью ниже секции */
.ct-h{margin-top:var(--sp7);padding-top:var(--sp6);border-top:1px solid var(--edge)}