/* Showdown — mockup frames betfans-showdown-desktop [1:628] / betfans-showdown-mobile [72:4].
 *
 * Desktop: the hero is an 840/600 split of the 1440 frame, so it runs full-bleed
 * and only the copy sits on the container grid. Everything below is on the
 * regular 1280 column, with the mockup's own 56px section padding.
 */

/* ── hero [27:304] — 640px tall, gradient panel 840 + photo 600 ────────── */
.sd-hero {
  display: grid; grid-template-columns: 840fr 600fr;
  min-height: 640px;
  background: var(--color-bg);
}
.sd-hero__panel {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  /* 56px in the frame; on wider viewports the copy keeps the container's edge. */
  padding: 56px max(56px, calc((100vw - var(--container)) / 2 - 24px)) 33px;
  background: var(--grad-hero);
  color: var(--color-on-dark);
}
/* grain [25:13] — a flat white wash at 3%, as drawn. */
.sd-hero__grain {
  position: absolute; inset: 0; z-index: 0;
  background: var(--color-surface); opacity: .03; pointer-events: none;
}
/* loop-bg [1:660] — 420×420 line art at 8%. */
.sd-hero__loop {
  position: absolute; z-index: 0; left: 210px; top: 120px;
  width: 420px; height: 420px;
  border-radius: var(--radius-pill); overflow: hidden;
  pointer-events: none;
}
/* The source art is white line work on a dark plate: screen drops the plate so
   only the lines land on the gradient, at the 8% the mockup asks for. */
.sd-hero__loop img { width: 100%; height: 100%; object-fit: contain; opacity: .08; mix-blend-mode: screen; }

.sd-hero__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: var(--space-24);
  max-width: 728px;
}
.sd-hero__headline {
  display: flex; flex-direction: column; gap: var(--space-12);
  font-family: var(--font-display); font-weight: 700;
  font-size: 110px; line-height: 99px;
  color: var(--color-on-dark);
}
.sd-hero__lead {
  font-size: var(--fs-md); font-weight: 500; line-height: 27px;
  color: var(--color-on-dark-70);
}
.sd-hero__note {
  font-size: var(--fs-base); line-height: 22px;
  color: var(--color-on-dark-70);
}
.sd-hero__cta { align-self: flex-start; }

.sd-hero__media { position: relative; }
.sd-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ── how showdown is separate [1:671] — 56px padding, not the 48 default ── */
.sd-separate { padding-block: 56px; background: var(--color-bg); }
.sd-separate__head { display: flex; flex-direction: column; gap: var(--space-8); }
.sd-separate__title {
  display: flex; flex-direction: column; gap: var(--space-8);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h1); line-height: 72px;
  color: var(--color-ink);
}

.sd-steps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24);
  margin-top: var(--space-32);
}
/* The frame fixes each step at 161px, taller than its copy [1:678]. */
.sd-step { display: flex; flex-direction: column; gap: var(--space-12); min-height: 161px; }
.sd-step__index {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h2); line-height: 58px;
  color: var(--color-on-brand-dim);
}
.sd-step__title {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-md); line-height: 25px;
  color: var(--color-ink);
}
.sd-step__note { font-size: var(--fs-base); line-height: 19.12px; color: var(--color-soft); }

/* ── account comparison [25:39] ───────────────────────────────────────── */
.sd-compare { padding-block: 56px; background: var(--color-surface); }
.sd-compare__band { display: flex; align-items: stretch; gap: var(--space-24); }
.sd-compare__card {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-12);
  min-height: 162px; padding: var(--space-20);
  background: var(--color-tint);
  border-radius: var(--radius-md);
}
.sd-compare__card--showdown { background: var(--color-brand); }
.sd-compare__badge {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 20px;
  background: var(--color-tint);
  color: var(--color-brand);
}
.sd-compare__badge .icon { width: 20px; height: 20px; }
.sd-compare__label {
  font-size: var(--fs-base); font-weight: 700; line-height: 19.12px;
  color: var(--color-ink);
}
.sd-compare__card--showdown .sd-compare__label { color: var(--color-on-dark); }
/* divider [1:715] — a 1px brand hairline between the two cards. */
.sd-compare__divider { flex: 0 0 1px; align-self: stretch; background: var(--color-brand); }
/* separator [72:60] — mobile only, replaces the vertical divider. */
.sd-compare__split { display: none; }
.sd-compare__note {
  margin-top: var(--space-24);
  font-size: var(--fs-body); font-weight: 500; line-height: 22px;
  color: var(--color-muted); text-align: center;
}

