/* Showdown — frames showdown (6:806) and mobile-showdown (38:5). Numbers from gen.js / fig-outline. */

/* ── 03 hero + account panel ──────────────────────────────────────────── */
.shero {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 580px; padding: 64px var(--container-pad);
  background: var(--color-purple);
}
.shero__main { display: contents; }                        /* desktop: the left column sits in the hero row directly */
.shero__content { display: flex; flex-direction: column; gap: 16px; width: 700px; max-width: 100%; }
.shero__text { display: flex; flex-direction: column; gap: 16px; }
.shero__eyebrow { font-weight: 800; font-size: 14px; line-height: 18px; text-transform: uppercase; color: var(--color-brand); }
.shero__title { font-family: var(--font-display); font-size: 56px; line-height: 60px; text-transform: uppercase; color: var(--color-text); }
.shero__lead { font-weight: 700; font-size: 18px; line-height: 26px; color: var(--color-text); }
.shero__points { display: flex; flex-direction: column; gap: 12px; padding: 8px 0 0; }   /* frame is FIXED 142: the bottom 8 is clipped in the mockup */
.shero__point { display: flex; gap: 10px; }
.shero__bullet { flex: none; width: 6px; font-weight: 700; font-size: 15px; line-height: 20px; color: var(--color-brand); }
.shero__point-text { flex: 1; font-size: 15px; line-height: 22px; color: var(--color-text); }

.spanel {
  display: flex; flex-direction: column; gap: 24px; flex: 0 0 420px; width: 420px; padding: 32px;
  border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border);
}
.spanel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 21px; }
.spanel__title { font-family: var(--font-display); font-size: 18px; line-height: 20px; text-transform: uppercase; color: var(--color-text); }
.spanel__status { display: inline-flex; padding: 4px 8px; border-radius: var(--radius-xs); background: var(--color-red); color: var(--color-text); font-weight: 800; font-size: 10px; line-height: 13px; text-transform: uppercase; white-space: nowrap; }
.spanel__line { height: 1px; margin: 0 0 -1px; border: 0; background: var(--color-border); }   /* Figma LINE: 1px paint, 0 in flow */
.spanel__text { font-size: 14px; line-height: 20px; color: var(--color-muted); }
.spanel__cta { width: 100%; min-height: 50px; padding: 16px; border-radius: var(--radius-xs); font-size: 14px; line-height: 18px; }
.spanel__foot { display: flex; flex-direction: column; gap: 10px; }
.spanel__note { display: flex; flex-direction: column; gap: 4px; }
.spanel__note-title { font-weight: 700; font-size: 11px; line-height: 14px; color: var(--color-muted); }
.spanel__note-text { font-size: 12px; line-height: 16px; color: var(--color-muted); }
.spanel__link { align-self: flex-start; font-weight: 700; font-size: 12px; line-height: 16px; color: var(--color-brand); text-decoration: none; }
.spanel__link:hover { text-decoration: underline; }

/* ── 04 account separation ────────────────────────────────────────────── */
.sep { display: flex; flex-direction: column; gap: 40px; padding: 80px var(--container-pad) 64px; background: var(--color-card-3); }
.sep__head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.sep__titles { display: contents; }
.sep__eyebrow { font-weight: 800; font-size: 13px; line-height: 17px; text-transform: uppercase; color: var(--color-purple); }
.sep__title { font-family: var(--font-display); font-size: 36px; line-height: 39px; text-transform: uppercase; color: var(--color-ink); }
.sep__lead { font-size: 15px; line-height: 20px; color: var(--color-muted-2); }
.sep__grid { display: flex; align-items: center; gap: 24px; }
.sep__col { display: contents; }
.sep__divider {
  display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 180px; width: 180px; padding: 16px 24px;
  border-radius: var(--radius-sm); background: var(--color-card-3); box-shadow: inset 0 0 0 1px var(--color-border-light); text-align: center;
}
.sep__divider-title { font-family: var(--font-display); font-size: 18px; line-height: 20px; text-transform: uppercase; color: var(--color-ink); }
.sep__divider-text { font-size: 11px; line-height: 14px; color: var(--color-muted-2); }
.sep__arrow { font-size: 16px; line-height: 21px; color: var(--color-purple); }

