/* T01 · Seguridad — історія сторінки (розділи 1–5) + заглушки 6–12 · ітерація 2.
   Лише класи st-… (+ мовні es/en/uk/ru і стани is-…); кольори, шрифти, радіуси — токени з _common/brand-tokens.css §1 (var(--…)).
   Літеральні кольори лишились тільки для «матеріалів» (метал телефона, пластик приладів, накладки поверх кадрів камер).
   Рух: токени --m-… (motion.md), лише transform / opacity / stroke-dashoffset. Без JS і при reduced-motion — кінцевий стан. */

/* ---------- база ---------- */
.st-story{--st-pad:clamp(56px,7vw,104px);--m-dur-1:180ms;--m-dur-2:420ms;--m-dur-3:900ms;--m-stagger:60ms;--m-ease-out:cubic-bezier(.2,.7,.2,1);--m-ease-std:cubic-bezier(.4,0,.2,1);--m-ease-in:cubic-bezier(.4,0,1,1);--st-ph-day:url("data:image/webp;base64,UklGRrYCAABXRUJQVlA4WAoAAAAgAAAAJwAAGQAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZWUDggyAAAAJAGAJ0BKigAGgA+2VqmTKglI6IwCqkAGwljALbLLjG9MEahAlEv4rw4heWJ8eRs2zed8QeeN6sQ1ISbhIAA/tXZTbTS0GrI0WZ2iAo09kevVmb9Se+Nu1C4GoDntZ7b109Mm1fqLORE8zjVDGrLkAw43nEqV8KKPjyYCud2Xl42tFR/7k7d2haZ1CU4lor0JOoQIrWIwuYGsqUjObBHiBg72YGObEBnjzaldPCnzjEpN5WsJDP5JKWEsE+W/C4yXJD8EjsgTAAA");--st-ph-night:url("data:image/webp;base64,UklGRkwCAABXRUJQVlA4WAoAAAAgAAAAJwAAGQAASUNDUMgBAAAAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADZWUDggXgAAAFAEAJ0BKigAGgA+3WCrT6ilI6IquAoBEBuJZwDNwBAPp5xk48I/LNkIuAAA/vB0DyJYteMqZ5558iq7CKPsiSEA1RVqqzmUPnz8GAu9mVLst0QMXqCsALZheJAAAAA=");color:var(--ink);background:var(--bg);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip;text-rendering:optimizeLegibility}
.st-story *,.st-story *::before,.st-story *::after{box-sizing:border-box}
.st-story :where(h1,h2,h3,p,ul,ol,dl,dd,figure,figcaption){margin:0}
.st-story :where(ul,ol){padding:0;list-style:none}
.st-story img{display:block;max-width:100%}
.st-story button{font:inherit;color:inherit}
.st-story em{font-style:normal;color:var(--acc)}
.st-story a{color:var(--acc-ink)}
.st-story a:hover{color:var(--acc)}
.st-story :focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
.st-story :is(.es,.en,.uk,.ru){display:none}
html:not([data-lang]) .st-story .es,html[data-lang="es"] .st-story .es,html[data-lang="en"] .st-story .en,html[data-lang="uk"] .st-story .uk,html[data-lang="ru"] .st-story .ru{display:inline}
.st-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.st-sprite{position:absolute;width:0;height:0;overflow:hidden}
/* А2 · висота липкої шапки сайту: 65 px (десктоп) · 102 px (≤ 900). Сайт підставляє точне значення: будь-яке його правило --st-hdr переважить :where() */
:where(:root){--st-hdr:65px}
@media (max-width:900px){:where(:root){--st-hdr:102px}}
/* якорі: поза історіями — під шапкою; усередині історій на телефоні — ще й під смугою шкали 44 px (на десктопі смуги немає) */
.st-story [id]{scroll-margin-top:calc(var(--st-hdr) + 12px)}
.st-ico{width:20px;height:20px;flex:none}
.st-dev{display:block}
.st-wrap{width:100%;max-width:calc(var(--maxw) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
.st-sec{position:relative;padding:var(--st-pad) 0}
.st-head{display:grid;gap:14px;max-width:760px}
.st-eyebrow{display:flex;align-items:flex-start;gap:10px;font:500 12px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.st-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none;margin-top:.45em}
.st-eyebrow>span{min-width:0}
.st-time{font-weight:600;letter-spacing:.06em;color:var(--time)}
.st-h1{font:800 clamp(40px,5.3vw,74px)/.98 var(--display);letter-spacing:-.045em;text-wrap:balance}
.st-h1 em{display:block}
.st-h2{font:800 clamp(30px,3.5vw,48px)/1.03 var(--display);letter-spacing:-.04em;text-wrap:balance}
.st-lead{font-size:clamp(16.5px,1.45vw,19px);line-height:1.55;color:var(--ink-2);max-width:60ch;text-wrap:pretty}
.st-date{font:500 13px var(--mono);color:var(--ink-3)}
.st-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:99px;font:600 16px/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:background var(--m-dur-1),color var(--m-dur-1),border-color var(--m-dur-1)}
.st-story .st-btn--pri{background:var(--btn);color:var(--btn-fg);border:1.5px solid var(--btn)}
.st-story .st-btn--pri:hover{background:var(--btn-h);border-color:var(--btn-h);color:var(--btn-hfg)}
.st-story .st-btn--sec{background:var(--card);color:var(--ink);border:1.5px solid var(--line-2)}
.st-story .st-btn--sec:hover{border-color:var(--acc);color:var(--ink)}
.st-ilus{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--mono);letter-spacing:.08em;padding:6px 9px;border-radius:99px;background:rgba(11,13,10,.78);color:#FFFFFF;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.st-ilus::before{content:"";width:6px;height:6px;border-radius:50%;background:#FFFFFF;opacity:.7}
.st-ilus--sm{font-size:9.5px;padding:4px 7px}

/* ---------- 1 · hero ---------- */
.st-hero{padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(40px,5vw,64px)}
.st-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center}
.st-hero__text{display:grid;gap:22px;align-content:center}
.st-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.st-facts{display:grid;gap:10px;margin-top:6px}
.st-facts li{display:flex;align-items:center;gap:12px;font-size:15.5px;color:var(--ink-2)}
.st-facts .st-ico{color:var(--acc)}
.st-hero__vis{position:relative;--st-hpw:272px;height:calc(96px + var(--st-hpw)*19.3/9);margin-bottom:24px}
.st-hero__frame{position:relative;width:80%}
.st-hero__vis .st-hero__phone{position:absolute;right:0;top:96px;--pw:var(--st-hpw)}
.st-story[data-hero="phone"] .st-hero__frame{display:none}
.st-story[data-hero="phone"] .st-hero__vis{height:auto;margin-bottom:0;display:flex;justify-content:center}
.st-story[data-hero="phone"] .st-hero__vis .st-hero__phone{position:relative;top:auto;right:auto;margin:0;--pw:310px}
.st-story[data-hero="frame"] .st-hero__phone .st-notif__shots,.st-story[data-hero="frame"] .st-hero__phone .st-notif--more{display:none}
.st-proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(40px,5vw,64px);padding-top:22px;border-top:1px solid var(--line)}
.st-proof li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.st-proof .st-ico{width:18px;height:18px;color:var(--acc);margin-top:1px}

