/* ===== SHOWDOWN ===== */
.sd-hero { border-bottom: 1px solid var(--line); }
.sd-hero__in { display: flex; align-items: flex-start; gap: 32px; padding-top: 64px; padding-bottom: 64px; }
.sd-hero__left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 32px; max-width: 733px; }
.sd-hero__title { display: flex; flex-direction: column; gap: 16px; }
.sd-hero__title h1 { font: 700 56px var(--f-narrow); color: #fff; }
.sd-hero__title p { font: 400 15px/22px var(--f-sans); color: var(--gray); }
.sd-hero__rule { border-color: var(--line); }
.sd-facts { display: flex; flex-direction: column; gap: 14px; }
.sd-facts li { display: flex; gap: 12px; padding: 0 12px; }
.sd-facts li i { flex: none; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: var(--red); }
.sd-facts li span { font: 400 13px/18px var(--f-sans); color: var(--cream); }
.sd-panel { flex: none; width: 515px; display: flex; flex-direction: column; gap: 24px; padding: 32px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; box-shadow: 0 8px 24px rgba(0,0,0,.19); }
.sd-panel__head { display: flex; justify-content: space-between; align-items: center; }
.sd-panel__head h2 { font: 700 18px var(--f-narrow); letter-spacing: .5px; color: #fff; }
.sd-panel__status { padding: 3px 8px; background: var(--line); border-radius: 1px; font: 700 10px var(--f-mono); color: var(--gray); }
.sd-panel__status.is-active { background: rgba(16,185,129,.15); color: var(--green); }
.sd-panel hr { border-color: var(--line); }
.sd-panel__body { font: 400 14px/20px var(--f-sans); color: var(--gray); }
.sd-panel__active { display: flex; flex-direction: column; gap: 10px; }
.sd-panel__row { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--ink); border: 1px solid var(--line); border-radius: 2px; }
.sd-panel__row span { font: 700 10px var(--f-mono); letter-spacing: .5px; color: var(--gray); }
.sd-panel__row b { font: 800 14px var(--f-mono); color: var(--cream); }
.sd-panel__limitform { display: flex; flex-direction: column; gap: 8px; }
.sd-panel__limitform label { font: 700 10px var(--f-mono); letter-spacing: .5px; color: var(--gray); }
.sd-panel__limitrow { display: flex; gap: 8px; }
.sd-panel__limitrow .stake__input { flex: 1; }
.sd-panel__cta { height: 46px; background: var(--red); border-radius: 2px; font: 700 14px var(--f-sans); letter-spacing: .5px; color: #fff; text-align: center; }
.sd-panel__cta:hover { background: #d42c28; }
.sd-panel__cta.is-secondary { background: transparent; border: 1px solid var(--line); color: var(--cream); }
.sd-panel__foot { display: flex; flex-direction: column; gap: 10px; }
.sd-panel__disc { display: flex; align-items: center; gap: 8px; }
.sd-panel__disc i { width: 2px; height: 12px; background: var(--red); }
.sd-panel__disc span { font: 400 12px var(--f-sans); color: var(--cream); }
.sd-panel__foot b { font: 700 12px var(--f-sans); color: var(--red); }
.sd-panel__foot small { font: 400 11px var(--f-sans); color: var(--gray); }

.sd-sep { padding: 64px 0; border-bottom: 1px solid var(--line); }
.sd-sep__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 40px; }
.sd-sep__head .sindex { gap: 8px; }
.sd-sep__head .sindex__num { font-size: 12px; }
.sd-sep__head .sindex__label { font-size: 11px; letter-spacing: 1px; }
.sd-sep__head h2 { font: 700 32px var(--f-narrow); color: #fff; }
.sd-sep__head p { font: 400 14px var(--f-sans); color: var(--gray); }
.sd-compare { display: flex; align-items: center; gap: 32px; }
.sd-card { flex: 1; display: flex; flex-direction: column; gap: 20px; padding: 32px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; }
.sd-card--red { border-color: var(--red); }
.sd-card hr { border-color: var(--line); }
.sd-card__title { display: flex; align-items: center; gap: 12px; }
.sd-card__badge { display: inline-flex; padding: 4px 8px; background: var(--ink); border-radius: 2px; font: 700 11px var(--f-mono); color: #fff; }
.sd-card__badge--red { background: var(--red); }
.sd-card__title h3 { font: 700 18px var(--f-narrow); color: #fff; }
.sd-card__list { display: flex; flex-direction: column; gap: 12px; }
.sd-card__list li { position: relative; padding-left: 14px; font: 400 14px var(--f-sans); color: var(--cream); }
.sd-card__list li::before { content: ''; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--gray); }
.sd-card--red .sd-card__list li::before { background: var(--red); }
.sd-compare__mid { flex: none; display: flex; align-items: center; gap: 12px; }
.sd-compare__mid i { display: none; flex: 1; height: 1px; background: var(--line); }
.sd-compare__mid span { display: inline-flex; justify-content: center; width: 160px; padding: 8px 16px; background: var(--red-10); border: 1px solid var(--red); border-radius: 2px; font: 700 10px var(--f-mono); letter-spacing: .5px; color: var(--red); white-space: nowrap; }

.sd-diagram-sec { padding: 64px 0; border-bottom: 1px solid var(--line); }
.sd-diagram__title { margin-bottom: 32px; text-align: center; font: 700 20px var(--f-narrow); letter-spacing: .5px; color: #fff; }
.sd-diagram { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 40px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; }
.sd-node { display: inline-flex; align-items: center; border-radius: 2px; white-space: nowrap; }
.sd-node--root { padding: 8px 24px; background: var(--ink); border: 1px solid #fff; font: 700 16px var(--f-narrow); color: #fff; }
.sd-node--sub { padding: 6px 16px; background: var(--ink); border: 1px solid var(--line); font: 700 14px var(--f-narrow); color: var(--cream); }
.sd-branch--red .sd-node--sub { border-color: var(--red); color: var(--red); }
.sd-diagram__lines { width: 800px; max-width: 100%; height: 40px; }
.sd-diagram__lines svg { width: 100%; height: 100%; display: block; }
.sd-diagram__vline { width: 2px; height: 40px; background: var(--line); }
.sd-branches { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }
.sd-branch { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.sd-branches__div { width: 2px; height: 100px; background: var(--line); }
.sd-leafs { display: flex; gap: 12px; }
.sd-leafs span { padding: 4px 8px; border: 1px solid var(--line); border-radius: 1px; font: 400 11px var(--f-mono); color: var(--gray); white-space: nowrap; }
.sd-branch--red .sd-leafs span { border-color: var(--red); color: var(--red); }

.sd-warn { padding: 40px 0; border-bottom: 1px solid var(--line); }
.sd-warn__banner { display: flex; flex-direction: column; gap: 8px; padding: 32px; background: var(--bg-2); border-left: 4px solid var(--red); }
.sd-warn__banner h2 { font: 700 18px var(--f-narrow); color: var(--red); }
.sd-warn__banner p { font: 400 13px/20px var(--f-sans); color: var(--gray); }

.sd-steps { padding: 64px 0; border-bottom: 1px solid var(--line); }
.sd-steps__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 40px; }
.sd-steps__head .sindex { gap: 8px; }
.sd-steps__head .sindex__num { font-size: 12px; }
.sd-steps__head .sindex__label { font-size: 11px; letter-spacing: 1px; }
.sd-steps__head h2 { font: 700 32px var(--f-narrow); color: #fff; }
.sd-steps__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.sd-step { display: flex; flex-direction: column; gap: 16px; padding: 24px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 2px; }
.sd-step--red { border-color: var(--red); }
.sd-step > span { font: 700 40px var(--f-narrow); color: var(--red); }
.sd-step div { display: flex; flex-direction: column; gap: 8px; }
.sd-step h3 { font: 700 16px var(--f-narrow); text-transform: uppercase; color: #fff; }
.sd-step p { font: 400 13px/18px var(--f-sans); color: var(--gray); }

.sd-cta { border-bottom: 1px solid var(--line); }
.sd-cta__in { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: 80px; padding-bottom: 80px; text-align: center; }
.sd-cta h2 { font: 700 40px var(--f-narrow); color: #fff; }
.sd-cta p { max-width: 640px; font: 400 14px/18px var(--f-sans); color: var(--gray); }
.sd-cta__row { display: flex; gap: 16px; padding-top: 16px; }
.sd-cta__primary { padding: 0 24px 0 28px; }

@media (max-width: 1180px) {
  .sd-panel { width: 420px; }
  .sd-hero__title h1 { font-size: 46px; }
}
@media (max-width: 1023px) {
  .sd-hero__in { flex-direction: column; }
  .sd-panel { width: 100%; }
  .sd-compare { flex-direction: column; align-items: stretch; }
  .sd-compare__mid i { display: block; }
  .sd-steps__grid { grid-template-columns: 1fr; }
  .sd-branches__div { display: none; }
}
@media (max-width: 767px) {
  .sd-hero { border-bottom: 0; }
  .sd-hero__in { gap: 24px; padding-top: 32px; padding-bottom: 32px; }
  .sd-hero__left { gap: 24px; }
  .sd-hero__title .sindex__num { font-size: 10px; }
  .sd-hero__title .sindex__label { font-size: 11px; letter-spacing: 1px; }
  .sd-hero__title h1 { font-size: 38px; line-height: 42px; }
  .sd-hero__title p { font-size: 14px; line-height: 20px; }
  .sd-facts { order: 3; gap: 0; padding-bottom: 8px; }
  .sd-facts li { padding: 0 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
  .sd-facts li:last-child { border-bottom: 0; margin-bottom: 0; }
  .sd-hero__left { display: contents; }
  .sd-hero__in { display: flex; flex-direction: column; }
  .sd-hero__title { order: 1; }
  .sd-panel { order: 2; gap: 20px; padding: 24px; box-shadow: none; }
  .sd-panel__head h2 { font-size: 16px; }
  .sd-panel__status { font-size: 9px; }
  .sd-panel__body { font-size: 13px; line-height: 18px; }
  .sd-panel__cta { height: 41px; font-size: 13px; }
  .sd-panel__foot { gap: 8px; }
  .sd-panel__foot small { font-size: 10px; }
  .sd-sep { padding: 40px 0; border-top: 8px solid var(--line); border-bottom: 0; }
  .sd-sep__head { gap: 0; margin-bottom: 24px; }
  .sd-sep__head .sindex { gap: 12px; margin-bottom: 24px; }
  .sd-sep__head .sindex__num { font-size: 10px; }
  .sd-sep__head h2 { font-size: 28px; margin-bottom: 24px; }
  .sd-sep__head p { font-size: 13px; }
  .sd-compare { gap: 24px; }
  .sd-card { gap: 16px; padding: 24px; }
  .sd-card__title h3 { font-size: 16px; }
  .sd-card__list { gap: 10px; }
  .sd-card__list li { padding-left: 12px; font-size: 13px; }
  .sd-card__list li::before { width: 4px; height: 4px; top: 6.5px; }
  .sd-compare__mid span { width: auto; padding: 6px 12px; font-size: 9px; }
  .sd-diagram-sec { padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 0; }
  .sd-diagram__title { margin-bottom: 24px; font-size: 18px; }
  .sd-diagram { gap: 16px; padding: 20px; }
  .sd-node--root { font-size: 14px; }
  .sd-node--sub { font-size: 13px; }
  .sd-branches { flex-direction: column; gap: 16px; }
  .sd-branch { width: 100%; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
  .sd-branch--red { padding-bottom: 0; border-bottom: 0; }
  .sd-leafs { gap: 8px; }
  .sd-leafs span { font-size: 10px; }
  .sd-warn { padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 0; }
  .sd-warn__banner { gap: 12px; padding: 20px; }
  .sd-warn__banner h2 { font-size: 15px; line-height: 20px; }
  .sd-warn__banner p { font-size: 12px; line-height: 18px; }
  .sd-steps { padding: 40px 0; border-top: 8px solid var(--line); border-bottom: 0; }
  .sd-steps__head { gap: 0; margin-bottom: 32px; }
  .sd-steps__head .sindex { gap: 12px; margin-bottom: 32px; }
  .sd-steps__head .sindex__num { font-size: 10px; }
  .sd-steps__head h2 { font-size: 28px; }
  .sd-steps__grid { gap: 20px; }
  .sd-step { gap: 12px; padding: 20px; }
  .sd-step > span { font-size: 32px; }
  .sd-step div { gap: 6px; }
  .sd-step h3 { font-size: 15px; }
  .sd-cta { border-top: 1px solid var(--line); border-bottom: 0; }
  .sd-cta__in { padding-top: 48px; padding-bottom: 48px; }
  .sd-cta h2 { font-size: 28px; }
  .sd-cta p { font-size: 13px; line-height: 20px; }
  .sd-cta__row { flex-direction: column; width: 100%; gap: 12px; padding-top: 0; }
  .sd-cta__row .btn { height: 45px; font-size: 13px; letter-spacing: 0; padding: 0 14px; }
}