/* ============================================================
   g.s.p — лендинг
   цвета, шрифт и радиусы берутся только из design-system/tokens.
   здесь — раскладка страницы и веб-шкала кегля (спека задаёт
   шкалу для холста 1080; для экрана она пересчитана в clamp).
   ============================================================ */

:root{
  /* ——— веб-шкала: пропорции из спеки, но текучие ——— */
  --lp-h1:        clamp(42px, 7.2vw, 96px);
  --lp-h2:        clamp(32px, 5.2vw, 68px);
  --lp-h3:        clamp(24px, 2.6vw, 34px);
  --lp-subhead:   clamp(17px, 1.75vw, 23px);
  --lp-body:      clamp(15px, 1.3vw, 18px);
  --lp-label:     clamp(11px, 1vw, 13px);
  --lp-fine:      clamp(12px, 1vw, 14px);
  --lp-num:       clamp(34px, 4.4vw, 62px);
  --lp-num-sm:    clamp(30px, 3.6vw, 52px);

  /* ——— раскладка: поля 80 из спеки, сжимаются на узких экранах ——— */
  --lp-max:       1200px;
  --lp-gutter:    clamp(20px, 5vw, 80px);
  --lp-section:   clamp(64px, 9vw, 140px);

  /* ——— движение: короткие резкие переходы ——— */
  --lp-fast:      120ms linear;
  --lp-move:      320ms cubic-bezier(.2,.7,.3,1);

  /* ——— вторичный текст на экране ———
     loss #8A8A8A задуман для холста 1080, где подписи крупные.
     в вебе на кегле 14–18 он даёт 3.2:1 и не проходит WCAG AA,
     поэтому длинные абзацы и fine print набираются приглушённым ink:
     та же тихая интонация, но 5.8:1. сам токен --loss не тронут и
     продолжает отвечать за поражения и за реплику листа. */
  --lp-muted:     rgba(20,20,20,.66);
  --lp-fine-c:    rgba(20,20,20,.60);
}

[data-mode="dark"]{
  --lp-muted:     rgba(247,247,247,.70);
  --lp-fine-c:    rgba(247,247,247,.62);
}

/* ============================================================
   база
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  font-size:var(--lp-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto}

h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}

/* зерно — печатная деталь, а не эффект: почти незаметный слой поверх листа */
.grain::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:900;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:1000;
  background:var(--ink);
  color:var(--white);
  padding:12px 20px;
  font-weight:700;
  text-decoration:none;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
[data-mode="dark"] :focus-visible{outline-color:var(--ball)}

/* ============================================================
   примитивы раскладки
   ============================================================ */

.lp-container{
  width:100%;
  max-width:var(--lp-max);
  margin-inline:auto;
  padding-inline:var(--lp-gutter);
}

.sec{
  position:relative;
  padding-block:var(--lp-section);
}
.sec--tight{padding-block:calc(var(--lp-section) * .7)}

.sec__head{max-width:44ch;margin-bottom:clamp(32px,4vw,64px)}
.sec__sub{
  font-size:var(--lp-subhead);
  color:var(--lp-muted);
  margin-top:clamp(14px,1.6vw,22px);
  text-wrap:pretty;
}

/* заголовки: строчными black с точкой. капс в заголовках запрещён */
.lp-h1,.lp-h2,.lp-h3{
  font-weight:var(--w-black);
  line-height:var(--leading-headline);
  letter-spacing:-.03em;
  text-transform:lowercase;
}
.lp-h1{font-size:var(--lp-h1)}
.lp-h2{font-size:var(--lp-h2)}
.lp-h3{font-size:var(--lp-h3);letter-spacing:-.02em}

/* капс — только служебным лейблам, трекинг +8% */
.lp-label{
  font-weight:600;
  font-size:var(--lp-label);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--lp-fine-c);
  margin-bottom:clamp(14px,1.6vw,20px);
}

.fine{
  font-size:var(--lp-fine);
  font-weight:500;
  letter-spacing:.04em;
  color:var(--lp-fine-c);
  line-height:1.5;
}

