/* ==========================================================================
   Zappster — дизайн-система
   Бумага и чернила: тёплые нейтрали, глубокая чернильная синь акцентом.
   Тёплый акцент здесь невозможен — янтарный занят ценами (--money), и цена
   обязана оставаться единственным тёплым пятном в интерфейсе.
   Две темы, один акцент, моноширинный шрифт для всего, что измеряется.
   ========================================================================== */

:root{
  /* --- светлая тема: бумага --- */
  --ground:#F4F1EA;
  --surface:#FFFDF8;
  --raised:#FAF7F0;
  --sunken:#EBE7DD;

  --ink:#191612;
  --ink-2:#443D34;
  --muted:#6A6157;
  --faint:#746B60;   /* мельче 12px — держим контраст не ниже AA даже на --ground */

  --line:#E4DED2;
  --line-2:#D2CABA;

  --accent:#27497E;
  --accent-ink:#FFFFFF;
  --accent-soft:#E7EDF6;
  --accent-line:#B4C4DC;

  --money:#8A5A00;
  --money-soft:#F8EFDC;

  --ok:#146A44;
  --ok-soft:#E2F1E8;
  --warn:#8F5309;
  --warn-soft:#F9EDD9;
  --err:#AE2A21;
  --err-soft:#F9E8E5;

  --shadow-sm:0 1px 2px rgba(40,32,20,.06), 0 1px 1px rgba(40,32,20,.04);
  --shadow-md:0 4px 16px rgba(40,32,20,.09), 0 1px 3px rgba(40,32,20,.05);
  --shadow-lg:0 16px 48px rgba(40,32,20,.15), 0 2px 8px rgba(40,32,20,.07);

  /* Радиусы: четыре ступени вместо восьми подобранных на глаз. */
  --r-xs:6px; --r-sm:8px; --r:12px; --r-lg:16px; --r-full:999px;

  /*
   * Типографическая шкала. До неё в проекте жило семнадцать размеров в
   * диапазоне 9,5–17px: соседние ступени отличались на полпикселя, то есть
   * различались в коде, но не глазом. Девять ступеней покрывают всё.
   */
  --fs-micro:10px;   /* счётчики внутри чипов */
  --fs-tiny:11px;    /* бейджи, подписи в рельсе */
  --fs-xs:12px;      /* метки полей, служебные строки */
  --fs-sm:13px;      /* плотный интерфейсный текст */
  --fs-base:14px;    /* основной интерфейсный */
  --fs-md:15px;      /* текст сообщений и абзацы */
  --fs-lg:16px;      /* поля ввода: меньше — iOS зумит при фокусе */
  --fs-xl:18px;
  --fs-2xl:22px;

  /*
   * Шаг отступов кратен 4 с двумя половинными ступенями для плотных мест.
   * Было тридцать разных значений padding — теперь одиннадцать.
   */
  --s-1:2px;  --s-2:4px;  --s-3:6px;  --s-4:8px;  --s-5:12px; --s-6:16px;
  --s-7:20px; --s-8:24px; --s-9:32px; --s-10:40px; --s-11:56px;

  --ui:system-ui,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:Georgia,"Times New Roman",serif;
  --mono:"Cascadia Mono",Consolas,"SF Mono","Liberation Mono",monospace;

  --nav-h:56px;
  --page:1220px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0E1116;
    --surface:#161A21;
    --raised:#1E232B;
    --sunken:#0A0D11;

    --ink:#EDEAE3;
    --ink-2:#C6C1B8;
    --muted:#96918A;
    --faint:#908B84;

    --line:#272C35;
    --line-2:#353B46;

    --accent:#8AB0EC;
    --accent-ink:#0E1116;
    --accent-soft:#182739;
    --accent-line:#31486A;

    --money:#E2AC5E;
    --money-soft:#2A2113;

    --ok:#54C68C;   --ok-soft:#12271C;
    --warn:#DEA155; --warn-soft:#2A2013;
    --err:#F0796C;  --err-soft:#2C1614;

    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow-md:0 4px 16px rgba(0,0,0,.45);
    --shadow-lg:0 16px 48px rgba(0,0,0,.6);
  }
}

:root[data-theme="dark"]{
  --ground:#0E1116; --surface:#161A21; --raised:#1E232B; --sunken:#0A0D11;
  --ink:#EDEAE3; --ink-2:#C6C1B8; --muted:#96918A; --faint:#908B84;
  --line:#272C35; --line-2:#353B46;
  --accent:#8AB0EC; --accent-ink:#0E1116; --accent-soft:#182739; --accent-line:#31486A;
  --money:#E2AC5E; --money-soft:#2A2113;
  --ok:#54C68C; --ok-soft:#12271C;
  --warn:#DEA155; --warn-soft:#2A2013;
  --err:#F0796C; --err-soft:#2C1614;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 4px 16px rgba(0,0,0,.45);
  --shadow-lg:0 16px 48px rgba(0,0,0,.6);
}

/* ==========================================================================
   База
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--ui); font-size:var(--fs-md); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
  /* Свечение за первым экраном намеренно выходит за границы макета;
     clip обрезает его, не создавая контейнер прокрутки, как overflow:hidden. */
  overflow-x:clip;
}

