/* Kindware — первый экран и «кино»: каждая программа на весь экран со своей живой сценой.
   Сцены нарисованы в единицах cqw (1% ширины сцены) — поэтому одинаково ложатся на телефон и компьютер. */

.section{padding-block:var(--section)}
.section-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--s3);row-gap:var(--s3);margin-bottom:var(--s7)}
.section-head .label{grid-column:1 / -1;margin-bottom:var(--s3)}
.section-head h2{grid-column:1 / span 8;font-size:var(--t-h2)}
.section-head .intro{grid-column:9 / span 4;align-self:end;color:var(--ink-2);max-width:40ch}
.paper{background:var(--paper);color:var(--paper-ink)}
.paper .section-head .intro{color:var(--paper-ink-2)}
@media (max-width:860px){
  .section-head{margin-bottom:var(--s6)}
  .section-head h2,.section-head .intro{grid-column:1 / -1}
}

/* ───────── первый экран ───────── */
.opening{position:relative;min-height:100svh;padding:calc(72px + var(--s4)) 0 var(--s3);display:flex;flex-direction:column}
.opening .wrap{flex:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto;column-gap:var(--s3);row-gap:var(--s4)}
.opening-text{grid-column:1 / span 7;display:grid;gap:var(--s3);align-content:start}
.opening h1{font-size:clamp(34px,4.4vw,64px);line-height:1.04;letter-spacing:-.04em}
.opening h1 em{font-style:normal;color:var(--coral)}
.opening-text p{font-size:var(--t-lead);line-height:1.45;color:var(--ink-2);max-width:40ch}
.index{grid-column:9 / -1;grid-row:1 / span 2;align-self:start;border-top:1px solid var(--line)}
.index a{display:grid;grid-template-columns:40px 14px minmax(0,1fr) auto;align-items:center;gap:var(--s2);padding-block:12px;border-bottom:1px solid var(--line);text-decoration:none;font-size:var(--t-small);color:var(--ink-2);transition:color var(--t-fast),padding var(--t-mid) var(--ease)}
.index a span:first-child{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.index a i{width:10px;height:10px;border-radius:50%;background:var(--c)}
.index a b{font:400 20px/1.2 var(--f-display);letter-spacing:-.03em;color:var(--ink)}
.index a em{font-style:normal;color:var(--muted);font-size:13px;text-align:right}
.index a:hover{padding-left:var(--s1);color:var(--ink)}
.index a:hover i{box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 35%,transparent)}
.opening-word{grid-column:1 / -1;grid-row:3;margin:0;font:400 clamp(72px,15.6vw,260px)/.8 var(--f-display);letter-spacing:-.06em;white-space:nowrap;margin-left:-.05em}
.opening-word .dot{width:.16em;height:.16em}
.scroll-hint{position:absolute;right:var(--gutter);bottom:var(--s4);font-size:var(--t-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@media (max-width:980px){
  .opening .wrap{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .opening-text,.index,.opening-word{grid-column:1;grid-row:auto}
  .opening-word{order:-1;font-size:min(200px, calc((100vw - var(--gutter) * 2) / 5.6))}
  .opening{padding-top:calc(72px + var(--s4));min-height:auto;padding-bottom:var(--s6)}
  .scroll-hint{display:none}
}

/* ───────── «кино»: экраны программ ───────── */
.film{position:relative}
.slide{--bg:#333;--tint:#eee;--fg:#fff;--fg2:rgba(255,255,255,.78);--card:#FFFDF8;--card-ink:#0F1A2E;
  position:relative;height:100vh;height:100lvh;min-height:600px;overflow:hidden;background:var(--bg);color:var(--fg);isolation:isolate}
.slide.light{--fg:#0F1A2E;--fg2:rgba(15,26,46,.78)}

/* огромное вертикальное имя и его контур */
.vname{position:absolute;top:50%;left:73%;z-index:-1;writing-mode:vertical-rl;white-space:nowrap;
  font:400 min(calc(150svh / (var(--len) * .72)), 340px)/.82 var(--f-display);letter-spacing:-.05em;color:var(--tint);
  transform:translate(-50%,-50%)}
.vname.ghost{left:calc(73% + .86em);color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--tint) 45%,transparent);transform:translate(-50%,-50%)}

.slide-in{position:relative;height:100%;max-width:var(--max);margin-inline:auto;padding:var(--s5) var(--gutter)}
.rail-n{position:absolute;left:var(--gutter);top:50%;transform:translateY(-50%);display:grid;gap:12px;font:700 13px/1 var(--f-text);letter-spacing:.1em;color:color-mix(in srgb,var(--fg) 45%,transparent);font-variant-numeric:tabular-nums}
.rail-n a{text-decoration:none;padding:2px 0}
.rail-n a:hover{color:var(--fg)}
.rail-n [aria-current]{color:var(--fg);position:relative}
.rail-n [aria-current]::after{content:"";position:absolute;left:calc(100% + 8px);top:50%;width:24px;height:1px;background:currentColor}
.side{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font:700 12px/1 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);white-space:nowrap}
.info{position:absolute;left:calc(var(--gutter) + 72px);bottom:var(--s5);display:grid;gap:var(--s2);max-width:min(340px, 24vw);z-index:2}
.info .who{font:700 12px/1.4 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--fg2)}
.info h2{font-size:clamp(28px,3vw,40px);letter-spacing:-.04em}
.info p{font-size:17px;line-height:1.5;color:var(--fg)}
.info .row{margin-top:var(--s1)}
.pill{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 var(--s3);border-radius:999px;background:var(--fg);color:var(--bg);font:700 16px/1 var(--f-text);text-decoration:none;transition:transform var(--t-fast) var(--ease),gap var(--t-fast) var(--ease)}
.pill:hover{gap:16px}
.pill-ghost{background:transparent;color:var(--fg);border:1px solid color-mix(in srgb,var(--fg) 45%,transparent)}
.count{position:absolute;right:var(--gutter);top:var(--s5);font:700 12px/1 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--fg2);font-variant-numeric:tabular-nums}

