/* ===== HOW IT WORKS ===== */
.hiw-hero { border-bottom: 1px solid var(--line); }
.hiw-hero__in { display: flex; align-items: flex-start; gap: 48px; padding-top: 64px; padding-bottom: 64px; }
.hiw-hero__left { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.hiw-hero__left h1 { font: 700 56px/58px var(--f-narrow); letter-spacing: -.5px; color: #fff; }
.hiw-hero__lead { font: 400 16px/26px var(--f-sans); color: var(--gray); }
.hiw-hero__sub { font: 400 14px var(--f-sans); color: var(--gray-2); }
.hiw-rail { flex: none; width: 380px; display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; }
.hiw-rail__title { font: 700 12px var(--f-narrow); letter-spacing: 1.5px; color: var(--gray); }
.hiw-rail__steps { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.hiw-rail__step { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1px solid transparent; border-radius: 2px; }
.hiw-rail__step span { font: 700 11px var(--f-mono); color: var(--gray-2); }
.hiw-rail__step b { font: 700 13px var(--f-narrow); letter-spacing: .5px; color: var(--gray); }
.hiw-rail__step.is-active { background: var(--red-13); border-color: var(--red); }
.hiw-rail__step.is-active span { color: var(--red); }
.hiw-rail__step.is-active b { color: var(--cream); }
.hiw-rail hr { border-color: var(--line); }
.hiw-rail__example { display: flex; align-items: center; gap: 8px; }
.hiw-rail__example span:first-child { font: 700 10px var(--f-mono); color: var(--red); }
.hiw-rail__example span:last-child { font: 400 12px var(--f-sans); color: var(--gray); }

.hiw-note { background: var(--red-13); border-bottom: 1px solid var(--red); }
.hiw-note__in { display: flex; justify-content: space-between; align-items: center; gap: 24px; height: 67px; }
.hiw-note__text { display: flex; align-items: center; gap: 12px; }
.hiw-note__text b { font: 700 14px var(--f-narrow); letter-spacing: 1px; color: var(--red); white-space: nowrap; }
.hiw-note__text span { font: 400 13px var(--f-sans); color: var(--cream); }
.hiw-note__cta { font: 700 13px var(--f-sans); color: var(--cream); white-space: nowrap; }
.hiw-note__cta:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.hiw-step { border-bottom: 1px solid var(--line); }
.hiw-step__in { display: flex; align-items: center; gap: 64px; padding-top: 80px; padding-bottom: 80px; }
.hiw-step__text { flex: none; width: 420px; display: flex; flex-direction: column; gap: 16px; }
.hiw-step__num { font: 700 96px/80px var(--f-narrow); color: var(--red); }
.hiw-step__text h2 { font: 700 28px var(--f-narrow); letter-spacing: .5px; color: #fff; }
.hiw-step__text p { font: 400 14px/22px var(--f-sans); color: var(--gray); }
.hiw-step__sub { font-size: 13px !important; line-height: 17px !important; color: var(--gray-2) !important; }
.hiw-step__preview { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.hiw-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.hiw-card__head { display: flex; justify-content: space-between; align-items: center; height: 51px; padding: 0 16px; background: var(--bg-3); border-bottom: 1px solid var(--line); }
.hiw-card__head > div { display: flex; align-items: center; gap: 8px; }
.hiw-card__league { font: 700 14px var(--f-narrow); color: #fff; }
.hiw-card__sub { font: 400 12px var(--f-sans); color: var(--gray); }
.hiw-card__body { display: flex; align-items: center; gap: 20px; padding: 16px; }
.hiw-card__teams { flex: none; width: 200px; display: flex; flex-direction: column; gap: 4px; }
.hiw-card__time { font: 400 11px var(--f-mono); color: var(--gray); }
.hiw-card__teams b { font: 700 14px var(--f-sans); color: #fff; }
.hiw-card__market { flex: none; width: 100px; display: flex; flex-direction: column; gap: 2px; }
.hiw-card__market span:first-child { font: 600 10px var(--f-sans); text-transform: uppercase; color: var(--gray-2); }
.hiw-card__market span:last-child { font: 400 13px var(--f-sans); color: var(--gray); }
.hiw-card__odds { flex: 1; display: flex; gap: 8px; }
.odd--hiw { height: 41px; padding: 0 12px; }
.hiw-card__more { flex: none; font: 400 13px var(--f-sans); color: var(--gray); }
.hiw-anno { display: flex; align-items: center; gap: 8px; }
.hiw-anno > span:last-child { font: 400 13px var(--f-sans); color: var(--gray); }
.hiw-connector { display: flex; justify-content: center; align-items: center; height: 72px; border-bottom: 1px solid var(--line); }
.pill--lg { padding: 4px 16px; font-size: 11px; }
.hiw-step__text--3 { gap: 24px; }
.hiw-step__text--3 > div { display: flex; flex-direction: column; gap: 12px; }
.hiw-formula { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; }
.hiw-formula__label { font: 700 11px var(--f-narrow); letter-spacing: 1px; color: var(--gray); }
.hiw-formula__row { display: flex; align-items: baseline; gap: 8px; }
.hiw-formula__row b { font: 700 16px var(--f-mono); color: #fff; }
.hiw-formula__row i { font: 400 14px var(--f-sans); font-style: normal; color: var(--gray-2); }
.hiw-formula__row em { font: 800 18px var(--f-mono); font-style: normal; color: var(--green); }
.hiw-formula small { font: 400 11px var(--f-sans); color: var(--gray-2); }
.hiw-slip { width: 340px; display: flex; flex-direction: column; gap: 16px; padding: 16px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; }
.hiw-slip hr { border-color: var(--line); }
.hiw-slip__head { display: flex; justify-content: space-between; align-items: center; }
.hiw-slip__head h3 { font: 700 18px var(--f-narrow); letter-spacing: .5px; color: #fff; }
.hiw-slip__sel { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--ink); border: 1px solid var(--line); border-radius: 2px; }
.hiw-slip__meta { display: flex; justify-content: space-between; align-items: center; font: 400 11px var(--f-sans); color: var(--gray); }
.hiw-slip__meta > span:first-child { display: flex; align-items: center; gap: 6px; }
.hiw-slip__meta .tag { font-size: 9px; }
.hiw-slip__meta > span:last-child { color: var(--gray-2); }
.hiw-slip__det { display: flex; flex-direction: column; gap: 2px; }
.hiw-slip__det > span { font: 400 12px var(--f-sans); color: var(--gray); }
.hiw-slip__det div { display: flex; justify-content: space-between; align-items: center; }
.hiw-slip__det b { font: 700 14px var(--f-sans); color: #fff; }
.hiw-slip__det em { font: 800 14px var(--f-mono); font-style: normal; color: var(--red); }
.hiw-slip__stake { display: flex; flex-direction: column; gap: 6px; }
.hiw-slip__stake label { font: 700 11px var(--f-sans); letter-spacing: .5px; color: var(--gray); }
.hiw-slip__ret { display: flex; justify-content: space-between; align-items: center; }
.hiw-slip__ret span { font: 400 12px var(--f-sans); color: var(--gray); }
.hiw-slip__ret b { font: 800 18px var(--f-mono); color: var(--green); }
.hiw-slip__place { height: 46px; background: var(--red); border-radius: 2px; font: 700 14px var(--f-sans); color: #fff; text-align: center; }
.hiw-slip__place:hover { background: #d42c28; }
.hiw-slip__help { display: flex; flex-direction: column; gap: 4px; }
.hiw-slip__help span { font: 400 10px var(--f-sans); color: var(--gray); }
.hiw-slip__help a { font: 700 11px var(--f-sans); color: var(--red); }
.hiw-step__preview--focus { align-items: center; }
.hiw-close { width: 340px; display: flex; flex-direction: column; gap: 16px; padding: 20px; background: var(--bg-2); border: 1px solid var(--red); border-radius: 2px; }
.hiw-close__row { display: flex; justify-content: space-between; align-items: center; }
.hiw-close__row span { font: 400 12px var(--f-sans); color: var(--gray); }
.hiw-close__row b { font: 700 15px var(--f-mono); color: #fff; }
.hiw-close__row em { font: 800 16px var(--f-mono); font-style: normal; color: var(--green); }
.hiw-close__btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; background: var(--red); border-radius: 2px; font: 700 14px var(--f-sans); letter-spacing: .5px; color: #fff; }

.hiw-sum { padding: 64px 0; border-bottom: 1px solid var(--line); }
.hiw-sum__head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 32px; }
.hiw-sum__head h2 { font: 700 32px var(--f-narrow); color: #fff; }
.hiw-track { display: flex; justify-content: space-between; align-items: center; padding: 20px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; margin-bottom: 32px; }
.hiw-track__step { display: inline-flex; align-items: center; gap: 12px; font: 700 14px var(--f-narrow); color: #fff; }
.hiw-track__step b { font: 800 14px var(--f-mono); color: var(--red); }
.hiw-track__arrow { color: var(--gray); }
.hiw-sum__ctas { display: flex; gap: 16px; }

@media (max-width: 1180px) {
  .hiw-hero__left h1 { font-size: 46px; line-height: 48px; }
  .hiw-rail { width: 320px; }
  .hiw-step__text { width: 340px; }
  .hiw-card__market { display: none; }
}
@media (max-width: 1023px) {
  .hiw-hero__in { flex-direction: column; }
  .hiw-rail { width: 100%; }
  .hiw-step__in { flex-direction: column; align-items: stretch; gap: 32px; }
  .hiw-step--rev .hiw-step__in, .hiw-step--4 .hiw-step__in { flex-direction: column-reverse; }
  .hiw-step__text { width: auto; }
  .hiw-note__in { height: auto; flex-wrap: wrap; padding: 16px 0; }
  .hiw-track { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 767px) {
  .hiw-hero__in { gap: 36px; padding-top: 36px; padding-bottom: 36px; }
  .hiw-hero__left { gap: 20px; }
  .hiw-hero__meta .sindex { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hiw-hero__meta .sindex__num { font-size: 10px; }
  .hiw-hero__meta .sindex__label { font-size: 10px; }
  .hiw-hero__left h1 { font-size: 38px; line-height: 40px; }
  .hiw-hero__lead { font-size: 14px; line-height: 22px; }
  .hiw-hero__sub { font-size: 13px; line-height: 20px; }
  .hiw-rail { padding: 16px; }
  .hiw-rail__title { font-size: 11px; }
  .hiw-rail__steps { align-items: stretch; gap: 4px; }
  .hiw-rail__step { height: 34px; gap: 12px; padding: 0 10px; }
  .hiw-rail__example { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hiw-note__in { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hiw-note__text { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hiw-note__text b { font-size: 13px; letter-spacing: .5px; white-space: normal; }
  .hiw-note__text span { font-size: 12px; line-height: 18px; }
  .hiw-note__cta { font-size: 12px; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  .hiw-step__in { gap: 28px; padding-top: 48px; padding-bottom: 48px; }
  .hiw-step--rev .hiw-step__in, .hiw-step--4 .hiw-step__in { flex-direction: column; }
  .hiw-step__text { gap: 12px; }
  .hiw-step__num { font-size: 56px; line-height: normal; }
  .hiw-step__text h2 { font-size: 24px; }
  .hiw-step__text p { font-size: 13px; line-height: 20px; }
  .hiw-step__sub { font-size: 12px !important; line-height: 16px !important; }
  .hiw-step__preview { gap: 12px; }
  .hiw-card__head { height: 40px; padding: 0 12px; }
  .hiw-card__head .arrow-link { font-size: 11px; }
  .hiw-card__league { font-size: 13px; }
  .hiw-card__sub { display: none; }
  .hiw-card__body { flex-direction: column; align-items: stretch; gap: 14px; padding: 12px; }
  .hiw-card__teams { width: auto; }
  .hiw-card__market { display: none; }
  .hiw-card__odds { flex-direction: column; gap: 8px; }
  .odd--hiw { height: 44px; }
  .hiw-card__more { font-size: 12px; }
  .hiw-anno { align-items: flex-start; }
  .hiw-anno > span:last-child { font-size: 12px; }
  .hiw-connector { height: 56px; }
  .pill--lg { padding: 4px 12px; gap: 6px; font-size: 10px; }
  .hiw-formula { gap: 8px; padding: 12px; }
  .hiw-formula__label { font-size: 10px; }
  .hiw-formula__row b { font-size: 14px; }
  .hiw-formula__row i { font-size: 12px; }
  .hiw-formula__row em { font-size: 16px; }
  .hiw-formula small { font-size: 9px; }
  .hiw-slip, .hiw-close { width: 100%; }
  .hiw-slip__head h3 { font-size: 16px; }
  .hiw-slip__sel { gap: 8px; padding: 10px; }
  .hiw-slip__stake label { font-size: 10px; }
  .hiw-slip__stake .stake__input { height: 37px; padding: 0 10px; }
  .hiw-slip__ret b { font-size: 16px; }
  .hiw-slip__place { height: 41px; font-size: 13px; }
  .hiw-slip__help { flex-direction: row; justify-content: space-between; }
  .hiw-slip__help a { font-size: 10px; }
  .hiw-close { gap: 12px; padding: 16px; }
  .hiw-close__btn { height: 41px; font-size: 13px; }
  .hiw-sum { padding: 48px 0; }
  .hiw-sum__head { margin-bottom: 24px; }
  .hiw-sum__head h2 { font-size: 26px; }
  .hiw-track { gap: 10px; padding: 16px; margin-bottom: 24px; }
  .hiw-track__step { font-size: 13px; }
  .hiw-track__step b { font-size: 13px; }
  .hiw-track__arrow { color: var(--gray-2); }
  .hiw-sum__ctas { flex-direction: column; gap: 10px; }
}