.acard { display: flex; flex-direction: column; gap: 20px; flex: 1; min-width: 0; padding: 32px; border-radius: var(--radius-sm); background: var(--color-surface); }
.acard--showdown { background: var(--color-purple); }
.acard__head { display: flex; align-items: center; gap: 12px; min-height: 22px; }
.acard__num { display: inline-flex; flex: none; padding: 4px 8px; border-radius: var(--radius-xs); background: var(--color-purple); color: var(--color-text); font-family: var(--font-mono); font-weight: 900; font-size: 11px; line-height: 14px; }
.acard__num--brand { background: var(--color-brand); color: var(--color-ink); }
.acard__title { font-family: var(--font-display); font-size: 18px; line-height: 20px; text-transform: uppercase; color: var(--color-text); }
.acard__line { height: 1px; margin: 0 0 -1px; border: 0; background: var(--color-border); }
.acard--showdown .acard__line { background: rgba(255, 255, 255, .15); }   /* one-off divider tint from the mockup */
.acard__list { display: flex; flex-direction: column; gap: 12px; }
.acard__item { display: flex; align-items: center; gap: 12px; min-height: 18px; font-size: 14px; line-height: 18px; color: var(--color-muted); }
.acard__item::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--color-purple); }
.acard--showdown .acard__item { color: var(--color-text); }
.acard--showdown .acard__item::before { background: var(--color-brand); }

/* ── 05 warning band ──────────────────────────────────────────────────── */
.warn {
  display: grid; grid-template-columns: 30px 1fr; align-items: center; column-gap: 24px; row-gap: 4px;
  min-height: 103px; padding: 24px var(--container-pad); background: var(--color-brand);
}
.warn__row { display: contents; }
.warn__icon { grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--radius-xs); background: var(--color-ink); font-family: var(--font-mono); font-weight: 900; font-size: 14px; line-height: 14px; color: var(--color-brand); }
.warn__title { grid-column: 2; font-family: var(--font-display); font-size: 16px; line-height: 17px; text-transform: uppercase; color: var(--color-ink); }
.warn__text { grid-column: 2; font-size: 13px; line-height: 17px; color: var(--color-ink); }

/* ── 06 how Showdown works ────────────────────────────────────────────── */
.process { display: flex; flex-direction: column; gap: 48px; padding: 80px var(--container-pad); background: var(--color-bg); }
.process__head { display: flex; flex-direction: column; gap: 8px; }
.process__eyebrow { font-weight: 800; font-size: 13px; line-height: 17px; text-transform: uppercase; color: var(--color-brand); }
.process__title { font-family: var(--font-display); font-size: 36px; line-height: 39px; text-transform: uppercase; color: var(--color-text); }
.steps { display: flex; gap: 24px; }
.step {
  display: flex; flex-direction: column; gap: 20px; flex: 1; min-width: 0; padding: 28px;
  border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border);
}
.step--hot { background: var(--color-purple); box-shadow: inset 0 0 0 1.5px var(--color-brand); }
.step__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 52px; }
.step__num { font-family: var(--font-display); font-size: 48px; line-height: 52px; color: var(--color-brand); }
.step__label { font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 16px; text-transform: uppercase; color: var(--color-muted-2); }
.step__label--tag { display: inline-flex; padding: 2px 6px; border-radius: var(--radius-xs); background: var(--color-brand); color: var(--color-ink); font-weight: 900; font-size: 11px; line-height: 14px; }
.step__body { display: flex; flex-direction: column; gap: 8px; }
.step__title { font-family: var(--font-body); font-weight: 800; font-size: 14px; line-height: 18px; text-transform: uppercase; color: var(--color-text); }
.step__text { font-size: 13px; line-height: 18px; color: var(--color-muted); }
.step--hot .step__text { color: var(--color-text); }

/* ── 07 ready to set up ───────────────────────────────────────────────── */
.ready {
  display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 48px var(--container-pad);
  background: var(--color-surface); box-shadow: inset 0 1px 0 var(--color-border), inset 0 -1px 0 var(--color-border); text-align: center;
}
.ready__title { font-family: var(--font-display); font-size: 22px; line-height: 24px; text-transform: uppercase; color: var(--color-text); }
.ready__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.ready__btn { padding: 14px 28px; border-radius: var(--radius-xs); font-size: 14px; line-height: 18px; }
.ready__btn--secondary { font-weight: 700; }

/* ── 08 responsible-wagering transition ───────────────────────────────── */
.rwt { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 56px var(--container-pad); background: var(--color-purple); text-align: center; }
.rwt__eyebrow { font-weight: 800; font-size: 12px; line-height: 16px; text-transform: uppercase; color: var(--color-brand); }
.rwt__title { font-family: var(--font-display); font-size: 32px; line-height: 35px; text-transform: uppercase; color: var(--color-text); }
.rwt__text { font-size: 14px; line-height: 20px; color: var(--color-text); }

