/* Лендинг программы перепродавцов carliexpress.com — прототип, 2026-11-06. Один бренд с витриной carliexpress.ru
   (docs/design/carliexpress-reference.md, раздел 8): шапка на бумаге, два красных, как у образца: --t-band — полоса героя с белым чеком партнёра,
   свисающим с неё на тон, --t-accent — доход и кнопка; пять чернильных полос этапов; макет витрины партнёра из карточек-товаров витрины;
   нейтральные платформы --p-*; один шрифт Golos Text: 400 текст, 600 заголовки и кнопки, 700 знак, h1 и деньги.
   Шкала: отступы 4·8·16·32·64·128, шрифт 13·16·20·25·32·40·48·64, высоты кратны 8, радиусы 4·8·16. Значений вне шкалы в файле нет. */

@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(fonts/golos-text-cyrillic-wght-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(fonts/golos-text-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; }
@font-face { font-family: 'Golos Text'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(fonts/golos-text-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; }

:root {
  color-scheme: light;
  --s4: 4px; --s8: 8px; --s16: 16px; --s32: 32px; --s64: 64px; --s128: 128px;
  --f13: 13px; --f16: 16px; --f20: 20px; --f25: 25px; --f32: 32px; --f40: 40px; --f48: 48px; --f64: 64px;
  --lh20: 20px; --lh24: 24px; --lh28: 28px; --lh32: 32px; --lh40: 40px; --lh48: 48px; --lh64: 64px;
  --h24: 24px; --h32: 32px; --h40: 40px; --h48: 48px; --h56: 56px; --h64: 64px; --h96: 96px;
  --r4: 4px; --r8: 8px; --r16: 16px;
  --w-wrap: 1312px; --w-text: 640px; --w-check: 448px;
  --line: 1px; --line2: 2px;
  --p-paper: #FFFFFF;
  --p-ink: #191919;
  --p-ink-2: #575757;
  --p-ink-3: #8C8C8C;
  --p-line: #E4E4E4;
  --p-tone: #F4F4F4;
  --p-tone-2: #E9E9E9;
  /* Два красных, как на витрине carliexpress.ru: доход и кнопка #CC2114 (белый на нём 5,5:1), полоса #E8063F (белый на ней 4,64) */
  --t-accent: #CC2114;
  --t-accent-hover: #D44237;
  --t-on-accent: #FFFFFF;
  --t-band: #E8063F;
  --t-band-hover: rgba(255, 255, 255, .12);
  --t-on-band: #FFFFFF;
  --t-band-accent: #FFFFFF;
  --t-on-band-accent: #CC2114;
  /* Заливка полосы героя «Чистый закат» — та же, что на витрине (spikes/carliexpress/fills/A1.html, выбор владельца 2026-11-06):
     градиент от глубокого красного через полосу к яркому, коралловый свет за чеком, глубокий угол, зерно. Белый текст на градиенте не ниже 4,5:1 */
  --t-band-deep: #CC2114;
  --t-band-deeper: #B5120F;
  --t-band-bright: #FF2751;
  --t-band-corner: #A30F12;
  --t-band-corner-0: rgba(163, 15, 18, 0);
  --t-bloom: #FF6B57;
  --t-bloom-0: rgba(255, 107, 87, 0);
  --t-tint: #FAE9E8;
  --f-text: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --d-fast: 120ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --gutter: var(--s16);
  --hdr: var(--h56);
  --sec: var(--s32);
}
@media (min-width: 1024px) { :root { --gutter: var(--s32); --hdr: var(--h64); --sec: var(--s64); } }
@media (min-width: 1440px) { :root { --gutter: var(--s64); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--p-paper); scroll-padding-top: calc(var(--hdr) + var(--s16)); }
body {
  margin: 0;
  font: 400 var(--f16) / var(--lh24) var(--f-text);
  color: var(--p-ink);
  background: var(--p-paper);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
p, h1, h2, h3, dl, dd, dt, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: var(--line2) solid var(--p-ink); outline-offset: var(--line2); }
.band :focus-visible { outline-color: var(--t-on-band); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--s8); top: -100%; z-index: 100; background: var(--p-paper); color: var(--p-ink); padding: var(--s8) var(--s16); border-radius: var(--r8); }
.skip:focus { top: var(--s8); }
.wrap { width: min(var(--w-wrap), 100% - 2 * var(--gutter)); margin-inline: auto; position: relative; }
@media (max-width: 1023.98px) { .only-wide { display: none !important; } }
@media (min-width: 1024px) { .only-narrow { display: none !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } .btn:active, .btn2:active { transform: none; } }

/* ——— Деньги: Golos Text 700, табличные цифры, разряды узким пробелом ——— */
.money { font-size: var(--f48); line-height: var(--lh48); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.money .g, .money .u { margin: 0; }

/* ——— Знак и шапка на бумаге. Знак — logo.svg витрины (слово контурами Golos Text 700 в одной краске #CC2114, контуры варианта L5 листа
   spikes/carliexpress/logo/sheet.html); высота знака равна размеру шрифта слова: 25 на телефоне, 32 на ≥ 1024 ——— */
.mark { display: inline-flex; align-items: center; height: var(--h48); text-decoration: none; }
.mark img { height: var(--f25); width: auto; }
.hdr { position: sticky; top: 0; z-index: 50; background: var(--p-paper); border-bottom: var(--line) solid var(--p-line); }
.hdr-in { height: var(--hdr); display: flex; align-items: center; justify-content: space-between; gap: var(--s16); }
.hnav { display: flex; flex: 1 1 auto; gap: var(--s32); margin-left: var(--s16); }
.hnav a { display: inline-flex; align-items: center; height: var(--h48); color: var(--p-ink-2); text-decoration: none; white-space: nowrap; }
.hnav a:hover { color: var(--p-ink); }
.hlink { display: inline-flex; align-items: center; height: var(--h48); padding: 0 var(--s8); font-weight: 600; text-decoration: none; border-radius: var(--r8); white-space: nowrap; }
.hlink:hover { background: var(--p-tone); }
@media (min-width: 1024px) { .mark img { height: var(--f32); } }

/* ——— Герой: красная полоса — элемент сетки, белый чек свисает с неё на тон ровно на 64 (на телефоне полоса заходит на чек на 128).
   Текст полосы — её потомок, поэтому контраст считается от красного. Строка о компании — серым на тоне под полосой, как на витрине:
   на широком в 64-px ряду слева от чека, на телефоне под чеком. ——— */
.hero { position: relative; overflow: hidden; background: var(--p-tone); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
.band { grid-column: 1; grid-row: 1; position: relative; color: var(--t-on-band); }
/* Заливка полосы «Чистый закат», как на витрине: во всю ширину окна, слои снизу вверх — градиент, два блума, зерно.
   Градиент 100° от глубокого красного слева через красный полосы к яркому справа; коралловый свет — за правым верхним углом чека,
   глубокий — в левом нижнем углу. На телефоне коралл за правым верхним углом чека, глубокий — в левом верхнем углу под заголовком.
   Блумы плывут 60 с на 3 % и стоят при reduced-motion. */
.fill { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; overflow: hidden; isolation: isolate; background: var(--t-band-deep); }
.fill > * { position: absolute; inset: 0; }
.fill .g1 { background: linear-gradient(100deg, var(--t-band-deeper) 0%, var(--t-band-deep) 38%, var(--t-band) 72%, var(--t-band-bright) 100%); }
.fill .g2 { inset: -8%; background:
  radial-gradient(ellipse 36% 64% at 90% 24%, var(--t-bloom) 0%, var(--t-bloom-0) 62%),
  radial-gradient(ellipse 40% 60% at 0% 100%, var(--t-band-corner) 0%, var(--t-band-corner-0) 62%); }
@media (prefers-reduced-motion: no-preference) { .fill .g2 { animation: drift 60s ease-in-out infinite alternate; } }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(-3%, 3%); } }
.grain { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: var(--s128) var(--s128); mix-blend-mode: multiply; opacity: .35; }
@media (max-width: 1023.98px) {
  .fill .g1 { background: linear-gradient(165deg, var(--t-band-deeper) 0%, var(--t-band-deep) 55%, var(--t-band) 100%); }
  .fill .g2 { background:
    radial-gradient(ellipse 48% 30% at 100% 66%, var(--t-bloom) 0%, var(--t-bloom-0) 62%),
    radial-gradient(ellipse 60% 60% at 0% 0%, var(--t-band-corner) 0%, var(--t-band-corner-0) 62%); }
}
/* Замер контраста (spikes/carliexpress/fills/contrast-check.mjs): класс measure на <html> прячет текст, оставляя его место */
.measure [data-txt], .measure [data-txt] * { color: transparent !important; text-decoration-color: transparent !important; }
.hero-text { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: var(--s32) 0 var(--s128); }
.hero-text > * { width: 100%; }
.hero .check { grid-column: 1; grid-row: 2; position: relative; margin-top: calc(-1 * var(--s128)); }
.h1 { font-size: var(--f32); line-height: var(--lh40); font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.lead { margin-top: var(--s16); max-width: var(--w-text); text-wrap: pretty; }
/* На телефоне под кнопками 32 до чека, как под строкой героя на витрине; на широком чек стоит в своей колонке */
.actions { display: flex; flex-direction: column; gap: var(--s8); margin: var(--s16) 0 var(--s32); }
.terms { grid-column: 1; grid-row: 3; margin: var(--s16) 0 0; font-size: var(--f13); line-height: var(--lh20); color: var(--p-ink-2); text-wrap: pretty; }
.terms span + span::before { content: '·'; margin: 0 var(--s8); }
@media (min-width: 640px) { .actions { flex-direction: row; } }
@media (min-width: 1024px) {
  .hero-in { grid-template-columns: minmax(0, 1fr) var(--w-check); grid-template-rows: auto var(--s64); column-gap: var(--s64); }
  .band { grid-column: 1 / 3; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr) var(--w-check); column-gap: var(--s64); }
  .hero-text { grid-column: 1; justify-content: center; padding: var(--s32) 0; }
  .hero .check { grid-column: 2; grid-row: 1 / 3; margin-top: var(--s64); }
  .h1 { font-size: var(--f48); line-height: var(--lh48); }
  .lead { font-size: var(--f20); line-height: var(--lh28); }
  .actions { margin: var(--s32) 0 0; }
  .terms { grid-row: 2; align-self: center; margin: 0; white-space: nowrap; }
}
/* На 1024–1199 строке о компании не хватает ширины слева от чека (448 + 64), одной строкой она уходила под чек: две строки по 20 в ряду 64 */
@media (min-width: 1024px) and (max-width: 1199.98px) { .terms { white-space: normal; } }

/* Кнопки: 48, радиус 8; главная — красная заливка, вторая — белая с волосяной чёрной обводкой; на полосе главная белая с текстом цвета полосы, вторая — белая обводка */
.btn, .btn2 { display: inline-flex; align-items: center; justify-content: center; gap: var(--s8); height: var(--h48); padding: 0 var(--s32); border-radius: var(--r8); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.btn { background: var(--t-accent); color: var(--t-on-accent); }
.btn:hover { background: var(--t-accent-hover); }
.btn2 { background: var(--p-paper); box-shadow: inset 0 0 0 var(--line) var(--p-ink); color: var(--p-ink); }
.btn2:hover { background: var(--p-tone); }
.btn:active, .btn2:active { transform: scale(.98); }
.band .btn { background: var(--t-band-accent); color: var(--t-on-band-accent); }
.band .btn:hover { background: var(--t-tint); }
.band .btn2 { background: none; box-shadow: inset 0 0 0 var(--line) var(--t-on-band); color: var(--t-on-band); }
.band .btn2:hover { background: var(--t-band-hover); }

/* Чек партнёра: строки суммы, доход — единственный красный на бумаге */
.check { background: var(--p-paper); color: var(--p-ink); border-radius: var(--r16); padding: var(--s32); }
.check-car { font-size: var(--f20); line-height: var(--lh28); font-weight: 600; }
.check-sub { margin-top: var(--s4); font-size: var(--f13); line-height: var(--lh20); color: var(--p-ink-2); }
.rows { margin-top: var(--s16); }
.row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s16); min-height: var(--h48); padding: var(--s8) 0; border-top: var(--line) solid var(--p-line); }
.row dt { color: var(--p-ink-2); text-wrap: pretty; }
.row dt small { display: block; font-size: var(--f13); line-height: var(--lh20); }
.row dd { flex: none; }
.row.sum dt, .row.sum dd { color: var(--p-ink); font-weight: 600; }
.row.sum { border-top: var(--line2) solid var(--p-ink); }
.gain { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s8) var(--s16); margin-top: var(--s16); padding-top: var(--s16); border-top: var(--line) solid var(--p-line); }
.gain dt { font-size: var(--f20); line-height: var(--lh28); font-weight: 600; }
.gain dd .money { color: var(--t-accent); }
.check-note { margin-top: var(--s16); font-size: var(--f13); line-height: var(--lh20); color: var(--p-ink-2); text-wrap: pretty; }

