/* Шрифты сайта empay — локально, без Google Fonts (docs/01-principles.md, «Сторонние ресурсы»).
   Inter и Manrope, переменная насыщенность (wght), подмножества latin, latin-ext, cyrillic.
   Источник: npm @fontsource-variable/inter 5.2.8 и @fontsource-variable/manrope 5.2.8; лицензия SIL OFL 1.1. */

/* Inter — cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/inter-cyrillic-wght-normal.woff2') format('woff2-variations'), url('/assets/fonts/inter-cyrillic-wght-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* Inter — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/inter-latin-ext-wght-normal.woff2') format('woff2-variations'), url('/assets/fonts/inter-latin-ext-wght-normal.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;
}

/* Inter — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2-variations'), url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Manrope — cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/fonts/manrope-cyrillic-wght-normal.woff2') format('woff2-variations'), url('/assets/fonts/manrope-cyrillic-wght-normal.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* Manrope — latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/fonts/manrope-latin-ext-wght-normal.woff2') format('woff2-variations'), url('/assets/fonts/manrope-latin-ext-wght-normal.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;
}

/* Manrope — latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/fonts/manrope-latin-wght-normal.woff2') format('woff2-variations'), url('/assets/fonts/manrope-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* empay — стили сайта. Эталон: prototype/index.html; токены: spec/design-tokens.json.
   Полоса-градиент за шапкой, обложка с чеком, два раздела продуктов, темный блок заявки. Одна светлая тема (бренд). */