/*
 * Фон страницы: тонкая сетка, как на миллиметровке, и два мягких цветных пятна.
 * Сетка задаёт масштаб и не даёт большим пустым областям выглядеть плоско,
 * пятна добавляют глубины. Всё на псевдоэлементе — разметку не трогаем.
 */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 72%);
}
/* Без filter:blur(): у радиальных градиентов и так мягкие края, а размытие
   на элементе во весь экран держит offscreen-буфер и роняет прокрутку. */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 34% at 12% 8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(34% 30% at 88% 4%, color-mix(in srgb, var(--money) 13%, transparent), transparent 70%);
}
@media (max-width:700px){
  body::before{background-size:44px 44px}
}
h1,h2,h3,h4{margin:0; line-height:1.18; text-wrap:balance; font-weight:650}
p{margin:0}
a{color:inherit; text-decoration:none}
img,svg,video{max-width:100%; display:block}
button,input,select,textarea{font:inherit; color:inherit}
[hidden]{display:none !important}

:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--r-xs);
}
::selection{background:var(--accent); color:var(--accent-ink)}

.wrap{max-width:var(--page); margin-inline:auto; padding-inline:20px}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}

/*
 * Утилиты вместо инлайновых стилей. Раньше размеры и отступы писались прямо
 * в разметке — из-за этого в проекте и завелось семнадцать размеров шрифта.
 */
.t-tiny{font-size:var(--fs-tiny)}
.t-xs{font-size:var(--fs-xs)}
.t-sm{font-size:var(--fs-sm)}
.t-lg{font-size:var(--fs-lg)}
.t-xl{font-size:var(--fs-xl)}
.t-2xl{font-size:var(--fs-2xl)}
.measure{max-width:34ch}
.page-pad{padding-block:var(--s-10) var(--s-11)}
.mt-4{margin-top:var(--s-4)} .mt-5{margin-top:var(--s-5)} .mt-6{margin-top:var(--s-6)}
.mt-9{margin-top:var(--s-9)} .mt-11{margin-top:var(--s-11)}
.mb-4{margin-bottom:var(--s-4)} .mb-5{margin-bottom:var(--s-5)} .mb-6{margin-bottom:var(--s-6)}
.wrap-row{flex-wrap:wrap}
.section-sub{
  font-family:var(--display); font-weight:400; letter-spacing:-.015em;
  font-size:clamp(21px,2.6vw,28px);
}
.sr{
  /* -1px, а не 0: классический приём, чтобы элемент не влиял на раскладку. */
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:12px; top:-60px; z-index:400; padding:8px 16px;
  background:var(--accent); color:var(--accent-ink); border-radius:var(--r);
  transition:top .15s;
}
.skip:focus{top:12px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   Шапка
   ========================================================================== */

.nav{
  position:sticky; top:0; z-index:100; height:var(--nav-h);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:1400px; margin-inline:auto; height:100%;
  display:flex; align-items:center; gap:16px; padding-inline:16px;
}
/* Логотип — связка клейма и слова, набранного тем же засечным шрифтом,
   что и заголовки: гротеск рядом с ромбом читался как иконка с подписью,
   а не как марка. */
.brand{display:flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:400; font-size:20px; letter-spacing:-.01em}
/* Клеймо стоит само по себе, без плашки: ромб уже даёт форму, и квадрат
   вокруг него читался как «иконка приложения», а не как марка. */
.brand-mark{
  flex:0 0 auto; display:grid; place-items:center; color:var(--accent);
}
.brand-mark svg{width:25px; height:25px}

.nav-links{display:flex; gap:2px; margin-inline-start:8px}
.nav-links a{
  padding:6px 12px; border-radius:var(--r-sm); color:var(--muted);
  font-size:var(--fs-base); font-weight:500; transition:background .14s, color .14s;
}
.nav-links a:hover{color:var(--ink); background:var(--sunken)}
.nav-links a[aria-current="page"]{color:var(--ink); background:var(--sunken); font-weight:600}

.nav-right{margin-inline-start:auto; display:flex; align-items:center; gap:8px}

/* Кнопка «Образы»: главный вход в продукт, поэтому она в шапке и выглядит
   как действие, а не как ещё одна ссылка меню. */
.nav-cta{
  display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px;
  margin-inline-start:auto; border-radius:var(--r-full);
  background:var(--accent); color:var(--accent-ink);
  font-size:var(--fs-sm); font-weight:650; white-space:nowrap;
  transition:filter .14s, transform .1s;
}
.nav-cta:hover{filter:brightness(1.07)}
.nav-cta:active{transform:translateY(1px)}
.nav-cta svg{width:15px; height:15px}
.nav-cta + .nav-right{margin-inline-start:12px}
@media (max-width:700px){
  .nav-cta{height:38px; padding:0 12px}
  .nav-cta span{display:none}
  .nav-cta svg{width:17px; height:17px}
}

.icon-btn{
  width:36px; height:36px; display:grid; place-items:center; flex:0 0 auto;
  background:transparent; border:1px solid transparent; border-radius:var(--r-sm);
  color:var(--muted); cursor:pointer; transition:.14s;
}
.icon-btn:hover{background:var(--sunken); color:var(--ink)}
.icon-btn svg{width:17px; height:17px}

.balance{
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface);
  font-family:var(--mono); font-size:var(--fs-sm); font-variant-numeric:tabular-nums;
  color:var(--ink); cursor:pointer; transition:.14s; white-space:nowrap;
}
.balance:hover{border-color:var(--line-2); background:var(--raised)}
.balance b{font-weight:600}
.balance .cur{color:var(--money)}
.balance.is-loading{color:var(--faint)}
/* Фото профиля в шапке: маленькое, вместо значка монеты. */
.avatar-mini{width:22px; height:22px; border-radius:var(--r-full); object-fit:cover; margin-inline-start:-4px}

