/* How it works — numbers from fig-spec of robwaterhause-how-it-works (1:803)
 * and how-it-works-mobile (9:108). Steps alternate background #050505 / #171214. */

.hiw-hero { position: relative; height: 492px; overflow: hidden; background: var(--color-bg); }
.hiw-hero__glow { position: absolute; left: 400px; top: 60px; width: 800px; height: 600px; border-radius: 50%; background: var(--grad-glow); pointer-events: none; }
.hiw-hero__inner { position: relative; display: flex; align-items: flex-start; height: 100%; padding-top: 75px; }   /* 1:827 @185 при секции от 110 */
.hiw-hero__editorial { display: flex; flex-direction: column; gap: 32px; width: 1120px; }   /* 1:827 — 1120, не вся ширина контейнера */
.hiw-hero__label { font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 13px; }
.hiw-hero__title {
  display: flex; flex-direction: column;
  font-family: var(--font-display); font-weight: 500; font-size: 80px; line-height: 72px; letter-spacing: -.04em; color: var(--color-text);
}
.hiw-hero__title-accent { color: var(--color-brand); }
.hiw-hero__lead { font-size: var(--fs-body); line-height: 24px; color: var(--color-muted); }

.step { background: var(--color-bg); }
.step--alt { background: var(--color-bg-alt); box-shadow: inset 0 1px 0 var(--color-border-brand), inset 0 -1px 0 var(--color-border-brand); }
.step__inner { display: flex; justify-content: space-between; align-items: center; gap: 48px; padding-block: 100px; }

.step--text .step__inner { justify-content: flex-start; }
.step__editorial { display: flex; flex-direction: column; gap: 24px; width: 420px; flex: none; }
.step__title { font-family: var(--font-display); font-weight: 500; font-size: 48px; line-height: 59px; letter-spacing: -.03em; color: var(--color-text); }
.step__text { font-size: var(--fs-body); line-height: 24px; color: var(--color-muted); }
.step__link { align-self: flex-start; }

.step__visual { width: 680px; flex: none; }
.step__console { display: flex; flex-direction: column; gap: 24px; padding: 32px; }
.step__console-meta { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-caption); line-height: 13px; text-transform: uppercase; color: var(--color-muted); }
.step__console-meta .tag--soft { padding: 4px 10px; border-radius: var(--radius-pill); background: #1f080f; color: var(--color-brand-2); font-family: var(--font-mono); font-size: var(--fs-tiny); line-height: 11px; }
.step__console-title { display: flex; flex-direction: column; gap: 8px; }
.step__event { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 39px; letter-spacing: -.02em; color: var(--color-text); }
.step__event--sm { font-size: var(--fs-h5); line-height: 29px; }
.step__event-meta { font-size: var(--fs-ui); line-height: 19px; color: var(--color-muted); }
.step__market { display: flex; flex-direction: column; gap: 12px; }
.step__market-label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-caption); line-height: 13px; text-transform: uppercase; color: var(--color-muted); }
.step__odds { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.step__odd { display: flex; justify-content: space-between; align-items: center; height: 63px; padding: 0 20px; border-radius: var(--radius-lg); background: #000; }
.step__odd-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lead); line-height: 20px; color: var(--color-text); }
.step__odd-price { font-family: var(--font-mono); font-weight: 700; font-size: 18px; line-height: 23px; color: var(--color-muted); }
.step__odd-price--on { color: var(--color-brand-2); }

.step__split { position: relative; display: flex; align-items: flex-start; justify-content: flex-start; height: 340px; }
.step__card { display: flex; flex-direction: column; gap: 20px; width: 500px; flex: none; padding: 28px; background: var(--color-bg); border-radius: var(--radius-2xl); box-shadow: inset 0 0 0 1px var(--color-border-brand); }
.step__pick { display: flex; justify-content: space-between; align-items: center; height: 52px; padding: 0 16px; border-radius: var(--radius-lg); background: var(--color-surface); font-family: var(--font-display); font-weight: 500; font-size: var(--fs-ui); line-height: 17px; text-transform: uppercase; color: var(--color-muted); }
.step__pick--on { background: var(--grad-brand); font-weight: 700; color: var(--color-text); }
.step__pick-price { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-lead); line-height: 20px; }
/* 1:877 — красная линия 160×2 от правого края карточки на уровне активной цены; 1:878 — бейдж «ADDED» с красной обводкой поверх неё */
.step__connector { position: absolute; left: 480px; top: 115px; width: 160px; height: 2px; background: var(--color-brand); }
.step__added { position: absolute; left: 540px; top: 80px; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-brand); font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-caption); line-height: 14px; text-transform: uppercase; color: var(--color-text); }
.step__added .icon { width: 16px; height: 16px; color: var(--color-brand); }

@media (max-width: 1199px) {
  .hiw-hero { height: auto; }
  .hiw-hero__glow { left: 45px; top: 20px; width: 300px; height: 300px; }
  .hiw-hero__inner { padding-block: 40px; }
  .hiw-hero__editorial { gap: 16px; }
  .hiw-hero__editorial { width: auto; }
  .hiw-hero__title { gap: 2px; font-size: 48px; line-height: 46px; }
  .hiw-hero__lead { font-size: var(--fs-ui); line-height: 21px; }

  .step__inner { flex-direction: column; align-items: stretch; gap: 24px; padding-block: 40px; }
  .step--text .step__inner { padding-block: 50px; }
  .step__editorial { width: auto; gap: 12px; }
  .step__title { font-size: 32px; line-height: 39px; }
  .step__text { font-size: var(--fs-ui); line-height: 21px; }
  .step__visual { width: auto; }
  .step__console { gap: 20px; padding: 16px; border-radius: var(--radius-2xl); }
  .step__console-title { gap: 6px; }
  .step__market { gap: 10px; }
  .step__event { font-size: 20px; line-height: 24px; }
  .step__event--sm { font-size: 20px; line-height: 24px; }
  .step__event-meta { font-size: var(--fs-label); line-height: 18px; }
  .step__console-meta { font-size: var(--fs-micro); line-height: 12px; }
  .step__odds { grid-template-columns: 1fr 1fr; gap: 10px; }
  .step__odd { height: 48px; padding: 0 12px; border-radius: 10px; }
  .step__odd-name { font-size: var(--fs-label); line-height: 16px; }
  .step__odd-price { font-size: var(--fs-ui); line-height: 18px; }
  .step__split { height: auto; flex-direction: column; align-items: stretch; gap: 16px; }
  .step__card { width: auto; gap: 16px; padding: 16px; }
  .step__card .step__event--sm { line-height: 24px; }
  .step__card .step__pick + .step__pick { margin-top: -8px; }   /* 9:172 odds-list: gap 8 внутри списка при gap 16 карточки */
  .step__pick { height: 48px; padding: 0 12px; border-radius: 10px; font-size: var(--fs-label); line-height: 16px; }
  .step__pick-price { font-size: var(--fs-ui); line-height: 18px; }
  .step__connector, .step__added { display: none; }   /* мобильный фрейм 9:162 показывает только карточку */
  .step__added { align-self: flex-start; }
}

/* short team names on the 390 frame (9:157) */
.hero__only-m { display: none; }
@media (max-width: 1199px) { .hero__only-d { display: none; } .hero__only-m { display: inline; } }