/* ——— Кому это подходит: лента на тоне сразу под полосой, продолжение серой зоны героя ——— */
.fit { background: var(--p-tone); padding: var(--s32) 0; }
.fit li h3 { font-size: var(--f16); line-height: var(--lh24); font-weight: 600; }
.fit li p { margin-top: var(--s4); font-size: var(--f13); line-height: var(--lh20); color: var(--p-ink-2); text-wrap: pretty; }
@media (min-width: 1024px) { .fit { padding: var(--s64) 0; } }

/* ——— Разделы на бумаге; одна серая лента — «Сколько стоит наша работа» ——— */
.sec { padding: var(--sec) 0; }
.sec.tone { background: var(--p-tone); }
.h2 { font-size: var(--f25); line-height: var(--lh32); font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; max-width: var(--w-text); }
.sub { margin-top: var(--s8); color: var(--p-ink-2); max-width: var(--w-text); text-wrap: pretty; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s16); margin-top: var(--s32); }
.fit .cols { margin-top: 0; }
.col h3 { font-size: var(--f20); line-height: var(--lh28); font-weight: 600; text-wrap: balance; }
.col p { margin-top: var(--s8); color: var(--p-ink-2); text-wrap: pretty; }
@media (min-width: 640px) { .cols { gap: var(--s32); } .cols.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .h2 { font-size: var(--f32); line-height: var(--lh40); }
  .cols { gap: var(--s32) var(--s64); }
}