.burger{display:none}
@media (max-width:940px){
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; gap:0;
    background:var(--surface); border-bottom:1px solid var(--line);
    padding:8px; box-shadow:var(--shadow-lg);
    /* visibility, а не только opacity: иначе скрытые пункты остаются
       в порядке обхода Tab и клавиатура «проваливается» в невидимое меню. */
    transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .16s, opacity .16s, visibility .16s;
  }
  .nav-links a{padding:12px 12px; font-size:var(--fs-md)}
  body.menu-open .nav-links{transform:none; opacity:1; visibility:visible; pointer-events:auto}
  .burger{display:grid}
}

/*
 * Телефон: шапка встаёт на ту же вертикаль, что и текст страницы (было 16px
 * против 20px — логотип не совпадал с заголовком), кнопки дорастают до
 * пальца, а командная палитра уходит: она открывается по Ctrl+K, и на
 * телефоне занимала место, ничего не давая.
 */
@media (max-width:700px){
  .nav-in{padding-inline:20px; gap:12px}
  .icon-btn{width:40px; height:40px}
  .balance{height:40px}
  #palette-btn{display:none}
  .nav-links{padding:8px 12px}
}

/* индикатор перехода между страницами */
#route-progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:300;
  background:var(--accent); opacity:0; transition:width .2s ease, opacity .2s;
}
#route-progress.on{opacity:1}

/* ==========================================================================
   Кнопки
   ========================================================================== */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:40px; padding:0 16px; border-radius:var(--r);
  border:1px solid transparent; background:var(--sunken); color:var(--ink);
  font-size:var(--fs-base); font-weight:600; cursor:pointer; white-space:nowrap;
  transition:background .14s, border-color .14s, color .14s, transform .1s;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px; height:16px; flex:0 0 auto}
.btn-primary{background:var(--accent); color:var(--accent-ink)}
.btn-primary:hover{background:color-mix(in srgb, var(--accent) 86%, var(--ink))}
.btn-ghost{background:transparent; border-color:var(--line)}
.btn-ghost:hover{background:var(--sunken); border-color:var(--line-2)}
.btn-quiet{background:transparent; color:var(--muted); padding:0 8px; min-height:32px; font-size:var(--fs-sm)}
.btn-quiet:hover{background:var(--sunken); color:var(--ink)}
.btn-lg{min-height:48px; padding:0 24px; font-size:var(--fs-lg)}
.btn-block{width:100%}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}
.btn-danger{background:var(--err-soft); color:var(--err)}

/* ==========================================================================
   Поля
   ========================================================================== */

.field{display:flex; flex-direction:column; gap:6px}
.field > label,.label{
  font-size:var(--fs-xs); font-weight:600; color:var(--muted);
  letter-spacing:.02em; display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.input,.select,.textarea{
  width:100%; background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r);
  padding:8px 12px; font-size:var(--fs-lg); /* 16px — иначе iOS зумит при фокусе */
  transition:border-color .14s, box-shadow .14s;
}
.textarea{min-height:104px; resize:vertical; line-height:1.55; font-family:inherit}
.input:hover,.select:hover,.textarea:hover{border-color:var(--line-2)}
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.select{
  appearance:none; cursor:pointer; padding-right:34px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.range{width:100%; accent-color:var(--accent); height:24px}

.drop{
  display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 12px;
  border:1px dashed var(--line-2); border-radius:var(--r); background:var(--raised);
  color:var(--muted); font-size:var(--fs-sm); cursor:pointer; transition:.14s; text-align:left;
}
.drop:hover,.drop.over{border-color:var(--accent); color:var(--ink); background:var(--accent-soft)}
.drop svg{width:16px; height:16px; flex:0 0 auto}
.drop input[type=file]{display:none}
.drop-thumb{width:30px; height:30px; border-radius:var(--r-sm); object-fit:cover; flex:0 0 auto}

/* ==========================================================================
   Поверхности
   ========================================================================== */

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
}
.pad{padding:20px}
.divider{height:1px; background:var(--line); border:0; margin:0}

.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:var(--r-full); border:1px solid var(--line);
  background:var(--surface); color:var(--muted);
  font-size:var(--fs-xs); font-weight:550; cursor:pointer; transition:.14s;
}
.chip:hover{border-color:var(--accent-line); color:var(--ink); background:var(--accent-soft)}
.chip[aria-pressed="true"],.chip.on{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
}
.chip-row{display:flex; flex-wrap:wrap; gap:6px}

/* Фильтр-галочка. Сам квадратик был 13×13 — меньше 24px, ниже порога
   WCAG 2.5.8, и на телефоне в него надо целиться. Растим сам флажок и
   отдаём под нажатие всю плашку с подписью: промахнуться уже негде. */
.chip-check{cursor:pointer; gap:7px; padding-block:6px}
.chip-check input{width:16px; height:16px; margin:0; accent-color:var(--accent); cursor:pointer}

.badge{
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px;
  border-radius:var(--r-sm); font-size:var(--fs-tiny); font-weight:650;
  font-family:var(--mono); letter-spacing:.01em; white-space:nowrap;
}
.badge-ok{background:var(--ok-soft); color:var(--ok)}
.badge-run{background:var(--accent-soft); color:var(--accent)}
.badge-wait{background:var(--warn-soft); color:var(--warn)}
.badge-err{background:var(--err-soft); color:var(--err)}
.badge-money{background:var(--money-soft); color:var(--money)}
.badge-line{background:transparent; border:1px solid var(--line); color:var(--muted)}
.badge-row{display:inline-flex; flex-wrap:wrap; gap:var(--s-2)}

