/* ============================================================
   Главная страница.
   Длинная — потому что незнакомец приходит с десятком вопросов,
   и оставить их без ответа это ровно то, что делает короткая.
   ============================================================ */

.sr-home { padding-block-start: var(--s-7); }

/* ---------- полосы во всю ширину ---------- */

.sr-band {
  background: var(--c-sunk);
  border-block: var(--border);
  padding-block: var(--s-7);
  margin-block: var(--s-9);
}

.sr-band--call {
  background: var(--c-surface);
  margin-block-end: 0;
  padding-block: var(--s-9);
}

/* ---------- раздел ---------- */

.sr-sec { margin-block-end: var(--s-9); }

.sr-sec__head { max-width: 54ch; margin-block-end: var(--s-6); }

.sr-sec__head h2 {
  font-size: var(--t-3xl);
  margin: 0 0 var(--s-3);
}

.sr-sec__head p {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--t-lg);
}

/* ---------- герой ---------- */

.sr-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--s-8);
  align-items: center;
  margin-block-end: var(--s-8);
}

@media (max-width: 900px) {
  .sr-hero { grid-template-columns: 1fr; gap: var(--s-7); }
}

.sr-hero__title {
  font-size: var(--t-hero);
  margin: var(--s-4) 0 var(--s-5);
}

.sr-hero__sub {
  margin: 0 0 var(--s-6);
  color: var(--c-muted);
  font-size: var(--t-lg);
  max-width: 46ch;
}

.sr-hero__do {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin: 0 0 var(--s-6);
}

.sr-button--big {
  font-size: var(--t-base);
  padding: var(--s-4) var(--s-6);
}

.sr-callouts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--c-muted);
  max-width: 46ch;
}

.sr-callouts b { color: var(--c-text); font-weight: var(--fw-semi); }

/* ---------- доказательство: было и стало ---------- */

.sr-hero__proof { margin: 0; }

.sr-proof {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--c-line);
  border: var(--border);
}

.sr-proof__side {
  background: var(--c-surface);
  padding: var(--s-4);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--s-3);
}

.sr-proof__tag {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

.sr-proof__tag.is-out { color: var(--c-accent-text); }

/*
 * Оба окна — одинаковые квадраты.
 *
 * Прежде каждая картинка шла со своим соотношением: слева портрет 2:3, справа
 * квадрат. Правая половина оставалась наполовину пустой, и пара читалась как
 * две несвязанные картинки, а не как «до и после» одного товара.
 *
 * Квадрат выбран не ради симметрии. Справа — то, что покупатель получает:
 * витринный снимок 2000 × 2000. Он квадратный на самом деле, и обрезать его
 * ради красивой раскладки значило бы показать не то, что выдаёт машина. При
 * соотношении 1:1 он не теряет ни пикселя.
 *
 * Слева обрезается наше отображение стокового снимка — а это ничего не
 * обещает: принимаются снимки любой формы, и об этом сказано словами. Сдвиг
 * вниз (`object-position`) оставляет в кадре бутылку целиком: центральный
 * квадрат срезал бы ей донышко.
 */
.sr-proof__shot {
  aspect-ratio: 1 / 1;
  /* Иначе решётка растянет ячейку по высоте соседней — и квадрат перестанет
     быть квадратом, стоит одной подписи перенестись на вторую строку. */
  align-self: start;
  overflow: hidden;
  background: var(--c-sunk);
}

.sr-proof img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  display: block;
}

/* Выход не обрезается вовсе — он уже квадратный. */
.sr-proof__shot.is-out img { object-position: 50% 50%; }

.sr-hero__proof figcaption {
  margin-block-start: var(--s-3);
  font-size: var(--t-sm);
  color: var(--c-muted);
}

/* ---------- четыре числа ---------- */

.sr-numbers {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-6);
}

.sr-numbers li { display: flex; flex-direction: column; gap: var(--s-2); }

.sr-numbers b {
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-stretch: var(--fs-display-stretch);
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}

.sr-numbers b i {
  font-style: normal;
  font-size: 0.45em;
  color: var(--c-muted);
  margin-inline-start: 0.1em;
}

.sr-numbers span { color: var(--c-muted); font-size: var(--t-sm); }

