/* How it works — frames pumt123-how-it-works (1440) and -mobile (390).
 *
 * This page uses the mockup's warm ink (#e8e6e0 on #111311) and the second lime
 * (#c8ff00), not the home page's pair — the tokens carry both, so nothing here
 * invents a colour.
 */


/* ── hero: 1440×600, left 558 / divider / right 420 ───────────────────── */
.hiw-hero { display: flex; min-height: 600px; background: var(--color-surface-2); }
.hiw-hero__left {
  display: flex; flex-direction: column; justify-content: flex-start;
  width: 558px; flex: none; padding: var(--space-48);
}
.hiw-hero__intro { display: flex; flex-direction: column; gap: var(--space-16); width: 462px; }
.hiw-hero__intro .eyebrow { font-size: var(--fs-2xs); line-height: 14px; letter-spacing: .18em; text-transform: uppercase; }
.hiw-hero__intro .eyebrow--rule::before { width: 20px; }
.hiw-hero__title {
  color: var(--color-text-alt);
  font-family: var(--font-display); font-weight: 900;
  font-size: 44px; line-height: 48px; letter-spacing: -1px;
}
.hiw-hero__lead { color: var(--color-muted-2); font-size: 15px; line-height: 23px; }

.hiw-hero__divider { flex: 1; display: flex; align-items: flex-end; }
.hiw-hero__divider::before { content: ""; width: 100%; height: 1px; background: var(--color-border); }

.hiw-hero__right {
  display: flex; flex-direction: column; justify-content: center;
  width: 420px; flex: none; padding: var(--space-48);
  background: var(--color-surface-3);
}
.hiw-steps { display: flex; flex-direction: column; gap: var(--space-24); }
.hiw-steps__link { display: flex; align-items: center; gap: var(--space-16); text-decoration: none; }
.hiw-steps__no {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none;
  background: var(--color-chip); color: var(--color-text-alt);
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-xs); line-height: 15px;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.hiw-steps__no.is-active { background: var(--color-brand-2); color: var(--color-on-brand); }
.hiw-steps__link:hover .hiw-steps__no { background: var(--color-brand-2); color: var(--color-on-brand); }
.hiw-steps__label {
  color: var(--color-text-alt);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-2xs); line-height: 14px;
}

/* ── steps: 1440×296, pad 64, gap 64, text 648 / example 600 ──────────── */
.step { padding-block: var(--space-64); }
.step__inner { display: flex; align-items: center; gap: var(--space-64); }
.step--flip .step__inner { flex-direction: row-reverse; }
.step__text { display: flex; flex-direction: column; gap: var(--space-12); width: 648px; flex: none; }
.step__text .eyebrow { font-size: var(--fs-2xs); line-height: 14px; letter-spacing: .18em; text-transform: uppercase; }
.step__text .eyebrow--rule::before { width: 16px; }
.step__title {
  color: var(--color-text-alt);
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-h2); line-height: 40px;
}
.step__lead { color: var(--color-muted-2); font-size: var(--fs-base); line-height: 21px; }

.step__example {
  display: flex; flex-direction: column; gap: var(--space-16);
  width: 600px; flex: none; min-height: 168px; padding: var(--space-24);
  background: var(--color-surface-3);
}
.ex-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.ex-row__sport {
  display: inline-flex; align-items: center; gap: var(--space-8);
  color: var(--color-muted-2);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-2xs); line-height: 14px;
}
.ex-row__more {
  color: var(--color-brand-2);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-2xs); line-height: 14px;
}
.ex-event { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.ex-event__name {
  color: var(--color-text-alt);
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-body); line-height: 20px;
  max-width: 272px;
}
.ex-event__odds-inline { color: var(--color-brand-2); margin-left: var(--space-8); }
.ex-event__sub { color: var(--color-muted-2); font-size: var(--fs-xs); line-height: 16px; }
.ex-event__odds { display: flex; gap: var(--space-8); }
.ex-event__odds .odd {
  width: 136px; min-height: 50px; gap: var(--space-4); padding: 8px var(--space-16);
  background: var(--color-surface-2); box-shadow: none;
}
/* Step 02: the picked price is filled with the page's lime (22:108), dark text on it. */
.ex-event__odds .odd.is-selected { background: var(--color-brand-2); box-shadow: none; }
.ex-event__odds .odd.is-selected .odd__label, .ex-event__odds .odd.is-selected .odd__value { color: var(--color-on-brand); }
.ex-event__odds .odd__value { color: var(--color-brand-2); }

