/* Showdown — frame 2:864 (1440) / 42:333 (390). */

/* ── hero (14:489 / 42:348 + 42:367 + 42:388) ─────────────────────────── */
.sd-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 56px; padding: 96px 60px; background: var(--color-bg); color: var(--color-text); }
.sd-hero__wm { position: absolute; left: 0; top: -60px; width: 1440px; color: var(--color-cream); opacity: .03; font-family: var(--font-display); font-weight: 800; font-size: 240px; line-height: 288px; pointer-events: none; }
.sd-hero__grid { position: relative; display: flex; gap: 64px; align-items: flex-start; }
.sd-hero__left { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 760px; flex: none; }
.sd-hero__title { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-family: var(--font-display); font-weight: 800; font-size: 96px; line-height: 86px; letter-spacing: -2px; }
.sd-hero__line { display: block; width: 760px; }
.sd-hero__panel { margin-top: 9px; padding: 4px 16px 4px 0; line-height: 86px; transform: rotate(-2deg); transform-origin: 0 0; }   /* 14:500 */   /* panel at 450 = 343 + 86 + 12 + 9 */
.sd-hero__prose { display: flex; flex-direction: column; gap: 16px; }
.sd-hero__lead { font-size: 16px; line-height: 26px; color: var(--color-muted); }
.sd-hero__note { font-size: 14px; line-height: 22px; color: var(--color-muted-cool-dark); }
.sd-hero__ctas { display: flex; gap: 16px; }

.sd-diagram { position: relative; display: flex; align-items: center; justify-content: center; width: 520px; height: 440px; flex: none; margin-top: 49.82px; padding: 40px; background: var(--color-surface); box-shadow: inset 0 0 0 2px var(--color-border-2); font-family: var(--font-display); }
.sd-diagram__label { position: absolute; left: 20px; top: 20px; font-weight: 700; font-size: 14px; line-height: 17px; letter-spacing: 2px; color: var(--color-muted-cool-dark); }
.sd-diagram__inner { display: flex; align-items: center; gap: 40px; width: 440px; height: 360px; }
.sd-acc { display: flex; flex-direction: column; gap: 16px; width: 150px; flex: none; }
.sd-acc__n { font-weight: 800; font-size: 48px; line-height: 58px; color: var(--color-muted-cool-2); }
.sd-acc__name { font-weight: 800; font-size: 18px; line-height: 22px; letter-spacing: 1px; }
.sd-acc__rule { margin: 0; border: 0; height: 0; }
.sd-acc__rule--orange { box-shadow: 0 2px 0 var(--color-orange-stroke); }
.sd-acc__rule--cream { box-shadow: 0 2px 0 var(--color-cream); }
.sd-acc__list { display: flex; flex-direction: column; gap: 16px; font-family: var(--font-body); font-size: 13px; line-height: 16px; color: var(--color-muted-cool-dark); }
.sd-acc--lime .sd-acc__n, .sd-acc--lime .sd-acc__name { color: var(--color-lime); }
.sd-acc--lime .sd-acc__list { color: var(--color-muted-cool-2); }
.sd-split { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 60px; height: 360px; flex: none; }
.sd-split__line { display: block; width: 0; height: 200px; border-left: 2px solid var(--color-border-2); }
.sd-split__line--short { height: 100px; }
.sd-split__badge { padding: 4px 10px; background: var(--color-lime); color: var(--color-text-dark); font-weight: 700; font-size: 11px; line-height: 13.2px; white-space: nowrap; }

.sd-notice { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: var(--radius-sm); background: var(--color-surface); box-shadow: inset 0 0 0 2px var(--color-lime); font-family: var(--font-display); }
.sd-notice__title { font-weight: 700; font-size: 10px; line-height: 12px; letter-spacing: 1.5px; color: var(--color-lime); }
.sd-notice__text { font-family: var(--font-body); font-size: 13px; line-height: 16px; color: var(--color-muted); }

