@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/Caveat-500-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/Caveat-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Caveat-600-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Caveat-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Inter-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/Inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Inter-600-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/Inter-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Inter-700-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/Inter-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/Inter-800-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/Inter-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --bg:#F7F7F0;
  --ink:#1A1A1A;
  --muted:#6B6B66;
  --accent:#D6202E;
  --line:#E2E2D8;
  --white:#fff;
  --wrap:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2{margin:0}
p{margin:0}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}

.skip{position:absolute;left:0;top:0;z-index:50;transform:translateY(-120%);
  background:var(--ink);color:var(--white);padding:12px 18px;text-decoration:none}
.skip:focus{transform:translateY(0)}

/* ---------- шапка ---------- */
.topbar{
  position:sticky;top:0;z-index:20;background:rgba(247,247,240,.9);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color .2s ease;
}
.topbar--stuck{border-bottom-color:var(--line)}
.topbar__inner{display:flex;align-items:center;gap:20px;min-height:74px}
.brand{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font-weight:800;font-size:15px;letter-spacing:-.02em;text-transform:uppercase;
}
.brand__dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--bg);text-decoration:none;
  font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  padding:17px 30px;border-radius:100px;
  transition:background .18s ease,transform .18s ease,color .18s ease;
}
.btn:hover{background:var(--accent);color:var(--white);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn--sm{margin-left:auto;padding:12px 22px;font-size:12px;white-space:nowrap}
.only-narrow{display:none}

/* ---------- первый экран ---------- */
.hero{padding:56px 0 0;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center}
.hero__title{
  font-weight:800;font-size:clamp(38px,5.6vw,72px);line-height:.98;
  letter-spacing:-.035em;text-transform:uppercase;
}
/* «ОТНОШЕНИЯМ» — длинное слово: на 320-330px оно вылезало за поле контейнера,
   поэтому там кегль считаем от ширины экрана, а не от нижней границы clamp */
@media (max-width:360px){
  .hero__title{font-size:min(38px,10.4vw)}
}
.script{
  display:block;margin-top:6px;
  font-family:'Caveat',cursive;font-weight:600;text-transform:none;letter-spacing:0;
  font-size:clamp(32px,4.4vw,60px);line-height:1;color:var(--accent);
}
/* рукописная часть заголовка налезала на строку капса (клиент: «слипается»):
   Caveat выше по рисунку, поэтому даём заголовку воздуха и опускаем курсив на пару пикселей */
.script--sm{display:inline;font-size:1.05em;vertical-align:baseline;line-height:1.25}
.hero__lead{margin-top:28px;font-size:clamp(16px,1.4vw,19px);color:var(--muted);max-width:26em}
.hero__cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:36px}
.hero__note{font-size:14px;color:var(--muted)}
.hero__media img{
  width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:180px 180px 12px 12px;
}