.ex-tag {
  align-self: flex-start;
  padding: 6px 12px;
  background: var(--color-chip); color: var(--color-brand-2);
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-3xs); line-height: 12px;
}
.ex-figures { display: flex; flex-direction: column; gap: var(--space-8); }
.ex-figures > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-16); }
.ex-figures dt { color: var(--color-muted-2); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3xs); line-height: 12px; }
.ex-figures dd { color: var(--color-text-alt); font-family: var(--font-display); font-weight: 900; font-size: var(--fs-base); line-height: 17px; }
.ex-figures dd.is-brand { color: var(--color-brand-2); }
.ex-checks { display: flex; flex-direction: column; gap: var(--space-8); }
.ex-checks li {
  display: flex; align-items: center; gap: var(--space-8);
  color: var(--color-muted-2); font-size: var(--fs-sm); line-height: 18px;
}
.ex-checks .icon { width: 14px; height: 14px; flex: none; color: var(--color-brand-2); stroke-width: 3; }
.ex-cta { align-self: flex-start; background: var(--color-brand-2); }

/* Step 3's example is the slip itself: a card inside the panel. */
.ex-row__sport--strong { color: var(--color-text-alt); font-weight: 900; font-size: var(--fs-xs); line-height: 15px; }
.ex-row__more { font-weight: 800; font-size: var(--fs-3xs); line-height: 12px; }
.ex-slip {
  display: flex; flex-direction: column; gap: var(--space-12);
  min-height: 120px; padding: var(--space-16);
  background: var(--color-surface-2);
}
.ex-slip__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.ex-slip__pick { color: var(--color-text-alt); font-family: var(--font-display); font-weight: 900; font-size: var(--fs-base); line-height: 17px; }
.ex-slip__odds { color: var(--color-brand-2); font-family: var(--font-display); font-weight: 900; font-size: var(--fs-base); line-height: 17px; }
.ex-slip__sub { color: var(--color-muted-2); font-size: var(--fs-xs); line-height: 16px; }
.ex-slip__stake { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); min-height: 31px; }
.ex-slip__stake-label { color: var(--color-muted-2); font-family: var(--font-display); font-size: var(--fs-2xs); line-height: 14px; }
.ex-slip__stake-value {
  padding: 4px var(--space-12);
  background: var(--color-surface-3); color: var(--color-text-alt);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm); line-height: 16px;
}
.ex-return { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); min-height: 20px; }
.ex-return__label { color: var(--color-muted-2); font-family: var(--font-display); font-size: var(--fs-2xs); line-height: 14px; }
.ex-return__value { color: var(--color-brand-2); font-family: var(--font-display); font-weight: 900; font-size: var(--fs-body); line-height: 20px; }

/* Step 4 is drawn differently: full-width text above a wide, two-column panel. */
.step--wide { background: var(--color-surface-3); }
.step--wide .step__inner { flex-direction: column; align-items: stretch; gap: var(--space-40); }
.step--wide .step__text { width: 100%; }
.step--wide .step__example {
  flex-direction: row; align-items: flex-start; gap: var(--space-48);
  width: 100%; min-height: 191px; padding: var(--space-32);
  background: var(--color-surface-2);
}
.ex-col { display: flex; flex-direction: column; }
.ex-col--checks { width: 800px; flex: none; gap: var(--space-16); }
.ex-col__title { color: var(--color-brand-2); font-family: var(--font-display); font-weight: 900; font-size: var(--fs-base); line-height: 17px; }
.ex-col--checks .ex-checks { gap: var(--space-12); }
.ex-col--totals { width: 400px; flex: none; gap: var(--space-20); }
.ex-col--totals .ex-figures { gap: var(--space-20); }
.step--wide .ex-cta { width: 100%; min-height: 48px; background: var(--color-brand-2); }

