/* How It Works — betaces-how-it-works-v2 (1440) / -mobile (390).
 * Four alternating steps; the panels on the right are figures illustrating the
 * real interface, so they are styled like the product but carry no controls. */

/* ── 02-editorial-hero ────────────────────────────────────────────────── */
.hiw-hero { display: flex; height: 780px; background: var(--color-cream); }
.hiw-hero__left {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 58.333%; flex: none; padding: var(--section-pad-y-sm) 48px var(--section-pad-y-sm) var(--section-gutter);
}
.hiw-hero__meta { display: grid; gap: var(--space-12); max-width: 712px; }
.hiw-hero__h {
  font-size: 72px; font-weight: 700; line-height: 72px; letter-spacing: var(--ls-h1);
  text-transform: uppercase; color: var(--color-ink);
}
.hiw-hero__desc { display: grid; gap: var(--space-24); max-width: 480px; }
.hiw-hero__desc p { font-size: var(--fs-body-sm); line-height: 22px; color: var(--color-muted); }
.hiw-hero__actions { display: flex; align-items: center; gap: var(--space-24); }
.hiw-hero__rg { font-size: var(--fs-ui); font-weight: 700; line-height: 17px; }

.hiw-hero__collage { position: relative; flex: 1; min-width: 0; background: var(--color-cream-2); overflow: hidden; }
/* В макете фото — узкая полоса 160px у правого края (tall-editorial-crop),
   а не подложка во всю правую половину. */
.hiw-hero__photo { position: absolute; inset: 0 0 0 auto; width: 160px; }
.hiw-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hiw-hero__watermark {
  position: absolute; top: 40px; left: 40px; z-index: 1; width: 280px; height: 392px;
  color: var(--color-brand); opacity: .12; pointer-events: none;
}
.hiw-hero__watermark .icon { width: 100%; height: 100%; }

/* illustrative panels */
.demo {
  position: absolute; z-index: 2; display: grid; gap: var(--space-8);
  padding: var(--space-16); border-radius: var(--radius-sm);
  background: var(--color-white); box-shadow: var(--shadow-card);
}
/* mockup-event-card 340x156 @40,120 синяя; mockup-bet-slip-fragment 320x149
   @100,320 тёмная — обе внутри кремовой подложки коллажа. */
.demo--event {
  left: 40px; top: 120px; width: 340px;
  background: var(--color-brand); color: var(--color-cream);
}
.demo--event .demo__cap { color: var(--color-on-brand-soft); }
.demo--event .demo__match { color: var(--color-cream); }
.demo--slip { left: 100px; top: 320px; width: 320px; background: var(--color-ink); color: var(--color-cream); }
.demo__cap {
  display: flex; justify-content: space-between; gap: var(--space-8);
  font-size: var(--fs-micro); font-weight: 700; line-height: 13px; color: var(--color-muted);
}
.demo--slip .demo__cap { color: var(--color-cream); }
.demo--slip .demo__cap span { color: var(--color-accent); }
.demo__match { font-family: var(--font-display); font-size: var(--fs-card); font-weight: 700; line-height: 24px; color: var(--color-ink); }
.demo__odds { display: flex; gap: var(--space-8); }
.demo__odds span {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
  padding: 10px var(--space-12); background: var(--color-cream);
  font-size: var(--fs-label); line-height: 14.3px; color: var(--color-ink);
}
.demo__odds b { color: var(--color-brand); }
.demo__line { font-size: var(--fs-meta); line-height: 16px; }
.demo__line--muted { color: var(--color-on-brand-soft); }
.demo__return { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--fs-label); line-height: 14.3px; }
.demo__return strong { font-size: var(--fs-card); font-weight: 900; line-height: 23px; color: var(--color-accent); }

/* ── 03-step-progress-rail ────────────────────────────────────────────── */
/* Полоса шагов в макете синяя: подписи кремовые, активный номер лаймовый,
   между пунктами 60px линии. Была собрана наоборот — белой с синим текстом. */