.kbd{
  font-family:var(--mono); font-size:var(--fs-tiny); padding:2px 6px; border-radius:var(--r-xs);
  border:1px solid var(--line-2); background:var(--raised); color:var(--muted);
  box-shadow:0 1px 0 var(--line-2); white-space:nowrap;
}

/* ==========================================================================
   Тосты
   ========================================================================== */

#toasts{
  position:fixed; right:16px; bottom:16px; z-index:350;
  display:flex; flex-direction:column; gap:8px; max-width:min(380px,calc(100vw - 32px));
}
.toast{
  display:flex; align-items:flex-start; gap:8px; padding:12px 12px;
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--muted);
  border-radius:var(--r); box-shadow:var(--shadow-lg); font-size:var(--fs-sm);
  animation:toast-in .22s cubic-bezier(.2,.8,.3,1);
}
.toast.ok{border-left-color:var(--ok)}
.toast.err{border-left-color:var(--err)}
.toast.info{border-left-color:var(--accent)}
.toast b{display:block; margin-bottom:2px; font-size:var(--fs-sm)}
.toast span{color:var(--muted)}
.toast button{background:none; border:0; color:var(--faint); cursor:pointer; padding:0 2px; margin-inline-start:auto}
@keyframes toast-in{from{opacity:0; transform:translateY(8px) scale(.98)}to{opacity:1; transform:none}}

/* ==========================================================================
   Командная палитра
   ========================================================================== */

#palette{
  position:fixed; inset:0; z-index:360; display:none;
  background:color-mix(in srgb, var(--ground) 62%, transparent);
  backdrop-filter:blur(3px); padding:12vh 16px 16px;
}
#palette.open{display:block}
.palette-box{
  max-width:560px; margin-inline:auto; background:var(--surface);
  border:1px solid var(--line-2); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); overflow:hidden;
  animation:pal-in .16s cubic-bezier(.2,.8,.3,1);
}
@keyframes pal-in{from{opacity:0; transform:translateY(-8px) scale(.99)}to{opacity:1; transform:none}}
.palette-box input{
  width:100%; border:0; border-bottom:1px solid var(--line); background:transparent;
  padding:16px 16px; font-size:var(--fs-lg); outline:none;
}
.palette-list{max-height:min(52vh,420px); overflow-y:auto; padding:6px}
.palette-list li{
  display:flex; align-items:center; gap:12px; padding:8px 12px;
  border-radius:var(--r-sm); cursor:pointer; font-size:var(--fs-base);
}
.palette-list li[aria-selected="true"]{background:var(--accent-soft); color:var(--ink)}
.palette-list li svg{width:15px; height:15px; color:var(--muted); flex:0 0 auto}
.palette-list li .hint{margin-inline-start:auto; font-size:var(--fs-tiny); color:var(--faint); font-family:var(--mono)}
.palette-list ul{list-style:none; margin:0; padding:0}
.palette-empty{padding:24px; text-align:center; color:var(--muted); font-size:var(--fs-sm)}

/* ==========================================================================
   Модальное окно
   ========================================================================== */

dialog.modal{
  border:1px solid var(--line-2); border-radius:var(--r-lg); padding:0;
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow-lg);
  max-width:min(760px,calc(100vw - 32px)); width:100%;
}
dialog.modal::backdrop{background:color-mix(in srgb, #000 55%, transparent); backdrop-filter:blur(2px)}
.modal-head{
  display:flex; align-items:center; gap:12px; padding:16px 16px;
  border-bottom:1px solid var(--line);
}
.modal-head h3{font-size:var(--fs-lg); flex:1}
.modal-body{padding:16px; max-height:70vh; overflow-y:auto}

/* ==========================================================================
   Маркетинговые страницы
   ========================================================================== */

/*
 * Лендинг построен «от продукта»: в первом экране не иллюстрация, а живой
 * макет самой студии с настоящим ответом от API.
 *
 * Всё написано mobile-first. Телефон здесь не «сжатый десктоп»: витрина
 * превращается в свайп-карусель, макет приложения теряет боковой рельс,
 * кнопки становятся в ряд. Раньше страница занимала 11,7 экрана — половину
 * съедала вертикальная лента картинок.
 */

/* ==========================================================================
   Первый экран
   ========================================================================== */

.hero{position:relative; padding-block:28px 32px}

.hero-grid{display:grid; gap:var(--s-8); align-items:center}
.hero-copy{display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-5)}
.hero h1{
  font-family:var(--display); font-weight:400; letter-spacing:-.03em;
  font-size:clamp(36px,10vw,58px); line-height:1; margin:0; text-wrap:balance;
}
.hero h1 em{font-style:italic; color:var(--accent)}
.hero-sub{color:var(--muted); font-size:clamp(15.5px,4vw,19px); max-width:44ch; line-height:1.5}

/* Кнопки в ряд: две штуки в столбик на телефоне съедали 104px высоты. */
.hero-actions{display:flex; gap:var(--s-4); width:100%}
.hero-actions .btn{flex:1; justify-content:center; padding-inline:var(--s-5)}
/* Узкий экран — исключение: на 320px «Начать — 5 ₽ на пробу» и «Каталог»
   в строку не влезали и растягивали всю страницу на 16px вбок. */
@media (max-width:374px){
  .hero-actions{flex-wrap:wrap}
  .hero-actions .btn{flex:1 1 100%}
}
@media (min-width:900px){.hero-actions .btn{flex:0 0 auto; padding-inline:var(--s-8)}}

.hero-trust{
  display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-5);
  font-size:var(--fs-xs); color:var(--faint); font-family:var(--mono);
}
.hero-trust span{display:inline-flex; align-items:center; gap:5px}
.hero-trust svg{width:13px; height:13px; color:var(--ok)}