/* Путь машины: пять отрезков одного цвета — чернила, это этапы, а не прогресс. На телефоне — чернильная рейка слева */
.path { margin-top: var(--s32); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s32); border-left: var(--s8) solid var(--p-ink); padding-left: var(--s16); }
.path .bar { display: none; }
.path h3 { font-size: var(--f20); line-height: var(--lh28); font-weight: 600; text-wrap: balance; }
.path p { margin-top: var(--s8); color: var(--p-ink-2); text-wrap: pretty; }
@media (min-width: 1024px) {
  .path { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s16); border-left: 0; padding-left: 0; }
  .path .bar { display: block; height: var(--s8); border-radius: var(--r4); background: var(--p-ink); margin-bottom: var(--s16); }
}

/* Цена программы: главная цифра страницы — чёрная, одной строкой, «+ 3 %» того же кегля светлее; красный остаётся доходу */
.fee { margin-top: var(--s32); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s32); }
.fee-line { display: flex; align-items: baseline; gap: var(--s16); white-space: nowrap; color: var(--p-ink); }
.fee-line .money { font-size: var(--f40); line-height: var(--lh40); }
.fee-line .plus { font-size: var(--f40); line-height: var(--lh40); font-weight: 400; letter-spacing: -0.01em; }
.fee .of { margin-top: var(--s4); color: var(--p-ink-2); }
.fee .note { margin-top: var(--s16); max-width: var(--w-text); color: var(--p-ink-2); text-wrap: pretty; }
.fee dl { max-width: var(--w-text); }
.fee .row { display: grid; grid-template-columns: var(--s128) minmax(0, 1fr); gap: var(--s16); align-items: baseline; }
.fee .row dd { text-wrap: pretty; }
@media (min-width: 1024px) {
  .fee { grid-template-columns: 7fr 5fr; gap: var(--s64); }
  .fee-line .money { font-size: var(--f64); line-height: var(--lh64); }
  .fee-line .plus { font-size: var(--f64); line-height: var(--lh64); }
}