.hiw-rail { padding: 32px var(--section-gutter); background: var(--color-brand); }
.hiw-rail__items {
  display: flex; align-items: center; gap: var(--space-24);
  max-width: var(--container); margin-inline: auto;
}
.hiw-rail__item { flex: none; display: flex; align-items: center; gap: var(--space-24); }
.hiw-rail__item + .hiw-rail__item::before {
  content: ""; width: 60px; height: 1px; flex: none; background: var(--color-hairline-light);
}
.hiw-rail__item a {
  display: flex; align-items: center; gap: var(--space-8); height: 22px;
  text-decoration: none; color: var(--color-cream);
  transition: opacity var(--dur-fast) var(--ease);
}
.hiw-rail__item a:hover { opacity: .75; }
.hiw-rail__num { font-family: var(--font-display); font-size: var(--fs-body); font-weight: 700; line-height: 22px; color: var(--color-cream); }
.hiw-rail__label { font-family: var(--font-display); font-size: var(--fs-body-sm); font-weight: 700; line-height: 18px; text-transform: uppercase; }
.hiw-rail__item.is-active .hiw-rail__num { color: var(--color-accent); }

/* ── steps ────────────────────────────────────────────────────────────── */
.hiw-step {
  display: flex; align-items: center; gap: var(--space-80);
  padding: var(--section-pad-y) var(--container-pad);
  background: var(--color-cream);
}
.hiw-step--flip { flex-direction: row-reverse; }
/* Фон каждого шага свой: 1 кремовый, 2 второй кремовый, 3 тёмный, 4 кремовый.
   Раньше цвет шёл через --flip и третий с четвёртым были перепутаны. */
.hiw-step--2 { background: var(--color-cream-2); }
.hiw-step--3 { background: var(--color-ink); color: var(--color-cream); }
.hiw-step--3 .hiw-step__h { color: var(--color-cream); }
.hiw-step--3 .hiw-step__body,
.hiw-step--3 .hiw-step__note { color: var(--color-on-brand-soft); }
.hiw-step--3 .hiw-step__num { color: var(--color-cream); }
.hiw-step--3 .hiw-step__kicker { color: var(--color-accent); }
/* Each step frame is FIXED height in the mockup: the panels are drawn at a size,
   not squeezed to their content. */
.hiw-step--1 { min-height: 789px; }
.hiw-step--2 { min-height: 580px; }
.hiw-step--3 { min-height: 662px; }
.hiw-step--4 { min-height: 660px; }
.hiw-step__text { width: 420px; flex: none; display: grid; gap: var(--space-24); }
.hiw-step__num {
  font-family: var(--font-display); font-size: 100px; font-weight: 700; line-height: 90px;
  color: var(--color-brand); opacity: .12;
}
/* В макете подпись стоит ПОД номером (watermark-container 420x110: цифра 90 +
   4 + подпись 16), а не поверх него. Отрицательный отступ накладывал текст. */
.hiw-step__kicker { margin-top: calc(var(--space-4) - var(--space-24)); font-size: var(--fs-meta); font-weight: 700; line-height: 16px; letter-spacing: var(--ls-label); color: var(--color-brand); }
.hiw-step__h {
  font-family: var(--font-display); font-size: 52px; font-weight: 700; line-height: 56px;
  text-transform: uppercase; color: var(--color-ink);
}
.hiw-step__body { font-size: var(--fs-body); line-height: 24px; color: var(--color-muted); }
.hiw-step__note { font-size: var(--fs-body-sm); line-height: 22px; color: var(--color-muted); }
/* minmax(0,1fr) — иначе дорожка растягивается по min-content карточки и на 320
   шаг выезжает за экран. */
.hiw-step__demo { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }

/* embedded-photo-wrapper 716x160 внутри панели первого шага. */
.demo-photo { display: block; height: 160px; overflow: hidden; border-radius: var(--radius-sm); }
.demo-photo img { width: 100%; height: 100%; object-fit: cover; }

.demo-chips { display: flex; gap: var(--space-8); }
.demo-chips span {
  padding: 6px var(--space-12); background: var(--color-white);
  font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-muted);
}
.demo-chips .is-on { background: var(--color-brand); color: var(--color-cream); }

.demo-card { display: grid; gap: var(--space-12); padding: var(--space-24); background: var(--color-white); }
.demo-card__meta { display: flex; justify-content: space-between; gap: var(--space-12); font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-muted); }
.demo-card__markets { color: var(--color-brand); }
.demo-card__match { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 38px; color: var(--color-ink); }
.demo-card__market { font-size: var(--fs-ui); line-height: 17px; color: var(--color-muted); }
.demo-card__odds { display: flex; gap: var(--space-12); }
.demo-card__odds span {
  flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
  padding: var(--space-16); background: var(--color-cream);
  font-size: var(--fs-ui); line-height: 17px; color: var(--color-ink);
}
.demo-card__odds b { font-size: var(--fs-body); font-weight: 700; color: var(--color-brand); }
.demo-card__odds .is-on { background: var(--color-accent); }
.demo-card__odds .is-on b { color: var(--color-ink); }
.demo-card__hint { font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-brand); }

.demo-micro { display: flex; gap: var(--space-16); font-size: var(--fs-label); line-height: 14.3px; color: var(--color-muted); }

.demo-slip { display: grid; gap: var(--space-16); padding: var(--space-24); background: var(--color-brand); color: var(--color-cream); border-radius: var(--radius-sm); }
.demo-slip__head { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: var(--fs-card); font-weight: 700; line-height: 24px; }
.demo-slip__head span { padding: 3px var(--space-8); background: var(--color-accent); color: var(--color-ink); font-family: var(--font-body); font-size: var(--fs-micro); line-height: 13px; }
.demo-slip__pick { display: grid; gap: var(--space-8); padding: var(--space-16); background: var(--color-cream); color: var(--color-ink); }
.demo-slip__meta { display: flex; align-items: center; gap: var(--space-8); font-size: var(--fs-label); line-height: 14.3px; color: var(--color-muted); }
.demo-slip__tag { padding: 2px 6px; background: var(--color-brand); color: var(--color-cream); font-weight: 700; }
.demo-slip__rm { margin-left: auto; }
.demo-slip__row { display: flex; justify-content: space-between; font-size: var(--fs-body-sm); font-weight: 700; line-height: 18px; }
.demo-slip__row b { color: var(--color-brand); }
.demo-slip__label { font-size: var(--fs-label); line-height: 14.3px; }
.demo-slip__stake { display: flex; justify-content: space-between; padding: var(--space-12) var(--space-16); background: var(--color-cream); color: var(--color-ink); font-size: var(--fs-body-sm); }
.demo-slip__return { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--fs-meta); line-height: 16px; }
.demo-slip__return strong { font-size: var(--fs-card); font-weight: 900; line-height: 23px; color: var(--color-accent); }

.demo-confirm { display: grid; gap: var(--space-12); padding: var(--space-24); background: var(--color-white); box-shadow: inset 0 0 0 1px var(--color-border); }
.demo-confirm__head { display: flex; justify-content: space-between; gap: var(--space-12); font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-ink); }
.demo-confirm__head span { color: var(--color-muted); }
.demo-confirm__row { display: flex; justify-content: space-between; font-size: var(--fs-ui); line-height: 17px; color: var(--color-muted); }
.demo-confirm__row b { color: var(--color-ink); }
.demo-confirm__btn {
  padding: var(--space-16); background: var(--color-accent); color: var(--color-ink);
  font-size: var(--fs-body-sm); font-weight: 700; line-height: 18px; letter-spacing: var(--ls-label);
  text-align: center;
}
.demo-confirm__note { font-size: var(--fs-label); line-height: 14.3px; color: var(--color-muted); }

