/* How it works — frames how-it-works (6:1267) and mobile-how-it-works (38:429). Numbers from gen.js / fig-outline. */

/* ── 03 hero ──────────────────────────────────────────────────────────── */
.hiw-hero { display: flex; flex-direction: column; gap: 24px; min-height: 340px; padding: 64px var(--container-pad) 44px; background: var(--color-purple); }   /* frame is FIXED 340: the bottom 20 of the padding is clipped */
.hiw-hero__eyebrow { font-weight: 800; font-size: 14px; line-height: 18px; text-transform: uppercase; color: var(--color-brand); }
.hiw-hero__title { font-family: var(--font-display); font-size: 56px; line-height: 60px; text-transform: uppercase; color: var(--color-text); }
.hiw-hero__copy { display: flex; flex-direction: column; gap: 4px; }
.hiw-hero__lead { font-size: 16px; line-height: 24px; color: var(--color-card-3); }
.hiw-hero__note { font-size: 14px; line-height: 18px; color: var(--color-brand); }

/* ── 04 step rail (anchor navigation) ─────────────────────────────────── */
.rail {
  display: flex; align-items: center; gap: 0;
  min-height: 81px; padding: 20px var(--container-pad);
  background: var(--color-surface); box-shadow: inset 0 -1px 0 var(--color-border);
}
.rail__label { display: none; }
.rail__list { display: contents; }
.rail__item { display: flex; align-items: center; }
/* the connector sits 50px from both badges (Figma 6:1313: 247→297 line 80 →377→427); the free width of the rail goes into
   the lines, not the gaps, so it stays centred between the badges at every desktop width */
.rail__item + .rail__item { flex: 1 1 auto; min-width: 0; }
.rail__item + .rail__item::before { content: ""; flex: 1 1 80px; min-width: 24px; height: 1px; margin: 0 50px; background: var(--color-border); }
.rail__item:has(.is-active) + .rail__item::before { background: var(--color-ink-2); }
.rail__link {
  display: inline-flex; align-items: center; gap: 16px; padding: 12px 20px;
  border-radius: var(--radius-xs); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border);
  font-family: var(--font-display); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.rail__num { font-size: 16px; line-height: 17px; color: var(--color-brand); }
.rail__name { font-size: 13px; line-height: 14px; text-transform: uppercase; color: var(--color-text); }
.rail__link:hover { background: var(--color-surface-2); box-shadow: inset 0 0 0 1px var(--color-border-2); }
.rail__link:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--color-border-2), var(--focus-ring); }
.rail__link.is-active { background: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); }
.rail__link.is-active .rail__num, .rail__link.is-active .rail__name { color: var(--color-ink); }

/* ── 05 section heading ───────────────────────────────────────────────── */
.hiw-head { padding: 48px var(--container-pad) 24px; }
.hiw-head__inner { display: flex; flex-direction: column; gap: 8px; }
.hiw-head__title { font-family: var(--font-display); font-size: 28px; line-height: 30px; text-transform: uppercase; color: var(--color-text); }
.hiw-head__lead { font-size: 14px; line-height: 18px; color: var(--color-muted); }