/* ── CTA band (14:561 / 42:392) ───────────────────────────────────────── */
.sd-cta { display: flex; flex-direction: column; gap: 32px; padding: 80px 60px; background: var(--color-lime); color: var(--color-text-dark); }
/* torn edges: geometry from includes/torn.php */
.sd-cta__content { display: flex; justify-content: space-between; align-items: flex-start; }
.sd-cta__left { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; width: 760px; }
.sd-cta__star { color: var(--color-text-dark); font-weight: 700; font-size: 11px; line-height: 13.2px; letter-spacing: 2px; }
.sd-cta__title { font-family: var(--font-display); font-weight: 800; font-size: 72px; line-height: 64px; letter-spacing: -1.5px; }
.sd-cta__text { font-size: 16px; line-height: 24px; }
.sd-cta__right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; margin-top: 39px; }
.sd-cta__btn { padding: 16px 32px; color: var(--color-lime); }
.sd-cta__btn:hover { background: var(--color-surface); }
.sd-cta__arrow { color: var(--color-text-dark); }

@media (max-width: 1199px) {
  .sd-hero { gap: 0; padding: 0; }
  .sd-hero__grid { flex-direction: column; align-items: stretch; gap: 0; }
  .sd-hero__left { width: auto; gap: 28px; padding: 48px 16px; }
  .sd-hero__left .eyebrow { gap: 6px; }
  .sd-hero__title { align-self: stretch; gap: 8px; font-size: 52px; line-height: 48px; letter-spacing: -1px; }
  .sd-hero__line { width: auto; }
  .sd-hero__panel { margin-top: 4px; padding: 2px 16px 4px 8px; line-height: 48px; }
  .sd-hero__rule { display: flex; align-items: center; gap: 8px; align-self: stretch; color: var(--color-lime); font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 22px; }
  .sd-hero__rule i { flex: 1; height: 0; border-top: 1px solid var(--color-border-3); }
  .sd-hero__prose { gap: 12px; }
  .sd-hero__lead { font-size: 15px; line-height: 22px; color: #bbbbbb; }
  .sd-hero__note { font-size: 13px; line-height: 18px; }
  .sd-hero__ctas { align-self: stretch; }
  .sd-hero__ctas .btn { width: 100%; height: 48px; padding: 0 24px; letter-spacing: 2px; }

  .sd-diagram { display: flex; flex-direction: column; align-items: stretch; gap: 24px; width: auto; height: auto; margin: 0; padding: 40px 16px; background: var(--color-bg); box-shadow: none; }
  .sd-diagram__label { position: static; font-weight: 800; font-size: 12px; line-height: 14.4px; }
  .sd-diagram__inner { flex-direction: column; align-items: stretch; gap: 24px; width: auto; height: auto; }
  .sd-acc { gap: 12px; width: auto; padding: 20px; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border-2); }
  .sd-acc--lime { box-shadow: inset 0 0 0 1px var(--color-lime-deep); }
  .sd-acc__n { font-size: 36px; line-height: 43.2px; color: var(--color-muted-cool-dark); }
  .sd-acc__name { font-size: 20px; line-height: 24px; }
  .sd-acc__rule--orange { box-shadow: 0 2px 0 var(--color-orange-stroke); }
  .sd-acc__rule--cream { box-shadow: 0 2px 0 var(--color-cream); }
  .sd-acc__list { gap: 4px; }
  .sd-acc__list li::before { content: "• "; }   /* the 390 frame draws bullets */
  .sd-acc--lime .sd-acc__list { color: var(--color-text); }
  .sd-split { flex-direction: row; gap: 12px; width: auto; height: 21px; }
  .sd-split__line { flex: 1; width: auto; height: 0; border-left: 0; border-top: 1px solid var(--color-border-3); }
  .sd-split__line--short { flex: 1; }
  .sd-split__badge { padding: 4px 12px; font-weight: 800; }

  .sd-notice-wrap { padding: 32px 16px; background: var(--color-bg); }
  .sd-notice { gap: 10px; }
  .sd-notice__title { font-weight: 800; font-size: 13px; line-height: 18px; letter-spacing: 1px; }
  .sd-notice__text { font-size: 13px; line-height: 18px; color: #bbbbbb; }

  .sd-cta { gap: 24px; padding: 48px 16px; }
  .sd-cta__content { flex-direction: column; align-items: stretch; gap: 24px; }
  .sd-cta__left { width: auto; gap: 24px; }
  .sd-cta__star { font-weight: 800; font-size: 24px; line-height: 29px; letter-spacing: 0; }
  .sd-cta__title { font-size: 38px; line-height: 36px; }
  .sd-cta__text { font-size: 15px; line-height: 22px; }
  .sd-cta__right { align-items: stretch; margin: 0; }
  .sd-cta__btn { width: 100%; height: 48px; padding: 0 24px; }
}