.sr-numbers__note {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--t-sm);
  max-width: 62ch;
}

/* ---------- комплект ---------- */

/* ---------- зачем и как ---------- */

/*
 * Врезка «зачем». Слева розовая грань — единственное место на странице, где
 * говорится не что машина делает, а почему это вообще кому-то нужно.
 */
.sr-why {
  border: var(--border);
  border-inline-start: 2px solid var(--c-accent);
  background: var(--c-surface);
  padding: var(--s-6);
  margin-block-end: var(--s-8);
  max-inline-size: 68ch;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.sr-why__k {
  margin: 0;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-accent-text);
}

.sr-why p:not(.sr-why__k) {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--t-base);
  line-height: 1.7;
}

/*
 * Шаги. Раньше стояли решёткой в один ряд — четыре ячейки, коротко и не видно,
 * что одно следует за другим. Теперь столбцом, с рельсом слева.
 */
.sr-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-6);

  --dot: 46px;
}

/* Сам рельс: серая линия от середины первого кружка до середины последнего. */
.sr-flow::before,
.sr-flow::after {
  content: '';
  position: absolute;
  inset-inline-start: calc(var(--dot) / 2 - 1px);
  inline-size: 2px;
}

.sr-flow::before {
  inset-block: calc(var(--dot) / 2);
  background: var(--c-line);
}

/*
 * Розовая доля рельса. Высоту ставит скрипт по мере прокрутки; по умолчанию
 * ноль — не сработает скрипт, останется ровная серая линия, и раздел от этого
 * ничего не теряет.
 */
.sr-flow::after {
  inset-block-start: calc(var(--dot) / 2);
  block-size: var(--sr-fill, 0px);
  background: linear-gradient(
    to bottom,
    var(--c-accent),
    color-mix(in srgb, var(--c-accent) 45%, var(--c-line))
  );
  box-shadow: 0 0 10px color-mix(in srgb, var(--c-accent) 50%, transparent);
  transition: block-size 140ms linear;
}

.sr-flow__step {
  display: grid;
  grid-template-columns: var(--dot) 1fr;
  gap: var(--s-5);
  align-items: start;
}

.sr-flow__dot {
  inline-size: var(--dot);
  block-size: var(--dot);
  border-radius: var(--r-dot);
  border: 1px solid var(--c-line);
  background: var(--c-bg);
  display: grid;
  place-items: center;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.04em;
  color: var(--c-muted);
  position: relative;
  z-index: 1;
}

/* Кружок того шага, до которого дочитали. Метку вешает тот же скрипт. */
.sr-flow__step[data-at='on'] .sr-flow__dot {
  border-color: var(--c-accent-text);
  color: var(--c-accent-text);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-accent) 14%, transparent);
}

.sr-flow__card {
  background: var(--c-surface);
  border: var(--border);
  padding: var(--s-5) var(--s-6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}

/* Где в этот момент находится фотография. Это не украшение: весь смысл
   раздела в том, что до второго шага она не покидает телефон. */
.sr-flow__where {
  margin: 0;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

.sr-flow h3 {
  margin: 0;
  font-size: var(--t-xl);
  letter-spacing: var(--ls-tight);
}

.sr-flow__card > p {
  margin: 0;
  color: var(--c-muted);
  font-size: var(--t-base);
  line-height: 1.7;
  max-inline-size: var(--w-text);
}

.sr-flow__tag {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-accent-text);
  border: 1px solid color-mix(in srgb, var(--c-accent) 40%, transparent);
  padding: var(--s-2) var(--s-3);
  margin-block-start: var(--s-1);
}

@media (max-width: 640px) {
  .sr-flow { --dot: 36px; gap: var(--s-5); }
  .sr-flow__step { gap: var(--s-4); }
  .sr-flow__card { padding: var(--s-4); }
  .sr-flow h3 { font-size: var(--t-lg); }
  .sr-why { padding: var(--s-5); margin-block-end: var(--s-7); }
}

/* ---------- пределы ---------- */

.sr-halves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--c-line);
  border: var(--border);
}