/* бегущая строка */
.ticker{margin-top:56px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.ticker__row{
  display:flex;align-items:center;gap:26px;white-space:nowrap;padding:16px 0;
  font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  /* 13s: на 26s лента ползла ~7px в секунду, и клиент решила, что она вообще не движется */
  animation:slide 13s linear infinite;
}
.ticker__row i{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* боли */
.pain{padding:84px 0 96px}
.section__title{
  font-weight:800;font-size:clamp(28px,3.8vw,50px);line-height:1.16;
  letter-spacing:-.03em;text-transform:uppercase;max-width:16em;
}
.pain__grid{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pain__card{
  background:var(--white);border-radius:20px;padding:30px 26px;font-size:16px;
  display:flex;flex-direction:column;gap:14px;
}
.pain__card b{
  font-size:13px;letter-spacing:.1em;color:var(--accent);font-weight:800;
}
.pain__out{
  margin-top:44px;display:flex;gap:32px;align-items:center;justify-content:space-between;
  background:var(--ink);color:var(--bg);border-radius:24px;padding:38px 40px;flex-wrap:wrap;
}
.pain__out p{font-size:clamp(18px,2vw,24px);line-height:1.3;font-weight:600;letter-spacing:-.02em;max-width:22em}
.pain__out .btn{background:var(--accent);color:var(--white);flex:0 0 auto}
.pain__out .btn:hover{background:var(--bg);color:var(--ink)}

/* подвал */
.foot{padding:30px 0;border-top:1px solid var(--line)}
.foot__inner{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
/* реквизиты продавца: цены на сайте есть, значит покупателю должно быть видно, с кем он имеет дело */
.foot__legal{margin-top:14px;font-size:12px;line-height:1.5;color:var(--muted);opacity:.75}
.foot__link{color:var(--accent);text-decoration:none;font-weight:700}

/* ---------- адаптив ---------- */
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr;gap:36px}
  .hero{padding:36px 0 0}
  .hero__media{max-width:460px}
  .pain__grid{grid-template-columns:1fr}
  .pain{padding:60px 0 72px}
}
@media (max-width:760px){
  body{font-size:16px}
  .only-wide{display:none}
  .only-narrow{display:inline}
  .hero{padding:24px 0 0}
  .hero__lead{margin-top:20px}
  .hero__cta{margin-top:26px}
  .ticker{margin-top:36px}
  .topbar__inner{min-height:62px;gap:12px}
  .brand{font-size:13px}
  .btn--sm{padding:10px 16px;font-size:11px}
  .hero__cta{gap:14px}
  .hero__cta .btn,.pain__out .btn{width:100%}
  .hero__media{max-width:none}
  .hero__media img{border-radius:140px 140px 12px 12px}
  .pain__out{padding:28px 24px;gap:22px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .ticker__row{animation:none}
}


/* ================= полная версия в стиле B ================= */
.nav{display:flex;gap:22px;margin-left:auto;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.nav a{text-decoration:none;color:var(--muted);transition:color .18s ease}
.nav a:hover{color:var(--accent)}
/* auto сохраняем: когда меню уходит в бургер, единственным «расталкивающим» элементом
   оставался бургер — кнопка записи прилипала к логотипу, а между ними зияло полэкрана */
.topbar .btn--sm{margin-left:auto}
.nav:not(.nav--open) + .btn--sm{margin-left:auto}
.burger{display:none;width:44px;height:44px;border:0;background:none;padding:10px;cursor:pointer;margin-left:auto}
.burger span{display:block;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease}
.burger span+span{margin-top:6px}
.burger--x span:first-child{transform:translateY(4px) rotate(45deg)}
.burger--x span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* что меняется */
.result{padding:84px 0;border-top:1px solid var(--line)}
.result__lead{margin-top:18px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.result__list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
/* список форматов внутри шага 2 — её четыре пункта, а не слепленный абзац */
.steps__formats{margin:12px 0 0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:8px}
.steps__formats li{font-size:15px;color:var(--muted);line-height:1.5}
.steps__formats b{color:var(--ink);font-weight:700}
.result__list li{display:flex;flex-direction:column;gap:14px}
.result__num{font-weight:800;font-size:15px;letter-spacing:.1em;color:var(--accent)}
.result__list p{font-size:18px;font-weight:500}

/* как это работает */
.method{padding:84px 0;background:var(--white)}
.method__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.method__text{margin-top:20px;color:var(--muted);max-width:34em}
.method__note{background:var(--bg);border-radius:22px;padding:32px;border-left:4px solid var(--accent)}
.method__note h3{margin:0 0 12px;font-size:19px;font-weight:800;letter-spacing:-.02em;text-transform:uppercase}
.method__note p{color:var(--muted);font-size:16px}

/* форматы */
.formats{padding:84px 0}
.formats__sub{margin-top:14px;color:var(--muted)}
/* 3 колонки, а не 4: с появлением парной сессии карточек стало пять, и пятая («игра»)
   висела одна в ряду с тремя пустыми ячейками. 3+2 читается как нормальная сетка. */
.formats__grid{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{display:flex;flex-direction:column;gap:10px;background:var(--white);border-radius:22px;padding:28px 24px}
.card__price{font-weight:800;font-size:30px;letter-spacing:-.04em;color:var(--accent)}
.card__title{margin:0;font-size:15px;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.card__meta{font-size:13px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.card__text{font-size:15px;color:var(--muted);flex:1}
.card .btn{margin-top:16px;width:100%;padding:14px 18px;font-size:12px}
.btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--bg)}
.card--accent{background:var(--ink)}
.card--accent .card__price{color:var(--white)}
.card--accent .card__title{color:var(--bg)}
.card--accent .card__meta,.card--accent .card__text{color:#B9B9B0}
.card--accent .btn{background:var(--accent);color:var(--white)}
.card--accent .btn:hover{background:var(--bg);color:var(--ink)}

/* отзывы: горизонтальная карусель на нативном scroll-snap (свайп на телефоне, стрелки и точки на десктопе) */
.reviews{padding:84px 0;background:var(--white)}
.reviews__slider{position:relative;margin-top:40px}
.reviews__track{
  /* stretch, а не flex-start: карточки в ряду одной высоты, поэтому высота блока
     не зависит от того, какой отзыв открыт, и страница не прыгает при листании. */
  display:flex;gap:20px;align-items:stretch;
  /* overflow-y:hidden — иначе у трека появляется СВОЯ вертикальная прокрутка, и палец
     на телефоне крутит отзывы вместо страницы (человек застревает в блоке). */
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  /* mandatory нужен, чтобы после свайпа пальцем карточка доводилась и отзыв был виден
     целиком (с proximity палец останавливался между карточками и текст резался по краям).
     Спор с кнопками снят в JS: goTo на время своего перехода глушит снап. */
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 2px 8px;
  transition:height .25s ease;
}
@media (prefers-reduced-motion:reduce){
  .reviews__track{scroll-behavior:auto;transition:none}
}
.reviews__track::-webkit-scrollbar{display:none}
.reviews__track:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:22px}
.reviews__track .quote{flex:0 0 calc(50% - 10px);scroll-snap-align:start;margin:0;height:auto}
.reviews__ctrl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px}
.rev-nav{
  position:relative;flex:0 0 auto;
  width:44px;height:44px;border:0;border-radius:50%;background:var(--ink);cursor:pointer;
  transition:background .2s ease,opacity .2s ease;
}
.rev-nav::after{
  content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;
  border-top:2px solid var(--white);border-right:2px solid var(--white);
}
.rev-nav--prev::after{transform:translate(-30%,-50%) rotate(-135deg)}
.rev-nav--next::after{transform:translate(-70%,-50%) rotate(45deg)}
.rev-nav:hover{background:var(--accent)}
.rev-nav--off{opacity:.25;cursor:default;background:var(--ink)}
.rev-nav--off:hover{background:var(--ink)}
.rev-nav:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.reviews__dots{display:flex;justify-content:center;flex-wrap:wrap;gap:0}
/* сама точка 8px, но зона нажатия 24x24 — иначе пальцем в неё не попасть */
.reviews__dots button{
  position:relative;width:24px;height:24px;padding:0;border:0;background:transparent;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.reviews__dots button::after{
  /* #9A9A92 вместо светлой линии: даёт контраст ~3.4:1 на белом, неактивные точки
     раньше были почти невидимы (1.3:1) и человек не понимал, что отзывов много. */
  content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;margin:-4px 0 0 -4px;
  border-radius:50%;background:#9A9A92;transition:background .2s ease,transform .2s ease;
}
.reviews__dots button[data-active="true"]::after{background:var(--accent);transform:scale(1.5)}
.reviews__dots button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:50%}
/* карточки в ряду одной высоты, поэтому короткий отзыв ставим по центру: иначе текст
   висел вверху, а под ним читалась дыра в пол-карточки */
.quote{margin:0 0 20px;background:var(--bg);border-radius:22px;padding:28px;border-top:4px solid var(--accent);position:relative;display:flex;flex-direction:column;justify-content:center}

/* Длинные отзывы на телефоне сворачиваются: иначе высота трека равнялась самому длинному
   отзыву, и под короткими висел экран-полтора пустоты. Текст никуда не девается —
   раскрывается кнопкой, полностью и дословно. */
.quote--clamped .quote__body{
  /* min(40vh,320px), а не 56vh: с щедрым порогом самый длинный отзыв всё равно оставался
     высоким, и под коротким висело до 429px пустоты — почти половина экрана телефона */
  max-height:min(40vh,320px);overflow:hidden;
}
@media (min-width:1024px){
  /* 340, а не 420: чем ниже потолок, тем меньше разрыв между длинным и коротким отзывом */
  .quote--clamped .quote__body{max-height:340px}
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
}
.quote__more{
  margin-top:14px;border:0;background:none;padding:6px 0;cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid currentColor;
}
.quote__more:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.quote p+p{margin-top:12px}
.quote p{font-size:16px;line-height:1.6}
.quote footer{margin-top:16px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}

/* парные сессии */
.pairs{padding:84px 0;background:var(--white)}
.pairs__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:start}
.pairs__lead{margin-top:18px;font-size:20px;font-weight:700;letter-spacing:-.01em;max-width:26em}
.pairs__text p{margin-top:16px;color:var(--muted);max-width:44em}
.pairs__cta{margin-top:28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pairs__note{font-size:14px;color:var(--muted);letter-spacing:.02em}
.pairs__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.pairs__list li{
  background:var(--bg);border-radius:18px;padding:18px 20px 18px 46px;position:relative;
  font-size:16px;line-height:1.45;
}
.pairs__list li::before{
  content:"";position:absolute;left:20px;top:26px;width:12px;height:12px;
  border-radius:50%;background:var(--accent);
}

/* обо мне */
.about{padding:84px 0}
/* колонка с фото липкая: текста в «обо мне» много, и раньше справа от фото пары
   оставалось больше 600px пустоты, пока читаешь абзацы */
.about__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
/* sticky ТОЛЬКО на десктопе: на телефоне колонка одна, и липкое фото наползало
   поверх текста «обо мне» — клиент прислала скрин, где заголовок и абзацы под фото */
@media (min-width:981px){
  .about__media{position:sticky;top:96px}
}
.about__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px 12px 180px 180px}
.about__pair{margin:20px 0 0}
.about__pair img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:180px 180px 12px 12px}
.about__pair figcaption{
  margin-top:12px;font-family:'Caveat',cursive;font-weight:600;font-size:22px;
  line-height:1.2;color:var(--accent);
}
.about__lead{margin-top:16px;color:var(--muted)}
.about__facts{margin-top:24px;display:flex;flex-direction:column;gap:18px}
.about__facts p{font-size:16px;color:var(--muted)}
.about__facts strong{color:var(--ink);font-weight:700}
.about__out{
  margin-top:26px;font-family:'Caveat',cursive;font-weight:600;
  font-size:30px;line-height:1.15;color:var(--accent);max-width:20em;
}

/* вопросы */
.faq{padding:84px 0;background:var(--white)}
.faq__list{margin-top:34px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;font-size:17px;font-weight:700;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq details p{padding:0 0 24px;color:var(--muted);max-width:52em}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* финал */
.final{padding:92px 0;background:var(--ink);color:var(--bg)}
.final__inner{text-align:center;max-width:24em;margin:0 auto}
.final__title{font-weight:800;font-size:clamp(30px,4.2vw,52px);line-height:1;letter-spacing:-.035em;text-transform:uppercase}
.final .script{color:var(--accent);margin-top:8px}
.final__text{margin-top:18px;color:#B9B9B0}
.final .btn--lg{margin-top:30px;background:var(--accent);color:var(--white);font-size:14px;padding:20px 36px}
.final .btn--lg:hover{background:var(--bg);color:var(--ink)}

@media (max-width:980px){
  .method__grid,.about__grid,.pairs__grid{grid-template-columns:1fr;gap:32px}
  .formats__grid{grid-template-columns:repeat(2,1fr)}
  .result__list{grid-template-columns:1fr;gap:22px}
  .reviews__track .quote{flex:0 0 100%}
  .about__media{max-width:420px}
  /* на планшетах первый экран стоял в две колонки и половина оставалась пустой */
  .hero__grid{grid-template-columns:1fr;gap:28px}
  .hero__media{max-width:none}
  .hero__media img{width:100%;max-height:52vh;object-fit:cover;object-position:center 22%}
}
@media (max-width:760px){
  .nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;gap:0;margin:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 28px 18px}
  .nav--open{display:flex}
  .nav a{padding:14px 0;font-size:14px;border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .burger{display:block}
  .topbar .btn--sm{display:none}
  .result,.method,.formats,.reviews,.about,.faq{padding:56px 0}
  .final{padding:64px 0}
  .formats__grid{grid-template-columns:1fr}
  .quote{padding:24px}
  .final .btn--lg{width:100%}
}


/* ================= блоки полного ТЗ ================= */

/* почему я — подпись от руки */
.method__script{
  margin-top:26px;font-family:'Caveat',cursive;font-weight:600;
  font-size:30px;line-height:1.15;color:var(--accent);max-width:20em;
}
.method__text strong{color:var(--ink);font-weight:700}

/* как строится работа */
.steps{padding:84px 0;border-top:1px solid var(--line)}
.steps__list{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:none}
.steps__item{background:var(--white);border-radius:22px;padding:30px 26px;display:flex;flex-direction:column;gap:12px}
.steps__num{font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.steps__item h3{margin:0;font-size:17px;font-weight:800;letter-spacing:-.01em}
.steps__item p{font-size:15px;color:var(--muted)}

/* трансформационная игра */
.game{padding:84px 0;background:var(--ink);color:var(--bg)}
.game__title{color:var(--bg)}
.game__lead{margin-top:18px;font-size:clamp(17px,1.7vw,21px);color:#B9B9B0;max-width:34em}
.game__grid{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.game__card{background:rgba(255,255,255,.06);border-radius:22px;padding:30px 26px;border-top:3px solid var(--accent)}
.game__card h3{margin:0 0 14px;font-size:15px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.game__card p{color:#B9B9B0;font-size:15px}
.game__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.game__list li{position:relative;padding-left:20px;color:#B9B9B0;font-size:15px}
.game__list li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.game__out{
  margin-top:36px;display:flex;gap:28px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.14);padding-top:32px;
}
.game__out p{font-size:clamp(17px,1.8vw,21px);font-weight:600;letter-spacing:-.01em;max-width:26em}
.game__out .btn{background:var(--accent);color:var(--white);flex:0 0 auto}
.game__out .btn:hover{background:var(--bg);color:var(--ink)}

/* правила работы */
.rules{padding:84px 0}
.rules__grid{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* min-width:0 + перенос длинных слов: на узких телефонах заголовок «Конфиденциальность»
   распирал карточку и блок вылезал из сетки вправо. */
.rules__card{background:var(--white);border-radius:22px;padding:30px 26px;border-left:4px solid var(--accent);min-width:0}
.rules__card h3{overflow-wrap:anywhere}
.rules__card h3{margin:0 0 12px;font-size:16px;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.rules__card p{font-size:15px;color:var(--muted)}

/* сертификаты */
.certs{padding:84px 0;background:var(--white)}
.certs__sub{margin-top:14px;color:var(--muted);font-size:15px}
.certs__grid{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.cert{margin:0;display:flex;flex-direction:column;gap:14px}
.cert a{display:block;border-radius:16px;overflow:hidden;background:var(--bg);border:1px solid var(--line);transition:transform .18s ease,border-color .18s ease}
.cert a:hover{transform:translateY(-2px);border-color:var(--accent)}
.cert a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cert figcaption{font-size:14px;color:var(--muted);line-height:1.5}
.cert figcaption strong{display:block;color:var(--ink);font-weight:700;font-size:15px;margin-bottom:4px}

/* контакты */
.final__ways{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.final__ways .btn--lg{margin-top:0}
.btn--outline{background:transparent;color:var(--bg);border:1px solid rgba(255,255,255,.45)}
.btn--outline:hover{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.social{margin-top:32px;display:flex;gap:14px;justify-content:center}
.social__link{
  display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;
  border-radius:50%;border:1px solid rgba(255,255,255,.35);color:var(--bg);
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.social__link:hover{background:var(--accent);border-color:var(--accent);color:var(--white);transform:translateY(-2px)}
.social__link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media (max-width:980px){
  .steps__list{grid-template-columns:repeat(2,1fr)}
  .game__grid,.rules__grid,.certs__grid{grid-template-columns:1fr}
  .result__list{grid-template-columns:1fr}
}
@media (max-width:760px){
  .steps,.game,.rules,.certs{padding:56px 0}
  .steps__list{grid-template-columns:1fr}
  .game__out .btn,.final__ways .btn{width:100%}
  .final__ways{flex-direction:column}
}

/* контакты: правки после осмотра на 1440 */
/* .final__inner был max-width:24em — в него не влезали две кнопки в ряд,
   поэтому ширину держим на самом тексте, а ряду кнопок даём всю строку */
.final__inner{max-width:none}
.final__title,.final__text{max-width:22em;margin-left:auto;margin-right:auto}
/* .final .btn--lg (0,2,0) перебивал .btn--outline (0,1,0) и красил вторую кнопку в акцент */
.final .btn--lg.btn--outline{background:transparent;color:var(--bg);border:1px solid rgba(255,255,255,.45)}
.final .btn--lg.btn--outline:hover{background:var(--bg);color:var(--ink);border-color:var(--bg)}

/* «ТРАНСФОРМАЦИОННАЯ» — одно длинное слово: не переносится и режется на узких экранах
   (замер на 390: 342px текста в 319px контейнера). Лестница брейкпоинтов не спасала —
   на каждом следующем узком экране резало снова, поэтому кегль привязан к ширине окна. */
@media (max-width:760px){
  .game__title{font-size:min(6.2vw,34px);letter-spacing:-.02em}
}

/* ================= правки по независимой приёмке ================= */

/* 🩸 Планшетная дыра: бургер включался только на max-width:760, а полное меню из
   6 пунктов плюс кнопка в шапке перестают влезать уже около 950px. В диапазоне
   761–950 (iPad портрет 768, Air 820, Pro 11" 834, окно в половину экрана) страницу
   уводило горизонтально на 183px и резало кнопку записи до «ЗА».
   Меню уходит в бургер раньше, кнопку записи оставляем — она короткая. */
/* 1100, а не 980: в меню стало 7 пунктов, и на 981-1023px шапка переставала помещаться —
   страницу уводило вбок, кнопку записи резало, пункты ломались на две строки. */
@media (max-width:1100px){
  .nav{
    position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;gap:0;margin:0;
    background:var(--bg);border-bottom:1px solid var(--line);padding:8px 28px 18px;
  }
  .nav--open{display:flex}
  .nav a{padding:14px 0;font-size:14px;border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .burger{display:block;margin-left:14px}
  .only-wide{display:none}
  .only-narrow{display:inline}
}

/* Кнопка записи в бургер-меню: на телефоне шапочная кнопка скрыта (.topbar .btn--sm),
   и записаться из меню было нельзя вообще — приходилось искать кнопку по странице. */
.nav__cta{display:none}
@media (max-width:1100px){
  /* цвет через .nav a — иначе общее правило меню перебивает и кнопка выглядит выключенной
     (серый текст на чёрном давал контраст 3.25:1) */
  .nav a.nav__cta{
    display:block;margin-top:12px;border-bottom:0;
    background:var(--ink);color:#FFFFFF;border-radius:100px;
    text-align:center;padding:14px 18px;
    font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:12px;
  }
  .nav a.nav__cta:hover{background:var(--accent);color:#FFFFFF}
}

/* 9 точек по 24px не влезали в строку рядом со стрелками на 320-410px и девятая
   переносилась вниз одна. Сужаем зону до 20px — 9x20=180px помещается даже на 320. */
@media (max-width:430px){
  .reviews__ctrl{gap:10px}
  .reviews__dots button{width:20px;height:20px}
}

/* страница политики обработки данных */
.policy{padding:56px 0 84px;background:var(--white);min-height:60vh}
.policy__inner{max-width:44em}
.policy__title{font-weight:800;font-size:clamp(26px,3.4vw,40px);line-height:1.05;letter-spacing:-.03em;text-transform:uppercase}
.policy h2{margin-top:34px;font-size:19px;font-weight:700;letter-spacing:-.01em}
.policy p{margin-top:14px;color:var(--muted)}
.policy a{color:var(--accent);text-decoration:underline}

/* Карточки сертификатов были разной высоты (354 / 596 / 373px) — второй документ
   вертикальный, из-за чего подписи вставали на трёх разных уровнях и сетка рвалась.
   Одинаковое окно + contain: документ виден целиком, ничего не обрезано. */
.cert a{display:block;aspect-ratio:4/3;padding:10px}
/* height:100% обязателен: с height:auto высота картинки считалась по ширине, бокс её
   не ограничивал, object-fit:contain не включался и портретное свидетельство резалось
   по нижней половине — ровно там имя владельца, подпись и печать. */
.cert img{width:100%;height:100%;object-fit:contain}