/* Вариант 15 "Графит светлый" - сборка по правкам клиента:
     дизайн v10 (Onest, мягкие скругления, премиальный ритм), но светлый;
     механика показа из v7 (кадр закрепляется, стадии меняются по прокрутке);
     акцент оранжевый из логотипа #FF561E;
     палитра тёплой бумаги из v12 и v14.
   Графит не выброшен: он остался фоном самого кадра, поэтому изделие
   читается контрастно, а страница при этом светлая. */
:root {
  --bg: #F5F2EC;  --surface: #EDE9E1;  --surface-2: #E4DFD5;
  --text: #17161A; --muted: #6A655F;
  --accent: #FF561E; --accent-hover: #E8460F; --accent-ink: #1A0B05; --accent-text: #C63B0C;
  --rule: #DDD8CE; --head-rule: #DDD8CE; --field: #FFFFFF; --danger: #C4160D;
  --stage-bg: #101212;   /* графитовая панель кадра на светлой странице */

  --shell: 1360px; --gutter: clamp(20px, 4vw, 60px);
  --radius: 16px; --rule-w: 1px; --thumb-radius: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font-display: 'Onest', system-ui, sans-serif;
  --font-text: 'Onest', system-ui, sans-serif;
  --display-weight: 600; --display-tracking: -0.028em;
  --brand-weight: 600; --brand-tracking: -0.04em;
  --h1-size: clamp(1.9rem, 4.6vw, 4.1rem); --h1-weight: 600; --h1-tracking: -0.035em;
}

/* Оранжевый в трёх шагах одной краски, все проверены по контрасту на этом фоне:
     #FF561E  заливки: кнопки, плашки (тёмный текст на нём 6.0:1)
     #E04A12  крупный дисплейный текст, 3.7:1 при норме 3:1 для больших кеглей
     #C63B0C  мелкий текст и иконки, 4.7:1 при норме 4.5:1
   Сам #FF561E текстом на светлом даёт 2.8:1 и не читается, поэтому им не пишем. */
.hero h1 em { color: #E04A12; }

/* система формы v10: кнопки пилюлей, всё остальное 16px */
.btn, .tabs button, .wipe__pair button, .auto__toggle { border-radius: 999px; }

/* блок трансформации отделён тёплой подложкой, на ней графитовый кадр */
.tr { background: var(--surface); }
.tr .stage { border-color: transparent; box-shadow: 0 24px 60px rgba(23, 22, 26, .10); }

/* Неактивные стадии разводим цветом, а не прозрачностью: на opacity .38
   приглушённый текст давал контраст 1.9:1 и переставал читаться. */
.scrolltr__step { opacity: 1; }
.scrolltr__step h3 { color: var(--muted); transition: color .35s var(--ease); }
.scrolltr__step p { color: var(--muted); }
.scrolltr__step.is-on { border-left-color: var(--accent); }
.scrolltr__step.is-on h3 { color: var(--text); }

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17161A; --surface: #1F1E22; --surface-2: #26252A;
    --text: #F1EFEA; --muted: #9A968F;
    --accent: #FF561E; --accent-hover: #FF6E3C; --accent-ink: #1A0B05; --accent-text: #FF7A4D;
    --rule: #33323A; --head-rule: #33323A; --field: #1C1B20;
    --stage-bg: #101212;
  }
  .tr .stage { box-shadow: none; }
}