.sr-half { background: var(--c-surface); padding: var(--s-6); }
.sr-half h3 { font-size: var(--t-xl); margin: 0 0 var(--s-4); }
.sr-half.is-good h3 { color: var(--c-ok); }
.sr-half.is-bad h3 { color: var(--c-error); }

.sr-half ul {
  margin: 0;
  padding-inline-start: var(--s-5);
  color: var(--c-muted);
  font-size: var(--t-sm);
}

.sr-half li { margin-block-end: var(--s-3); }

.sr-half__note {
  margin: var(--s-5) 0 0;
  font-size: var(--t-sm);
  color: var(--c-muted);
}

/* ---------- тарифы ---------- */

.sr-tiers {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--c-line);
  border: var(--border);
}

.sr-tier {
  background: var(--c-surface);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.sr-tier.is-pick { background: var(--c-hover); }

.sr-tier__price {
  margin: 0;
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  font-stretch: var(--fs-display-stretch);
  font-size: var(--t-2xl);
  line-height: 1;
}

.sr-tier__what { margin: 0; font-size: var(--t-sm); color: var(--c-muted); }
.sr-tier__what b { color: var(--c-text); }

.sr-tier__rate {
  margin: 0;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- вопросы ---------- */

.sr-faq { border: var(--border); }

.sr-faq__item { border-block-end: var(--border); background: var(--c-surface); }
.sr-faq__item:last-child { border-block-end: 0; }

.sr-faq__item summary {
  padding: var(--s-4) var(--s-5);
  cursor: pointer;
  font-weight: var(--fw-semi);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
}

.sr-faq__item summary::-webkit-details-marker { display: none; }

.sr-faq__item summary::after {
  content: '+';
  font-family: var(--f-mono);
  color: var(--c-accent-text);
  flex: none;
}

.sr-faq__item[open] summary::after { content: '−'; }
.sr-faq__item summary:hover { background: var(--c-hover); }

.sr-faq__answer {
  padding: 0 var(--s-5) var(--s-5);
  color: var(--c-muted);
  max-width: var(--w-text);
}

.sr-faq__answer p { margin: 0; }

/* ---------- призыв ---------- */

.sr-call { max-width: 54ch; }
.sr-call h2 { font-size: var(--t-3xl); margin: 0 0 var(--s-4); }
.sr-call p { color: var(--c-muted); font-size: var(--t-lg); margin: 0 0 var(--s-6); }

/* ---------- телефон ---------- */

@media (max-width: 640px) {
  /* Меньше пустоты над первым экраном: на телефоне она съедает половину
     того, что человек видит, не пролистывая. */
  .sr-home { padding-block-start: var(--s-5); }

  .sr-band { padding-block: var(--s-6); margin-block: var(--s-7); }
  .sr-sec { margin-block-end: var(--s-7); }

  /* «Было и стало» столбиком: в две колонки по 160 точек не видно ни того,
     ни другого, а вся суть этой пары именно в разглядывании. */
  .sr-proof { grid-template-columns: 1fr; }

  .sr-hero { gap: var(--s-6); }
  .sr-hero__do { gap: var(--s-3); }
  .sr-button--big { inline-size: 100%; text-align: center; }
  .sr-plain { margin-inline-start: 0; }
}

/* ---------- ещё примеры ---------- */

.sr-more {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-6);
}

.sr-more__item { display: flex; flex-direction: column; gap: var(--s-3); }

.sr-more__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--c-line);
  border: var(--border);
}

.sr-more__pair figure { margin: 0; background: var(--c-surface); }

.sr-more__pair img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  background: var(--c-sunk);
}

.sr-more__pair figcaption {
  padding: var(--s-2) var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

.sr-more__pair figcaption.is-out { color: var(--c-accent-text); }

.sr-more__was {
  margin: 0;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--c-muted);
}

.sr-more__note { margin: 0; font-size: var(--t-sm); color: var(--c-text); }

/* ============================================================
   Глубина и движение

   «Верстак» — про точность, а не про игривость: всё движется
   ровно, без пружин и подскоков. Каждое правило ниже
   выключается системной настройкой «меньше движения».
   ============================================================ */

/* ---------- бегущая строка ---------- */

