/* Page-level structure: container, utility strip, header, shared bands, footer.
 * Numbers come from fig-spec (frame 1440: 80px side padding, 1280 content;
 * frame 390: 20px side padding). Mobile branch is @media (max-width: 1199px). */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--container-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ── utility strip (section-1-rg-utility) ─────────────────────────────── */
.utility { background: var(--color-bg); box-shadow: inset 0 -1px 0 var(--color-line-dark); }
.utility__inner {
  display: flex; justify-content: space-between; align-items: center;
  height: 40px; padding-inline: var(--container-pad);
}
.utility__left { display: flex; align-items: center; gap: var(--space-16); }
.utility__think { font-size: 12px; line-height: 13px; color: var(--color-muted); }
.utility__right { display: flex; align-items: center; gap: var(--space-20); }

/* ── header (section-2-header) ────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--color-bg);
  box-shadow: inset 0 -1px 0 var(--color-line-dark);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; padding-inline: var(--container-pad);
}
.logo {
  font-family: var(--font-display); font-weight: 900; font-size: 20px; line-height: 25px; letter-spacing: -1.5px;
  color: var(--color-text); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.logo:hover { color: var(--color-brand); }

.nav__list { display: flex; gap: var(--space-32); }
.nav__link {
  display: block; position: relative;
  font-size: 14px; line-height: 15px; font-weight: 600;
  color: var(--color-muted); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link:hover, .nav__link.is-current { color: var(--color-text); }

.site-header__actions { display: flex; align-items: center; gap: var(--space-24); }
.site-header__login {
  position: relative; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: 14px; line-height: 15px; font-weight: 600; color: var(--color-muted);
  transition: color var(--dur-fast) var(--ease);
}
.site-header__login:hover { color: var(--color-text); }
.site-header__user { font-size: 14px; font-weight: 600; color: var(--color-text); }

.burger {
  display: none; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; border: 0; background: none;
  color: var(--color-text); cursor: pointer; position: relative;
}
.burger::after { content: ""; position: absolute; inset: -10px; }   /* 44px tap zone without moving layout */
.burger__icon { width: 24px; height: 24px; }

/* ── RG "stone" section (section-8-responsible-stone) ─────────────────── */
.stone { background: var(--color-light); color: var(--color-ink); }
.stone__inner { display: flex; flex-direction: column; gap: var(--space-48); padding: 80px var(--container-pad); }
.stone__header { display: flex; flex-direction: column; gap: var(--space-16); }
.stone__title {
  font-family: var(--font-display); font-weight: 900; font-size: 64px; line-height: 70px;
  letter-spacing: -2px; color: var(--color-ink);
}
.stone__lead { max-width: 720px; font-size: 16px; line-height: 24px; color: var(--color-ink); }

.stone__tools { display: flex; flex-direction: column; }
.stone__row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-block: var(--space-24);
  box-shadow: inset 0 1px 0 var(--color-line-light);
}
.stone__row-main { display: flex; gap: var(--space-40); width: 600px; max-width: 100%; }
.stone__num { font-family: var(--font-mono); font-weight: 800; font-size: 20px; line-height: 26px; color: var(--color-brand); }
.stone__row-text { display: flex; flex-direction: column; gap: var(--space-8); }
.stone__row-title { font-family: var(--font-display); font-weight: 900; font-size: 18px; line-height: 22px; color: var(--color-ink); }
.stone__row-desc { font-size: 14px; line-height: 15px; color: var(--color-ink); opacity: .8; }
.stone__row-link { font-size: 13px; line-height: 14px; font-weight: 700; color: var(--color-brand-ink); text-decoration: none; white-space: nowrap; }
.stone__row-link:hover { text-decoration: underline; }

.stone__support {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-24); border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--color-line-light);
}
.stone__support-text { display: flex; flex-direction: column; gap: var(--space-4); }
.stone__support-title { font-family: var(--font-display); font-weight: 900; font-size: 14px; line-height: 17px; color: var(--color-ink); }
.stone__support-desc { font-size: 13px; line-height: 14px; color: var(--color-ink); opacity: .8; }
.stone__support-mob, .stone__support-phone { display: none; }