/* ——— Калькулятор: выбранная машина — красная подложка с волосяной красной обводкой, ползунок красный ——— */
.calc-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s32); margin-top: var(--s32); }
@media (min-width: 1024px) { .calc-in { grid-template-columns: minmax(0, 1fr) var(--w-check); gap: var(--s64); align-items: start; } }
.lbl { display: block; font-weight: 600; margin-bottom: var(--s8); }
.seg { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s8); max-width: var(--w-text); }
.seg button { display: flex; align-items: center; justify-content: space-between; gap: var(--s16); height: var(--h64); padding: 0 var(--s16); border-radius: var(--r8); background: var(--p-paper); box-shadow: inset 0 0 0 var(--line) var(--p-line); text-align: left; transition: background-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); }
.seg .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.seg .v { flex: none; font-size: var(--f13); line-height: var(--lh20); color: var(--p-ink-2); }
/* На телефоне цена под названием: строка остаётся 64 (24 + 20 + поля 8), название не обрезается */
@media (max-width: 639.98px) { .seg button { flex-direction: column; align-items: stretch; justify-content: center; gap: 0; padding: var(--s8) var(--s16); } }
.seg button:hover { box-shadow: inset 0 0 0 var(--line) var(--p-ink); }
.seg button[aria-pressed="true"] { background: var(--t-tint); box-shadow: inset 0 0 0 var(--line) var(--t-accent); }
.mk { margin-top: var(--s32); }
.field { display: flex; align-items: center; gap: var(--s4); width: 100%; max-width: var(--w-text); height: var(--h48); padding: 0 var(--s16); margin-top: var(--s8); background: var(--p-paper); border-radius: var(--r8); box-shadow: inset 0 0 0 var(--line) var(--p-ink-3); cursor: text; }
.field:focus-within { box-shadow: inset 0 0 0 var(--line2) var(--p-ink); }
.field input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: none; padding: 0; font-weight: 600; font-size: var(--f16); }
.field .u { flex: none; color: var(--p-ink-2); }
.range { display: block; width: 100%; max-width: var(--w-text); height: var(--h48); margin: var(--s8) 0 0; background: none; -webkit-appearance: none; appearance: none; cursor: grab; }
.range:focus-visible { outline: none; }
/* Дорожка 4, бегунок 24 с белым кольцом: тонкий, как у образца, зона нажатия — весь контрол 48 */
.range::-webkit-slider-runnable-track { height: var(--s4); border-radius: var(--r4); background: linear-gradient(to right, var(--t-accent) 0 var(--fill), var(--p-tone-2) var(--fill) 100%); }
.range::-moz-range-track { height: var(--s4); border-radius: var(--r4); background: var(--p-tone-2); }
.range::-moz-range-progress { height: var(--s4); border-radius: var(--r4); background: var(--t-accent); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: var(--h24); height: var(--h24); margin-top: calc(-1 * (var(--h24) - var(--s4)) / 2); border-radius: 50%; background: var(--t-accent); box-shadow: 0 0 0 var(--line2) var(--p-paper); }
.range::-moz-range-thumb { width: var(--h24); height: var(--h24); border: 0; border-radius: 50%; background: var(--t-accent); box-shadow: 0 0 0 var(--line2) var(--p-paper); }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 var(--line2) var(--p-paper), 0 0 0 var(--s4) var(--p-ink); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 var(--line2) var(--p-paper), 0 0 0 var(--s4) var(--p-ink); }
.mk-ends { display: flex; justify-content: space-between; max-width: var(--w-text); font-size: var(--f13); line-height: var(--lh20); color: var(--p-ink-2); }
#calc .check { background: var(--p-tone); }
.source { margin-top: var(--s32); max-width: var(--w-text); font-size: var(--f13); line-height: var(--lh20); color: var(--p-ink-2); text-wrap: pretty; }

