/* ============================================================
   ЖИВОЙ ИИ-АУДИТ РАБОЧИХ ЗАДАЧ — практикум 20.08.2026
   Визуальный язык: настоящая бумага. Папка, скрепки, зажим, скотч и
   наклейка-огонь — фотографии (assets/paper/*.webp), а не рисунки.
   В файле лежит предмет с альфой, обрезанный по своим границам, — поэтому
   его можно класть куда угодно, в том числе внутрь повёрнутых карточек.
   Формат именно webp: палитровый PNG рвал мягкие полупрозрачные края
   в ступеньки (см. README).
   Брейкпоинты: база >=1180, <=1179, <=899, <=639.
   ============================================================ */

/* ---------- токены ---------- */
:root{
  --sand:#f4ead9;
  --sand-2:#efe1c8;
  --paper:#fffdf6;
  --paper-2:#fff8e9;
  --ink:#231e1a;
  --ink-2:#4d443b;
  --ink-3:#6d6156;
  --terra:#b6482c;      /* основной акцент */
  --hot:#dd5a17;        /* кнопки */
  --ochre:#d3a24b;      /* шкалы, маркер */
  --line:rgba(35,30,26,.14);
  --ease:cubic-bezier(.22,1,.36,1);
  /* Ширина страницы задаётся тремя величинами и одинакова во всех секциях:
     --edge   — поле папки первого экрана от края окна,
     --gutter — внутреннее поле папки,
     --page   — ширина самого контента на широких экранах.
     .wrap повторяет эту сумму, поэтому текст любой секции стоит ровно
     по краям листов первого экрана. Меняешь одно — проверь оба места. */
  --edge:clamp(8px,1.6vw,30px);
  --gutter:clamp(14px,1.8vw,34px);
  --page:1560px;
  /* Один вертикальный отступ на все секции — и на обычные (.wrap), и на экраны
     с папкой (.hero-sec). Раньше папка считала свои поля отдельно, поэтому
     промежутки между блоками гуляли.
     ВАЖНО: это поле ОДНОЙ секции, а промежуток между соседними блоками — два
     таких поля. Отсюда числа: 45px даёт 90px на десктопе, 30px — 60px
     на телефоне. Прежние 104px складывались в 208px, и страница пустовала. */
  --sec-pad:clamp(30px,3.6vw,45px);
  /* волокно бумаги — подмешивается к листам через background-blend-mode */
  --fiber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.32'/%3E%3C/svg%3E");
  /* тень настоящего листа: контактная + мягкая + дальняя */
  --sh-paper:0 1px 1px rgba(60,40,20,.11), 0 3px 5px rgba(60,40,20,.08),
             0 12px 24px rgba(70,45,20,.12), 0 28px 56px rgba(70,45,20,.10);
  --sh-card:0 1px 1px rgba(60,40,20,.09), 0 6px 14px rgba(70,45,20,.09),
            0 18px 38px rgba(70,45,20,.09);
}

/* ---------- база ---------- */
*{ box-sizing:border-box; margin:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  background:var(--sand); color:var(--ink);
  font-family:'Manrope',Arial,sans-serif; -webkit-font-smoothing:antialiased;
  padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right);
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
ul, ol{ list-style:none; padding:0; margin:0; }
/* Одно слово на последней строке — брак вёрстки. balance выравнивает длину
   строк в заголовках, pretty не даёт абзацу закончиться коротким висяком.
   Правило общее на всю страницу, чтобы про него не забывали в новых блоках. */
h1, h2, h3, .h2, .gift-t, .gifts2-t, .about-lead-label, .about-card-label,
.tar-name, .sp-name, .who h3, .pain-q, .research-content h3, .gov-card h3{ text-wrap:balance; }
p, li, dd, figcaption{ text-wrap:pretty; }

/* бумажная секция: тёплый фон + линовка + зерно */
.sec{ position:relative; background:var(--sand); }
.sec::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:9;
  mix-blend-mode:multiply; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sec > *{ position:relative; z-index:1; }
.sec.paper::before{ content:""; position:absolute; inset:0; z-index:0;
  background:
    repeating-linear-gradient(to bottom, transparent 0 33px, rgba(35,30,26,.055) 33px 34px),
    radial-gradient(150% 120% at 50% 35%, transparent 58%, rgba(125,80,35,.09) 100%); }
.sec.tint{ background:var(--sand-2); }

.wrap{ max-width:calc(var(--page) + 2 * (var(--edge) + var(--gutter))); margin-inline:auto;
  padding:var(--sec-pad) calc(var(--edge) + var(--gutter)); }
.nw{ white-space:nowrap; }

/* ---------- типографика ---------- */
.h2{ font-weight:800; text-transform:uppercase; letter-spacing:-.02em; line-height:1.0;
  font-size:clamp(26px,3.6vw,54px); color:var(--ink); text-wrap:balance; }
.h2-row{ display:flex; align-items:flex-end; gap:clamp(14px,2vw,28px); flex-wrap:wrap;
  margin-bottom:clamp(26px,3.4vw,50px); }

/* Шрифт на странице ровно один — Manrope. Роль «технической» подписи играют
   не гарнитура, а размер, вес и разрядка (см. .eyebrow, .date, .pg-lead). */

/* маркер: косая плашка из трёх фонов — переносится по строкам */
.mk{ display:inline; color:var(--terra); padding-inline:.19em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  background:
    linear-gradient(to bottom left, rgba(182,72,44,.22) 50%, transparent 50%) left center / .17em .98em no-repeat,
    linear-gradient(to bottom left, transparent 50%, rgba(182,72,44,.22) 50%) right center / .17em .98em no-repeat,
    linear-gradient(rgba(182,72,44,.22), rgba(182,72,44,.22)) center / calc(100% - .34em) .98em no-repeat; }
.hl{ display:inline; font-weight:700; color:var(--ink); padding-inline:.14em;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  background:
    linear-gradient(to bottom left, rgba(211,162,75,.55) 50%, transparent 50%) left center / .13em 1.1em no-repeat,
    linear-gradient(to bottom left, transparent 50%, rgba(211,162,75,.55) 50%) right center / .13em 1.1em no-repeat,
    linear-gradient(rgba(211,162,75,.55), rgba(211,162,75,.55)) center / calc(100% - .26em) 1.1em no-repeat; }