/* ── warning band (section-9-warning) ─────────────────────────────────── */
.warning {
  background: var(--color-surface);
  box-shadow: inset 0 1px 0 var(--color-line-dark), inset 0 -1px 0 var(--color-line-dark);
}
.warning__inner {
  display: flex; justify-content: space-between; align-items: center;
  padding: 64px var(--container-pad);
}
.warning__title {
  width: 800px; max-width: 100%;
  font-family: var(--font-display); font-weight: 900; font-size: 40px; line-height: 44px;
  letter-spacing: -1px; color: var(--color-text);
}
.warning__aside { display: flex; flex-direction: column; gap: var(--space-24); width: 400px; max-width: 100%; }
.warning__text { font-size: 14px; line-height: 21px; color: var(--color-muted); }
.warning__rule, .warning__note { display: none; }
.warning__link { align-self: flex-start; font-size: 13px; line-height: 14px; font-weight: 800; color: var(--color-brand); text-decoration: none; }
.warning__link:hover { text-decoration: underline; }

/* how-it-works frame: 80px padding, 32/35 title, 480px aside, 13/20 text (desktop only) */
@media (min-width: 1200px) {
  .warning--hiw .warning__inner { padding: 80px var(--container-pad); }
  .warning--hiw .warning__title { width: 680px; font-size: 32px; line-height: 35px; letter-spacing: 0; }
  .warning--hiw .warning__aside { width: 480px; gap: var(--space-16); }
  .warning--hiw .warning__text { font-size: 13px; line-height: 20px; }
}

/* responsible-gambling frame: 233px band — 32/35 title, aside gap 20, 14/20 text (desktop only) */
@media (min-width: 1200px) {
  .warning--rg .warning__title { font-size: 32px; line-height: 35px; letter-spacing: 0; }
  .warning--rg .warning__aside { gap: var(--space-20); }
  .warning--rg .warning__text { line-height: 20px; }
}

/* ── payments strip (section-10-payments) ─────────────────────────────── */
.payments { background: var(--color-bg); }
.payments__inner {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-24) var(--container-pad);
}
.payments__left { display: flex; align-items: center; gap: var(--space-32); }
.payments__label {
  font-family: var(--font-display); font-weight: 900; font-size: 11px; line-height: 14px;
  color: var(--color-muted);
}
.payments__logos { width: 300px; height: 40px; }
.payments__logos img { width: 300px; height: 40px; object-fit: contain; }
.payments__right { display: flex; align-items: center; gap: var(--space-16); }
.payments__note { font-size: 12px; line-height: 13px; color: var(--color-muted); }

/* how-it-works frame: 40px padding all round, 280×36 logos, 13px note (desktop only) */
@media (min-width: 1200px) {
  .payments--wide .payments__inner { padding: 40px max(40px, calc((100% - 1360px) / 2)); }   /* the frame draws 40px sides (1360 content); wider screens centre it */
  .payments--wide .payments__left { gap: var(--space-24); }
  .payments--wide .payments__logos, .payments--wide .payments__logos img { width: 280px; height: 36px; }
  .payments--wide .payments__note { font-size: 13px; line-height: 14px; }
  .payments--wide .badge--debit { font-size: 9px; line-height: 11px; }
}

/* ── footer (section-11-footer) ───────────────────────────────────────── */
.site-footer { background: var(--color-bg-deep); color: var(--color-muted); }
.site-footer__inner { display: flex; flex-direction: column; gap: var(--space-48); padding: 80px var(--container-pad) 64px; }
.site-footer__brand { display: flex; flex-direction: column; gap: var(--space-16); }
.site-footer__logo { font-family: var(--font-display); font-weight: 900; font-size: 48px; line-height: 60px; letter-spacing: -2px; color: var(--color-text); }
.site-footer__tagline { font-size: 16px; line-height: 17px; color: var(--color-muted); }