/* сноска со звёздочкой — печатная деталь, живёт под своим блоком */
.footnote{
  font-size:var(--lp-fine);
  line-height:1.55;
  color:var(--lp-fine-c);
  max-width:66ch;
  margin-top:clamp(18px,2.2vw,28px);
}
.star{color:var(--ball-shade);font-weight:700}

/* разделитель блоков «•••» */
.dots{
  text-align:center;
  font-weight:var(--w-black);
  font-size:22px;
  letter-spacing:.45em;
  text-indent:.45em;
  color:var(--text-secondary);
  line-height:1;
}

/* фоновая геометрия: диагональные плоскости mist из углов, не больше двух на лист */
.plane{
  position:absolute;
  inset:0;
  background:var(--bg-geometry);
  pointer-events:none;
}
.plane--tr{clip-path:polygon(100% 0, 100% 34%, 64% 0)}
.plane--bl{clip-path:polygon(0 100%, 0 78%, 22% 100%)}

/* ============================================================
   кнопки: hover = инверсия ink/white, press = сдвиг 1px
   ============================================================ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  border:1px solid var(--ink);
  border-radius:var(--radius-pill);
  padding:.85em 1.6em;
  font-family:var(--font-text);
  font-weight:700;
  font-size:var(--lp-body);
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--lp-fast), color var(--lp-fast), border-color var(--lp-fast), transform var(--lp-fast);
}
.btn--lg{padding:1.05em 2em;font-size:clamp(16px,1.4vw,19px)}

.btn--ink{background:var(--ink);color:var(--white)}
.btn--ink:hover,.btn--ink:focus-visible{background:transparent;color:var(--ink)}

/* вторичное действие — не пилюля, а подчёркнутая ссылка:
   без горизонтальных полей она встаёт по левому краю колонки,
   hover — подчёркивание ball-shade, как задано в системе */
.btn--ghost{
  background:transparent;
  color:var(--text-body);
  border-color:transparent;
  padding-inline:0;
  text-decoration:underline;
  text-decoration-color:var(--ball-shade);
  text-decoration-thickness:2px;
  text-underline-offset:.28em;
}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--ball-shade)}

/* акцентная кнопка живёт только на чёрной плашке — зелёный на белом запрещён */
.btn--ball{background:var(--ball);color:var(--ink);border-color:var(--ball)}
.btn--ball:hover,.btn--ball:focus-visible{background:transparent;color:var(--ball)}

.btn:active{transform:translateY(1px)}

/* ============================================================
   шапка
   ============================================================ */

.hdr{
  position:sticky;
  top:0;
  z-index:800;
  background:var(--bg-page);
  border-bottom:1px solid transparent;
  transition:border-color var(--lp-fast);
}
.hdr.is-stuck{border-bottom-color:var(--divider)}

.hdr__in{
  display:flex;
  align-items:center;
  gap:clamp(16px,3vw,48px);
  min-height:clamp(60px,5vw,76px);
}

.hdr__mark{
  font-weight:var(--w-black);
  font-size:clamp(19px,1.7vw,23px);
  letter-spacing:.01em;
  text-decoration:none;
  margin-right:auto;
}
.hdr__mark:hover{color:var(--text-body)}

.hdr__nav{display:flex;gap:clamp(16px,2vw,32px)}
.hdr__nav a{
  font-weight:600;
  font-size:15px;
  text-transform:lowercase;
  text-decoration:none;
  color:var(--lp-muted);
  transition:color var(--lp-fast);
}
.hdr__nav a:hover{color:var(--text-body)}

.hdr__cta{padding:.7em 1.3em;font-size:15px}

/* якоря не заезжают под липкую шапку */
[id]{scroll-margin-top:clamp(76px,6vw,96px)}

/* ============================================================
   герой
   ============================================================ */

.hero{
  position:relative;
  overflow:hidden;
  padding-block:clamp(48px,7vw,104px) clamp(56px,8vw,120px);
}

.hero__in{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(24px,4vw,64px);
}

.hero__text{min-width:0}
.hero .lp-h1{text-wrap:balance}

/* линейка турниров под заголовком: капс с трекингом — по правилу
   системы аббревиатуры и служебные лейблы набираются капсом */
.hero__tour{
  font-weight:700;
  font-size:clamp(17px,2.1vw,30px);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  line-height:1.2;
  margin-top:clamp(12px,1.4vw,20px);
}

