/* Publi Studio: всё, что добавил боевой фронт поверх утверждённого прототипа.
   Лист оплаты перенесён сюда из flow.css — он нужен и на витрине. Инлайн-стилей в разметке нет (CSP). */

/* ───── Знак «Publi studio» + лаймовая точка-ручка ───── */
.logo__s{ font-family:var(--font-t); font-stretch:normal; font-weight:500; text-transform:none; letter-spacing:0; font-size:.5em; color:var(--text-3); margin-left:.3em; }
.logo__s + .logo__h{ margin-left:.14em; }
.svgdefs{ position:absolute; }

/* ───── Созвездие: глубина и задержки (раньше были style="" в разметке) ───── */
.cf--1{ --depth:.22; --bd:0s; } .cf--2{ --depth:.08; --bd:1.2s; } .cf--3{ --depth:.14; } .cf--4{ --depth:.08; --bd:2.1s; } .cf--5{ --depth:.22; --bd:.6s; }
.cf--6{ --depth:.22; --bd:3s; } .cf--7{ --depth:.08; } .cf--8{ --depth:.14; --bd:1.8s; } .cf--9{ --depth:.08; --bd:2.6s; } .orbs{ --depth:.3; }
.cf img:not([src]),.step__m img:not([src]){ visibility:hidden; }
.cf .cf__ai{ position:absolute; z-index:3; left:6px; top:6px; height:15px; padding:0 4px; border-radius:4px; font-size:8px; }
.cf--1 .cf__ai{ left:auto; right:6px; }
@media (min-width:900px){ .cf .cf__ai{ top:8px; height:17px; font-size:9px; } .cf--1 .cf__ai{ left:8px; right:auto; } }
.steps .step:nth-child(2),.plans .plan:nth-child(2),.facts .fact:nth-child(2){ --i:1; }
.steps .step:nth-child(3),.plans .plan:nth-child(3),.facts .fact:nth-child(3){ --i:2; }
.facts .fact:nth-child(4){ --i:3; }
.step__ai{ position:absolute; z-index:3; right:8px; bottom:8px; }
.step__m--pick .step__ai{ top:8px; bottom:auto; }

/* ───── Карточка: «Хочу так · 99 ₽» и мелко «с твоим фото» ───── */
.price-w{ flex:none; display:flex; flex-direction:column; align-items:center; gap:3px; }
.price__sub{ font-size:10.5px; line-height:1.1; color:var(--text-3); font-weight:500; }
@container (max-width:339px){ .price-w{ align-items:stretch; text-align:center; } }
.chip--ai{ white-space:nowrap; text-transform:none; letter-spacing:0; font-size:10.5px; }

/* ───── Шапка: «Мои кадры» с балансом ───── */
.hdr__login{ gap:8px; }
.hdr__n{ min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--lime); color:var(--on-lime); font-size:12px; font-weight:600; display:inline-grid; place-items:center; }
.hdr__n[hidden]{ display:none; }

/* ───── Сетка: пусто / ошибка ───── */
.grid__empty{ text-align:center; padding:24px 0; }
.grid__empty .btn{ height:32px; }

/* ───── Кадр: отметки при загрузке, открытый рецепт ───── */
.up__hint{ margin:-6px 0 16px; padding:10px 12px; border-radius:var(--r-in); background:var(--s2); color:var(--text); font-size:14px; line-height:1.4; }
.flags{ margin:12px 0 4px; display:grid; gap:2px; }
.flags .pay__chk{ margin:0; min-height:40px; font-size:13.5px; line-height:1.3; }
.plate__rec.is-open{ display:block; -webkit-line-clamp:unset; -webkit-mask:none; mask:none; }
.is-demo{ filter:grayscale(1) contrast(.9) brightness(1.06); }
.ex__ai{ position:absolute; z-index:3; left:14px; top:auto; bottom:112px; }
@media (min-width:900px){ .ex__ai{ left:16px; bottom:auto; top:64px; } }