/* ============================================================
   ФОТОПРЕДМЕТЫ (assets/paper/*.webp)
   Фон у снимков вырезан, предметы лежат в webp с альфой и обрезаны
   по своим границам — поэтому позиционируются без поправок на
   пустые поля кадра: translateY(-50%) кладёт ровно половину
   предмета за край листа. Тень рисуем drop-shadow: в кадре она
   была слишком светлой и ушла вместе с фоном.
   ============================================================ */
.ph{ position:absolute; z-index:6; pointer-events:none;
  filter:drop-shadow(0 3px 5px rgba(85,58,26,.34)); }
.ph--clips{ width:clamp(40px,4.2vw,62px); }    /* связка скрепок */
.ph--bull{ width:clamp(62px,6.6vw,96px); }     /* зажим-бульдог */
/* обёртка для предмета, который лежит поверх повёрнутой карточки
   и не должен крутиться вместе с ней */
.pinned{ position:relative; }

/* Картонной подложки под тарифом «БИЗНЕС» больше нет: с тех пор как карточка
   стала тёмной, бежевый картон под ней читался лишним слоем. Стили папки
   удалены вместе с ней — на странице она была в единственном месте. */

/* ---------- бумажные объекты ---------- */
.sheet{ position:relative; border-radius:3px; box-shadow:var(--sh-paper);
  background-color:var(--paper); background-image:var(--fiber); background-blend-mode:multiply; }

/* ---------- врезка ----------
   Одна плашка на все светлые врезки страницы: тёплая заливка акцентом и
   оранжевая отбивка слева. Раньше их было две — на первом экране золотистая
   и без скруглений, в программе розоватая и со скруглениями. Приём один и
   тот же, а выглядел по-разному, и это читалось как случайность.
   Тёмный собрат этой врезки — вывод в блоке вопросов и плашка подарков:
   там фон тёмный, но отбивка слева та же. */
.note{ border-radius:clamp(3px,.4vw,6px);
  background:rgba(182,72,44,.085); border-left:4px solid var(--hot);
  padding:clamp(16px,1.9vw,26px) clamp(18px,2.2vw,30px); }

/* ---------- кнопка ---------- */
.cta{ display:inline-block; text-align:center; background:var(--hot); color:#fff8ee; text-decoration:none;
  font-weight:800; text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(14px,1.5vw,18px); padding:1.25em 2.9em; min-height:60px; cursor:pointer; border:0; border-radius:4px;
  font-family:'Manrope',Arial,sans-serif; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 1px 2px rgba(120,45,10,.26), 0 10px 22px rgba(221,90,23,.22), 0 20px 40px rgba(221,90,23,.16);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease); }
.cta:hover{ transform:translateY(-2px); box-shadow:0 1px 2px rgba(120,45,10,.28), 0 14px 28px rgba(221,90,23,.28), 0 26px 48px rgba(221,90,23,.18); }
.cta:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.cta--ghost{ background:transparent; color:var(--ink); border:2px solid var(--ink); box-shadow:none; }
.cta--ghost:hover{ background:var(--ink); color:var(--paper); box-shadow:none; }

/* ---------- дата ---------- */
.date{ display:inline-flex; align-items:center; gap:.55em;
  font-weight:700; font-size:clamp(12px,1.15vw,14.5px); letter-spacing:.06em; color:var(--terra);
  border:1.5px dashed rgba(182,72,44,.5); border-radius:999px; padding:.5em 1em; }
.date .dot{ width:.55em; height:.55em; border-radius:50%; background:var(--hot); box-shadow:0 0 0 0 rgba(221,90,23,.55);
  animation:pulse 2.4s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 .7em rgba(221,90,23,0); } 100%{ box-shadow:0 0 0 0 rgba(221,90,23,0); } }
@media (prefers-reduced-motion:reduce){ .date .dot{ animation:none; } }

.eyebrow{ font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  font-size:clamp(11px,1.05vw,13px); color:var(--ink-3); }

/* ---------- появление при скролле ---------- */
.js .rv{ opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:var(--rvd,0s); }
.js .rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .rv{ opacity:1 !important; transform:none !important; transition:none !important; } }

/* ============================================================
   ПЕРВЫЙ ЭКРАН
   Папка нарисована стилями, а не картинкой: снимок не тянулся
   на широкие экраны. Форма — прямоугольник с язычком слева
   сверху, фактура крафта — тот же --fiber плюс мягкий градиент,
   тень многослойная. Внутри лежат два листа: слева оффер
   с кнопкой, справа — что человек получит.
   ============================================================ */
/* Язычок папки торчит выше её края, поэтому верхнее поле — отступ секции плюс
   высота язычка: тогда до соседнего блока остаётся ровно --sec-pad, как везде. */
.hero-sec{ --tab:clamp(20px,2.3vw,38px); --kraft:#d8c19a;
  padding:calc(var(--tab) + var(--sec-pad)) 0 var(--sec-pad); }
/* первому экрану столько воздуха сверху не нужно — над ним край страницы */
#hero{ padding-top:calc(var(--tab) + clamp(18px,2.2vw,36px)); }

