/* ===== How It Works ===== */

/* Hero */
.hiw-hero { position: relative; overflow: hidden; padding: 96px 0; border-bottom: 1px solid var(--c-line); }
.hiw-hero__inner { position: relative; display: flex; align-items: flex-start; gap: 64px; }
.hiw-hero__ghost { left: 40px; top: -176px; font-size: 200px; }
.hiw-hero__left { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.hiw-hero__title { display: flex; flex-direction: column; gap: 4px; }
.hiw-hero__title .display__line { font-size: 88px; line-height: 82px; }
.hiw-hero__text { font: 400 16px/26px var(--f-plex); color: var(--c-gray); }
.hiw-hero__right { position: relative; z-index: 1; width: 420px; flex: none; }

/* Process index */
.hiw-index { display: flex; flex-direction: column; border: 2px solid var(--c-line); }
.hiw-index__node { display: flex; align-items: center; gap: 16px; height: 76px; padding: 0 20px; border-top: 1px solid var(--c-line); transition: background-color var(--t-med) var(--ease), padding-left var(--t-med) var(--ease-out); }
.hiw-index__node:first-child { border-top: 0; }
.hiw-index__node:hover { padding-left: 26px; }
.hiw-index__num { font: 700 24px/var(--lh-osw) var(--f-osw); color: var(--c-gray); transition: color var(--t-fast); }
.hiw-index__label { font: 700 18px/var(--lh-osw) var(--f-osw); letter-spacing: 1px; color: var(--c-gray); transition: color var(--t-fast); }
.hiw-index__node:hover .hiw-index__label { color: var(--c-paper); }
.hiw-index__node--active { background: var(--c-line); }
.hiw-index__node--active .hiw-index__num { color: var(--c-orange); }
.hiw-index__node--active .hiw-index__label { color: var(--c-paper); }

/* Steps */
.hiw-step { padding: 80px 0; scroll-margin-top: 68px; }
.hiw-step--paper { background: var(--c-paper); color: var(--c-ink); border-bottom: 1px solid var(--c-ink); }
.hiw-step--dark { background: var(--c-bg); border-bottom: 1px solid var(--c-line); }
.hiw-step__inner { display: flex; align-items: flex-start; gap: 64px; }
.hiw-step__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hiw-step__visual { width: 640px; flex: none; }
.hiw-step--narrow .hiw-step__visual { width: 400px; }
.hiw-step--flip .hiw-step__visual { order: -1; }
.hiw-step__eyebrow { display: flex; align-items: center; gap: 8px; }
.hiw-step__num { font: 700 14px/var(--lh-osw) var(--f-osw); letter-spacing: 1px; color: var(--c-orange); }
.hiw-step__dash { width: 16px; height: 2px; flex: none; background: var(--c-orange); }
.hiw-step__label { font: 600 14px/var(--lh-osw) var(--f-osw); letter-spacing: 1.5px; color: var(--c-gray); text-transform: uppercase; }
.hiw-step__title { font: 700 56px/52px var(--f-osw); }
.hiw-step--paper .hiw-step__title { color: var(--c-ink); }
.hiw-step--dark .hiw-step__title { color: var(--c-paper); }
.hiw-step__body { font: 400 15px/24px var(--f-plex); }
.hiw-step--paper .hiw-step__body { color: var(--c-gray-2); }
.hiw-step--dark .hiw-step__body { color: var(--c-gray); }
.hiw-step__note { font: 700 12px/var(--lh-plex) var(--f-plex); letter-spacing: 1px; color: var(--c-orange); }

/* Preview wrapper: bare on desktop, framed "ui-preview-card" on mobile */
.hiw-preview { display: flex; flex-direction: column; gap: 16px; }
.hiw-preview__caption { font: 700 12px/var(--lh-osw) var(--f-osw); letter-spacing: 1px; color: var(--c-gray); }

/* Market-row preview (steps 1 & 2) */
.hiw-market { background: #000; border: 2px solid var(--c-line); padding: 24px; display: flex; flex-direction: column; gap: 20px; color: var(--c-paper); }
.hiw-market--selected { border-color: var(--c-orange); }
.hiw-market__meta { display: flex; justify-content: space-between; align-items: center; }
.hiw-market__meta-left { display: flex; align-items: center; gap: 12px; }
.hiw-market__comp { font: 700 14px/var(--lh-osw) var(--f-osw); letter-spacing: .5px; color: var(--c-orange); }
.hiw-market__sep { width: 12px; height: 1px; flex: none; background: var(--c-gray); }
.hiw-market--selected .hiw-market__sep { background: var(--c-orange); }
.hiw-market__time { font: 700 12px/var(--lh-plex) var(--f-plex); color: var(--c-gray); }
.hiw-market--selected .hiw-market__time { color: var(--c-paper); }
.hiw-market__status { font: 700 11px/var(--lh-plex) var(--f-plex); letter-spacing: .5px; color: var(--c-orange-dark); }
.hiw-market--selected .hiw-market__status { color: var(--c-orange); }
.hiw-market__title { font: 700 28px/var(--lh-osw) var(--f-osw); color: var(--c-paper); }
.hiw-market__odds { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.hiw-market__market { font: 700 13px/var(--lh-plex) var(--f-plex); color: var(--c-gray); }
.hiw-market--selected .hiw-market__market { color: var(--c-orange); }
.hiw-market__row { display: flex; gap: 8px; }
.hiw-odd { width: 110px; height: 52px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--c-paper); border: 1px solid var(--c-line); }
.hiw-odd__label { font: 700 9px/var(--lh-plex) var(--f-plex); color: var(--c-gray-2); }
.hiw-odd__value { font: 700 16px/var(--lh-osw) var(--f-osw); color: var(--c-ink); }
.hiw-odd--active { background: var(--c-orange); border-color: var(--c-orange); }
.hiw-odd--active .hiw-odd__label, .hiw-odd--active .hiw-odd__value { color: var(--c-paper); }

/* Editorial annotations (step 3) */
.hiw-ann { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; }
.hiw-ann__row { display: flex; align-items: center; gap: 12px; }
.hiw-ann__label { flex: none; font: 700 12px/var(--lh-osw) var(--f-osw); color: var(--c-orange); }
.hiw-ann__line { width: 100px; height: 0; flex: none; border-top: 1px dashed var(--c-ink); }
.hiw-ann__text { font: 400 12px/var(--lh-plex) var(--f-plex); color: var(--c-gray-2); }

/* Static bet-slip previews (steps 3 & 4) — reuse .slip__* element styles inside a page wrapper */
.hiw-slip { background: #000; border: 2px solid var(--c-line); padding: 28px; display: flex; flex-direction: column; gap: 20px; color: var(--c-paper); }
.hiw-slip--final { border-color: var(--c-orange); }
.hiw-slip .slip__count { color: var(--c-paper); }
.hiw-slip .slip__stake-input { display: block; }
.hiw-slip .slip__quick-btn { display: flex; align-items: center; justify-content: center; }
.hiw-slip__ready { font: 700 11px/var(--lh-osw) var(--f-osw); color: var(--c-orange); }
.hiw-slip__overview { background: var(--c-line); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.hiw-slip__overview .slip__row { align-items: flex-start; }
.hiw-slip__overview .slip__row-value--return { font-size: 18px; }
.hiw-place { height: 52px; padding: 0 24px; letter-spacing: 1.5px; }

/* Checklist (step 4) */
.hiw-check { display: flex; flex-direction: column; border: 1px solid var(--c-line); }
.hiw-check__row { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px; background: #000; border-top: 1px solid var(--c-line); }
.hiw-check__row:first-child { border-top: 0; }
.hiw-check__mark { font: 700 16px/var(--lh-osw) var(--f-osw); color: var(--c-orange); }
.hiw-check__label { font: 700 14px/var(--lh-plex) var(--f-plex); color: var(--c-paper); }

@media (max-width: 1099px) {
  .hiw-hero { padding: 64px 0; }
  .hiw-hero__inner { flex-direction: column; gap: 40px; }
  .hiw-hero__ghost { font-size: 140px; top: -120px; }
  .hiw-hero__title .display__line { font-size: 64px; line-height: 60px; }
  .hiw-hero__right { width: 100%; }
  .hiw-index { display: grid; grid-template-columns: 1fr 1fr; }
  .hiw-index__node { border-top: 0; }
  .hiw-index__node:nth-child(even) { border-left: 1px solid var(--c-line); }
  .hiw-index__node:nth-child(n+3) { border-top: 1px solid var(--c-line); }
  .hiw-step { padding: 56px 0; }
  .hiw-step__inner { flex-direction: column; gap: 40px; }
  .hiw-step__visual, .hiw-step--narrow .hiw-step__visual { width: 100%; max-width: 640px; }
  .hiw-step--flip .hiw-step__visual { order: 0; }
  .hiw-step__title { font-size: 44px; line-height: 42px; }
}

@media (max-width: 767px) {
  .hiw-hero { padding: 30px 0 40px; border-bottom: 0; }
  .hiw-hero__ghost { display: none; }
  .hiw-hero__left { gap: 24px; }
  .hiw-hero__eyebrow { font-size: 12px; }
  .hiw-hero__title { gap: 8px; margin-top: -4px; }
  .hiw-hero__title .display__line { font-size: 36px; line-height: 40px; }
  .hiw-hero__text { font-size: 14px; line-height: 22px; }
  .hiw-hero__right { display: none; }

  .hiw-step { padding: 40px 0; border-bottom: 0; }
  .hiw-step--dark { background: var(--c-surface); }
  .hiw-step__inner { gap: 24px; }
  .hiw-step__visual, .hiw-step--narrow .hiw-step__visual { max-width: none; }
  .hiw-step__num { font-size: 12px; letter-spacing: 0; }
  .hiw-step__label { font-size: 12px; letter-spacing: 1px; }
  .hiw-step__title { font-size: 32px; line-height: var(--lh-osw); }
  .hiw-step__body { font-size: 14px; line-height: 22px; }
  .hiw-step__note { font-size: 11px; letter-spacing: 0; }

  .hiw-preview { background: #000; border: 1px solid var(--c-line); padding: 16px; gap: 12px; }
  .hiw-preview__caption { font-size: 10px; }
  .hiw-market { background: var(--c-surface); border-width: 1px; padding: 16px; gap: 16px; }
  .hiw-market__meta-left { gap: 8px; }
  .hiw-market__comp { font-size: 12px; letter-spacing: 0; }
  .hiw-market__sep { width: 8px; }
  .hiw-market__time { font-size: 10px; }
  .hiw-market__status { font-size: 10px; letter-spacing: 0; }
  .hiw-market__title { font-size: 18px; }
  .hiw-market__odds { flex-direction: column; align-items: stretch; gap: 8px; }
  .hiw-market__market { font-size: 11px; }
  .hiw-odd { flex: 1; width: auto; height: 44px; border: 0; }
  .hiw-odd__value { font-size: 14px; }

  .hiw-ann { padding-top: 0; }
  .hiw-ann__label { width: 90px; font-size: 11px; }
  .hiw-ann__line { width: auto; flex: 1; border-color: var(--c-gray-2); }
  .hiw-ann__text { font-size: 11px; }

  .hiw-slip { background: var(--c-surface); border-width: 1px; padding: 16px; gap: 16px; }
  .hiw-slip .slip__totals { gap: 8px; }
  .hiw-slip__ready { font-size: 10px; }
  .hiw-slip__overview { padding: 12px; gap: 10px; }
  .hiw-slip__overview .slip__row { align-items: center; }
  .hiw-slip__overview .slip__row-value--return { font-size: 16px; }
  .hiw-place { height: 48px; font-size: 14px; }

  .hiw-check__row { height: 53px; }
  .hiw-check__mark { font-size: 14px; }
  .hiw-check__label { font-size: 13px; }
}