/* ============================================================
   ЦИФРОВАЯ ВИТРИНА. ВАРИАНТ 3, СОЕДИНЁННЫЙ (18 сентября 2026)
   Название продукта сменилось с «Витрины пополнений» на «Цифровую
   витрину» 18 сентября 2026 по решению владельца.
   Все классы с приставкой sd3-. Общий файл стилей и общие
   скрипты не тронуты ни одной строкой.

   Что соединено. Владелец выбрал из десяти вариантов первый и
   третий. Страница осталась третьим вариантом целиком, а первый
   экран взят из первого: чёрная зона со стеной света справа.
   Прежний первый экран третьего варианта (окно чужого сервиса,
   собранное вёрсткой) сохранён рядом целиком, страница
   storefront-d3-before.html и оформление storefront-d3-before.css.

   Имена перенесённых правил приведены к приставке этой страницы.
   Подсветка первого экрана называется sd3-hero-glow: короткое имя
   когда-то занимало пятно света в чёрном финале, самого финала на
   странице давно нет, а имя осталось разведённым.

   Замысел варианта ниже первого экрана не менялся. Витрина
   показана, а не описана словами, и один приём идёт в двух
   масштабах: ряд плиток каталога в разделе про товары и четыре
   маленьких экрана разной формы у четырёх способов подключения.
   Всё собрано вёрсткой, картинок нет ни одной. Ни названия игры,
   ни цены, ни чужого знака на макетах нет.

   Чего здесь нет. Схем из блоков и стрелок. Разделительных
   линий между разделами. Подзаголовков под заголовками. Цифр
   о компании. Своих слов: текст страницы стоит дословно.

   Цвета: оранжевый сайта #f16428 (переход от #f7743a),
   синий #12a5ff, волосяные и соединительные линии #E8E8E8.
   Размеры заголовков заданы общим файлом стилей с пометкой
   важности, поэтому здесь они не переопределяются вовсе.
   Основной текст везде ровно 17 точек, вводный абзац 19.
   ============================================================ */

/* ══ ПЕРВЫЙ ЭКРАН: СТЕНА СВЕТА ══════════════════════════════
   Перенесено из первого варианта без изменения замысла.
   Чёрная зона во всю ширину окна. Справа стоит стена обложек:
   четыре столбца значков сервисов, развёрнутых в перспективе и
   плывущих с разной скоростью. С 18 сентября 2026 стена стоит в
   той же колонке, что и остальные разделы страницы, и её правый
   край совпадает с правым краем содержимого. Движение сделано
   только оформлением, своего скрипта у первого экрана нет.
   ═══════════════════════════════════════════════════════════ */
.sd3-hero{
  position:relative;
  background:#000;
  /* Обрезка обязательна. На большом экране стена сидит в колонке
     страницы и за края не выходит, а вот на узком она ложится
     полосой под текстом и нарочно шире окна с обеих сторон. Без
     обрезки страница поехала бы вбок именно там. */
  overflow:hidden;
  isolation:isolate;
  display:flex;align-items:center;
  /* Шапка сайта лежит на том же чёрном, поэтому зона начинается
     прямо под ней и стыка не видно. */
  min-height:clamp(410px,40vw,545px);
  padding-block:clamp(40px,4.6vw,66px) clamp(52px,5.6vw,86px);
}

/* Подсветка за стеной: холодное пятно у планки панелей и
   тёплое понизу справа. Краёв у пятен нет. */
.sd3-hero-glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 62% at 74% 34%, rgba(56,104,182,.30), transparent 72%),
    radial-gradient(46% 48% at 90% 82%, rgba(241,100,40,.22), transparent 74%),
    radial-gradient(72% 54% at 18% 46%, rgba(48,86,156,.13), transparent 78%);
}

/* ── СТЕНА ОБЛОЖЕК ──────────────────────────────────────────
   Устройство стены взято целиком из состояния до правок, файл
   storefront-d3-before-wallfit.css: шесть столбцов, ширина до 900
   точек, прежняя перспектива, прежние маски, прежние скорости,
   прежний размер плитки. Владелец 18 сентября 2026 посмотрел на
   укрупнённые плитки в четыре столбца и сказал, что стало хуже.

   Из всей работы по стене оставлено ровно одно: закрепление
   положения, объяснение при самом правиле ниже.

   Промежуточные состояния лежат рядом целиком: прижатие к колонке
   в storefront-d3-before-overhang, вылет от сетки при пяти столбцах
   в storefront-d3-before-bigtiles, четыре крупных столбца в
   storefront-d3-before-restore. */