/* сцена */
.stage{position:absolute;left:50%;top:50%;width:min(560px, 40vw, calc(100svh - 180px));aspect-ratio:1;transform:translate(-50%,-50%);container-type:size;z-index:1}
.stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.card{position:absolute;background:var(--card);color:var(--card-ink);border-radius:3cqw;padding:3cqw 3.6cqw;font:500 3.3cqw/1.35 var(--f-text);box-shadow:0 3cqw 8cqw rgba(0,0,0,.28);white-space:nowrap}
.card b{font-weight:700}
.card .k{display:block;font:700 2.2cqw/1.2 var(--f-text);letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin-bottom:.8cqw}
.card .big{font:400 9cqw/1 var(--f-display);letter-spacing:-.05em}

/* появление элементов сцены по очереди, пока экран на виду */
@keyframes pop{from{opacity:0;transform:translateY(3cqw) scale(.96)}to{opacity:1;transform:none}}
@keyframes draw{from{stroke-dashoffset:var(--dl,300)}to{stroke-dashoffset:0}}
.js .slide:not(.live) .seq{opacity:0}
.js .slide.live .seq{animation:pop .7s var(--ease) both;animation-delay:calc(var(--s,0) * .32s + .15s)}
.js .slide.live path.seq,.js .slide.live polyline.seq{animation:draw 1s var(--ease) both;animation-delay:calc(var(--s,0) * .32s + .15s);stroke-dasharray:var(--dl,300)}
.js .slide.live circle.seq{transform-box:fill-box;transform-origin:center}

