/* Showdown page (frames showdown-page 1440 / showdown-mobile 390). Numbers from fig-spec. */

/* ── shared bits ──────────────────────────────────────────────────────── */
.sd-mob { display: none; }
.sd-eyebrow {
  font-family: var(--font-body); font-weight: 800; font-size: 11px; line-height: 12px;
  letter-spacing: 1.54px; color: var(--color-brand);
}

/* ── hero (section-3-hero) ────────────────────────────────────────────── */
.sdhero {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  height: 600px; overflow: hidden; background: var(--color-surface);
}
.sdhero__left { display: flex; flex-direction: column; justify-content: center; padding: 0 48px 0 var(--container-pad); }
.sdhero__stack { display: flex; flex-direction: column; gap: var(--space-24); }
.sdhero__top { display: contents; }
.sdhero__eyebrow {
  font-family: var(--font-body); font-weight: 800; font-size: 11px; line-height: 12px;
  letter-spacing: 1.54px; color: var(--color-brand);
}
.sdhero__eyebrow::before { width: 12px; height: 2px; }
.sdhero__title {
  font-family: var(--font-display); font-weight: 900; font-size: 72px; line-height: 76px;
  letter-spacing: -2.88px; color: var(--color-text);
}
.sdhero__sub { font-size: 20px; line-height: 22px; font-weight: 500; color: var(--color-muted-4); }
.sdhero__desc { font-size: 15px; line-height: 24px; color: var(--color-muted); }
.sdhero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); }
/* mockup primary button: 255×39, 12/24 padding, r8, Archivo ExtraBold 14 */
.sdhero__btn { min-height: 39px; padding: 12px 24px; border-radius: var(--radius-md); font-size: 14px; line-height: 15px; }
.sdhero__note { font-size: 11px; line-height: 12px; color: var(--color-muted); }

.sdhero__media { position: relative; background: var(--color-bg); }
.sdhero__pic { position: absolute; inset: 0; z-index: 0; }
.sdhero__pic img { width: 100%; height: 100%; object-fit: cover; }
/* hero-image-placeholder-shading: the darkening layer sits ABOVE the photo */
.sdhero__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 11, 16, .95) 0%, rgba(11, 11, 16, .6) 40%, rgba(11, 11, 16, .1) 100%);
}

/* ── separation model (section-4) ─────────────────────────────────────── */
.sdsplit {
  display: flex; flex-direction: column; gap: var(--space-48);
  padding: 80px var(--container-pad); background: var(--color-bg);
  box-shadow: inset 0 1px 0 var(--color-line-dark), inset 0 -1px 0 var(--color-line-dark);
}
.sdsplit__head { display: flex; flex-direction: column; gap: var(--space-8); }
.sdsplit__title, .sdrules__title {
  font-family: var(--font-display); font-weight: 900; font-size: 48px; line-height: 60px;
  letter-spacing: -1.92px; color: var(--color-text);
}
.sdsplit__cards { display: flex; align-items: center; gap: var(--space-24); }
.sdpanel {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-24);
  padding: var(--space-32); border-radius: var(--radius-md);
  background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-line-dark);
  transition: background-color var(--dur-fast) var(--ease);
}
.sdpanel:hover { background: var(--color-surface-2); }
.sdpanel__title { font-family: var(--font-display); font-weight: 900; font-size: 12px; line-height: 15px; letter-spacing: .96px; color: var(--color-muted); }
.sdpanel--brand .sdpanel__title { color: var(--color-brand); }
.sdpanel__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sdpanel__item {
  height: 45px; padding: 14px 0; box-shadow: inset 0 -1px 0 var(--color-line-dark);
  font-size: 16px; line-height: 17px; color: var(--color-text);
}
/* center-divider: 100 wide — 60px hairline, pill, 60px hairline */
.sdsplit__div { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); width: 100px; flex-shrink: 0; }
.sdsplit__div::before, .sdsplit__div::after { content: ""; width: 1px; height: 60px; background: var(--color-line-dark); }
.sdsplit__pill {
  padding: 4px 8px; border-radius: var(--radius-xs); background: var(--color-brand);
  font-family: var(--font-mono); font-weight: 800; font-size: 10px; line-height: 13px; letter-spacing: 1px; color: var(--color-text);
}
.sdsplit__arrow { font-size: 14px; line-height: 15px; color: var(--color-muted); }