.sr-ticker {
  overflow: hidden;
  border-block: var(--border);
  background: var(--c-sunk);
  margin-block: var(--s-8) 0;
  /* Края растворяются, лента не обрывается о рамку экрана. */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  /* Полоса никого снаружи не задевает: пересчитывать соседей при её
     движении незачем. */
  contain: paint;
}

.sr-ticker__rail {
  display: flex;
  inline-size: max-content;
  animation: sr-run 42s linear infinite;
  /* Лента едет без остановки. Свой слой — и её везут, а не перерисовывают
     вместе с растворяющимися краями. */
  will-change: transform;
}

.sr-ticker:hover .sr-ticker__rail { animation-play-state: paused; }

.sr-ticker__run {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  list-style: none;
  margin: 0;
  padding: var(--s-4) 0 var(--s-4) var(--s-6);
}

.sr-ticker__run li {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

/* Разделитель — квадратик акцентом, а не точка: у нас прямые углы. */
.sr-ticker__run li::after {
  content: '';
  inline-size: 5px;
  block-size: 5px;
  background: var(--c-accent);
  flex: none;
}

@keyframes sr-run {
  from { transform: translate3d(0, 0, 0); }
  /* Ровно половина: вторая лента встаёт на место первой, шва не видно. */
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------- кнопка со стрелкой ---------- */

.sr-button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur-base) var(--ease),
    filter var(--dur-fast) var(--ease);
}

.sr-button__arrow {
  font-style: normal;
  display: inline-block;
  transition: transform var(--dur-base) var(--ease);
}

.sr-button:hover { transform: translateY(-2px); }
.sr-button:hover .sr-button__arrow { transform: translateX(4px); }
.sr-button:active { transform: translateY(0); }

/* Блик, проходящий по кнопке один раз при наведении. */
.sr-button::after {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  inline-size: 40%;
  background: linear-gradient(100deg,
    transparent, color-mix(in srgb, #fff 42%, transparent), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start 520ms var(--ease);
  pointer-events: none;
}

.sr-button:hover::after { inset-inline-start: 120%; }

/* Кнопка на первом экране светится и в покое — это самый яркий предмет на
   странице, и подсветка вокруг него должна быть, а не включаться по наведению. */
.sr-button--big {
  box-shadow: 0 6px 30px color-mix(in srgb, var(--c-accent) 22%, transparent);
}

.sr-button--big:hover {
  box-shadow: 0 8px 38px color-mix(in srgb, var(--c-accent) 40%, transparent);
}

/* ---------- карточки оживают под курсором ---------- */

.sr-more__pair,
.sr-tier,
.sr-flow__card,
.sr-flow__dot,
.sr-faq__item {
  transition:
    border-color var(--dur-base) var(--ease),
    background var(--dur-base) var(--ease),
    transform var(--dur-base) var(--ease);
}

.sr-more__item:hover .sr-more__pair {
  border-color: color-mix(in srgb, var(--c-accent) 55%, var(--c-line));
  transform: translateY(-3px);
}

.sr-tier:hover { background: var(--c-hover); }

.sr-flow__step:hover .sr-flow__card {
  background: var(--c-hover);
  border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-line));
  transform: translateX(4px);
}

/* ---------- появление при прокрутке ---------- */

/*
 * Устроено так, что сломаться нечему.
 *
 * Раздел **виден всегда**. Когда он въезжает в окно, скрипт вешает метку, и
 * проигрывается короткое появление — анимация, а не переключение видимости.
 *
 * Сперва было наоборот: скрипт прятал разделы и показывал по мере прокрутки.
 * Проверить это в здешнем браузере не удалось — он не прокручивается
 * программно и наблюдатель в нём не срабатывает ни разу. Ставить видимость
 * всей страницы в зависимость от того, чего нельзя проверить, нельзя: не
 * загрузился файл, устарел кэш, выключен JavaScript — и ниже первого экрана
 * пустота.
 *
 * Теперь худшее, что бывает: разделы просто появляются без анимации.
 */
@keyframes sr-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

[data-reveal='in'] {
  animation: sr-rise 620ms var(--ease) both;
}

/* ---------- меньше движения ---------- */

