/* landing_kit/layout.css · каркас мобильного экрана прелендера. Всё через токены tokens.css.
   Скелет: .screen > (.top, .pill, h1/h2, .lead, область выбора, .grow, .dock/.trust/.foot).
   ⛔ Область выбора (.grid или .listwrap) скроллится сама, бейдж/заголовок/подвал стоят на месте:
   иначе на экране 667 подвал уезжает (Claude_Landings_KB СПРАВОЧНИК 9). */
*{box-sizing:border-box}
/* ⛔ ПОВЕРХНОСТИ БРАУЗЕРА (внедрено 14.09.2026, craft-floor Impeccable): выделение, кольцо фокуса,
   скроллбар и цифры браузер рисует СВОИМИ дефолтами, не принадлежащими ни одной дизайн-системе.
   Четыре строки ниже стоят дёшево и убирают самый заметный признак несобранной страницы. */
::selection{background:var(--sel-bg);color:var(--sel-ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-ui)}
html{scrollbar-color:var(--s2) transparent}
.num,.price,.cnt,td:not(:first-child){font-variant-numeric:tabular-nums}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:400 var(--body)/1.43 var(--font);-webkit-font-smoothing:antialiased;
  min-height:100dvh;position:relative;isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 55% at 82% 6%,color-mix(in srgb,var(--bg-grad) 78%,transparent) 0%,transparent 62%),
             radial-gradient(80% 50% at 12% 30%,color-mix(in srgb,var(--bg-grad) 40%,transparent) 0%,transparent 68%),
             linear-gradient(180deg,transparent 55%,#000 100%)}

.screen{display:none;flex-direction:column;min-height:var(--vh,100dvh);padding:0 16px 16px;max-width:480px;margin:0 auto}
.screen.on{display:flex}
.top{height:64px;display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.mark{width:28px;height:28px;border-radius:8px;display:block;flex:0 0 auto}
.age{font-size:var(--xs);color:var(--faint);border:1px solid var(--s-border);border-radius:var(--r-pill);padding:4px 9px;background:var(--s1)}

.pill{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;background:var(--s1);border:1px solid var(--s-border);
  border-radius:var(--r-pill);padding:6px 12px;font-size:var(--xs);color:var(--muted);backdrop-filter:blur(10px)}
h1{font-size:var(--h1);line-height:1.05;font-weight:600;letter-spacing:-.03em;margin:14px 0 0;color:var(--ink)}
h2{font-size:var(--h2);line-height:1.1;font-weight:600;letter-spacing:-.03em;margin:12px 0 0;color:var(--ink)}
.lead{color:var(--muted);margin:10px 0 0}
.grow{flex:1 1 auto;min-height:12px}

/* кадр вопроса */
.shot{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--r-media);overflow:hidden;margin:16px 0 0;
  border:1px solid var(--s-border);background:linear-gradient(160deg,color-mix(in srgb,var(--bg-grad) 70%,#000),#000)}

/* кнопки ответов: зона большого пальца, утвердительная залита, отрицательная тихая.
   ⛔ Цвет текста задан явно: <button> не наследует color (СПРАВОЧНИК 9) */
.opts{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.opt{position:relative;width:100%;min-height:var(--tap);padding:16px 18px;text-align:left;cursor:pointer;
  font:600 15px/1.2 var(--font);letter-spacing:-.02em;border-radius:var(--r-ui);border:1px solid var(--s-border);
  background:var(--s1);color:var(--ink);backdrop-filter:blur(10px);
  transition:transform var(--fast) var(--ease),box-shadow var(--base) var(--ease)}
.opt:active{transform:scale(var(--press))}
.opt--go{background:linear-gradient(180deg,var(--cta-top),var(--cta-bot));color:var(--cta-ink);border-color:transparent}
.opt--quiet{background:transparent;color:var(--faint);border-color:var(--s-border);min-height:48px;font-weight:500}

/* прогресс: стартует не с нуля (ставится инлайн, обычно 15%) */
.bar{margin-top:14px}
.track{height:4px;border-radius:var(--r-pill);background:#ffffff14;overflow:hidden}
/* ⛔ Доля ставится переменной `--p` (0..1), не шириной: анимация width дёргает раскладку каждый
   кадр (находка внешнего детектора 14.09.2026, стандарт 7 Эмила). Разметка: style="--p:.15" */
.fill{height:100%;width:100%;transform-origin:left center;transform:scaleX(var(--p,0));
  border-radius:var(--r-pill);background:linear-gradient(90deg,var(--cta-top),var(--cta-bot));
  transition:transform .45s var(--ease)}
.bar p{margin:8px 0 0;font-size:var(--xs);color:var(--faint)}

/* сетка карточек: ряды не сжимаются, скроллится контейнер */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;grid-auto-rows:max-content;align-content:start;
  overflow-y:auto;flex:0 1 auto;min-height:0;scrollbar-width:none}
.grid::-webkit-scrollbar{display:none}
.card{position:relative;padding:0;border:1px solid var(--s-border);border-radius:var(--r-ui);background:var(--s1);
  cursor:pointer;text-align:left;color:var(--ink);transition:transform .22s var(--ease),box-shadow var(--base) var(--ease),opacity var(--base) var(--ease),filter var(--base) var(--ease)}
.card .ph{position:relative;overflow:hidden;border-radius:var(--r-ui) var(--r-ui) 0 0;aspect-ratio:1/1;background:linear-gradient(160deg,color-mix(in srgb,var(--bg-grad) 70%,#000),#000)}
.card .meta{position:absolute;inset:auto 0 0 0;z-index:2;border-radius:0 0 var(--r-ui) var(--r-ui);padding:20px 10px 8px;background:linear-gradient(180deg,transparent,#000000d9 62%)}
.nm{display:flex;align-items:center;gap:5px;font:600 14px/1.1 var(--font);letter-spacing:-.02em;color:var(--ink)}
.st{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:11px;color:rgba(255,255,255,.78)}

/* список: строка с кадром слева и кнопкой справа */
.list{display:flex;flex-direction:column;gap:8px;margin-top:12px;overflow-y:auto;flex:1 1 auto;min-height:0;scrollbar-width:none}
.list::-webkit-scrollbar{display:none}
.rowi{display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:var(--r-ui);border:1px solid var(--s-border);background:var(--s1);
  cursor:pointer;color:var(--ink);transition:transform .22s var(--ease),box-shadow var(--base) var(--ease),opacity var(--base) var(--ease),filter var(--base) var(--ease)}
.rowi .av{position:relative;width:108px;height:108px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:linear-gradient(160deg,color-mix(in srgb,var(--bg-grad) 70%,#000),#000)}
.rowi .txt{flex:1 1 auto;min-width:0}
.say{flex:0 0 auto;font:600 13px/1 var(--font);color:var(--cta-ink);padding:10px 14px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--cta-top),var(--cta-bot))}

/* подсказка прокрутки: обёртка растёт (⛔ не 0 1 auto: min-content скролл-контейнера равен нулю), маска у дна, счётчик */
.listwrap{position:relative;display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.listwrap > .list,.listwrap > .grid{flex:1 1 auto;min-height:0}
.listwrap.more > .list,.listwrap.more > .grid{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 46px),transparent 100%);
  mask-image:linear-gradient(180deg,#000 calc(100% - 46px),transparent 100%)}
.peek{position:absolute;left:50%;bottom:6px;translate:-50% 0;z-index:4;display:none;align-items:center;gap:7px;height:32px;padding:0 12px;
  border:1px solid #ffffff2b;border-radius:var(--r-pill);background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);
  cursor:pointer;font:600 12px/1 var(--font);color:var(--ink);animation:peekBob 2.2s var(--ease) infinite}
.listwrap.more .peek{display:inline-flex}
.peek svg{width:14px;height:14px}

/* слот «посмотреть всех»: пунктир, другое действие */
.all{position:relative;border:1px dashed #ffffff3d;background:#ffffff08;cursor:pointer;border-radius:var(--r-ui);overflow:hidden;text-align:left;color:var(--ink)}

/* док, целевая кнопка, траст, подвал */
.dock{margin-top:auto;padding-top:14px}
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:var(--cta-h);border:0;border-radius:var(--r-ui);cursor:pointer;
  text-decoration:none;font:600 17px/1 var(--font);letter-spacing:-.02em;background:var(--ink);color:var(--bg);transition:transform var(--fast) var(--ease)}
.btn:active{transform:scale(var(--press))}
.btn--alt{background:var(--alt);color:var(--alt-ink)}
.sub{margin:10px 0 0;font-size:var(--xs);color:var(--faint);text-align:center}
.trust{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;justify-content:center}
.trust span{font-size:11px;color:var(--faint);border:1px solid var(--s-border);background:var(--s1);border-radius:var(--r-pill);padding:4px 9px}
.foot{margin-top:14px;padding-top:12px;border-top:1px solid #ffffff0f;font-size:11px;color:#ffffff59;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.foot a{color:#ffffff8c;text-decoration:none}

/* экран перехода */
.veil{position:fixed;inset:0;z-index:8;display:none;place-items:center;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(6px);text-align:center;padding:24px}
.veil.on{display:grid;animation:fade .25s var(--ease)}
@keyframes fade{from{opacity:0}}
.veil b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.veil span{display:block;margin-top:7px;font-size:12px;color:var(--faint)}