/* ── 07-formula-strip ─────────────────────────────────────────────────── */
.hiw-formula {
  display: flex; align-items: center; justify-content: center; gap: var(--space-32);
  padding: 28px var(--container-pad); background: var(--color-cream);
}
.hiw-formula__label, .hiw-formula__note { font-size: var(--fs-label); font-weight: 700; line-height: 14.3px; color: var(--color-muted); }
.hiw-formula__part { font-family: var(--font-display); font-size: var(--fs-title); font-weight: 700; line-height: 27px; color: var(--color-ink); }
.hiw-formula__op { font-size: 24px; font-weight: 700; line-height: 31px; color: var(--color-brand); }

/* ── 10-flow-summary ──────────────────────────────────────────────────── */
.hiw-flow {
  display: flex; align-items: center; justify-content: center; gap: var(--space-24);
  padding: 48px var(--container-pad); background: var(--color-cream-2);
  font-size: var(--fs-body-sm); font-weight: 700; line-height: 19px; color: var(--color-ink);
}
.hiw-flow i { font-style: normal; color: var(--color-brand); }

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .hiw-hero { flex-direction: column; height: auto; }
  .hiw-hero__left { width: auto; gap: var(--space-24); padding: var(--space-32) var(--container-pad-mobile); }
  .hiw-hero__h { font-size: 38px; line-height: 40px; }
  .hiw-hero__desc { max-width: none; gap: var(--space-16); }
  .hiw-hero__actions { flex-wrap: wrap; gap: var(--space-16); }
  .hiw-hero__collage { width: auto; flex: none; height: 320px; }
  .hiw-hero__watermark { display: none; }
  .demo { position: static; width: auto; box-shadow: none; }
  .demo--event, .demo--slip { margin: var(--space-16); }
  .demo--event { display: none; }

  .hiw-rail { padding: 0; }
  .hiw-rail__items { overflow-x: auto; scrollbar-width: none; padding: 0 var(--container-pad-mobile); }
  .hiw-rail__items::-webkit-scrollbar { display: none; }
  .hiw-rail__item { flex: none; padding-right: var(--space-24); }
  .hiw-rail__item a { height: 60px; gap: var(--space-8); white-space: nowrap; }
  .hiw-rail__num { font-size: var(--fs-body-sm); line-height: 19px; }
  .hiw-rail__label { font-size: var(--fs-ui); line-height: 18px; }

  .hiw-step, .hiw-step--flip {
    flex-direction: column; align-items: stretch; gap: var(--space-24);
    padding: var(--space-32) var(--container-pad-mobile);
  }
  .hiw-step--1, .hiw-step--2, .hiw-step--3, .hiw-step--4 { min-height: 0; }
  .hiw-step__text { width: auto; gap: var(--space-12); }
  .hiw-step__num { font-size: 56px; line-height: 52px; }
  .hiw-step__kicker { font-size: var(--fs-micro); line-height: 13px; }
  .hiw-step__h { font-size: var(--fs-h5); line-height: 38px; }
  .hiw-step__body { font-size: var(--fs-ui); line-height: 20px; }
  .hiw-step__note { font-size: var(--fs-ui); line-height: 20px; }
  .demo-card { padding: var(--space-16); }
  .demo-card__match { font-size: var(--fs-title); line-height: 27px; }
  .demo-micro { flex-direction: column; gap: var(--space-4); }

  .hiw-formula { flex-wrap: wrap; gap: var(--space-12); padding: var(--space-20) var(--container-pad-mobile); }
  .hiw-formula__part { font-size: var(--fs-body-sm); line-height: 19px; }
  .hiw-flow { flex-wrap: wrap; gap: var(--space-8); padding: var(--space-16) var(--container-pad-mobile); font-size: var(--fs-label); line-height: 14.3px; }
}