/* ── mobile: frame pumt123-how-it-works-mobile (390) ──────────────────── */
@media (max-width: 1199px) {
  /* hero 390×554: pad 40/16, gap 24 — text stack then the vertical step list */
  .hiw-hero { flex-direction: column; gap: var(--space-24); min-height: 0; padding: var(--space-40) var(--container-pad-m); background: var(--color-surface-2); }
  .hiw-hero__left, .hiw-hero__intro, .hiw-hero__right { width: 100%; }
  .hiw-hero__left { padding: 0; }
  .hiw-hero__intro { gap: var(--space-12); }
  .hiw-hero__intro .eyebrow { font-size: var(--fs-3xs); line-height: 12px; letter-spacing: .1em; }
  .hiw-hero__intro .eyebrow--rule::before { width: 12px; }
  .hiw-hero__title { font-size: var(--fs-h2); line-height: 35px; letter-spacing: 0; }
  .hiw-hero__lead { font-size: var(--fs-base); line-height: 21px; }
  .hiw-hero__divider { display: none; }
  .hiw-hero__right { padding: var(--space-16) 0; background: none; }
  /* The 390 frame links the four steps with a short connector line. */
  .hiw-steps { gap: var(--space-16); }
  .hiw-steps__item:not(:last-child) { position: relative; padding-bottom: 23px; }
  .hiw-steps__item:not(:last-child)::after {
    content: ""; position: absolute; left: 13px; bottom: 0;
    width: 1px; height: 12px; background: var(--color-chip);
  }
  .hiw-steps__link { gap: var(--space-12); }
  .hiw-steps__no { width: 28px; height: 28px; font-size: var(--fs-3xs); line-height: 12px; }
  .hiw-steps__label { color: var(--color-muted-2); font-size: var(--fs-3xs); line-height: 12px; }
  .hiw-steps__item.is-active .hiw-steps__label { color: var(--color-brand-2); }
  .hiw-steps__item:first-child .hiw-steps__label { color: var(--color-brand-2); }

  /* steps 390×403 (1, 2) and 465 / 464 (3, 4): pad 40/16, gap 24 */
  .step { padding-block: var(--space-40); }
  .step__inner, .step--flip .step__inner, .step--wide .step__inner {
    flex-direction: column; align-items: stretch; gap: var(--space-24);
  }
  .step__text { gap: var(--space-12); }
  .step__example { min-height: 176px; padding: var(--space-16); gap: var(--space-16); }
  .ex-slip { min-height: 108px; padding: var(--space-12); gap: 10px; }
  .ex-slip__pick, .ex-slip__odds { font-size: var(--fs-sm); line-height: 16px; }
  .ex-slip__sub { font-size: var(--fs-2xs); line-height: 14px; }
  .ex-slip__stake { min-height: 34px; }
  .ex-return { min-height: 17px; }
  .ex-return__value { font-size: var(--fs-base); line-height: 17px; }
  .ex-col--checks { gap: var(--space-12); }
  .ex-col--totals { gap: var(--space-16); }
  .ex-col--totals .ex-figures { gap: var(--space-12); }
  .ex-checks li { font-size: var(--fs-2xs); line-height: 16px; }
  .ex-col--checks .ex-checks { gap: var(--space-8); }
  .ex-row__sport, .ex-row__more { font-size: var(--fs-3xs); line-height: 12px; }
  .ex-event__name { font-size: var(--fs-base); line-height: 17px; }
  .ex-event__odds .odd { min-height: 48px; padding: 8px var(--space-12); gap: var(--space-4); }
  .ex-event__odds .odd__label { font-size: var(--fs-4xs); line-height: 12px; }
  .ex-event__odds .odd__value { font-size: var(--fs-sm); line-height: 16px; }

  .step__text, .step__example { width: 100%; }
  .step__title { font-size: var(--fs-h2-m); line-height: 27px; }
  .step__lead { font-size: var(--fs-sm); line-height: 19px; }

  .ex-event { flex-direction: column; align-items: stretch; gap: var(--space-12); }
  .ex-event__name { max-width: none; font-size: var(--fs-base); line-height: 18px; }
  .ex-event__odds { display: grid; grid-template-columns: repeat(2, 1fr); }
  .ex-event__odds .odd { width: auto; }
  .ex-cta { align-self: stretch; }
  .step--wide .step__example { flex-direction: column; gap: var(--space-20); padding: var(--space-16); }
  .ex-col--checks, .ex-col--totals { width: 100%; }
}