.hero__sub{
  font-size:var(--lp-subhead);
  color:var(--lp-muted);
  margin-top:clamp(20px,2.4vw,32px);
  max-width:44ch;
  text-wrap:pretty;
}

.hero__cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(12px,1.6vw,20px);
  margin-top:clamp(28px,3.4vw,44px);
}

/* мяч — единственная иллюстрация системы; мягкая тень, без глянца */
.hero__ball{
  width:clamp(150px,24vw,286px);
  flex:none;
  line-height:0;
}
.hero__ball img{
  width:100%;
  display:block;
  filter:drop-shadow(0 24px 34px rgba(20,20,20,.16));
}

/* ============================================================
   полоса доверия — зелёные цифры только внутри плашки ink
   ============================================================ */

.proof-wrap{padding-bottom:clamp(40px,5vw,72px)}

.proof{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:var(--ink);
  color:var(--white);
  border-radius:var(--radius-card);
  padding:clamp(24px,3vw,44px) clamp(20px,2.4vw,36px);
  gap:clamp(16px,2vw,28px);
}
.proof__cell{
  padding-inline:clamp(6px,1.2vw,18px);
  border-left:1px solid rgba(247,247,247,.15);
}
.proof__cell:first-child{border-left:0;padding-left:0}

.proof__num{
  font-weight:var(--w-black);
  font-size:clamp(22px,2.9vw,42px);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--ball);
  font-variant-numeric:tabular-nums lining-nums;
  white-space:nowrap;
}
.proof__label{
  font-weight:600;
  font-size:var(--lp-label);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:rgba(247,247,247,.6);
  margin-top:clamp(8px,1vw,14px);
}

.proof__note{margin-top:clamp(14px,1.6vw,20px)}

/* ============================================================
   форматы
   ============================================================ */

/* 5 продуктов: верхний ряд — две половины, нижний — три трети.
   шесть колонок дают обе дроби без сироты и без перекоса ширин */
.formats{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(12px,1.4vw,20px);
}
.formats .card:nth-child(-n+2){grid-column:span 3}
.formats .card:nth-child(n+3){grid-column:span 2}
.formats .card:nth-child(-n+2) .card__title{font-size:clamp(28px,3vw,40px)}
.formats .card:nth-child(-n+2) .card__text{max-width:42ch}

.card{
  display:flex;
  flex-direction:column;
  background:var(--mist);
  border-radius:var(--radius-card);
  padding:clamp(22px,2.4vw,34px);
  transition:background var(--lp-fast), color var(--lp-fast);
}
.card:hover{background:var(--ink);color:var(--white)}

.card__mark{
  font-size:12px;
  line-height:1;
  color:var(--ball-shade);
  margin-bottom:clamp(16px,2vw,28px);
}
.card:hover .card__mark,
.card:hover .star{color:var(--ball)}

.card__title{
  font-weight:var(--w-black);
  font-size:clamp(24px,2.2vw,32px);
  line-height:var(--leading-headline);
  letter-spacing:-.02em;
  text-transform:lowercase;
}
.card__text{
  font-size:var(--lp-body);
  color:var(--lp-muted);
  margin-top:10px;
  flex:1;
}
.card:hover .card__text{color:rgba(247,247,247,.7)}

.card__meta{
  font-weight:600;
  font-size:var(--lp-label);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--lp-fine-c);
  margin-top:clamp(20px,2.4vw,32px);
}
.card:hover .card__meta{color:var(--ball)}

/* ============================================================
   формат поста + лист 1080×1080
   ============================================================ */

.post{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(32px,5vw,80px);
  align-items:center;
}

.post__text .sec__sub{margin-bottom:clamp(24px,3vw,36px)}

.ticks{display:grid;gap:12px;margin-bottom:clamp(26px,3vw,38px)}
.ticks li{
  position:relative;
  padding-left:1.7em;
  color:var(--text-body);
}
.ticks li::before{
  content:'✓';
  position:absolute;
  left:0;
  top:0;
  font-weight:700;
  color:var(--ball-shade);
}

/* блок, а не грид: при container-type ширина контейнера должна быть
   определена извне, иначе width:100% листа становится циклическим
   и лист схлопывается в max-content */