/* 01 Рядом — сутки малыша */
.s-ryadom .dial-ring{fill:none;stroke:color-mix(in srgb,var(--tint) 30%,transparent);stroke-width:.6}
.s-ryadom .tick{stroke:color-mix(in srgb,var(--tint) 55%,transparent);stroke-width:.5}
.s-ryadom .tick.big{stroke:var(--tint);stroke-width:.8}
.s-ryadom .sleep{fill:none;stroke:var(--tint);stroke-width:6;stroke-linecap:round;--dl:80}
.s-ryadom .feed{fill:var(--coral);stroke:var(--bg);stroke-width:.8}
.s-ryadom .hr{fill:var(--tint);font:600 3.4px var(--f-display);text-anchor:middle;opacity:.8}
.s-ryadom .hand{transform-origin:50px 50px;animation:spin 24s linear infinite}
.s-ryadom .hand line{stroke:var(--tint);stroke-width:.7;stroke-linecap:round}
.s-ryadom .hand circle{fill:var(--tint)}
@keyframes spin{to{transform:rotate(360deg)}}
.s-ryadom .moon{position:absolute;left:46cqw;top:20cqw;width:8cqw;height:8cqw;border-radius:50%;box-shadow:-1.6cqw .8cqw 0 0 var(--tint);transform:rotate(-20deg)}
.s-ryadom .mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:var(--tint)}
.s-ryadom .mid b{display:block;font:400 11cqw/1 var(--f-display);letter-spacing:-.05em}
.s-ryadom .mid span{font:700 2.4cqw/1.4 var(--f-text);letter-spacing:.14em;text-transform:uppercase;opacity:.8}