:root {
  /* цвета и шрифты — из spec/design-tokens.json (подставляет build.mjs) */
  --ink: #0A2540;
  --ink-2: #425466;
  --ink-3: #5B6B82;
  --line: #E3E8EE;
  --bg: #FFFFFF;
  --bg-2: #F6F9FC;
  --accent: #533AFD;
  --accent-2: #635BFF;
  --accent-ink: #4B3FE8;
  --accent-soft: #F5F3FF;
  --accent-line: #DCD7FF;
  --night: #0A2540;
  --night-2: #13355A;
  --night-3: #061B31;
  --night-line: #2E4B70;
  --night-ink: #C4CCD8;
  --night-ink-2: #8FA0B5;
  --cyan: #00D4FF;
  --gold: #FFC46B;
  --ok: #0A7F55;
  --ok-soft: #E2F5EC;
  --crit: #C81E3E;
  --white: #FFFFFF;
  --shade: rgba(10, 37, 64, 0.55);
  --launch-scrim: rgba(10, 37, 64, 0.32);
  --input-border: #C9D1DB;
  --placeholder: #8A97A8;
  --focus-ring: #E6E3FF;
  --grad: linear-gradient(100deg, #635BFF 0%, #A960EE 38%, #FF6B9A 72%, #FFC46B 100%);
  --grad-d: linear-gradient(135deg, #635BFF 0%, #A960EE 40%, #FF6B9A 75%, #FFC46B 100%);
  --m-brand: #E8701F;
  --m-ink: #E0661A;
  --m-on: #4A2106;
  --m-grad: linear-gradient(135deg, #FF7A45 0%, #FFA24A 50%, #FFD15C 100%);
  --m-btn: linear-gradient(100deg, #FF8A4C 0%, #FFC24B 100%);
  --m-btn-2: linear-gradient(100deg, #FF7B36 0%, #FFB52E 100%);
  --m-soft: #FFF3E6;
  --m-soft-ink: #9A4A0C;
  --m-ring: #FFE0BF;
  --m-bg: #FFFCF7;
  --m-sel: #FFF8EF;
  --pp-bg: #EEF1F7;
  --pp-line: #E2E8F0;
  --pp-line-2: #CBD5E1;
  --pp-ink-2: #3F5470;
  --pp-ink-3: #56677F;
  --pp-field: #F7F9FC;
  --pp-button: #635BFF;
  --pp-button-hover: #5248F0;
  --chrome: #E4E9F1;
  --chrome-ink: #50627A;
  --chip: #EEEDFF;
  --acs: #1E2B40;
  --acs-ink: #F2F5FA;
  --acs-bg: #F0F3F8;
  --f-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-shop: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --band-h: clamp(170px, 17vw, 250px);
  --head-h: 72px;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink-2); font-family: var(--f-ui); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
h1, h2 { text-wrap: balance; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; border-radius: 6px; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: clamp(16px, 4.5vw, 40px); }
section[id] { scroll-margin-top: calc(var(--head-h) + 8px); }
.eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); }
.h2 { font-size: clamp(30px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 650; color: var(--ink); }
.lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: var(--ink-2); max-width: 36em; }

/* ---------- кнопки сайта ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; font-size: 16px; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .15s, transform .15s, box-shadow .15s; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--accent); color: var(--white); box-shadow: 0 10px 24px -12px rgba(83, 58, 253, 0.8); }
.btn-primary:hover { background: var(--accent-ink); transform: translateY(-1px); }
.btn-ghost { border-color: var(--input-border); color: var(--ink); background: var(--white); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-night { background: var(--night); color: var(--white); min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn-night:hover { background: var(--night-2); }

/* ---------- шапка и полоса ---------- */
.page { position: relative; }
.band { position: absolute; inset: 0 0 auto 0; height: var(--band-h); background: var(--grad); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 62%); pointer-events: none; }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; transition: background-color .2s, box-shadow .2s; }
.top .wrap { min-height: var(--head-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark { font-size: 30px; font-weight: 700; letter-spacing: -0.05em; color: var(--white); text-decoration: none; line-height: 1; transition: color .2s; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.top.solid { background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
.top.solid .wordmark { color: var(--accent); }
.lang { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--white); box-shadow: 0 6px 16px -10px rgba(10, 37, 64, 0.45); }
.top.solid .lang { box-shadow: inset 0 0 0 1px var(--line); }
.lang button { min-width: 44px; min-height: 38px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--night); color: var(--white); }

/* ---------- обложка ---------- */
.hero { padding-top: calc(var(--band-h) - var(--head-h) + 12px); padding-bottom: clamp(56px, 7vw, 104px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px clamp(40px, 5vw, 80px); align-items: start; }
.hero-text { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.hero h1 { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.03; letter-spacing: -0.045em; font-weight: 650; color: var(--ink); max-width: 12.5em; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.lead b { font-weight: 600; color: var(--ink); }
.ps-row { list-style: none; margin: 0; padding: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ps-plate { width: 68px; height: 44px; border: 1px solid var(--line); border-radius: 9px; background: var(--white); display: grid; place-items: center; box-shadow: 0 6px 14px -12px rgba(10, 37, 64, 0.5); }
.ps-plate img { display: block; max-width: 46px; max-height: 24px; width: auto; height: auto; }
.ps-plate.mc img { max-height: 30px; }
.ps-plate.up img { max-height: 28px; }
.ps-plate.uz img { max-width: 54px; }
.ps-plate.humo img { max-width: 50px; max-height: 30px; }
.receipt { margin-top: -120px; background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 24px; box-shadow: 0 30px 60px -12px rgba(50, 50, 93, 0.28), 0 18px 36px -18px rgba(0, 0, 0, 0.3); transform: rotate(1.2deg); display: flex; flex-direction: column; gap: 16px; }
.receipt-top { display: flex; justify-content: space-between; align-items: center; }
.receipt-top b { font-size: 19px; font-weight: 700; letter-spacing: -0.05em; color: var(--accent); }
.receipt-ok { display: flex; align-items: center; gap: 12px; }
.ok-ring { width: 44px; height: 44px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; flex: none; }
.ok-ring svg { width: 22px; height: 22px; }
.receipt-ok b { display: block; font-size: 18px; font-weight: 650; color: var(--ink); line-height: 1.2; }
.receipt-ok span { font-size: 14px; color: var(--ink-3); }
.kv-list { display: grid; gap: 9px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; }
.kv-list div { display: flex; justify-content: space-between; gap: 12px; }
.kv-list span { color: var(--ink-3); }
.kv-list b { color: var(--ink); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.receipt-more { display: none; }
.fiscal { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 12px; border-radius: 12px; background: var(--bg-2); border: 1px dashed #CCD5E0; font-size: 13px; font-variant-numeric: tabular-nums; }
.fiscal-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fiscal-h b { font-size: 13px; font-weight: 650; color: var(--ink); }
.fiscal-h span { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.fiscal-item { display: flex; justify-content: space-between; gap: 12px; color: var(--ink); }
.fiscal-item small { display: block; color: var(--ink-3); font-size: 12px; }
.fiscal-item b { font-weight: 600; white-space: nowrap; }
.fiscal-row { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-3); }
.fiscal-row b { color: var(--ink); font-weight: 600; white-space: nowrap; }
.fiscal-row.tot { padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 650; }
.fiscal-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; padding-top: 8px; border-top: 1px dashed #CCD5E0; font-size: 11.5px; color: var(--ink-3); }
.fiscal-meta span:nth-child(even) { text-align: right; color: var(--ink-2); overflow-wrap: anywhere; }

/* ---------- продукты: оплата на странице empay и с привязанных карт ---------- */
.product { padding-block: clamp(64px, 8vw, 112px); border-top: 1px solid var(--line); }
.product.alt { background: var(--bg-2); }
.product .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.product-head { display: flex; flex-direction: column; gap: 12px; min-width: 0; position: sticky; top: calc(var(--head-h) + 32px); }
.product-body { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
/* шаги — настоящая последовательность: номер в круге и линия к следующему шагу */
.flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.flow-step { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 18px; padding-bottom: 26px; }
.flow-step:last-child { padding-bottom: 0; }
.flow-step:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 40px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--accent-line); }
.flow-num { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--white); font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; box-shadow: 0 8px 18px -10px rgba(83, 58, 253, 0.8); }
.flow-txt { display: flex; flex-direction: column; gap: 4px; padding-top: 5px; min-width: 0; }
.flow-ttl { font-size: 18px; line-height: 1.35; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.flow-dsc { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); max-width: 34em; }
.facts { list-style: none; margin: 0; padding: 24px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.facts li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.facts svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--accent); }

/* ---------- заявка ---------- */
.apply { position: relative; overflow: hidden; padding-block: clamp(64px, 8vw, 120px); background: var(--night); }
.apply::before { content: ""; position: absolute; top: 0; right: 0; width: min(46vw, 660px); height: min(28vw, 400px); background: var(--grad-d); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.apply .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 48px 72px; align-items: center; }
.apply-text { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.apply .eyebrow { color: var(--cyan); }
.apply h2 { font-size: clamp(32px, 4vw, 54px); line-height: 1.05; letter-spacing: -0.04em; font-weight: 650; color: var(--white); }
.apply .lead { color: var(--night-ink); }
.form-card { background: var(--white); border-radius: 20px; padding: clamp(22px, 2.6vw, 36px); box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.55); min-width: 0; }
.form-card h3 { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 650; color: var(--ink); }
.form { display: flex; flex-direction: column; gap: 22px; }
.fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.fields .full { grid-column: 1 / -1; }
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f label { font-size: 14px; font-weight: 600; color: var(--ink); }
.f label .opt-l { font-weight: 400; color: var(--ink-3); white-space: nowrap; }
.f input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--white); font: inherit; font-size: 16px; color: var(--ink); }
.f input::placeholder { color: var(--placeholder); }
.f input:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--focus-ring); }
.f input[aria-invalid="true"] { border-color: var(--crit); }
.f .err { font-size: 13px; color: var(--crit); min-height: 0; }
/* поля в одной строке стоят на одной линии, даже если подпись соседа переносится на две строки */
@supports (grid-template-rows: subgrid) {
  .fields .f { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px; }
  .fields .f label { align-self: end; }
}
.consent { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.consent a { color: var(--accent); }
.form-end { display: flex; flex-direction: column; gap: 12px; }
.submit { width: 100%; min-height: 54px; border: 0; border-radius: 12px; background: var(--accent); color: var(--white); font-size: 16px; font-weight: 600; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(83, 58, 253, 0.7); }
.submit:hover { background: var(--accent-ink); }
.submit:disabled { opacity: 0.7; cursor: progress; }
.form-error { font-size: 14px; line-height: 1.45; color: var(--crit); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.sent { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-block: 12px; }
.sent .ok-ring { width: 60px; height: 60px; }
.sent .ok-ring svg { width: 28px; height: 28px; }
.sent h3 { font-size: 26px; }
.sent p { color: var(--ink-2); }
.again { min-height: 46px; padding: 0 18px; border: 1px solid var(--accent-line); border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 15px; font-weight: 600; cursor: pointer; }

footer { background: var(--night-3); padding-block: 28px; }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.foot-l { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.foot-l b { font-size: 20px; font-weight: 700; letter-spacing: -0.05em; color: var(--white); }
.foot-l span { font-size: 14px; color: var(--night-ink-2); }
.foot-r { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-r a { font-size: 14px; color: var(--night-ink); }

/* ---------- классы вместо inline-стилей прототипа (CSP style-src 'self') ---------- */
.receipt-top .stamp { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hero .lead b { font-weight: 600; color: var(--ink); }

/* русский применяется скриптом: до применения страница скрыта не дольше 300 мс (boot.js) */
html.i18n-pending body { visibility: hidden; }
/* тексты политики на двух языках: показывается только текущий */
html[lang="en"] [data-lang-only="ru"], html[lang="ru"] [data-lang-only="en"] { display: none; }

/* ---------- служебные страницы: /privacy и 404 ---------- */
.page-simple .top { background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
.page-simple .wordmark { color: var(--accent); }
.page-simple .lang { box-shadow: inset 0 0 0 1px var(--line); }
.page-simple main { min-height: calc(100vh - var(--head-h) - 90px); padding-block: clamp(48px, 7vw, 96px); }
.doc-page { max-width: 760px; display: flex; flex-direction: column; gap: 20px; }
.doc-page h1 { font-size: clamp(32px, 4vw, 48px); line-height: 1.08; letter-spacing: -0.035em; font-weight: 650; color: var(--ink); }
.doc-page .lead { max-width: 40em; }
.doc-page .btn { align-self: flex-start; }
.prose { display: flex; flex-direction: column; gap: 14px; color: var(--ink-2); }
.prose h2 { font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 650; color: var(--ink); margin-top: 12px; }
.prose h3 { font-size: 18px; font-weight: 650; color: var(--ink); }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; }
.prose a { color: var(--accent); }
.nf-code { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); }

/* ---------- адаптив ---------- */
@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .receipt { margin-top: 0; max-width: 380px; width: 100%; justify-self: center; transform: rotate(1.5deg); }
  .product .wrap { grid-template-columns: minmax(0, 1fr); }
  .product-head { position: static; }
  .apply .wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .top .btn-night { display: none; }
  .hero-text { align-items: center; text-align: center; }
  .hero h1 { margin-inline: auto; }
  .hero .lead { margin-inline: auto; }
  .cta-row, .ps-row { justify-content: center; }
  .cta-row .btn { width: min(100%, 320px); }
  .receipt { transform: none; }
  .receipt:not(.open) .fiscal { display: none; }
  .receipt-more { display: inline-flex; align-self: center; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; }
  .receipt-more svg { width: 16px; height: 16px; transition: transform .2s; }
  .receipt.open .receipt-more svg { transform: rotate(180deg); }
}
@media (max-width: 560px) {
  :root { --head-h: 64px; }
  .wordmark { font-size: 26px; }
  .btn-night { padding: 0 14px; font-size: 14px; }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .ps-row { gap: 8px; }
  .ps-plate { width: 60px; height: 40px; }
  .ps-plate img { max-width: 42px; }
  .ps-plate.uz img { max-width: 48px; }
  .flow-ttl { font-size: 17px; }
}
@media (max-width: 400px) {
  .ps-row { gap: 6px; }
  .ps-plate { width: 56px; height: 38px; }
  .ps-plate img { max-width: 40px; }
  .ps-plate.humo img { max-width: 44px; max-height: 28px; }
  .ps-plate.uz img { max-width: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}