.sd3-wall{
  position:absolute;z-index:1;pointer-events:none;
  top:0;bottom:0;
  /* ЗАКРЕПЛЕНИЕ. Единственное, что осталось от правок 18 сентября 2026:
     стена больше не ездит при изменении ширины окна. Всё прочее в стене
     возвращено к исходному виду, владелец забраковал и укрупнение
     плиток, и уменьшение числа столбцов, и прижатие к колонке.

     Было right:-3%. Доля считалась от окна, поэтому чем шире окно, тем
     дальше стена уезжала вправо: на 1440 её правый край стоял на 1483,
     на 1920 уже на 1978, и от текста она отрывалась.

     Стало: вылет считается от колонки содержимого, приёмом глобуса с
     главной страницы (hero-globe-B.css, правило .hgB-globe). Число 763
     подобрано так, чтобы на 1440 правый край встал ровно туда же, где
     он стоял при доле, то есть на 1483: на этой ширине вид совпадает с
     исходным до точки.

     Нижним пределом оставлена прежняя доля минус 3%, а не число. Так
     на всех окнах уже 1440 стена стоит ровно там же, где стояла до
     правки, до точки: на 1280 за кромкой 38, на 1100 за кромкой 33,
     как и было. Число вместо доли давало бы там лишние пять до десяти
     точек вылета. А на окнах шире 1440 доля проигрывает второму
     слагаемому, и дальше работает уже привязка к колонке, поэтому
     убегать вправо стене нечем.

     Итого: уже 1440 всё как было, шире 1440 стена стоит. Ровно то,
     что просил владелец, и ничего сверх. */
  right:max(-3%, calc(50% - 763px));
  width:min(60%,900px);
  overflow:hidden;
  /* Поле растворяется со всех сторон, чтобы стена нигде не
     обрывалась ровной линией. Правый спад начат раньше прежнего:
     у светящихся панелей край был мягким сам по себе, а у картинки
     край жёсткий, и у самой кромки окна плитка резалась пополам. */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 16%, #000 44%, #000 78%, transparent 98%),
    linear-gradient(180deg, transparent 0%, #000 20%, #000 74%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 16%, #000 44%, #000 78%, transparent 98%),
    linear-gradient(180deg, transparent 0%, #000 20%, #000 74%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.sd3-wallin{
  position:absolute;inset:-22% -8%;
  display:flex;align-items:flex-start;
  gap:clamp(12px,1.2vw,20px);
  /* Разворот в перспективе: левые столбцы уходят от зрителя,
     правые выступают. Отсюда и разная резкость столбцов. */
  transform:perspective(1500px) rotateY(-24deg) rotateX(6deg) rotateZ(-3deg) scale(1.1);
  transform-origin:72% 50%;
}
/* Столбец. В каждом лежит свой набор значков, а следом тот же набор
   ещё раз. Поэтому шаг цикла это ровно половина высоты столбца, и
   стыка на обороте не видно ни при какой ширине окна: доля считается
   от самого столбца, а не от числа точек. Прежний шаг был записан
   числом (770 точек), с картинками разной высоты так уже нельзя. */
/* Ход. Скорость одна и та же от первого кадра до последнего (linear),
   иначе на обороте виден толчок. Столбец вынесен в отдельный слой и
   двигается только сдвигом, поэтому браузер гоняет его на видеокарте
   и не перерисовывает каждый кадр. Изнанка слоя погашена: без этого
   на развороте в перспективе по краю плитки шла рябь.
   Сама скорость снижена примерно до четверти сотни точек в секунду:
   на прежних сорока лента читалась как гонка. */
/* ТИХИЙ ЗАПУСК. Ход включается только когда страница готова и плитки
   первого экрана пришли: до этого столбцы стоят на месте и стена скрыта,
   иначе на старте виден рывок — браузер применяет стили с опозданием и
   сдвигает столбцы сразу на тысячи точек (правка 4 октября 2026). */
.sd3-wall{opacity:0;transition:opacity .7s ease}
.sd3-wall.sd3-gotovo{opacity:1}
.sd3-col{
  flex:1 1 0;min-width:0;
  animation:sd3-drift 260s linear infinite;
  animation-play-state:paused;
  /* Подсказку «буду двигаться» (will-change) убрали 4 октября 2026: в Safari
     она заставляет завести слой высотой в четырнадцать тысяч точек ещё до
     первой отрисовки, и на переходе со страницы виден рывок. Слой теперь
     заводится самим объёмным сдвигом, по месту и после запуска. */
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
/* Глубина. Размытия, обесцвечивания и притемнения самих столбцов
   здесь нет вовсе: владелец 18 сентября 2026 прочитал их как плохое
   качество, и он прав. Резкость важнее глубины. Картинка остаётся
   ровно такой, какой пришла, а заголовок разводится с ней двумя
   слоями поверх: затемнением слева и общей вуалью. Единственное,
   что осталось от глубины, это очень пологая разница прозрачности
   и разная скорость столбцов.
   Столбцов шесть, а не четыре: плитка родом 360 точек и должна
   стоять на экране вдвое мельче, иначе браузер её растягивает и
   мылит. На шести она выходит от 150 до 180 точек. */
.sd3-wall.sd3-gotovo .sd3-col{animation-play-state:running}
.sd3-col:nth-child(1){opacity:.74;animation-duration:296s;animation-delay:-113s}
.sd3-col:nth-child(2){opacity:.80;animation-duration:260s;animation-delay:-231s;
  animation-direction:reverse}
.sd3-col:nth-child(3){opacity:.86;animation-duration:277s;animation-delay:-77s}
.sd3-col:nth-child(4){opacity:.91;animation-duration:238s;animation-delay:-194s;
  animation-direction:reverse}
.sd3-col:nth-child(5){opacity:.96;animation-duration:221s;animation-delay:-41s}
.sd3-col:nth-child(6){opacity:1;animation-duration:203s;animation-delay:-129s;
  animation-direction:reverse}

/* Значок сервиса. Картинки самодостаточны: у каждой свой фон, знак и
   подпись, подкладывать под них ничего не нужно. Ширина задаётся
   столбцом, высота считается сама по своим пропорциям, поэтому
   высокие и низкие плитки стоят в одном столбце без разрывов.
   Размеры проставлены в разметке, поэтому место под картинку
   занято ещё до её загрузки и столбец не дёргается. */
/* Пока обложка не пришла, от плитки не остаётся ничего: ни подложки, ни
   тени. Иначе стена сперва стоит сеткой светлых пустых прямоугольников и
   на глазах темнеет-светлеет по мере загрузки — владелец назвал это
   морганием (4 октября 2026). Пришедшая обложка проявляется сама. */
.sd3-col img{
  display:block;width:100%;height:auto;
  margin-bottom:18px;border-radius:14px;
  background:none;box-shadow:none;
  opacity:0;transition:opacity .45s ease;
  /* Плитка приходит вдвое крупнее, чем стоит на экране, и браузер
     обязан уменьшать её по-хорошему, а не ближайшей точкой. */
  image-rendering:auto;
}
.sd3-col img.sd3-prishla{
  opacity:1;
  background:rgba(255,255,255,.04);
  box-shadow:0 14px 34px rgba(0,0,0,.5);
}

@keyframes sd3-drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,-50%,0)}
}

/* Затемнение. Слева глухое, вправо сходит почти на нет. Здесь же
   теперь живёт и вся приглушённость стены: раньше она была размазана
   по самим столбцам размытием и обесцвечиванием, а картинку портить
   нельзя. Справа остаётся ровная вуаль в четырнадцать сотых: она
   снимает крикливость обложек, но резкости не трогает.
   Второй слой гасит низ зоны, чтобы стена растворялась в странице. */
.sd3-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  /* Числа вернулись к тому виду, в каком стояли до звёздного неба:
     18 сентября 2026 левая часть была ослаблена, чтобы сквозь неё было
     видно звёзды. Неба на странице больше нет, ослаблять нечего, и
     заголовок снова стоит на глухом чёрном. */
  background:
    linear-gradient(90deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.9) 24%, rgba(0,0,0,.6) 42%, rgba(0,0,0,.24) 58%, rgba(0,0,0,.14) 74%, rgba(0,0,0,.14) 100%),
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 70%, rgba(0,0,0,.86) 100%);
}

/* ── СТЫК С РАЗГОВОРНЫМ БЛОКОМ ──────────────────────────────
   Порог гасит низ зоны в глухое чёрное, чтобы стена не упиралась в
   границу резаной кромкой. Порог лежит выше стены и ниже текста,
   поэтому на буквы он не влияет.

   18 сентября 2026 порог был снят на время звёздного неба: он гасил
   бы вместе со стеной и звёзды, и небо рвалось бы полосой по стыку.
   Неба на странице больше нет, порог вернулся на место в прежнем виде. */
.sd3-hero::after{
  content:"";position:absolute;z-index:2;pointer-events:none;
  left:0;right:0;bottom:0;height:clamp(64px,7vw,104px);
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 82%, #000 100%);
}

.sd3-hero-in{position:relative;z-index:3;width:100%}
.sd3-hero-tx{max-width:min(52%,640px)}
.sd3-hero h1{
  margin:0;color:#fff;text-wrap:balance;
  /* Холодный отсвет по контуру: заголовок освещён тем же светом,
     что и стена, и не выглядит наложенным сверху. */
  text-shadow:0 0 80px rgba(120,175,255,.26);
}
/* Единственные 19 точек на странице: вводный абзац первого экрана.
   Приставка .sd3 обязательна, иначе общее правило страницы про
   17 точек перебивает эту строку по старшинству. */
.sd3 p.sd3-lead{
  margin:clamp(20px,2.2vw,30px) 0 0;
  font-size:19px;line-height:1.5;color:#a8a8a8;max-width:44ch;
}
.sd3-hero-btn{margin-top:clamp(34px,3.4vw,46px)}

/* Обложка товара в каталоге. Отвлечённая заливка, ни знака,
   ни надписи. Цвета взяты из палитры сайта, поэтому витрина
   выглядит оформленной, а не составленной из случайных картинок. */






/* Две обложки из пяти получают мягкий круг: ряд перестаёт быть
   набором одинаковых пятен. */


/* ══ ПОЛЕ ПЛИТОК ════════════════════════════════════════════
   Идёт сразу под первым экраном. Фон тот же чёрный, что и у
   зоны выше, поэтому белого разрыва между ними нет вовсе:
   чёрное течёт из первого экрана в поле и обрывается уже под
   ним, ровной чертой перед белым полотном.

   Устройство взято с главной страницы сайта: плитки разной
   ширины, часть белых, часть чёрных, одна цветная якорем.
   Сетка своя, в двенадцать долей: обычная плитка занимает
   четверть, широкая половину. Семь плиток ложатся двумя
   рядами без единой дыры, шесть плюс три плюс три сверху и
   три плюс три плюс три плюс три снизу.
   ═══════════════════════════════════════════════════════════ */




/* Строка стоит прямо под заголовком, как владелец её и задумал.
   На главной описание прижато к низу плитки, но там абзац в
   несколько строк и ряд закреплён по высоте; здесь строка одна,
   и от прижатия к низу в середине плитки зияла дыра.
   Высота плиток в ряду выравнивается сама, ряд держит самая
   высокая. */