/* ── mobile (390 frame) ───────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .shero { display: block; min-height: 0; padding: 0; background: none; }
  .shero__main { display: block; padding: 32px var(--container-pad); background: var(--color-purple); }
  .shero__content { gap: 24px; width: auto; }
  .shero__text { gap: 12px; }
  .shero__eyebrow { font-size: 12px; line-height: 16px; }
  .shero__title { font-size: 32px; line-height: 36px; }
  .shero__lead { font-weight: 400; font-size: 14px; line-height: 20px; color: var(--color-card-3); }
  .shero__points { padding: 0; }
  .shero__point-text { font-size: 13px; line-height: 18px; }

  .spanel { flex: none; width: auto; gap: 16px; padding: 16px var(--container-pad); border-radius: 0; box-shadow: inset 0 -1px 0 var(--color-border); }
  .spanel__title { font-size: 14px; line-height: 15px; }
  .spanel__status { }
  .spanel__text { font-size: 13px; line-height: 18px; }
  .spanel__cta { min-height: 42px; padding: 14px 16px; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 400; font-size: 13px; line-height: 14px; }
  .spanel__foot { gap: 16px; }
  .spanel__line--foot { order: -1; }                        /* the mobile frame draws the rule above the note, not below */
  .spanel__note-title { text-transform: uppercase; }
  .spanel__link { font-size: 13px; line-height: 17px; }

  .sep { display: block; padding: 0; }
  .sep__head { align-items: stretch; gap: 12px; padding: 32px var(--container-pad) 20px; background: var(--color-card-2); text-align: left; }
  .sep__titles { display: flex; flex-direction: column; gap: 8px; }
  .sep__eyebrow { font-size: 11px; line-height: 14px; }
  .sep__title { font-size: 28px; line-height: 32px; }
  .sep__lead { font-size: 14px; line-height: 18px; color: var(--color-muted-3); }
  .sep__grid { display: block; }
  .sep__col { display: block; padding: 16px var(--container-pad); background: var(--color-card-2); }
  .sep__col--mid { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px var(--container-pad) 16px; }
  .sep__col--last { padding-bottom: 32px; }
  .sep__divider { display: contents; }
  .sep__divider-title { color: var(--color-purple); }
  .acard { gap: 16px; padding: 20px; }
  .acard__head { min-height: 0; }
  .acard__title { font-size: 14px; line-height: 15px; }
  .acard__list { gap: 10px; }
  .acard__item { gap: 10px; min-height: 17px; font-size: 13px; line-height: 17px; }

  .warn { display: flex; flex-direction: column; gap: 8px; min-height: 0; padding: 16px var(--container-pad); }
  .warn__row { display: flex; align-items: center; gap: 8px; min-height: 30px; }
  .warn__icon { width: auto; height: auto; border-radius: 0; background: none; font-family: var(--font-body); font-weight: 400; color: var(--color-black); }
  .warn__title { font-size: 14px; line-height: 15px; }
  .warn__text { font-size: 12px; line-height: 16px; }

  .process { gap: 24px; padding: 40px var(--container-pad); }
  .process__eyebrow { font-size: 11px; line-height: 14px; }
  .process__title { font-size: 28px; line-height: 32px; }
  .steps { flex-direction: column; }
  .step { gap: 12px; padding: 20px; }
  .step__body { display: contents; }
  .step__top { min-height: 35px; }
  .step__num { font-size: 32px; line-height: 35px; }
  .step__label { font-size: 11px; line-height: 14px; color: var(--color-muted); }
  .step__label--tag { font-size: 9px; line-height: 12px; color: var(--color-ink); }
  .step__title { font-family: var(--font-display); font-weight: 400; font-size: 13px; line-height: 14px; }
  .step__text { font-size: 12px; line-height: 16px; }

  .ready { gap: 20px; padding: 32px var(--container-pad); }
  .ready__title { font-size: 18px; line-height: 20px; }
  .ready__actions { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
  .ready__btn { padding: 14px 16px; border-radius: var(--radius-sm); font-size: 13px; line-height: 17px; }
  .ready__btn--primary { min-height: 42px; font-family: var(--font-display); font-weight: 400; line-height: 14px; }
  .ready__btn--secondary { min-height: 45px; box-shadow: inset 0 0 0 1.5px var(--color-text); }

  .rwt { padding: 32px var(--container-pad); }
  .rwt__eyebrow { font-size: 11px; line-height: 14px; }
  .rwt__title { font-size: 22px; line-height: 24px; }
  .rwt__text { font-size: 13px; line-height: 18px; }
}