.sheet-wrap{
  container-type:inline-size;
  display:block;
  width:100%;
}
.sheet-wrap figcaption{text-align:center;margin-top:14px}

/* холст листа: все размеры — доли от 1080, поэтому лист масштабируется целиком */
.sheet{
  --u:calc(100cqw / 1080);
  position:relative;
  width:100%;
  overflow:hidden;
  background:var(--white);
  color:var(--ink);
  border:1px solid var(--divider);
  border-radius:var(--radius-outer); /* внешние края листа прямые */
  font-family:var(--font-text);
}

.sheet__plane{position:absolute;inset:0;background:var(--mist)}
.sheet__plane--tr{clip-path:polygon(100% 0, 100% 30%, 62% 0)}
.sheet__plane--bl{clip-path:polygon(0 100%, 0 82%, 26% 100%)}

.sheet__in{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  padding:calc(56 * var(--u)) calc(80 * var(--u)) calc(48 * var(--u));
}

.sheet__hdr{display:flex;justify-content:space-between;align-items:baseline}
.sheet__mark{font-weight:var(--w-black);font-size:calc(22 * var(--u));letter-spacing:.01em}
.sheet__date{
  font-weight:600;
  font-size:calc(16 * var(--u));
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--loss);
}

.sheet__rubric{
  font-weight:var(--w-black);
  font-size:calc(96 * var(--u));
  line-height:var(--leading-headline);
  letter-spacing:-.02em;
  text-transform:lowercase;
  margin-top:calc(40 * var(--u));
}
.sheet__sub{
  font-weight:600;
  font-size:calc(32 * var(--u));
  color:var(--loss);
  margin-top:calc(6 * var(--u));
  text-transform:lowercase;
}

/* купон: тёмная плашка внутри светлого листа.
   размеры — те же доли от 1080, что и весь лист */
.slip{
  background:var(--ink);
  color:var(--white);
  border-radius:calc(22 * var(--u));
  padding:calc(24 * var(--u));
  margin-top:calc(34 * var(--u));
  flex:1;
}

.slip__top{
  display:flex;
  align-items:center;
  gap:calc(16 * var(--u));
  margin-bottom:calc(20 * var(--u));
}
.slip__mark{
  width:calc(36 * var(--u));
  height:calc(36 * var(--u));
  border:calc(3 * var(--u)) solid var(--ball);
  border-radius:calc(9 * var(--u));
  flex:none;
}
.slip__title{font-weight:700;font-size:calc(34 * var(--u))}

.slip__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:calc(20 * var(--u));
  padding:calc(13 * var(--u)) calc(14 * var(--u));
  border-radius:calc(10 * var(--u));
  background:rgba(247,247,247,.05);
  margin-bottom:calc(4 * var(--u));
  font-size:calc(25 * var(--u));
}
.slip__row--status{background:rgba(247,247,247,.09)}
.slip__status{font-weight:700}
.slip__k{color:rgba(247,247,247,.55)}
.slip__k b{color:var(--white);font-weight:700}
.slip__v{font-weight:600;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}

/* общий кф выпуска — зелёным: цифра живёт на чёрной плашке */
.slip__kf{
  font-weight:var(--w-black);
  font-size:calc(30 * var(--u));
  color:var(--ball);
  font-variant-numeric:tabular-nums lining-nums;
}

.slip__ev{
  display:flex;
  gap:calc(16 * var(--u));
  padding-top:calc(20 * var(--u));
  margin-top:calc(16 * var(--u));
  border-top:1px solid rgba(247,247,247,.12);
}
.slip__ball{
  width:calc(34 * var(--u));
  height:calc(34 * var(--u));
  border-radius:50%;
  background:var(--ball);
  flex:none;
  margin-top:calc(2 * var(--u));
}
.slip__ev-body{flex:1;min-width:0}
.slip__ev-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:calc(16 * var(--u));
  margin-bottom:calc(8 * var(--u));
}
.slip__ev-name{font-weight:700;font-size:calc(28 * var(--u))}
.slip__ev-status{
  font-size:calc(23 * var(--u));
  color:rgba(247,247,247,.55);
  white-space:nowrap;
}
.slip__meta{
  font-size:calc(23 * var(--u));
  line-height:1.45;
  color:rgba(247,247,247,.5);
}
.slip__pick{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:calc(16 * var(--u));
  margin-top:calc(10 * var(--u));
  font-size:calc(25 * var(--u));
  font-weight:600;
}
.slip__pick .num{font-variant-numeric:tabular-nums lining-nums}


