/* Монохромная «модная» подача: чёрное и белое, заглавные с разрядкой, прямые углы, тонкие линии. */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/fonts/montserrat-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/fonts/montserrat-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2212, U+2215;
}
/* Расширенные наборы: казахские, киргизские, азербайджанские, узбекские буквы */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/fonts/montserrat-cyrillic-ext.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(/fonts/montserrat-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Тона главной «туман» (19.10.2026) на всех страницах сайта: тёплый светлый фон, мягкие линии (25.10.2026). */
  --ink: #0a0a0a; --paper: #f6f5f2; --mist: #efe6da; --muted: #6f6b64; --line: #e2dfd8;
  --plan-muted: #b5b5b5; --footer: #0a0a0a; --tile: var(--mist); --tile-ink: var(--ink);
  --font: "Montserrat", -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
/* Тёмная тема: по умолчанию — как на устройстве; значок в шапке переключает и запоминает (data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="glam"]) {
    --ink: #f2f2f0; --paper: #111111; --mist: #26231f; --muted: #9d9d99; --line: #2e2e2c;
    --plan-muted: #5c5c5a; --footer: #000000; --tile: #d4d4d0; --tile-ink: #0a0a0a; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #f2f2f0; --paper: #111111; --mist: #26231f; --muted: #9d9d99; --line: #2e2e2c;
  --plan-muted: #5c5c5a; --footer: #000000; --tile: #d4d4d0; --tile-ink: #0a0a0a; color-scheme: dark;
}
/* «Гламур» — «Пудровая роза» (19.10.2026, с дизайнером и UX): тёплая, под розовый закат; белый на кнопке — 5,5:1. */
:root[data-theme="glam"] {
  --ink: #3a1a26; --paper: #fbf1f0; --mist: #f5e1dd; --muted: #7a4655; --line: #ebcfcb;
  --plan-muted: #d9aab6; --footer: #3a1a26; --tile: #f5e1dd; --tile-ink: #3a1a26; color-scheme: light;
}
:root[data-theme="glam"] .btn-primary { background: #b83a63; border-color: #b83a63; color: #fff; }
:root[data-theme="glam"] .btn-primary:hover { background: var(--paper); color: #b83a63; }
:root[data-theme="glam"] .btn-ghost { border-color: #b83a63; color: #b83a63; }
:root[data-theme="glam"] .btn-ghost:hover { background: #b83a63; color: #fff; }
:root[data-theme="glam"] .logo .mark { background: #b83a63; }
:root[data-theme="glam"] .logo .mark svg { stroke: #fff; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.6 var(--font); color: var(--ink); background: var(--paper); }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Микро-подписи: мелко, заглавными, с разрядкой */
.label { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.muted { color: var(--muted); }
/* hidden сильнее любого display — иначе элемент с инлайн-стилем остаётся видимым */
[hidden] { display: none !important; }

/* Шапка */
header { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--line); }
header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo .mark { width: 32px; height: 32px; background: var(--ink); display: grid; place-items: center; }
.logo .mark svg { width: 22px; height: 22px; stroke: var(--paper); }
.logo .word { font-size: 13px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; }
nav { display: flex; align-items: center; gap: 28px; }
nav a { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; }
nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
@media (max-width: 480px) { nav .secondary { display: none; } }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0;
  margin: -6px 0; background: none; border: 0; color: var(--ink); cursor: pointer; }
.theme-toggle svg { width: 18px; height: 18px; }
/* Значок — следующая тема: светлая → луна, тёмная → блёстка («Гламур»), «Гламур» → солнце. */
.theme-toggle .i-sun, .theme-toggle .i-glam { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="glam"]) .theme-toggle .i-glam { display: block; }
  :root:not([data-theme="light"]):not([data-theme="glam"]) .theme-toggle .i-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .i-glam { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
:root[data-theme="glam"] .theme-toggle .i-sun { display: block; }
:root[data-theme="glam"] .theme-toggle .i-moon { display: none; }
@media (max-width: 480px) { nav { gap: 16px; } }

/* Переключатель языка: выпадающий список в шапке */
.lang-menu { position: relative; }
.lang-menu summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; outline-offset: 4px; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: ""; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.lang-menu[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.lang-menu div { position: absolute; right: 0; top: calc(100% + 20px); display: flex; flex-direction: column;
  min-width: 180px; background: var(--paper); border: 1px solid var(--line); }
.lang-menu:not([open]) div { display: none; }
.lang-menu div a { padding: 12px 16px; text-transform: none; letter-spacing: 0.02em; font-size: 14px; font-weight: 500; }
.lang-menu div a:hover { background: var(--mist); text-decoration: none; }
.lang-menu div a[aria-current] { font-weight: 700; }

/* Кнопки — прямоугольные, заглавные */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
  font: 600 12px/1 var(--font); letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--ink); cursor: pointer; transition: background .15s, color .15s; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--paper); color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn[aria-disabled="true"] { opacity: 0.35; pointer-events: none; }
.on-ink .btn-primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.on-ink .btn-primary:hover { background: transparent; color: var(--paper); }

/* Первый экран */
.hero { display: grid; gap: 40px; padding-top: 48px; padding-bottom: 64px; align-items: center; }
.hero h1 { font-size: clamp(44px, 8vw, 104px); line-height: 0.92; font-weight: 800; letter-spacing: -0.01em;
  text-transform: uppercase; margin: 18px 0 24px; }
.hero p { font-size: 17px; color: var(--muted); max-width: 30em; margin: 0 0 32px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Первый экран: главная кнопка — строкой, под ней «Для iPhone» и «Для Android» поровну на ту же ширину. */
.actions-hero { flex-direction: column; align-items: stretch; max-width: 380px; }
.actions-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.actions-sub .btn { padding: 0 12px; }
.hero-note { margin-top: 16px; }
.lead { font-size: 17px; color: var(--muted); max-width: 36em; margin: 0; }
.sha { font-size: 12px; word-break: break-all; }
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 59fr) minmax(0, 53fr); padding-top: 28px; padding-bottom: 96px; } }
/* Длинное слово в заголовке («GEYİNMƏK») не влезает в левую колонку — чуть меньше шрифт, а не сжатый лук. */
@media (min-width: 900px) {
  html[lang="az"] .hero h1 { font-size: calc(clamp(44px, 8vw, 104px) * 0.8); }
  html[lang="hy"] .hero h1 { font-size: calc(clamp(44px, 8vw, 104px) * 0.97); }
}

/* Лук на первом экране: вещи без фона на светло-сером поле */
.look { position: relative; margin: 0; background: var(--tile); color: var(--tile-ink); aspect-ratio: 25 / 27; padding: 56px 24px 64px;
  display: grid; gap: 12px;
  /* minmax(0, …): иначе высокая картинка растягивает свою строку и ломает композицию */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: repeat(4, minmax(0, 1fr));
  /* тренч — три четверти высоты, туфли под ним; блузка и брюки делят правую колонку */
  grid-template-areas: "outer top" "outer top" "outer bottom" "shoes bottom"; }
.look img { width: 100%; height: 100%; min-height: 0; object-fit: contain; mix-blend-mode: multiply; }
/* На сером поле тёмной темы «впечатывание» делает белые вещи серыми — показываем как есть. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="glam"]) :is(.look, .strip) img { mix-blend-mode: normal; } }
:root[data-theme="dark"] :is(.look, .strip) img { mix-blend-mode: normal; }
.look .outer { grid-area: outer; } .look .top { grid-area: top; }
/* Лоферы на фото крупные — уменьшаем, чтобы по пропорциям не спорили с тренчем. */
.look img.shoes { width: 76%; height: 76%; place-self: center; }
.look .bottom { grid-area: bottom; } .look .shoes { grid-area: shoes; }
.look .tag { position: absolute; top: 18px; left: 20px; right: 20px; display: flex; justify-content: space-between; }
.look .temp { font-size: 22px; font-weight: 800; letter-spacing: 0; }
.look .caption { position: absolute; left: 20px; right: 20px; bottom: 18px; border-top: 1px solid var(--tile-ink); padding-top: 12px; }
/* Под луком — список вещей с номерами, объяснение и действия, как в приложении */
.look-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.look-card .look { padding-bottom: 24px; min-height: 0; }
.look-items { list-style: none; margin: 0; padding: 0; column-gap: 24px; }
/* Две колонки: 01–02 слева, 03–04 справа — ниже таблица под плашкой. Зависит от ширины карточки, а не экрана:
   в узкой карточке подпись уходит под название, на телефоне — одна колонка */
.look-card { container-type: inline-size; }
@container (min-width: 360px) {
  .look-items { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; grid-auto-flow: column; }
  .look-items li { grid-template-columns: 32px minmax(0, 1fr); row-gap: 2px; }
  .look-items li .label { grid-column: 2; }
}
@container (min-width: 520px) {
  .look-items li { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .look-items li .label { grid-column: auto; }
}
.look-items li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: baseline; gap: 8px;
  border-top: 1px solid var(--line); padding: 10px 0; }
.look-items .n { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); }
.look-items .item { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.look-card .look-why { font-size: 15px; margin: 0; max-width: none; border-top: 1px solid var(--line); padding-top: 12px; }
/* Ровно две строки на всех языках и ширинах — иначе карточка с луком разной высоты (тексты не длиннее двух строк). */
.look-card .look-why { min-height: calc(3.2em + 13px); }
.look-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }

/* Разделы */
section { border-top: 1px solid var(--line); padding: 72px 0; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 40px; }
h2, h1.page-title { font-size: clamp(28px, 4.5vw, 48px); line-height: 1.05; font-weight: 700; text-transform: none; margin: 0; letter-spacing: -0.015em; }

/* Лента гардероба */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.strip figure { margin: 0; scroll-snap-align: start; }
.strip .tile { background: var(--tile); aspect-ratio: 3 / 4; padding: 18px; }
.strip img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.strip figcaption { margin-top: 10px; }

/* Шаги */
.steps { display: grid; gap: 0; }
.step { border-top: 1px solid var(--line); padding: 24px 0 8px; }
.step .num { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.step h3 { font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 18px 0 8px; }
.step p { margin: 0; color: var(--muted); }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

/* Возможности — сетка с тонкими линиями */
.features { display: grid; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feature { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 24px; }
.feature h3 { font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin: 12px 0 8px; }
.feature p { margin: 0; color: var(--muted); }
@media (min-width: 760px) { .features { grid-template-columns: repeat(2, 1fr); } }

/* Тарифы: бесплатный — белый, премиум — чёрный */
.plans { display: grid; gap: 16px; }
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; } }
/* Три тарифа: на широком экране в ряд; «Скоро» — приглушённо, без цены и кнопки. */
@media (min-width: 980px) { .plans-3 { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 760px) and (max-width: 979px) { .plans-3 .plan:last-child { grid-column: 1 / -1; } }
/* Будущие функции тарифа — приглушённо. */
.plan li.soon-item { opacity: 0.6; }
.plan { border: 1px solid var(--line); padding: 32px 28px; display: flex; flex-direction: column; gap: 14px; }
.plan.featured { background: var(--ink); color: var(--paper); }
.plan.featured .muted, .plan.featured .note { color: var(--plan-muted); }
.plan h3 { font-size: 15px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin: 0; }
.price { font-size: 44px; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; }
.price small { white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: inherit; opacity: 0.6; }
.old { font-size: 0.55em; font-weight: 600; opacity: 0.45; }
.note { font-size: 14px; color: var(--muted); }
/* «или 1 890 ₽ за год — выгода 37%» под ценой тарифа — одной строкой. */
.plan .price + .note { white-space: nowrap; }
@media (max-width: 420px) { .plan .price + .note { font-size: 12.5px; } }
.plan ul { list-style: none; margin: 4px 0 8px; padding: 0; }
.plan li { padding: 10px 0; border-top: 1px solid currentColor; border-color: rgba(128, 128, 128, 0.35); }
.plan .btn { margin-top: auto; }
.early { align-self: flex-start; border: 1px solid currentColor; padding: 7px 12px; white-space: nowrap; letter-spacing: 0.1em; }
/* На узких телефонах плашка «Ранний доступ · осталось N из M» — в одну строку. */
@media (max-width: 420px) { .early { font-size: 10px; letter-spacing: 0.06em; padding: 6px 10px; } }
.early[hidden] { display: none; }

/* Вопросы */
details { border-bottom: 1px solid var(--line); }
details:first-of-type { border-top: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; gap: 16px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 20px; font-weight: 400; line-height: 1; }
details[open] summary::after { content: "−"; }
details p { margin: 0 0 22px; color: var(--muted); max-width: 46em; }

/* Страница премиума */
.banner { background: var(--mist); padding: 16px 20px; margin-bottom: 24px; }
/* Почта аккаунта на странице премиума */
.field { display: grid; gap: 8px; max-width: 420px; margin-bottom: 28px; }
.field input { font: inherit; font-size: 16px; min-height: 52px; padding: 0 16px; border: 1px solid var(--muted); border-radius: 0;
  background: var(--paper); color: var(--ink); width: 100%; box-sizing: border-box; }
.field input:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.renew { display: flex; gap: 12px; align-items: flex-start; max-width: 620px; margin-top: 24px; font-size: 14px; cursor: pointer; }
.renew input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.field-form { display: grid; gap: 12px; max-width: 420px; justify-items: start; }
.field-form .field { margin-bottom: 4px; width: 100%; }
.acc-row { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); max-width: 560px; }
#renew-box { max-width: 560px; margin-top: 12px; display: grid; gap: 12px; justify-items: start; }
.pay-error { margin: 20px 0 0; padding: 12px 16px; border-left: 3px solid var(--ink); background: var(--mist); }

/* Подвал */
/* Подвал всегда тёмный (в тёмной теме — чёрный, с линией сверху). */
footer { background: var(--footer); color: #ffffff; border-top: 1px solid var(--line); padding: 56px 0 64px; font-size: 14px; }
footer .top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
footer .links { display: flex; flex-wrap: wrap; gap: 10px 28px; }
footer a { text-decoration: none; color: #cfcfcf; }
footer a:hover { color: #ffffff; }
footer .fine { color: #8a8a8a; display: grid; gap: 6px; }

/* Страница авторства фото */
.credits { list-style: none; padding: 0; margin: 0; }
.credits li { border-top: 1px solid var(--line); padding: 16px 0; display: grid; gap: 4px; }

/* Карусель образов на первом экране: слайды в одной ячейке — высота не прыгает, смена — растворением. */
.look-carousel .slides { display: grid; }
.look-carousel .slide { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 16px; min-width: 0;
  opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.look-carousel .slide.is-active { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.look-photo { display: block; }
/* Снизу — полоса под точки карусели. */
.look-photo img { position: absolute; inset: 52px 16px 40px; width: calc(100% - 32px); height: calc(100% - 92px); object-fit: contain; }
.look-dots { display: flex; justify-content: center; gap: 4px; }
.look-dots .dot { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.look-dots .dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink); transition: background .2s; }
.look-dots .dot.is-active::before { background: var(--ink); }
.look-dots .dot:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .look-carousel .slide, .look-carousel .slide.is-active { transition: none; } }
/* Точки — на нижнем крае фото (высота фото = ширина × 27/25): на одном месте и рядом с образом. */
.look-carousel { position: relative; }
.look-carousel .look-dots { position: absolute; left: 0; right: 0; top: calc(100cqw * 27 / 25 - 40px); z-index: 1; }
.look-carousel .dot::before { border-color: var(--tile-ink); }
.look-carousel .dot.is-active::before { background: var(--tile-ink); }

/* Кнопка RuStore — как соседняя «Скачать APK», слева логотип RuStore. */
.btn-rustore { gap: 10px; }
.btn-rustore img { width: 20px; height: 20px; flex: none; }
/* Кнопки скачивания на странице Android — одной ширины. */
.actions-same .btn { min-width: 280px; }

/* Гайды (/guides/): статья с формулами образов. */
.guide { max-width: 760px; padding-block: 40px 72px; display: grid; gap: 20px; }
.guide h1 { margin: 0; }
.guide .lead { font-size: 18px; line-height: 1.6; margin: 0; }
.guide .crumbs { font-size: 13px; color: var(--muted); }
.guide .crumbs a { color: inherit; }
.guide h2 { font-size: 22px; margin: 12px 0 0; }
.formula { display: grid; gap: 12px; }
.formula img, .guide-card img { width: 100%; height: auto; display: block; background: #F8F5F0; }
.formula p, .guide-tips p, .guide-faq p { margin: 0; line-height: 1.6; }
.guide-tips { display: grid; gap: 10px; }
.guide-cta { padding: 28px; display: grid; gap: 14px; background: var(--ink); color: var(--paper); }
.guide-cta h2 { margin: 0; }
.guide-cta p { margin: 0; line-height: 1.6; }
.guide-cta .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.guide-more ul { margin: 0; padding-left: 20px; line-height: 2; }
.guide-list { display: grid; gap: 24px; }
@media (min-width: 760px) { .guide-list { grid-template-columns: 1fr 1fr; } }
.guide-card { display: grid; gap: 8px; color: inherit; text-decoration: none; }
.guide-card h2 { margin: 4px 0 0; font-size: 18px; }
.guide-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.on-ink .btn-ghost { color: var(--paper); border-color: var(--paper); }
.on-ink .btn-ghost:hover { background: var(--paper); color: var(--ink); }

/* Версия под кнопками скачивания на странице Android */
.dl { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dl-ver { font-size: 12px; color: var(--muted); letter-spacing: 0.02em; }

/* Первый экран: одна главная кнопка под устройство, остальное — строкой ссылок (правки 19.10.2026). */
.hero-alt { margin: 14px 0 0; font-size: 15px; color: var(--muted); }
.hero-alt a { color: var(--ink); text-underline-offset: 4px; }
.hero-qr { display: flex; align-items: center; gap: 16px; margin-top: 16px; font-size: 14px; color: var(--muted); max-width: 380px; }
.hero-qr[hidden] { display: none; }
.hero-qr img { width: 132px; height: 132px; flex: none; }
/* Доверие цифрами под первым экраном */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-bottom: 56px; }
.trust div { border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.trust b { font-size: 22px; font-weight: 800; }
.trust span { font-size: 14px; color: var(--muted); line-height: 1.45; }
@media (max-width: 720px) { .trust { grid-template-columns: 1fr; gap: 16px; } }
/* Липкая кнопка на телефоне */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--paper); border-top: 1px solid var(--line); }
.sticky-cta .btn { width: 100%; }
@media (min-width: 900px) { .sticky-cta { display: none !important; } }
.hero-alt a { white-space: nowrap; }
@media (max-width: 899px) { body:has(.sticky-cta:not([hidden])) footer { padding-bottom: 96px; } }
/* Экраны приложения над шагами «Как это работает» (только русская версия: снимки экранов на русском) */
.step-shot { width: 100%; max-width: 230px; border: 8px solid #0a0a0a; border-radius: 30px; overflow: hidden; background: #fff;
  box-shadow: 0 16px 40px rgba(0,0,0,.14); margin-bottom: 20px; }
.step-shot img { width: 100%; height: auto; }
html:not([lang="ru"]) .step-shot { display: none; }
@media (max-width: 759px) { .step-shot { max-width: 250px; } }
.hero-qr img { width: 88px; height: 88px; }
.actions-hero .actions-sub { margin-top: 12px; }
.actions-hero .actions-sub .btn { font-size: 11px; letter-spacing: 0.12em; padding: 0 10px; text-align: center; line-height: 1.3; }
.actions-hero .actions-sub .btn:only-child { grid-column: span 2; }
/* Вторые действия первого экрана — текстом в одну строку, через точку (без рамок) */
.actions-hero .actions-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0; margin-top: 14px; }
.actions-hero .actions-sub .btn { border: 0; min-height: 0; padding: 6px 0; background: none; white-space: nowrap; }
.actions-hero .actions-sub .btn:hover { background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.actions-hero .actions-sub .btn + .btn::before { content: "•"; margin: 0 12px; font-size: 9px; letter-spacing: 0; text-decoration: none; display: inline-block; }
.actions-hero .actions-sub { flex-wrap: nowrap; }
.actions-hero .actions-sub .btn { font-size: 10.5px; letter-spacing: 0.08em; }
.actions-hero .actions-sub .btn + .btn::before { margin: 0 9px; }
.actions-hero .actions-sub .btn { font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 600; }
@media (max-width: 370px) { .actions-hero .actions-sub .btn { font-size: 12px; } .actions-hero .actions-sub .btn + .btn::before { margin: 0 7px; } }
/* Капсом, как подпись «Гардероб · Погода · Повод», но мельче — чтобы обе ссылки встали в одну строку */
.actions-hero .actions-sub .btn { text-transform: uppercase; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; }
@media (max-width: 400px) { .actions-hero .actions-sub .btn { font-size: 9px; letter-spacing: 0.08em; } .actions-hero .actions-sub .btn + .btn::before { margin: 0 7px; } }
@media (max-width: 370px) { .actions-hero .actions-sub .btn { font-size: 8.5px; letter-spacing: 0.05em; } .actions-hero .actions-sub .btn + .btn::before { margin: 0 6px; } }
/* Компьютер: справа от QR-кода — подпись и «Попробовать без входа», вместе по высоте кода */
.hero-qr { align-items: stretch; }
.qr-side { height: 88px; display: flex; flex-direction: column; justify-content: space-between; padding: 2px 0; }
.qr-side span { font-size: 14px; line-height: 1.4; }
.qr-side a { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.qr-side a:hover { text-decoration: underline; text-underline-offset: 5px; }
.actions-hero .actions-sub[hidden] { display: none; }

/* Строка ссылок под главной кнопкой — ближе к кнопке */
.actions-hero .actions-sub { margin-top: 6px; }
/* Закреплённая кнопка не должна закрывать последние строки подвала */
@media (max-width: 899px) { body:has(.sticky-cta) { padding-bottom: 96px; } }
footer .fine .req { font-size: 12px; margin-top: 6px; }

/* Пригласите подруг (23.10.2026): плашка для пришедших по ссылке inv_… и блок на тарифах. */
.invite-banner { background: var(--ink); color: var(--paper); padding: 14px 0; }
.invite-banner .wrap, .invite-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.invite-banner .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.invite-cta { border: 1px solid var(--line); padding: 18px 22px; margin-top: 28px; }