@media (min-width:900px){
  .hero{padding:56px 0 44px}
  .hero-grid{grid-template-columns:minmax(0,0.88fr) minmax(0,1.12fr); gap:var(--s-10)}
}

/* ==========================================================================
   Макет приложения
   ========================================================================== */

.app-shot{
  border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); box-shadow:var(--shadow-lg);
}
@media (min-width:900px){
  .app-shot{transform:perspective(1600px) rotateY(-2deg) rotateX(1deg)}
}
.app-bar{
  display:flex; align-items:center; gap:var(--s-4); padding:var(--s-4) var(--s-5);
  border-bottom:1px solid var(--line); background:var(--raised);
}
.app-dots{display:none}
@media (min-width:600px){.app-dots{display:flex; gap:var(--s-3)}}
.app-dots i{width:9px; height:9px; border-radius:50%; background:var(--line-2); display:block}
.app-title{font-size:var(--fs-xs); color:var(--muted); font-weight:600}
.app-bar .badge{margin-inline-start:auto}

/* Рельс на телефоне съедал 14% ширины ради декора — прячем. */
.app-body{display:grid; grid-template-columns:minmax(0,1fr)}
.app-rail{display:none}
@media (min-width:600px){
  .app-body{grid-template-columns:52px minmax(0,1fr)}
  .app-rail{
    display:flex; flex-direction:column; align-items:center; gap:var(--s-1);
    padding:var(--s-4) 0; border-right:1px solid var(--line); background:var(--raised);
  }
}
.app-rail i{width:32px; height:32px; border-radius:var(--r-sm); display:grid; place-items:center; color:var(--faint)}
.app-rail i.on{background:var(--accent-soft); color:var(--accent)}
.app-rail svg{width:16px; height:16px}

.app-main{display:flex; flex-direction:column; min-width:0}
.app-pick{
  display:flex; align-items:center; gap:var(--s-4); padding:var(--s-4) var(--s-5);
  border-bottom:1px solid var(--line);
}
.app-pick .vendor-mark{width:22px; height:22px; font-size:9px; border-radius:var(--r-xs)}
.app-pick b{font-size:var(--fs-sm); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.app-pick .mono{margin-inline-start:auto; font-size:var(--fs-tiny); color:var(--money); white-space:nowrap}
@media (max-width:420px){.app-pick .mono{display:none}}

.app-chat{
  flex:1; padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-5);
  font-size:var(--fs-sm); line-height:1.55; min-height:150px;
}
.app-msg{display:flex; gap:var(--s-4)}
.app-av{
  width:22px; height:22px; border-radius:var(--r-xs); flex:0 0 auto; display:grid;
  place-items:center; font-size:9px; font-weight:700; font-family:var(--mono);
  background:var(--sunken); color:var(--muted);
}
.app-msg-bot .app-av{background:var(--accent); color:var(--accent-ink)}
.app-msg p{min-width:0}
.app-out{color:var(--ink-2); min-height:42px}
.app-meta{
  display:flex; gap:var(--s-4); font-family:var(--mono); font-size:var(--fs-tiny);
  color:var(--faint); padding-inline-start:34px;
}
.app-meta b{color:var(--money); font-weight:600}

.app-input{display:flex; gap:var(--s-3); padding:var(--s-4); border-top:1px solid var(--line); background:var(--raised)}
.app-input input{
  flex:1; min-width:0; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); padding:var(--s-4) var(--s-5); font-size:var(--fs-lg);
}
.app-input input:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.app-input button{flex:0 0 auto; min-height:42px; padding:0 var(--s-5)}

/* ==========================================================================
   Цифры
   ========================================================================== */

.stat-row{
  display:grid; grid-template-columns:1fr 1fr; margin-top:var(--s-7);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface);
}
.stat-row div{padding:var(--s-5); border-inline-end:1px solid var(--line); border-bottom:1px solid var(--line)}
.stat-row div:nth-child(2n){border-inline-end:0}
.stat-row div:nth-last-child(-n+2){border-bottom:0}
.stat-row b{display:block; font-family:var(--mono); font-size:22px; font-weight:600; font-variant-numeric:tabular-nums}
.stat-row span{font-size:var(--fs-xs); color:var(--muted)}
@media (min-width:760px){
  .stat-row{grid-template-columns:repeat(4,1fr); margin-top:var(--s-9)}
  .stat-row div{padding:var(--s-5) var(--s-6); border-bottom:0}
  .stat-row div:last-child{border-inline-end:0}
  .stat-row b{font-size:26px}
}

/* ==========================================================================
   Секции
   ========================================================================== */

/* Только padding-block: боковые отступы задаёт .wrap, и сокращённая запись
   их обнуляла — на телефоне заголовки и карточки упирались в края экрана. */
.section{padding-block:40px}
@media (min-width:760px){.section{padding-block:64px}}

/*
 * content-visibility здесь пробовали и убрали: браузер оценивает высоту
 * невидимых секций по contain-intrinsic-size, и полоса прокрутки прыгает
 * при промахе оценки. На странице в пять экранов выигрыш меньше, чем вред,
 * а проверить его на глаз в этой среде нельзя. Основной выигрыш дало
 * снятие backdrop-filter — с тридцати элементов до одного.
 */