.sheet__footer{text-align:center;margin-top:calc(36 * var(--u))}
.sheet__wordmark{font-weight:var(--w-black);font-size:calc(24 * var(--u));letter-spacing:-.01em}
.sheet__wordmark-dots{letter-spacing:.4em;margin:0 -.15em 0 .25em;font-size:.8em;vertical-align:.06em}

/* ============================================================
   статистика — тёмный режим
   ============================================================ */

.stats{
  background:var(--bg-page);
  color:var(--text-body);
}

.chart{margin-bottom:clamp(40px,5vw,72px)}
.chart svg{display:block;width:100%;height:auto;overflow:visible}

.chart__val{
  fill:var(--text-body);
  font-family:var(--font-text);
  font-weight:var(--w-black);
  font-size:18px;
  text-anchor:middle;
  /* крайние подписи прижимаются к краям графика: как атрибуты они бы
     не сработали — правило text-anchor из css сильнее presentation-атрибута */
  font-variant-numeric:tabular-nums lining-nums;
}
.chart__val--start{text-anchor:start}
.chart__val--end{text-anchor:end}

.chart__axis text{
  fill:var(--text-secondary);
  font-family:var(--font-text);
  font-weight:600;
  font-size:20px;
  letter-spacing:.08em;
  text-anchor:middle;
}
.chart__note{margin-top:clamp(16px,2vw,26px)}

/* два числа слева по контенту, плашка денег прижата вправо и
   получает столько ширины, сколько нужно сумме целиком */
.tiles{
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:end;
  gap:clamp(28px,5vw,80px);
}

.tile__num{
  display:flex;
  align-items:baseline;
  gap:.15em;
  font-weight:var(--w-black);
  font-size:var(--lp-num);
  line-height:var(--leading-headline);
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums lining-nums;
}
.tile__icon{font-size:.5em;font-weight:700}
.tile__icon--win{color:var(--win)}
.tile__icon--loss{color:var(--defeat)}
.tile__label{
  font-weight:600;
  font-size:var(--lp-label);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-secondary);
  margin-top:10px;
}

/* плитка денег: плашка ink, сумма ball */
.tile--money{
  justify-self:end;
  background:var(--plaque);
  border:1px solid var(--plaque-border);
  border-radius:var(--radius-card);
  padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);
}
.tile__money-label{
  font-weight:600;
  font-size:var(--lp-label);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:rgba(247,247,247,.6);
}
.tile__money{
  font-weight:var(--w-black);
  font-size:var(--lp-num-sm);
  line-height:1.05;
  letter-spacing:-.03em;
  color:var(--ball);
  font-variant-numeric:tabular-nums lining-nums;
  white-space:nowrap;
  margin-top:8px;
}

/* ============================================================
   тарифы
   ============================================================ */

.plans{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(14px,1.6vw,22px);
  align-items:stretch;
}

.plan{
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid var(--divider);
  border-radius:var(--radius-card);
  padding:clamp(26px,2.8vw,40px);
  transition:border-color var(--lp-fast);
}
.plan:hover{border-color:var(--ink)}

/* выделенный тариф — чёрная плашка, поэтому цена может быть зелёной */
.plan--hi{
  background:var(--ink);
  color:var(--white);
  border-color:var(--ink);
}

.plan__badge{
  position:absolute;
  top:0;
  right:clamp(26px,2.8vw,40px);
  transform:translateY(-50%);
  background:var(--ball);
  color:var(--ink);
  border-radius:var(--radius-pill);
  padding:7px 16px;
  font-weight:700;
  font-size:var(--lp-label);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  white-space:nowrap;
}

.plan__name{
  font-weight:var(--w-black);
  font-size:clamp(26px,2.4vw,34px);
  line-height:var(--leading-headline);
  letter-spacing:-.02em;
  text-transform:lowercase;
}
.plan__price{
  font-weight:var(--w-black);
  font-size:var(--lp-num-sm);
  line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums lining-nums;
  margin-top:clamp(14px,1.6vw,20px);
}
.plan__price--ball{color:var(--ball)}