.hero-folder{ position:relative; margin-inline:var(--edge);
  border-radius:clamp(10px,1.1vw,16px);
  padding:clamp(20px,2.4vw,42px) var(--gutter) clamp(30px,3.4vw,58px);
  background-color:var(--kraft);
  background-image:var(--fiber), linear-gradient(176deg, #e0cba6 0%, #d9c29b 38%, #d3ba91 100%);
  background-blend-mode:multiply, normal;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(120,85,40,.18),
             0 2px 4px rgba(110,75,30,.14), 0 18px 34px rgba(110,75,30,.18),
             0 40px 70px rgba(110,75,30,.14); }
/* язычок папки: перекрывает верхний край на 16px, поэтому шва не видно */
.hero-folder-tab{ position:absolute; z-index:0; top:calc(-1 * var(--tab));
  left:clamp(16px,3vw,72px); width:clamp(130px,19vw,300px); height:calc(var(--tab) + 16px);
  border-radius:clamp(8px,.9vw,13px) clamp(8px,.9vw,13px) 0 0;
  background-color:var(--kraft);
  background-image:var(--fiber), linear-gradient(180deg, #e4d0ad 0%, #e0cba6 100%);
  background-blend-mode:multiply, normal;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 -4px 12px rgba(110,75,30,.16); }
.hero-inner{ position:relative; z-index:1; max-width:var(--page); margin-inline:auto; }

/* два листа в папке: колонки почти равные, зазор маленький */
.hero-grid{ display:grid; grid-template-columns:minmax(0,68fr) minmax(0,32fr);
  gap:clamp(12px,1.4vw,26px); align-items:stretch; }
.hero-col{ display:flex; }

.hero-sheet{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column;
  border-radius:clamp(4px,.5vw,7px); box-shadow:var(--sh-paper);
  background-color:var(--paper); background-image:var(--fiber); background-blend-mode:multiply;
  padding:clamp(26px,3.2vw,54px) clamp(22px,3vw,52px) clamp(28px,3.4vw,54px); }

.hero-head{ display:flex; align-items:center; gap:clamp(10px,1.4vw,18px); flex-wrap:wrap; }
/* Строки заголовка разбиты вручную (.ln), поэтому text-wrap:balance ему не
   положен — он мешает браузеру держать заданную разбивку. Кегль подобран так,
   чтобы самая длинная строка укладывалась в лист: 12.9em при ширине колонки
   0.68 листа. Больше — начнёт переноситься. */
.h1{ margin-top:clamp(16px,1.9vw,30px); font-weight:800; text-transform:uppercase;
  font-size:clamp(28px,4.35vw,70px); letter-spacing:-.026em; line-height:.96; color:var(--ink); }
.h1 .ln{ display:block; }
.h1 .accent{ color:var(--terra); }
/* подчёркивание маркером под словом ЖИВОЙ */
.uline{ position:relative; display:inline-block; }
.uline::after{ content:""; position:absolute; left:-.04em; right:-.04em; bottom:-.06em; height:.19em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9 C40 3 70 12 104 6 C138 1 170 10 198 5' fill='none' stroke='%23dd5a17' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat; }

/* строка «присылайте задачу» */
/* заливку, отбивку и поля даёт общий класс .note */
.fire{ display:grid; grid-template-columns:auto 1fr; gap:clamp(14px,1.6vw,22px); align-items:center;
  margin-top:clamp(20px,2.4vw,36px); }
.fire-ico{ width:clamp(34px,3.6vw,48px); height:auto; flex:0 0 auto; margin-top:-.1em;
  filter:drop-shadow(0 3px 5px rgba(85,58,26,.22)); }
.fire p{ font-size:clamp(14px,1.25vw,17px); line-height:1.55; font-weight:600; color:var(--ink); }

/* кнопка прижата к низу листа — встаёт на одну линию с низом правого листа */
.hero-cta{ display:flex; align-items:center; gap:clamp(14px,2vw,28px); flex-wrap:wrap;
  margin-top:auto; padding-top:clamp(22px,2.8vw,40px); }

/* ---------- правый лист: что человек получит ---------- */
.gifts-panel{ position:relative; z-index:2; }
.gift-card{ position:relative; flex:1; display:flex; flex-direction:column;
  border-radius:clamp(4px,.5vw,7px); box-shadow:var(--sh-paper);
  background-color:var(--paper); background-image:var(--fiber); background-blend-mode:multiply;
  padding:clamp(26px,3vw,50px) clamp(22px,2.6vw,44px) clamp(18px,2vw,30px); }
/* зажим держит правый лист: единственный предмет, оставленный фотографией —
   он фиксированного размера и от растягивания не страдает */
.gift-clip{ top:0; right:11%; transform:translateY(-52%) rotate(2deg); }
.gift-t{ font-weight:800; color:var(--terra); font-size:clamp(16px,1.5vw,22px); line-height:1.22;
  letter-spacing:-.016em; }
.gift-list{ --gift-fs:clamp(14px,1.18vw,17px); --gift-lh:1.45;
  margin-top:clamp(18px,2.2vw,32px); margin-bottom:clamp(16px,2vw,28px); flex:1;
  display:flex; flex-direction:column; justify-content:flex-start; }
/* колонка номера фиксирована: иначе «01» и «03» дают разную ширину и текст
   пунктов встаёт по разным вертикалям */
/* Номер центрируется по первой строке текста: его бокс равен высоте одной
   строки, а внутри цифра стоит по центру. У пункта в одну строку номер
   получается ровно посередине текста, у многострочного — по первой строке. */
.gift-list li{ display:grid; grid-template-columns:clamp(34px,3.2vw,50px) minmax(0,1fr);
  column-gap:clamp(10px,1.2vw,18px); align-items:start;
  padding:clamp(16px,1.9vw,26px) 0;
  border-top:1px solid rgba(35,30,26,.14); }
.gift-n{ display:flex; align-items:center; min-height:calc(var(--gift-fs) * var(--gift-lh));
  font-weight:800; font-size:clamp(19px,1.8vw,26px); line-height:1; color:var(--terra);
  letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.gift-list p{ font-size:var(--gift-fs); line-height:var(--gift-lh); font-weight:600; color:var(--ink); }
/* сумма выделена только весом и цветом — размер как у остального текста */
.amount{ font-weight:800; color:var(--hot); white-space:nowrap; }
/* штрихкод остался отметкой документа, но в углу и вполсилы */
.bars{ width:clamp(64px,6.4vw,96px); height:13px; opacity:.35; align-self:flex-end;
  margin-top:auto;
  background:repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 6px, var(--ink) 6px 8px, transparent 8px 13px); }

/* ============================================================
   БОЛЬ — «у меня эти проблемы → вот что я получу».
   Всё живёт на одном белом листе: сверху два вопроса на светлых
   плашках, под ними тёмная строка ответа с оранжевой отбивкой.
   Фон секции остаётся бумажным с линовкой — смены тона нет.
   ============================================================ */
.pain{ position:relative; border-radius:clamp(4px,.5vw,8px); box-shadow:var(--sh-paper);
  background-color:var(--paper); background-image:var(--fiber); background-blend-mode:multiply;
  padding:clamp(24px,2.8vw,44px); }
/* наклейка-вопрос присела на верхний правый угол листа */
.pain-sticker{ position:absolute; z-index:3; top:0; right:clamp(18px,3vw,58px);
  width:clamp(52px,5.4vw,86px); height:auto; transform:translateY(-46%) rotate(9deg);
  filter:drop-shadow(0 4px 7px rgba(85,58,26,.26)); }

.pain-qs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(14px,1.6vw,26px); }
/* Вопросы лежат в той же врезке, что и остальные акценты страницы (.note):
   отдельной бежевой плашки больше нигде нет, и она читалась как чужая.
   Номер набран мелко и разрядкой: раньше в блоке всё было крупным, и было
   непонятно, что здесь главное. */
.pain-q{ font-size:clamp(17px,1.72vw,25px); font-weight:700; line-height:1.26;
  letter-spacing:-.018em; color:var(--ink); }
.pain-n{ display:block; font-weight:800; text-transform:uppercase; letter-spacing:.2em;
  font-size:clamp(11px,1.05vw,13px); color:var(--terra); margin-bottom:.9em; }

/* ответ: тёмная строка на том же листе, оранжевая отбивка — единственный акцент */
.pain-answer{ margin-top:clamp(14px,1.6vw,26px); border-radius:clamp(3px,.4vw,6px); overflow:hidden;
  background:var(--ink); border-left:4px solid var(--hot); }
.pain-answer p{ padding:clamp(18px,2.1vw,30px) clamp(20px,2.4vw,36px);
  max-width:88ch; color:#f3e8da;
  font-size:clamp(14.5px,1.28vw,18px); line-height:1.5; font-weight:600; }
.pain-answer .hl{ background:none; padding:0; color:#f7a072; font-weight:800; }

/* ============================================================
   ЧТО БУДЕТ В ЭФИРЕ — один лист вместо россыпи кусков.
   Прежняя раскладка (лид, «3» и список 01–06 порознь на голой
   бумаге) читалась как три чужих блока и растягивала секцию почти
   на два экрана. Теперь всё лежит на одном листе, а список идёт
   в две колонки — высота падает вдвое, а горизонтальные линейки
   и вертикальная отбивка посередине держат его как таблицу
   в печатной программе.
   ============================================================ */
.prog{ position:relative; border-radius:clamp(4px,.5vw,8px); box-shadow:var(--sh-paper);
  background-color:var(--paper); background-image:var(--fiber); background-blend-mode:multiply;
  padding:clamp(24px,3vw,52px); }
/* лист держит одна скрепка справа. Зажим-бульдог слева убран: два разных
   предмета на одном крае спорили друг с другом, да и зажим уже занят
   на первом экране и в финальном блоке. */
.prog-clips{ top:0; right:clamp(20px,4vw,74px); transform:translateY(-44%) rotate(13deg); }

/* Линии под лидом здесь нет намеренно: колонки и так разделены воздухом,
   а линия просто ради линии ничего не разграничивала. */
.prog-top{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(24px,3.4vw,60px); align-items:stretch;
  padding-bottom:clamp(26px,3vw,46px); }
/* лид занимает свою колонку целиком — ограничение по ширине оставляло
   его тонкой лентой рядом с пустотой */
.prog-lede{ font-size:clamp(18px,1.8vw,27px); line-height:1.38; font-weight:600;
  letter-spacing:-.014em; color:var(--ink); }

/* главный акцент секции. Крупная цифра сама по себе не читалась как часть
   фразы, поэтому теперь укрупнены первые два слова самого предложения —
   текст ТЗ при этом не тронут, «Три» осталось словом, а не цифрой. */
/* заливку, отбивку и поля даёт общий класс .note */
.prog-three{ display:flex; align-items:center; }
.prog-three p{ font-size:clamp(14px,1.2vw,17px); line-height:1.55; color:var(--ink-2);
  font-weight:500; }
.prog-three-lead{ display:block; font-size:clamp(28px,3.1vw,46px); font-weight:800;
  color:var(--terra); letter-spacing:-.03em; line-height:1; margin-bottom:.32em; }

/* «А ещё вы увидите:» — не заголовок, а мелкая надпись над списком */
.pg-lead{ margin:clamp(24px,2.8vw,44px) 0 clamp(2px,.6vw,10px);
  font-weight:700; text-transform:uppercase;
  letter-spacing:.2em; font-size:clamp(11px,1.05vw,13px); color:var(--ink-3); }

/* две колонки, заполняются сверху вниз: 01–03 слева, 04–06 справа.
   Горизонтальных зазоров между колонками нет намеренно — тогда линейки
   строк идут через весь лист, не разрываясь в жёлобе, и таблица держится. */
.pg-list{ position:relative; list-style:none;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(3,auto); grid-auto-flow:column; }
.pg-list::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:rgba(35,30,26,.13); }
/* по базовой линии крупная цифра нависала над текстом — выравниваем по верху
   прописных: сетка по верху, цифре добавлена полуапрош её кегля */
.pg{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start;
  column-gap:clamp(12px,1.4vw,22px);
  padding:clamp(16px,1.9vw,26px) clamp(16px,2.2vw,38px);
  border-top:1px solid rgba(35,30,26,.13); }
.pg:nth-child(-n+3){ padding-left:0; }   /* левая колонка прижата к краю листа */
.pg:nth-child(n+4){ padding-right:0; }   /* правая — к другому краю */
.pg:nth-child(3), .pg:nth-child(6){ border-bottom:1px solid rgba(35,30,26,.13); }
.pg-n{ font-weight:800; font-size:clamp(22px,2.1vw,32px); line-height:1; margin-top:.14em; color:var(--terra);
  letter-spacing:-.05em; font-variant-numeric:tabular-nums;
  transition:color .25s var(--ease); }
.pg:hover .pg-n{ color:var(--hot); }
.pg-txt{ font-size:clamp(14px,1.15vw,17px); line-height:1.5; font-weight:600; color:var(--ink); }
/* ключевая часть пункта набрана жирным — по ней список читается по диагонали */
.pg-txt b{ font-weight:800; }

.cta-row{ display:flex; justify-content:center; margin-top:clamp(28px,3.6vw,54px); }
.cta-row--prog{ margin-top:clamp(28px,3.4vw,52px); }

/* ============================================================
   СПИКЕР
   ============================================================ */
/* колонка с фото узкая: при 0.72fr полароид выходил заметно выше блока
   регалий, а текст рядом сжимался в две тесные колонки */
.sp-grid{ display:grid; grid-template-columns:minmax(0,.52fr) minmax(0,1.48fr);
  gap:clamp(22px,3.2vw,54px); align-items:start; }
.polaroid{ position:relative; max-width:340px; transform:rotate(-1.4deg); border-radius:2px; box-shadow:var(--sh-paper);
  background-color:var(--paper); background-image:var(--fiber); background-blend-mode:multiply;
  padding:clamp(12px,1.3vw,18px) clamp(12px,1.3vw,18px) clamp(46px,4.4vw,66px); }
/* height:auto обязателен: иначе атрибут height="1080" из разметки
   остаётся презентационной подсказкой и тянет фото по вертикали */
.polaroid img{ width:100%; height:auto; }
.sp-clip{ top:0; right:9%; transform:translateY(-50%) rotate(12deg); }
.polaroid figcaption{ position:absolute; left:0; right:0; bottom:clamp(14px,1.6vw,22px); text-align:center;
  font-weight:700; color:var(--terra); font-size:clamp(13px,1.2vw,16px); line-height:1;
  text-transform:uppercase; letter-spacing:.18em; }
.sp-name{ font-weight:800; text-transform:uppercase; letter-spacing:-.015em; line-height:1;
  font-size:clamp(24px,3vw,44px); margin-bottom:clamp(16px,2vw,26px); }
.sp-list{ column-count:2; column-gap:clamp(20px,2.6vw,42px); }
.sp-list li{ break-inside:avoid; position:relative; padding:0 0 .95em 1.5em;
  font-size:clamp(13.5px,1.15vw,15.5px); line-height:1.5; color:var(--ink-2); font-weight:500; }
.sp-list li::before{ content:""; position:absolute; left:0; top:.5em; width:.5em; height:.6em;
  background:var(--terra); clip-path:polygon(0 0,100% 50%,0 100%); }
.sp-list b{ color:var(--ink); font-weight:700; }

/* ============================================================
   КОМУ БЫТЬ — чистые карточки, вся фактура в бумаге
   ============================================================ */
/* Карточек пять, а колонок три — нижний ряд из двух оставлял справа дыру
   в треть ширины. Поэтому сетка считается в шести долях: верхние три
   карточки берут по две, нижние две — по три, и ряд заполняется целиком. */
.who-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(14px,1.8vw,24px); }
.who{ grid-column:span 2; }
.who:nth-child(n+4){ grid-column:span 3; }
/* Портрет слева от текста, а не над ним: тексты тут короткие, и в столбик
   карточка выходила вдвое выше нужного — правая половина пустовала. */
/* Колонка под портрет — фиксированной ширины, той же, что у самого портрета.
   С `auto` ширина зависела бы от того, загрузилась картинка или нет, и
   карточки в ряду разъезжались бы по вертикали в момент загрузки. */
.who{ position:relative; border-radius:2px; box-shadow:var(--sh-card);
  display:grid; grid-template-columns:clamp(78px,7.6vw,124px) minmax(0,1fr);
  align-items:center; column-gap:clamp(14px,1.7vw,26px);
  background-color:var(--paper); background-image:var(--fiber); background-blend-mode:multiply;
  padding:clamp(20px,2.2vw,30px) clamp(20px,2.4vw,32px); border-top:5px solid var(--terra); }
.who:nth-child(2n){ border-top-color:var(--ochre); }
.who h3{ font-size:clamp(15px,1.4vw,19px); font-weight:800; line-height:1.25; letter-spacing:-.01em; margin-bottom:.5em; }
.who p{ font-size:clamp(13.5px,1.15vw,15.5px); line-height:1.55; color:var(--ink-2); font-weight:500; }
/* Белая рамка и волосяной контур отделяют бежевый фон снимка от бежевой
   бумаги карточки — без них портрет расплывается в подложке. */
.who-face{ display:block; width:100%; height:auto; aspect-ratio:1;
  object-fit:cover; border-radius:50%;
  border:3px solid var(--paper);
  box-shadow:0 0 0 1px rgba(35,30,26,.16), 0 6px 14px rgba(85,58,26,.18); }

/* ============================================================
   ПОДАРКИ — повтор
   ============================================================ */
/* Блок живёт внутри секции ЦА, а не отдельным экраном: это продолжение того же
   обращения к читателю. Поэтому отделяет его воздух, а не смена фона секции.
   А чтобы он не потерялся среди пяти белых карточек, плашка тёмная — тот же
   приём, что у строки-вывода в блоке с вопросами: белые листы вокруг, одна
   тёмная полоса с оранжевой отбивкой слева. Фактуру бумаги здесь не мешаем:
   на тёмном multiply даёт грязь, вместо неё мягкая подсветка сверху. */
.gifts2{ margin-top:clamp(30px,3.8vw,60px);
  position:relative; display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,50px); align-items:center;
  border-radius:3px; box-shadow:var(--sh-card);
  background-color:var(--ink);
  background-image:radial-gradient(120% 140% at 18% 0%, rgba(255,225,190,.13), transparent 62%);
  border-left:4px solid var(--hot); color:#fff8ee;
  padding:clamp(28px,3.4vw,54px) clamp(24px,3vw,54px); }
