/* How It Works — mockup frames betfans-how-it-works-desktop [1:939] /
 * betfans-how-it-works-mobile [74:136].
 *
 * One column all the way down: hero + step index, then four numbered steps.
 * The step index is process-index [37:110] on desktop and process-navigation
 * [74:161] on mobile — the same working nav, laid out differently.
 */

/* ── hero [37:103] ────────────────────────────────────────────────────── */
.hiw-hero { padding-block: 56px; background: var(--color-bg); }
.hiw-hero .container { display: flex; flex-direction: column; gap: var(--space-32); }
.hiw-hero__content { display: flex; flex-direction: column; gap: var(--space-24); }
.hiw-hero__index { display: none; }                 /* mobile frame prints "/ 01" [74:156] */
.hiw-hero__title {
  display: flex; flex-direction: column; gap: var(--space-12);
  font-family: var(--font-display); font-weight: 700;
  font-size: 90px; line-height: 90px;
  color: var(--color-ink);
}
.hiw-hero__lead { font-size: var(--fs-body); line-height: 24px; color: var(--color-muted); }

/* ── step index [37:110] / process navigation [74:161] ────────────────── */
.hiw-nav { display: flex; align-items: center; gap: var(--space-16); }
.hiw-nav__chip {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-10);
  min-height: 58px; padding: var(--space-12) 14px;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-border);
  color: var(--color-brand); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.hiw-nav__chip:hover { background: var(--color-tint); box-shadow: inset 0 0 0 1px var(--color-brand); }
.hiw-nav__chip.is-active {
  background: var(--color-brand); color: var(--color-on-dark);
  box-shadow: none;
}
.hiw-nav__no { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 34px; }
.hiw-nav__label { font-size: var(--fs-xs); font-weight: 700; line-height: 16.39px; }
.hiw-nav__label--short { display: none; }
.hiw-nav__rule { flex: none; width: 1px; height: 28px; background: var(--color-brand); }

/* ── steps 01–04 ──────────────────────────────────────────────────────── */
.hiw-step { padding-block: 56px; background: var(--color-bg); scroll-margin-top: 140px; }
.hiw-step--02 { background: var(--color-surface); }
.hiw-step__body { display: flex; flex-direction: column; gap: var(--space-16); max-width: 520px; }
.hiw-step--01 .hiw-step__body { max-width: none; }
.hiw-step__no {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h1); line-height: 86.4px;
  color: var(--color-brand);
}
/* The ordinals are watermarks: step 01 is brand at 15% [37:131], steps 02-03 are
   the pale blue of the mockup at full opacity [37:155]. */
.hiw-step--01 .hiw-step__no { opacity: .15; }
.hiw-step--02 .hiw-step__no,
.hiw-step--03 .hiw-step__no { color: var(--color-on-brand-dim); }
.hiw-step__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h2); line-height: 58px;
  color: var(--color-ink);
}
.hiw-step__note { font-size: var(--fs-base); line-height: 21px; color: var(--color-muted); }
.hiw-step__body .hiw-step__note:last-child { line-height: 19.12px; }
.hiw-step--03 .hiw-step__body .hiw-step__note:last-child { line-height: 21px; }
.hiw-final__text .hiw-step__note { line-height: 22px; }

/* ── step 04 panel [37:233] ───────────────────────────────────────────── */
.hiw-final {
  padding: var(--space-32);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.hiw-final__split { display: flex; align-items: flex-start; gap: var(--space-24); }
.hiw-final__text { flex: 0 0 520px; display: flex; flex-direction: column; gap: var(--space-16); }
.hiw-final__no {
  font-family: var(--font-display); font-weight: 700;
  font-size: 96px; line-height: 115.2px;
  color: var(--color-on-brand-dim); opacity: .2;
}
/* The desktop frame paints this heading, its kicker and its body in white on a
   white panel — invisible as drawn. The mobile frame [74:195]–[74:198] is the
   corrected version of the same block, and its colours are used here. */
.hiw-final__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 64px; line-height: 77px;
  color: var(--color-ink);
}
.hiw-final__ui { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-16); }

