/* Showdown — frames pumt123-showdown (1440) and pumt123-showdown-mobile (390). */

.page-hero--showdown { min-height: 640px; }
.page-hero--showdown .page-hero__left { width: 520px; min-height: 640px; }
.page-hero--showdown .page-hero__intro { width: 424px; gap: var(--space-20); }
.page-hero--showdown .page-hero__right { width: 760px; }

.showdown-hero__titles { display: flex; flex-direction: column; gap: var(--space-8); }
.page-hero--showdown .page-hero__title { font-size: 40px; line-height: 44px; letter-spacing: -.02em; }
.showdown-hero__word {
  color: var(--color-brand);
  font-family: var(--font-display); font-weight: 900;
  font-size: 48px; line-height: 60px; letter-spacing: -.02em;
}
.page-hero--showdown .page-hero__lead { font-weight: 700; font-size: var(--fs-body); line-height: 24px; }

.showdown-hero__foot { display: flex; flex-direction: column; gap: var(--space-16); width: 424px; }
.showdown-hero__facts {
  color: var(--color-muted);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-3xs); line-height: 12px;
}
.showdown-hero__foot .btn--primary { align-self: flex-start; padding: 16px 32px; font-size: var(--fs-xs); line-height: 15px; }

/* ── explanation band: 1440×378, pad 96/48, two columns ───────────────── */
.explain { padding-block: 96px; background: var(--color-band); }
.explain__inner { display: flex; justify-content: space-between; gap: var(--space-64); }
.explain__left { display: flex; flex-direction: column; gap: var(--space-16); width: 500px; flex: none; }
.explain__left .eyebrow { font-size: var(--fs-3xs); line-height: 12px; }
.explain__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-h2); line-height: 38px;
  color: var(--color-text);
}
.explain__rule { width: 120px; border: 0; border-top: 1px solid var(--color-border-2); }
.explain__right { display: flex; flex-direction: column; gap: var(--space-24); width: 700px; flex: none; }
.explain__lead { font-weight: 700; font-size: var(--fs-lead); line-height: 29px; }
.explain__note { color: var(--color-muted); font-weight: 700; font-size: 15px; line-height: 23px; }

/* ── three standards: 1440×503, pad 96/48, gap 40 ─────────────────────── */
.standards { padding-block: 96px; }
.standards__head { display: flex; flex-direction: column; gap: var(--space-8); }
.standards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); margin-top: var(--space-40); }
.standard {
  display: flex; flex-direction: column; gap: var(--space-24);
  min-height: 208px; padding: var(--space-32);
  background: var(--color-surface);
  transition: background var(--dur-fast) var(--ease);
}
.standard:hover { background: var(--color-surface-hover); }
.standard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); }
.standard__title {
  color: var(--color-brand);
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-base); line-height: 17.36px;
}
.standard__no {
  color: var(--color-brand-2);
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--fs-h4); line-height: 30px;
}
.standard__text { color: var(--color-muted); font-weight: 700; font-size: var(--fs-base); line-height: 22px; }
.standard__rule { margin-top: auto; border: 0; border-top: 1px solid var(--color-border); }

/* ── conversion band: 1440×330, pad 96/48 ─────────────────────────────── */
.conversion { padding-block: 96px; background: var(--color-band); }
.conversion__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-64); }
.conversion__left { display: flex; flex-direction: column; gap: var(--space-16); width: 700px; flex: none; }
.conversion__left .eyebrow { font-size: var(--fs-2xs); line-height: 14px; }
.conversion__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: 40px; line-height: 44px;
}
.conversion__text { color: var(--color-muted); font-weight: 700; font-size: var(--fs-body); line-height: 24px; }
.conversion__right { display: flex; flex-direction: column; gap: var(--space-16); width: 384px; flex: none; }
.conversion__btn { min-height: 57px; padding: 20px 40px; font-size: var(--fs-xs); line-height: 15px; }
.conversion__note { color: var(--color-muted); font-weight: 700; font-size: var(--fs-2xs); line-height: 14px; text-align: center; }

/* ── mobile: frame pumt123-showdown-mobile (390) ──────────────────────── */
@media (max-width: 1199px) {
  /* hero 390×724: pad 40/16, gap 24 — text, facts + CTA, then the photo plate */
  .page-hero--showdown, .page-hero--showdown .page-hero__left,
  .page-hero--showdown .page-hero__intro, .page-hero--showdown .page-hero__right,
  .showdown-hero__foot { width: 100%; min-height: 0; }
  .page-hero--showdown { flex-direction: column; gap: var(--space-24); padding: var(--space-40) var(--container-pad-m); }
  .page-hero--showdown .page-hero__left { padding: 0; gap: var(--space-24); }
  /* The 390 frame runs eyebrow, both titles and the lead as one 16-gap stack. */
  .page-hero--showdown .page-hero__intro { gap: var(--space-16); }
  .showdown-hero__titles { display: contents; }
  .page-hero--showdown .page-hero__title { font-size: var(--fs-h3); line-height: 31px; letter-spacing: 0; }
  .showdown-hero__word { font-size: 36px; line-height: 45px; letter-spacing: 0; }
  .page-hero--showdown .page-hero__lead { font-weight: 700; font-size: 15px; line-height: 23px; }
  .showdown-hero__foot { gap: var(--space-16); }
  .showdown-hero__facts { font-size: var(--fs-4xs); line-height: 11px; }
  .showdown-hero__foot .btn--primary { align-self: stretch; min-height: 52px; padding: 16px var(--space-20); }
  .page-hero--showdown .page-hero__right { min-height: 240px; padding: var(--space-16); }

  .explain { padding-block: var(--space-48); }
  .explain__inner { flex-direction: column; gap: var(--space-24); }
  .explain__left, .explain__right { width: 100%; }
  .explain__left { gap: var(--space-12); }
  .explain__title { font-size: var(--fs-h2-m); line-height: 27px; }
  .explain__lead { font-size: var(--fs-base); line-height: 22px; }
  .explain__note { font-size: var(--fs-sm); line-height: 20px; }

  .standards { padding-block: var(--space-48); }
  .standards__head { gap: var(--space-8); }
  .standards .section-title { font-size: var(--fs-h4); line-height: 30px; }
  .standards__grid { grid-template-columns: 1fr; gap: var(--space-16); margin-top: var(--space-32); }
  .standard { min-height: 155px; padding: var(--space-20); gap: var(--space-16); }
  .standard__head { align-items: center; }
  .standard__title { font-size: var(--fs-xs); line-height: 15px; }
  .standard__no { color: var(--color-brand); font-size: var(--fs-h5); line-height: 25px; }
  .standard__text { font-size: var(--fs-sm); line-height: 20px; }
  .standard__rule { margin-top: -1px; }   /* the frame's LINE has no height of its own */

  .conversion { padding-block: var(--space-48); }
  .conversion__inner { flex-direction: column; align-items: stretch; gap: var(--space-24); }
  .conversion__left, .conversion__right { width: 100%; }
  .conversion__left { gap: var(--space-12); }
  .conversion__right { gap: var(--space-12); }
  .conversion__left .eyebrow { font-size: var(--fs-3xs); line-height: 12px; }
  .conversion__title { font-size: var(--fs-h4); line-height: 26px; }
  .conversion__text { font-weight: 700; font-size: var(--fs-base); line-height: 21px; }
  .conversion__btn { min-height: 52px; padding: 16px var(--space-20); }
  .conversion__note { font-size: var(--fs-3xs); line-height: 13px; }
}