/* ── 06–09 steps ──────────────────────────────────────────────────────── */
.hstep { display: flex; align-items: flex-start; gap: 48px; padding: 64px var(--container-pad); scroll-margin-top: 80px; }
.hstep--light { background: var(--color-card-2); }
.hstep--dark { background: var(--color-bg); }
.hstep--surface { background: var(--color-surface); }
.hstep--swap { flex-direction: row-reverse; }
.hstep__text { display: flex; flex-direction: column; gap: 20px; flex: 0 0 420px; width: 420px; }
.hstep__left { display: flex; flex-direction: column; gap: 24px; flex: 0 0 460px; width: 460px; }
.hstep__left .hstep__text { flex: none; width: auto; }
.hstep__copy { display: contents; }
.hstep__num { font-family: var(--font-display); font-size: 48px; line-height: 52px; color: var(--color-purple); }
.hstep__titles { display: flex; flex-direction: column; gap: 4px; }
.hstep__label { font-family: var(--font-display); font-size: 14px; line-height: 15px; text-transform: uppercase; color: var(--color-purple); }
.hstep__title { font-family: var(--font-display); font-size: 24px; line-height: 26px; text-transform: uppercase; color: var(--color-ink); }
.hstep__body { font-size: 14px; line-height: 22px; color: var(--color-black); }
.hstep--dark .hstep__num, .hstep--surface .hstep__num, .hstep--dark .hstep__label, .hstep--surface .hstep__label { color: var(--color-brand); }
.hstep--dark .hstep__title, .hstep--surface .hstep__title { color: var(--color-text); }
.hstep--dark .hstep__body, .hstep--surface .hstep__body { color: var(--color-muted); }
.hstep__figure { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
.hstep__figure--confirm { gap: 16px; }
.hstep__caption { font-size: 13px; line-height: 17px; color: #121217; }   /* one-off near-ink from the mockup */
.hstep__caption--selected { display: flex; align-items: center; gap: 8px; align-self: flex-start; color: var(--color-brand); }
.example__selected { padding: 2px 6px; border-radius: var(--radius-xs); background: var(--color-red); color: var(--color-text); font-weight: 900; font-size: 9px; line-height: 12px; text-transform: uppercase; white-space: nowrap; }
.example__selected--lg { display: inline-flex; padding: 4px 8px; font-weight: 800; font-size: 10px; line-height: 13px; }

/* the illustrated market card (a picture of the row, not the live component) */
.example { display: flex; flex-direction: column; border-radius: var(--radius-sm); background: var(--color-card); box-shadow: inset 0 0 0 1px var(--color-border-light); overflow: hidden; }
.example__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 45px; padding: 14px; background: var(--color-card-2); }
.example__cat { display: flex; align-items: center; gap: 8px; }
.example__sport { font-family: var(--font-display); font-size: 14px; line-height: 15px; text-transform: uppercase; color: var(--color-ink); white-space: nowrap; }
.example__region { font-size: 13px; line-height: 17px; color: var(--color-muted); white-space: nowrap; }
.example__viewall { font-weight: 700; font-size: 13px; line-height: 17px; color: var(--color-purple); text-decoration: none; white-space: nowrap; }
.example__viewall:hover, .example__more:hover { text-decoration: underline; }
.example__viewall--foot { display: none; }
.example__body { display: flex; align-items: center; gap: 20px; min-height: 90px; padding: 16px; }
.example__info { display: flex; flex-direction: column; gap: 4px; flex: 0 0 180px; width: 180px; }
.example__when { font-size: 11px; line-height: 14px; text-transform: uppercase; color: var(--color-muted); }
.example__teams { display: flex; flex-direction: column; gap: 4px; font-weight: 800; font-size: 14px; line-height: 18px; color: var(--color-ink); }
.example__pick { display: contents; }
.example__market { display: flex; flex-direction: column; gap: 2px; flex: 0 0 100px; width: 100px; }
.example__market-label { font-weight: 600; font-size: 10px; line-height: 13px; text-transform: uppercase; color: var(--color-muted); }
.example__market-name { font-size: 13px; line-height: 17px; color: var(--color-black); }
.example__odds { display: flex; gap: 8px; flex: 1; min-width: 0; }
.example__odd {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1; min-width: 0; min-height: 42px; padding: 12px;
  border-radius: var(--radius-sm); background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border);
}
.example__odd .example__selected { display: none; }
.example__odd-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.example__odd-name { font-weight: 700; font-size: 11px; line-height: 14px; text-transform: uppercase; color: var(--color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.example__odd-price { font-family: var(--font-mono); font-weight: 800; font-size: 14px; line-height: 18px; color: var(--color-brand); }
.example__odd.is-selected { background: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); }
.example__odd.is-selected .example__odd-name { font-weight: 800; color: var(--color-ink); }
.example__odd.is-selected .example__odd-price { font-weight: 900; color: var(--color-ink); }
.example__foot { display: contents; }
.example__more { font-size: 13px; line-height: 17px; color: var(--color-black); text-decoration: none; white-space: nowrap; }
.example--dark { background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); }
.example--dark .example__head { background: var(--color-surface-2); }
.example--dark .example__sport, .example--dark .example__teams { color: var(--color-text); }
.example--dark .example__viewall { color: var(--color-brand); }
.example--dark .example__market-name, .example--dark .example__more { color: var(--color-card-3); }