/* 02 Тетрадь ухода */
.s-tetrad .page{left:8cqw;top:6cqw;width:78cqw;height:86cqw;padding:7cqw 6cqw 6cqw 12cqw;white-space:normal;transform:rotate(-3deg);
  background:repeating-linear-gradient(#FFFDF8 0 9.4cqw,#E6DED0 9.4cqw calc(9.4cqw + 1px));background-position:0 3.4cqw}
.s-tetrad .page::before{content:"";position:absolute;left:4cqw;top:6cqw;bottom:6cqw;width:3cqw;background:radial-gradient(circle,var(--bg) 0 1.1cqw,transparent 1.2cqw) 0 0 / 3cqw 7cqw repeat-y}
.s-tetrad .page h3{font:400 4.4cqw/1 var(--f-display);letter-spacing:-.03em;margin-bottom:3.2cqw;color:var(--bg)}
.s-tetrad .line{display:grid;grid-template-columns:11cqw 1fr 5cqw;align-items:center;height:9.4cqw;font-size:3.3cqw}
.s-tetrad .line time{font-weight:700;font-variant-numeric:tabular-nums;color:#5E6880}
.s-tetrad .line svg{position:static;width:5cqw;height:5cqw}
.s-tetrad .line svg circle{fill:none;stroke:#C9C0B2;stroke-width:2}
.s-tetrad .line svg path{fill:none;stroke:var(--coral-deep);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;--dl:30}
.s-tetrad .hand-note{font-family:var(--f-display);font-size:2.8cqw;color:var(--coral-deep);transform:rotate(-4deg);display:inline-block}
.s-tetrad .handoff{right:0;bottom:4cqw;transform:rotate(4deg);background:#FFFDF8;color:var(--bg);border-radius:999px;font-weight:700}
.s-tetrad .bp{right:2cqw;top:0;transform:rotate(5deg)}

/* 03 Капельница */
.s-kap .tube{fill:none;stroke:var(--tint);stroke-width:1.2;stroke-linecap:round}
.s-kap .bag{fill:color-mix(in srgb,var(--tint) 18%,transparent);stroke:var(--tint);stroke-width:1.2}
.s-kap .fluid{fill:var(--tint);opacity:.85;transform-box:fill-box;transform-origin:bottom;animation:drain 14s ease-in-out infinite alternate}
@keyframes drain{to{transform:scaleY(.55)}}
.s-kap .chamber{fill:color-mix(in srgb,var(--tint) 12%,transparent);stroke:var(--tint);stroke-width:1.2}
.s-kap .pool{fill:var(--tint);opacity:.85}
.s-kap .drop{fill:var(--tint);animation:fall 3s cubic-bezier(.55,0,1,.45) infinite}
.s-kap .drop:nth-of-type(2){animation-delay:1s}.s-kap .drop:nth-of-type(3){animation-delay:2s}
@keyframes fall{0%{transform:translateY(0) scale(.4);opacity:0}15%{transform:translateY(0) scale(1);opacity:1}85%{opacity:1}100%{transform:translateY(13px) scale(1);opacity:0}}
.s-kap .rate{right:0;top:12cqw;transform:rotate(3deg)}
.s-kap .end{right:6cqw;top:46cqw;transform:rotate(-3deg)}
.s-kap .tap{position:absolute;left:4cqw;bottom:8cqw;width:22cqw;height:22cqw;display:grid;place-items:center;color:var(--tint);font:700 2.6cqw/1 var(--f-text);letter-spacing:.14em;text-transform:uppercase}
.s-kap .tap::before,.s-kap .tap::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--tint);animation:ripple 1.5s ease-out infinite}
.s-kap .tap::after{animation-delay:.75s}
@keyframes ripple{from{transform:scale(.35);opacity:1}to{transform:scale(1);opacity:0}}

/* 04 Кто когда */
.s-kto .cal{left:4cqw;top:6cqw;width:80cqw;padding:5cqw;white-space:normal;transform:rotate(-2deg)}
.s-kto .cal h3{font:400 5cqw/1 var(--f-display);letter-spacing:-.03em;margin-bottom:3cqw;display:flex;justify-content:space-between;align-items:baseline}
.s-kto .cal h3 small{font:700 2.2cqw var(--f-text);letter-spacing:.12em;text-transform:uppercase;color:#5E6880}
.s-kto .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1.2cqw}
.s-kto .grid span{aspect-ratio:1;border-radius:1.6cqw;display:grid;place-items:center;font:700 2.8cqw/1 var(--f-text);font-variant-numeric:tabular-nums;position:relative;color:#33405A}
.s-kto .grid .wd{aspect-ratio:auto;height:4cqw;font-size:2.2cqw;color:#9AA3B7}
.s-kto .grid .w{background:var(--cell,var(--bg));color:#fff}
.s-kto .grid .both::after{content:"";position:absolute;right:.9cqw;top:.9cqw;width:1.6cqw;height:1.6cqw;border-radius:50%;background:var(--coral)}
.js .slide.s-kto:not(.live) .grid .w{background:#E9ECF7;color:#33405A}
.js .slide.s-kto.live .grid .w{animation:fillday .4s var(--ease) both;animation-delay:calc(var(--i) * .06s + .3s)}
@keyframes fillday{from{background:#E9ECF7;color:#33405A}to{background:var(--cell,var(--bg));color:#fff}}
.s-kto .remind{right:-10cqw;top:-9cqw;transform:rotate(5deg)}
.s-kto .legend{left:8cqw;bottom:0;transform:rotate(-3deg);display:flex;gap:3cqw;align-items:center}
.s-kto .legend i{display:inline-block;width:2.6cqw;height:2.6cqw;border-radius:.8cqw;background:var(--cell,var(--bg));margin-right:1cqw;vertical-align:-.4cqw}
.s-kto .legend i.c{border-radius:50%;background:var(--coral)}

/* 05 Есть дома */
.s-est .pot{position:absolute;left:22cqw;top:30cqw;width:52cqw}
.s-est .pot svg{position:static;width:100%;height:auto}
.s-est .potbody{fill:var(--tint)}
.s-est .potlid{fill:var(--tint);opacity:.85}
.s-est .steam{fill:none;stroke:var(--tint);stroke-width:2;stroke-linecap:round;animation:steam 3s ease-in-out infinite;opacity:0}
.s-est .steam:nth-of-type(2){animation-delay:1s}.s-est .steam:nth-of-type(3){animation-delay:2s}
@keyframes steam{0%{opacity:0;transform:translateY(4px)}40%{opacity:.9}100%{opacity:0;transform:translateY(-10px)}}
.s-est .tag{position:absolute;padding:1.6cqw 3cqw;border-radius:999px;background:var(--card);color:var(--card-ink);font:700 3cqw/1 var(--f-text);box-shadow:0 2cqw 5cqw rgba(0,0,0,.25);animation:float 6s ease-in-out infinite}
.s-est .tag:nth-child(2n){animation-duration:7.5s;animation-direction:alternate-reverse}
@keyframes float{50%{translate:0 -2.4cqw}}
.s-est .dish{right:-4cqw;bottom:2cqw;transform:rotate(3deg);white-space:normal;width:46cqw}
.s-est .dish .big{font-size:5.4cqw;line-height:1.05;margin:.6cqw 0 1.6cqw}
.s-est .buy{left:10cqw;bottom:-2cqw;transform:rotate(-4deg)}

/* 06 Сметчик */
.s-smeta .voice{left:0;top:4cqw;display:flex;align-items:center;gap:2.4cqw;transform:rotate(-3deg);border-radius:999px;padding:2.6cqw 4cqw}
.s-smeta .mic{width:5cqw;height:5cqw;border-radius:50%;background:var(--coral);flex:none;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 1.6cqw color-mix(in srgb,var(--coral) 30%,transparent)}}
.s-smeta .wave{display:flex;gap:.7cqw;align-items:center;height:7cqw}
.s-smeta .wave i{width:.8cqw;border-radius:1cqw;background:#0F1A2E;height:30%;animation:bar 1.1s ease-in-out infinite;animation-delay:calc(var(--i) * -.13s)}
@keyframes bar{50%{height:100%}}
.s-smeta .said{left:6cqw;top:20cqw;transform:rotate(-1deg);white-space:normal;width:60cqw;font-style:italic;background:#1F2A3A;color:#F4F1EA}
.s-smeta .doc{right:0;top:38cqw;width:72cqw;white-space:normal;transform:rotate(2.5deg);padding:4.4cqw 5cqw}
.s-smeta .doc h3{font:400 4.4cqw/1 var(--f-display);letter-spacing:-.03em;margin-bottom:2.4cqw;display:flex;justify-content:space-between;align-items:center}
.s-smeta .doc h3 span{font:700 2.4cqw/1 var(--f-text);background:var(--coral-deep);color:#fff;padding:1.2cqw 2cqw;border-radius:1.2cqw;letter-spacing:.08em}
.s-smeta .doc li{display:flex;justify-content:space-between;gap:3cqw;padding:1.8cqw 0;border-top:1px solid #E6DED0;font-size:3.1cqw}
.s-smeta .doc li b{font-variant-numeric:tabular-nums}

/* 07 Второй — вид «Стекло» из самого приложения (15.10): графит, коралловое пятно, матовые плашки */
.s-vtoroy{background:radial-gradient(60% 50% at 18% 10%, rgb(70 74 86 / .85) 0%, transparent 70%),radial-gradient(45% 55% at 72% 52%, rgb(255 107 90 / .42) 0%, transparent 70%),radial-gradient(60% 45% at 30% 100%, rgb(52 56 68 / .9) 0%, transparent 70%),#0c0d10}
.s-vtoroy .vname{color:rgb(243 243 245 / .9)}
.s-vtoroy .vname.ghost{-webkit-text-stroke-color:rgb(243 243 245 / .25)}
.s-vtoroy .pill{background:#f3f3f5;color:#0c0d10}
.s-vtoroy .app{position:absolute;left:8cqw;top:2cqw;width:70cqw;display:grid;gap:2.2cqw;color:#f3f3f5;font:500 3.3cqw/1.3 var(--f-text)}
.s-vtoroy .app-head{display:flex;justify-content:space-between;align-items:center}
.s-vtoroy .app-head div{display:grid;gap:.6cqw}
.s-vtoroy .hi,.s-vtoroy .sub{font-size:2.8cqw;color:rgb(243 243 245 / .6)}
.s-vtoroy .app-head b{font:800 6.4cqw/1 var(--f-text);letter-spacing:-.02em}
.s-vtoroy .ring{position:static;width:11cqw;height:11cqw}
.s-vtoroy .ring circle{fill:none;stroke:rgb(255 255 255 / .1);stroke-width:3.2}
.s-vtoroy .ring path{fill:none;stroke:#ff7a6a;stroke-width:3.2;stroke-linecap:round}
.s-vtoroy .ring text{fill:#f3f3f5;font:700 8px var(--f-text);text-anchor:middle}
.s-vtoroy .cap{font:700 2.3cqw/1 var(--f-text);letter-spacing:.12em;text-transform:uppercase;color:rgb(243 243 245 / .55);margin-top:1cqw}
.s-vtoroy .glass{background:rgb(255 255 255 / .07);border:1px solid rgb(255 255 255 / .12);box-shadow:inset 0 1px 0 rgb(255 255 255 / .08);border-radius:4cqw}
.s-vtoroy .next{padding:3.4cqw 4cqw;display:grid;grid-template-columns:auto 1fr;gap:1.4cqw 2.4cqw;align-items:center}
.s-vtoroy .when{font:800 6.4cqw/1 var(--f-text);color:#ff7a6a;letter-spacing:-.01em}
.s-vtoroy .soon{justify-self:start;font:600 2.5cqw/1 var(--f-text);background:rgb(255 255 255 / .08);padding:1.2cqw 2cqw;border-radius:99px}
.s-vtoroy .next b{grid-column:1 / -1;font:700 4.4cqw/1.2 var(--f-text)}
.s-vtoroy .list .it{display:grid;grid-template-columns:6cqw 11cqw 1fr;align-items:center;gap:2cqw;padding:3cqw 4cqw}
.s-vtoroy .list .it + .it{border-top:1px solid rgb(255 255 255 / .08)}
.s-vtoroy .list i{width:5cqw;height:5cqw;border-radius:50%;border:1.5px solid rgb(243 243 245 / .55)}
.s-vtoroy .list .t{font-weight:700;color:#ff7a6a}
.s-vtoroy .mic{position:absolute;left:36cqw;bottom:8cqw;width:16cqw;height:16cqw;border-radius:50%;background:#f3f3f5;color:#0c0d10;display:grid;place-items:center;box-shadow:0 3cqw 10cqw rgb(255 107 90 / .45)}
.s-vtoroy .mic svg{position:static;width:7cqw;height:7cqw;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.js .slide.s-vtoroy.live .mic{animation:pop .7s var(--ease) both,glow 2.4s ease-in-out 1.6s infinite;animation-delay:calc(var(--s) * .32s + .15s),1.6s}
@keyframes glow{50%{box-shadow:0 3cqw 14cqw rgb(255 107 90 / .7)}}
.s-vtoroy .toast{position:absolute;right:-6cqw;bottom:-2cqw;width:58cqw;padding:3cqw 3.6cqw;border-radius:4cqw;background:#1a1b20;border:1px solid rgb(255 255 255 / .12);color:#f3f3f5;font:500 3cqw/1.4 var(--f-text);box-shadow:0 3cqw 8cqw rgb(0 0 0 / .4)}
.s-vtoroy .toast .d{display:inline-block;width:1.8cqw;height:1.8cqw;border-radius:50%;background:#ff6b5a;margin-right:1.4cqw;vertical-align:.2cqw}

/* ───────── телефон и планшет ───────── */
@media (max-width:860px){
  .slide{min-height:560px}
  .slide-in{padding:var(--s4) var(--gutter)}
  .rail-n{display:none}
  .side{display:none}
  .vname{left:auto;right:calc(var(--gutter) * -.5);transform:translateY(-50%);font-size:min(calc(130svh / (var(--len) * .72)), 26vw)}
  .vname.ghost{display:none}
  .stage{left:calc(var(--gutter) + 5vw);top:var(--s5);transform:none;width:min(calc(100vw - var(--gutter) * 2 - 12vw), calc(100svh - 330px))}
  .info{left:var(--gutter);right:calc(var(--gutter) + 22vw);bottom:var(--s4);max-width:none;gap:12px}
  .info p{font-size:16px}
  .info h2{font-size:26px}
  .count{top:var(--s3);bottom:auto}
  .pill{min-height:48px}
}

@media (prefers-reduced-motion:reduce){
  .js .slide:not(.live) .seq{opacity:1}
  .s-ryadom .hand,.s-kap .fluid,.s-kap .drop,.s-kap .tap::before,.s-kap .tap::after,.s-est .steam,.s-est .tag,.s-smeta .mic,.s-smeta .wave i,.s-vtoroy .mic{animation:none !important}
  .s-est .steam{opacity:.7}
  .js .slide.s-kto:not(.live) .grid .w{background:var(--cell,var(--bg));color:#fff}
}

/* сцены, которых не видно, стоят — не тратят кадры */
.slide:not(.live) *,.slide:not(.live) *::before,.slide:not(.live) *::after{animation-play-state:paused !important}
.vname{contain:layout paint}

/* ───────── 02 Как делаем: один ночной экран, шаги сменяются при прокрутке ───────── */
.kak{position:relative;background:var(--night)}
.js .kak{height:calc(100svh * 4)}
.kak-stick{min-height:100svh}
.js .kak-stick{position:sticky;top:0;height:100svh;overflow:hidden}
.kak-in{position:relative;height:100%;max-width:var(--max);margin-inline:auto;padding:var(--s5) var(--gutter);display:grid;grid-template-rows:auto auto 1fr auto;gap:var(--s3)}
.kak-title{font-size:clamp(20px,2vw,28px);color:var(--ink-2);max-width:22ch}
.kak-steps{display:grid;gap:var(--s6);align-content:center;padding-block:var(--s5)}
.stp{display:grid;gap:var(--s2)}
.stp p{margin-top:var(--s3)}
.stp .n{font:700 13px/1 var(--f-text);letter-spacing:.14em;color:var(--muted);font-variant-numeric:tabular-nums}
.stp .w{font:400 clamp(56px,13vw,220px)/.86 var(--f-display);letter-spacing:-.06em}
.stp p{font-size:var(--t-lead);line-height:1.45;color:var(--ink-2);max-width:34ch}
.js .kak-steps{position:relative;display:block;padding:0}
.js .stp{position:absolute;left:0;right:0;top:50%;transform:translateY(-40%);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),transform .6s var(--ease),visibility 0s linear .5s}
.js .stp.on{opacity:1;visibility:visible;transform:translateY(-50%);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.js .stp.past{transform:translateY(-60%)}
.js .stp .w{margin-left:-.05em}
.kak-bar{display:none}
.js .kak-bar{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s1);margin-right:72px}
.kak-bar i{height:3px;border-radius:2px;background:var(--line);transition:background .4s}
.kak-bar i.on{background:var(--ink)}

/* ───────── 03 Мы: ночной экран с огромным «двое» ───────── */
.us{--tint:#1C2A45;position:relative;min-height:100svh;background:var(--night);overflow:hidden;isolation:isolate}
.us .vname{left:78%}
.us .vname.ghost{left:calc(78% + .86em);-webkit-text-stroke-color:#2A3A5C}
.us-in{position:relative;min-height:100svh;max-width:var(--max);margin-inline:auto;padding:var(--s5) var(--gutter);display:grid;grid-template-rows:auto 1fr auto;gap:var(--s5)}
.us-text{align-self:center;display:grid;gap:var(--s3);max-width:620px}
.us-text h2{font-size:clamp(56px,8vw,128px);letter-spacing:-.05em;line-height:.9;margin-bottom:var(--s2)}
.us-text p{color:var(--ink-2);max-width:54ch}
.us-text p.lead{font-size:var(--t-lead);line-height:1.45;color:var(--ink)}
.us .facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);border-top:1px solid var(--line);padding-top:var(--s3);max-width:720px}
.us .facts div{display:grid;gap:4px;border:0;padding:0}
.us .facts dt{font:700 12px/1.4 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.us .facts dd{margin:0;font:400 22px/1.2 var(--f-display);letter-spacing:-.03em}

/* ───────── 04 Связь — тоже на весь экран ───────── */
.cta{min-height:100svh;display:flex;flex-direction:column;justify-content:center}

@media (max-width:860px){
  .us .vname{left:auto;right:calc(var(--gutter) * -.5);transform:translateY(-50%);font-size:min(calc(130svh / (var(--len) * .72)), 30vw)}
  .us .vname.ghost{display:none}
  .us-text{max-width:calc(100% - 20vw)}
  .us .facts{grid-template-columns:repeat(2,minmax(0,1fr));max-width:calc(100% - 20vw)}
  .stp .w{font-size:min(120px, calc((100vw - var(--gutter) * 2) / 6.4))}
  .cta h2{font-size:min(160px, calc((100vw - var(--gutter) * 2) / 5.8))}
  .us .vname{opacity:.7}
  .s-kto .remind{top:-1cqw;right:-3cqw}
}

/* iPhone: экран программы — на всю высоту (lvh), а текст и кнопка выше плавающей панели Safari */
@supports (height:100lvh){
  @media (max-width:860px){
    .info{bottom:calc(var(--s4) + env(safe-area-inset-bottom) + 56px)}
  }
}