/* кадр камери */
.st-frame{position:relative}
.st-frame__img{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:#0B0C0D;box-shadow:var(--shadow-lg)}
.st-frame__img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-frame__img::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none}
.st-frame__f2,.st-frame__f3{opacity:0}
.st-frame__ov{position:absolute;inset:0;pointer-events:none;font:500 12px/1 var(--mono);letter-spacing:.04em;color:#FFFFFF;text-shadow:0 1px 2px rgba(0,0,0,.85)}
.st-frame__tr{position:absolute;right:12px;top:12px;display:flex;align-items:center;gap:10px}
.st-frame__rec{width:8px;height:8px;border-radius:50%;background:#FF4D3D;box-shadow:0 0 6px rgba(255,77,61,.85)}
.st-tick{display:inline-grid;font-variant-numeric:tabular-nums}
.st-tick>b{grid-area:1/1;font-weight:500}
.st-tick>b+b{opacity:0}
.st-frame__ts{position:absolute;left:12px;top:12px}
.st-frame__n{position:absolute;right:12px;top:12px}
.st-frame>.st-ilus{position:absolute;left:12px;top:12px;z-index:1}

/* ---------- телефон (наш інтерфейс) ---------- */
.st-phone{--pw:280px;position:relative;width:var(--pw);height:calc(var(--pw)*19.3/9);font-size:calc(var(--pw)/28);flex:none}
.st-phone__body{position:relative;height:100%;border-radius:5em;padding:.32em;background:linear-gradient(140deg,#D7D9DB 0%,#7A7E82 12%,#ECEDEE 27%,#8E9296 43%,#5D6165 58%,#D1D3D6 78%,#7E8286 100%);box-shadow:0 2.6em 4em -2.2em rgba(0,0,0,.55),0 1.2em 2.2em -1.2em rgba(0,0,0,.32),inset 0 0 0 .1em rgba(255,255,255,.45)}
.st-phone__btn{position:absolute;width:.4em;border-radius:.3em;background:linear-gradient(90deg,#4F5357,#C9CCCF 55%,#7C8084)}
.st-phone__btn--1{left:-.3em;top:17%;height:5%}.st-phone__btn--2{left:-.3em;top:25%;height:8.5%}.st-phone__btn--3{left:-.3em;top:35.5%;height:8.5%}.st-phone__btn--4{right:-.3em;top:28%;height:13%}
.st-phone__screen{position:relative;height:100%;border-radius:4.7em;border:1em solid var(--phone);overflow:hidden;background:var(--phone-scr);color:#FFFFFF;isolation:isolate}
.st-phone__screen::after{content:"";position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.12),rgba(255,255,255,0) 28%);pointer-events:none;z-index:4}
.st-phone__wall{position:absolute;left:-30%;top:-8%;width:160%;height:116%;max-width:none!important;object-fit:cover;filter:blur(1.2em) saturate(1.3) brightness(.85);z-index:-1;background:#101316 var(--st-ph-night) 0 0/100% 100% no-repeat}
.st-phone__screen::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,12,.2),rgba(6,8,12,0) 32%,rgba(6,8,12,.16) 62%,rgba(6,8,12,.6));z-index:-1}
.st-phone__status{display:flex;justify-content:flex-end;align-items:center;gap:.6em;height:4.2em;padding:.4em 2.2em 0;font:700 1.15em/1 var(--sans)}
.st-phone__sig{display:flex;align-items:flex-end;gap:.15em;height:1.1em}
.st-phone__sig i{display:block;width:.3em;border-radius:.1em;background:#FFFFFF}
.st-phone__sig i:nth-child(1){height:35%}.st-phone__sig i:nth-child(2){height:55%}.st-phone__sig i:nth-child(3){height:78%}.st-phone__sig i:nth-child(4){height:100%;opacity:.4}
.st-phone__bat{position:relative;width:2.5em;height:1.2em;border-radius:.4em;border:.12em solid rgba(255,255,255,.55);padding:.15em}
.st-phone__bat i{display:block;width:70%;height:100%;border-radius:.2em;background:#FFFFFF}
.st-phone__island{position:absolute;left:50%;top:1.1em;width:9.6em;height:2.8em;margin-left:-4.8em;border-radius:9em;background:#000000;z-index:3}
.st-phone__clock{display:grid;justify-items:center;text-align:center;padding-top:1.2em}
.st-phone__lock{width:1.6em;height:1.6em;color:rgba(255,255,255,.9)}
.st-phone__date{font:500 1.45em/1.25 var(--sans);color:rgba(255,255,255,.88);margin-top:.4em}
.st-phone__time{font:600 6.6em/1 var(--display);letter-spacing:-.035em;color:rgba(255,255,255,.95);font-variant-numeric:tabular-nums}
.st-phone__list{display:grid;gap:.75em;padding:1.5em .85em 0}
.st-phone__dock{position:absolute;left:0;right:0;bottom:2.8em;display:flex;justify-content:space-between;padding:0 3.4em}
.st-phone__qa{width:4.6em;height:4.6em;border-radius:50%;display:grid;place-items:center;background:rgba(28,30,34,.45);-webkit-backdrop-filter:blur(1.6em);backdrop-filter:blur(1.6em);box-shadow:inset 0 0 0 .05em rgba(255,255,255,.14)}
.st-phone__qa .st-ico{width:2em;height:2em;color:#FFFFFF}
.st-phone__home{position:absolute;left:50%;bottom:.8em;width:11.6em;height:.5em;margin-left:-5.8em;border-radius:9em;background:rgba(255,255,255,.92);z-index:3}
.st-notif{display:flex;gap:1em;align-items:flex-start;padding:1.1em 1.15em 1.15em;border-radius:2.1em;background:rgba(30,33,37,.62);-webkit-backdrop-filter:blur(2em) saturate(1.6);backdrop-filter:blur(2em) saturate(1.6);box-shadow:inset 0 0 0 .06em rgba(255,255,255,.1),0 1em 2.4em rgba(0,0,0,.22);color:#FFFFFF;text-align:left}
.st-notif__ic{flex:none;width:3.4em;height:3.4em;border-radius:.95em;display:grid;place-items:center;background:#5B6066;color:#FFFFFF;box-shadow:inset 0 -.15em .3em rgba(0,0,0,.2),inset 0 .1em .2em rgba(255,255,255,.3)}
.st-notif__ic .st-ico{width:1.9em;height:1.9em}
.st-notif--alarm .st-notif__ic{background:var(--alarm)}
.st-notif--water .st-notif__ic{background:var(--water)}
.st-notif--ok .st-notif__ic{background:var(--acc);color:var(--acc-fg)}
.st-notif--chat .st-notif__ic{background:#8A9096;border-radius:50%;font:700 1.5em/1 var(--sans)}
.st-notif__b{flex:1;min-width:0}
.st-notif__top{display:flex;justify-content:space-between;gap:.6em;font:600 1em/1.2 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.st-app--a{display:none}
.st-story[data-app="ajax"] .st-app--n{display:none}
.st-story[data-app="ajax"] .st-app--a{display:inline}
.st-notif__t{font:600 1.32em/1.25 var(--sans);margin-top:.25em;overflow-wrap:anywhere}
.st-notif__s{font:400 1.2em/1.3 var(--sans);color:rgba(255,255,255,.8);margin-top:.1em;overflow-wrap:anywhere}
.st-notif__shots{display:grid;grid-template-columns:repeat(3,1fr);gap:.35em;margin-top:.8em}
.st-notif__shots img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:.5em}
.st-notif__shots .st-ilus{grid-column:1/-1;justify-self:start;font-size:max(8px,.85em);padding:.35em .65em}

/* ---------- 2 · як це працює ---------- */
.st-how{background:var(--panel)}
.st-how__flow{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.12fr) repeat(2,minmax(0,1fr));gap:20px;margin-top:68px;align-items:start}
.st-how__flow::before{content:"";position:absolute;left:calc((100% - 80px)/10.24);right:calc((100% - 80px)/10.24);top:-24px;height:2px;background:repeating-linear-gradient(90deg,var(--line-2) 0 8px,transparent 8px 15px)}
.st-how__node{position:absolute;left:50%;top:-30px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--panel);box-shadow:inset 0 0 0 2px var(--line-2);z-index:1}
.st-how__node::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--acc)}
.st-how__hub>.st-how__node{top:-22px}
.st-how__sig{position:absolute;left:calc((100% - 80px)/10.24);right:calc((100% - 80px)/10.24);top:-30px;height:14px;z-index:2;pointer-events:none;opacity:0}
.st-how__sig::before{content:"";position:absolute;left:-6px;top:1px;width:12px;height:12px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 28%,transparent),0 0 14px var(--acc)}
.st-how__step{position:relative;display:grid;gap:10px;align-content:start}
.st-how__vis{position:relative;height:152px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;gap:8px;overflow:hidden}
.st-how__vis::before{content:"";position:absolute;left:12%;right:12%;bottom:22px;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(20,22,24,.14),rgba(20,22,24,0))}
.st-how__vis::after,.st-how__hub::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--acc);opacity:0;pointer-events:none}
.st-how__k{font:600 12px/1 var(--mono);letter-spacing:.14em;color:var(--acc);margin-top:8px}
.st-how__h{font:800 23px/1.1 var(--display);letter-spacing:-.025em}
.st-how__p{font-size:15px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.st-how__devs{position:relative;display:flex;align-items:flex-end;gap:2px}
.st-how__devs .st-dev{width:58px;height:58px;filter:drop-shadow(0 6px 6px rgba(20,22,24,.16))}
.st-how__devs .st-dev:nth-child(2){width:66px;height:66px}
.st-how__mc{width:62px;height:62px;filter:drop-shadow(0 6px 6px rgba(20,22,24,.18));position:relative;left:-8px}
.st-how__shots{position:relative;width:96px;height:96px}
.st-how__shots img{position:absolute;width:74px;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px;box-shadow:0 4px 10px rgba(0,0,0,.3);border:2px solid #FFFFFF}
.st-how__shots img:nth-child(1){left:0;top:4px;transform:rotate(-7deg)}.st-how__shots img:nth-child(2){left:12px;top:20px;transform:rotate(2deg)}.st-how__shots img:nth-child(3){left:24px;top:38px;transform:rotate(8deg)}
.st-how__shots .st-ilus{position:absolute;left:4px;bottom:-14px;white-space:nowrap}
/* «Avisa»: наш телефон зі сповіщенням + менший телефон довіреної особи */
.st-how__phs{position:relative;display:flex;align-items:flex-end;gap:12px}
.st-mph{--w:58px;position:relative;display:block;flex:none;width:var(--w);height:calc(var(--w)*2.07);font-size:calc(var(--w)/5.8);border-radius:1.35em;padding:.26em;background:linear-gradient(140deg,#E6E7E9 0%,#8A8E92 16%,#F3F4F5 32%,#9DA1A5 50%,#6C7074 66%,#DCDEE0 84%,#8E9296 100%);box-shadow:0 0 0 1px rgba(20,22,24,.3),0 1.2em 1.8em -.8em rgba(0,0,0,.45)}
.st-mph__scr{position:relative;display:block;height:100%;border-radius:1.12em;border:.2em solid #0F1113;background:linear-gradient(165deg,#7A8EA2 0%,#40505F 46%,#1C242C 100%);overflow:hidden}
.st-mph__isl{position:absolute;left:50%;top:.55em;width:1.8em;height:.5em;margin-left:-.9em;border-radius:1em;background:#000000}
.st-mph__clk{position:absolute;left:0;right:0;top:1.5em;text-align:center;font:600 1.15em/1 var(--display);letter-spacing:-.03em;color:#FFFFFF;font-variant-numeric:tabular-nums}
.st-mph__n{--dy:-5px;position:absolute;left:.35em;right:.35em;top:3.3em;display:flex;align-items:center;gap:.3em;padding:.32em .3em;border-radius:.55em;background:rgba(255,255,255,.95);box-shadow:0 .2em .5em rgba(0,0,0,.3)}
.st-mph__n>b{flex:none;width:1.15em;height:1.15em;border-radius:.3em;background:var(--alarm);display:grid;place-items:center}
.st-mph__n .st-ico{width:.8em;height:.8em;color:#FFFFFF}
.st-mph__n>i{flex:1;display:block;height:.26em;border-radius:.2em;background:#4A4F55;box-shadow:0 .42em 0 #B4B9BE}
.st-mph--2{--w:46px}
.st-mph__who{position:absolute;right:-7px;top:-7px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:var(--acc-fg);font:700 10px/1 var(--sans);box-shadow:0 0 0 2px var(--card)}
/* «Actúa»: сирена + хвилі, кран з ручкою */
.st-how__sir{width:64px;height:64px;filter:drop-shadow(0 6px 6px rgba(20,22,24,.18))}
.st-how__valve{width:66px;height:66px;filter:drop-shadow(0 6px 6px rgba(20,22,24,.16))}
.st-how__valve .st-lever{transform-box:view-box;transform-origin:32px 15.5px;transform:rotate(90deg)}
.st-how__sw{position:relative;width:30px;height:44px;margin-left:-10px}
.st-how__sw i{--o:.75;position:absolute;left:0;top:50%;width:14px;height:14px;margin-top:-7px;border:2px solid var(--alarm);border-color:transparent var(--alarm) transparent transparent;border-radius:50%;opacity:var(--o);transform-origin:left center}
.st-how__sw i:nth-child(2){--o:.45;width:26px;height:26px;margin-top:-13px}
.st-how__sw i:nth-child(3){--o:.25;width:38px;height:38px;margin-top:-19px}
.st-how__hub{position:relative;z-index:1;display:grid;justify-items:center;text-align:center;gap:12px;padding:16px 14px 20px;border-radius:calc(var(--r) + 6px);background:var(--card);border:1px solid var(--line-2);box-shadow:var(--shadow-lg);margin-top:-8px}
.st-how__hubvis{position:relative;width:150px;height:150px;display:grid;place-items:center}
.st-how__rings i{position:absolute;inset:18px;border-radius:50%;border:2px solid var(--acc);opacity:0}
.st-how__hubdev{position:relative;width:96px;height:96px;filter:drop-shadow(0 12px 14px rgba(20,22,24,.2))}
.st-how__hubname{font:800 18px/1.15 var(--display);letter-spacing:-.02em}
.st-how__bk{display:grid;gap:8px;width:100%}
.st-how__bk li{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:12px;background:var(--acc-soft);color:var(--acc-ink);font-size:13.5px;line-height:1.3;font-weight:600;text-align:left}
.st-how__bk .st-ico{width:18px;height:18px}

/* ---------- 3 · карта покриття ---------- */
.st-map [data-layer="perimetro"]{--c:var(--acc)}
.st-map [data-layer="interior"]{--c:var(--time)}
.st-map [data-layer="agua"]{--c:var(--water)}
.st-map [data-layer="fuego"]{--c:var(--warn)}
.st-map [data-layer="sirenas"]{--c:var(--alarm)}
.st-map [data-layer="acceso"]{--c:var(--ink-2)}
.st-map [data-layer="none"]{--c:var(--ink-3)}
.st-map__bar{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between;margin-top:34px}
.st-map__lbl{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-right:4px}
.st-pills{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.st-pill{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px 0 13px;border-radius:99px;border:1.5px solid var(--line-2);background:var(--card);font-weight:600;font-size:14.5px;cursor:pointer;transition:border-color var(--m-dur-1),background var(--m-dur-1)}
.st-pill:hover{border-color:var(--c)}
.st-pill[aria-pressed="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) 13%,var(--card))}
.st-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:inset 0 -1px 2px rgba(0,0,0,.25)}
.st-pill[aria-pressed="false"] .st-dot{background:transparent;box-shadow:inset 0 0 0 1.6px var(--c)}
.st-kits{display:flex;align-items:center;gap:3px;padding:4px 4px 4px 14px;border-radius:99px;background:var(--panel);border:1px solid var(--line)}
.st-kit{min-width:54px;min-height:40px;padding:0 12px;border-radius:99px;border:0;background:transparent;font:600 14px/1 var(--mono);color:var(--ink-2);cursor:pointer;transition:background var(--m-dur-1),color var(--m-dur-1)}
.st-kit:hover{color:var(--ink)}
.st-kit[aria-pressed="true"]{background:var(--btn);color:var(--btn-fg)}
/* опис набору: усі описи в одній клітинці — висота не стрибає */
.st-map__kitline{display:grid;margin-top:14px;font-size:14.5px;line-height:1.45;color:var(--ink-2)}
.st-map__kitdesc{grid-area:1/1;visibility:hidden}
.st-map:not([data-kit]) .st-map__kitdesc[data-kit="B"],.st-map[data-kit="A"] .st-map__kitdesc[data-kit="A"],.st-map[data-kit="B"] .st-map__kitdesc[data-kit="B"],.st-map[data-kit="VUT"] .st-map__kitdesc[data-kit="VUT"],.st-map[data-kit="C"] .st-map__kitdesc[data-kit="C"]{visibility:visible}
.st-map__kitname{font-weight:700;color:var(--ink)}
.st-badge{display:inline-block;margin-right:8px;padding:2px 9px;border-radius:99px;background:var(--acc-soft);color:var(--acc-ink);font:600 12px/1.6 var(--sans);vertical-align:1px}
.st-map__frame{position:relative;margin-top:14px;border-radius:calc(var(--r) + 4px);overflow:hidden;background:var(--plan-common);border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.st-map__scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;outline:0}
.st-map__canvas{position:relative;aspect-ratio:1000/640;container-type:inline-size;--ps:clamp(28px,3.3cqi,40px)}
.st-map__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--plan-common) var(--st-ph-day) 0 0/100% 100% no-repeat}
.st-map__img--night{opacity:0;transition:opacity var(--m-dur-2) var(--m-ease-std);background-image:var(--st-ph-night)}
.st-map__cov{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.st-room{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);font:500 clamp(8px,.92cqi,11px)/1 var(--mono);letter-spacing:.16em;color:rgba(20,22,24,.62);text-shadow:0 0 .5em rgba(255,255,255,.9),0 0 .2em rgba(255,255,255,.9);white-space:nowrap;pointer-events:none}
.st-room--lead::before{content:"";position:absolute;left:50%;bottom:calc(100% + 3px);width:1px;height:var(--ll);background:currentColor;opacity:.6}
.st-map__pins{position:absolute;inset:0}
.st-pin{position:absolute;left:var(--x);top:var(--y);z-index:2;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;transition:opacity var(--m-dur-2) var(--m-ease-std)}
.st-pin[hidden]{display:none}
.st-pin__ph,.st-pin__ic{position:absolute;left:50%;top:50%;width:var(--ps);height:var(--ps);transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;overflow:hidden;transition:transform var(--m-dur-2) var(--m-ease-out)}
.st-pin__ph{background:radial-gradient(circle at 36% 30%,#FFFFFF,#EEEEEA 60%,#C9CAC5);box-shadow:0 0 0 2.5px var(--c),0 0 0 4px rgba(255,255,255,.9),0 7px 12px -3px rgba(0,0,0,.5)}
.st-pin__ph svg{width:86%;height:86%}
.st-pin__ph::after,.st-pin__ic::after{content:"";position:absolute;left:16%;right:16%;top:5%;height:40%;border-radius:50% 50% 45% 45%;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0))}
.st-pin__ic{display:none;color:#FFFFFF;background:radial-gradient(circle at 36% 30%,color-mix(in srgb,var(--c) 70%,#FFFFFF),var(--c) 55%,color-mix(in srgb,var(--c) 62%,#000000));box-shadow:0 0 0 2px rgba(255,255,255,.92),0 7px 12px -3px rgba(0,0,0,.5)}
.st-pin__ic svg{width:54%;height:54%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.st-story[data-pin="icon"] .st-pin__ph{display:none}
.st-story[data-pin="icon"] .st-pin__ic{display:grid}
.st-pin__lb{position:absolute;left:50%;top:calc(50% + var(--ps)/2 + 7px);transform:translateX(-50%);white-space:nowrap;font:600 clamp(9px,.95cqi,11.5px)/1 var(--sans);padding:.42em .7em;border-radius:99px;background:rgba(11,13,10,.82);color:#FFFFFF;opacity:0;pointer-events:none;transition:opacity var(--m-dur-1)}
.st-pin[data-lb="up"] .st-pin__lb{top:auto;bottom:calc(50% + var(--ps)/2 + 7px)}
.st-pin.is-lit .st-pin__lb,.st-pin:hover .st-pin__lb,.st-pin:focus-visible .st-pin__lb,.st-pin.is-sel .st-pin__lb{opacity:1}
.st-pin.is-dim{opacity:.5}
.st-pin.is-dim :is(.st-pin__ph,.st-pin__ic){transform:translate(-50%,-50%) scale(.8)}
.st-pin.is-dim:hover{opacity:1}
.st-pin.is-sel{z-index:4}
.st-pin.is-sel :is(.st-pin__ph,.st-pin__ic){transform:translate(-50%,-50%) scale(1.14)}
.st-pin.is-sel .st-pin__ph,.st-pin.is-sel .st-pin__ic{box-shadow:0 0 0 3px var(--c),0 0 0 8px color-mix(in srgb,var(--c) 32%,transparent),0 8px 14px -3px rgba(0,0,0,.5)}
.st-pin__cam{position:absolute;left:calc(50% + var(--ps)*.16);top:calc(50% - var(--ps)*.66);width:calc(var(--ps)*.46);height:calc(var(--ps)*.46);border-radius:50%;background:var(--time);color:#FFFFFF;display:grid;place-items:center;box-shadow:0 0 0 2px #FFFFFF}
.st-pin__cam svg{width:64%;height:64%}
.st-map__cov .st-cv{opacity:0;transition:opacity var(--m-dur-2) var(--m-ease-std)}
.st-map__cov .st-cv.is-on{opacity:1}
.st-wave{transform-box:fill-box;transform-origin:center;opacity:0}
.st-map__zoom,.st-map__hint{display:none}
.st-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.st-leg{display:grid;align-content:start;padding:14px 16px 16px;border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line);opacity:.62;transition:opacity var(--m-dur-2),border-color var(--m-dur-2),box-shadow var(--m-dur-2)}
.st-leg.is-on{opacity:1;border-color:color-mix(in srgb,var(--c) 45%,var(--line));box-shadow:var(--shadow)}
.st-leg:not(.is-on) .st-dot{background:transparent;box-shadow:inset 0 0 0 1.6px var(--c)}
.st-leg__h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15.5px}
.st-leg__b{font-size:14px;line-height:1.45;color:var(--ink-2);margin-top:6px;text-wrap:pretty}
/* чіпи й «немає в наборі» в одній клітинці — без стрибка висоти */
.st-leg__devs,.st-leg__none{grid-row:3;grid-column:1;margin-top:10px;min-height:24px}
.st-leg__devs{display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px}
.st-chip{display:inline-flex;align-items:center;gap:6px;font:500 11.5px/1 var(--mono);padding:5px 8px;border-radius:99px;background:var(--panel);border:1px solid var(--line);color:var(--ink-2)}
.st-chip b{font-weight:600;color:var(--ink)}
.st-leg__none{font:500 11.5px/1.4 var(--mono);color:var(--ink-3);visibility:hidden}
.st-leg.is-empty .st-leg__none{visibility:visible}
.st-leg.is-empty .st-leg__devs{visibility:hidden}
/* картка приладу: десктоп — поповер, телефон — bottom sheet */
.st-card{position:absolute;top:16px;z-index:6;width:min(360px,calc(100% - 32px));max-height:calc(100% - 32px);overflow:auto;border-radius:var(--r);background:var(--card);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-lg);overscroll-behavior:contain;transition:transform var(--m-dur-1) var(--m-ease-out)}
.st-card[hidden]{display:none}
.st-card[data-side="right"]{right:16px;transform-origin:top right}
.st-card[data-side="left"]{left:16px;transform-origin:top left}
.st-card.is-drag{transition:none}
.st-card__in{position:relative;display:grid;gap:14px;padding:18px}
.st-card__x{position:absolute;right:10px;top:10px;width:44px;height:44px;border-radius:50%;border:0;background:var(--panel);display:grid;place-items:center;cursor:pointer}
.st-card__x:hover{background:var(--line)}
.st-card__head{display:flex;gap:14px;align-items:center;padding-right:44px}
.st-card__dev{flex:none;width:72px;height:72px;border-radius:18px;display:grid;place-items:center;background:radial-gradient(circle at 36% 30%,#FFFFFF,#F0F0EC 60%,#D6D7D2);box-shadow:inset 0 0 0 1px rgba(20,22,24,.08),0 0 0 3px var(--c)}
.st-card__dev svg{width:84%;height:84%}
.st-card__id{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.st-card__kind{font:800 19px/1.15 var(--display);letter-spacing:-.02em;margin-top:5px}
.st-card__name{font:500 12.5px/1.2 var(--mono);color:var(--acc-ink);margin-top:4px}
.st-card__dl{display:grid;gap:3px}
.st-card__dl dt{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-top:9px}
.st-card__dl dt:first-child{margin-top:0}
.st-card__dl dd{margin:0;font-size:14.5px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.st-slot__box{position:relative;aspect-ratio:4/3;border-radius:var(--r-sm);border:1.5px dashed var(--line-2);background:repeating-linear-gradient(135deg,var(--card-2) 0 10px,var(--panel) 10px 20px);display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:12px;overflow:hidden}
.st-slot__box :is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0B0D0A}
.st-slot__lbl{font-size:12.5px;line-height:1.35;font-weight:600;color:var(--ink-2)}
.st-slot__key{font:500 11px/1.4 var(--mono);color:var(--ink-3);word-break:break-all}
.st-story[data-media="hidden"] .st-slot{display:none}
.st-card__foot{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;justify-content:space-between}
.st-card__kits{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--ink-3)}
.st-card__kc{display:flex;gap:4px}
.st-card__kc span{font:600 11.5px/1 var(--mono);padding:5px 8px;border-radius:99px;background:var(--panel);color:var(--ink-2)}
.st-card__kc span.is-cur{background:var(--btn);color:var(--btn-fg)}
.st-card__cta{min-height:44px;padding:0 16px;font-size:14.5px}
.st-card-bd{display:none}

/* ---------- 4–5 · сторіборди ---------- */
.st-sb{background:var(--panel)}
.st-sb--agua{background:var(--bg)}
.st-sb__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,4.5vw,64px);align-items:start}
/* А1 · уся геометрія історії — CSS: --st-pw ширина телефона сцени, --st-ch його висота (план і кадри не вищі), --st-sth висота сцени (--st-ch + шкала 28 + підпис 22 + 2×14),
   --st-top липкий top = max(шапка + 16, 50svh − ½ сцени). Без JS і з JS висота сторінки однакова */
.st-sb{--st-vh:1vh;--st-pw:min(clamp(200px,16.5vw,236px),calc((100*var(--st-vh) - var(--st-hdr) - 136px)*.4663));--st-ch:calc(var(--st-pw)*19.3/9);--st-sth:calc(var(--st-ch) + 78px);--st-top:max(calc(var(--st-hdr) + 16px),calc(50*var(--st-vh) - var(--st-sth)/2))}
@supports (height:1svh){.st-sb{--st-vh:1svh}}
.st-sb--agua{--st-pw:min(clamp(196px,16vw,228px),calc((100*var(--st-vh) - var(--st-hdr) - 136px)*.4663))}
/* відступ над першим кроком (≥ 66svh − top + 8): коли крок 1 стає активним, сцена вже прилипла й уся у вікні */
.st-sb__col>.st-head{margin-bottom:36px;min-height:calc(66*var(--st-vh) - var(--st-top) - 28px)}
.st-sb__steps{position:relative;display:grid}
/* візуал лишається у вікні, поки активний останній крок (до «низ останнього < 28 % вікна»): колонка кроків подовжена на висоту липкого візуалу */
.st-sb__col{min-width:0;padding-bottom:max(0px,calc(var(--st-top) + var(--st-sth) - 28*var(--st-vh)))}
.st-sb__step{position:relative;padding:26px 0 26px 38px;min-height:min(52vh,460px);transition:opacity var(--m-dur-2) var(--m-ease-std)}
.st-sb__step:last-child{min-height:min(44vh,400px)}
.st-sb.is-live .st-sb__step:not(.is-on){opacity:.5}
.st-sb__step::before{content:"";position:absolute;left:0;top:30px;width:16px;height:16px;border-radius:50%;background:var(--panel);box-shadow:inset 0 0 0 2px var(--line-2);transition:background var(--m-dur-2),box-shadow var(--m-dur-2);z-index:2}
.st-sb__step::after,.st-sb__bar{content:"";position:absolute;left:7px;top:48px;bottom:-30px;width:2px;background:var(--line-2)}
.st-sb__step:last-child::after{display:none}
.st-sb__bar{display:block;z-index:1;background:var(--time);transform:scaleY(0);transform-origin:top;transition:transform var(--m-dur-2) var(--m-ease-std)}
.st-sb--agua .st-sb__bar{background:var(--water)}
.st-sb__step.is-done .st-sb__bar{transform:none}
.st-sb.is-live .st-sb__step.is-on .st-sb__bar{transform:scaleY(var(--p,0));transition:none}
.st-sb--agua .st-sb__step::before{background:var(--bg)}
.st-sb__step.is-on::before,.st-sb__step.is-done::before{background:var(--time);box-shadow:0 0 0 5px color-mix(in srgb,var(--time) 22%,transparent)}
.st-sb__step.is-done::before{box-shadow:none}
.st-sb--agua .st-sb__step.is-on::before,.st-sb--agua .st-sb__step.is-done::before{background:var(--water);box-shadow:0 0 0 5px color-mix(in srgb,var(--water) 22%,transparent)}
.st-sb--agua .st-sb__step.is-done::before{box-shadow:none}
.st-sb__h{font:inherit}
.st-sb__btn{display:grid;gap:8px;padding:0;border:0;background:none;text-align:left;cursor:pointer}
.st-sb__time{font:600 13px/1 var(--mono);letter-spacing:.06em;color:var(--time)}
.st-sb--agua .st-sb__time{color:var(--water)}
.st-sb__ttl{font:800 clamp(22px,2.1vw,28px)/1.12 var(--display);letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.st-sb__p{font-size:16.5px;line-height:1.55;color:var(--ink-2);margin-top:12px;max-width:48ch;text-wrap:pretty}
.st-sb__mvis{display:none}
/* сцена (десктоп): ліворуч план (+ стрічка кадрів), праворуч телефон — без перекриття */
.st-sb__stage{position:sticky;top:var(--st-top)}
.st-stage{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 20px;align-items:start}
.st-stage__left{display:grid;gap:12px;min-width:0}
/* шкала сцени: час кроку (лічильник) + 5 сегментів, що заповнюються */
.st-stage__hud{grid-column:1/-1;display:flex;align-items:center;gap:14px;height:28px}
.st-stage__t{font:600 20px/1 var(--mono);letter-spacing:.02em;font-variant-numeric:tabular-nums;color:var(--time);min-width:8ch}
.st-sb--agua .st-stage__t{color:var(--water)}
.st-stage__n{font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--ink-3);font-variant-numeric:tabular-nums}
.st-stage__seg{flex:1;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
.st-stage__seg i{position:relative;display:block;height:4px;border-radius:2px;background:var(--line-2);overflow:hidden}
.st-stage__seg i::after{content:"";position:absolute;inset:0;background:var(--time);transform:scaleX(0);transform-origin:left;transition:transform var(--m-dur-2) var(--m-ease-std)}
.st-sb--agua .st-stage__seg i::after{background:var(--water)}
.st-stage__seg i.is-done::after{transform:none}
.st-stage__seg i.is-on::after{transform:scaleX(var(--p,0));transition:none}
.st-stage__tr,.st-stage__tab{display:none}
.st-sb:not(.is-live) :is(.st-stage__t,.st-stage__n){display:none}
.st-sb:not(.is-live) .st-stage__tr{display:inline}
.st-stage__tr{font:600 17px/1 var(--mono);letter-spacing:.02em;color:var(--ink-2);white-space:nowrap}
.st-stage__tab{font-size:14px;line-height:1.3;color:var(--ink-2)}
/* підпис під сценою — один рядок поточного кроку */
.st-stage__cap{grid-column:1/-1;display:grid;height:22px}
.st-stage__ci{grid-area:1/1;display:flex;align-items:baseline;gap:10px;min-width:0;font-size:15px;line-height:1.3;color:var(--ink);opacity:0;visibility:hidden;transition:opacity var(--m-dur-1) var(--m-ease-std),visibility var(--m-dur-1)}
.st-stage__ci.is-on{opacity:1;visibility:visible}
.st-stage__ci b{flex:none;font:600 14px/1.3 var(--mono);letter-spacing:.02em;color:var(--time);font-variant-numeric:tabular-nums}
.st-stage__ci>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-sb--agua .st-stage__ci b{color:var(--water)}
/* S5: шкала на телефоні — липка смуга 44 px під шапкою, лише всередині сторіборду */
.st-sb__hud{display:none;align-items:center;gap:12px;height:44px}
.st-sb__hud .st-stage__t{font-size:16px;min-width:0}
.st-sb__hud .st-stage__seg i.is-on::after{transform:none;transition:transform var(--m-dur-2) var(--m-ease-std)}
.st-stage__plan{position:relative;border-radius:var(--r);overflow:hidden;background:#0D1014;box-shadow:var(--shadow-lg);isolation:isolate}
.st-stage__plan>svg{position:relative;display:block;width:100%;height:auto}
.st-stage__img{position:absolute;top:0;max-width:none!important;height:auto;pointer-events:none;background:#0D1014 var(--st-ph-night) 0 0/100% 100% no-repeat}
.st-stage__img--day{background:var(--plan-common) var(--st-ph-day) 0 0/100% 100% no-repeat}
.st-stage__phone .st-phone{--pw:var(--st-pw)}
.st-stage__left{transition:opacity var(--m-dur-2) var(--m-ease-std)}
.st-stage.is-step-4 .st-stage__left{opacity:.6}
.st-stage__img--am{opacity:0;transition:opacity var(--m-dur-3) var(--m-ease-std)}
.st-scene.is-step-5 .st-stage__img--am{opacity:1}
:root[data-theme="dark"] .st-story .st-stage__img--am{display:none}
.st-stage__note{position:absolute;left:12px;right:100px;bottom:12px;z-index:3;padding:7px 11px;border-radius:10px;background:rgba(255,255,255,.94);color:#1E2124;font:600 12.5px/1.3 var(--sans);box-shadow:0 2px 8px rgba(0,0,0,.18);opacity:0;transition:opacity var(--m-dur-2) var(--m-ease-std)}
.st-scene.is-step-5 .st-stage__note{opacity:1}
.st-stage__row .st-frame__rec{display:inline-block;width:5px;height:5px;margin-right:4px;vertical-align:1px}
.st-stage__frames{display:grid;gap:8px;padding:10px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);transition:opacity var(--m-dur-2) var(--m-ease-std)}
.st-stage:not(.is-frames) .st-stage__frames{opacity:0;visibility:hidden}
.st-stage__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.st-stage__row .st-frame__img{border-radius:6px;box-shadow:none;container-type:inline-size}
.st-stage__row .st-frame__ov{font-size:8.5px}
.st-stage__row .st-frame__ts{left:5px;top:5px}
.st-stage__row .st-frame__n{left:auto;right:5px;top:5px}
@container (max-width:110px){.st-frame__ts{display:none}}
.st-stage__frames .st-ilus,.st-mv--frames .st-ilus{justify-self:start}
/* кадр «вода»: свідомо скадрована мокра зона — рамка, підпис, мінікарта */
.st-stage__plan--agua{background:var(--plan-common);outline:1.5px dashed color-mix(in srgb,var(--water) 75%,transparent);outline-offset:-7px}
.st-stage__plan--agua::after{content:"";position:absolute;top:0;right:0;bottom:0;width:13%;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--plan-common) 92%,transparent));pointer-events:none;z-index:1}
.st-zone{position:absolute;left:14px;top:14px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:99px;background:var(--water);color:#FFFFFF;font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.st-zone .st-ico{width:12px;height:12px}
.st-loc{position:absolute;right:12px;bottom:12px;z-index:3;width:76px;padding:4px;border-radius:7px;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(0,0,0,.18)}
.st-loc svg{display:block;width:100%;height:auto}
.st-stage__rooms{position:absolute;inset:0;z-index:2;pointer-events:none}
.st-stage__rooms span{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);font:500 8.5px/1 var(--mono);letter-spacing:.12em;color:rgba(20,22,24,.66);text-shadow:0 0 .45em #FFFFFF,0 0 .2em #FFFFFF;white-space:nowrap}
.st-stage .st-stage__plan--agua{width:min(100%,calc(var(--st-ch)*540/566));justify-self:end}
/* «03:07»: план (750:424) + стрічка кадрів не вищі за телефон: висота лівої колонки = 0,8153 × ширина + 33,5 + підпис «Ilustración» */
.st-stage--noche .st-stage__left{width:100%;max-width:calc((var(--st-ch) - 58px)/.8153);justify-self:end}
/* оверлеї на плані сцени */
.st-ov{opacity:0;transition:opacity var(--m-dur-2) var(--m-ease-std)}
.st-ov.is-on{opacity:1}
.st-ov:is([data-ov="dry"],[data-ov="p1"],[data-ov="p2"]){transition:none}
.st-sp__ring{fill:none;stroke:var(--alarm);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.st-sigp,.st-trig{opacity:0}
.st-trig{transform-box:fill-box;transform-origin:center}
.st-lever{transform-box:fill-box;transform-origin:center;transition:transform var(--m-dur-2) var(--m-ease-std)}
.st-scene.is-closed .st-valve .st-lever{transform:rotate(90deg)}
.st-pud{transform-box:fill-box;transform-origin:center}
.st-drop{opacity:0}
/* чат і журнал у телефоні */
.st-phone__app{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--phone-scr);z-index:2;opacity:0;transition:opacity var(--m-dur-2) var(--m-ease-std)}
.st-phone.is-chat .st-phone__app--chat,.st-phone.is-log .st-phone__app--log{opacity:1}
.st-phone__bar{display:flex;align-items:center;gap:.9em;padding:5em 1.4em 1em;border-bottom:.08em solid rgba(255,255,255,.08);background:rgba(255,255,255,.04)}
.st-phone__av{width:3.4em;height:3.4em;border-radius:50%;display:grid;place-items:center;background:#8A9096;color:#FFFFFF;font:700 1.4em/1 var(--sans)}
.st-phone__who{font:600 1.45em/1.2 var(--sans)}
.st-phone__day{align-self:center;margin-top:1.2em;padding:.35em .9em;border-radius:99px;background:rgba(255,255,255,.08);font:500 1.05em/1.2 var(--sans);color:rgba(255,255,255,.7)}
.st-phone__msgs{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:.7em;padding:1.4em 1.2em 4em}
.st-msg{max-width:84%;padding:.85em 1.1em;border-radius:1.5em 1.5em 1.5em .4em;background:rgba(255,255,255,.13);font:400 1.32em/1.35 var(--sans);overflow-wrap:anywhere}
.st-msg small{display:block;margin-top:.3em;font-size:.78em;color:rgba(255,255,255,.62);text-align:right}
.st-typing{position:absolute;left:1.2em;bottom:4em;display:flex;gap:.4em;padding:1.05em 1.2em;border-radius:1.5em 1.5em 1.5em .4em;background:rgba(255,255,255,.13);opacity:0}
.st-typing i{width:.6em;height:.6em;border-radius:50%;background:rgba(255,255,255,.75)}
.st-phone__logh{padding:5em 1.6em .6em;font:700 2.2em/1.1 var(--display);letter-spacing:-.02em}
.st-phone__logd{padding:0 1.6em;font:500 1.15em/1.3 var(--mono);color:rgba(255,255,255,.62)}
.st-log{display:grid;gap:.6em;padding:1.4em 1.1em}
.st-log li{display:flex;align-items:center;gap:.9em;padding:1em 1.1em;border-radius:1.4em;background:rgba(255,255,255,.07);font:500 1.3em/1.3 var(--sans)}
.st-log li .st-ico{width:2em;height:2em;padding:.4em;border-radius:.6em;background:rgba(255,255,255,.12);color:#FFFFFF;flex:none}
.st-log li:first-child .st-ico{background:var(--alarm)}
.st-log b{font:600 .92em/1 var(--mono);color:rgba(255,255,255,.62);margin-left:auto}
/* мобільні візуали кроків */
.st-mv{position:relative;border-radius:var(--r-sm);overflow:hidden;background:#0D1014;box-shadow:var(--shadow)}
.st-mv .st-stage__plan{border-radius:0;box-shadow:none}
.st-mv__n{display:grid;gap:8px;padding:10px;font-size:9.6px}
.st-mv__n .st-notif{background:rgba(30,33,37,.94)}
.st-mv--agua{background:var(--plan-common)}
.st-mv--card{background:var(--phone-scr);padding:14px 14px 16px;color:#FFFFFF;font-size:10px}
.st-mv--card .st-phone__bar{padding:0 0 .9em;background:none}
.st-mv--card .st-phone__day{display:block;width:max-content;margin:1em auto 0}
.st-mv--card .st-phone__msgs{padding:1em 0 0;min-height:7.5em}
.st-mv--card .st-typing{left:0;bottom:0}
.st-mv--card .st-msg{max-width:100%}
.st-mv--card .st-phone__logh{padding:0 0 .35em}
.st-mv--card .st-phone__logd{padding:0}
.st-mv--card .st-log{padding:1em 0 0}
.st-mv--frames{background:var(--card);padding:8px;display:grid;gap:6px}
/* стани приладів на плані сцени */
.st-sp__bg{fill:#3A3F45;stroke:#FFFFFF;stroke-width:2}
.st-sp use{color:#FFFFFF}
.st-sp__halo{fill:transparent}
.st-sp.is-alarm .st-sp__bg{fill:var(--alarm)}
.st-sp.is-alarm .st-sp__halo{fill:var(--alarm);fill-opacity:.38}
.st-sp.is-water .st-sp__bg{fill:var(--water)}
.st-sp.is-water .st-sp__halo{fill:var(--water);fill-opacity:.38}
.st-sp.is-ok .st-sp__bg{fill:var(--acc)}
.st-sp.is-ok use{color:var(--acc-fg)}
.st-sp:not([class*="is-"]) .st-sp__halo{display:none}
/* схема води */
.st-scheme{margin-top:clamp(48px,6vw,80px)}
.st-scheme__flow{display:flex;align-items:center;gap:0;padding:26px clamp(16px,3vw,32px);border-radius:calc(var(--r) + 4px);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.st-scheme__node{flex:none;display:grid;justify-items:center;gap:8px;width:132px;text-align:center}
.st-scheme__vis{width:76px;height:76px;border-radius:22px;display:grid;place-items:center;background:radial-gradient(circle at 36% 30%,#FFFFFF,#F1F1ED 60%,#D9DAD5);box-shadow:inset 0 0 0 1px rgba(20,22,24,.06),0 8px 16px -8px rgba(20,22,24,.3)}
.st-scheme__vis .st-dev{width:62px;height:62px}
.st-scheme__vis .st-ico{width:34px;height:34px;color:#2A2D31}
.st-scheme__node--hub .st-scheme__vis{width:92px;height:92px;box-shadow:inset 0 0 0 1px rgba(20,22,24,.06),0 0 0 4px var(--acc-soft),0 10px 18px -8px rgba(20,22,24,.3)}
.st-scheme__lbl{font-size:13.5px;line-height:1.3;font-weight:600;color:var(--ink)}
.st-scheme__edge{flex:1;min-width:70px;position:relative;display:grid;justify-items:center;gap:6px;padding:0 6px;margin-bottom:28px}
.st-scheme__line{display:block;width:100%;height:2px;background:repeating-linear-gradient(90deg,var(--water) 0 7px,transparent 7px 12px);position:relative}
.st-scheme__line::after{content:"";position:absolute;right:-2px;top:-4px;border-left:8px solid var(--water);border-top:5px solid transparent;border-bottom:5px solid transparent}
.st-scheme__elbl{font:500 11.5px/1.2 var(--mono);color:var(--water);text-align:center}
.st-scheme__fork{flex:1.6;display:grid;gap:18px}
.st-scheme__fork>ol{display:flex;align-items:center}
.st-scheme__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.st-scheme__card{padding:18px 18px 20px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.st-scheme__h{font:800 18px/1.2 var(--display);letter-spacing:-.02em}
.st-scheme__p{font-size:14.5px;line-height:1.5;color:var(--ink-2);margin-top:8px;text-wrap:pretty}
.st-scheme__note{margin-top:14px;font-size:13.5px;line-height:1.5;color:var(--ink-3);max-width:90ch}

/* без JS — та сама розкладка, що з JS (А1): липка сцена в загальному вигляді, шкала повна; «Ampliar» — лише з JS (абсолютна кнопка, висоту не змінює).
   S6: reduced-motion — кожен крок зі своїм кінцевим кадром, шкала повна, підпис загальний, нічого не перемикається */
html:not(.st-js) .st-stage__seg i::after{transform:none}
.st-story[data-motion="reduced"] .st-sb__grid{grid-template-columns:minmax(0,1fr)}
.st-story[data-motion="reduced"] .st-sb__stage{display:none}
.st-story[data-motion="reduced"] .st-sb__col{max-width:640px;padding-bottom:0}
.st-story[data-motion="reduced"] .st-sb__col>.st-head{min-height:0}
.st-story[data-motion="reduced"] .st-sb__step{min-height:0;opacity:1}
.st-story[data-motion="reduced"] .st-sb__mvis{display:block;margin-bottom:14px}
.st-story[data-motion="reduced"] .st-sb__hud{display:flex;flex-wrap:wrap;position:static;height:auto;min-height:44px;margin:0 0 6px;padding:0;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.st-story[data-motion="reduced"] .st-sb__hud .st-stage__tab{display:inline}
.st-story[data-motion="reduced"] .st-sb__hud .st-stage__seg{flex-basis:100%}
.st-story[data-motion="reduced"] .st-stage__seg i::after{transform:none}
@media (prefers-reduced-motion:reduce){
  .st-sb__grid{grid-template-columns:minmax(0,1fr)}
  .st-sb__stage{display:none}
  .st-sb__col{max-width:640px;padding-bottom:0}
  .st-sb__col>.st-head{min-height:0}
  .st-sb .st-sb__step{min-height:0;opacity:1}
  .st-sb__mvis{display:block;margin-bottom:14px}
  .st-sb .st-sb__hud{display:flex;flex-wrap:wrap;position:static;height:auto;min-height:44px;margin:0 0 6px;padding:0;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .st-sb__hud .st-stage__tab{display:inline}
  .st-sb__hud .st-stage__seg{flex-basis:100%}
  .st-stage__seg i::after{transform:none}
}
html:not(.st-js) :is(.st-map__zoom,.st-map__hint){display:none!important}

/* ---------- 6–12 · частина Б ---------- */
.st-box{padding:20px 22px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.st-box__h{font:800 18px/1.25 var(--display);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.st-box__p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.st-box .st-go{margin-top:6px}
.st-go{display:inline-flex;align-items:center;gap:7px;min-height:44px;font:600 15px/1.3 var(--sans);color:var(--ink);text-decoration:none}
.st-go>span[aria-hidden]{color:var(--ink-3)}
.st-go .st-ico{width:16px;height:16px;transition:transform var(--m-dur-1) var(--m-ease-std)}
.st-go:hover{color:var(--acc-ink)}
.st-go:hover .st-ico{transform:translateX(3px)}
.st-swipe{display:none}
.st-note{margin-top:12px;font-size:13px;line-height:1.45;color:var(--ink-3);max-width:58ch}
.st-ticks{display:grid;gap:9px;margin-top:12px}
.st-ticks li{display:flex;gap:10px;font-size:15px;line-height:1.45;color:var(--ink-2)}
.st-ticks .st-ico{width:18px;height:18px;color:var(--acc-ink);margin-top:1px}
/* 6 · страхи */
.st-fears{background:var(--panel)}
.st-fears__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
.st-fear{display:flex;flex-direction:column;gap:10px;padding:22px 22px 10px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.st-fear__q{font:800 19px/1.25 var(--display);letter-spacing:-.02em;text-wrap:balance}
.st-fear__a{flex:1;font-size:15px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.st-fear .st-go{align-self:flex-start}
.st-fear--ask{background:var(--card-2);border-style:dashed}
.st-fear--ask .st-btn{align-self:flex-start;margin-bottom:12px}
/* 7 · набори */
.st-kset__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:36px}
.st-kc{display:flex;flex-direction:column;gap:12px;padding:22px;border-radius:calc(var(--r) + 4px);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);transition:box-shadow var(--m-dur-2) var(--m-ease-std),border-color var(--m-dur-2) var(--m-ease-std)}
.st-kc.is-sel{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc),var(--shadow)}
.st-kc__top{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:32px}
.st-kc__k{display:grid;place-items:center;min-width:40px;height:32px;padding:0 8px;border-radius:9px;background:var(--btn);color:var(--btn-fg);font:700 15px/1 var(--mono)}
.st-kc__pre{font:500 12px/1.35 var(--mono);color:var(--ink-3)}
.st-kc__name{font:800 21px/1.15 var(--display);letter-spacing:-.025em;text-wrap:balance}
.st-kc__who{font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.st-kc__cov{flex:1;display:grid;gap:8px;align-content:start}
.st-kc__cov li{display:flex;gap:9px;font-size:14.5px;line-height:1.45}
.st-kc__cov .st-ico{width:17px;height:17px;color:var(--acc-ink);margin-top:1px}
.st-kc__lacks{font-size:13.5px;line-height:1.45;color:var(--ink-3)}
.st-kc__price{display:grid;gap:4px;padding-top:12px;border-top:1px solid var(--line)}
.st-kc__pl{font:500 11.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.st-kc__pv{font:800 26px/1.1 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.st-kc__pv--t{font-size:18px;line-height:1.25}
.st-kc__cta{display:grid;gap:8px}
.st-kc__cta .st-btn{width:100%;min-height:44px;padding:0 14px;font-size:15px}
.st-kset__more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;margin-top:22px}
.st-kset__lox{font-size:15px;line-height:1.5;color:var(--ink-2);max-width:72ch}
.st-kset__lox b{color:var(--ink)}
/* 8 · камери */
.st-cams{background:var(--panel)}
.st-cams__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,4.5vw,64px);align-items:center}
.st-cams__rules{display:grid;gap:16px;margin:28px 0 20px}
.st-cams__h{font:800 18px/1.25 var(--display);letter-spacing:-.02em}
.st-cams__p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.st-cams__plan{position:relative;aspect-ratio:1000/640;border-radius:calc(var(--r) + 4px);overflow:hidden;background:var(--plan-common) var(--st-ph-day) 0 0/100% 100% no-repeat;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.st-cams__img,.st-cams__svg{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.st-cams__zone,.st-cams__terr{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);font:600 10.5px/1.2 var(--mono);letter-spacing:.1em;white-space:nowrap}
.st-cams__zone{padding:5px 9px;border-radius:99px;background:#FFFFFF;color:#8E2A20;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.st-cams__terr{color:rgba(20,22,24,.72);text-shadow:0 0 .45em #FFFFFF,0 0 .2em #FFFFFF}
.is-anim .st-cams:not(.is-played) .st-sweep{stroke-dashoffset:1}
.st-cams.is-play .st-sweep{animation:st-draw var(--m-dur-2) var(--m-ease-out) both}
/* 9 · що робить і чого ні */
.st-hon__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:36px}
.st-hon__col{padding:24px;border-radius:calc(var(--r) + 4px);background:var(--card);border:1px solid var(--line)}
.st-hon__h{display:flex;align-items:center;gap:10px;font:800 22px/1.2 var(--display);letter-spacing:-.02em}
.st-hon__h .st-ico{width:30px;height:30px;padding:6px;border-radius:9px}
.st-hon__col--yes .st-hon__h .st-ico{background:var(--acc-soft);color:var(--acc-ink)}
.st-hon__col--no .st-hon__h .st-ico{background:color-mix(in srgb,var(--alarm) 14%,transparent);color:var(--alarm)}
.st-hon__ul{display:grid;gap:12px;margin-top:18px}
.st-hon__ul li{display:flex;gap:10px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.st-hon__ul .st-ico{width:18px;height:18px;margin-top:2px}
.st-hon__col--yes .st-hon__ul .st-ico{color:var(--acc-ink)}
.st-hon__col--no .st-hon__ul .st-ico{color:var(--alarm)}
.st-hon__ul .st-hon__first{margin:0 -8px 4px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--alarm) 9%,transparent);color:var(--ink);font-weight:600}
.st-hon__police{margin-top:16px}
/* 10 · абонплата чи купівля */
.st-cuo{background:var(--panel)}
.st-cuo__t{margin-top:36px;border-radius:calc(var(--r) + 4px);background:var(--card);border:1px solid var(--line);overflow:hidden}
.st-cuo__r{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.st-cuo__r:first-child{border-top:0}
.st-cuo__r>*{min-width:0;padding:14px 20px}
.st-cuo__r--h{background:var(--card-2);font:700 14.5px/1.3 var(--sans)}
.st-cuo__l{align-self:center;font-size:15px;line-height:1.4}
.st-cuo__c{display:grid;align-content:center;justify-items:start;gap:4px;font-size:14px;line-height:1.45;color:var(--ink-2)}
.st-cuo__r--h .st-cuo__c{color:var(--ink)}
.st-cuo__c .st-ico{width:20px;height:20px;color:var(--acc-ink)}
.st-cuo__c--aj{background:color-mix(in srgb,var(--acc) 7%,transparent)}
.st-cuo__r--sum{background:var(--card-2)}
.st-cuo__k{font:500 11.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.st-cuo__v{font:800 30px/1.05 var(--display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.st-cuo__f{font-size:13px;line-height:1.4;color:var(--ink-2)}
.st-cuo__r--sum .st-cuo__c{gap:6px;padding-top:18px;padding-bottom:18px}
.st-cuo__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.st-cuo__stat{display:grid;align-content:start;gap:6px;padding:16px 18px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.st-cuo__stat--hl{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc);background:color-mix(in srgb,var(--acc) 7%,var(--card))}
.st-cuo__sk{font:500 11.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.st-cuo__sv{font:800 24px/1.1 var(--display);letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums}
.st-cuo__ss{font-size:13px;line-height:1.4;color:var(--ink-2);font-variant-numeric:tabular-nums}
.st-cnt{display:inline-block;text-align:right}
.st-cuo__only{margin-top:12px;padding:12px 16px;border-radius:12px;background:var(--card);border:1px solid var(--line);font-size:14.5px;line-height:1.5;color:var(--ink)}
.st-cuo__src{margin-top:10px;font-size:13px;line-height:1.5;color:var(--ink-3);max-width:110ch}
.st-cuo__notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.st-cuo__more{display:grid;gap:16px;margin-top:28px}
.st-cuo__mh{max-width:760px}
.st-cuo__rows{display:grid;border-radius:calc(var(--r) + 4px);background:var(--card);border:1px solid var(--line);overflow:hidden}
.st-cuo__row{display:grid;grid-template-columns:40px minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:6px 18px;align-items:center;padding:14px 20px;border-top:1px solid var(--line)}
.st-cuo__row:first-child{border-top:0}
.st-cuo__rk b{display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 6px;border-radius:9px;background:var(--card-2);border:1px solid var(--line);font:700 13px/1 var(--mono);color:var(--ink)}
.st-cuo__rn{font:700 15.5px/1.35 var(--sans);color:var(--ink);text-wrap:pretty}
a.st-cuo__rn{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
a.st-cuo__rn:hover{color:var(--acc-ink);text-decoration-color:currentColor}
.st-cuo__rp,.st-cuo__rm{display:grid;gap:2px;min-width:0}
.st-cuo__rp b,.st-cuo__rm b{font:800 18px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.st-cuo__rp--t b{font-size:16px}
.st-cuo__rp small,.st-cuo__rm small{font-size:12.5px;line-height:1.35;color:var(--ink-3)}
.st-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:99px;border:1px solid var(--line-2);background:var(--card);color:var(--ink);font:600 14px/1.2 var(--sans);text-decoration:none}
.st-chip b{font:600 13px/1 var(--mono);color:var(--ink-2)}
.st-chip:hover{border-color:var(--ink-3)}
/* 11 · як працюємо — та сама шкала, що в сторібордах, без липкості */
.st-proc__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4.5vw,64px);margin-top:36px;align-items:start}
.st-proc__steps{display:grid}
.st-proc__step{position:relative;padding:0 0 28px 38px}
.st-proc__step::before{content:"";position:absolute;left:0;top:1px;width:16px;height:16px;border-radius:50%;background:var(--acc)}
.st-proc__step::after{content:"";position:absolute;left:7px;top:21px;bottom:2px;width:2px;background:var(--acc);transform-origin:top}
.st-proc__step:last-child::after{display:none}
.st-proc__n{display:block;font:600 13px/1.2 var(--mono);letter-spacing:.06em;color:var(--acc-ink)}
.st-proc__h{margin-top:8px;font:800 21px/1.2 var(--display);letter-spacing:-.02em}
.st-proc__p{margin-top:8px;font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:52ch;text-wrap:pretty}
.is-anim .st-proc:not(.is-played) .st-proc__step::after{transform:scaleY(0)}
.st-proc.is-play .st-proc__step::after{animation:st-grow-y var(--m-dur-2) var(--m-ease-std) both;animation-delay:calc(var(--k,0)*120ms)}
.st-proc__side{display:grid;gap:16px}
.st-who{margin-top:clamp(56px,6vw,88px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.st-who__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px;margin-top:24px}
.st-who__facts li{position:relative;padding-left:18px;font-size:16px;line-height:1.55;color:var(--ink-2)}
.st-who__facts li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--acc)}
.st-who__lox{margin-top:20px;font-size:15px;line-height:1.5;color:var(--ink-2)}
/* 12 · FAQ + заклик */
.st-faq{background:var(--panel)}
.st-faq__grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(32px,4.5vw,64px);align-items:start}
.st-faq__tech{font-size:15px;line-height:1.55;color:var(--ink-2)}
.st-faq__list{display:grid;border-top:1px solid var(--line)}
.st-qa{border-bottom:1px solid var(--line)}
.st-qa__q{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;list-style:none;cursor:pointer;font:700 17px/1.35 var(--sans);color:var(--ink)}
.st-qa__q::-webkit-details-marker{display:none}
.st-qa__q .st-ico{width:18px;height:18px;transform:rotate(90deg);transition:transform var(--m-dur-1) var(--m-ease-std)}
.st-qa[open] .st-qa__q .st-ico{transform:rotate(-90deg)}
.st-qa__a{padding:0 0 18px;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:72ch;text-wrap:pretty}
.st-final{display:grid;justify-items:center;gap:16px;margin-top:clamp(56px,6vw,88px);padding:clamp(32px,5vw,56px) clamp(20px,4vw,56px);border-radius:calc(var(--r) + 8px);background:var(--card);border:1px solid var(--line);text-align:center}
.st-final .st-lead{max-width:56ch}
.st-final .st-cta{justify-content:center}

/* ---------- план у темній темі: нічний за замовчуванням (data-plan="auto"), денний — притемнений ---------- */
.st-story[data-plan="night"] .st-map__img--night{opacity:1}
.st-story[data-plan="night"] .st-room{color:rgba(236,239,230,.72);text-shadow:0 0 .5em rgba(0,0,0,.95),0 0 .2em rgba(0,0,0,.9)}
.st-story[data-plan="night"] .st-map__cov .st-cv-light{mix-blend-mode:screen}
:root[data-theme="dark"] .st-story[data-plan="auto"] .st-map__img--night{opacity:1}
:root[data-theme="dark"] .st-story[data-plan="auto"] .st-room{color:rgba(236,239,230,.72);text-shadow:0 0 .5em rgba(0,0,0,.95),0 0 .2em rgba(0,0,0,.9)}
:root[data-theme="dark"] .st-story[data-plan="auto"] .st-map__cov .st-cv-light{mix-blend-mode:screen}
:root[data-theme="dark"] .st-story :is(.st-map__img--day,.st-stage__img--day,.st-cams__img){filter:brightness(.76) saturate(.9)}
:root[data-theme="dark"] .st-story .st-stage__plan--agua::after{background:linear-gradient(90deg,transparent,rgba(14,17,12,.85))}
:root[data-theme="dark"] .st-story .st-loc{background:rgba(236,239,230,.86)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .st-story[data-plan="auto"] .st-map__img--night{opacity:1}
  :root:not([data-theme="light"]) .st-story[data-plan="auto"] .st-room{color:rgba(236,239,230,.72);text-shadow:0 0 .5em rgba(0,0,0,.95),0 0 .2em rgba(0,0,0,.9)}
  :root:not([data-theme="light"]) .st-story[data-plan="auto"] .st-map__cov .st-cv-light{mix-blend-mode:screen}
  :root:not([data-theme="light"]) .st-story :is(.st-map__img--day,.st-stage__img--day,.st-cams__img){filter:brightness(.76) saturate(.9)}
  :root:not([data-theme="light"]) .st-story .st-stage__plan--agua::after{background:linear-gradient(90deg,transparent,rgba(14,17,12,.85))}
  :root:not([data-theme="light"]) .st-story .st-loc{background:rgba(236,239,230,.86)}
  :root:not([data-theme="light"]) .st-story .st-stage__img--am{display:none}
}

/* ---------- рух (motion.md): keyframes ---------- */
@keyframes st-fade-in{from{opacity:0}to{opacity:1}}
@keyframes st-fade-out{from{opacity:1}to{opacity:0}}
@keyframes st-o0{from,to{opacity:0}}
@keyframes st-o1{from,to{opacity:1}}
@keyframes st-in-down{from{opacity:0;transform:translateY(var(--dy,-12px))}to{opacity:1;transform:none}}
@keyframes st-in-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes st-blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes st-ring{from{opacity:.5;transform:scale(1)}to{opacity:0;transform:scale(1.8)}}
@keyframes st-wave{0%{opacity:0;transform:scale(.15)}12%{opacity:.9}100%{opacity:0;transform:scale(1)}}
@keyframes st-arc{0%{opacity:0;transform:scale(.6)}45%{opacity:1}100%{opacity:var(--o,.6);transform:none}}
@keyframes st-flow{to{stroke-dashoffset:-24}}
@keyframes st-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes st-pulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes st-glow{0%,100%{opacity:0}30%{opacity:1}}
@keyframes st-node{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes st-sig-x{0%{opacity:0;transform:translateX(0)}8%,92%{opacity:1}100%{opacity:0;transform:translateX(100%)}}
@keyframes st-sig-y{0%{opacity:0;transform:translateY(0)}8%,92%{opacity:1}100%{opacity:0;transform:translateY(100%)}}
@keyframes st-sigp{0%{opacity:1;stroke-dashoffset:.14}88%{opacity:1}100%{opacity:0;stroke-dashoffset:-1}}
@keyframes st-rot90{from{transform:rotate(0)}to{transform:rotate(90deg)}}
@keyframes st-rot90r{from{transform:rotate(90deg)}to{transform:rotate(0)}}
@keyframes st-deal{from{opacity:0;transform:translate(var(--dx,0),10px) rotate(var(--rot,-6deg))}to{opacity:1;transform:none}}
@keyframes st-life{0%,92%{opacity:1}100%{opacity:0}}
@keyframes st-dot{0%,100%{opacity:.35;transform:none}50%{opacity:1;transform:translateY(-.25em)}}
@keyframes st-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes st-pop-out{to{opacity:0;transform:scale(.97)}}
@keyframes st-sheet{from{transform:translateY(100%)}to{transform:none}}
@keyframes st-sheet-out{to{transform:translateY(100%)}}
@keyframes st-pin-in{from{opacity:0;transform:scale(1.15)}to{opacity:1;transform:none}}
@keyframes st-pin-out{to{opacity:0;transform:scale(.6)}}
@keyframes st-grow{from{transform:scale(.4)}to{transform:none}}
@keyframes st-in{from{opacity:0}}
@keyframes st-grow-y{from{transform:scaleY(0)}to{transform:none}}
@keyframes st-drop{0%{opacity:0;transform:translateY(-6px)}25%{opacity:1}100%{opacity:0;transform:translateY(10px)}}

/* M1 · hero — in-view, 1 раз */
.st-hero.is-play .st-frame__f2{animation:st-fade-in 300ms var(--m-ease-std) 900ms both}
.st-hero.is-play .st-frame__f3{animation:st-fade-in 300ms var(--m-ease-std) 1800ms both}
.st-hero.is-play .st-tick>b:nth-child(1){animation:st-o0 1ms linear 900ms forwards}
.st-hero.is-play .st-tick>b:nth-child(2){animation:st-o1 900ms linear 900ms}
.st-hero.is-play .st-tick>b:nth-child(3){animation:st-o1 1ms linear 1800ms forwards}
.st-hero.is-play .st-frame__rec{animation:st-blink 800ms var(--m-ease-std) 3}
.is-anim .st-hero:not(.is-played) .st-hero__phone .st-notif{opacity:0}
.st-hero.is-play .st-hero__phone .st-notif{animation:st-in-down var(--m-dur-2) var(--m-ease-out) both;animation-delay:calc(1700ms + var(--k,0)*250ms)}
/* M2 · Así funciona — in-view, 1 раз: сигнал 1,2 с + наслідки → 2,4 с */
.is-anim .st-how:not(.is-played) .st-how__node::after{opacity:0}
.is-anim .st-how:not(.is-played) .st-mph__n{opacity:0}
.is-anim .st-how:not(.is-played) .st-how__sw i{opacity:0}
.is-anim .st-how:not(.is-played) .st-how__valve .st-lever{transform:none}
.st-how.is-play .st-how__sig{animation:st-sig-x 1200ms linear both}
.st-how.is-play .st-how__node::after{animation:st-node var(--m-dur-1) var(--m-ease-out) both;animation-delay:calc(var(--k,0)*300ms)}
.st-how.is-play :is(.st-how__vis,.st-how__hub)::after{animation:st-glow 700ms var(--m-ease-std) both;animation-delay:calc(var(--k,0)*300ms)}
.st-how.is-play .st-how__rings i{animation:st-ring var(--m-dur-3) var(--m-ease-out) 600ms both}
.st-how.is-play .st-mph__n{animation:st-in-down var(--m-dur-2) var(--m-ease-out) 900ms both}
.st-how.is-play .st-mph--2 .st-mph__n{animation-delay:1150ms}
.st-how.is-play .st-how__sw i{animation:st-arc 800ms var(--m-ease-out) 1200ms both}
.st-how.is-play .st-how__sw i:nth-child(2){animation-delay:1400ms}
.st-how.is-play .st-how__sw i:nth-child(3){animation-delay:1600ms}
.st-how.is-play .st-how__valve .st-lever{animation:st-rot90 var(--m-dur-2) var(--m-ease-std) 1200ms both}
/* M3 · шари — tap */
.st-map .st-cv.is-on .st-sweep{animation:st-draw var(--m-dur-2) var(--m-ease-out) both}
.st-map .st-cv.is-on .st-drawl{animation:st-draw var(--m-dur-2) var(--m-ease-out) both}
.st-map .st-cv.is-on .st-pulse3{animation:st-pulse 800ms var(--m-ease-std) 3}
.st-map .st-cv.is-on .st-wave{animation:st-wave 800ms var(--m-ease-out) both;animation-delay:calc(var(--k,0)*200ms)}
.st-map .st-cv.is-on .st-flowd{animation:st-flow 1.2s linear 2}
/* M4 · набори — tap */
.st-pin.is-in{animation:st-pin-in 260ms var(--m-ease-out) var(--d,0ms) backwards}
.st-pin.is-out{animation:st-pin-out var(--m-dur-1) var(--m-ease-in) forwards;pointer-events:none}
/* M5 · картка приладу — tap */
.st-card.is-enter{animation:st-pop var(--m-dur-1) var(--m-ease-out) both}
.st-card.is-closing{animation:st-pop-out 140ms var(--m-ease-in) forwards}
/* M6 · 03:07 — step */
.is-anim .st-scene:not(.is-played) .st-drawm{stroke-dashoffset:1}
.is-anim .st-scene:not(.is-played) :is(.st-stage__row .st-frame__img,.st-chat .st-msg,.st-log li,.st-notif.is-new){opacity:0}
.is-anim .st-scene.is-step-3:not(.is-played) .st-sweep{stroke-dashoffset:1}
.st-scene.is-play.is-step-1 [data-ov="door"] .st-pulse3{animation:st-in var(--m-dur-2) var(--m-ease-out) both}
.st-scene.is-play.is-step-1 .st-sp[data-id="D1"] .st-sp__ring{animation:st-ring var(--m-dur-3) var(--m-ease-out) both}
.st-scene.is-play.is-step-1 .st-drawm{animation:st-draw var(--m-dur-3) var(--m-ease-std) 200ms both}
.st-scene.is-play.is-step-2 [data-ov="sirens"] .st-wave{animation:st-wave 800ms var(--m-ease-out) both;animation-delay:calc(var(--d,0ms) + var(--k,0)*200ms)}
.st-scene.is-play.is-step-3 .st-sweep{animation:st-draw var(--m-dur-2) var(--m-ease-out) both}
.st-scene.is-play.is-step-3 .st-stage__row .st-frame__img{animation:st-deal 400ms var(--m-ease-out) both;animation-delay:calc(var(--k,0)*400ms)}
.st-scene.is-play.is-step-3 .st-stage__row .st-frame__rec{animation:st-blink 450ms var(--m-ease-std) 3}
.st-scene.is-play.is-step-4 [data-ov="nb"] .st-wave{animation:st-wave 800ms var(--m-ease-out) both;animation-delay:calc(var(--k,0)*200ms)}
.st-scene.is-play.is-step-4 .st-typing{animation:st-life var(--m-dur-3) linear both}
.st-scene.is-play.is-step-4 .st-typing i{animation:st-dot 450ms var(--m-ease-std) 2 both}
.st-scene.is-play.is-step-4 .st-typing i:nth-child(2){animation-delay:150ms}
.st-scene.is-play.is-step-4 .st-typing i:nth-child(3){animation-delay:300ms}
.st-scene.is-play.is-step-4 .st-chat .st-msg{animation:st-in-up var(--m-dur-2) var(--m-ease-out) var(--m-dur-3) both}
.st-scene.is-play.is-step-5 .st-log li{animation:st-in-up var(--m-dur-2) var(--m-ease-out) both;animation-delay:calc(var(--k,0)*120ms)}
.st-scene.is-play .st-notif.is-new{animation:st-in-down var(--m-dur-2) var(--m-ease-out) both;animation-delay:calc(var(--k,0)*250ms)}
.st-scene.is-play .st-sp:is(.is-alarm,.is-water) .st-sp__halo{animation:st-pulse 500ms var(--m-ease-std) 3}
/* M7 · вода — step */
.is-anim .st-scene.is-step-1:not(.is-played) [data-ov="p1"] .st-pud{transform:scale(.4)}
.is-anim .st-scene.is-step-3:not(.is-played) [data-ov="dry"] .st-seg{opacity:0}
.is-anim .st-scene.is-step-3:not(.is-played) .st-valve .st-lever{transform:none}
.is-anim .st-scene.is-step-5:not(.is-played) .st-valve .st-lever{transform:rotate(90deg)}
.st-scene.is-play:is(.is-step-1,.is-step-2,.is-step-5) .st-flowd{animation:st-flow 500ms linear 3}
.st-scene.is-play.is-step-1 .st-drop{animation:st-drop 500ms var(--m-ease-in) 3 both}
.st-scene.is-play.is-step-1 [data-ov="p1"] .st-pud{animation:st-grow var(--m-dur-3) var(--m-ease-out) both}
.st-scene.is-play.is-step-2 .st-trig{animation:st-ring var(--m-dur-3) var(--m-ease-out) both}
.st-scene.is-play.is-step-2 [data-ov="r1"] .st-sigp{animation:st-sigp var(--m-dur-3) var(--m-ease-std) both}
.st-scene.is-play.is-step-3 :is([data-ov="r2"],[data-ov="r3"]) .st-sigp{animation:st-sigp 400ms var(--m-ease-std) both}
.st-stage--agua.is-play.is-step-3 .st-notif.is-new{animation-delay:400ms}
.st-scene.is-play.is-step-3 .st-valve .st-lever{animation:st-rot90 var(--m-dur-2) var(--m-ease-std) 400ms both}
.st-scene.is-play.is-step-3 [data-ov="dry"] .st-seg{animation:st-fade-in var(--m-dur-2) var(--m-ease-std) both;animation-delay:calc(600ms + var(--k,0)*80ms)}
.st-scene.is-play.is-step-5 .st-valve .st-lever{animation:st-rot90r var(--m-dur-2) var(--m-ease-std) both}
/* поза екраном — пауза */
.st-sec.is-out *,.st-sec.is-out *::before,.st-sec.is-out *::after{animation-play-state:paused!important}
/* reduced: системне налаштування або Tweak motion=reduced — кінцевий стан, без послідовностей */
.st-story[data-motion="reduced"] *,.st-story[data-motion="reduced"] *::before,.st-story[data-motion="reduced"] *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  .st-story *,.st-story *::before,.st-story *::after{animation:none!important;transition:none!important}
}

/* ---------- адаптив ---------- */
@media (max-width:1279px){
  .st-hero__vis{--st-hpw:252px}
}
@media (max-width:1180px){
  .st-kset__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1080px){
  .st-how__flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:44px}
  .st-how__flow::before,.st-how__sig,.st-how__node{display:none}
  .st-how__hub{grid-column:1/-1;grid-row:2;grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;align-items:center;column-gap:20px;margin:0}
  .st-how__hubvis{grid-row:span 2;width:120px;height:120px}
  .st-how__hubdev{width:80px;height:80px}
  .st-legend{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .st-sb__grid{grid-template-columns:minmax(0,1fr)}
  .st-sb__stage{display:none}
  .st-sb__col{max-width:620px;padding-bottom:0}
  .st-sb__col>.st-head{min-height:0}
  .st-story .st-sb__step[id]{scroll-margin-top:calc(var(--st-hdr) + 44px + 12px)}
  .st-sb__step{min-height:0;padding:18px 0 26px 30px}
  .st-sb.is-live .st-sb__step:not(.is-on){opacity:1}
  .st-sb.is-live .st-sb__step.is-on .st-sb__bar{transform:scaleY(0);transition:transform var(--m-dur-2) var(--m-ease-std)}
  .st-sb.is-live .st-sb__step.is-on .st-mv{box-shadow:0 0 0 2px var(--time),var(--shadow)}
  .st-sb--agua.is-live .st-sb__step.is-on .st-mv{box-shadow:0 0 0 2px var(--water),var(--shadow)}
  .st-sb__hud{display:flex;position:sticky;top:var(--st-hdr);z-index:6;margin:0 calc(-1*var(--gut)) 10px;padding:0 var(--gut);background:color-mix(in srgb,var(--panel) 92%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .st-sb--agua .st-sb__hud{background:color-mix(in srgb,var(--bg) 92%,transparent)}
  .st-sb__step::before{top:22px;width:14px;height:14px;left:1px}
  .st-sb__step::after,.st-sb__bar{top:38px;bottom:-22px}
  .st-sb__step.is-on::before{box-shadow:none}
  .st-sb__mvis{display:block;margin-bottom:14px}
}
@media (max-width:899px){
  .st-hero__grid{grid-template-columns:minmax(0,1fr)}
  .st-hero__vis{height:auto;margin-bottom:0;--st-hpw:min(236px,62vw)}
  .st-hero__frame{width:100%}
  /* телефон обрізаний: годинник + 2 сповіщення (~64 % висоти), підпис «Ilustración» — угорі ліворуч, не перекривається */
  .st-hero__vis .st-hero__phone{position:relative;top:auto;right:auto;margin:-64px 6px 0 auto;height:calc(var(--pw)*19.3/9*.64);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 86%,transparent);mask-image:linear-gradient(180deg,#000 86%,transparent)}
  .st-hero__vis .st-hero__phone .st-phone__body{height:calc(var(--pw)*19.3/9)}
  .st-story[data-hero="phone"] .st-hero__vis .st-hero__phone{height:calc(var(--pw)*19.3/9);overflow:visible;-webkit-mask-image:none;mask-image:none;--pw:min(300px,80vw)}
  .st-proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-scheme__flow{flex-direction:column;align-items:stretch;gap:4px}
  .st-scheme__node{width:auto;grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;align-items:center;gap:14px}
  .st-scheme__vis,.st-scheme__node--hub .st-scheme__vis{width:64px;height:64px;border-radius:18px}
  .st-scheme__vis .st-dev{width:52px;height:52px}
  .st-scheme__edge{min-width:0;margin:0 0 0 31px;padding:6px 0;justify-items:start;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px}
  .st-scheme__line{width:2px;height:30px;background:repeating-linear-gradient(180deg,var(--water) 0 6px,transparent 6px 10px)}
  .st-scheme__line::after{right:-4px;top:auto;bottom:-3px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--water);border-bottom:0}
  .st-scheme__fork{gap:4px;padding-left:0}
  .st-scheme__fork>ol{flex-direction:column;align-items:stretch;gap:4px}
  .st-scheme__cards{grid-template-columns:minmax(0,1fr)}
  .st-fears__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-cams__grid,.st-proc__grid,.st-faq__grid,.st-cuo__notes,.st-cuo__more{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:719px){
  .st-how__flow{grid-template-columns:minmax(0,1fr)}
  .st-how__flow::before{display:block;left:47px;right:auto;top:20px;bottom:20px;width:2px;height:auto;background:repeating-linear-gradient(180deg,var(--line-2) 0 8px,transparent 8px 15px)}
  .st-how__sig{display:block;left:41px;right:auto;top:20px;bottom:20px;width:12px;height:auto}
  .st-how__sig::before{left:0;top:-6px}
  .st-how.is-play .st-how__sig{animation-name:st-sig-y}
  .st-how__step{grid-template-columns:96px minmax(0,1fr);column-gap:16px;align-items:start}
  .st-how__vis{grid-row:span 3;height:96px;width:96px;gap:0}
  .st-how__vis::before{bottom:10px}
  .st-how__k{margin-top:4px}
  .st-how__devs .st-dev{width:30px;height:30px}.st-how__devs .st-dev:nth-child(2){width:36px;height:36px}
  .st-how__mc{display:none}
  .st-how__shots{width:84px;height:72px;transform:scale(.82)}
  .st-how__shots .st-ilus{display:none}
  .st-how__phs{gap:8px;transform:scale(.66)}
  .st-how__sir{width:34px;height:34px}.st-how__valve{width:36px;height:36px}
  .st-how__sw{width:16px;height:30px;margin-left:-4px;transform:scale(.6)}
  .st-how__hub{grid-row:auto;grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;z-index:1}
  .st-how__hubvis{grid-row:auto}
  .st-map__bar{gap:12px}
  .st-pills{flex-wrap:nowrap;overflow-x:auto;width:calc(100% + 2*var(--gut));margin:0 calc(-1*var(--gut));padding:2px var(--gut) 6px;scrollbar-width:none}
  .st-pills::-webkit-scrollbar{display:none}
  .st-pill{flex:none;min-height:44px}
  .st-kit{min-height:44px;min-width:56px}
  .st-map__frame{margin-left:calc(-1*var(--gut));margin-right:calc(-1*var(--gut));border-radius:0;border-left:0;border-right:0}
  /* план на телефоні: за замовчуванням вписаний цілком; «Ampliar» — режим зі скролом */
  .st-map__frame:not([data-zoom="in"]) .st-map__canvas{--ps:28px}
  .st-map__frame:not([data-zoom="in"]) .st-pin__lb{display:none}
  .st-map__frame:not([data-zoom="in"]) .st-room{font-size:7.5px;letter-spacing:.08em}
  .st-map__frame[data-zoom="in"] .st-map__canvas{min-width:760px}
  .st-map__zoom{display:inline-flex;align-items:center;gap:8px;position:absolute;right:10px;bottom:10px;z-index:5;min-height:44px;padding:0 14px;border-radius:99px;border:1px solid var(--line-2);background:var(--card);color:var(--ink);font:600 13.5px/1 var(--sans);box-shadow:var(--shadow);cursor:pointer}
  .st-map__zoom .st-ico{width:18px;height:18px}
  .st-map__zout,.st-map__frame[data-zoom="in"] .st-map__zin{display:none}
  .st-map__frame[data-zoom="in"] .st-map__zout{display:inline}
  .st-map__frame[data-zoom="in"]::after{content:"";position:absolute;top:0;right:0;bottom:0;width:56px;z-index:4;pointer-events:none;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--plan-common) 92%,transparent));transition:opacity var(--m-dur-1)}
  .st-map__frame[data-zoom="in"].is-end::after{opacity:0}
  .st-map__frame[data-zoom="in"]:not(.is-scrolled) .st-map__hint{display:inline-flex;align-items:center;gap:6px;position:absolute;right:10px;top:10px;z-index:5;padding:7px 10px;border-radius:99px;background:rgba(11,13,10,.82);color:#FFFFFF;font:600 12px/1 var(--sans)}
  .st-map__hint .st-ico{width:14px;height:14px}
  .st-legend{grid-template-columns:minmax(0,1fr)}
  .st-card{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;max-height:82vh;border-radius:22px 22px 0 0;z-index:1000;transform-origin:bottom center}
  .st-card::before{content:"";display:block;width:40px;height:5px;border-radius:9px;background:var(--line-2);margin:10px auto 0}
  .st-card.is-enter{animation:st-sheet 260ms var(--m-ease-out) both}
  .st-card.is-closing{animation:st-sheet-out 220ms var(--m-ease-in) forwards}
  .st-card-bd{position:fixed;inset:0;z-index:999;background:rgba(11,13,10,.42)}
  .st-card-bd.is-on{display:block;animation:st-fade-in 260ms var(--m-ease-out) both}
  .st-card-bd.is-closing{animation:st-fade-out 220ms var(--m-ease-in) forwards}
  .st-proof{grid-template-columns:minmax(0,1fr)}
  .st-swipe{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font:600 12px/1 var(--sans);color:var(--ink-3)}
  .st-swipe .st-ico{width:14px;height:14px}
  .st-fears__list,.st-kset__list{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:16px calc(-1*var(--gut)) 0;padding:2px var(--gut) 12px;scroll-padding:0 var(--gut);scrollbar-width:none}
  .st-fears__list::-webkit-scrollbar,.st-kset__list::-webkit-scrollbar{display:none}
  .st-fear,.st-kc{scroll-snap-align:start}
  .st-hon__cols,.st-who__facts{grid-template-columns:minmax(0,1fr)}
  .st-hon__col{padding:20px}
  .st-cuo__r{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-cuo__r>[role="rowheader"]{grid-column:1/-1;padding-bottom:0}
  .st-cuo__r--h>span:first-child,.st-cuo__r--sum>span:first-child{display:none}
  .st-cuo__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-cuo__stat{padding:14px}
  .st-cuo__sv{font-size:20px}
  .st-cuo__row{grid-template-columns:34px minmax(0,1fr) minmax(0,1fr);padding:12px 14px}
  .st-cuo__rn{grid-column:2/-1}
  .st-cuo__rp{grid-column:2}
  .st-cuo__rm{grid-column:3}
  .st-cuo__r>*{padding:10px 14px}
  .st-cuo__v{font-size:24px}
}