/* Порождено из src/index.ts (cssFromTokens). Руками не править. */
:root {
  --color-bg: #F4F5F2;
  --color-surface: #FFFFFF;
  --color-ink: #15191C;
  --color-muted: #5A6168;
  --color-border: #D5D8D3;
  --color-border-soft: #E3E5E1;
  --color-primary: #2346D6;
  --color-primary-ink: #1D3FBF;
  --color-primary-dark: #1A35A6;
  --color-primary-tint: #E6EBFC;
  --color-on-primary: #FFFFFF;
  --color-ok-bg: #E2F3EA;
  --color-ok-ink: #0B6B47;
  --color-warn-bg: #FFF1DC;
  --color-warn-ink: #9A3C08;
  --color-bad-bg: #FCE7E5;
  --color-bad-ink: #A8231A;
  --color-mute-bg: #ECEEF0;
  --color-mute-ink: #4B5258;
  --font-family: 'Onest', system-ui, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-input: 17px;
  --font-size-brand: 18px;
  --font-size-h2: 22px;
  --font-size-h1: 26px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 14px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 28px;
  --size-tap-min: 44px;
  --size-field-h: 52px;
  --size-code-cell-h: 56px;
  --size-page-max: 440px;
}

/* Onest (SIL OFL 1.1, /fonts/LICENSE) — из @fontsource/onest, только woff2 */
/* onest-cyrillic-ext-400-normal */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/onest-cyrillic-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* onest-cyrillic-400-normal */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/onest-cyrillic-400-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* onest-latin-ext-400-normal */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/onest-latin-ext-400-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;
}

/* onest-latin-400-normal */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/onest-latin-400-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;
}
/* onest-cyrillic-ext-700-normal */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/onest-cyrillic-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* onest-cyrillic-700-normal */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/onest-cyrillic-700-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* onest-latin-ext-700-normal */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/onest-latin-ext-700-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;
}

/* onest-latin-700-normal */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/fonts/onest-latin-700-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;
}

/* Лендинг one.foodmarket.ua. Цвета, радиусы и шрифт — токены packages/tokens (идут первыми в том же файле).
   Приём страницы: синий первый экран, как заставка демо, и «отрывной чек» шагов (зубчатый край — из .slip демо). */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-lg);
  line-height: 1.5;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, figure, ol { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(1200px, 100% - 32px); margin-inline: auto; }
@media (min-width: 768px) { .wrap { width: min(1200px, 100% - 64px); } }

.skip { position: absolute; left: 16px; top: -100px; z-index: 10; padding: 10px 16px; border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); font-weight: 600; }
.skip:focus { top: 12px; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--size-field-h); padding: 0 26px;
  border-radius: var(--radius-md); border: 1.5px solid transparent;
  font-size: var(--font-size-lg); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.btn-solid { background: var(--color-primary); color: var(--color-on-primary); }
.btn-solid:hover { background: var(--color-primary-dark); }

/* ---------- первый экран ---------- */
.hero { position: relative; overflow: hidden; background: var(--color-primary); color: var(--color-on-primary); }
.hero :focus-visible { outline-color: #fff; }

.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: var(--font-size-brand); font-weight: 700; letter-spacing: -.01em; text-decoration: none; }
.brand .mark { width: 32px; height: 32px; color: rgba(255, 255, 255, .2); }
.bar-nav { display: flex; gap: 8px; }
.bar-link { display: inline-flex; align-items: center; min-height: var(--size-tap-min); padding: 0 14px; border-radius: var(--radius-sm); font-weight: 600; font-size: var(--font-size-md); text-decoration: none; }
.bar-link:hover { background: rgba(255, 255, 255, .12); }

