/* Showdown — frame showdown[1:908] / showdown-mobile[72:5]. */

.separate__inner { display: flex; flex-direction: column; gap: var(--space-32); }
/* account-structure-section[1:980] gap 40, not 32 */
.structure__inner { display: flex; flex-direction: column; gap: var(--space-40); }

/* asymmetric grid (showdown[1:967]) — модули не тянутся друг под друга:
   [11:201] 221, [11:204] и [11:207] 242 */
.separate__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-20); align-items: start; }
.separate__card {
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-24); border-radius: var(--radius-sm);
}
/* module-01[11:202]: 56/71 — not 40/50.4; цифра-водяной знак, opacity .25 */
.separate__no { font-size: 56px; line-height: 71px; font-weight: 800; opacity: .25; }
.separate__title { font-size: var(--fs-title); line-height: 28px; font-weight: 800; text-transform: uppercase; }
/* [11:203]/[11:206] .85, [1:979] .9 */
.separate__text { font-size: var(--fs-small); line-height: 21px; opacity: .85; }
.separate__card--lime { background: var(--color-lime); }
.separate__card--violet { background: var(--color-violet); color: #fff; }
.separate__card--violet .separate__text { opacity: .9; }
.separate__card--dark { background: var(--color-ink); color: #fff; }
.separate__card--dark .separate__no { color: var(--color-lime); }

/* account structure (showdown[11:212]) — left-system 520, centre-divider 160,
   right-system добирает остаток (в макете 676 при 632 доступных) */
.structure__diagram { display: grid; grid-template-columns: 520px 160px minmax(0, 1fr); gap: var(--space-24); align-items: stretch; }
.acct {
  display: flex; flex-direction: column; gap: var(--space-20);
  padding: var(--space-32); border-radius: var(--radius-sm);
  background: var(--color-bg);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.acct--violet { background: var(--color-violet); color: #fff; box-shadow: none; }
/* left-header[1:987]: «01» 56/71 + чип-лейбл, row gap 16 */
.acct__tag { display: flex; align-items: center; gap: var(--space-16); }
.acct__no { font-size: 56px; line-height: 71px; font-weight: 800; opacity: .25; }
/* label[1:989]: pad 6/10 (visual 4/10), r4, 11/14 */
.acct__chip {
  padding: 4px 10px; border-radius: var(--radius-sm);
  font-size: var(--fs-3xs); line-height: 14px; font-weight: 800; text-transform: uppercase;
  background: var(--color-lime); color: var(--color-ink);
}
.acct--violet .acct__chip { background: #fff; color: var(--color-violet); }
/* left-system[11:213]: 22/28 */
.acct__title { font-size: var(--fs-title); line-height: 28px; font-weight: 800; text-transform: uppercase; }
/* [1:992] .75, [1:1016] .9 */
.acct__text { font-size: var(--fs-small); line-height: 21px; opacity: .75; }
.acct--violet .acct__text { opacity: .9; }
/* tags[11:214]: строка чипов pad 6/10, r4, 11/14, обводка #e5e7eb */
.acct__list { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: auto; }
.acct__list li {
  padding: 6px 10px; border-radius: var(--radius-sm);
  font-size: var(--fs-3xs); line-height: 14px; font-weight: 800;
  background: #fff; color: var(--color-ink);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.acct--violet .acct__list li { color: var(--color-violet); box-shadow: none; }

/* centre-divider[1:1002]: без радиуса, обводка 1px #181610 */
.acct-split {
  /* 160×360 — колонка фиксированной ширины и высоты, а не растянутая на всю сетку */
  flex: 0 0 160px; align-self: center; min-height: 360px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-12); padding: var(--space-24);
  border-radius: 0; box-shadow: inset 0 0 0 1px #181610;
  background: var(--color-ink); color: #fff;
}
.acct-split__label { font-size: var(--fs-3xs); line-height: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-lime); }
/* split-arrow[11:220]: 24×24, внутри вектор 16×18 лаймовым контуром 2px.
   Своих SVG в проекте нет, поэтому стрелка «в обе стороны» рисуется CSS. */
/* Вектор макета — 16×18 обводкой 2px, узел назван arrow-left-right. Своих SVG
   в проекте нет, поэтому берём однозначный символ «в обе стороны». */
.acct-split__arrow {
  flex: none; width: 24px; height: 24px;
  display: grid; place-items: center;
  font-size: 20px; line-height: 1; color: var(--color-lime);
}
/* lime-square[11:222]: 24×24, радиус 4, «01» 12/15.12 тёмным */
.acct-split__badge {
  flex: none; width: 24px; height: 24px; border-radius: var(--radius-sm);
  background: var(--color-lime); color: var(--color-ink);
  display: grid; place-items: center;
  font-size: var(--fs-2xs); line-height: 15.12px; font-weight: 800;
}
/* [1:1007]: Medium 10/13, #f3f0e4 при opacity .5 */
.acct-split__note { font-size: var(--fs-micro); line-height: 13px; font-weight: 500; text-transform: uppercase; color: var(--color-sand); opacity: .5; }

/* final CTA (showdown[11:228]) — cta-left 816 / cta-right 520, gap 24 */
.showdown-cta__bento { display: grid; grid-template-columns: 816fr 520fr; gap: var(--space-24); align-items: stretch; }
/* радиус живёт на cta-bento[11:229]; панели [11:230]/[11:234] прямоугольные */
.showdown-cta__headline {
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-32); border-radius: 0; background: var(--color-violet); color: #fff;
}
/* logo-giant[11:232]: Bold 80/72 без трекинга, два узла с зазором 4 */
.showdown-cta__title {
  font-size: 80px; line-height: 72px; font-weight: 700;
  text-transform: uppercase; letter-spacing: normal;
}
.showdown-cta__mark { display: block; margin-top: var(--space-4); }
/* [11:238]: Bold 16/20.16 */
.showdown-cta__lead { font-size: var(--fs-body); line-height: 20.16px; font-weight: 700; }
.showdown-cta__panel {
  display: flex; flex-direction: column; gap: var(--space-16);
  padding: var(--space-32); border-radius: 0;
  background: var(--color-bg); color: var(--color-ink);
  box-shadow: inset 1px 0 0 var(--color-ink);
}
/* cta-right[11:236]: 14/22; note [1:1038] 11/14, по центру, opacity .6 */
.showdown-cta__text { font-size: var(--fs-small); line-height: 22px; }
.showdown-cta__note { font-size: var(--fs-3xs); line-height: 14px; text-align: center; opacity: .6; }
.showdown-cta__note a { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 1199px) {
  /* showdown-mobile hero[72:22]: pad 40/48, gap 20, eyebrow 12/15.12, lines 40/40 */
  .hero { padding-block: var(--space-40) var(--space-48); }
  .eyebrow { font-size: var(--fs-2xs); line-height: 15.12px; }
  .hero__title { gap: var(--space-4); }
  /* [72:27]+[72:28] are two 40/40 nodes with a 4px gap; one element here, so 40+4 */
  .hero__line { font-size: 40px; line-height: 42px; }
  .hero__line--2 { gap: var(--space-4); }
  .hero__line--2 .hero__mark { font-size: 38px; line-height: 38px; padding: 4px 8px; }
  /* [72:31] здесь .8, а не общие .75 */
  .hero__lead { opacity: .8; }
  .hero__ctas .btn--primary { padding-block: 13px; }

  /* section-header[72:35]/[72:52]: kicker 11/14, title 28/31, section pad 48/48 */
  .separate, .structure { padding-block: var(--space-48); }
  .section-head__kicker { font-size: var(--fs-3xs); line-height: 14px; }
  .separate .section-title, .structure .section-title { font-size: var(--fs-h6); line-height: 31px; }

  .separate__inner, .structure__inner { gap: var(--space-24); }
  .separate__grid { grid-template-columns: 1fr; gap: var(--space-12); }
  /* card-01[72:39]: pad 20, gap 12, «01» 32/40.32, text 13/20 */
  .separate__card { padding: var(--space-20); gap: var(--space-12); }
  .separate__no { font-size: var(--fs-h5); line-height: 40.32px; }
  .separate__title { font-size: var(--fs-lg); line-height: 23px; }
  .separate__text { font-size: var(--fs-xs); line-height: 20px; }

  /* diagram-stack[72:55]: gap 16; standard-card[72:56] pad 24 gap 16 */
  .structure__diagram { grid-template-columns: 1fr; gap: var(--space-16); }
  .acct { padding: var(--space-24); gap: var(--space-16); }
  /* card-header[72:57]: 40 tall, цифра слева, чип прижат вправо */
  .acct__tag { justify-content: space-between; gap: var(--space-12); }
  .acct__no { font-size: var(--fs-h5); line-height: 40.32px; }
  /* tag[72:59]: pad 4/8, r3, 10/13 */
  .acct__chip { padding: 4px 8px; border-radius: 3px; font-size: var(--fs-micro); line-height: 13px; }
  .acct__title { font-size: var(--fs-lg); line-height: 23px; }
  .acct__text { font-size: var(--fs-xs); line-height: 20px; }
  /* tags-wrapper[72:63]: 21-tall chips, wrapping to 2 rows, gap 6, без обводки */
  .acct__list { gap: var(--space-6); margin-top: 0; }
  .acct__list li {
    padding: 4px 8px; border-radius: 3px;
    font-size: var(--fs-micro); line-height: 13px; text-transform: uppercase;
    box-shadow: none;
  }
  /* separation-bridge[72:72]: row, pad 12/16, r4, 49 tall (знак ≠ 20/25.2) */
  .acct-split {
    flex-direction: row; justify-content: space-between; align-items: center;
    min-height: 49px; padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-sm);
  }
  /* [72:75]: здесь #ffffff при opacity .6 */
  .acct-split__note { color: #fff; opacity: .6; }

  /* showdown-cta-section[72:90]: pad 32/48, cta-container[72:91] r6, панели встык */
  .showdown-cta { padding-block: var(--space-32) var(--space-48); }
  .showdown-cta__bento { grid-template-columns: 1fr; gap: 0; border-radius: var(--radius-md); overflow: hidden; }
  .showdown-cta__headline, .showdown-cta__panel { padding: var(--space-24); border-radius: 0; }
  .showdown-cta__headline { gap: var(--space-12); }
  .showdown-cta__title { font-size: var(--fs-h5); line-height: 32px; }
  .showdown-cta__mark { margin-top: var(--space-12); }
  /* [72:95]: SemiBold 14/18 при opacity .9 */
  .showdown-cta__lead { font-size: var(--fs-small); line-height: 18px; font-weight: 600; opacity: .9; }
  /* bottom-panel[72:96]: #fdfdfd, без обводки */
  .showdown-cta__panel { background: #fdfdfd; box-shadow: none; }
  .showdown-cta__text { font-size: var(--fs-xs); line-height: 20px; }
  .showdown-cta__note { font-size: var(--fs-micro); line-height: 13px; }
  .showdown-cta__panel .btn--primary { padding-block: 13px; }

  /* responsible-gambling-section[72:102] on this frame is 803 — header 89
     (11/14 + 28/31 + a 33 mark) and 190-high cards 12 apart; the shared block
     carries the 837 profile. */
  .rg-band__intro { gap: var(--space-6); max-width: none; }
  .rg-band .eyebrow { font-size: var(--fs-3xs); line-height: 14px; }
  .rg-band__title { font-size: var(--fs-h6); line-height: 31px; gap: var(--space-4); }
  .rg-band__mark { font-size: var(--fs-lead); line-height: 25.2px; padding: 4px 8px; }
  .rg-cards { gap: var(--space-12); }
  .rg-card__text { line-height: 20px; }
}

/* Fixed desktop heights from the mockup. Outside a media query these would beat
   the mobile branch purely by cascade order. */
@media (min-width: 1200px) {
  /* account-diagram[11:212] is a hard 360 */
  .structure__diagram { min-height: 360px; }
  /* showdown-cta-section[11:228]: pad 40/90, cta-bento[11:229] 420 */
  .showdown-cta { padding-block: var(--space-40) 90px; }
  .showdown-cta__bento { min-height: 420px; }
  .showdown-cta__headline, .showdown-cta__panel {
    padding: var(--space-48); justify-content: space-between;
  }
  /* [1:1032]: Bold 11/14 с трекингом 0.08em */
  .showdown-cta__panel .section-head__kicker {
    font-size: var(--fs-3xs); line-height: 14px; font-weight: 700; letter-spacing: 0.08em;
  }
  /* cta-btn[1:1036]: 424x51, 15/19; [11:235] kicker + text сверху,
     [11:237] кнопка + note снизу с собственным зазором 12 (при базовых 16) */
  .showdown-cta__panel .btn--primary {
    font-size: var(--fs-body-sm); line-height: 19px; padding-block: 16px;
    margin-top: auto;
  }
  .showdown-cta__note { margin-top: -4px; }
}

/* A THIRD mobile footer variant: showdown-mobile[72:125] is 979 — 48/32 padding
   and the copyright row above the payments block (the majority variant puts it
   below). Both other profiles miss it, so this frame gets its own. */
@media (max-width: 1199px) {
  .site-footer { padding-block: var(--space-48) var(--space-32); }
  .footer-bottom { order: 1; }
  .footer-pay { order: 2; }
}