/* Лёгкая главная. Правило: один экран — одна мысль — одна картинка.
   Мотив прежний — полоса из двухсот недель и кнопка с лампой, — но на
   светлой бумаге, крупным шрифтом и с воздухом вместо плашек. */
:root{
  --bg:#F4F3EE; --paper:#FFFFFF;
  --ink:#121412; --ink-2:#5B615C; --ink-3:#9A9F99;
  --line:#DCDBD3; --lit:#E5532A;
  --sans:'Golos Text',system-ui,-apple-system,sans-serif;
  --serif:'PT Serif',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,.84,.28,1);
  --gut:clamp(16px,4vw,64px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
::selection{background:var(--lit);color:#fff}

/* ── шапка ─────────────────────────────────────────── */
.top{display:flex;align-items:center;justify-content:space-between;padding:24px var(--gut) 0;max-width:1600px;margin:0 auto}
.top .id img{display:block;height:28px;width:auto}
.top nav{display:flex;align-items:center;gap:22px}
.top nav a{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.top nav a:hover{color:var(--ink)}
.top nav .lang{font-family:var(--mono);font-size:11px;letter-spacing:.08em;white-space:nowrap;color:var(--ink-3)}
.top nav .lang b{font-weight:500;color:var(--ink)}
.top nav .lang i{font-style:normal;margin:0 6px}

/* ── кнопка: рамка и лампа справа; на наведении лампа заливает всё ── */
.go{position:relative;isolation:isolate;display:inline-flex;align-items:center;height:56px;padding:0 76px 0 26px;
  background:var(--ink);color:#fff;border:1px solid var(--ink);font-family:var(--mono);font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;transition:color .2s .06s}
.go::before{content:'';position:absolute;z-index:-1;top:-1px;bottom:-1px;right:-1px;width:56px;background:var(--lit);
  transition:width .5s var(--ease)}
.go::after{content:'→';position:absolute;right:21px;font-size:15px;color:#fff;transition:transform .4s var(--ease)}
.go:hover::before{width:calc(100% + 2px)}
.go:hover::after{transform:translateX(5px)}
.go:active{transform:translateY(1px)}
.go.ghost{background:transparent;color:var(--ink)}
.go.ghost::before{background:var(--ink)}
.go.ghost:hover{color:#fff}

/* ── 1. первый экран ───────────────────────────────── */
.hero{max-width:1600px;margin:0 auto;padding:clamp(56px,11vh,120px) var(--gut) 0;min-height:calc(100svh - 52px);display:flex;flex-direction:column}
.hero h1{margin:0;font-weight:600;font-size:clamp(46px,8.6vw,150px);line-height:.95;letter-spacing:-.048em}
.hero .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero .ln>span{display:inline-block}
.hero .soft{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.025em;color:var(--ink-2);font-size:.62em;margin-top:.14em}
.n200{font-style:normal;color:var(--lit);position:relative}

.under{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:28px 48px;margin-top:clamp(36px,6vh,64px)}
.sub{margin:0;max-width:440px;font-size:clamp(17px,1.35vw,20px);line-height:1.45;color:var(--ink-2)}
.sub b{font-weight:600;color:var(--ink)}
.cta{display:flex;flex-wrap:wrap;gap:12px}

/* Полоса: двести засечек во всю ширину. Под курсором засечки вырастают
   волной и подсказывают номер недели; первые десять горят. */
.weeks{position:relative;margin-top:auto;padding-top:clamp(48px,8vh,96px);height:calc(clamp(110px,16vh,170px) + clamp(48px,8vh,96px));cursor:crosshair;touch-action:pan-y}
.ticks{position:absolute;left:0;right:0;bottom:0;height:clamp(110px,16vh,170px);display:flex;align-items:flex-end}
.ticks i{flex:1;height:100%;display:flex;justify-content:center;align-items:flex-end}
.ticks i::before{content:'';width:max(1px,.14vw);height:calc(var(--h,.28) * 100%);background:var(--ink-3);
  transform-origin:bottom;transition:height .5s var(--ease),background-color .3s}
.ticks i:nth-child(10n)::before{background:var(--ink-2)}
.ticks i.lit::before{background:var(--lit)}
.ticks i.on::before{background:var(--ink)}
.ticks i.lit.on::before{background:var(--lit)}
.weeks .tip{position:absolute;bottom:calc(clamp(110px,16vh,170px) + 12px);left:0;margin:0;transform:translateX(-50%);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;white-space:nowrap;color:var(--ink);opacity:0;transition:opacity .2s;pointer-events:none}
.weeks .tip b{font-weight:500}
.weeks .tip em{font-style:normal;color:var(--lit);margin-left:8px}
.weeks.hover .tip{opacity:1}
.key{display:flex;justify-content:space-between;gap:16px;margin:14px 0 28px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3)}
.key .lit{color:var(--lit)}

/* ── счётчик прокрутки ─────────────────────────────── */
.run{position:fixed;z-index:20;left:0;right:0;top:0;height:3px;pointer-events:none}
.run i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--lit);transform:scaleX(var(--p,0));transform-origin:left}
.run span{position:fixed;right:var(--gut);bottom:20px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-2);
  opacity:0;transform:translateY(8px);transition:opacity .3s,transform .4s var(--ease)}
.run span b{font-weight:500;color:var(--ink)}
.run.show span{opacity:1;transform:none}

/* ── общие для экранов 2–7 ─────────────────────────── */
.fork,.post{max-width:1600px;margin:0 auto;padding:clamp(110px,18vh,200px) var(--gut);display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,6vw,120px);align-items:center}
.say .no{margin:0 0 22px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--lit)}
.say h2{margin:0;font-size:clamp(38px,4.6vw,76px);line-height:1;letter-spacing:-.04em;font-weight:600}
.say h2 em{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;color:var(--ink-2)}
.say .sub{margin-top:26px}
.bar{display:flex;justify-content:space-between;gap:12px;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.bar i{display:inline-block;width:7px;height:7px;background:var(--lit);margin-right:9px;vertical-align:1px}

/* Появление при прокрутке: блок всплывает один раз. */
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
  .js .rv+.rv{transition-delay:.12s}
  .js .rv.in{opacity:1;transform:none}
}