.hero-copy { padding: 28px 0 36px; }
.hero-title {
  font-size: clamp(32px, 9vw, 60px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 700;
  text-wrap: balance;
}
/* две части заголовка: «без дзвінків і Viber —» и «усім постачальникам в один клік»; вторая всегда с новой строки */
.hero-title span { display: block; }
.hero-title span + span { margin-top: .08em; }
.hero-lead { margin-top: 20px; max-width: 36ch; font-size: 18px; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.hero-cta { display: grid; gap: 10px; margin-top: 28px; }
.hero .btn-solid { background: var(--color-surface); color: var(--color-primary-dark); }
.hero .btn-solid:hover { background: var(--color-primary-tint); }
.btn-line { border-color: rgba(255, 255, 255, .5); color: #fff; }
.btn-line:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.hero-note { margin-top: 16px; font-size: var(--font-size-base); color: rgba(255, 255, 255, .72); }

/* Телефоны: настоящие кадры демо в нашей рамке (чистый CSS/SVG, без чужих изображений); низ срезан краем экрана.
   Размеры внутри — в cqw (доля ширины экрана), поэтому рамка и статус-бар масштабируются вместе с кадром. */
.hero-phones { position: relative; height: 330px; margin-top: 34px; }
.phone {
  position: absolute; top: 0; margin: 0;
  container-type: inline-size;
  border: 7px solid #12151f; border-bottom: 0;
  border-radius: 42px 42px 0 0;
  background: #12151f;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 70px rgba(8, 20, 70, .45);
  transform-origin: 50% 100%;
}
/* кнопки сбоку — намёк */
.phone::before, .phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #12151f; }
.phone::before { left: -10px; top: 78px; height: 30px; box-shadow: 0 44px 0 #12151f; }
.phone::after { right: -10px; top: 100px; height: 52px; }
.phone-screen { position: relative; overflow: hidden; border-radius: 34px 34px 0 0; background: var(--phone-bg, var(--color-bg)); }
.phone-supplier { --phone-bg: #fff; }
.phone img { display: block; width: 100%; height: auto; }
/* статус-бар: время слева от «островка», значки справа; кадры светлые — иконки тёмные */
.phone-status { position: relative; display: flex; align-items: center; justify-content: space-between; height: 11.5cqw; padding: 0 7cqw 0 8cqw; color: #12151f; font-size: max(10px, 4cqw); font-weight: 600; letter-spacing: -.01em; }
.phone-time { width: 24cqw; font-variant-numeric: tabular-nums; }
.phone-island { position: absolute; left: 50%; top: 2.6cqw; width: 26cqw; height: 7cqw; margin-left: -13cqw; border-radius: 99px; background: #0a0c12; }
.phone-icons { display: flex; align-items: center; justify-content: flex-end; gap: .35em; width: 24cqw; }
.phone-icons svg { height: .78em; width: auto; fill: currentColor; }
.phone-icons .ic-battery { height: .85em; }
/* подпись роли над телефоном; сама подпись — настоящий текст, не декор */
.phone-role { position: absolute; left: 12px; bottom: 100%; margin-bottom: 8px; padding: 3px 10px; border-radius: 99px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.phone-supplier .phone-role { left: auto; right: 12px; }
/* закупівельниця сзади, постачальник спереди: у закупівельниці видны позиции и расчёт, у постачальника — его заказ */
.phone-buyer { left: 0; width: 60%; }
.phone-supplier { right: 0; top: 64px; width: 54%; z-index: 2; }

@media (min-width: 560px) {
  .hero-cta { display: flex; flex-wrap: wrap; }
  .hero-phones { height: 420px; }
  .phone-buyer { width: 300px; left: calc(50% - 280px); }
  .phone-supplier { width: 270px; right: auto; left: calc(50% - 20px); }
}

@media (min-width: 1024px) {
  .hero { min-height: min(860px, 100svh); display: flex; flex-direction: column; }
  .hero-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px; }
  .hero-copy { padding: clamp(48px, 9vh, 96px) 0 96px; }
  .hero-title { font-size: clamp(44px, 4.4vw, 62px); }
  .hero-lead { font-size: 20px; margin-top: 28px; }
  .hero-cta { margin-top: 36px; }
  .hero-phones { height: auto; align-self: stretch; min-height: 600px; }
  .phone { top: auto; bottom: 0; border-width: 8px; border-radius: 48px 48px 0 0; }
  .phone-screen { border-radius: 40px 40px 0 0; }
  .phone-buyer { width: 320px; left: 0; bottom: -40px; }
  .phone-supplier { width: 290px; left: 210px; bottom: -150px; }
}
@media (min-width: 1280px) {
  .phone-supplier { left: 230px; }
}

/* Один выход на сцену: телефоны поднимаются при загрузке */
@media (prefers-reduced-motion: no-preference) {
  .phone { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .phone-supplier { animation-delay: .12s; }
}
@keyframes rise { from { transform: translateY(48px); } to { transform: none; } }

.bar-anchor { display: none; }
@media (min-width: 1100px) { .bar-anchor { display: inline-flex; } }

/* ---------- общие для разделов ---------- */
main > section { padding: 72px 0 80px; }
@media (min-width: 1024px) { main > section { padding: 104px 0 112px; } }
.sec-head { display: grid; gap: 14px; }
.sec-head h2, .faq h2, .lead-copy h2, .who-card h2, .video-copy h2 { font-size: clamp(30px, 6vw, 50px); line-height: 1.04; letter-spacing: -.035em; font-weight: 700; text-wrap: balance; }
.sec-head p { max-width: 46ch; color: var(--color-muted); font-size: 18px; }
@media (min-width: 1024px) {
  .sec-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 32px; }
  .sec-head p { justify-self: end; font-size: 20px; }
}
.more-link { margin-top: 36px; font-size: var(--font-size-lg); font-weight: 600; }
.more-link a, .faq-list a, .legal a, .field-check a, .foot a { color: var(--color-primary-ink); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-warn-bg); color: var(--color-warn-ink); font-size: var(--font-size-sm); font-weight: 700; letter-spacing: 0; vertical-align: middle; white-space: nowrap; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 16px; height: 9px; border-left: 2.5px solid var(--color-ok-ink); border-bottom: 2.5px solid var(--color-ok-ink); transform: rotate(-45deg); }
.btn-ghost { border-color: var(--color-border); color: var(--color-ink); background: var(--color-surface); }
.btn-ghost:hover { border-color: var(--color-ink); }

/* ---------- как сейчас ---------- */
.pain { background: var(--color-surface); }
.pain-list { list-style: none; padding: 0; margin: 40px 0 0; display: grid; }
.pain-list li { padding: 22px 0; border-top: 1.5px solid var(--color-ink); }
.pain-list h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.pain-list p { margin-top: 8px; color: var(--color-muted); font-size: var(--font-size-md); max-width: 42ch; }
@media (min-width: 768px) { .pain-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
@media (min-width: 1024px) { .pain-list { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; } .pain-list li { padding-right: 8px; } }

/* ---------- как это работает: отрывной чек ---------- */
.route {
  position: relative;
  list-style: none; padding: 0; margin-top: 44px;
  background: var(--color-surface);
  counter-reset: step;
}
/* зубчатые края сверху и снизу, как у чека из демо */
.route::before,
.route::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; }
.route::before { top: -10px; background: radial-gradient(circle at 7px 10px, var(--color-surface) 7px, transparent 7.5px) 0 0 / 14px 10px repeat-x; }
.route::after { bottom: -10px; background: radial-gradient(circle at 7px 0, var(--color-surface) 7px, transparent 7.5px) 0 0 / 14px 10px repeat-x; }

.route-step { counter-increment: step; display: flex; flex-direction: column; gap: 10px; padding: 28px 20px; }
.route-step + .route-step { border-top: 1.5px dashed var(--color-border); }
.route-step h3 { display: grid; grid-template-columns: 34px 1fr; align-items: baseline; font-size: 19px; line-height: 1.25; letter-spacing: -.01em; font-weight: 700; }
.route-step h3::before { content: counter(step); color: var(--color-primary); font-size: 22px; font-variant-numeric: tabular-nums; }
.route-step p { padding-left: 34px; color: var(--color-muted); font-size: var(--font-size-md); line-height: 1.5; }

.frag { margin: 8px 0 0 34px; padding: 10px; border-radius: var(--radius-lg); background: var(--color-bg); }
.frag img { width: 100%; border-radius: var(--radius-md); }
.frag-tg { background: #DCE7D6; }

@media (min-width: 640px) and (max-width: 1023px) {
  .frag { max-width: 420px; }
}
@media (min-width: 1024px) {
  .route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; }
  .route-step { padding: 32px 24px 28px; }
  .route-step + .route-step { border-top: 0; border-left: 1.5px dashed var(--color-border); }
  .route-step h3 { display: block; min-height: 2.5em; }
  .route-step h3::before { display: block; margin-bottom: 14px; font-size: 40px; line-height: 1; letter-spacing: -.03em; }
  .route-step p { padding-left: 0; }
  .frag { margin: auto 0 0; }
}

/* ---------- возможности ---------- */
.features { background: var(--color-surface); }
.feat-list { list-style: none; padding: 0; margin: 40px 0 0; display: grid; }
.feat-list li { position: relative; padding: 16px 0 16px 34px; border-top: 1px solid var(--color-border-soft); font-size: 17px; font-weight: 600; line-height: 1.35; }
.feat-list li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 16px; height: 9px; border-left: 2.5px solid var(--color-primary); border-bottom: 2.5px solid var(--color-primary); transform: rotate(-45deg); }
.feat-soon { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 10px 24px; color: var(--color-muted); }
.feat-soon li { display: flex; align-items: center; gap: 10px; }
@media (min-width: 768px) { .feat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; } }
@media (min-width: 1024px) { .feat-list { margin-top: 56px; } }

/* ---------- магазины и поставщики ---------- */
.who-grid { display: grid; gap: 20px; }
.who-card { padding: 28px 22px; border-radius: var(--radius-lg); background: var(--color-surface); display: grid; gap: 14px; align-content: start; }
.who-card h2 { font-size: clamp(26px, 5vw, 38px); }
.who-card p { color: var(--color-muted); font-size: 17px; max-width: 48ch; }
.who-shops { border: 1.5px dashed var(--color-border); background: transparent; }
@media (min-width: 900px) { .who-grid { grid-template-columns: 1fr 1fr; gap: 24px; } .who-card { padding: 40px; } }

/* ---------- пилот ---------- */
.pilot-info { background: var(--color-surface); }
.pair { display: grid; gap: 16px; margin-top: 40px; }
.pair-box { padding: 26px 22px; border-radius: var(--radius-lg); display: grid; gap: 16px; align-content: start; }
.pair-box h2, .pair-box h3 { font-size: 21px; letter-spacing: -.01em; }
.pair-gets { background: var(--color-ok-bg); }
.pair-needs { background: var(--color-bg); }
@media (min-width: 768px) { .pair { grid-template-columns: 1fr 1fr; gap: 24px; } .pair-box { padding: 32px; } }

/* ---------- место под видео ---------- */
.video { background: var(--color-primary-tint); }
.video-box { display: grid; gap: 28px; align-items: center; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: var(--color-primary); display: grid; place-items: center; }
.video-play { width: 72px; height: 72px; border-radius: 50%; background: rgba(255, 255, 255, .16); position: relative; }
.video-play::after { content: ""; position: absolute; left: 29px; top: 22px; border-left: 22px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.video-copy { display: grid; gap: 16px; }
.video-copy h2 { font-size: clamp(26px, 5vw, 40px); }
.video-copy p { color: var(--color-muted); font-size: 17px; max-width: 46ch; }
@media (min-width: 900px) { .video-box { grid-template-columns: 1.1fr .9fr; gap: 56px; } }

/* ---------- вопросы ---------- */
.faq { background: var(--color-surface); }
.faq-grid { display: grid; gap: 28px; }
.faq-list details { border-top: 1px solid var(--color-border); }
.faq-list details:last-child { border-bottom: 1px solid var(--color-border); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2.5px solid var(--color-ink); border-bottom: 2.5px solid var(--color-ink); transform: rotate(45deg) translate(-3px, -3px); transition: transform .15s ease; }
.faq-list details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq-list p { padding: 0 0 20px; color: var(--color-muted); font-size: 17px; max-width: 60ch; }
@media (min-width: 1024px) { .faq-grid { grid-template-columns: 1fr 2fr; gap: 48px; } }

/* ---------- форма ---------- */
.lead-sec { background: var(--color-primary); color: var(--color-on-primary); }
.lead-grid { display: grid; gap: 28px; }
.lead-copy { display: grid; gap: 14px; align-content: start; }
.lead-copy p { color: rgba(255, 255, 255, .88); font-size: 18px; max-width: 40ch; }
.lead-copy .lead-note { font-size: var(--font-size-base); color: rgba(255, 255, 255, .72); }
.lead-box { background: var(--color-surface); color: var(--color-ink); border-radius: var(--radius-lg); padding: 24px 18px; box-shadow: 0 30px 70px rgba(8, 20, 70, .3); }
@media (min-width: 768px) { .lead-box { padding: 36px; } }
@media (min-width: 1024px) { .lead-grid { grid-template-columns: .8fr 1.2fr; gap: 64px; } .lead-copy { position: sticky; top: 32px; } }
.lead-copy :focus-visible { outline-color: #fff; }

.lead-form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > label, .field legend { font-size: var(--font-size-md); font-weight: 600; padding: 0; }
.opt { font-weight: 400; color: var(--color-muted); }
.field input[type=text], .field input[type=tel], .field input[type=email], .field select {
  width: 100%; height: var(--size-field-h); padding: 0 14px;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface);
  font: inherit; font-size: var(--font-size-input); color: var(--color-ink);
}
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-ink) 50%), linear-gradient(135deg, var(--color-ink) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus, .field select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-tint); }
.field-hint { font-size: var(--font-size-sm); color: var(--color-muted); }
.field-error { font-size: var(--font-size-sm); color: var(--color-bad-ink); font-weight: 600; }
.field-error:empty { display: none; }
.is-invalid input[type=text], .is-invalid input[type=tel], .is-invalid input[type=email], .is-invalid select { border-color: var(--color-bad-ink); }
.field-row { display: grid; gap: 18px; }
@media (min-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } }
.choice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.choice label { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; min-height: var(--size-tap-min); padding: 0 16px; border: 1.5px solid var(--color-border); border-radius: var(--radius-pill); font-weight: 600; font-size: var(--font-size-md); }
.choice input:checked + span { border-color: var(--color-primary); background: var(--color-primary-tint); color: var(--color-primary-ink); }
.choice input:focus-visible + span { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.is-invalid .choice span { border-color: var(--color-bad-ink); }
.field-check label { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; font-size: var(--font-size-md); line-height: 1.45; }
.field-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--color-primary); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { min-height: 65px; }
.btn-wide { width: 100%; }
.lead-box .btn-solid { background: var(--color-primary); color: var(--color-on-primary); }
.lead-box .btn-solid:hover { background: var(--color-primary-dark); }
.btn:disabled { opacity: .6; cursor: progress; }
.form-summary { padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-bad-bg); color: var(--color-bad-ink); font-weight: 600; font-size: var(--font-size-md); }
.form-summary[hidden] { display: none; }
.form-noscript { padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-warn-bg); color: var(--color-warn-ink); font-size: var(--font-size-md); }
.form-done { display: grid; gap: 12px; padding: 12px 0; }
.form-done h3 { font-size: 30px; letter-spacing: -.03em; }
.form-done p { font-size: 18px; color: var(--color-muted); }
.form-done[hidden], .lead-form[hidden] { display: none; }