.section-head{max-width:62ch; margin-bottom:var(--s-7)}
.section-head h2{
  font-family:var(--display); font-weight:400; font-size:clamp(26px,6.5vw,38px);
  letter-spacing:-.025em; margin-bottom:var(--s-4); line-height:1.08;
}
.section-head p{color:var(--muted); font-size:clamp(15px,3.8vw,17px)}
@media (min-width:760px){.section-head{margin-bottom:var(--s-8)}}

/* ==========================================================================
   Бенто
   ========================================================================== */

.bento{display:grid; gap:var(--s-5); grid-template-columns:1fr}
@media (min-width:680px){.bento{gap:var(--s-5); grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.bento{grid-template-columns:repeat(3,1fr)}}

.cell{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface);
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
a.cell:hover{border-color:var(--line-2); transform:translateY(-2px); box-shadow:var(--shadow-md)}
.cell-visual{
  flex:1; min-height:118px; padding:var(--s-5); display:flex; flex-direction:column;
  justify-content:center; gap:var(--s-4); background:var(--raised);
  border-bottom:1px solid var(--line); overflow:hidden;
}
@media (min-width:680px){.cell-visual{min-height:150px; padding:var(--s-6)}}
.cell-visual img{width:100%; height:100%; object-fit:cover; border-radius:var(--r-sm)}
.cell-visual.flush{padding:0; min-height:170px}
.cell-text{padding:var(--s-5)}
@media (min-width:680px){.cell-text{padding:var(--s-6)}}
.cell-text h3{font-size:var(--fs-lg); font-weight:650; margin-bottom:var(--s-3)}
.cell-text p{color:var(--muted); font-size:var(--fs-sm); line-height:1.5}
@media (min-width:680px){.cell-wide{grid-column:span 2}}

/* мини-виджеты внутри ячеек */
.mini{
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface);
  padding:var(--s-4) var(--s-5); font-size:var(--fs-xs);
}
.mini-row{display:flex; align-items:center; gap:var(--s-4)}
.mini-row + .mini-row{margin-top:var(--s-3)}
.mini .mono{margin-inline-start:auto; color:var(--money); font-size:var(--fs-tiny); white-space:nowrap}
.mini-bar{height:4px; border-radius:var(--r-full); background:var(--sunken); overflow:hidden; margin-top:var(--s-3)}
.mini-bar i{display:block; height:100%; background:var(--accent)}
.mini-cite{display:flex; gap:var(--s-3); align-items:center; font-size:var(--fs-tiny); color:var(--muted)}
.mini-num{
  width:15px; height:15px; border-radius:var(--r-xs); background:var(--accent-soft);
  color:var(--accent); font-size:9px; font-weight:700; display:grid; place-items:center; flex:0 0 auto;
}
.keys{display:flex; flex-wrap:wrap; gap:var(--s-3); align-items:center}

/* ==========================================================================
   Витрина работ

   На телефоне — горизонтальная лента со snap-прокруткой: пять карточек
   в столбик занимали 4685px, то есть пять экранов подряд.
   ========================================================================== */

.showcase{
  display:grid; grid-auto-flow:column; grid-auto-columns:78%;
  gap:var(--s-5); overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scroll-padding-inline:20px;
  padding-bottom:var(--s-4); margin-inline:-20px; padding-inline:20px;
  scrollbar-width:none;
}
.showcase::-webkit-scrollbar{display:none}
.shot{scroll-snap-align:start}

@media (min-width:620px){
  .showcase{
    grid-auto-flow:row; grid-template-columns:repeat(2,1fr); grid-auto-columns:auto;
    overflow:visible; margin-inline:0; padding-inline:0; gap:var(--s-5);
  }
}
@media (min-width:1040px){
  .showcase{grid-template-columns:repeat(4,1fr); grid-auto-rows:186px}
}