/* ── 2. развилка: тёмный кадр из игры на светлой бумаге ── */
.card{background:var(--ink);color:#EDEDE6;padding:clamp(24px,3vw,44px);transform-origin:center}
.card .bar{color:#8C928C}
.card .ask{margin:clamp(28px,4vh,48px) 0 clamp(24px,3vh,36px);font-family:var(--serif);font-size:clamp(22px,2vw,30px);line-height:1.3;color:#fff}
.opts{display:grid;gap:8px}
.opts button{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;
  border:1px solid #3A3F3B;cursor:pointer;font-family:var(--sans);font-size:17px;color:#EDEDE6;transition:border-color .2s,background-color .2s,transform .3s var(--ease)}
.opts button em{font-style:normal;font-family:var(--mono);font-size:11px;color:#8C928C}
.opts button:hover{border-color:#EDEDE6;transform:translateX(6px)}
.opts button:focus-visible{outline:2px solid var(--lit);outline-offset:2px}
.opts button.pick{background:var(--lit);border-color:var(--lit);color:#fff}
.opts button.pick em{color:#fff}
.opts button.dim{opacity:.38}
.out{min-height:118px;margin-top:22px;padding-top:20px;border-top:1px dashed #3A3F3B}
.out .hint{margin:0;font-family:var(--mono);font-size:11px;color:#8C928C}
.out .res{margin:0;font-size:18px;line-height:1.45;color:#fff}
.out .res b{color:var(--lit);font-weight:500}
.out .cost{margin:10px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#8C928C}
.out .again{all:unset;cursor:pointer;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#EDEDE6;border-bottom:1px solid #6B716C}
.out .again:hover{color:var(--lit);border-color:var(--lit)}
.out>*{animation:fade .5s var(--ease) both}

/* ── 3. касса: экран прилипает, прокрутка ведёт график ── */
.cash{height:280vh;position:relative;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cash .pin{position:sticky;top:0;height:100svh;max-width:1600px;margin:0 auto;padding:clamp(70px,12vh,130px) var(--gut) clamp(32px,6vh,64px);display:flex;flex-direction:column}
.cash h2{font-size:clamp(40px,6.4vw,112px)}
.plot{flex:1;display:flex;flex-direction:column;margin-top:clamp(24px,5vh,56px);min-height:0}
.plot .cv{flex:1;position:relative;min-height:120px}
.plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.plot .zero{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.plot .ln{fill:none;stroke:var(--ink);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.plot .area{fill:var(--lit);opacity:.07}
.plot .dot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--ink);color:var(--ink);transition:background-color .3s}
.plot .dot::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:1px solid currentColor;opacity:.35}
.cash.low .plot .ln{stroke:var(--lit)}
.cash.low .plot .dot{background:var(--lit);color:var(--lit)}
.read{display:flex;flex-wrap:wrap;gap:8px 44px;margin:22px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-3)}
.read b{font-weight:500;color:var(--ink);font-size:clamp(16px,1.6vw,22px);margin-left:8px;font-variant-numeric:tabular-nums}
.cash.low .read [data-r]{color:var(--lit)}

/* ── 4. разбор: лист бумаги с волосяной рамкой ───────── */
.sheet{background:var(--paper);border:1px solid var(--line);padding:clamp(24px,3vw,48px)}
.sheet .bar{color:var(--ink-3)}
.sheet .big{margin:clamp(28px,4vh,44px) 0 12px;font-size:clamp(28px,3vw,46px);line-height:1.08;letter-spacing:-.03em;font-weight:600}
.sheet .big b{color:var(--lit);font-weight:600}
.sheet .turn{margin:0 0 clamp(28px,4vh,44px);font-family:var(--serif);font-size:clamp(17px,1.4vw,21px);color:var(--ink-2)}
.sheet .turn b{color:var(--ink)}
.sheet .cap{margin:0 0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.lev{display:grid;grid-template-columns:130px 1fr;gap:6px 20px;align-items:center;margin-bottom:18px}
.lev span{font-size:16px}
.lev i{height:12px;background:var(--bg);position:relative;overflow:hidden}
.lev i::after{content:'';position:absolute;inset:0;background:var(--ink);transform:scaleX(var(--v));transform-origin:left;transition:transform 1.4s var(--ease) .5s}
.lev.weak i::after{background:var(--ink-3)}
.lev em{grid-column:2;font-style:normal;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.js .sheet:not(.in) .lev i::after{transform:scaleX(0)}
.rank{display:flex;flex-direction:column;gap:6px;margin:28px 0 0;padding-top:18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.rank b{font-family:var(--sans);font-size:clamp(18px,1.6vw,24px);font-weight:600;color:var(--ink);text-transform:none;letter-spacing:-.01em}

/* ── 5. один мир на двоих: номер мира — главная картинка ── */
.seed{max-width:1600px;margin:0 auto;padding:clamp(110px,18vh,200px) var(--gut);display:grid;grid-template-columns:5fr 7fr;
  grid-template-areas:"say world" "cta world";gap:40px clamp(40px,6vw,120px);align-items:end}
.seed .say{grid-area:say}
.seed .cta{grid-area:cta;align-self:start}
.world{grid-area:world;margin:0;text-align:right;line-height:.8}
.world .lbl{display:block;margin-bottom:18px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.world b{display:inline-block;font-size:clamp(120px,21vw,340px);font-weight:600;letter-spacing:-.07em;font-variant-numeric:tabular-nums;color:var(--ink)}
.go[data-copy]{font:inherit;font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.go.ok::before{width:calc(100% + 2px);background:var(--lit)}
.go.ok{color:#fff}

/* ── 6. цена: две цифры над одной полосой ───────────── */
.price{max-width:1600px;margin:0 auto;padding:clamp(110px,18vh,200px) var(--gut);border-top:1px solid var(--line)}
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-top:clamp(48px,8vh,96px)}
.tiers .t b{display:block;font-size:clamp(64px,10vw,170px);font-weight:600;letter-spacing:-.06em;line-height:.9;white-space:nowrap}
.tiers .free b{color:var(--lit)}
.tiers .t span{display:block;margin:18px 0 26px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;line-height:1.6;color:var(--ink-2)}
.tiers .split{grid-column:1/-1;height:46px;
  background:repeating-linear-gradient(90deg,var(--ink-3) 0 1px,transparent 1px .5%);
  -webkit-mask:linear-gradient(#000,#000);position:relative}
.tiers .split::before{content:'';position:absolute;left:0;top:-14px;bottom:0;width:5%;
  background:repeating-linear-gradient(90deg,var(--lit) 0 2px,transparent 2px 10%)}
.price .cta{margin-top:clamp(36px,6vh,56px)}
.terms{margin:22px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3)}
.terms a{color:var(--ink-2)}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:clamp(64px,10vh,110px)}
.faq details{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:22px 0;font-size:18px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--mono);font-weight:400;color:var(--ink-3);transition:transform .35s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--lit)}
.faq summary:hover{color:var(--lit)}
.faq p{margin:0 0 24px;max-width:560px;color:var(--ink-2);line-height:1.55}

/* ── 7. блог: заголовки строками, стрелка выезжает на наведении ── */
.reads{max-width:1600px;margin:0 auto;padding:clamp(110px,18vh,200px) var(--gut) clamp(80px,12vh,140px);border-top:1px solid var(--line)}
.reads .sub a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--lit)}
.list{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;margin-top:clamp(48px,8vh,80px)}
.list a{position:relative;display:block;padding:20px 40px 20px 0;border-top:1px solid var(--line);text-decoration:none;
  font-size:clamp(19px,1.7vw,26px);letter-spacing:-.015em;transition:color .25s,padding-left .45s var(--ease)}
.list a b{font-weight:500}
.list a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.list a::after{content:'→';position:absolute;right:4px;top:50%;transform:translate(-12px,-50%);opacity:0;color:var(--lit);transition:transform .45s var(--ease),opacity .25s}
.list a:hover{color:var(--lit);padding-left:14px}
.list a:hover::after{opacity:1;transform:translate(0,-50%)}

/* ── финал: полоса пройдена, клеймо во всю ширину ───── */
.last{max-width:1600px;margin:0 auto;padding:0 var(--gut)}
.last .weeks{margin:0;padding:0;height:90px;cursor:default}
.last .ticks{height:90px}
.last .ticks i::before{height:calc(var(--h) * 100%);background:var(--ink-3);transition:background-color .2s calc(var(--k) * 4ms)}
.last .ticks.in i::before{background:var(--lit)}
.end{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px;margin-top:clamp(56px,9vh,100px)}
.end h2{margin:0;font-size:clamp(40px,5.6vw,96px);line-height:.98;letter-spacing:-.045em;font-weight:600}
.end h2 em{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;color:var(--ink-2)}
.mark{margin:clamp(80px,12vh,140px) 0 0;font-size:min(15.4vw,236px);font-weight:600;letter-spacing:-.065em;line-height:.74;white-space:nowrap;
  color:var(--ink);user-select:none;max-width:100%;overflow:hidden}
footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 44px;margin-top:40px;padding:22px 0 64px;
  border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;color:var(--ink-3);line-height:1.8}
footer>div:first-child{display:flex;flex-wrap:wrap;gap:0 18px}
footer>div:last-child{max-width:520px}
footer a{color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--lit)}

/* ── появление первого экрана ───────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .hero .ln>span{transform:translateY(105%);animation:up 1s var(--ease) forwards}
  .hero .ln:nth-child(2)>span{animation-delay:.08s}
  .hero .ln:nth-child(3)>span{animation-delay:.18s}
  .under,.key{opacity:0;animation:fade .9s var(--ease) .45s forwards}
  .ticks i::before{height:0}
  .ticks.in i::before{height:calc(var(--h,.28) * 100%);transition-delay:calc(var(--k) * 3ms)}
  .ticks.in.done i::before{transition-delay:0s}
}
/* Без анимаций график сразу нарисован целиком — прилипать экрану незачем. */
@media (prefers-reduced-motion:reduce){
  .cash{height:auto}
  .cash .pin{position:static}
  *,*::before,*::after{transition-duration:0s !important;animation-duration:0s !important}
}
@keyframes up{to{transform:none}}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── телефон ───────────────────────────────────────── */
@media (max-width:640px){
  .top nav{gap:14px}
  .top nav a{font-size:10.5px;letter-spacing:.04em}
  .hero{min-height:auto;padding-top:48px}
  .hero .soft{font-size:.7em}
  .cta{width:100%}
  .go{width:100%;justify-content:flex-start}
  .key{flex-direction:column;gap:4px}
  .fork,.post{grid-template-columns:1fr;padding-top:96px;padding-bottom:96px}
  .opts button{font-size:16px;padding:16px}
  .lev{grid-template-columns:96px 1fr}
  .cash{height:220vh}
  .run span{display:none}
  .seed{grid-template-columns:1fr;grid-template-areas:"say" "world" "cta";padding-top:96px;padding-bottom:96px}
  .world{text-align:left}
  .price,.reads{padding-top:96px;padding-bottom:96px}
  .tiers{gap:0 20px}
  .faq,.list{grid-template-columns:1fr}
  .end .cta{width:100%}
}

/* ── постраничная прокрутка ────────────────────────────
   Одно смахивание — один экран: браузер доводит прокрутку до
   следующего раздела и ставит его по центру. Каждый раздел занимает
   экран целиком, содержание — посередине. Касса длиннее экрана
   (её график ведёт прокрутка) — внутри неё прокрутка свободная. */
html{scroll-snap-type:y mandatory}
.hero{scroll-snap-align:end}
.fork,.post,.seed,.price,.reads{min-height:100svh;padding-top:clamp(56px,9vh,110px);padding-bottom:clamp(56px,9vh,110px);
  scroll-snap-align:center;scroll-snap-stop:always}
.fork,.post,.seed{align-content:center}
.price,.reads{display:flex;flex-direction:column;justify-content:center}
.price .tiers{margin-top:clamp(32px,5vh,64px)}
.price .faq{margin-top:clamp(36px,6vh,72px)}
.reads .list{margin-top:clamp(28px,5vh,56px)}
.cash{scroll-snap-align:start}
.last{scroll-snap-align:end}
/* Чтобы цена и первый экран помещались и на низком экране ноутбука. */
.tiers .t b{font-size:clamp(64px,min(10vw,16vh),170px)}
.faq summary{padding:16px 0}
.hero h1{font-size:clamp(46px,min(8.6vw,13.5vh),150px)}
@media (max-width:640px){
  .fork,.post,.seed,.price,.reads{padding-top:48px;padding-bottom:48px}
}

/* ── слои при переходе между экранами (значения ставит land.js) ── */
@media (prefers-reduced-motion:no-preference){
  .fork,.post,.seed,.price,.reads{opacity:calc(1 - var(--a,0) * .7)}
  .fork>:first-child,.post>:first-child,.seed>.say,.price>.say,.reads>.say,.hero h1{translate:0 calc(var(--d,0) * 60px)}
  .fork>.card,.post>.sheet,.seed>.world,.price>.tiers,.reads>.list{translate:0 calc(var(--d,0) * 150px);scale:calc(1 - var(--a,0) * .06)}
  .seed>.cta,.price>.cta,.price>.terms,.price>.faq{translate:0 calc(var(--d,0) * 190px)}
  .hero .under{translate:0 calc(var(--d,0) * 120px)}
}

/* ── кнопки «наверх» и «в конец» — слева внизу, одна над другой ── */
.jump{position:fixed;z-index:20;left:var(--gut);bottom:20px;display:flex;flex-direction:column;gap:6px}
.jump button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;height:34px;padding:0 14px 0 0;cursor:pointer;
  background:var(--bg);border:1px solid var(--ink);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  transition:opacity .35s,translate .45s var(--ease),background-color .2s,color .2s}
.jump button span{display:grid;place-items:center;width:32px;height:100%;background:var(--ink);color:#fff;transition:background-color .2s}
.jump button:hover{background:var(--ink);color:#fff}
.jump button:hover span{background:var(--lit)}
.jump button:focus-visible{outline:2px solid var(--lit);outline-offset:2px}
.jump button[hidden]{display:flex;opacity:0;translate:-12px 0;pointer-events:none;visibility:hidden;transition:opacity .35s,translate .45s var(--ease),visibility 0s .35s}
@media (max-width:640px){
  .jump{bottom:12px}
  .jump button{height:34px;width:34px;padding:0;font-size:0;gap:0}
  .jump button span{width:100%;font-size:14px}
}
/* Подвал заканчивается выше кнопок, чтобы они не ложились на ссылки. */
footer{padding-bottom:120px}

/* ── живой забег на полосе первого экрана ──────────────
   Засечка — неделя, высота — касса; сыгранные темнеют, текущая горит,
   недели после конца забега гаснут. Над полосой — событие и показания. */
.ticks i.p::before{background:var(--ink)}
.ticks i.lit.p::before,.ticks i.cur::before{background:var(--lit)}
.ticks i.gone::before{opacity:.3}
.live{position:absolute;left:0;right:0;bottom:calc(clamp(110px,16vh,170px) + 14px);pointer-events:none;transition:opacity .2s}
.live[hidden]{display:block;opacity:0}
.weeks.hover .live{opacity:0}
.live .ev{margin:0 0 8px;min-height:1.4em;max-width:760px;font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.3vw,19px);line-height:1.35;color:var(--ink-2)}
.live .ev.on{animation:fade .5s var(--ease) both}
.live .ev .dim{color:var(--ink-3)}
.live .ev b{font-family:var(--sans);font-style:normal;font-weight:600;color:var(--ink)}
.live .ev a{pointer-events:auto;margin-left:10px;font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--lit);white-space:nowrap}
.live .ev a::after{content:' →';color:var(--lit)}
.live .ev a:hover{color:var(--lit)}
.live .meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-3)}
.live .meta b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.live .meta i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lit);margin-right:9px;vertical-align:1px;animation:blink 1.4s steps(2) infinite}
.live.over .meta i{animation:none;background:var(--ink-3)}
@keyframes blink{50%{opacity:.2}}
.weeks{padding-top:clamp(64px,9vh,110px);height:calc(clamp(96px,13vh,170px) + clamp(64px,9vh,110px))}
.weeks .ticks{height:clamp(96px,13vh,170px)}
.weeks .tip,.live{bottom:calc(clamp(96px,13vh,170px) + 12px)}
.hero{padding-top:clamp(40px,8vh,120px)}

/* ── приглашения в игру под демонстрациями ── */
.nudge{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--lit);padding-bottom:3px;transition:color .2s}
.nudge::after{content:'→';display:inline-block;margin-left:10px;color:var(--lit);transition:transform .35s var(--ease)}
.nudge:hover{color:var(--lit)}
.nudge:hover::after{transform:translateX(5px)}
.say .nudge{margin-top:28px}
.read .nudge{margin-left:auto;align-self:center}
.out .next{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;margin:14px 0 0}
.out .next .again{margin-top:0}
.out .more{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#fff;text-decoration:none;border-bottom:1px solid var(--lit);margin-left:auto}
.out .more::after{content:' →';color:var(--lit)}
.out .more:hover{color:var(--lit)}
.end .go[href^="mailto:"]{background:transparent;color:var(--ink-2);border-color:var(--line)}
.end .go[href^="mailto:"]::before{background:var(--line)}
.end .go[href^="mailto:"]:hover{color:var(--ink)}
/* Ссылка на бота — строкой под кнопками: кто не готов играть сейчас, уходит в Telegram */
.end .tg{flex-basis:100%;max-width:52ch;margin:6px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.03em;line-height:1.7;color:var(--ink-2)}
.end .tg a{color:var(--ink);text-underline-offset:3px}
.end .tg a:hover{color:var(--lit)}

/* ── «В игру» справа внизу — со второго экрана ── */
.go.float{position:fixed;z-index:20;right:var(--gut);bottom:20px;height:44px;padding:0 62px 0 20px;font-size:12px;
  transition:opacity .35s,translate .45s var(--ease),color .3s}
.go.float::before{width:44px}
.go.float::after{right:15px}
.go.float:hover::before{width:calc(100% + 2px)}
.go.float[hidden]{display:inline-flex;opacity:0;translate:0 12px;pointer-events:none;visibility:hidden;transition:opacity .35s,translate .45s var(--ease),visibility 0s .35s}
.run span{bottom:76px}
/* Подпись под полосой — выше кнопки «в конец». */
.hero .key{margin-bottom:64px}
@media (max-width:640px){
  .weeks{padding-top:118px;height:calc(clamp(110px,16vh,170px) + 118px)}
  .live .meta{font-size:10px}
  .live .ev a{display:inline-block;margin:6px 0 0}
  .read .nudge{margin-left:0}
  .go.float{width:auto;bottom:12px}
}
/* Низкий экран ноутбука: первый экран целиком, вместе с шапкой. */
@media (max-height:780px) and (min-width:641px){
  .hero{padding-top:5vh}
  .weeks{padding-top:52px;height:calc(clamp(96px,13vh,170px) + 52px)}
  .hero .key{margin-bottom:56px}
}
/* На телефоне первый экран длиннее окна — притягивать к началу, чтобы шапка не уезжала. */
@media (max-width:640px){ .hero{scroll-snap-align:start;scroll-margin-top:200px} }
/* Касса: показания под графиком — выше кнопок, прижатых к низу окна. */
.cash .pin{padding-bottom:112px}
@media (max-width:640px){ .cash .pin{padding-bottom:64px} }
.end .go[href^="mailto:"]::after{color:var(--ink)}
@media (max-width:640px){
  .cash .pin{padding-bottom:84px}
  .go.float{height:34px;padding:0 48px 0 14px;font-size:11px}
  .go.float::before{width:34px}
  .go.float::after{right:10px;font-size:13px}
}
/* Телефон: кнопки внизу — на сплошной полоске, чтобы текст уходил под неё,
   а не просвечивал между кнопками. На первом экране полоски и кнопок нет. */
@media (max-width:640px){
  .jump{flex-direction:row;bottom:12px}
  body:not(.deep) .jump{opacity:0;pointer-events:none}
  body.deep::after{content:'';position:fixed;z-index:19;left:0;right:0;bottom:0;height:58px;background:var(--bg);border-top:1px solid var(--line)}
  .last{scroll-snap-align:start}
}
/* Телефон: живой забег должен влезать в первый экран. */
@media (max-width:640px){
  .hero{padding-top:28px}
  .under{margin-top:24px;gap:20px}
  .cta .go{height:50px}
  .go::before{width:50px}
  .weeks{padding-top:104px;height:calc(76px + 104px)}
  .weeks .ticks{height:76px}
  .weeks .tip,.live{bottom:88px}
  .hero .key{margin:10px 0 20px}
  .last{padding-top:40px}
}
@media (max-width:640px){ .weeks{padding-top:116px;height:calc(76px + 116px)} .hero h1{font-size:min(10.2vw,46px)} }
/* Маленький телефон (iPhone SE): заголовок мельче, чтобы забег был виден сразу. */
@media (max-width:640px) and (max-height:700px){
  .hero h1{font-size:38px}
  .hero .soft{font-size:.66em}
  .sub{font-size:15.5px}
  .cta .go{height:46px}
  .go::before{width:46px}
}
/* Ноутбук: вопросы на экране цены — выше кнопок «наверх» и «в конец». */
@media (min-width:641px){ .price{padding-bottom:max(110px,9vh)} }