.site-footer__nav {
  display: flex; flex-direction: column; gap: var(--space-16);
  padding-block: var(--space-48);
  box-shadow: inset 0 1px 0 var(--color-line-dark), inset 0 -1px 0 var(--color-line-dark);
}
.site-footer__group-btn { display: none; }
.site-footer__links { display: flex; flex-wrap: wrap; align-items: center; font-size: 13px; line-height: 14px; }
.site-footer__links li { display: inline-flex; align-items: center; }
.site-footer__group-title { text-transform: uppercase; margin-right: .3em; }
.site-footer__link { color: var(--color-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.site-footer__link:hover { color: var(--color-text); }
.site-footer__dot { margin-inline: .6em; }

.site-footer__legal { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.site-footer__legal-text { font-size: 13px; line-height: 21px; color: var(--color-muted); }   /* 12 of 13 frames: 13/21 */
.site-footer__sep { margin-inline: .35em; }
.site-footer__legal-text a { color: inherit; }
.site-footer__legal-text a:hover { color: var(--color-text); }

.site-footer__bottom {
  display: flex; justify-content: space-between;
  padding-top: var(--space-48);
  box-shadow: inset 0 1px 0 var(--color-line-dark);
  font-size: 13px; line-height: 14px;
}

/* ── back to top ──────────────────────────────────────────────────────── */
.to-top {
  position: fixed; right: var(--space-24); bottom: var(--space-24); z-index: var(--z-float);
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--color-brand); color: var(--color-text); cursor: pointer;
  box-shadow: var(--shadow-glow);
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.to-top:hover { background: var(--color-brand-hover); transform: translateY(-2px); }
.to-top::before { content: "↑"; font-weight: 700; }

/* ── mobile branch (frame 390) ────────────────────────────────────────── */
@media (max-width: 1199px) {
  .utility__inner { height: 32px; padding: 8px var(--container-pad-m); }
  .utility__left { gap: var(--space-8); }
  .utility__think { font-size: 10px; line-height: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .utility__right { display: none; }

  .site-header { background: var(--color-surface); }
  .site-header__inner { height: 56px; padding-inline: var(--container-pad-m); }
  .logo { font-size: 16px; line-height: 20px; }
  .nav { display: none; }
  .site-header__actions { gap: var(--space-12); }
  .site-header__login { font-size: 13px; color: var(--color-text); }
  .site-header__user { display: none; }
  .burger { display: inline-flex; }

  .stone__inner { gap: var(--space-32); padding: 64px var(--container-pad-m); }
  .stone__header { gap: var(--space-12); }
  .stone .eyebrow--stone { font-size: 10px; line-height: 12px; }
  .stone__title { font-size: 28px; line-height: 31px; }
  .stone__lead { font-size: 14px; line-height: 21px; color: var(--color-text-dark-2); }
  .stone__tools { gap: var(--space-20); }
  .stone__row { flex-direction: column; gap: var(--space-12); padding: 0 0 16px; box-shadow: none; }
  .stone__row-main { flex-direction: column; gap: var(--space-12); width: auto; }
  .stone__row-text { gap: var(--space-12); }
  .stone__num { font-size: 18px; line-height: 23px; }
  .stone__row-title { font-size: 15px; line-height: 19px; }
  .stone__row-desc { font-size: 13px; line-height: 14px; color: var(--color-text-dark-2); }
  /* 01 + title on one row, description below (mockup: row gap12 then column) */
  .stone__row-main { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-12); row-gap: var(--space-12); align-items: center; }
  .stone__row-text { display: contents; }
  .stone__row-desc { grid-column: 1 / -1; }
  .stone__support { flex-direction: column; align-items: stretch; gap: var(--space-16); padding: var(--space-20); background: var(--color-light-2); box-shadow: none; }
  .stone__support-text { gap: var(--space-6); }
  .stone__support-title { font-size: 13px; line-height: 16px; }
  .stone__support-desc { font-size: 13px; line-height: 14px; color: var(--color-text-dark-2); }
  .stone__support-desk { display: none; }
  .stone__support-mob { display: inline; }
  .stone__support-phone { display: block; font-family: var(--font-display); font-weight: 900; font-size: 20px; line-height: 25px; color: var(--color-ink); text-decoration: none; }
  .stone__support-btn { width: 100%; }

  .warning__inner { flex-direction: column; align-items: stretch; gap: var(--space-24); padding: 48px var(--container-pad-m); }
  .warning__title { width: auto; font-size: 24px; line-height: 30px; }
  .warning__aside { width: auto; gap: 0; }
  .warning__text { font-size: 13px; line-height: 20px; }
  .warning__rule { display: block; height: 0; margin: var(--space-24) 0; border: 0; border-top: 1px solid var(--color-line-dark); }
  .warning__note { display: block; margin-bottom: var(--space-8); font-size: 12px; line-height: 13px; color: var(--color-muted-4); }
  .warning__link { font-size: 12px; }

  .payments__inner { flex-direction: column; align-items: flex-start; gap: var(--space-16); padding: 32px var(--container-pad-m); }
  .payments__left { flex-direction: column; align-items: flex-start; gap: var(--space-16); }
  .payments__label { font-size: 10px; line-height: 12px; }
  .badge--debit { padding: 4px 8px; }
  .payments__right { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
  .payments__note { font-size: 11px; }

  .site-footer__inner { gap: var(--space-32); padding: 48px var(--container-pad-m); }
  .site-footer__brand { gap: var(--space-8); }
  .site-footer__logo { font-size: 28px; line-height: 35px; }
  .site-footer__tagline { font-size: 13px; line-height: 14px; }
  .site-footer__br { display: none; }
  .site-footer__nav { gap: 0; padding-block: 0; box-shadow: none; }
  .site-footer__group-btn {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    height: 48px; padding: 0; border: 0; background: none; cursor: pointer;
    font-size: 13px; line-height: 14px; color: var(--color-text); text-transform: uppercase;
    box-shadow: inset 0 -1px 0 var(--color-line-dark);
  }
  .site-footer__chev { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease); }
  .site-footer__group-btn[aria-expanded="true"] .site-footer__chev { transform: rotate(180deg); }
  .site-footer__group-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-base) var(--ease); }
  .site-footer__group-body.is-open { grid-template-rows: 1fr; }
  .site-footer__group-body > * { overflow: hidden; min-height: 0; visibility: hidden; transition: visibility 0s var(--dur-base); }
  .site-footer__group-body.is-open > * { visibility: visible; transition-delay: 0s; }
  .site-footer__links { flex-direction: column; align-items: flex-start; gap: 0; }
  .site-footer__links li { display: block; padding: 10px 0 10px 12px; }
  .site-footer__group-title, .site-footer__dot { display: none; }
  .site-footer__legal { grid-template-columns: 1fr; gap: var(--space-16); }
  .site-footer__legal-text { font-size: 11px; line-height: 17px; }
  .site-footer__sep { margin-inline: 0; }
  .site-footer__bottom { flex-direction: column; gap: var(--space-12); padding-top: var(--space-32); font-size: 11px; line-height: 12px; }
}

@media (max-width: 389px) {
  .site-header__actions { gap: var(--space-8); }
  .utility__left { flex: 1; min-width: 0; }
  .utility__think { flex: 1; min-width: 0; }
  .site-footer__legal-text { overflow-wrap: anywhere; }
}

/* mobile fixes from the frame-by-frame style check */
@media (max-width: 1199px) {
  .site-header__actions .btn--sm { min-height: 32px; padding: 9px 14px; font-size: 13px; line-height: 14px; }
  .utility__think { font-weight: 500; }
  .site-footer__group-name { font-weight: 700; }
  .stone__row-desc { opacity: 1; }
  .warning__note { font-weight: 700; }
  .warning__link { line-height: 13px; }
}