/* ---------- подвал ---------- */
.foot { padding: 48px 0 40px; background: var(--color-bg); font-size: var(--font-size-md); color: var(--color-muted); border-top: 1px solid var(--color-border-soft); }
.foot-grid { display: grid; gap: 24px; }
.foot .brand { color: var(--color-ink); }
.foot .brand .mark { color: var(--color-primary); }
.foot-h { font-size: var(--font-size-md); color: var(--color-ink); margin-bottom: 6px; }
.foot-contacts p { margin: 0; }
.foot-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot-copy { font-size: var(--font-size-sm); }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.2fr 1fr 1fr; } .foot-copy { grid-column: 1 / -1; } }

/* ---------- внутренние страницы ---------- */
.topbar { background: var(--color-primary); color: var(--color-on-primary); }
.topbar :focus-visible { outline-color: #fff; }
.page-main { padding: 48px 0 80px; }
@media (min-width: 1024px) { .page-main { padding: 80px 0 112px; } }
.page-wrap { max-width: 880px; }
.page-short { min-height: 40vh; }
.page-title { font-size: clamp(32px, 7vw, 56px); line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
.page-lead { margin-top: 18px; font-size: 19px; color: var(--color-muted); max-width: 52ch; }
.page-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.pilot-cols { display: grid; gap: 32px; margin-top: 44px; }
.pilot-cols h2 { font-size: 22px; letter-spacing: -.01em; margin-bottom: 14px; }
.dashes { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; color: var(--color-muted); }
.dashes li { padding-left: 22px; position: relative; }
.dashes li::before { content: ""; position: absolute; left: 0; top: .75em; width: 12px; height: 2px; background: var(--color-bad-ink); }
.flow { margin: 0; padding-left: 1.4em; display: grid; gap: 12px; }
.flow li::marker { color: var(--color-primary); font-weight: 700; }
@media (min-width: 900px) { .pilot-cols { grid-template-columns: 1fr 1fr; gap: 48px; } }
.legal { font-size: 17px; line-height: 1.6; }
.legal-meta { margin-top: 14px; color: var(--color-muted); font-size: var(--font-size-md); }
.legal-draft { margin: 18px 0 28px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--color-warn-bg); color: var(--color-warn-ink); font-size: var(--font-size-md); }
.legal h2 { margin: 36px 0 12px; font-size: 24px; letter-spacing: -.02em; line-height: 1.2; }
.legal h3 { margin: 24px 0 8px; font-size: 19px; }
.legal p { margin: 0 0 14px; max-width: 70ch; }
.legal ul { margin: 0 0 16px; padding-left: 1.3em; display: grid; gap: 8px; max-width: 70ch; }
.legal-back { margin-top: 36px; }

/* ---------- поле телефона (@fmo/phone): страна слева, номер справа ---------- */
.phone-field { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.phone-cc { position: relative; display: inline-flex; align-items: center; height: var(--size-field-h); padding: 0 30px 0 12px; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); font-size: var(--font-size-input); white-space: nowrap; }
.phone-cc::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 2px solid var(--color-ink); border-bottom: 2px solid var(--color-ink); transform: rotate(45deg); }
.phone-cc select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.phone-cc:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-tint); }
.is-invalid .phone-cc { border-color: var(--color-bad-ink); }