/* formula box (step 3) */
.formula { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--radius-sm); background: var(--color-card); box-shadow: inset 0 0 0 1px var(--color-border-light); }
.formula__label { font-weight: 800; font-size: 11px; line-height: 14px; text-transform: uppercase; color: var(--color-muted); }
.formula__eq { font-family: var(--font-mono); font-weight: 900; font-size: 16px; line-height: 21px; color: var(--color-ink); }
.formula__note { font-size: 12px; line-height: 16px; color: var(--color-muted); white-space: nowrap; }   /* 435px of text in a 428px column: Figma lets it run into the padding, so do we */

/* the illustrated bet slip (step 3) */
.slipd { display: flex; flex-direction: column; gap: 20px; flex: 0 0 360px; width: 360px; padding: 20px; border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); }
.slipd__head { display: flex; align-items: center; justify-content: space-between; min-height: 22px; }
.slipd__title { font-family: var(--font-display); font-size: 18px; line-height: 20px; text-transform: uppercase; color: var(--color-text); }
.slipd__count { display: inline-flex; padding: 4px 8px; background: var(--color-red); color: var(--color-text); font-family: var(--font-mono); font-weight: 900; font-size: 11px; line-height: 14px; text-transform: uppercase; white-space: nowrap; }
.slipd__pick { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--radius-sm); background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border); }
.slipd__pick-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 17px; }
.slipd__pick-meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.slipd__sport { display: inline-flex; padding: 2px 6px; border-radius: var(--radius-xs); background: var(--color-purple); color: var(--color-text); font-weight: 800; font-size: 10px; line-height: 13px; text-transform: uppercase; }
.slipd__event { font-size: 11px; line-height: 14px; color: var(--color-muted); white-space: nowrap; }
.slipd__remove { font-weight: 700; font-size: 11px; line-height: 14px; color: var(--color-red); white-space: nowrap; }
.slipd__pick-bottom { display: flex; flex-direction: column; gap: 2px; }
.slipd__market { font-size: 11px; line-height: 14px; color: var(--color-muted); }
.slipd__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; }
.slipd__name { font-weight: 800; font-size: 14px; line-height: 18px; color: var(--color-text); }
.slipd__odds { font-family: var(--font-mono); font-weight: 900; font-size: 14px; line-height: 18px; color: var(--color-brand); }
.slipd__stake { display: flex; flex-direction: column; gap: 6px; }
.slipd__label { font-weight: 800; font-size: 11px; line-height: 14px; text-transform: uppercase; color: var(--color-muted); }
.slipd__input { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 12px; border-radius: var(--radius-sm); background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-ink-2); }
.slipd__currency, .slipd__value { font-family: var(--font-mono); font-weight: 900; font-size: 14px; line-height: 18px; }
.slipd__currency { color: var(--color-brand); }
.slipd__value { color: var(--color-text); }
.slipd__line { height: 1px; margin: 0 0 -1px; border: 0; background: var(--color-border); }   /* Figma LINE: 1px paint, 0 in flow */
.slipd__return { display: flex; align-items: center; justify-content: space-between; min-height: 21px; }
.slipd__return-label { font-size: 13px; line-height: 17px; text-transform: uppercase; color: var(--color-muted); }
.slipd__return-value { font-family: var(--font-mono); font-weight: 900; font-size: 16px; line-height: 21px; color: var(--color-green); }
.slipd__place, .confirm__place { display: flex; align-items: center; justify-content: center; min-height: 43px; padding: 14px; border-radius: var(--radius-sm); background: var(--color-brand); color: var(--color-ink); font-family: var(--font-display); font-size: 14px; line-height: 15px; text-transform: uppercase; }
.slipd__foot { display: flex; flex-direction: column; gap: 4px; }
.slipd__note { font-size: 11px; line-height: 14px; color: var(--color-muted); }
.slipd__limit { align-self: flex-start; font-weight: 700; font-size: 11px; line-height: 14px; color: var(--color-brand); text-decoration: none; }
.slipd__limit:hover { text-decoration: underline; }