/* старая цена: отдельной строкой под новой — в колонку они не помещаются,
   поэтому строка сделана намеренной, а не переносом */
.plan__old{
  display:block;
  width:fit-content;
  margin-top:8px;
  font-size:.42em;
  font-weight:700;
  letter-spacing:0;
  color:var(--lp-muted);
  text-decoration-thickness:2px;
  font-variant-numeric:tabular-nums lining-nums;
}
.plan--hi .plan__old{color:rgba(247,247,247,.5)}

.plan__hint{
  font-size:var(--lp-fine);
  color:var(--lp-muted);
  margin-top:10px;
}
.plan--hi .plan__hint{color:rgba(247,247,247,.6)}

.plan__list{
  display:grid;
  align-content:start; /* иначе grid растягивает интервалы в коротком списке */
  gap:11px;
  margin-top:clamp(22px,2.6vw,32px);
  margin-bottom:clamp(26px,3vw,38px);
  flex:1;
}
.plan__list li{
  position:relative;
  padding-left:1.5em;
  font-size:var(--lp-body);
}
.plan__list li::before{
  content:'■';
  position:absolute;
  left:0;
  top:.52em;
  font-size:.6em;
  line-height:1;
  color:var(--ball-shade);
}
.plan--hi .plan__list li::before{color:var(--ball)}

/* уточнение внутри пункта тарифа — мельче и тише самого пункта */
.plan__note{
  display:block;
  font-size:var(--lp-fine);
  color:var(--lp-fine-c);
  margin-top:3px;
}
.plan--hi .plan__note{color:rgba(247,247,247,.6)}

.plan__btn{width:100%}
.plan--hi .btn--ball:hover,.plan--hi .btn--ball:focus-visible{background:transparent;color:var(--ball);border-color:var(--ball)}

.plans__note{margin-top:clamp(18px,2.2vw,28px);text-align:center}

/* ============================================================
   вопросы
   ============================================================ */

.faq-wrap{max-width:900px}
.faq{border-top:1px solid var(--divider)}

.q{border-bottom:1px solid var(--divider)}

.q summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:clamp(18px,2vw,26px) 0;
  font-weight:var(--w-black);
  font-size:clamp(19px,1.9vw,26px);
  letter-spacing:-.02em;
  text-transform:lowercase;
  cursor:pointer;
  list-style:none;
  transition:color var(--lp-fast);
}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--ball-shade)}

/* знак «+» → «−», собранный из двух линий: 2px при базе 24, как иконки системы */
.q__sign{
  position:relative;
  flex:none;
  width:20px;
  height:20px;
}
.q__sign::before,.q__sign::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:2px;
  background:currentColor;
  transform:translate(-50%,-50%);
}
.q__sign::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform var(--lp-fast)}
.q[open] .q__sign::after{transform:translate(-50%,-50%) rotate(0deg)}

.q__body{
  padding-bottom:clamp(20px,2.2vw,28px);
  max-width:62ch;
}
.q__body p{color:var(--lp-muted)}

/* ============================================================
   финальный экран
   ============================================================ */

.cta-final{
  position:relative;
  overflow:hidden;
  text-align:center;
}
.cta-final__in{
  position:relative;
  z-index:1;
  display:grid;
  justify-items:center;
  gap:clamp(18px,2.2vw,28px);
}
.cta-final .sec__sub{margin-top:0}

/* ============================================================
   футер
   ============================================================ */

.ftr{
  border-top:1px solid var(--divider);
  padding-block:clamp(40px,5vw,72px);
  text-align:center;
}
.ftr__wordmark{
  font-weight:var(--w-black);
  font-size:clamp(24px,2.6vw,36px);
  letter-spacing:-.01em;
  text-transform:lowercase;
}
/* трекинг точек добавляет пробел и после последней — гасим правым margin */
.ftr__dots{letter-spacing:.4em;margin:0 -.15em 0 .25em;font-size:.8em;vertical-align:.06em}