/* ───── Результат ───── */
.ba{ --p:50%; }
.ba img:not([src]),.ex__img:not([src]),.dr__photo:not([src]),.live__m img:not([src]){ visibility:hidden; }
.ba video.ba__after{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ba.is-failed .ba__knob,.ba.is-failed .ba__line,.ba.is-failed .ba__l,.ba.is-failed .ba__r,.ba.is-failed .ba__before,
.ba--solo .ba__knob,.ba--solo .ba__line,.ba--solo .ba__l,.ba--solo .ba__before{ display:none; }
.ba.is-failed .ba__after{ filter:grayscale(.6) brightness(.55); }
.res__fail h1{ margin:4px 0 12px; }
.res__ft{ margin:0 0 20px; color:var(--text-2); font-size:16px; }
.res__fb{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.pack__more{ color:inherit; font:inherit; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; }
.pack__more:hover{ color:var(--text); }
.rate > span{ flex:1 1 100%; }
@media (min-width:900px){ .more2__hist{ display:none; } }
.rate__g a{ color:var(--text-2); text-decoration:underline; text-underline-offset:3px; }

/* ───── Нижний лист: ошибки, согласие, «Мои кадры» ───── */
.note{ padding:4px 0 0; }
.note .pay__h{ padding-right:40px; }
.note .pay__sub{ margin-top:10px; font-size:16px; }
.note__btns{ display:grid; gap:4px; margin-top:20px; }
.note__alt{ justify-self:center; }
.cons .pay__h{ padding-right:40px; }
.cons .pay__sub{ margin-top:10px; }
.cons .btn[disabled]{ background:var(--s2); color:var(--text-3); }
.cons__chk{ align-items:flex-start; margin:18px 0; line-height:1.4; }
.cons__chk .pay__box{ margin-top:1px; }
.pay__chk a,.pay__fine a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; }
.pay__chk input:focus-visible + .pay__box{ outline:2px solid #fff; outline-offset:2px; }
.pay__err{ margin:8px 4px 0; color:var(--warn); }
.pay__go{ margin-top:14px; }
.hist{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:16px 0 8px; }
.hist__i{ position:relative; aspect-ratio:4/5; border-radius:var(--r-in); overflow:hidden; background:var(--s2); display:block; }
.hist__i img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hist__i::after{ content:""; position:absolute; inset:50% 0 0; background:linear-gradient(to bottom, transparent, rgba(0,0,0,.72)); }
.hist__t{ position:absolute; z-index:1; left:8px; right:8px; bottom:6px; font-size:12px; line-height:1.2; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hist__st{ position:absolute; z-index:1; left:6px; top:6px; height:20px; font-size:9.5px; padding:0 6px; }
.hist__st.is-bad{ color:var(--warn); }
.hist.is-loading span{ aspect-ratio:4/5; border-radius:var(--r-in); background:var(--s2); }
.has-motion .hist.is-loading span{ animation:pulse 1.2s var(--ease-in-out) infinite alternate; }
@keyframes pulse{ to{ opacity:.45; } }
.hist__empty{ margin:16px 0; color:var(--text-2); }
@media (min-width:900px){ .hist{ grid-template-columns:repeat(4,1fr); } }

/* ───── Подвал: знак «Publi.» короче «Хочутак» — крупнее кегль, чтобы занять ту же ширину ───── */
.foot__mark .giant{ font-size:38vw; }
.foot__mark .giant i{ vertical-align:.14em; }
@media (min-width:900px){ .foot__mark .giant{ font-size:25vw; } }

/* ───── Подвал экранов кадра и результата ───── */
.foot__line{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 24px; }
.foot__line a{ color:var(--text-2); }
.foot__links{ display:flex; flex-wrap:wrap; gap:4px 14px; }
.foot__line a:hover{ color:var(--text); }
.foot__studio{ color:var(--text-2); }
.foot__studio a,
.foot__cols .foot__studio a{ display:inline; padding:0; font-size:inherit; color:inherit; text-decoration:underline; text-underline-offset:2px; }
.foot__studio a:hover{ color:var(--text); }

/* ───── Лист оплаты ───── */
.pay__x{ position:absolute; top:12px; right:12px; width:36px; height:36px; background:var(--s2); }
.pay__x svg{ width:16px; height:16px; }
.pay__top{ display:flex; align-items:center; gap:14px; margin:4px 40px 16px 0; }
.pay__thumb .pay__crop{ display:block; width:60px; height:76px; border-radius:var(--r-in); overflow:hidden; }
.pay__thumb img{ width:100%; height:100%; object-fit:cover; }
.pay__h{ margin:0; font-family:var(--font-d); font-weight:800; font-stretch:30%; text-transform:uppercase; font-size:28px; line-height:.98; text-wrap:balance; }
.pay__sub{ margin:6px 0 0; color:var(--text-2); font-size:15px; }
.pay__plans{ display:grid; gap:8px; margin:0 0 12px; }
.pay__plan{ display:flex; align-items:center; gap:12px; min-height:60px; padding:10px 16px; border-radius:var(--r-card); background:var(--s2); box-shadow:inset 0 0 0 1px var(--line); cursor:pointer; transition:box-shadow var(--dur-base); }
.pay__plan input,.pay__seg input,.pay__chk input{ position:absolute; opacity:0; pointer-events:none; }
.pay__dot{ width:20px; height:20px; border-radius:50%; box-shadow:inset 0 0 0 2px var(--text-3); flex:none; position:relative; transition:box-shadow var(--dur-base); }
.pay__plan input:checked + .pay__dot{ box-shadow:inset 0 0 0 6px var(--lime); }
.pay__plan:has(input:checked){ box-shadow:inset 0 0 0 1px var(--lime-line); }
.pay__plan input:focus-visible + .pay__dot{ outline:2px solid #fff; outline-offset:2px; }
.pay__pn b{ display:block; font-weight:500; font-size:16px; }
.pay__pn span{ font-size:13px; color:var(--text-3); }
.pay__seg{ display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:999px; background:var(--s2); margin-bottom:10px; }
.pay__seg span{ display:block; text-align:center; height:40px; line-height:40px; border-radius:999px; color:var(--text-2); font-size:15px; font-weight:500; cursor:pointer; transition:background var(--dur-base), color var(--dur-base); }
.pay__seg input:checked + span{ background:rgba(255,255,255,.1); color:var(--text); }
.pay__seg input:focus-visible + span{ box-shadow:0 0 0 2px #fff; }
.pay__mail input{ width:100%; height:52px; border-radius:999px; background:var(--s2); border:0; box-shadow:inset 0 0 0 1px var(--line); padding:0 20px; font-size:16px; outline:none; }
.pay__mail input:focus{ box-shadow:inset 0 0 0 1px var(--lime-line); }
.pay__mail input::placeholder{ color:var(--text-3); }
.pay__chk{ display:flex; align-items:center; gap:10px; margin:12px 0 16px; font-size:14px; color:var(--text-2); cursor:pointer; min-height:24px; }
.pay__box{ width:20px; height:20px; border-radius:6px; box-shadow:inset 0 0 0 1.5px var(--text-3); display:grid; place-items:center; flex:none; }
.pay__box svg{ width:14px; height:14px; opacity:0; color:var(--on-lime); }
.pay__chk input:checked + .pay__box{ background:var(--text); box-shadow:none; }
.pay__chk input:checked + .pay__box svg{ opacity:1; }
.pay__fine{ text-align:center; margin:12px 0 0; font-size:13px; color:var(--text-2); line-height:1.5; }
.pay__fine span{ color:var(--text-3); }
.pay__later{ display:flex; margin:4px auto 0; }
.pay__banks{ display:grid; gap:8px; margin-top:16px; }
.pay__bank{ display:flex; align-items:center; gap:12px; height:56px; padding:0 16px; border-radius:var(--r-card); background:var(--s2); font-size:16px; font-weight:500; width:100%; text-align:left; transition:background var(--dur-fast); }
.pay__bank:hover{ background:#23272b; }
.pay__bi{ width:32px; height:32px; border-radius:50%; background:var(--s3); display:grid; place-items:center; font-weight:600; font-size:14px; }
.pay__arr{ margin-left:auto; color:var(--text-3); } .pay__arr svg{ width:18px; height:18px; }
.pay__card{ display:grid; gap:8px; margin:16px 0; }
.pay__f{ height:52px; border-radius:999px; background:var(--s2); color:var(--text-3); padding:0 20px; display:flex; align-items:center; font-size:15px; }
.pay__row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pay__wait{ text-align:center; padding:28px 0 20px; }
.pay__ring{ display:block; width:48px; height:48px; margin:0 auto 18px; border-radius:50%; border:3px solid rgba(255,255,255,.12); border-top-color:var(--text); animation:spin 900ms linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.pay__ok{ width:56px; height:56px; margin:0 auto 18px; border-radius:50%; background:var(--lime); color:var(--on-lime); display:grid; place-items:center; animation:mediaIn var(--dur-slow) var(--ease-out) both; }
.pay__ok svg{ width:28px; height:28px; }