.shot{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--sunken); display:flex; flex-direction:column;
  transition:transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s;
}
.shot img{width:100%; display:block; aspect-ratio:4/3; object-fit:cover}
.shot-meta{padding:var(--s-4) var(--s-5) var(--s-5)}
.shot-meta p{
  font-size:var(--fs-xs); line-height:1.4; color:var(--muted); margin-bottom:var(--s-3);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.shot-meta .row{gap:var(--s-3); flex-wrap:wrap}
.shot-tag{
  font-family:var(--mono); font-size:var(--fs-micro); padding:2px var(--s-3);
  border-radius:var(--r-full); background:var(--sunken); color:var(--muted);
}
.shot-tag-cost{background:var(--money-soft); color:var(--money)}

.swipe-hint{
  display:flex; align-items:center; gap:var(--s-3); margin-top:var(--s-4);
  font-size:var(--fs-tiny); color:var(--faint); font-family:var(--mono);
}
@media (min-width:620px){.swipe-hint{display:none}}

/* На широком экране подпись выезжает поверх кадра — картинке больше места. */
@media (min-width:1040px) and (hover:hover){
  .shot:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
  .shot img{height:100%; aspect-ratio:auto; transition:transform .5s cubic-bezier(.2,.8,.3,1)}
  .shot:hover img{transform:scale(1.045)}
  .shot-meta{
    position:absolute; inset:auto 0 0 0; color:#fff; opacity:0; transform:translateY(6px);
    background:linear-gradient(180deg, transparent, color-mix(in srgb, #05060c 88%, transparent) 55%);
    transition:.22s;
  }
  .shot:hover .shot-meta,.shot:focus-within .shot-meta{opacity:1; transform:none}
  .shot-meta p{color:#fff}
  .shot-tag{background:rgba(255,255,255,.22); color:#fff}
  .shot-tag-cost{background:color-mix(in srgb, var(--money) 78%, #000); color:#fff}
  .shot-tall{grid-row:span 2}
  .shot-wide{grid-column:span 2}
}

/* ==========================================================================
   Как это работает
   ========================================================================== */

.steps{display:grid; gap:var(--s-5); grid-template-columns:1fr}
@media (min-width:760px){.steps{grid-template-columns:repeat(3,1fr); gap:var(--s-5)}}
.step{
  display:flex; gap:var(--s-5); align-items:flex-start; padding:var(--s-5);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--surface);
}
@media (min-width:760px){.step{flex-direction:column; gap:var(--s-4); padding:var(--s-6)}}
.step-n{
  width:30px; height:30px; flex:0 0 auto; border-radius:var(--r-sm);
  background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:var(--fs-sm);
}
.step h3{font-size:var(--fs-base); font-weight:650; margin-bottom:var(--s-2)}
.step p{color:var(--muted); font-size:var(--fs-sm); line-height:1.5}

/* ==========================================================================
   Задачи и сценарии
   ==========================================================================

   Человек приходит с задачей — «расшифровать звонок», «проверить договор», —
   а не с требованием к размеру контекстного окна. Обе решётки ведут прямо
   в нужный инструмент студии, поэтому это ссылки, а не карточки-описания:
   работают со средней кнопки мыши, с клавиатуры и без JS. */

.tasks{display:grid; gap:var(--s-4); grid-template-columns:repeat(2,1fr)}
@media (min-width:680px){.tasks{gap:var(--s-5); grid-template-columns:repeat(3,1fr)}}
@media (min-width:1040px){.tasks{grid-template-columns:repeat(5,1fr)}}

.task{
  display:flex; flex-direction:column; gap:var(--s-3); padding:var(--s-5);
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
a.task:hover{border-color:var(--accent-line); transform:translateY(-2px); box-shadow:var(--shadow-md)}
.task-ic{
  width:34px; height:34px; border-radius:var(--r-sm); display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent);
}
.task b{font-size:var(--fs-base); font-weight:650; line-height:1.25}
.task-sub{color:var(--muted); font-size:var(--fs-xs); line-height:1.4}

/* Цена прижата к низу: в решётке из карточек разной высоты она должна
   читаться одной строкой, а не плавать под текстом. */
.task-price{
  margin-top:auto; padding-top:var(--s-3); color:var(--money);
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--fs-tiny);
}
/* Пока каталог не приехал, цена не выдумывается — стоит прочерк. */
.task-price:empty::before{content:'—'; color:var(--faint)}

.scn{display:grid; gap:var(--s-5); grid-template-columns:1fr}
@media (min-width:680px){.scn{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.scn{grid-template-columns:repeat(3,1fr)}}

.scn-card{
  display:flex; flex-direction:column; gap:var(--s-4); padding:var(--s-6);
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
a.scn-card:hover{border-color:var(--accent-line); transform:translateY(-2px); box-shadow:var(--shadow-md)}
.scn-card h3{font-size:var(--fs-md); font-weight:650; line-height:1.3}
.scn-card p{color:var(--muted); font-size:var(--fs-sm); line-height:1.5}

/* Какой инструмент откроется — видно до нажатия: карточка обещает ровно
   то, куда ведёт, а не мастер, которого в студии нет. */
.scn-foot{display:flex; align-items:center; gap:var(--s-3); margin-top:auto; padding-top:var(--s-2)}
.scn-go{margin-inline-start:auto; display:inline-flex; color:var(--accent)}

/* ==========================================================================
   Полоса и финал
   ========================================================================== */

.band{position:relative; overflow:hidden; border-block:1px solid var(--line); background:var(--sunken)}
.band img{width:100%; height:clamp(260px,30vw,330px); object-fit:cover; display:block; opacity:.9}
.band-in{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:var(--s-5); text-align:center;
  padding-block:var(--s-6); padding-inline:20px;
  background:color-mix(in srgb, #05060c 64%, transparent); color:#fff;
}
.band-in h2{font-family:var(--display); font-weight:400; font-size:clamp(24px,6vw,36px); letter-spacing:-.02em; line-height:1.1}
.band-in p{max-width:52ch; opacity:.92; font-size:var(--fs-md)}
.band-in .btn{margin-top:var(--s-2)}

.center-row{display:flex; justify-content:center}

/* бегущая строка моделей */
.ticker{
  overflow:hidden; border-block:1px solid var(--line); padding:var(--s-5) 0;
  background:var(--surface);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker-in{display:inline-flex; gap:var(--s-7); white-space:nowrap; animation:ticker 46s linear infinite}
.ticker-in span{font-family:var(--mono); font-size:var(--fs-xs); color:var(--muted)}
.ticker:hover .ticker-in{animation-play-state:paused}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.ticker-in{animation:none}}

/* ==========================================================================
   Подвал
   ========================================================================== */

footer.site{
  border-top:1px solid var(--line); margin-top:var(--s-9); padding:var(--s-8) 0 var(--s-7);
  background:var(--surface);
}
@media (min-width:760px){footer.site{margin-top:var(--s-11); padding:var(--s-10) 0 var(--s-9)}}
.foot-grid{display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:24px}
/* На телефоне подвал был самым высоким блоком страницы — уплотняем. */
@media (max-width:720px){
  /* Три коротких списка ссылок помещаются в один ряд — это на треть
     ниже, чем сетка 2×2, где подвал был самым высоким блоком страницы. */
  .foot-grid{grid-template-columns:repeat(3,1fr); gap:var(--s-6) var(--s-4)}
  .foot-grid > :first-child{grid-column:1 / -1}
  .foot-grid a{padding:var(--s-3) 0; font-size:var(--fs-xs)}
  .foot-grid .foot-h{margin-bottom:var(--s-3); font-size:var(--fs-tiny)}
}
/* Только совсем узкие экраны вроде iPhone SE — на 375px три колонки ещё держатся. */
@media (max-width:340px){
  .foot-grid{grid-template-columns:1fr 1fr}
}
/* Колонки подвала — заголовки второго уровня: пятый шёл сразу после h2
   основной страницы, и структура заголовков рвалась на два уровня.
   Класс, а не тег, задаёт вид: уровень нужен читалке, размер — глазу. */
.foot-grid .foot-h{font-size:var(--fs-xs); color:var(--muted); font-weight:650; margin-bottom:11px; letter-spacing:.03em; line-height:1.2}
.foot-grid a{display:block; font-size:var(--fs-sm); color:var(--ink-2); padding:4px 0; border-radius:var(--r-xs)}
.foot-grid a:hover{color:var(--accent)}
.foot-bottom{
  margin-top:30px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; gap:12px; flex-wrap:wrap; justify-content:space-between;
  font-size:var(--fs-xs); color:var(--faint);
}

/* ==========================================================================
   Таблицы
   ========================================================================== */

.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface)}
table.data{border-collapse:collapse; width:100%; min-width:560px; font-size:var(--fs-sm)}
table.data th{
  text-align:left; font-size:var(--fs-tiny); font-weight:650; color:var(--muted);
  padding:12px 12px; border-bottom:1px solid var(--line); background:var(--raised);
  white-space:nowrap; position:sticky; top:0;
}
table.data td{padding:12px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
table.data tr:last-child td{border-bottom:0}
table.data tbody tr:hover{background:var(--raised)}
td.num,th.num{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}

/* ==========================================================================
   Утилиты
   ========================================================================== */

.row{display:flex; align-items:center; gap:8px}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:12px}
.stack{display:flex; flex-direction:column; gap:12px}
.stack-sm{display:flex; flex-direction:column; gap:8px}
.grow{flex:1; min-width:0}
.spin{
  width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent;
  border-radius:50%; animation:spin .7s linear infinite; flex:0 0 auto; display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}

.empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:40px 24px; text-align:center; color:var(--muted); font-size:var(--fs-base);
}
.empty svg{width:26px; height:26px; color:var(--faint)}

/*
 * Сообщение об ошибке — отдельный компонент, а не бейдж, растянутый до блока.
 * У бейджа своя типографика и внутренние отступы, в роли абзаца он читается
 * тесно и не даёт места для подсказки, что делать дальше.
 */
.alert{
  display:flex; gap:var(--s-4); align-items:flex-start;
  padding:var(--s-5); border-radius:var(--r); font-size:var(--fs-sm); line-height:1.55;
  border:1px solid; background:var(--err-soft); border-color:color-mix(in srgb, var(--err) 34%, transparent);
  color:var(--err);
}
.alert svg{width:16px; height:16px; flex:0 0 auto; margin-top:1px}
.alert b{display:block; margin-bottom:2px}
.alert-warn{background:var(--warn-soft); border-color:color-mix(in srgb, var(--warn) 34%, transparent); color:var(--warn)}
.alert-info{background:var(--accent-soft); border-color:var(--accent-line); color:var(--accent)}

/*
 * Скелетоны. Каталог моделей — это полмегабайта JSON: пустой экран со
 * спиннером ощущается как зависание, серые полосы — как загрузка.
 */
.skel{
  background:linear-gradient(90deg, var(--sunken) 25%, var(--raised) 50%, var(--sunken) 75%);
  background-size:200% 100%; border-radius:var(--r-xs);
  animation:skel 1.3s ease-in-out infinite;
}
@keyframes skel{from{background-position:200% 0}to{background-position:-200% 0}}
.skel-line{height:12px; margin-bottom:8px}
.skel-line:last-child{margin-bottom:0}
.skel-block{height:40px; border-radius:var(--r)}
.skel-stack{display:flex; flex-direction:column; gap:var(--s-6)}
@media (prefers-reduced-motion: reduce){.skel{animation:none}}

/* переходы между страницами */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}

/* Гостю кнопка баланса заменяет вход — и должна звать, а не теряться. */
.balance.is-guest{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.balance.is-guest:hover{filter:brightness(1.06)}
.balance.is-guest svg{color:var(--accent-ink)}
/* Баланс на исходе — предупреждение прямо в шапке, до первой неудачной попытки. */
.balance.is-low{border-color:var(--warn); color:var(--warn)}

/*
 * Телефон: размеры под палец и поля ввода без зума.
 *
 * iOS увеличивает страницу, когда фокус попадает в поле со шрифтом мельче
 * 16px, и обратно уже не возвращает — сайт остаётся «уехавшим» вбок. Это
 * не про красоту: после первого же выбора модели в тарифах человек оказывался
 * на странице, которую надо возить пальцем.
 */
@media (max-width:700px){
  /* Класс, а не только тег: у полей проекта свой класс с размером из шкалы,
     и правило по тегу его не перебивает. */
  input, select, textarea,
  .input, .select, .textarea{font-size:16px}
  .select, .input{min-height:44px}
  .chip{min-height:34px}
  .btn{min-height:42px}
  .btn-quiet, .btn-ghost{min-height:38px}
  summary{min-height:38px; display:flex; align-items:center}
  details.adv > summary{padding-block:10px}
  /* Ползунок под палец: 24px по высоте — это попасть в него с третьего раза. */
  input[type=range]{height:32px}
}