.ftr__nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(14px,2vw,28px);
  margin-top:clamp(22px,2.6vw,34px);
}
.ftr__nav a{
  font-weight:600;
  font-size:15px;
  text-transform:lowercase;
  text-decoration:none;
  color:var(--lp-muted);
  transition:color var(--lp-fast);
}
.ftr__nav a:hover{color:var(--text-body)}

.ftr__fine{margin-top:clamp(22px,2.6vw,34px)}
.ftr__legal{margin-top:14px;line-height:1.6}
.ftr__disclaimer{
  max-width:62ch;
  margin:12px auto 0;
  color:var(--lp-muted);
}

/* ============================================================
   документы: оферта и политика
   плотный служебный текст, узкая колонка, без воздуха лендинга
   ============================================================ */

.hdr__back{margin-left:auto;font-size:15px}

.doc{max-width:74ch}
.doc__lead{
  font-size:var(--lp-body);
  color:var(--lp-muted);
  margin-top:clamp(12px,1.4vw,18px);
  margin-bottom:clamp(32px,4vw,52px);
}

.doc h2{
  font-weight:var(--w-black);
  font-size:clamp(19px,1.8vw,24px);
  line-height:1.2;
  letter-spacing:-.01em;
  margin-top:clamp(30px,3.4vw,46px);
  margin-bottom:clamp(10px,1.2vw,16px);
}

.doc p{margin-bottom:12px;text-wrap:pretty}
.doc p:last-child{margin-bottom:0}
.doc b{font-weight:700}

.doc__list{display:grid;gap:12px;margin:0 0 12px}
.doc__list li{position:relative;padding-left:1.5em}
.doc__list li::before{
  content:'■';
  position:absolute;
  left:0;
  top:.52em;
  font-size:.6em;
  line-height:1;
  color:var(--ball-shade);
}


/* ============================================================
   страница оплаты
   форма должна помещаться в один экран вместе с кнопкой,
   поэтому на широких экранах текст и форма стоят рядом,
   а вертикальные отступы считаются от высоты окна, не ширины
   ============================================================ */

.sec--pay{padding-block:clamp(24px, 5vh, 64px)}

.pay-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,400px);
  gap:0 clamp(28px,5vw,72px);
}
/* текст слева в двух строках сетки, форма справа на всю высоту —
   так сноска про оферту стоит под текстом и не тянет блок вниз */
.pay__intro{grid-column:1;grid-row:1;max-width:34ch;align-self:end}
.pay__terms{grid-column:1;grid-row:2;max-width:44ch;align-self:start;margin-top:clamp(14px,1.8vw,22px)}
.pay__box{grid-column:2;grid-row:1 / span 2;align-self:center}

/* страницы «оплачено» и «не прошёл» — простая колонка */
.pay{max-width:52ch}

/* плашка с суммой: зелёные цифры на чёрном — правило системы */
.pay__plaque{
  display:flex;
  flex-direction:column;
  gap:6px;
  background:var(--ink);
  color:var(--white);
  border-radius:var(--radius-card);
  padding:clamp(16px,1.8vw,22px) clamp(20px,2.2vw,28px);
}
.pay .pay__plaque{display:inline-flex;margin-top:clamp(24px,3vw,36px)}

.pay__plaque-label{
  font-weight:600;
  font-size:var(--lp-label);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:rgba(247,247,247,.6);
}
.pay__amount{
  font-weight:var(--w-black);
  font-size:clamp(34px,3.6vw,50px);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--ball);
  font-variant-numeric:tabular-nums lining-nums;
}
.pay__tick{color:var(--ball-shade)}

.pay__form{display:grid;gap:12px;margin-top:clamp(18px,2.2vw,26px)}
.pay__field{display:grid;gap:8px}
.pay__label{
  font-weight:600;
  font-size:var(--lp-label);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--lp-fine-c);
}
.pay__input{
  font-family:var(--font-text);
  font-size:var(--lp-body);
  font-weight:500;
  color:var(--text-body);
  background:transparent;
  border:1px solid var(--divider);
  border-radius:var(--radius-card);
  padding:.85em 1em;
  width:100%;
  transition:border-color var(--lp-fast);
}
.pay__input:hover{border-color:rgba(20,20,20,.35)}
.pay__input:focus{outline:none;border-color:var(--ink)}
.pay__input::placeholder{color:var(--loss)}