/* ── ready to use showdown [25:47] ────────────────────────────────────── */
.sd-cta {
  /* The CTA panel gradient [25:48] — the only place this pair of stops appears.
     If a second page needs it, it belongs in tokens.css as --grad-cta. */
  --sd-grad-cta: linear-gradient(63deg, #315bff 0%, #4b2ea8 100%);
  padding-block: 56px; background: var(--color-bg);
}
.sd-cta__panel {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-24);
  min-height: 360px; padding: 40px;
  background: var(--sd-grad-cta, linear-gradient(63deg, #315bff 0%, #4b2ea8 100%));
  color: var(--color-on-dark);
}
.sd-cta__grain {
  position: absolute; inset: 0; z-index: 0;
  background: var(--color-surface); opacity: .03; pointer-events: none;
}
.sd-cta__loop {
  position: absolute; z-index: 0; right: 0; top: 50%; translate: 0 -50%;
  width: 420px; height: 420px;
  border-radius: var(--radius-pill); overflow: hidden;
  pointer-events: none;
}
.sd-cta__loop img { width: 100%; height: 100%; object-fit: contain; opacity: .08; mix-blend-mode: screen; }

.sd-cta__content {
  position: relative; z-index: 1;
  flex: 0 1 520px;
  display: flex; flex-direction: column; gap: var(--space-16);
}
.sd-cta__eyebrow { display: none; }   /* mobile frame only [72:71] */
.sd-cta__headline {
  display: flex; flex-direction: column; gap: var(--space-16);
  font-family: var(--font-display); font-weight: 700;
  font-size: 80px; line-height: 80px;
  color: var(--color-on-dark);
}
.sd-cta__lead { font-size: var(--fs-body); line-height: 24px; color: var(--color-on-dark-80); }
.sd-cta__button { position: relative; z-index: 1; flex: none; }

/* ── tablet: no mockup frame, derived from the splits ─────────────────── */
@media (max-width: 1199px) {
  .sd-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .sd-hero__panel { padding: var(--space-32) var(--container-pad); }
  .sd-hero__headline { font-size: 72px; line-height: 68px; }
  .sd-hero__media img { max-height: 360px; }
  .sd-hero__loop { left: auto; right: -80px; top: -40px; }
  .sd-separate__title { font-size: var(--fs-h2); line-height: 48px; }
  .sd-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-28); }
  .sd-cta__panel { flex-direction: column; align-items: flex-start; min-height: 0; }
  .sd-cta__headline { font-size: 56px; line-height: 56px; }
}

/* ── mobile frame [72:4]: panel 453 + photo 280, everything stacks ────── */
@media (max-width: 767px) {
  /* The mobile frame sets its own eyebrow size, smaller than the 11px desktop
     one and larger than the 9px the home mobile frame uses. */
  .sd-hero__label,
  .sd-separate__head .eyebrow,
  .sd-cta__eyebrow { font-size: var(--fs-3xs); line-height: 14px; }

  .sd-hero__panel {
    min-height: 453px; padding: var(--space-24);
    gap: var(--space-20);
    background: var(--grad-hero);
  }
  .sd-hero__inner { gap: var(--space-20); }
  .sd-hero__headline { font-size: 54px; line-height: 48.6px; gap: var(--space-2); }
  .sd-hero__lead { font-size: var(--fs-base); line-height: 20px; }
  .sd-hero__note { font-size: var(--fs-xs); line-height: 18px; }
  .sd-hero__cta { align-self: stretch; }
  /* The mobile frame draws a plain 200px circle here; the same line art reads
     the same at this size, so the hero keeps one decorative layer, not two. */
  .sd-hero__loop { left: auto; right: -50px; top: -20px; width: 240px; height: 240px; }
  .sd-hero__media img { height: 280px; }

  .sd-separate { padding-block: 48px; }
  .sd-separate__head { gap: var(--space-6); }
  .sd-separate__title { font-size: 38px; line-height: 38px; gap: var(--space-6); }
  .sd-steps { margin-top: var(--space-32); gap: var(--space-28); }
  /* The frame gives each step 12px above its ordinal and nothing below [72:43]. */
  .sd-step { gap: var(--space-10); padding: var(--space-12) 0 0; min-height: 0; }
  .sd-step__index { font-size: 40px; line-height: 48px; }
  .sd-step__title { font-size: var(--fs-body); line-height: 22px; }
  .sd-step__note { font-size: var(--fs-sm); line-height: 19.5px; color: var(--color-muted); }

  .sd-compare { padding-block: 48px; }
  .sd-compare__band { flex-direction: column; gap: var(--space-16); }
  .sd-compare__card { min-height: 110px; gap: var(--space-8); padding: var(--space-16); }
  .sd-compare__badge { width: 20px; height: 20px; background: none; }
  .sd-compare__card--showdown .sd-compare__badge { color: var(--color-on-dark); }
  .sd-compare__label { font-size: var(--fs-sm); line-height: 18px; }
  .sd-compare__divider { display: none; }
  .sd-compare__split {
    display: flex; align-items: center; justify-content: center; gap: var(--space-16);
    font-size: var(--fs-sm); font-weight: 700; line-height: 18px; color: var(--color-brand);
  }
  .sd-compare__rule { width: 32px; height: 1px; background: var(--color-brand); }
  .sd-compare__note { font-size: var(--fs-sm); line-height: 18px; }

  .sd-cta { padding-block: 40px; }
  /* The frame pads the panel out to 340 with an empty 28px row above the button
     [72:76]; the button is pushed to the bottom instead of building that row. */
  .sd-cta__panel {
    flex-direction: column; align-items: stretch; justify-content: space-between;
    min-height: 340px;
    gap: var(--space-20); padding: var(--space-24);
    border-radius: var(--radius-lg);
  }
  .sd-cta__eyebrow { display: block; }
  .sd-cta__content { flex: 1 1 auto; gap: var(--space-20); }
  .sd-cta__headline { font-size: 38px; line-height: 38px; gap: var(--space-4); }
  .sd-cta__lead { font-size: var(--fs-base); line-height: 21px; color: var(--color-on-dark-70); }
  .sd-cta__loop { right: -100px; width: 260px; height: 260px; }
}