/* Згенеровано web/packages/ui/scripts/sync-maket.mjs з design/maket/e. НЕ ПРАВИТИ руками — правки зникнуть при наступному запуску. */
/* ZRAZU · E «Кіно» — лише головна: сцена з імʼям-героєм, пропозиція двох продуктів, SSL-відлік, паспорт, ціни, фінал. */

/* ---------- Сцена ---------- */
.hero{position:relative;overflow:clip;min-height:calc(100svh - var(--hdr));display:flex;align-items:center;justify-content:center;padding:18px var(--gut) 32px;isolation:isolate}
.hero-in{position:relative;z-index:1;width:100%;max-width:1040px;display:flex;flex-direction:column;align-items:center;text-align:center}
.spot{position:absolute;inset:0;pointer-events:none;z-index:-1}
.spot i{position:absolute;display:block;border-radius:50%}
.spot-a{left:50%;top:38%;width:56vw;height:34vw;max-height:560px;transform:translate(-66%,-50%);background:radial-gradient(closest-side,var(--spot-a),var(--spot-a2) 55%,var(--spot-a0));animation:breathe 11s ease-in-out infinite alternate}
.spot-b{left:50%;top:40%;width:58vw;height:36vw;max-height:580px;transform:translate(-32%,-50%);background:radial-gradient(closest-side,var(--spot-b),var(--spot-b2) 55%,var(--spot-b0));animation:breathe 13s ease-in-out -4s infinite alternate}
.spot-c{left:50%;top:-8%;width:46vw;height:70%;transform:translateX(-50%);background:radial-gradient(closest-side,var(--spot-c),transparent)}
@keyframes breathe{from{opacity:.75;scale:1}to{opacity:1;scale:1.08}}
.grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--grain-op);mix-blend-mode:var(--grain-blend);background-image:url(../grain.svg)}

.mode-seg{margin-bottom:12px}
.mode-seg button{min-height:40px;padding:0 18px}