.pay__hint{
  font-size:var(--lp-fine);
  line-height:1.5;
  color:var(--lp-fine-c);
}
.pay__submit{margin-top:4px;width:100%}

@media (max-width:860px){
  /* в одну колонку: текст, форма, сноска — сноска сама встаёт под кнопку */
  .pay-grid{grid-template-columns:1fr;gap:clamp(22px,4vw,32px)}
  .pay__intro,.pay__box,.pay__terms{grid-column:auto;grid-row:auto;max-width:none}
  .pay__terms{margin-top:0}
}

/* ============================================================
   появление при скролле — коротко и резко
   ============================================================ */

.reveal{opacity:0;transform:translateY(14px)}
.reveal.is-in{
  opacity:1;
  transform:none;
  transition:opacity 260ms linear, transform var(--lp-move);
}

/* линия графика прорисовывается при попадании в кадр */
[data-chart-line]{stroke-dasharray:1;stroke-dashoffset:1}
[data-chart-area],[data-chart-points]{opacity:0}
.chart.is-in [data-chart-line]{transition:stroke-dashoffset 900ms cubic-bezier(.35,.1,.25,1);stroke-dashoffset:0}
.chart.is-in [data-chart-area]{transition:opacity 500ms linear 500ms;opacity:1}
.chart.is-in [data-chart-points]{transition:opacity 300ms linear 700ms;opacity:1}

/* ============================================================
   адаптив
   ============================================================ */

@media (max-width:1000px){
  .post{grid-template-columns:1fr;gap:clamp(28px,4vw,44px)}
  .sheet-wrap{max-width:560px;margin-inline:auto}
  .hero__text{max-width:none}
}

@media (max-width:900px){
  .formats{grid-template-columns:repeat(2,1fr)}
  .formats .card:nth-child(-n+2),
  .formats .card:nth-child(n+3){grid-column:span 1}
  .formats .card:first-child{grid-column:span 2}
  .formats .card:nth-child(-n+2) .card__title{font-size:clamp(26px,3.4vw,34px)}
}

@media (max-width:860px){
  .hdr__nav{display:none}
  .proof{grid-template-columns:repeat(2,1fr);row-gap:clamp(22px,3vw,32px)}
  .proof__cell:nth-child(odd){border-left:0;padding-left:0}
  .tiles{grid-template-columns:auto auto;row-gap:clamp(24px,4vw,40px)}
  .tile--money{grid-column:span 2;justify-self:start}
}

@media (max-width:680px){
  .hero__in{grid-template-columns:1fr;justify-items:start}
  .hero__ball{
    order:-1;
    width:clamp(128px,38vw,190px);
    margin-bottom:clamp(8px,2vw,18px);
  }
  .hero__cta{gap:20px}
  .hero__cta .btn--ink{width:100%}
  .plans{grid-template-columns:1fr}
  .plan__badge{right:auto;left:clamp(26px,2.8vw,40px)}
  .tiles{grid-template-columns:1fr;align-items:stretch}
  .tile--money{grid-column:auto;justify-self:stretch}
  /* на узком экране подписи точек сливаются: оставляем январь и июль,
     промежуточные значения остаются в подписи к графику и в aria-label */
  .chart__val{font-size:26px}
  .chart__val--mid{display:none}
  .chart__axis text{font-size:26px}
}

@media (max-width:560px){
  .formats{grid-template-columns:1fr}
  .formats .card,
  .formats .card:first-child{grid-column:auto}
}

@media (max-width:480px){
  .proof{grid-template-columns:1fr}
  .proof__cell{border-left:0;padding-left:0}
  .hdr__cta{padding:.65em 1.1em;font-size:14px}
}

/* ============================================================
   печать и пониженная подвижность
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  [data-chart-line]{stroke-dasharray:none;stroke-dashoffset:0}
  [data-chart-area],[data-chart-points]{opacity:1}
  .chart.is-in [data-chart-line],
  .chart.is-in [data-chart-area],
  .chart.is-in [data-chart-points]{transition:none}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

@media print{
  .grain::after,.hdr,.plane{display:none}
  .reveal{opacity:1;transform:none}
}