/* confirmation review + accepted band (step 4) */
.confirm { display: flex; flex-direction: column; gap: 20px; padding: 20px; border-radius: var(--radius-sm); background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-border); }
.confirm__title { font-family: var(--font-display); font-size: 16px; line-height: 17px; text-transform: uppercase; color: var(--color-text); }
.confirm__box { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radius-sm); background: var(--color-surface-2); }
.confirm__summary { font-weight: 800; font-size: 11px; line-height: 14px; text-transform: uppercase; color: var(--color-brand); }
.confirm__line { height: 1px; margin: 0 0 -1px; border: 0; background: var(--color-border); }
.confirm__rows { display: flex; flex-direction: column; gap: 6px; }
.confirm__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 17px; }
.confirm__row dt { font-size: 13px; line-height: 17px; text-transform: uppercase; color: var(--color-muted); }
.confirm__val { font-weight: 700; font-size: 13px; line-height: 17px; color: var(--color-text); }
.confirm__val--mono { font-family: var(--font-mono); }
.confirm__val--green { color: var(--color-green); }
.accepted { display: flex; align-items: center; gap: 12px; min-height: 49px; padding: 16px; border-radius: var(--radius-sm); background: #4a1575; box-shadow: inset 0 0 0 1px var(--color-purple); }   /* one-off deep purple from the mockup */
.accepted__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--color-green); }
.accepted__copy { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.accepted__title { font-weight: 700; font-size: 13px; line-height: 17px; text-transform: uppercase; color: var(--color-text); }
.accepted__text { font-size: 13px; line-height: 17px; color: var(--color-muted); }
.accepted__link { font-weight: 700; font-size: 13px; line-height: 17px; text-transform: uppercase; color: var(--color-brand); text-decoration: none; }
.accepted__link:hover { text-decoration: underline; }

/* ── 10 flow recap ────────────────────────────────────────────────────── */
.flow { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 65px; padding: 24px var(--container-pad); background: var(--color-bg); box-shadow: inset 0 -1px 0 var(--color-border); }
.flow__left { display: flex; align-items: center; gap: 24px; }
.flow__title { font-family: var(--font-display); font-size: 14px; line-height: 15px; text-transform: uppercase; color: var(--color-brand); white-space: nowrap; }
.flow__text { font-size: 13px; line-height: 17px; color: var(--color-card-3); }
.flow__list { display: none; }
.flow__links { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 0 0 440px; min-width: 0; }
.flow__link { font-weight: 700; font-size: 13px; line-height: 17px; text-transform: uppercase; color: var(--color-muted); text-decoration: none; white-space: nowrap; }
.flow__link:hover { color: var(--color-text); text-decoration: underline; }
.flow__link--rw { color: var(--color-red); }
.flow__link--rw:hover { color: var(--color-red); }

/* ── 11 responsible transition ────────────────────────────────────────── */
.hiw-rw { display: flex; flex-direction: column; gap: 12px; padding: 48px var(--container-pad); background: var(--color-purple); }
.hiw-rw__title { font-family: var(--font-display); font-size: 32px; line-height: 35px; text-transform: uppercase; color: var(--color-text); }
.hiw-rw__text { font-size: 15px; line-height: 20px; color: var(--color-card-3); }

/* ── mobile (390 frame) ───────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .hiw-hero { gap: 16px; min-height: 0; padding: 32px var(--container-pad); }
  .hiw-hero__eyebrow { font-size: 12px; line-height: 16px; color: #f5a623; }   /* one-off amber from the mobile frame */
  .hiw-hero__title { font-size: 36px; line-height: 40px; }
  .hiw-hero__copy { display: contents; }
  .hiw-hero__lead { font-size: 14px; line-height: 22px; color: var(--color-card-2); }
  .hiw-hero__note { font-weight: 700; font-size: 12px; line-height: 16px; color: #f5a623; }

  .rail { flex-direction: column; align-items: stretch; gap: 12px; min-height: 0; padding: 24px var(--container-pad); box-shadow: inset 0 0 0 1px var(--color-border); }
  .rail__label { display: block; font-weight: 800; font-size: 11px; line-height: 14px; text-transform: uppercase; color: var(--color-muted); }
  .rail__list { display: flex; flex-direction: column; gap: 2px; }
  .rail__item { display: block; }
  .rail__item + .rail__item::before { display: none; }
  .rail__link { display: flex; gap: 12px; min-height: 31px; padding: 8px 0; border-radius: 0; background: none; box-shadow: none; }
  .rail__link:hover { background: none; box-shadow: none; }
  .rail__link:focus-visible { box-shadow: var(--focus-ring); }
  .rail__num { font-size: 14px; line-height: 15px; color: var(--color-muted); }
  .rail__name { color: var(--color-muted); }
  .rail__link:hover .rail__num, .rail__link:hover .rail__name { color: var(--color-text); }
  .rail__link.is-active { background: none; box-shadow: none; }
  .rail__link.is-active .rail__num, .rail__link.is-active .rail__name { color: var(--color-brand); }

  .hiw-head { padding: 32px var(--container-pad) 20px; }
  .hiw-head__title { font-size: 24px; line-height: 26px; }
  .hiw-head__lead { font-size: 13px; line-height: 17px; }

  .hstep, .hstep--swap { flex-direction: column; align-items: stretch; gap: 24px; padding: 40px var(--container-pad); scroll-margin-top: 56px; }
  .hstep__text, .hstep__left .hstep__text { flex: none; width: auto; gap: 12px; }
  .hstep__left { display: contents; }
  .hstep__copy { display: flex; flex-direction: column; gap: 12px; }
  .hstep__titles { display: contents; }
  .hstep__num { font-size: 40px; line-height: 44px; }
  .hstep__label { font-family: var(--font-body); font-weight: 800; font-size: 12px; line-height: 16px; text-transform: none; color: var(--color-purple-btn); }
  .hstep__title { font-size: 28px; line-height: 32px; }
  .hstep__body { color: var(--color-ink-2); }
  .hstep__figure, .hstep__figure--confirm { display: contents; }
  .hstep__caption { font-weight: 600; color: var(--color-ink); }
  .hstep__caption--selected { display: block; align-self: auto; color: var(--color-brand); }
  .example__selected--lg { display: none; }
  .example__odd .example__selected { display: inline-flex; }

  .example { background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); }
  .example__head { min-height: 38px; padding: 12px; background: var(--color-bg); }
  .example__sport { font-size: 12px; line-height: 13px; color: var(--color-text); }
  .example__region { font-size: 11px; line-height: 14px; }
  .example__viewall--head { display: none; }
  .example__body { flex-direction: column; align-items: stretch; gap: 16px; min-height: 0; padding: 16px; }
  .example__info { flex: none; width: auto; }
  .example__teams { font-size: 16px; line-height: 21px; color: var(--color-text); }
  .example__pick { display: flex; flex-direction: column; gap: 4px; }
  .example__market { display: block; flex: none; width: auto; font-weight: 800; font-size: 11px; line-height: 14px; text-transform: uppercase; color: var(--color-muted); }
  .example__market-label, .example__market-name { font: inherit; color: inherit; }
  .example__odds { flex-direction: column; flex: none; }
  .example__odd { flex: none; min-height: 52px; padding: 14px; }
  .example__odd-name { font-size: 12px; line-height: 16px; }
  .example__odd-price { font-weight: 900; font-size: 15px; line-height: 20px; }
  .example__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 17px; }
  .example__foot--desk { display: none; }
  .example__more { color: var(--color-muted); }
  .example__viewall--foot { display: inline; color: var(--color-purple-btn); }
  .example--dark .example__more { color: var(--color-muted); }

  .formula { gap: 8px; }
  .formula__eq { font-size: 15px; line-height: 20px; }
  .formula__note { white-space: normal; }

  .slipd { flex: none; width: auto; gap: 16px; padding: 16px; }
  .slipd__head { min-height: 19px; }
  .slipd__title { font-size: 16px; line-height: 17px; }
  .slipd__count { padding: 3px 8px; font-size: 10px; line-height: 13px; }
  .slipd__pick { gap: 8px; }
  .slipd__pick-top { min-height: 16px; }
  .slipd__sport { font-size: 9px; line-height: 12px; background: var(--color-purple-btn); }
  .slipd__return { min-height: 20px; }
  .slipd__return-label { font-size: 12px; line-height: 16px; }
  .slipd__return-value { font-size: 15px; line-height: 20px; }
  .slipd__place, .confirm__place { min-height: 52px; }
  .slipd__line--foot { display: none; }                      /* the mobile frame draws one rule only */

  .confirm { gap: 16px; }
  .confirm__title { font-size: 14px; line-height: 15px; }
  .confirm__box { gap: 10px; }
  .confirm__row { min-height: 16px; }
  .confirm__row dt, .confirm__val { font-size: 12px; line-height: 16px; }
  .accepted { min-height: 85px; }
  .accepted__dot { width: 8px; height: 8px; }
  .accepted__copy { flex-direction: column; align-items: flex-start; gap: 2px; }
  .accepted__text, .accepted__link { font-size: 12px; line-height: 16px; }

  .flow { flex-direction: column; align-items: stretch; gap: 20px; min-height: 0; padding: 32px var(--container-pad); background: var(--color-surface); box-shadow: none; }
  .flow__left { flex-direction: column; align-items: stretch; gap: 20px; }
  .flow__title { font-size: 16px; line-height: 17px; }
  .flow__text { display: none; }
  .flow__list { display: flex; flex-direction: column; gap: 12px; }
  .flow__item { display: flex; align-items: center; gap: 16px; min-height: 18px; }
  .flow__num { font-family: var(--font-display); font-size: 14px; line-height: 15px; color: var(--color-brand); }
  .flow__name { font-size: 14px; line-height: 18px; color: var(--color-text); }
  .flow__links { flex: none; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; min-height: 87px; padding: 12px 0 0; }   /* frame is FIXED 87: its bottom padding is clipped */

  .hiw-rw { padding: 40px var(--container-pad); }
  .hiw-rw__title { font-size: 28px; line-height: 34px; }
  .hiw-rw__text { font-size: 14px; line-height: 22px; color: var(--color-card-2); }
}

/* 1200–1439: the example market row keeps its fixed columns, the prices drop to a second line */
@media (min-width: 1200px) and (max-width: 1439px) {
  .example__body { flex-wrap: wrap; row-gap: 12px; }
  .example__odds { flex: 1 0 100%; order: 5; }
}

/* Mobile frame (mobile-how-it-works) paints a few surfaces differently from the desktop frame */
@media (max-width: 1199px) {
  .hstep--light { box-shadow: inset 0 0 0 1px var(--color-border-light); }
  .hstep--surface { background: var(--color-bg); }
  .example--dark .example__head { background: var(--color-bg); }
  .example__odd.is-selected { box-shadow: none; }
  .confirm { background: var(--color-surface); }
  .confirm__box { background: var(--color-bg); }
  .accepted { box-shadow: inset 0 0 0 1px var(--color-purple-btn); }
}