/* The frame draws 520 + 24 + 696 inside a 1216 panel: the slip column runs 24px
   into the panel's right padding. Only the 1440 frame has the room for it. */
@media (min-width: 1440px) {
  .hiw-final__text { flex: 0 0 520px; }
  .hiw-final__ui { flex: 0 0 696px; }
}

/* bet slip illustration [37:241] — a picture of a slip, not a live one. */
.hiw-slip {
  display: flex; flex-direction: column; gap: var(--space-16);
  margin: 0; padding: var(--space-20);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.hiw-slip__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.hiw-slip__title { font-size: var(--fs-sm); font-weight: 700; line-height: 18px; color: var(--color-ink); }
.hiw-slip__count { font-size: var(--fs-xs); font-weight: 700; line-height: 16.39px; color: var(--color-brand); }
.hiw-slip__selection { display: flex; flex-direction: column; gap: var(--space-8); }
.hiw-slip__event { font-size: var(--fs-base); font-weight: 700; line-height: 19.12px; color: var(--color-ink); }
.hiw-slip__market { font-size: var(--fs-sm); line-height: 18px; color: var(--color-soft); }
.hiw-slip__stake { font-size: var(--fs-body); font-weight: 700; line-height: 22px; color: var(--color-ink); }
.hiw-slip__rule { height: 1px; margin: 0; border: 0; background: var(--color-border); }
.hiw-slip__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
/* #888888 fails contrast; the project replaces it with #6b6b6b (TZ п.2). */
.hiw-slip__label { font-size: var(--fs-xs); line-height: 16.39px; color: #6b6b6b; }
.hiw-slip__return { font-size: 20px; font-weight: 700; line-height: 27.32px; color: var(--color-brand); }
.hiw-slip__cta {
  display: flex; align-items: center; justify-content: center; gap: var(--space-6);
  min-height: 52px;
  border-radius: var(--radius-sm);
  background: var(--color-brand); color: var(--color-on-dark);
  font-size: var(--fs-body); font-weight: 700; line-height: 22px;
}
.hiw-slip__note { font-size: var(--fs-2xs); line-height: 15.03px; color: #6b6b6b; text-align: center; }

.hiw-checks { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.hiw-check {
  display: inline-flex; align-items: center; gap: var(--space-8);
  min-height: 36px; padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
  font-size: var(--fs-xs); font-weight: 600; line-height: 16.39px;
  color: var(--color-soft);
}
.hiw-check__tick { font-weight: 700; color: var(--color-brand); }
.hiw-check__label--short { display: none; }

/* ── tablet: no mockup frame, derived from the container ──────────────── */
@media (max-width: 1199px) {
  .hiw-hero__title { font-size: 64px; line-height: 64px; }
  /* Four chips do not fit one row below 1200: two rows of two, never 3 + 1. */
  .hiw-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
  .hiw-nav__rule { display: none; }
  .hiw-final__split { flex-direction: column; }
  .hiw-final__text { flex: 1 1 auto; width: 100%; }
  .hiw-final__no { font-size: 72px; line-height: 86px; }
  .hiw-final__title { font-size: var(--fs-h2); line-height: 58px; }
  .hiw-final__ui { width: 100%; }
}

/* ── mobile frame [74:136] ────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* The mobile frame sets its own eyebrow size [74:156]. */
  .hiw-hero .eyebrow,
  .hiw-step__kicker { font-size: var(--fs-3xs); line-height: 14px; }

  .hiw-hero { padding: 32px 0 0; }
  .hiw-hero .container { gap: var(--space-16); }
  .hiw-hero__content { gap: var(--space-16); }
  .hiw-hero__index { display: inline; }
  .hiw-hero__title { font-size: 54px; line-height: 54px; gap: var(--space-2); }
  .hiw-hero__lead { font-size: var(--fs-base); line-height: 21px; }

  /* process-navigation [74:161] — two rows of two, 48px chips. */
  .hiw-nav {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8);
    margin-top: var(--space-16); padding-bottom: var(--space-32);
  }
  .hiw-nav__chip { min-height: 48px; padding: var(--space-10) var(--space-12); gap: var(--space-8); color: var(--color-ink); }
  .hiw-nav__chip .hiw-nav__no { color: var(--color-brand); }
  .hiw-nav__chip.is-active,
  .hiw-nav__chip.is-active .hiw-nav__no { color: var(--color-on-dark); }
  .hiw-nav__no { font-size: 22px; line-height: 26.4px; }
  .hiw-nav__label { font-size: var(--fs-2xs); line-height: 15.03px; }
  .hiw-nav__label:not(.hiw-nav__label--short) { display: none; }
  .hiw-nav__label--short { display: inline; }

  .hiw-step { padding-block: 32px; scroll-margin-top: 120px; }
  .hiw-step--02 { background: var(--color-surface); }
  .hiw-step__body { gap: var(--space-12); max-width: none; }
  .hiw-step__no { font-size: 60px; line-height: 60px; color: var(--color-brand); opacity: .15; }
  .hiw-step--02 .hiw-step__no,
  .hiw-step--03 .hiw-step__no { color: var(--color-brand); }
  .hiw-step__title { font-size: 40px; line-height: 44px; }
  .hiw-step__body .hiw-step__note:last-child { line-height: 21px; }

  .hiw-step--04 { background: var(--color-surface); }
  .hiw-final { padding: 0; border-radius: 0; box-shadow: none; background: none; }
  .hiw-final__split { flex-direction: column; gap: var(--space-24); }
  .hiw-final__text { gap: var(--space-12); }
  .hiw-final__text .hiw-step__note { line-height: 21px; }
  .hiw-final__no { font-size: 60px; line-height: 60px; color: var(--color-brand); opacity: .15; }
  .hiw-final__title { font-size: 40px; line-height: 44px; }

  .hiw-slip { padding: var(--space-16); background: var(--color-bg); }
  /* The mobile frame rounds every one of these text boxes to a whole pixel, and
     the slip is a stack of eleven of them: fractional line-heights add up to
     2px over the drawn 283 [74:199]. Rounded here, on this breakpoint only. */
  .hiw-slip__title { font-size: var(--fs-xs); line-height: 16px; }
  .hiw-slip__event { line-height: 19px; }
  .hiw-check { line-height: 16px; }
  .hiw-slip__count { font-size: var(--fs-2xs); font-weight: 600; line-height: 15.03px; color: #6b6b6b; }
  .hiw-slip__selection { gap: var(--space-6); }
  .hiw-slip__market { font-size: var(--fs-xs); line-height: 16px; color: var(--color-muted); }
  .hiw-slip__stake { font-size: var(--fs-body-sm); line-height: 20px; }
  .hiw-slip__label { font-size: var(--fs-sm); line-height: 18px; color: var(--color-muted); }
  .hiw-slip__return { font-size: var(--fs-md); line-height: 25px; }
  .hiw-slip__cta { min-height: 48px; font-size: var(--fs-body-sm); line-height: 20.49px; }
  .hiw-slip__note { font-size: var(--fs-3xs); line-height: 14px; }

  .hiw-final__ui { gap: var(--space-24); }
  .hiw-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); }
  .hiw-check { min-height: 32px; padding: var(--space-8) var(--space-12); gap: var(--space-6); color: var(--color-muted); }
  .hiw-check__label:not(.hiw-check__label--short) { display: none; }
  .hiw-check__label--short { display: inline; }
  /* Only the last pill has a shorter mobile label; the rest keep the one label. */
  .hiw-check:not(:has(.hiw-check__label--short)) .hiw-check__label { display: inline; }
}