/* Showdown — palmer-bets-showdown 41:409 / -mobile 79:4 */

/* ── introduction  41:443 ─────────────────────────────────────────────── */
.sd-intro { background: #fff; box-shadow: inset 0 0 0 1px var(--color-border); }
.sd-intro__inner { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: start; padding-block: 64px; }
.sd-intro__copy { display: flex; flex-direction: column; gap: 24px; }
.eyebrow--sd { letter-spacing: .08em; }
.sd-intro__title { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 54px; color: var(--color-text); }
.sd-intro__lead { font-weight: 500; font-size: 18px; line-height: 26px; color: var(--color-muted); }
.sd-intro__paras { display: flex; flex-direction: column; gap: 16px; font-size: 14px; line-height: 22px; color: var(--color-muted); }

.sd-panel { display: flex; flex-direction: column; gap: 24px; padding: 32px; background: var(--color-surface-2); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-border); }
.sd-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sd-panel__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 24px; color: var(--color-text); letter-spacing: .03em; }
.sd-panel__status { padding: 4px 8px; border-radius: 12px; background: var(--color-border); font-weight: 700; font-size: 10px; line-height: 13px; color: var(--color-muted); white-space: nowrap; }
.sd-panel__status.is-active { background: var(--color-success); color: #fff; }
.sd-panel__rule { height: 1px; border: 0; margin: 0; background: var(--color-border); }
.sd-panel__text { font-size: 14px; line-height: 20px; color: var(--color-muted); }
.sd-panel__btn { padding: 14px; }
.sd-panel__fine { display: flex; flex-direction: column; gap: 6px; font-size: 11px; line-height: 14px; color: var(--color-muted-3); }
.sd-panel__fine--red { font-weight: 600; color: var(--color-brand); }

/* ── account separation  41:466 ───────────────────────────────────────── */
.sd-separation { padding: 64px 0; background: var(--color-bg); }
.sd-separation__head { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; margin-bottom: 32px; }
.sd-separation__title { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 38px; color: var(--color-text); letter-spacing: .02em; }
.sd-separation__lead { font-size: 14px; line-height: 18px; color: var(--color-muted); }
.sd-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; align-items: center; }   /* 554 · 124 · 554 at 1440 */
.sd-card { display: flex; flex-direction: column; gap: 20px; padding: 32px; background: #fff; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-border); }
.sd-card__head { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 24px; color: var(--color-text); }
.sd-card__tag { padding: 4px 8px; border-radius: 3px; color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 11px; line-height: 14px; letter-spacing: 0; }
.sd-card__tag--dark { background: var(--color-dark); }
.sd-card__tag--brand { background: var(--color-brand); }
.sd-card__rule { height: 1px; border: 0; margin: 0; background: var(--color-border); }
.sd-card__list { display: flex; flex-direction: column; gap: 12px; }
.sd-card__list li { position: relative; padding-left: 14px; font-size: 14px; line-height: 18px; color: var(--color-muted); }
.sd-card__list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-dark); }
.sd-card--sd .sd-card__list li::before { background: var(--color-brand); }
.sd-compare__sep { justify-self: center; padding: 8px 16px; border-radius: var(--radius); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); font-weight: 700; font-size: 11px; line-height: 14px; color: var(--color-muted); white-space: nowrap; }

/* ── how it works  41:520 ─────────────────────────────────────────────── */
.sd-how { padding: 64px 0; background: #fff; box-shadow: inset 0 0 0 1px var(--color-border); }
.sd-how__title { margin-bottom: 40px; }
.sd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sd-step { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--color-bg); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--color-border); }
.sd-step__num { font-family: var(--font-display); font-weight: 700; font-size: 36px; line-height: 48px; color: var(--color-brand); }
.sd-step__body { display: flex; flex-direction: column; gap: 8px; }
.sd-step__title { font-weight: 700; font-size: 14px; line-height: 18px; color: var(--color-text); }
.sd-step__text { font-size: 13px; line-height: 18px; color: var(--color-muted); }

/* ── mobile  79:4 ─────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .sd-intro { box-shadow: none; }
  .sd-intro__inner { grid-template-columns: 1fr; gap: 0; padding-block: 32px 24px; }
  .sd-intro__copy { gap: 16px; }
  .sd-intro__title { font-size: 30px; line-height: 40px; }
  .sd-intro__lead { font-size: 16px; line-height: 22px; }
  .sd-intro__paras { gap: 12px; line-height: 20px; }
  .sd-panel { gap: 16px; margin: 24px 0 0; padding: 20px; background: var(--color-bg); }
  .sd-panel__title { font-size: 16px; line-height: 22px; }

  .sd-separation { padding: 40px 0; }
  .sd-separation__head { align-items: flex-start; text-align: left; gap: 6px; margin-bottom: 24px; }
  .sd-separation__title { font-size: 24px; line-height: 32px; }
  .sd-separation__lead { font-size: 13px; line-height: 17px; }
  .sd-compare { grid-template-columns: 1fr; gap: 24px; }
  .sd-card { gap: 16px; padding: 20px; }
  .sd-card__head { font-size: 16px; line-height: 22px; }
  .sd-card__list { gap: 10px; }
  .sd-compare__sep { justify-self: stretch; text-align: center; }

  .sd-how { padding: 40px 0; box-shadow: none; }
  .sd-how__title { margin-bottom: 24px; font-size: 22px; line-height: 30px; }
  .sd-steps { grid-template-columns: 1fr; gap: 16px; }
  .sd-step { gap: 12px; padding: 20px; }
  .sd-step__num { font-size: 32px; line-height: 43px; }
  .sd-step__body { gap: 6px; }
  .sd-step__title { font-size: 13px; line-height: 17px; }
}