/* Цвета плиток по своду сайта: карточки чисто белые либо чисто
   чёрные, оранжевая залита переходом сверху вниз. Тени тоже по
   своду: у тёмных 10 / 28 / 0,34, у белых 4 / 12 / 0,15. */







/* ══ БЕЛОЕ ПОЛОТНО ══════════════════════════════════════════
   Идёт во всю ширину окна, без скруглений и боковых полей. */
/* ══ ДВЕ СТОРОНЫ ═══════════════════════════════════════════════
   Оформление перенесено с черновой страницы storefront-pair-v1,
   оформление storefront-pair-v1.css, по решению владельца 18 сентября
   2026. Прежний вид пары (перечни с волосяными линиями между строками)
   убран целиком вместе со всеми своими правилами. Образец не тронут.

   Две плотные карточки рядом на чёрном полотне. Наша сторона чёрная,
   сторона партнёра белая. Разница в цвете и есть весь приём, поэтому
   внутри карточек нет ни линеек между строками, ни значков, ни рамок
   вокруг строк. Плотность даёт сжатый шаг перечня и небольшие поля.

   Почему белой стала именно сторона партнёра. Белая заливка на чёрном
   полотне бьёт сильнее всего, и отдать её короткому столбцу выгоднее.
   Тогда маленькая яркая карточка уравновешивает большую чёрную, и пара
   читается ровной. Если бы белым стал длинный столбец, он залил бы
   половину полотна, а чёрная карточка рядом с ним пропала бы совсем.

   Поля полотна те же, что были у прежней пары, поэтому стыки сверху и
   снизу не сдвинулись ни на точку. */
.sd3-sides{background:#000;padding:clamp(46px,5.4vw,88px) 0}

/* Длинному столбцу шире, короткому уже. На узком окне столбцы встают
   друг под друга, отдельная строка идёт за ними. */
.sd3-sides-pair{display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(20px,2.4vw,34px);
  align-items:start}

/* Одна геометрия на обе карточки. Рамка есть у обеих, чтобы коробки
   совпали до точки, но на белой она цвета самой заливки и не видна. */
.sd3-sides-card{display:flex;flex-direction:column;min-width:0;
  border-radius:26px;
  padding:clamp(24px,2.7vw,38px);
  border:1px solid transparent}

/* Наша сторона. Чёрная карточка на чёрном полотне теряет край, поэтому
   край нарисован волоском того же светлого тона, что и прочие
   соединительные линии сайта. Получается пара позитив и негатив: одна
   карточка светлым залита, вторая светлым обведена. */
.sd3-sides-card.is-us{background:#000;color:#f4f4f4;
  border-color:#E8E8E8;
  box-shadow:0 10px 28px rgba(0,0,0,.34)}
/* Сторона партнёра. Чистый белый, своя тень по своду. */
.sd3-sides-card.is-you{background:#fff;color:#1f2229;
  border-color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.15)}

/* Оранжевая метка, та же, что у прочих заголовков страницы. Заливка
   переходом сверху вниз, единый оранжевый. Одинаковая на обеих
   карточках, поэтому пара держится вместе. */