/* Кто мы: три колонки на волосяных линиях, без плиток */
.who { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s16); margin-top: var(--s32); }
.who li { padding-top: var(--s16); border-top: var(--line) solid var(--p-line); }
.who h3 { font-size: var(--f20); line-height: var(--lh28); font-weight: 600; text-wrap: balance; }
.who p { margin-top: var(--s8); color: var(--p-ink-2); text-wrap: pretty; }
@media (min-width: 640px) { .who { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s32); } }
@media (min-width: 1024px) { .who { gap: var(--s64); } }

/* ——— Витрина под вашим именем: макет витрины партнёра — строка с местом для логотипа и карточки-товары витрины carliexpress.ru
   (фото 4:3, цена красным, название, факты, строка доставки). На телефоне две карточки, на ≥ 640 три. ——— */
.shop { margin-top: var(--s32); background: var(--p-tone); border-radius: var(--r16); padding: var(--s16); }
.shop-bar { display: flex; align-items: center; gap: var(--s16); height: var(--h48); margin-bottom: var(--s16); }
.logo-slot { flex: none; display: inline-flex; align-items: center; height: var(--h32); padding: 0 var(--s8); border-radius: var(--r4); box-shadow: inset 0 0 0 var(--line) var(--p-ink-3); color: var(--p-ink-2); font-size: var(--f13); line-height: var(--lh20); font-weight: 600; white-space: nowrap; }
/* Поиск в макете — пилюля 32 с обводкой, как настоящий поиск витрины */
.shop-search { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; height: var(--h32); padding: 0 var(--s16); border-radius: var(--r16); background: var(--p-paper); box-shadow: inset 0 0 0 var(--line) var(--p-ink-3); color: var(--p-ink-2); font-size: var(--f13); line-height: var(--lh20); white-space: nowrap; overflow: hidden; }
.shop-city { flex: none; font-size: var(--f13); line-height: var(--lh20); font-weight: 600; white-space: nowrap; }
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8); }
.scard { background: var(--p-paper); border-radius: var(--r8); overflow: hidden; }
.scard img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--p-tone-2); }
.scard .sb { padding: var(--s8); }
.sprice { font-size: var(--f20); line-height: var(--lh24); font-weight: 700; letter-spacing: -0.01em; color: var(--t-accent); white-space: nowrap; }
.sttl { margin-top: var(--s4); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfacts, .sship { font-size: var(--f13); line-height: var(--lh20); color: var(--p-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sship { margin-top: var(--s4); }
@media (max-width: 639.98px) { .scard:last-child { display: none; } }
@media (min-width: 640px) {
  .shop { padding: var(--s32); }
  .shop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s32); }
  .scard { border-radius: var(--r16); }
  .scard .sb { padding: var(--s16); }
  .sprice { font-size: var(--f32); line-height: var(--lh32); }
}
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s16) var(--s32); margin-top: var(--s32); padding-top: var(--s32); border-top: var(--line) solid var(--p-line); }
.cta p { color: var(--p-ink-2); max-width: var(--w-text); text-wrap: pretty; }
@media (max-width: 639.98px) { .cta .btn, .actions .btn, .actions .btn2 { width: 100%; } }

/* ——— Подвал на бумаге ——— */
.ftr { border-top: var(--line) solid var(--p-line); font-size: var(--f13); line-height: var(--lh20); color: var(--p-ink-2); }
.ftr .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s16) var(--s32); padding: var(--s32) 0 calc(var(--s32) + env(safe-area-inset-bottom)); }
.ftr .mark { color: var(--p-ink); text-decoration: none; }
.ftr nav { display: flex; flex-wrap: wrap; gap: var(--s16) var(--s32); }
.ftr nav a { display: inline-flex; align-items: center; height: var(--h32); text-decoration: none; }
.ftr nav a:hover { color: var(--p-ink); text-decoration: underline; text-underline-offset: var(--s4); }
.ftr p { width: 100%; max-width: var(--w-text); text-wrap: pretty; }