.stage{position:relative;width:100%;margin:18px 0 0;font-size:var(--fs,150px);font-weight:720;letter-spacing:-.052em;line-height:1.06;white-space:nowrap;cursor:text}
.stage-in{display:inline-block;white-space:nowrap;padding:0 .06em}
.stage.wrap,.stage.wrap .stage-in{white-space:normal}
.chunk{display:inline-block;white-space:nowrap}
.st-lbl{color:var(--text)}
.st-lbl.ph{color:var(--ghost)}
.st-zone{color:var(--beam-solid);background:var(--beam-text);background-size:200% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.04em}
.ch-in{display:inline-block;animation:chIn .7s var(--ease-out) both}
@keyframes chIn{from{opacity:0;transform:translateY(.14em);filter:blur(.07em)}to{opacity:1;transform:none;filter:blur(0)}}
.z-in{animation:zIn .9s var(--ease-out) both}
@keyframes zIn{from{opacity:0;transform:translateY(.1em);filter:blur(.08em);background-position:100% 0}to{opacity:1;transform:none;filter:blur(0);background-position:0 0}}
.caret{display:none;width:.045em;height:.74em;margin:0 0 0 .05em;vertical-align:-.02em;border-radius:.03em;background:var(--caret)}
.stage.focus .caret,.stage.is-ph .caret{display:inline-block;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.st-lock{margin-right:.14em;vertical-align:-.02em}
.st-lk{width:.62em;height:.62em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.st-lk .lk-sh{transition:transform .5s var(--ease-out);transform-origin:16px 10.5px}
.st-lock-ph{color:var(--ghost)}
.st-lock-checking{color:var(--text-2)}
.st-lock-ours{color:var(--free)}
.st-lock-foreign{color:var(--text)}
.st-lock-problem{color:var(--warn)}
.st-lock-none{color:var(--taken)}
.st-lock-ph .lk-sh,.st-lock-checking .lk-sh,.st-lock-none .lk-sh,.st-lock-problem .lk-sh{transform:translateY(-2.6px) rotate(18deg)}

.stage-sub{margin:4px 0 0;font-size:17px;color:var(--text-2);min-height:26px;max-width:62ch}
.stage-sub .translit{font-variant-numeric:tabular-nums}
.zones{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:12px 0 18px}

/* ---------- Пропозиція: два продукти ---------- */
.buy{display:grid;grid-template-columns:1.12fr 1fr;width:100%;max-width:1000px;text-align:left;overflow:hidden}
.buy-col{padding:24px 30px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:9px;min-width:0}
.buy-col .b-actions{margin-top:auto;padding-top:8px}
.buy-col + .buy-col{border-left:1px solid var(--line)}
.buy.is-ssl{margin-top:22px}
.buy.is-ssl .b-actions{margin-top:6px}
.buy-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:10px 12px 10px 30px;border-top:1px solid var(--line);background:var(--fill-sunk)}
.buy-cond{margin:0;font-size:15px;color:var(--text-2)}

/* ---------- Видача ---------- */
.results{padding:36px 0 110px;scroll-margin-top:var(--hdr)}

/* ---------- SSL ---------- */
.ssl{padding:150px 0 120px;position:relative}
.ssl::before,.story::before,.prices::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--rule)}
.count{position:relative;height:250vh;margin-top:10px}
.count-stick{position:sticky;top:var(--hdr);height:calc(100svh - var(--hdr));display:flex;align-items:center}
.count-in{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.count-num{display:flex;align-items:baseline;gap:.1em;font-weight:760;letter-spacing:-.065em;line-height:.9}
.count-v{display:inline-block;font-size:clamp(120px,19vw,290px);font-variant-numeric:tabular-nums;color:var(--count-solid);background:var(--count-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.04em}
.count-u{font-size:clamp(28px,3vw,44px);font-weight:650;letter-spacing:-.03em;color:var(--text-2)}
.count-cap{margin:0 0 18px;font-size:17px;color:var(--text-2)}
.bars{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:14px}
.bars li{display:grid;gap:7px}
.bar{display:block;height:10px;border-radius:6px;background:var(--bar-track);overflow:hidden}
.bars li[data-i="0"]{--w:1} .bars li[data-i="1"]{--w:.5025} .bars li[data-i="2"]{--w:.2513} .bars li[data-i="3"]{--w:.1181}
.bar i{display:block;height:100%;width:calc(var(--w) * 100%);min-width:10px;border-radius:6px;background:var(--bar-fill);transition:background-color .4s ease}
.bars li.on .bar i{background:var(--beam)}
.bar-l{font-size:15px;color:var(--text-2);transition:color .3s ease}
.bar-l b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:650}
.bars li.on .bar-l{color:var(--text)}
.count-times{margin:0 0 8px;font-size:clamp(20px,1.8vw,26px);font-weight:650;letter-spacing:-.02em;line-height:1.3}
.count-manual{margin:0;font-size:16px;color:var(--text-2);max-width:48ch}

.auto{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center;padding:40px;margin:90px 0 130px}
.auto-txt p{margin:0 0 22px;color:var(--text-2);font-size:17px;max-width:46ch}
.term{list-style:none;margin:0;padding:22px 22px 20px;border-radius:20px;background:var(--term-bg);border:1px solid var(--line);display:grid;gap:18px}
.term li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:start}
.term code span{white-space:nowrap}
.term code{display:block;font-size:14px;color:var(--text-3);line-height:1.5;word-spacing:.2em;transition:color .4s ease}
.term li.done code{color:var(--text)}
.term-ok{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--free);opacity:0;transform:translateX(-6px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.term li.done .term-ok{opacity:1;transform:none}
.term-t{grid-column:1/-1;font-size:14px;color:var(--text-2)}
.lineup-head{margin-bottom:30px}

/* ---------- Паспорт ---------- */
.story{padding:150px 0 120px;position:relative}
.scene{display:grid;grid-template-columns:1.05fr 1fr;gap:72px;margin-top:40px;align-items:start}
.scene-vis{position:sticky;top:calc(var(--hdr) + 60px)}
.pass{overflow:hidden;border-radius:var(--r-xl)}
.pass-bar{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--fill-1)}
.pass-dots{display:flex;gap:6px}
.pass-dots i{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.pass-url{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:36px;border-radius:12px;background:var(--fill-2);font-size:15px;color:var(--text);font-weight:560}
.lk{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;color:var(--text-2);transition:color .4s ease;overflow:visible}
.lk .lk-sh{transform:translateY(-2.4px) rotate(16deg);transform-origin:16px 11px;transition:transform .5s var(--ease-out)}
.pass[data-step="3"] .lk,.pass[data-step="4"] .lk{color:var(--free)}
.pass[data-step="3"] .lk .lk-sh,.pass[data-step="4"] .lk .lk-sh{transform:none}
.pass-rows{list-style:none;margin:0;padding:4px 0 8px}
.pass-rows li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;padding:18px 24px;border-top:1px solid var(--line);align-items:start;transition:background-color .5s ease}
.pass-rows li:first-child{border-top:0}
.pass-rows li.on{background:var(--fill-1)}
.pr-k{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--text-2)}
.pass-rows li.on .pr-k{color:var(--text)}
.pass-rows li.on .pr-k .ic{color:var(--free)}
.pr-v{min-width:0;display:flex;flex-direction:column;gap:3px}
.pr-v b{font-weight:640;color:var(--text)}
.pr-v code{font-size:13px;color:var(--text)}
.pr-on{display:none;font-size:14px;color:var(--free)}
.pr-off{font-size:14px;color:var(--text-2)}
.pass-rows li.on .pr-on{display:block;animation:fadeUp .5s var(--ease-out)}
.pass-rows li.on .pr-off{display:none}
.notif{display:flex;gap:12px;align-items:flex-start;margin:4px 16px 16px;padding:14px 16px;border-radius:22px;opacity:0;transform:translateY(14px) scale(.98);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.pass[data-step="4"] .notif{opacity:1;transform:none}
.notif img{width:32px;height:32px;border-radius:8px}
.notif p{margin:0}
.notif-h{display:flex;justify-content:space-between;gap:10px;font-size:14px;color:var(--text-2)}
.notif-h b{color:var(--text)}
.notif-t{font-size:15px;color:var(--text);line-height:1.4}
.steps{list-style:none;margin:0;padding:0}
.steps li{min-height:64vh;display:flex;flex-direction:column;justify-content:center;padding:20px 0}
.steps li:first-child{min-height:44vh;justify-content:flex-start;padding-top:40px}
.step-n{font-family:var(--mono);font-size:14px;color:var(--text-2);margin-bottom:12px}
.steps .h3{color:var(--text-3);transition:color .4s ease}
.steps p{margin:0;font-size:18px;color:var(--text-3);max-width:40ch;transition:color .4s ease}
.steps li.on .h3{color:var(--text)}
.steps li.on p{color:var(--text-2)}

/* ---------- Ціни ---------- */
.prices{padding:150px 0 110px;position:relative}
.price-ctl{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin:34px 0 16px}
.ptable{padding:6px 0}
#ptable{list-style:none;margin:0;padding:0}
.ptr{display:grid;grid-template-columns:.9fr 1.4fr 1.3fr auto;gap:10px 20px;align-items:center;padding:18px 28px;border-top:1px solid var(--line)}
.pth{border-top:0;padding-block:12px 10px;font-size:13px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.pz{font-size:24px;font-weight:680;letter-spacing:-.025em}
.pc{display:flex;flex-direction:column;gap:2px;min-width:0}
.pc .price{gap:4px 10px}
.pc .p-old{font-size:15px}
.pc-l{font-size:14px;color:var(--text-2)}
.pc .p-two-v{color:var(--save-ink)}                /* ціна за 2 роки — вигода (Р172-4) */
.pc-l1{display:none}
.pc-lt{display:none}
.pa{display:flex;justify-content:flex-end}
.why{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.why li{padding:24px;border-radius:var(--r-md)}
.why .ic{color:var(--accent-ic);margin-bottom:14px}
.why h3{margin:0 0 6px;font-size:18px;font-weight:650;letter-spacing:-.02em;line-height:1.3}
.why p{margin:0;font-size:15px;color:var(--text-2)}

/* ---------- Фінал ---------- */
.finale{position:relative;overflow:clip;padding:170px 0 180px;text-align:center;isolation:isolate}
.spot-fin .spot-a{top:55%}
.spot-fin .spot-b{top:58%}
.fin-in{display:flex;flex-direction:column;align-items:center}
.finale .lead{margin-inline:auto}
.fin-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:12px}
.fin-search{margin-top:16px;text-align:left}

/* ---------- Світла тема: колір нижче першого екрана ----------
   Картка покупки — з кромкою луча; кікери колонок — кольором продукту; «47» — градієнт луча, смуги — бузкові;
   паспорт, ціни й «чому ми» — теплі тони й кольорові плитки іконок. Темна тема цих правил не бачить. */
[data-theme="light"] .buy{background:var(--glass-bg) padding-box,linear-gradient(#FFFFFF,#FFFFFF) padding-box,var(--edge) border-box;border-color:transparent}
[data-theme] .buy-domain .kicker{color:var(--hue-dom)}
[data-theme] .buy-ssl .kicker{color:var(--hue-ssl)}
[data-theme="light"] .buy-foot{background:var(--tint-th)}
[data-theme="light"] .count-stick{background:radial-gradient(600px 400px at 22% 52%,rgba(var(--tone-a),.15),rgba(var(--tone-b),.07) 45%,rgba(var(--tone-b),0) 70%)}
[data-theme="light"] .auto{background:var(--glass-bg) padding-box,linear-gradient(#FFFFFF,#FFFFFF) padding-box,var(--edge) border-box;border-color:transparent}
[data-theme="light"] .pass-bar{background:var(--tint-th)}
[data-theme="light"] .pass-rows li.on{background:rgba(var(--tone-a),.07)}
[data-theme] .step-n{color:var(--hue-mon)}
[data-theme="light"] .pth{margin:0 8px;padding-inline:20px;border-radius:16px;background:var(--tint-th)}
[data-theme] .why .ic{box-sizing:content-box;width:20px;height:20px;padding:9px;border-radius:12px;background:var(--hue-dom-bg);color:var(--hue-dom)}
[data-theme] .why li:nth-child(2) .ic{background:var(--hue-mon-bg);color:var(--hue-mon)}
[data-theme] .why li:nth-child(3) .ic{background:var(--hue-ssl-bg);color:var(--hue-ssl)}
/* Смуги секцій на всю ширину — колір по площі, а не лише в деталях. Тло перетікає вниз:
   папір (сцена) → лілея (SSL) → рожевий («після оплати») → бурштин (ціни) → папір (фінал) → підвал.
   background-color — тон смуги (по ньому qa.py міряє контраст), градієнти — лише м'які стики між смугами. */
[data-theme="light"] .ssl{background-color:var(--band-ssl);background-image:linear-gradient(180deg,var(--bg),transparent 260px),linear-gradient(0deg,var(--band-mon),transparent 320px);--st-dim:color-mix(in srgb,var(--band-ssl) 20%,transparent)}
[data-theme="light"] .story{background-color:var(--band-mon);background-image:linear-gradient(0deg,var(--band-price),transparent 320px)}
[data-theme="light"] .prices{background-color:var(--band-price);background-image:linear-gradient(0deg,var(--bg),transparent 340px)}
[data-theme] .finale{--st-dim:color-mix(in srgb,var(--bg) 48%,transparent)}
[data-theme="light"] .finale{--st-dim:color-mix(in srgb,var(--bg) 24%,transparent)}
/* eyebrow секції — колір її продукту */
[data-theme] .ssl .eyebrow,[data-theme] .story .eyebrow,[data-theme] .prices .eyebrow{background:none;-webkit-text-fill-color:currentColor}
[data-theme] .ssl .eyebrow{color:var(--hue-ssl)}
[data-theme] .story .eyebrow{color:var(--hue-mon)}
[data-theme] .prices .eyebrow{color:var(--hue-dom)}
/* два ключові заголовки сторінки — градієнт луча (великий текст, ≥ 3.46:1 на смузі). «Загоряння» слів лишається:
   непроявлене слово не прозоре, а накрите кольором тла (--st-dim) поверх градієнта батька. Накриття підібране так,
   щоб непроявлене слово трималося ≥ 3:1 (темна 48 %, світла SSL 20 %, світлий фінал 24 %). */
[data-theme] .ssl .statement,[data-theme] .finale .statement{color:var(--beam-solid);background:var(--beam-lg);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
html.js[data-theme] .ssl .statement[data-words] .w,html.js[data-theme] .finale .statement[data-words] .w{opacity:1;-webkit-text-fill-color:var(--st-dim,color-mix(in srgb,var(--bg) 48%,transparent));transition:-webkit-text-fill-color .5s ease}
html.js[data-theme] .ssl .statement[data-words] .w.on,html.js[data-theme] .finale .statement[data-words] .w.on{-webkit-text-fill-color:transparent}

/* ---------- Поява ---------- */
.intro .eyebrow{animation-delay:0ms}
.intro .mode-seg{animation-delay:90ms}
.intro .search{animation-delay:170ms}
.intro .stage-sub{animation-delay:950ms}
.intro .zones{animation-delay:1050ms}
.intro .buy{animation-delay:1150ms}
.intro .spot{animation:spotIn 2s var(--ease-out) both}
@keyframes spotIn{from{opacity:0}to{opacity:1}}
html[data-rm] .spot i{animation:none}
html[data-rm] .ch-in,html[data-rm] .z-in{animation:none}
html[data-rm] .caret{animation:none!important}
html[data-static] .count,html[data-rm] .count{height:auto}
html[data-static] .count-stick,html[data-rm] .count-stick{position:static;height:auto;padding:70px 0 20px}
html[data-static] .steps li,html[data-rm] .steps li{min-height:0;padding:36px 0}
html[data-static] .steps li:first-child,html[data-rm] .steps li:first-child{padding-top:10px}
html[data-static] .scene-vis{position:static}

/* ---------- Адаптив ---------- */
@media (max-width:900px){
  .buy{grid-template-columns:1fr}
  .buy-col + .buy-col{border-left:0;border-top:1px solid var(--line)}
  .count-in{grid-template-columns:1fr;gap:18px}
  .auto{grid-template-columns:1fr;padding:28px;gap:26px}
  .scene{grid-template-columns:1fr;gap:10px}
  .scene-vis{position:static;order:2}
  .steps li,.steps li:first-child{min-height:0;padding:22px 0;justify-content:flex-start}
  .steps .h3{color:var(--text)} .steps p{color:var(--text-2)}
  .why{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hero{padding:22px var(--gut) 36px;min-height:0}
  .hero .eyebrow{font-size:15px;margin-bottom:12px}
  .mode-seg{margin-bottom:12px}
  .mode-seg button{padding:0 14px;font-size:15px}
  .stage{margin-top:22px;letter-spacing:-.045em}
  .stage-sub{font-size:15px;min-height:22px}
  .zones{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;width:calc(100% + 2*var(--gut));margin:14px calc(-1*var(--gut)) 18px;padding:2px var(--gut) 4px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gut),#000 calc(100% - var(--gut)),transparent)}
  .zones::-webkit-scrollbar{display:none}
  .zchip{flex:none}
  .buy-col{padding:20px 18px 22px;gap:8px}
  .b-name{font-size:21px}
  .buy-foot{padding:12px 18px;gap:8px}
  .buy-cond{font-size:14px}
  .buy .inc{display:none}
  .results{padding:24px 0 80px}
  .ssl,.story,.prices{padding:96px 0 80px}
  .statement{font-size:clamp(36px,10.5vw,56px);margin-bottom:20px}
  .statement-xl{font-size:clamp(52px,15vw,84px)}
  .count{height:190vh}
  .count-stick{align-items:flex-start;padding-top:28px}
  .count-v{font-size:118px}
  .count-cap{margin-bottom:12px;font-size:15px}
  .bars{gap:10px;margin-bottom:16px}
  .auto{margin:60px 0 90px;padding:20px}
  .term{padding:16px}
  .term li{grid-template-columns:minmax(0,1fr)}   /* «готово» під командою: довге ім'я в nowrap наїжджало на позначку */
  .pass-rows li{grid-template-columns:1fr;gap:4px;padding:16px 18px}
  .price-ctl{margin-top:24px}
  .ptr{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"z a" "f t";padding:16px 18px;gap:10px 14px}
  #ptable .ptr:first-child{border-top:0}
  .pth{display:none}
  .pz{grid-area:z}.pa{grid-area:a}
  .ptr > .pc:nth-of-type(2){grid-area:f}
  .ptr > .pc:nth-of-type(3){grid-area:t}
  .pc-lt{display:inline}
  .pc-l1{display:block}
  .finale{padding:110px 0 120px}
  .fin-cta{flex-direction:column;width:100%}
  .fin-cta .btn{width:100%}
}
@media (pointer:coarse){ .mode-seg button{min-height:44px} }