/* ── three core rules (section-5) ─────────────────────────────────────── */
.sdrules { display: flex; flex-direction: column; gap: var(--space-48); padding: 80px var(--container-pad); background: var(--color-bg); }
.sdrules__head { display: flex; flex-direction: column; gap: var(--space-8); }
.sdrules__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sdrule { display: flex; gap: var(--space-40); padding: 32px 0; box-shadow: inset 0 1px 0 var(--color-line-dark); }
.sdrule:last-child { box-shadow: inset 0 1px 0 var(--color-line-dark), inset 0 -1px 0 var(--color-line-dark); }
.sdrule__num { flex-shrink: 0; width: 80px; font-family: var(--font-mono); font-weight: 800; font-size: 48px; line-height: 62px; color: var(--color-brand); }
.sdrule__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-8); }
.sdrule__title { font-family: var(--font-display); font-weight: 900; font-size: 24px; line-height: 30px; color: var(--color-text); }
.sdrule__sub { font-size: 16px; line-height: 17px; font-weight: 700; color: var(--color-muted-4); }
.sdrule__desc { font-size: 14px; line-height: 21px; color: var(--color-muted); }

/* ── mobile (showdown-mobile 390) ─────────────────────────────────────── */
@media (max-width: 1199px) {
  .sd-desk { display: none; }
  .sd-mob { display: inline; }
  .sd-eyebrow { font-size: 10px; line-height: 11px; letter-spacing: 1.5px; }

  .sdhero {
    display: flex; flex-direction: column; gap: var(--space-24);
    height: auto; padding: 40px var(--container-pad-m); background: var(--color-bg);
  }
  .sdhero__left { display: contents; }
  .sdhero__stack { display: contents; }
  .sdhero__top { display: flex; flex-direction: column; gap: var(--space-8); }
  .sdhero__eyebrow { letter-spacing: 1.98px; }
  .sdhero__title { font-size: 36px; line-height: 38px; letter-spacing: 0; }
  .sdhero__sub { font-size: 15px; line-height: 16px; font-weight: 600; color: var(--color-text); }
  .sdhero__desc { font-size: 13px; line-height: 20px; color: rgba(237, 233, 227, .6); }
  .sdhero__cta { align-items: stretch; gap: var(--space-8); }
  .sdhero__btn { width: 100%; min-height: 50px; padding: 0; border-radius: var(--radius-10); }
  .sdhero__note { text-align: center; color: #8b8b90; }
  .sdhero__media { height: 220px; border-radius: var(--radius-lg); overflow: hidden; }
  .sdhero__media::after { display: none; }

  .sdsplit { gap: var(--space-24); padding: 64px var(--container-pad-m) 48px; box-shadow: none; }
  .sdsplit__title { font-size: 26px; line-height: 32px; letter-spacing: 0; }
  .sdsplit__cards { flex-direction: column; align-items: stretch; gap: var(--space-16); }
  .sdpanel {
    flex: none; gap: var(--space-16); padding: var(--space-20); border-radius: var(--radius-lg);
    background: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-line-dark-2);
  }
  .sdpanel__title { font-size: 11px; line-height: 14px; letter-spacing: .99px; }
  .sdpanel__items { gap: 10px; }
  .sdpanel__item { height: auto; padding: 0; box-shadow: none; font-size: 14px; line-height: 15px; }
  /* separator-area: fixed 48px, arrows overflow it as in the mockup */
  .sdsplit__div { width: auto; height: 48px; justify-content: center; gap: var(--space-4); }
  .sdsplit__div::before, .sdsplit__div::after { display: none; }
  .sdsplit__arrow { display: inline; }

  .sdrules { gap: var(--space-32); padding: 64px var(--container-pad-m); }
  .sdrules__title { font-size: 24px; line-height: 30px; letter-spacing: 0; }
  .sdrule { flex-direction: column; gap: var(--space-12); padding: 24px 0; box-shadow: inset 0 -1px 0 var(--color-line-dark-2); }
  .sdrule:first-child { padding-top: 0; }
  .sdrule:last-child { padding-bottom: 0; box-shadow: none; }
  .sdrule__num { width: auto; font-family: var(--font-display); font-weight: 900; font-size: 28px; line-height: 35px; }
  .sdrule__body { flex: none; gap: var(--space-12); }
  .sdrule__title { font-family: var(--font-body); font-weight: 800; font-size: 14px; line-height: 15px; letter-spacing: .98px; }
  .sdrule__sub { font-size: 14px; line-height: 15px; color: var(--color-text); }
  .sdrule__desc { font-size: 13px; line-height: 18px; color: rgba(237, 233, 227, .6); }
}

/* narrow phones: keep the headline lines from breaking mid-phrase */
@media (max-width: 389px) {
  .sdhero__title { font-size: 32px; line-height: 34px; }
}

/* wider than the 1440 frame: the copy column keeps its frame width next to the centred content,
   the photo column takes the rest (the side padding sits on the full-bleed hero, so the token resolves right) */
@media (min-width: 1441px) {
  .sdhero { padding-left: var(--container-pad); grid-template-columns: 640px minmax(0, 1fr); }
  .sdhero__left { padding-left: 0; }
}