/* наклейка-подарок сбоку от блока: наполовину заходит за правый край листа */
.gifts2-sticker{ position:absolute; z-index:3; top:clamp(-26px,-2vw,-14px); right:0;
  width:clamp(64px,7vw,108px); height:auto;
  transform:translateX(46%) rotate(9deg);
  filter:drop-shadow(0 5px 9px rgba(85,58,26,.26)); }
/* Нужны ровно три строки. 16ch давали четыре, 22ch — две, 19ch попадают
   в три. Мерка капризная: ch считается по ширине цифры, а строка набрана
   прописными, они шире, и знаков влезает меньше, чем кажется по числу. */
.gifts2-t{ font-weight:800; text-transform:uppercase; font-size:clamp(17px,2vw,30px); line-height:1.15;
  letter-spacing:-.015em; max-width:19ch; }
.gifts2-list li{ position:relative; padding:.85em 0 .85em 2.1em; font-size:clamp(14px,1.3vw,17.5px);
  line-height:1.5; font-weight:600; border-bottom:1px dashed rgba(255,248,238,.2); }
.gifts2-list li:last-child{ border-bottom:0; }
/* галочка на тёмном берётся светлее кнопочного оранжевого: #dd5a17 на почти
   чёрном проваливается, читается как грязное пятно */