.sd3-sides-bar{display:block;width:38px;height:4px;border-radius:2px;
  background:linear-gradient(180deg,#f7743a,#f16428);
  margin:0 0 clamp(14px,1.6vw,20px)}

/* Заголовок второго уровня. Важность обязательна, иначе общий файл
   сайта перебьёт своим правилом. Переноса по слогам нет. */
.sd3-sides-h{margin:0 0 clamp(18px,2.1vw,28px);
  font-family:'Montserrat',sans-serif !important;
  font-weight:900 !important;
  font-size:clamp(26px,3.2vw,42px) !important;
  line-height:1 !important;
  letter-spacing:-.01em !important;
  text-transform:uppercase !important;
  font-style:normal !important;
  -webkit-hyphens:none !important;hyphens:none !important;
  overflow-wrap:break-word;word-break:normal}
.sd3-sides-card.is-us .sd3-sides-h{color:#fff}
.sd3-sides-card.is-you .sd3-sides-h{color:#1f2229}

/* Перечень. Основной кегль сайта, одна насыщенность на все строки.
   Ни жирного внутри строки, ни наклонного, ни маркеров. Шаг между
   строками сжатый, от этого карточка и читается плотной.
   Контраст в худшем случае: светло-серая строка на чёрном 14,4 к 1,
   тёмно-серая на белом 11,4 к 1, оба намного выше порога 4,5. */
.sd3-sides-list{list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;
  gap:clamp(12px,1.35vw,17px)}
.sd3-sides-list li{margin:0;padding:0;
  font-family:'Manrope',sans-serif;
  font-weight:400 !important;
  font-style:normal !important;
  font-size:17px;line-height:1.5;
  -webkit-hyphens:none;hyphens:none;
  overflow-wrap:break-word;word-break:normal}
.sd3-sides-card.is-us .sd3-sides-list li{color:#d6d6d6}
.sd3-sides-card.is-you .sd3-sides-list li{color:#3a3a3a}

/* Отдельная строка. Стоит под вторым столбцом, на самом полотне, а не
   внутри карточки. Слева оранжевая метка тем же переходом. */
.sd3-sides-note{grid-column:2;position:relative;
  margin:clamp(16px,1.8vw,22px) 0 0;
  padding:2px 0 2px clamp(16px,1.8vw,22px);
  font-family:'Manrope',sans-serif;
  font-weight:400 !important;
  font-style:normal !important;
  font-size:17px;line-height:1.5;color:#fff;
  -webkit-hyphens:none;hyphens:none;
  overflow-wrap:break-word;word-break:normal}
.sd3-sides-note::before{content:'';position:absolute;left:0;top:3px;bottom:3px;
  width:4px;border-radius:2px;
  background:linear-gradient(180deg,#f7743a,#f16428)}

/* Узкое окно: столбцы встают друг под друга, порядок чтения тот же. */
@media(max-width:860px){
  .sd3-sides-pair{grid-template-columns:minmax(0,1fr);
    gap:clamp(16px,2.8vw,22px)}
  .sd3-sides-note{grid-column:1}
}

/* Белого полотна на странице больше нет. Оно держало три раздела,
   способы подключения, расчёты и роли сторон. Первые два владелец
   18 сентября 2026 увёл на чёрное, третий убрал со страницы целиком,
   и полотно осталось пустым, поэтому снято вместе со своими правилами.
   Прежнее состояние лежит рядом, storefront-d3-before-noroles.html и .css. */

/* Оранжевая метка над заголовком раздела. Это знак, а не линия
   между разделами: линий между разделами на странице нет. */
.sd3-tick{display:block;width:38px;height:4px;border-radius:2px;
  background:#f16428;margin-bottom:clamp(13px,1.5vw,19px)}
.sd3-hh{margin:0 0 clamp(20px,2.4vw,32px)}
.sd3-hh h2{margin:0;color:#fff}

.sd3 p{font-size:17px;line-height:1.5}

/* ── ОРАНЖЕВАЯ ПОЛОСА С ДВУМЯ РАЗГОВОРНЫМИ РАЗДЕЛАМИ ────────
   Решение владельца 18 сентября 2026. Два разговорных раздела
   переехали из середины страницы под первый экран и получили
   оранжевое оформление. Прежнее их устройство (крупные карточки
   sd3-ask с вложенной карточкой текста и карточкой рисунка) убрано
   целиком вместе со всеми своими правилами, раздел не дублируется.

   Наклон карточек, решение того же дня. Карточки встали одна под
   другой, белая повёрнута влево, чёрная вправо. Прежняя ровная
   расстановка в линию сохранена целиком рядом, файлы
   storefront-d3-before-tilt.html и storefront-d3-before-tilt.css.
   Ещё раньше рядом лежит состояние до переезда разделов вообще,
   storefront-d3-before-orange.html и storefront-d3-before-orange.css.

   Замысел. Оранжевый взят не пятном у заголовка, а широкой полосой
   во всю ширину окна, переходом сверху вниз. Полоса работает
   подмостками: на ней лежат две карточки, одна чисто белая, вторая
   чисто чёрная, слева на самом оранжевом рисунок белым контуром.
   Сверху к полосе примыкает чёрный низ первого экрана, снизу чёрное
   поле плиток, поэтому оранжевый читается ударением между двумя
   чёрными полями.

   Почему на оранжевом нет ни строки текста. Замер: белый на #f7743a
   даёт 2,79 к 1, на #f16428 даёт 3,18. Порог для текста 4,5, и на
   этом оранжевом он недостижим, а цвет сайта и кегль текста менять
   нельзя. Поэтому изменена раскладка цвета: весь текст живёт на
   чисто белом и чисто чёрном, где отношение 21 к 1, а оранжевый
   держит только рисунок (белый контур, 3,18 при пороге 3 для линий)
   и поля вокруг карточек.

   Побочная выгода. Чисто чёрная карточка на чёрном полотне не видна
   вовсе: тень на чёрном не проступает, а полутонов этому блоку не
   положено. На оранжевой полосе она читается сама собой, без единого
   серого. Промежуточных тонов в блоке нет ни одного.

   Что важно про сам поворот. Наклоняется только карточка: полоса,
   полотно и рисунок стоят ровно, иначе оранжевый край пошёл бы
   косиной и стык с чёрным читался бы браком. Поворот не меняет
   место, которое карточка занимает в раскладке, но меняет место,
   которое она закрывает на экране: для карточки шириной w и высотой
   h поворот на угол a прибавляет по горизонтали h*sin(a), по
   вертикали w*sin(a). При 2,4 градуса это около четырёх сотых от
   размера. Отсюда посчитаны поля полосы и зазор между карточками.
   ─────────────────────────────────────────────────────────── */

/* Полотно блока. Решение владельца 18 сентября 2026: оранжевой полосы
   здесь больше нет, под карточками то же чёрное, что и на первом
   экране, чтобы фон продолжался сверху без шва. Оранжевое ударение
   переехало на саму карточку, см. правило ниже.

   Своих полей сверху и снизу сверх собственного нутра полотно не
   берёт: воздух над ним даёт нижнее поле первого экрана, под ним
   верхнее поле поля плиток. Иначе на обоих стыках собирался бы
   двойной воздух. Нутро держит запас на поворот карточек. */
.sd3-talk{background:#000;position:relative;
  padding:clamp(34px,4vw,60px) 0}

/* РАСКЛАДКА С РИСУНКОМ ПОСЕРЕДИНЕ. Решение владельца 18 сентября 2026
   после показа трёх черновых раскладок (talk-w1, talk-w2, talk-w3).
   Выбрана третья. Прежняя диагональ (карточки по противоположным углам,
   пустота между ними) сохранена целиком рядом, storefront-d3-before-axis.html
   и storefront-d3-before-axis.css. Ещё раньше карточки стояли столбиком у
   правого края, это storefront-d3-before-diagonal.

   Как устроено. Карточки прижаты к противоположным краям колонки, между
   ними во всю высоту блока стоит рисунок и работает осью, вокруг которой
   стоит пара. Рисунок получает настоящее место, а не угол слева, как было
   в самом первом заходе. Обе карточки висят от общей верхней линии.

   Средняя колонка сужена до шести десятых. Причина не в красоте: на более
   широкой средней колонке боковые становятся узкими, и заголовок «Что это
   такое» ломается на две строки, а «Для кого» остаётся в одну. Карточки
   тогда расходятся по высоте ещё на строку заголовка.

   Низ карточек нарочно не выровнен, каждая стоит по своей высоте (368 и
   317 на 1440). Выравнивать пробовал: общая высота даёт оранжевой карточке
   полсотни точек пустоты снизу, а это ровно та беда, которую владелец уже
   забраковал, когда блок стоял на оранжевой полосе. К тому же карточки
   повёрнуты навстречу, и их нижние кромки всё равно идут под разными
   углами, ровной общей линии там не бывает в принципе. Поэтому разная
   высота читается двумя самостоятельными листами, а не сбитой вёрсткой.

   Содержимое поднято по слою: приём остался от прежних подложек этого
   блока, карточкам и рисунку он не мешает. */
.sd3-talk-row{display:grid;gap:clamp(20px,2.4vw,34px);
  align-items:start;position:relative;z-index:1}
@media(min-width:900px){
  .sd3-talk-row{grid-template-columns:minmax(0,1fr) minmax(0,.6fr) minmax(0,1fr)}
  /* Рисунок тянется на всю высоту строки, её задаёт самая высокая
     карточка. Своей высоты картинка не даёт, она вынута из потока. */
  .sd3-talk-art{align-self:stretch;min-height:0}
}

/* Рисунок стоит прямо на чёрном, контур в файле белый, это 21 к 1.
   Картинка вынута из потока намеренно: лежи она в потоке, её
   собственная высота задавала бы высоту строки и карточки тянулись
   бы под неё. */
.sd3-talk-art{position:relative;min-height:clamp(200px,20vw,280px)}
.sd3-talk-art img{position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain}

/* Карточки. Только два цвета, ни одного промежуточного тона.
   Тень висит на самой повёрнутой карточке, а не на ровной обёртке:
   так она поворачивается вместе с карточкой и остаётся тенью
   предмета, прижатой к его краям. Лежи она на обёртке, карточка
   уехала бы с тени и та читалась бы пятном сбоку. При 2,4 градуса
   смещение тени от отвеса меньше точки, поэтому свет по-прежнему
   читается верхним. */
.sd3-talk-card{--sd3-tilt:2.4deg;
  border-radius:28px;padding:clamp(20px,2.2vw,30px);
  display:flex;flex-direction:column;align-items:flex-start}
/* Обе карточки чисто белые, решение владельца 18 сентября 2026.
   Вторая была оранжевой с чёрным текстом: это понадобилось, когда
   полотно блока стало чёрным, а чисто чёрная карточка на чисто чёрном
   не видна вовсе. Теперь владелец убрал оранжевую заливку совсем.
   Оранжевого в разговорном блоке не осталось ни пятна.

   Различаются карточки только стороной наклона, поэтому и класс у
   второй теперь не про цвет, а про зеркало. */
.sd3-talk-card.is-white{background:#fff;color:#000;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  transform:rotate(calc(var(--sd3-tilt) * -1))}
.sd3-talk-card.is-mirror{transform:rotate(var(--sd3-tilt))}

.sd3-talk-card h2{margin:0 0 clamp(14px,1.5vw,20px);text-align:left}
.sd3-talk-card h2{color:#000}

/* Основной текст. Ровно семнадцать точек и полтора межстрочных,
   другого размера на странице нет. Перенос по слогам запрещён. */
.sd3-talk-card p{margin:0 0 clamp(12px,1.2vw,16px);
  font-size:17px;line-height:1.5;
  hyphens:none;-webkit-hyphens:none;overflow-wrap:break-word;word-break:normal}
.sd3-talk-card p:last-child{margin-bottom:0}

@media(max-width:899px){
  /* В один столбец рисунок уходит наверх, над обеими карточками: между
     ними он держит ось только в ряд, а в столбик встал бы клином между
     двумя разделами и разорвал бы чтение. Высота задана явно: картинка
     вынута из потока и сама высоты не даёт. */
  .sd3-talk-art{min-height:0;height:clamp(250px,80vw,330px);order:-1}
}
@media(max-width:680px){
  /* Наклон ослаблен вдвое. Причина не в красоте: на узком экране
     строка короткая, косина строки заметнее, и пара начинала
     читаться съехавшей, а не живой. Полностью убирать нельзя,
     иначе на телефоне наклона не останется вовсе. Заодно карточка
     сужена на запас поворота с каждой стороны, чтобы угол не
     подходил вплотную к краю окна. */
  .sd3-talk-card{--sd3-tilt:1.2deg;
    border-radius:22px;padding:18px;
    margin-left:10px;margin-right:10px}
}

/* ── ПЕРЕЧЕНЬ ТОВАРОВ РЯДОМ ПЛИТОК ──────────────────────────
   Строки утверждённого текста стоят подписями плиток каталога.
   Двоеточия перед перечнем нет: перечень оформлен видом. */




/* Правило строки под карточками снято: обеих таких строк на странице
   больше нет, владелец убрал их 18 сентября 2026. Воздух, который они
   держали, перешёл к тому абзацу, который остался, см. .sd3-money. */
.sd3-in{margin:0;color:#fff}

/* ══ ЧТО МОЖНО ОПЛАТИТЬ ═════════════════════════════════════════
   Решение владельца 18 сентября 2026. Здесь стояли два раздела, поле
   плиток категорий и «Что продаётся в витрине» с пятью значками, оба
   убраны вместе со всеми своими правилами. Вместо них перенесено
   устройство с черновой страницы storefront-cats-v4, оформление
   storefront-cats-v4.css. Образец не тронут.

   Раскладка снята с мозаики продуктов главной страницы: четыре столбца,
   семь плиток, широкая занимает два столбца, ряд закреплён по высоте.
   Сетка объявлена в двенадцать долей, обычная плитка занимает четверть,
   широкая половину. Дыр в сетке нет ни на одной ширине окна.

   Характер. Плитка целиком залита сеткой настоящих обложек сервисов от
   края до края. Поверх обложек лежит вуаль, плотная сверху, где стоит
   текст, и заметно прозрачнее внизу, где обложки видны в полную силу.
   Размытия нет нигде и быть не должно, текст разведён с картинками
   только затемнением.

   Одно отступление от образца. У него подложка плитки была #0c0c0c,
   почти чёрная, но не чёрная. По правилам сайта карточка бывает только
   чисто белой, чисто чёрной или оранжевой переходом, промежуточных
   тонов нет. Поэтому здесь ровно #000. На чёрном полотне разницы не
   видно, а правило соблюдено.

   Обложки приходят шириной 360 точек, а показываются не крупнее 150,
   то есть меньше половины своего настоящего размера. Число столбцов в
   сетке обложек выбирает сам браузер, минимальная доля 104 точки, и на
   любой ширине окна доля остаётся от 104 до 150 точек. */
.sd3-pay{background:#000;
  /* Плотность вуали и плотность подложки под текстом. Держатся
     здесь, чтобы обе степени были видны в одном месте. */
  --sd3-veil:.62;
  --sd3-veil-lo:.54;
  --sd3-veil-tx:.68;
  padding-block:clamp(30px,3.6vw,56px) clamp(46px,5.4vw,88px)}
.sd3-pay .sd3-hh{margin-bottom:clamp(20px,2.4vw,32px)}

.sd3-pay-grid{display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(12px,1.4vw,20px)}

/* Плитка. Три слоя лежат друг на друге, поэтому ей задан свой слоевой
   отсчёт: обложки внизу, вуаль над ними, текст сверху. Лишние обложки,
   не поместившиеся в высоту, обрезаются краем плитки. */
.sd3-pay-tile{position:relative;isolation:isolate;overflow:hidden;
  grid-column:span 3;min-width:0;
  display:flex;flex-direction:column;
  border-radius:26px;
  --sd3-pay-pad:clamp(22px,2.4vw,32px);
  padding:var(--sd3-pay-pad);
  min-height:clamp(210px,17vw,240px);
  background:#000;color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.34)}

/* ── ВУАЛЬ НА ВСЮ ПЛИТКУ ───────────────────────────────────────
   Владелец 18 сентября 2026: без вуали раздел пестрит, обложки
   спорят с текстом и кричат на весь экран. Вуаль возвращена, но
   не глухая: обложка узнаётся, знак сервиса читается, а цвет уходит
   на задний план.

   Плотность выбрана показом четырёх степеней подряд (0,30 / 0,45 /
   0,58 / 0,70 поверху). Первые две оставляли ту же пестроту, на
   последней пропадали тёмные знаки. Взята третья.

   Вуаль идёт переходом сверху вниз: под текстом плотнее, к низу
   плитки светлее, поэтому нижний ряд обложек остаётся живым. */
.sd3-pay-tile::before{content:'';position:absolute;inset:0;z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,var(--sd3-veil)) 0%,
    rgba(0,0,0,var(--sd3-veil)) 38%,
    rgba(0,0,0,var(--sd3-veil-lo)) 100%)}
.sd3-pay-w2{grid-column:span 6}

/* Высота ряда как в мозаике продуктов. Задано наименьшей высотой, а не
   жёсткой: если шрифт ещё не загрузился и текст занял больше места, он
   не обрежется. */
@media(min-width:1040px){
  .sd3-pay-tile{min-height:310px}
}

/* Чёрная плитка на чёрном полотне теряет собственный край, особенно
   вверху, где вуаль плотнее всего. Контур рисуем отдельным слоем поверх
   вуали, иначе она его закрывает. */
.sd3-pay-tile::after{content:'';position:absolute;inset:0;z-index:3;
  border:1px solid rgba(255,255,255,.16);
  border-radius:inherit;pointer-events:none}

/* ── СЛОЙ ОБЛОЖЕК ──────────────────────────────────────────────
   Плотная сетка без просветов, от края до края плитки. Пропорция 7 к 5
   выбрана средней между двумя настоящими пропорциями каталога (360 на
   282 и 360 на 186), так что ни логотип по бокам, ни подпись снизу не
   срезаются. */
.sd3-pay-art{position:absolute;inset:0;z-index:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  align-content:start;gap:0;line-height:0}
.sd3-pay-art img{display:block;width:100%;height:auto;
  aspect-ratio:7/5;object-fit:cover;object-position:center;
  border-radius:0}

/* ── ТЕКСТ И ЕГО ПОДЛОЖКА ──────────────────────────────────────
   Второе замечание владельца 18 сентября 2026: без общей вуали раздел
   пестрит и текст тонет в разноцветных картинках. Вуаль вернулась (см.
   правило .sd3-pay-tile::before выше), поэтому подложка под самим
   текстом больше не работает в одиночку и стала легче: было 0,92, стало
   0,68 поверх вуали 0,62. Вместе это 0,88, то есть почти та же плотность
   под буквами, что и прежде, но набранная двумя ровными слоями, а не
   одним пятном на светлой плитке.

   Подложка растянута до краёв плитки отрицательными полями, ровно на
   величину её собственного поля, и снизу сходит на нет, чтобы не
   обрываться чертой.

   Замер по снимку, а не по бумаге. Буквы сделаны прозрачными, дальше по
   каждому заголовку и каждой подписи взята самая светлая точка фона под
   ними. Худшее из четырнадцати мест: 14,3 к 1 на 1440 и 10,5 к 1 на 390
   при пороге 4,5. Самая светлая обложка (чисто белая) уходит под текстом
   в 32 из 255. */
.sd3-pay-tx{position:relative;z-index:2;display:flex;flex-direction:column;
  min-width:0;
  margin:calc(-1 * var(--sd3-pay-pad)) calc(-1 * var(--sd3-pay-pad)) 0;
  padding:var(--sd3-pay-pad) var(--sd3-pay-pad) clamp(20px,2.2vw,30px);
  border-radius:26px 26px 0 0;
  background:linear-gradient(180deg,
    rgba(0,0,0,var(--sd3-veil-tx)) 0,
    rgba(0,0,0,var(--sd3-veil-tx)) calc(100% - 34px),
    rgba(0,0,0,0) 100%)}
.sd3-pay-w2 .sd3-pay-tx{max-width:58%}

/* Свои правила насыщенности помечены важностью, иначе общий свод сайта
   их перебьёт. Значения те же, что у заголовков третьего уровня сайта.
   Переноса по слогам нет. */
.sd3-pay-tile h3{margin:0;
  font-family:'Montserrat',sans-serif !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  font-size:clamp(21px,1.68vw,29px) !important;
  line-height:1.08 !important;
  letter-spacing:-.01em !important;
  font-style:normal !important;
  -webkit-hyphens:none !important;hyphens:none !important;
  overflow-wrap:break-word;word-break:normal}
/* Подпись белая, а не серая. Это и есть та уступка, ради которой
   обложки стали видны: серому нужна плотность подложки 0,967, белому
   0,817, то есть вчетверо более светлая подложка. */
.sd3-pay-tile p{margin:clamp(12px,1.4vw,18px) 0 0;
  font-family:'Manrope',sans-serif;
  font-weight:400 !important;
  font-size:17px;line-height:1.5;
  font-style:normal;color:#fff;
  -webkit-hyphens:none;hyphens:none}

/* ── ШИРИНЫ ОКНА ───────────────────────────────────────────────
   Два столбца, широкая плитка занимает ряд целиком. Семь плиток дают
   ряд плюс три ряда по две, дыр нет. */
@media(max-width:1039px){
  .sd3-pay-tile{grid-column:span 6}
  .sd3-pay-w2{grid-column:span 12}
}
/* Один столбец. В двух узких плитках заголовок рвётся на четыре строки
   и плитка становится выше своего смысла, поэтому ниже этой ширины все
   плитки идут во всю ширину. Высота у них по тексту. */
@media(max-width:639px){
  .sd3-pay-tile,.sd3-pay-w2{grid-column:span 12}
  /* Наименьшая высота не снимается, как было у образца, а убавляется.
     Снятая совсем, она давала плитку по высоте текста, и полосы обложек
     под строкой не оставалось вовсе: обложки лезли под сам текст.

     Числа подобраны замером самой длинной плитки («Связь и мобильные
     сервисы», заголовок в три строки плюс три строки подписи). У неё до
     низа плитки остаётся 94 точки, поэтому хвост вуали здесь укорочен до
     76: текст целиком остаётся в плотной части, а под ним видна полоса
     обложек. */
  .sd3-pay-tile{min-height:250px}
  .sd3-pay-w2 .sd3-pay-tx{max-width:none}
}

/* ══ ЧЁРНОЕ ПОЛЕ КАТАЛОГА ═══════════════════════════════════
   Раздел про состав каталога ушёл с белого полотна на чёрное
   (решение владельца 18 сентября 2026), а под утверждённым
   текстом встали три полки с настоящими плитками сервисов.
   Снизу отступа нет вовсе: следом идёт чёрная полоса «Что
   берём на себя», и они стыкуются одним фоном без шва. */
/* Поле плиток теперь идёт прямо перед полем каталога, и оба чёрные.
   Пока между ними стояли разговорные разделы, собственное верхнее поле
   каталога работало на смену цвета. Теперь цвет не меняется, и два
   поля складывались в пустую чёрную полосу под сто восемьдесят точек.
   Своё поле каталог в этом соседстве не берёт: воздух даёт нижнее поле
   поля плиток, ровно столько же, сколько было до переезда разделов.
   Правило висит на соседстве и другие чёрные поля страницы не трогает. */
/* Перечень товаров переезжает на чёрное: подписи плиток светлеют,
   абзац под ними тоже. Сами обложки не трогаем, они отвлечённые
   и на чёрном держатся не хуже, чем на белом. */


/* Обложки перечня заметно уменьшены. На белом полотне они работали
   крупными плитками каталога, но на чёрном под ними встали полки с
   настоящими плитками сервисов, и пять больших цветных квадратов
   рядом с ними читались как неподгрузившиеся картинки. Теперь это
   небольшие метки при строках, а картинку в разделе несут полки. */


/* ── ПОЛКА СЕРВИСОВ ─────────────────────────────────────────
   Устройство взято со снимка, который дал владелец: крупная
   плитка слева во всю высоту поля и сетка мелких справа.
   Собрано своими средствами.

   Второй подписи под плиткой нет: у наших картинок название
   уже вписано внутрь, и подпись снизу написала бы его дважды.
   Кнопки «Ещё» нет: вести ей некуда. Чисел про размер каталога
   нет: их никто не подтверждал.

   Плитки разных полок разной формы (у игр обложка почти
   квадратная, у сервисов широкая), поэтому три поля подряд
   не выглядят одним ковром. Между полками воздух. */
/* Отступ сверху снят. Он отделял полки от перечня товаров, а перечень
   убран 18 сентября 2026 вместе с полем плиток. Теперь полки идут
   первыми в чёрном поле каталога, и этот отступ только протаскивался
   сквозь поле наружу, раздвигая стык с разделом «Что можно оплатить»
   на лишние семьдесят точек. */
/* Сетка в шесть столбцов: крупная плитка занимает два столбца и
   два ряда, мелкие заполняют остальное ровно, без единой дыры.
   Ниже число столбцов падает, и лишние плитки прячутся, чтобы
   ряд всегда заполнялся целиком. */
/* Семь столбцов, а не шесть: на шести крупная плитка выходила шире
   своих родных 360 точек, браузер её растягивал и мылил. На семи
   она встаёт примерно в 333 точки, то есть мельче исходника, а
   мелкая в 160, то есть вдвое мельче. Заодно в полку помещается
   одиннадцать сервисов вместо девяти. */
/* Крупная плитка заполняет свою клетку целиком. Разница пропорций
   между клеткой и картинкой меньше процента (её даёт только зазор
   сетки), поэтому подрезать по сути нечего. */
/* ══ ЧЁРНАЯ ПОЛОСА: МЫ И ВЫ ═════════════════════════════════ */
/* Столбец партнёра стоит обведённой чёрной карточкой: строк в нём
   меньше, и без обводки он повисал бы рядом с длинным столбцом. */
/* ══ ЧЕТЫРЕ СПОСОБА ПОДКЛЮЧЕНИЯ ═════════════════════════════
   У каждого слева свой маленький экран. Форма экрана и есть
   объяснение: целая страница, панель внутри чужого окна, свои
   плитки поверх наших данных, переписка.

   ПОЛОТНО ЧЁРНОЕ, решение владельца 18 сентября 2026. Раздел ушёл с
   белого полотна, где стоял вместе с расчётами и ролями, на своё
   чёрное, как и всё остальное на этой странице. Прежнее состояние
   лежит рядом целиком, storefront-d3-before-blackways.html и .css.

   Тем же днём владелец увёл на чёрное и расчёты, поэтому полоса держит
   уже два раздела, способы подключения и модели расчётов. Имя у неё
   общее, sd3-black: это просто чёрное полотно страницы, как sd3-white
   было белым. Прежнее состояние лежит рядом,
   storefront-d3-before-blackmoney.html и .css.

   Воздух на стыках. Сверху к полосе примыкает чёрное поле «Что берём
   на себя» со своим нижним полем в 78 точек, поэтому своего верхнего
   полоса берёт немного: два поля складываются, и на чёрном граница
   между ними ничем не отмечена. Внутри полосы разделы разведены прежним
   нижним полем раздела способов, то есть расстояние между ними осталось
   таким же, каким было на белом полотне. Снизу поле полное, на нём
   стоит граница с чёрным финалом страницы.

   Нижнее поле последнего раздела снято: его держит сама полоса, иначе
   внизу собралось бы два поля подряд.

   Строки «Во всех вариантах используется единый каталог и одна система
   обработки заказов» под карточками больше нет, владелец убрал её
   18 сентября 2026. Своего поля она не оставила: отступ был её
   собственным верхним полем и ушёл вместе с ней. */
.sd3-black{background:#000;
  padding-block:clamp(22px,2.6vw,38px) clamp(46px,5.4vw,88px)}
.sd3-black .sd3-money{padding-bottom:0}
/* Карточки способов подключения остаются чисто белыми, карточки
   расчётов чисто чёрные. Заголовки белые по общему правилу страницы. */
.sd3-ways{padding-bottom:clamp(40px,4.6vw,72px)}
.sd3-ways-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,1.8vw,24px)}
.sd3-way{display:grid;
  grid-template-columns:clamp(150px,15vw,196px) minmax(0,1fr);
  gap:clamp(16px,1.8vw,26px);align-items:center;
  background:#fff;border:1px solid #E8E8E8;border-radius:26px;
  padding:clamp(20px,2.2vw,28px)}
.sd3-way h3{margin:0;color:#1f2229}
.sd3-way p{margin:clamp(10px,1.2vw,14px) 0 0;color:#3a3a3a}

/* Маленький экран. Вторая строка сетки забирает всю оставшуюся
   высоту, поэтому содержимое всегда стоит внутри рамки целиком и
   не срезается низом. */
.sd3-mini{position:relative;overflow:hidden;
  border:1px solid #E8E8E8;border-radius:12px;background:#fafbfc;
  aspect-ratio:16/11;padding:8px;
  display:grid;grid-template-rows:auto minmax(0,1fr);gap:7px}
.sd3-mini .mb{display:flex;align-items:center;gap:5px;
  padding-bottom:6px;border-bottom:1px solid #E8E8E8}
.sd3-mini .mm{width:12px;height:12px;border-radius:4px;background:#c4cad3;flex:none}
.sd3-mini .ml{height:5px;border-radius:3px;background:#dfe3e8;width:26px}
.sd3-mini .ml:last-child{width:17px}

/* ЦВЕТ У КВАДРАТИКОВ СНЯТ, решение владельца 18 сентября 2026. Прежде
   плитки внутри маленьких экранов были залиты оранжевым, синим,
   фиолетовым и жёлтым переходом. Владелец сказал: слишком ярко, они
   тянут внимание на себя и спорят с текстом карточки. Теперь это
   бледные светло-серые квадратики с чуть заметной обводкой, почти
   сливающиеся с белым полем карточки: макет читается схемой окна, а
   не набором цветных пятен.

   Один цвет оставлен нарочно: оранжевая обводка у выделенного окна во
   втором макете. Она несёт смысл, показывает нашу витрину внутри
   чужой страницы, и без неё второй макет ничем не отличается от
   первого. */
.m-page .mg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));gap:6px}
.m-page .mg i{display:block;border-radius:5px;
  background:#edf0f4;border:1px solid #dde2e9}

/* Встраиваемый модуль: витрина стоит панелью внутри чужой страницы,
   у панели оранжевая обводка. */
.m-mod .mrow{display:grid;grid-template-columns:20px minmax(0,1fr);
  gap:7px;min-height:0}
.m-mod .mrail{display:grid;gap:5px;align-content:start}
.m-mod .mrail i{display:block;height:5px;border-radius:3px;background:#dfe3e8}
.m-mod .mpanel{background:#fff;border:1.5px solid #f16428;border-radius:8px;
  padding:6px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));gap:5px}
/* Квадратики внутри выделенного окна тоже серые, цвет держит одна
   обводка панели. */
.m-mod .mpanel i{display:block;border-radius:4px;
  background:#edf0f4;border:1px solid #dde2e9}

/* Собственный интерфейс: слева наши данные, справа плитки партнёра,
   набранные одной обводкой, потому что рисует их он сам. */
.m-api .mrow{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
  gap:8px;min-height:0}
.m-api .mdata{background:#14181d;border-radius:8px;padding:8px;
  display:grid;gap:6px;align-content:center}
.m-api .mdata i{display:block;height:4px;border-radius:2px;
  background:rgba(255,255,255,.26)}
/* Две строки в тёмной панели были оранжевой и синей. Цвет снят,
   разницу между строками держит их яркость и длина. */
.m-api .mdata i:nth-child(2){width:72%;background:rgba(255,255,255,.52)}
.m-api .mdata i:nth-child(3){width:86%}
.m-api .mdata i:nth-child(4){width:58%;background:rgba(255,255,255,.42)}
.m-api .mdata i:nth-child(5){width:78%}
.m-api .mout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));gap:5px}
.m-api .mout i{display:block;border-radius:4px;
  background:#fff;border:1px solid #d9dde2}

/* Telegram-бот: витрина приходит карточкой в переписке. */
.m-bot{grid-template-rows:minmax(0,1fr);padding:9px}
.m-bot .mphone{width:46%;margin:0 auto;height:100%;box-sizing:border-box;
  background:#fff;border:1px solid #E8E8E8;border-radius:10px;
  padding:8px;display:grid;gap:6px;
  grid-template-rows:auto auto minmax(0,1fr) auto}
.m-bot .mbub{display:block;height:9px;border-radius:5px}
.m-bot .mbub.in{width:62%;background:#eceff2}
.m-bot .mbub.out{width:46%;margin-left:auto;background:#e3e7ec}
/* Карточка витрины в переписке была оранжевой. Тот же серый, что и у
   квадратиков в остальных трёх макетах. */
.m-bot .mcard{display:block;min-height:26px;border-radius:7px;
  background:#edf0f4;border:1px solid #dde2e9}
.m-bot .mkeys{display:block;height:8px;border-radius:4px;background:#e6e9ed;
  align-self:end}

/* ══ ДВЕ МОДЕЛИ РАСЧЁТОВ ════════════════════════════════════
   Раздел переехал на чёрное полотно, решение владельца 18 сентября 2026.
   Раскладка, кегль и текст не тронуты, изменились только цвета.

   Карточки чисто чёрные. На чёрном полотне такая карточка сама по себе
   не видна, а тень на чёрном не проступает, поэтому форму держит
   волосок белым с прозрачностью, тот же самый, что обводит плитки поля
   «Что можно оплатить». Промежуточных серых у карточек по-прежнему нет.

   Тона текста взяты те, что уже стоят на этой странице на чёрном:
   вводная строка белая, как первый абзац чёрного финала, текст внутри
   карточек 0xd6, как перечень чёрной карточки «Что берём на себя»,
   строки на самом полотне 0xb9, как остальной текст чёрного финала.
   Третьего серого не появилось.

   Порядковые знаки остались оранжевыми, это ударение раздела. */
.sd3-money{padding-bottom:clamp(40px,4.6vw,72px)}
.sd3-models{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,1.8vw,24px);margin-top:clamp(16px,1.8vw,22px)}
.sd3-model{background:#000;border:1px solid rgba(255,255,255,.16);
  border-radius:26px;
  padding:clamp(22px,2.4vw,32px)}
.sd3-ord{display:block;font-family:'Montserrat',sans-serif;font-weight:900;
  font-size:clamp(19px,1.8vw,25px);line-height:1;letter-spacing:-.01em;
  color:#f16428;margin-bottom:clamp(12px,1.4vw,18px)}
.sd3-model p{margin:0;color:#d6d6d6}
/* Абзац про рубли и закрывающие документы остался в разделе один и
   принял на себя то же верхнее поле, какое держала снятая строка.
   Поэтому под карточками воздуха ровно столько же, сколько было. */
.sd3-money>p:last-child{margin:clamp(24px,2.8vw,36px) 0 0;
  color:#b9b9b9;max-width:40em}

/* ══ ПРИЗЫВ ПЕРЕД ПОДВАЛОМ ══════════════════════════════════
   Оформление перенесено с главной страницы, секция id="cta" в index.html,
   правила .cta, .cta-actions и .blob в общем файле сайта. Общий файл
   трогать нельзя, поэтому значения повторены здесь под здешней
   приставкой, один в один: заливка, скругление из той же переменной
   сайта, поля, две колонки в отношении 1,3 к 1, зазор, круглое пятно в
   верхнем правом углу и колонка кнопок.

   Прежний здешний финал (чёрная полоса во всю ширину, оранжевое пятно
   света, заголовок слева, текст и кнопка справа) убран целиком вместе со
   всеми своими правилами. Прежнее состояние лежит рядом, файлы
   storefront-d3-before-ctamain.html и .css.

   Что пришлось привести к здешнему окружению. Ничего из замысла. Блок с
   главной и там стоит белой карточкой на чёрной странице, поэтому на
   витрине он лёг как родной. Своего полотна у блока нет вовсе, под ним
   видно чёрное самой страницы, как и на главной.

   Два наших абзаца встали в левый столбец под заголовок, в то место,
   которое на главной отведено вводной строке, и взяли её тон. Кегль у
   них здешний, ровно семнадцать точек: на главной вводная строка гуляет
   по ширине окна, а на этой странице весь основной текст одного размера.

   Размер заголовка свой не задан ни здесь, ни на главной: оба приходят
   из общего файла сайта, где второй уровень задан единым правилом. */
.sd3-cta-card{background:#fff;color:#141414;
  border-radius:var(--r);
  padding:clamp(34px,5vw,64px);
  display:grid;grid-template-columns:1.3fr 1fr;gap:36px;align-items:center;
  position:relative;overflow:hidden}
/* Круглое пятно чуть темнее заливки, уходит под срез карточки. */
.sd3-cta-blob{position:absolute;right:-60px;top:-60px;
  width:280px;height:280px;border-radius:999px;background:rgba(0,0,0,.06)}
.sd3-cta-tx{position:relative;z-index:1}
.sd3-cta-card h2{color:#141414}
.sd3-cta-tx p{margin:clamp(14px,1.5vw,20px) 0 0;color:#5a5a5a;max-width:46ch}
.sd3-cta-actions{position:relative;z-index:1;
  display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.sd3-cta-actions .btn{width:100%;justify-content:center}
/* Тот же порог, что и у блока на главной: ниже тысячи точек карточка
   становится в один столбец, кнопка уходит под текст. */
@media(max-width:1000px){
  .sd3-cta-card{grid-template-columns:1fr}
}

/* ══ ШИРИНЫ ═════════════════════════════════════════════════ */

/* ── УЗКИЙ НАСТОЛЬНЫЙ ЭКРАН ─────────────────────────────────
   Перенесено вместе с первым экраном: стена подбирается ближе,
   текстовая половина сужается. */
@media (max-width:1180px){
  .sd3-hero-tx{max-width:min(56%,560px)}
  .sd3-wall{width:min(62%,760px)}
}

@media(max-width:1099px){
  /* Четыре способа встают в один столбец: в двух маленький экран
     и заголовок начинают тесниться. */
  .sd3-ways-grid{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:1039px){
  /* Первый экран становится в один столбец. Стена перестаёт быть
     соседом текста: она ложится полосой света понизу зоны и
     наклоняется от зрителя. Так низ первого экрана не остаётся
     пустым чёрным полем, а заголовок стоит на чистом фоне.
     Здесь полоса света приподнята над нижним краем зоны, и гаснет
     она раньше: в первом варианте под ней шло ещё чёрное полотно
     с воздухом, а тут сразу начинается белое, и панели упирались
     в белую черту. Подъём и более ранний спад маски дают под
     светом полосу глухого чёрного, по которой и идёт граница. */
  .sd3-hero{min-height:0;align-items:flex-start;
    padding-bottom:clamp(176px,30vw,256px)}
  .sd3-hero-tx{max-width:640px}
  .sd3-hero::after{height:clamp(52px,6.4vw,84px)}
  /* На узком экране стена ложится полосой под текстом, вылета правее
     колонки ей не нужно вовсе: она и так нарочно шире окна и уходит
     за оба края. Закрепление здесь снимается обычными долями, как
     было всегда. */
  .sd3-wall{
    top:auto;bottom:clamp(34px,4.4vw,58px);left:-10%;right:-10%;width:auto;
    height:clamp(188px,32vw,296px);
    -webkit-mask-image:
      linear-gradient(180deg, transparent 0%, #000 34%, #000 62%, transparent 100%),
      linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
    mask-image:
      linear-gradient(180deg, transparent 0%, #000 34%, #000 62%, transparent 100%),
      linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%)}
  .sd3-wallin{inset:-34% -4%;
    transform:perspective(1200px) rotateX(17deg) rotateZ(-2deg) scale(1.08);
    transform-origin:50% 100%}
  /* На узком экране стена лежит полосой под текстом и с буквами не
     спорит, поэтому приглушать её незачем: все столбцы в полную силу
     и в полный цвет. */
  .sd3-col:nth-child(1),.sd3-col:nth-child(2),.sd3-col:nth-child(3),
  .sd3-col:nth-child(4),.sd3-col:nth-child(5),.sd3-col:nth-child(6){opacity:1}
  .sd3-hero-glow{background:
    radial-gradient(70% 42% at 52% 92%, rgba(56,104,182,.30), transparent 74%),
    radial-gradient(52% 32% at 82% 98%, rgba(241,100,40,.22), transparent 76%)}
  .sd3-scrim{background:
    linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 74%, rgba(0,0,0,.66) 100%)}


  /* Поле плиток: широкая занимает ряд целиком, остальные встают
     по две. Семь плиток это ряд плюс три ряда по две, дыр нет. */
}

/* ── ПОЛКА: ЧИСЛО СТОЛБЦОВ И ПЛИТОК ПО ШИРИНАМ ──────────────
   Крупная плитка всегда занимает два столбца и два ряда, значит
   мелких помещается ровно вдвое меньше, чем осталось столбцов.
   Лишние прячутся, поэтому ряд везде заполнен целиком и дыр в
   сетке не бывает ни на одной ширине. */
@media(max-width:1199px){
  /* шесть столбцов: крупная плюс восемь мелких */
}
@media(max-width:899px){
  /* пять столбцов: крупная плюс шесть мелких */
}
@media(max-width:559px){
  /* телефон: крупная во всю ширину, под ней четыре мелких по две */
}

@media(max-width:959px){
  /* Каталог товаров превращается в список витрины: квадрат слева,
     подпись справа. Пустых клеток в ряду при этом не остаётся. */
}

@media(max-width:759px){
  .sd3-models{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:639px){
  /* Плитки в один столбец: в двух узких заголовок рвётся на четыре
     строки и плитка становится выше своего смысла. */
  /* Маленький экран встаёт над текстом карточки. */
  .sd3-way{grid-template-columns:minmax(0,1fr);gap:clamp(14px,3vw,18px)}
  .sd3-mini{max-width:230px}
}

/* ── ТЕЛЕФОН ────────────────────────────────────────────────
   Перенесено вместе с первым экраном: полоса света уже и ниже,
   зона под неё отводит меньше места. */
@media (max-width:620px){
  .sd3-hero{padding-block:clamp(28px,5vw,40px) clamp(168px,44vw,188px)}
  .sd3-wall{left:-16%;right:-16%;height:clamp(178px,46vw,200px)}
  .sd3-hero-btn{width:100%;justify-content:center}
}

/* ══ ТИХИЙ РЕЖИМ ════════════════════════════════════════════
   Человек отключил движение в настройках: стена стоит на месте. */
@media (prefers-reduced-motion:reduce){
  .sd3-col{animation:none}
}

/* Врезка в разделе расчётов. Приём тот же, что у строки про
   инфраструктуру выше по странице, оранжевая черта слева и отступ.
   Курсива нет, кегль общий для страницы, 17 точек. */
.sd3-money>p.sd3-quote{position:relative;
  margin:clamp(18px,2vw,26px) 0 0;
  padding:2px 0 2px clamp(16px,1.8vw,22px);
  font-family:'Manrope',sans-serif;
  font-weight:400 !important;
  font-style:normal !important;
  font-size:17px;line-height:1.5;color:#fff;max-width:40em}
.sd3-quote::before{content:'';position:absolute;left:0;top:3px;bottom:3px;
  width:4px;border-radius:2px;
  background:linear-gradient(180deg,#f7743a,#f16428)}