/* zidos.app r10 — главная и общие окна продуктов (сцена письма, живой Trail, лента Раскроя, снимки Mini App).
   Светлая основа, продукт в рамке; цвет продукта живёт внутри интерфейса. Телефон: окно 844 — кадр; ≥901 — своя раскладка. */

/* 1. герой: платформенный H1 и сцена «письмо → трата» одним кадром */
.js [data-trail-scene]:not([data-stage]):not([data-done]) .rows li,.js [data-trail-scene]:not([data-stage]):not([data-done]) .dup{opacity:0}
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding-top:14px}
.hero-copy h1{max-width:8em}
.hero-copy .lead{margin-top:10px;font-size:16px;line-height:1.4}
.hero-copy .acts{margin-top:14px;flex-wrap:nowrap}
.hero-copy .btn{flex:1;padding-inline:12px;font-size:15px}

/* сцена «письмо → трата → бюджет»: высота не меняется, строки ждут на своих местах */
.scene{padding:10px}
.scene-head{padding:4px 8px 10px}
.scene-head .tag{margin-bottom:2px}
.scene-head h2{font-size:17px;line-height:1.25;letter-spacing:-.02em}
.mail{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:var(--r-inner);background:var(--panel)}
.mail-ico{flex:none;width:36px;height:36px;border-radius:50%;background:var(--frame);display:grid;place-items:center}
.mail-ico svg{width:20px;height:20px}
.mail-main{min-width:0;flex:1}
.mail-sender{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-subj{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail-amount{font-weight:500;font-size:16px;white-space:nowrap}
.mail-main,.mail-amount{transition:opacity 300ms var(--ease),transform 300ms var(--ease)}
.scene.is-out .mail-main,.scene.is-out .mail-amount{opacity:0;transform:translateY(-6px);transition-duration:140ms}
.budget{padding:12px 10px 4px}
.budget-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px;color:var(--muted)}
.people{padding:3px 10px;border-radius:var(--pill);background:var(--panel);color:var(--ink);white-space:nowrap}
.total{margin-top:6px;font-size:44px;line-height:1;font-weight:500;letter-spacing:-.04em}
.total small{font-size:16px;font-weight:400;letter-spacing:0;color:var(--muted)}
.track{margin-top:12px;height:8px;border-radius:var(--pill);background:var(--panel);overflow:hidden}
.track span{display:block;height:100%;border-radius:inherit;background:var(--ink);transform-origin:left;transform:scaleX(.6264)}
.cap{margin-top:6px;display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.rows{margin-top:8px}
.rows li{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:10px;min-height:44px;transition:opacity 360ms var(--ease),transform 360ms var(--ease)}
.rows li.is-pending{opacity:0;transform:translateY(8px)}
.m-ico{width:32px;height:32px;border-radius:50%;background:var(--panel);display:grid;place-items:center;font-size:13px;font-weight:500}
.rows strong{display:block;font-weight:500;font-size:15px;line-height:1.2}
.rows div span{font-size:13px;color:var(--muted)}
.rows b{font-weight:500;font-size:15px;white-space:nowrap}
.dup{margin-top:4px;display:flex;align-items:center;gap:6px;height:36px;white-space:nowrap;overflow:hidden;padding:0 10px;border-radius:var(--pill);background:var(--lime);color:var(--on-color);font-size:14px;font-weight:500;transition:opacity 360ms var(--ease)}
.dup.is-pending{opacity:0}
.status{padding:8px 10px 2px;min-height:50px}

/* 2. Раскрой: лента записи → тема → клип 9:16 с субтитрами */
.rk{display:grid;gap:18px}
.rk .sec-head .btn{margin-top:14px;min-height:44px}
.cutter{padding:14px;display:grid;gap:14px;align-content:start}
.tape{position:relative;display:grid;grid-template-columns:repeat(5,1fr)}
.tape-line{position:absolute;left:0;right:0;top:15px;height:14px;border-radius:var(--pill);background:repeating-linear-gradient(90deg,var(--panel) 0 2px,transparent 2px 8px);overflow:hidden}
.tape-line i{position:absolute;inset:0;background:var(--rask);opacity:.5;transform-origin:left}
.tape button{position:relative;display:grid;justify-items:center;gap:2px}
.tape button:focus-visible{outline:none}
.tape button:focus-visible b{outline:2px solid var(--ink);outline-offset:2px}
.tape b{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:500;font-size:15px;background:var(--panel);color:var(--ink);box-shadow:0 0 0 3px var(--frame);transition:background-color var(--fast),color var(--fast)}
.tape button:hover b{background:var(--line)}
.tape button[aria-selected=true] b{background:var(--rask);color:var(--on-color)}
.tape span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.js .cutter:not(.is-played) .tape b{opacity:0}
.cutter.is-playing .tape-line i{animation:scan 1600ms linear both}
.cutter.is-playing .tape b{animation:mark-in 320ms var(--ease) both;animation-delay:calc(var(--at-n,0) * 16ms)}
@keyframes scan{from{transform:scaleX(0)}}
@keyframes mark-in{from{opacity:0}}
.clip-stage{display:grid}
.clip{grid-area:1/1;display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:start}
.clip[hidden]{display:grid;visibility:hidden}
.clip.is-on{animation:clip-in 280ms var(--ease) both}
@keyframes clip-in{from{opacity:0}}
.poster{position:relative;display:block;width:150px;aspect-ratio:9/16;border-radius:var(--r-inner);overflow:hidden;background:var(--on-color)}
.poster video{width:100%;height:100%;object-fit:cover}
.p-play{position:absolute;right:8px;bottom:8px;width:44px;height:44px;border-radius:50%;background:var(--rask);transition:background-color var(--fast)}
.p-play::after{content:"";position:absolute;left:17px;top:13px;border:9px solid transparent;border-left:14px solid var(--on-color);border-right:0}
.poster:hover .p-play{background:var(--paper)}
.clip-meta{min-width:0}
.clip-src{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:13px;color:var(--muted)}
.clip-meta h3{margin-top:6px;font-size:18px;line-height:1.18}
.quote{margin-top:10px;font-size:13px;line-height:1.4;color:var(--muted)}
.credit .link{min-height:0;display:inline}

/* 3. Игры: окно со снимком работающего магазина */
.games{padding-block:12px}
.games-grid{display:grid;gap:12px}
.game{padding:16px;display:grid;gap:12px}
.game-copy{display:grid;justify-items:start;gap:8px}
.game-copy .tag{margin:0}
.game-title{font-size:32px;line-height:1;letter-spacing:-.045em}
.game-copy>p{max-width:30em;font-size:14px;line-height:1.4;color:var(--muted)}
.wipe{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:6px 12px;border-radius:var(--r-small);background:var(--panel);font-size:14px}
.wipe b{font-size:20px;font-weight:500;letter-spacing:-.02em}.wipe small{font-size:13px;color:var(--muted)}
.game-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.game-price{font-size:18px;font-weight:500;letter-spacing:-.02em}
.game .btn{min-height:44px}
/* снимок Mini App: фрагмент настоящего экрана; --y — сколько ширин окна срезано сверху, --ar — пропорции окна */
.shot{overflow:hidden;border-radius:var(--r-inner);aspect-ratio:var(--ar,39/21);box-shadow:0 0 0 1px var(--line)}
.shot img{width:100%;margin-top:calc(var(--y,0) * -1%)}
.g-mc{grid-template-columns:minmax(0,1fr) 104px;align-items:center}
.tag .state{white-space:nowrap}
.g-mc .shot{--ar:1/1}
.agent{padding:16px 18px;display:grid;grid-template-columns:64px 1fr;gap:10px 14px;align-items:center}
.agent-face{width:64px;height:64px;border-radius:18px;background:var(--agent)}
.agent h3{font-size:20px}.agent p{font-size:15px;margin-top:2px;color:var(--muted)}
.agent .btn{grid-column:1/-1;min-height:44px}
.agent-sec{padding-block:12px}

/* 4. Trail: факты, живое окно, фрагменты */
.facts{margin-top:22px;display:grid;gap:18px}
.facts p{margin-top:4px;color:var(--muted);max-width:32em}
.facts .link{margin-top:2px}
/* живой Trail: iframe по высоте содержимого (zidos-demo-resize), без прокрутки внутри */
.live{margin-top:28px;scroll-margin-top:calc(var(--hdr) + 8px)}
.live-window{margin-inline:calc(var(--gutter) * -1 + 4px);border-radius:var(--r-frame);background:var(--panel);overflow:hidden;box-shadow:var(--shadow)}
.window-bar{display:flex;align-items:center;gap:10px;height:40px;padding:0 16px;font-size:13px;color:var(--muted)}
.window-dots{display:flex;gap:5px}.window-dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.window-title{color:var(--ink);font-weight:500}.window-meta{margin-left:auto}
.live-body{height:883px;background:var(--frame)}
.live-body iframe{display:block;width:100%;height:100%;border:0;background:var(--frame);opacity:0;transition:opacity var(--fade)}
.live-window[data-ready] iframe{opacity:1}
.live-caption{margin-top:12px;text-align:center}
.inside-grid{display:grid;gap:12px;margin-top:28px}
.iw{padding:10px 10px 20px;scroll-margin-top:calc(var(--hdr) + 12px)}
.frag{padding:16px 12px 0}
.frag-label{font-size:13px;color:var(--muted)}
.frag-meta{font-size:13px;color:var(--muted);margin-top:10px}
.iw .cap{display:block;margin-top:12px;padding-inline:12px;font-size:15px;color:var(--muted)}
.iw .cap h3{font-size:17px;color:var(--ink);letter-spacing:-.02em}
.iw .cap p{margin-top:2px}
.iw .cap+.frag{margin-top:10px}
.allow{background:var(--lime);border-radius:var(--r-inner);padding:18px 18px 16px;font-size:15px}
.allow .frag-label,.allow .frag-meta{color:var(--on-color-muted)}
.allow-num{font-size:56px;line-height:1.05;font-weight:500;letter-spacing:-.045em;margin:4px 0 6px}
.allow-num small{font-size:24px;font-weight:400;letter-spacing:0;margin-left:6px}
.allow-day strong{font-weight:500}
.sub-row{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;min-height:56px}
.sub-row img{width:40px;height:40px;border-radius:12px}
:root[data-theme=dark] .sub-row img{filter:invert(1)}
.sub-row strong{font-weight:500}.sub-row small{display:block;font-size:13px;color:var(--muted)}
.cat-row{position:relative;display:grid;grid-template-columns:1fr auto;column-gap:12px;padding:8px 0 12px}
.cat-row strong{font-weight:500}.cat-row small{grid-column:1/-1;font-size:13px;color:var(--muted)}
.cat-row::after{content:"";position:absolute;left:0;bottom:4px;height:4px;width:var(--w,0%);border-radius:var(--pill);background:var(--ink)}
.cat-row::before{content:"";position:absolute;left:0;right:0;bottom:4px;height:4px;border-radius:var(--pill);background:var(--panel)}
.rcpt-item{display:flex;justify-content:space-between;gap:12px;padding:8px 0}
.rcpt-item strong{font-weight:500}.rcpt-item p,.rcpt-item small{font-size:13px;color:var(--muted);display:block}
.rcpt-sum{white-space:nowrap}
.shared{position:relative}
.faces{display:flex;position:absolute;right:12px;top:16px}
.faces span{width:36px;height:36px;border-radius:50%;background:var(--panel);display:grid;place-items:center;font-weight:500;font-size:14px;box-shadow:0 0 0 2px var(--frame)}
.faces span+span{margin-left:-8px;background:var(--lime);color:var(--on-color)}
.shared-total{font-size:40px;line-height:1.1;font-weight:500;letter-spacing:-.04em}
.shared-total small{font-size:16px;font-weight:400;letter-spacing:0;color:var(--muted)}
.shared-rows{margin-top:8px}
.shared-rows div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:14px}
.shared-rows dt{color:var(--muted)}

/* 5. Вопросы и цены объектом */
.faq-sec .sec-head .link,.faq-sec .sec-head .btn{margin-top:10px}
.price-obj{padding:24px 18px 10px}
.price-obj .lead{font-size:16px}
.price-obj .btn{margin-top:16px}
.price-rows{margin-top:14px}
.price-rows a{display:grid;grid-template-columns:12px auto 1fr auto;align-items:center;gap:10px;min-height:52px;border-radius:var(--r-small);transition:background-color var(--fast)}
.price-rows a:hover{background:var(--panel)}
.price-rows i{width:12px;height:12px;border-radius:4px;background:var(--tone)}
.price-rows span{font-weight:500}
.price-rows em{font-style:normal;font-size:14px;color:var(--muted)}
.price-rows b{font-size:22px;font-weight:500;letter-spacing:-.03em;white-space:nowrap}
.t-dark{display:none}:root[data-theme=dark] .t-light{display:none}:root[data-theme=dark] .t-dark{display:block}

@media(min-width:901px){
  .hero{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:center;padding-top:40px}
  .hero-copy h1{max-width:7em}
  .hero-copy .lead{font-size:18px;margin-top:18px}
  .hero-copy .acts{margin-top:24px}
  .hero-copy .btn{flex:none;padding-inline:22px;font-size:16px}
  .scene{padding:14px}
  .scene-head{padding:8px 12px 14px}.scene-head h2{font-size:22px}
  .mail{padding:16px 18px}.budget{padding:22px 16px 8px}
  .total{font-size:64px}
  .rows li{min-height:56px}
  .status{min-height:40px}
  .rk{grid-template-columns:4fr 7fr;gap:56px;align-items:center}
  .cutter{padding:28px;gap:24px}
  .clip{grid-template-columns:216px 1fr;gap:28px;align-items:center}
  .poster{width:216px}
  .clip-meta h3{font-size:28px;line-height:1.12}
  .quote{font-size:15px;margin-top:14px}
  .games{padding-block:56px}
  .games-grid{grid-template-columns:7fr 5fr;gap:16px}
  .game{padding:32px;gap:24px}
  .g-rust{grid-template-columns:1fr 340px;align-items:center}
  .g-rust .shot{--ar:78/73}
  .g-mc{grid-template-columns:1fr;align-content:space-between}
  .g-mc .shot{--ar:78/40}
  .game-title{font-size:56px}
  .game-copy>p{font-size:16px}
  .agent{grid-template-columns:72px 1fr auto;padding:18px 32px}
  .agent-face{width:72px;height:72px}.agent .btn{grid-column:auto}
  .trail-head{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:end}
  .facts{margin:0;grid-template-columns:repeat(3,1fr);gap:28px}
  .live{margin-top:40px}
  .live-window{margin-inline:0}
  .live-body{height:518px}
  .inside-grid{grid-template-columns:5fr 4fr 3fr;gap:16px;margin-top:40px;align-items:start}
  .iw{padding:14px 14px 28px}
  .iw-a .cap+.frag{margin-top:24px}
  .price-obj{padding:48px;display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:center}
  .price-rows{margin:0}.price-rows a{padding-inline:12px;min-height:60px}.price-rows b{font-size:28px}
  .faq-sec{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
  .faq{margin:0}
}
@media(min-width:901px) and (max-width:1199px){.clip-meta h3{font-size:20px}.g-rust{grid-template-columns:1fr 240px}.inside-grid{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){
  .js .cutter:not(.is-played) .tape b{opacity:1;transform:none}
  .rows li.is-pending,.dup.is-pending{opacity:1;transform:none}
}