.gifts2-list li::before{ content:""; position:absolute; left:0; top:.95em; width:1.35em; height:1.15em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 40'%3E%3Cpath d='M6 22 L18 33 C24 20 32 10 40 5' fill='none' stroke='%23f7a072' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ============================================================
   ТАРИФЫ — «БИЗНЕС» лежит в настоящей папке
   ============================================================ */
.tar-grid{ display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(26px,3.4vw,52px); align-items:stretch; }
.tar-wrap{ position:relative; display:flex; }
.tar{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; border-radius:2px;
  box-shadow:var(--sh-card); background-color:var(--paper); background-image:var(--fiber); background-blend-mode:multiply;
  padding:clamp(28px,3.2vw,48px) clamp(24px,3vw,44px) clamp(30px,3.4vw,48px); }
/* «БИЗНЕС» — единственный платный тариф, и он тёмный: на странице тёмный тон
   используется редко (вывод в блоке вопросов, плашка подарков), поэтому здесь
   он работает как знак «вот главное». Фактуру бумаги на тёмном не мешаем —
   multiply там даёт грязь, вместо неё мягкая подсветка сверху. */
.tar--pro{ background-color:var(--ink); background-blend-mode:normal;
  background-image:radial-gradient(120% 120% at 20% 0%, rgba(255,225,190,.14), transparent 60%);
  color:#fff8ee; }
.tar--pro .tar-incl, .tar--pro .tar-plus{ color:rgba(255,248,238,.6); }
.tar--pro .tar-list li{ border-bottom-color:rgba(255,248,238,.2); }
/* галочка светлее терракоты: тёмно-красный на почти чёрном не читается */
.tar--pro .tar-list li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 40'%3E%3Cpath d='M6 22 L18 33 C24 20 32 10 40 5' fill='none' stroke='%23f7a072' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.tar-name{ font-weight:800; text-transform:uppercase; letter-spacing:.02em; font-size:clamp(20px,2.4vw,34px);
  line-height:1; color:var(--ink); }
.tar--pro .tar-name{ color:#f7a072; }
.tar-incl{ margin-top:clamp(14px,1.8vw,22px); font-weight:600;
  font-size:clamp(13px,1.15vw,15px); color:var(--ink-3); line-height:1.5; }
/* «+» набран как строка над ним — это часть той же подписи, а не акцент */
.tar-plus{ font-weight:600; font-size:clamp(13px,1.15vw,15px); color:var(--ink-3);
  line-height:1.5; margin-top:.55em; }
.tar-list{ margin-top:clamp(14px,1.8vw,22px); flex:1; }
.tar-list li{ position:relative; padding:.75em 0 .75em 1.9em; font-size:clamp(13.5px,1.22vw,16.5px);
  line-height:1.5; font-weight:600; border-bottom:1px dashed rgba(35,30,26,.15); }
.tar-list li::before{ content:""; position:absolute; left:0; top:.85em; width:1.2em; height:1em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 40'%3E%3Cpath d='M6 22 L18 33 C24 20 32 10 40 5' fill='none' stroke='%23b6482c' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.tar .cta{ margin-top:clamp(20px,2.4vw,32px); width:100%; }

/* ============================================================
   КТО МЫ (переносной блок, перекрашен под бумагу)
   ============================================================ */
/* надзаголовок «КТО МЫ?» снят по просьбе заказчика — секция начинается сразу
   с заголовка. Правило .kicker удалено вместе с ним, чтобы не копить мёртвый CSS. */
/* заголовки блока «Кто мы» не тянем во всю ширину: длинный заголовок
   оставлял на второй строке одно слово. Ширина в ch + балансировка строк */
.about h2{ font-weight:800; text-transform:uppercase; letter-spacing:-.018em; line-height:1.05;
  font-size:clamp(22px,2.9vw,42px); max-width:44ch; text-wrap:balance; }
.about-h2-spaced{ margin-top:clamp(40px,5vw,80px); margin-bottom:clamp(20px,2.4vw,34px); }
.about-top{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(16px,2vw,28px); margin-top:clamp(22px,2.8vw,40px); }
.about-lead, .about-stat, .about-card, .research-card, .gov-card{
  border-radius:2px; box-shadow:var(--sh-card);
  background-color:var(--paper); background-image:var(--fiber); background-blend-mode:multiply; }
/* Плашки логотипов — чистый белый и без бумажной фактуры: почти все логотипы
   лежат на белом фоне, и на кремовой плашке вокруг них проступал прямоугольник.
   Пропорции фиксированы, логотип вписывается целиком (object-fit:contain). */
.client-card, .media-card, .about-logo{ background:#fff; border:1px solid var(--line);
  border-radius:2px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.client-card img, .media-card img, .about-logo img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.about-lead{ padding:clamp(22px,2.6vw,40px); display:flex; flex-direction:column; gap:clamp(14px,1.6vw,24px); }
/* Размеры выровнены по эталонной ручной вёрстке этого блока: заголовки внутри
   карточек крупнее, у цифр крупная наклейка и текст в полтора раза больше —
   иначе карточки статистики читались как подписи под пустотой. */
.about-lead-label, .about-card-label{ font-weight:800; font-size:clamp(16px,1.65vw,24px);
  line-height:1.25; letter-spacing:-.012em; }
/* у скриншота Smart Ranking светлый фон, и на кремовой карточке его границы
   пропадали — обводим тонкой линией и подкладываем белое */
.about-lead-media img{ width:100%; background:#fff; border:1px solid var(--line);
  border-radius:2px; }
.about-stats{ display:grid; gap:clamp(16px,2vw,28px); }
.about-stat{ display:flex; align-items:center; gap:clamp(16px,2.2vw,32px); padding:clamp(22px,2.6vw,40px); }
/* наклейки-стикеры вместо прежних 3D-иконок: та же оранжевая гамма,
   что у огонька, вопроса и подарка */
.about-stat-ico{ flex:0 0 auto; width:clamp(64px,6.6vw,104px); }
.about-stat-ico img{ width:100%; height:auto;
  filter:drop-shadow(0 4px 7px rgba(85,58,26,.24)); }
.about-stat p{ font-size:clamp(17px,1.7vw,26px); line-height:1.3; font-weight:600;
  letter-spacing:-.012em; text-wrap:balance; }
.about-stat b{ font-weight:800; color:var(--terra); }
/* обе карточки одной высоты: то, что внутри, растягивается вместе с ними,
   поэтому пустого низа, из-за которого раньше ставили align-items:start,
   не появляется */
.about-bottom{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,28px);
  margin-top:clamp(16px,2vw,28px); align-items:stretch; }
.about-card{ display:flex; flex-direction:column; padding:clamp(22px,2.6vw,40px); }
.about-card-label{ margin-bottom:1em; display:block; }
/* вузы в две колонки, как на chto-proishodit-s-ii: в один ряд плашки выходили
   низкими, и карточка рядом с лицензиями растягивалась пустотой */
.about-logos{ display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr;
  gap:clamp(10px,1.2vw,16px); flex:1; }
.about-logo{ min-height:clamp(110px,11vw,170px); padding:clamp(12px,1.6vw,22px); }
.about-row{ display:flex; align-items:center; justify-content:space-between;
  gap:clamp(14px,2vw,28px); margin-bottom:1em; }
/* лого Сколково крупнее: в прежние 3rem оно терялось рядом с заголовком */
.sk-logo{ height:clamp(3.4rem,4.4vw,5rem); width:auto; flex-shrink:0; border-radius:.6rem; }
.about-lic{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(10px,1.2vw,16px); flex:1; }
.about-lic img{ width:100%; height:100%; object-fit:contain; background:#fff;
  border:1px solid var(--line); border-radius:2px; }

.research-card{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(16px,2vw,32px); padding:clamp(18px,2.2vw,32px); }
.research-photo img{ width:100%; height:100%; object-fit:cover; }
.research-content h3{ font-size:clamp(16px,1.6vw,23px); font-weight:800; line-height:1.25; margin-bottom:.7em; }
.research-content p{ font-size:clamp(13px,1.12vw,15px); line-height:1.6; color:var(--ink-2); }
.clients-grid{ display:grid; grid-template-columns:repeat(8,1fr); gap:clamp(8px,1vw,14px); }
.client-card{ aspect-ratio:3/2; padding:clamp(8px,1vw,14px); }
.gov-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(16px,2vw,28px); align-items:stretch; }
.gov-left{ display:grid; gap:clamp(16px,2vw,28px); }
.gov-card{ padding:clamp(18px,2.2vw,32px); position:relative; }
.gov-icon{ width:2em; height:2em; border-radius:50%; display:grid; place-items:center; background:var(--terra);
  color:#fff; font-weight:800; margin-bottom:.7em; }
.gov-card h3{ font-size:clamp(15px,1.45vw,20px); font-weight:800; line-height:1.3; margin-bottom:.7em; }
.gov-desc{ font-size:clamp(13px,1.12vw,15px); line-height:1.6; color:var(--ink-2); }
.gov-regions{ margin-top:1em; display:grid; gap:.4em; font-size:clamp(13px,1.12vw,15px); color:var(--ink-2); }
.gov-regions li::before{ content:"— "; color:var(--terra); }
.gov-regions-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.5em 1.2em; font-size:clamp(12.5px,1.08vw,14.5px); color:var(--ink-2); }
/* слайдер занимает всю высоту колонки, кадры кадрируются по месту */
.gov-photo{ display:flex; }
.corp-slider{ position:relative; flex:1; overflow:hidden; border-radius:2px;
  box-shadow:var(--sh-card); min-height:clamp(280px,26vw,420px); }
.corp-slide{ display:none; height:100%; }
.corp-slide.active{ display:block; }
.corp-slide img{ width:100%; height:100%; object-fit:cover; }
.corp-btn{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:0;
  background:rgba(255,253,246,.9); color:var(--ink); font-size:18px; cursor:pointer; display:grid; place-items:center; }
.corp-prev{ left:10px; } .corp-next{ right:10px; }
.corp-dots{ position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:7px; }
.corp-dot{ width:8px; height:8px; border-radius:50%; border:0; background:rgba(255,253,246,.55); cursor:pointer; padding:0; }
.corp-dot.active{ background:var(--hot); }
.media-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(10px,1.2vw,18px); }
.media-card{ aspect-ratio:3/2; padding:clamp(10px,1.2vw,16px); }
.zoomable{ cursor:zoom-in; }

/* лайтбокс */
.lb{ position:fixed; inset:0; background:rgba(20,15,10,.86); display:none; place-items:center; z-index:100; padding:24px; }
.lb.on{ display:grid; }
.lb img{ max-width:min(94vw,1100px); max-height:90vh; width:auto; }

/* ============================================================
   ФИНАЛ
   ============================================================ */
.final-grid{ display:grid; grid-template-columns:minmax(0,65fr) minmax(0,35fr);
  gap:clamp(12px,1.4vw,26px); align-items:stretch; }
.final-sheet{ position:relative; z-index:1; display:flex; flex-direction:column;
  border-radius:2px; box-shadow:var(--sh-paper);
  background-color:var(--paper); background-image:var(--fiber); background-blend-mode:multiply;
  padding:clamp(28px,3.4vw,54px) clamp(24px,3vw,50px); }
.final-clip{ top:0; right:8%; transform:translateY(-54%) rotate(-3deg); }

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:1179px){
  /* планшет и уже: листы в одну колонку, папка держит форму и тянется */
  .hero-grid, .final-grid{ grid-template-columns:1fr; gap:clamp(16px,2.4vw,28px); }
  .gift-list{ justify-content:flex-start; }
  .hero-cta{ margin-top:clamp(22px,2.8vw,40px); padding-top:0; }
  /* зажим переезжает на середину верхнего края правого листа */
  .gift-clip{ right:auto; left:50%; margin-left:calc(clamp(62px,6.6vw,96px) / -2); }
  .prog-top{ grid-template-columns:1fr; gap:clamp(20px,3vw,36px); }
  /* на двух колонках доли шестёрки не нужны, но пятая карточка остаётся
     одна в ряду — растягиваем её, чтобы не висела половинкой */
  .who-grid{ grid-template-columns:repeat(2,1fr); }
  .who, .who:nth-child(n+4){ grid-column:auto; }
  .who:last-child{ grid-column:1 / -1; }

  .sp-grid{ grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr); }
}
@media (max-width:899px){
  /* на телефонах и узких планшетах все кнопки во всю ширину */
  .cta{ width:100%; padding-inline:1.2em; }
  .hero-cta, .cta-row, .cta-row--prog{ display:block; }
  /* на узком экране таблица распадается в один столбец: жёлоб не нужен,
     пункты прижимаются к обоим краям листа, нижняя линейка — только у последнего */
  .pg-list{ grid-template-columns:1fr; grid-template-rows:auto; grid-auto-flow:row; }
  .pg-list::before{ display:none; }
  .pg:nth-child(-n+3), .pg:nth-child(n+4){ padding-inline:0; }
  .pg:nth-child(3){ border-bottom:0; }
  .tar-grid{ grid-template-columns:1fr; }
  .sp-grid{ grid-template-columns:1fr; }
  .sp-list{ column-count:1; }
  .polaroid{ max-width:360px; }
  .about-top, .about-bottom, .research-card, .gov-grid{ grid-template-columns:1fr; }
  .media-grid{ grid-template-columns:repeat(3,1fr); }
  .clients-grid{ grid-template-columns:repeat(4,1fr); }
  .gifts2{ grid-template-columns:1fr; }
  .pain-qs{ grid-template-columns:1fr; }
}
@media (max-width:639px){
  .who-grid{ grid-template-columns:1fr; }
  .clients-grid{ grid-template-columns:repeat(2,1fr); }
  .media-grid{ grid-template-columns:repeat(2,1fr); }
  .gov-regions-grid{ grid-template-columns:1fr; }
  .polaroid{ transform:none; }
  /* На телефоне вертикальный снимок 2:3 занимал почти весь экран. Режем его
     снизу до 8:7 — примерно 58% высоты кадра. Резать ниже нельзя: на 65%
     начинаются скрещённые руки, и линия реза проходила бы по предплечьям.
     object-position сверху, чтобы отрезался низ, а не голова. */
  .polaroid img{ aspect-ratio:8/7; object-fit:cover; object-position:50% 0; }
  :root{ --edge:0px; }
  .hero-folder{ border-radius:0; }
  .hero-folder-tab{ left:14px; width:clamp(110px,34vw,180px); }
  .pg{ column-gap:clamp(12px,3.4vw,18px); }
  .pg-n{ font-size:clamp(20px,5.4vw,26px); }
  .prog-three-lead{ font-size:clamp(26px,7.4vw,34px); }
}

