/* Showdown page — geometry from millennialbet-showdown (1440) / -mobile (390) */

/* ============ hero ============ */
.sd-hero { background: var(--ink); overflow: hidden; padding-block: 64px; }
.sd-hero__canvas { position: relative; height: 522px; }
.sd-hero__ghost {
  position: absolute;
  left: -20px;
  top: 120px;
  font-family: var(--font-display);
  font-size: 220px;
  line-height: 239px;
  letter-spacing: -10px;
  color: var(--red);
  opacity: .08;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.sd-hero__copy {
  position: absolute;
  left: 0;
  top: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 540px;
}
.sd-hero__title {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 64px;
  letter-spacing: -.02em;
  color: var(--white);
}
.sd-hero__lede { font-size: 16px; line-height: 26px; color: var(--slate); }
.sd-hero__photo {
  position: absolute;
  left: 640px;
  top: 0;
  width: 704px;
  height: 522px;
  border-radius: var(--r-24);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line-dark);
}
.sd-hero__photo picture, .sd-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.sd-badge {
  position: absolute;
  left: 32px;
  bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 640px;
  padding: 16px;
  background: var(--bone);
  border-left: 4px solid var(--red);
  border-radius: var(--r-8);
  color: var(--ink-soft);
}
.sd-badge__title {
  font-family: var(--font-display);
  font-size: 11px;
  line-height: 12px;
  letter-spacing: 1px;
  color: var(--red-text);
}
.sd-badge__lead { font-family: var(--font-display); font-size: 16px; line-height: 17.41px; }
.sd-badge__body { font-size: 13px; font-weight: 500; line-height: 17px; color: var(--grey); }

/* ============ three things ============ */
.sd-three__inner { display: flex; flex-direction: column; gap: 48px; padding-block: 96px; }
.sd-three__head { display: flex; flex-direction: column; gap: 12px; width: 600px; }
.sd-three__title { font-family: var(--font-display); font-size: 44px; line-height: 48px; letter-spacing: -.03em; white-space: nowrap; color: var(--ink-soft); }
.sd-three__grid { display: flex; align-items: flex-start; gap: 24px; }

.sd-module {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  border-radius: var(--r-24);
}
.sd-module--account { flex: 1; background: var(--red); color: var(--white); }
.sd-module--balance {
  width: 410px;
  flex: none;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-dark);
  color: var(--white);
}
.sd-module--rg {
  width: 410px;
  flex: none;
  align-self: flex-start;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line-light);
  color: var(--ink-soft);
}
.sd-module__head { display: flex; flex-direction: column; gap: 8px; }
.sd-module__num { font-family: var(--font-display); font-size: 48px; line-height: 52.22px; color: rgba(255, 255, 255, .8); }
.sd-module__num--red { color: var(--red-text); }
.sd-module__kicker { font-family: var(--font-display); font-size: 28px; line-height: 30.46px; color: var(--white); }
.sd-module__kicker--ink { color: var(--ink-soft); }
.sd-module__lead { font-family: var(--font-display); font-size: 14px; line-height: 15.23px; color: var(--white); }
.sd-module--account .sd-module__body { color: var(--white); }
.sd-module__lead--red { color: var(--red-text); }
.sd-module__body { font-size: 14px; line-height: 21px; }
.sd-module__body--muted { color: var(--slate); }
.sd-module__body--grey { color: var(--grey); }

.sd-diagram {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(0, 0, 0, .125);
  border-radius: var(--r-12);
}
.sd-diagram__box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  padding: 12px;
  background: var(--ink);
  border-radius: var(--r-8);
  box-shadow: inset 0 0 0 1px var(--line-dark);
}
.sd-diagram__box--alt { box-shadow: inset 0 0 0 1px var(--red); }
.sd-diagram__brand { font-family: var(--font-display); font-size: 12px; line-height: 13px; color: var(--white); }
.sd-diagram__label { font-size: 11px; font-weight: 600; line-height: 12px; color: var(--slate); }
.sd-diagram__sign { font-size: 18px; color: var(--white); }

.sd-balances { display: flex; flex-direction: column; gap: 12px; }
.sd-balances div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--ink);
  border-radius: var(--r-8);
  box-shadow: inset 0 0 0 1px var(--line-dark);
}
.sd-balances dt { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--slate); }
.sd-balances dd { font-family: var(--font-display); font-size: 14px; color: var(--white); }

.sd-flags { display: flex; flex-direction: column; gap: 8px; }
.sd-flags li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 4px;
  min-height: 20px;
  box-shadow: inset 0 -1px 0 var(--line-light);
  font-size: 13px;
  line-height: 16px;
  color: var(--ink-soft);
}
.sd-flags li:last-child { box-shadow: none; }
.sd-flags__state { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--red-text); }

/* ============ create account ============ */
.sd-create__inner { display: flex; gap: 64px; min-height: 522px; padding-block: 96px; }
.sd-create__left { display: flex; flex-direction: column; align-self: flex-start; gap: 24px; flex: 1; }
.sd-create__title { font-family: var(--font-display); font-size: 48px; line-height: 52px; color: var(--white); }
.sd-create__right { display: flex; align-self: flex-start; flex: 1; }
.sd-cta {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  padding: 40px;
  background: var(--surface);
  border-radius: var(--r-24);
  box-shadow: inset 0 0 0 1px var(--line-dark);
}
.sd-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 57px;
  padding: 18px 24px;
  background: var(--red);
  border-radius: var(--r-12);
  font-size: 16px;
  font-weight: 900;
  line-height: 21px;
  color: var(--white);
  transition: background var(--t), box-shadow var(--t);
}
.sd-cta__btn:hover { background: var(--red-dark); box-shadow: var(--shadow-red); }
.sd-cta__bullets { display: flex; flex-direction: column; gap: 12px; }
.sd-cta__bullets li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 21px;
  color: var(--slate);
}
.sd-cta__tick { color: var(--red-text); font-weight: 800; }
.sd-cta__fine { font-size: 12px; line-height: 16px; color: var(--slate); }
.sd-cta__link {
  align-self: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 17px;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sd-cta__link:hover { color: var(--red); }

/* ============ mobile ============ */
@media (max-width: 1199px) {
  .sd-hero { padding-block: 32px; }
  .sd-hero__canvas { height: auto; display: flex; flex-direction: column; gap: 24px; }
  .sd-hero__ghost { display: none; }
  .sd-hero__copy { position: static; width: auto; gap: 16px; }
  .sd-hero__title { font-size: 36px; line-height: 38px; }
  .sd-hero__lede { font-size: 14px; line-height: 22px; }
  .sd-hero__photo { position: static; width: auto; height: 280px; }
  .sd-badge { position: static; width: auto; }

  .sd-three__inner { gap: 24px; padding-block: 32px; }
  .sd-three__head { width: auto; }
  .sd-three__title { font-size: 28px; line-height: 30.5px; }
  .sd-three__grid { flex-direction: column; gap: 16px; }
  .sd-module { padding: 24px; }
  .sd-module--balance, .sd-module--rg { width: auto; }
  .sd-module__num { font-size: 36px; line-height: 39px; }
  .sd-module__kicker { font-size: 22px; line-height: 24px; }
  .sd-diagram { flex-direction: column; align-items: stretch; }

  .sd-create__inner { flex-direction: column; gap: 24px; min-height: 0; padding-block: 32px; }
  .sd-create__title { font-size: 28px; line-height: 30.5px; }
  .sd-cta { padding: 24px; gap: 20px; }
  .sd-cta__link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}