@media (prefers-reduced-motion: reduce) {
  .sr-ticker__rail { animation: none; transform: none; }
  .sr-button::after { display: none; }
  .sr-button:hover,
  .sr-more__item:hover .sr-more__pair,
  .sr-flow__step:hover .sr-flow__card { transform: none; }
  .sr-flow::after { transition: none; }
  .sr-button:hover .sr-button__arrow { transform: none; }
  [data-reveal] { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Отделка
   ============================================================ */

/* ---------- фактура ---------- */


/* ---------- заголовок раздела ---------- */

/* Короткая малиновая черта над каждым заголовком: ряд разделов получает
   ритм, а акцент — работу помимо кнопок. */
.sr-sec__head h2,
.sr-call h2 { position: relative; padding-block-start: var(--s-4); }

.sr-sec__head h2::before,
.sr-call h2::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 34px;
  block-size: 3px;
  background: var(--c-accent);
  /* Свечение вокруг самой черты: розовый на странице теперь не краска,
     а источник света, и черта — самый маленький из них. */
  box-shadow: 0 0 14px color-mix(in srgb, var(--c-accent) 65%, transparent);
}

/* ---------- главное число ---------- */

.sr-numbers .is-key b { color: var(--c-accent-text); }

.sr-numbers .is-key span { color: var(--c-text); }

/* ---------- меню ---------- */

.sr-nav__list a {
  position: relative;
  padding-block-end: 2px;
}

.sr-nav__list a::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}

.sr-nav__list a:hover::after { transform: scaleX(1); }

/* ---------- вопросы ---------- */

.sr-faq__item summary::after {
  transition: transform var(--dur-base) var(--ease);
}

.sr-faq__item[open] summary { color: var(--c-text); }

/* ---------- ссылки в примерах ---------- */

.sr-tile__link,
.sr-history__files a {
  transition: color var(--dur-fast) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .sr-nav__list a::after { transition: none; }
}

/* ---------- скругление ---------- */

/*
 * Панели, склеенные из ячеек.
 *
 * «Что умеет / что не проверено», ступени цен и панель «до/после» устроены
 * одинаково: решётка с зазором в один пиксель, зазор просвечивает цветом
 * рамки. Своих углов у ячеек нет — скруглять надо оболочку и резать по ней.
 * Скруглив сами ячейки, получаешь вырезы в середине ряда, где две круглые
 * ячейки стоят впритык.
 */
.sr-proof,
.sr-halves,
.sr-tiers,
.sr-more__pair {
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Крупные блоки первой страницы. */
.sr-call,
.sr-faq {
  border-radius: var(--r-xl);
}

/* Одиночные карточки, кадры, врезки. */
.sr-why,
.sr-flow__card,
.sr-numbers {
  border-radius: var(--r-lg);
}

/* Плашки и подписи. */
.sr-flow__tag,
.sr-tier__rate,
.sr-proof__tag {
  border-radius: var(--r-sm);
}

/* Снимок внутри ячейки скругляется сам: у ячейки углов нет, а прямой угол
   картинки посреди мягкой панели видно сразу. */
.sr-proof__shot,
.sr-more__pair img {
  border-radius: var(--r-md);
}

/*
 * Первый и последний вопрос повторяют скругление своего списка: иначе прямой
 * угол строки выглядывает из-под круглого угла рамки.
 */
.sr-faq__item:first-child {
  border-start-start-radius: var(--r-xl);
  border-start-end-radius: var(--r-xl);
}

.sr-faq__item:last-child {
  border-end-start-radius: var(--r-xl);
  border-end-end-radius: var(--r-xl);
}

/* Врезка «зачем» держит розовую грань слева — скругляем только справа,
   иначе грань превращается в дугу и перестаёт читаться линией. */
.sr-why {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

/*
 * Тонкая светлая грань по верхнему ребру.
 *
 * На тёмном фоне тень не видна вовсе, а свет по ребру делает ту же работу:
 * карточка читается лежащей на странице, а не вырезанной в ней.
 */
.sr-flow__card,
.sr-why,
.sr-numbers,
.sr-half,
.sr-tier {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-text) 6%, transparent);
}

/* Та же тёплая грань, что и у карточек в components.css. */
.sr-flow__card,
.sr-why,
.sr-numbers,
.sr-half,
.sr-tier {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-edge) 22%, transparent);
}