/* ============================================================
   ZEROCODER FOOTER — переиспользуемый подвал
   ============================================================ */
.footer {
  --zc-space-3: 12px; --zc-space-4: 16px; --zc-space-5: 24px; --zc-space-6: 32px;
  --zc-space-7: 48px; --zc-space-8: 64px; --zc-space-9: 96px;
  /* Подвал переносной, но синий #1a2438 и лаймовый ховер выпадали из тёплой
     палитры лендинга. Здесь берём тот же тёмный тон, что у строки-ответа
     в блоке «боль» (--ink), и оранжевый акцент страницы. */
  --zc-accent: var(--hot);
  --zc-easing: cubic-bezier(0.22, 1, 0.36, 1);
  background: var(--ink); color: rgba(252,246,238,.72);
  padding: var(--zc-space-9) 0 var(--zc-space-6);
  font-size: 15px; font-family: 'Manrope', Arial, sans-serif;
}
.footer__container { max-width: calc(var(--page) + 2 * (var(--edge) + var(--gutter)));
  margin: 0 auto; padding: 0 calc(var(--edge) + var(--gutter)); }
.footer__top { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--zc-space-8);
  padding-bottom: var(--zc-space-7); border-bottom: 1px solid rgba(252,246,238,.1); }
.footer__brand { display: flex; flex-direction: column; gap: var(--zc-space-5); }
.footer__logo { display: inline-flex; align-items: center; text-decoration: none; }
.footer__logo-img { display: block; height: 36px; width: auto; max-width: 220px; }
.footer__address { display: block; font-size: 13px; line-height: 1.45; color: rgba(252,246,238,.55); }
.footer__badges { display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: rgba(252,246,238,.06); border-radius: 14px; width: fit-content; }
.footer__badge-img { display: block; height: 44px; width: auto; }
.footer__badge-img--rk { height: 48px; }
.footer__badge-img--sk { height: 36px; }
.footer__col { font-size: 15px; }
.footer__col h4 { font-size: 13px; color: rgba(252,246,238,.48); margin: 0 0 var(--zc-space-4);
  font-weight: 500; letter-spacing: 0; text-transform: none; }
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--zc-space-3); }
.footer__col a { color: #fdf7ef; text-decoration: none; transition: color .2s var(--zc-easing); }
.footer__col a:hover { color: var(--zc-accent); }
.footer__col--contacts { display: flex; flex-direction: column; gap: var(--zc-space-5); }
.footer__contact-block h4 { margin-bottom: 4px; }
.footer__contact-value { display: inline-block; font-size: 24px; font-weight: 700; color: #fdf7ef;
  letter-spacing: -.01em; text-decoration: none; transition: color .2s; }
.footer__contact-value:hover { color: var(--zc-accent); }
.footer__socials { display: flex; gap: 12px; margin-top: 6px; }
.footer__social { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  transition: transform .2s var(--zc-easing), box-shadow .2s; }
.footer__social--tg { background: #2aabee; }
.footer__social--wa { background: #25d366; }
.footer__social--yt { background: #ff0000; }
.footer__social--max { overflow: hidden; }
.footer__social-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.footer__social:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 8px 20px -6px rgba(0,0,0,.5); }
.footer__social svg { width: 22px; height: 22px; }
.footer__bottom { padding-top: var(--zc-space-6); display: flex; justify-content: space-between;
  gap: var(--zc-space-5); flex-wrap: wrap; font-size: 13px; color: rgba(252,246,238,.45); }
.footer__copy { letter-spacing: .01em; }
.footer__legal { display: flex; gap: var(--zc-space-7); flex-wrap: wrap; }
@media (max-width: 959px) { .footer__top { grid-template-columns: 1fr 1fr; gap: var(--zc-space-6); } }
@media (max-width: 639px) { .footer__top { grid-template-columns: 1fr; } }

/* ============================================================
   ОКНО С ФОРМОЙ РЕГИСТРАЦИИ
   Виджет GetCourse — это не кнопка, а форма с полями, поэтому в карточку
   тарифа она не влезает: кнопка открывает её в окне.
   Скрипт виджета выставляет высоту своему РОДИТЕЛЮ, поэтому у него должен
   быть отдельный пустой контейнер (.wmodal-body) — иначе он растянет по
   высоте всё, во что его положили.
   ============================================================ */
.wmodal{ position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  padding:clamp(12px,3vw,32px); }
.wmodal[hidden]{ display:none; }
.wmodal-back{ position:absolute; inset:0; background:rgba(20,15,10,.72); }
.wmodal-win{ position:relative; width:min(540px,100%); max-height:92vh; overflow:auto;
  border-radius:clamp(6px,.8vw,12px); box-shadow:var(--sh-paper);
  background-color:var(--paper); background-image:var(--fiber); background-blend-mode:multiply;
  padding:clamp(16px,2vw,26px); }
.wmodal-x{ position:absolute; top:6px; right:10px; z-index:2; border:0; background:none;
  font-size:32px; line-height:1; color:var(--ink-3); cursor:pointer; padding:6px 10px;
  font-family:'Manrope',Arial,sans-serif; }
.wmodal-x:hover{ color:var(--terra); }
/* iframe виджета сам сообщает свою высоту скрипту, ширину задаём мы */
.wmodal-body{ min-height:120px; }
.wmodal-body iframe{ width:100%; border:0; display:block; }

/* Кнопки тарифов — <button>, а не <a>. Собственную рамку браузера гасим
   через appearance, а НЕ через `button.cta{ border:0 }`: такое правило
   специфичнее, чем `.cta--ghost`, и стирает у призрачной кнопки её рамку —
   единственное, чем она видна в спокойном состоянии. */
button.cta{ -webkit-appearance:none; appearance:none; }