/* Page-level structure: container, utility strip, header, the shared tail
 * (responsible-gambling block, support strip, payment methods, footer).
 *
 * Every number comes from the mockup via fig-spec. Desktop frame 1440 → content
 * 1312 with 64px gutters; mobile frame 390 → content 350 with 20px gutters.
 */

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

/* Section rhythm from the mockup: 96px on the light sections, 64px on the
   gradient ones, 48px everywhere on mobile. */
.section { padding-block: var(--section-pad-y); }
.section--dark { background: var(--color-bg); }
.section--light,
.sec--light,
.support-strip,
.doc { --color-muted-dark: var(--color-muted-dark-onlight); }   /* contrast on #f3f4f6 */
.section--light { background: var(--color-light); color: var(--color-text-dark); }
.section--grad { background: var(--grad-brand); padding-block: var(--section-pad-y-dark); }

/* Section eyebrow: 11px bold, uppercase, 0.08em tracking (fig-spec 0:32).
   Brand red everywhere, as the mockup paints it: the gradient sections start dark
   at the top and the eyebrow sits in the first tenth of them. */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-3xs);
  line-height: 15.03px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-brand);
}

/* ── utility strip ────────────────────────────────────────────────────── */
/* 1440×32, padding 0 64, text 12px (fig-spec 0:4). The "18+ |" prefix the
   mockup puts here is dropped: the age notice lives once in the header and
   once in the footer (TZ.md). */
.utility {
  background: var(--color-bg);
  font-size: var(--fs-2xs);
  line-height: 16px;
}
/* Above 1199 the two mobile bands fold into the single desktop row. */
.utility__band { display: contents; }
.utility__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-16);
  min-height: 32px;
}
.utility__note { color: var(--color-muted); }
.utility__links { display: flex; align-items: center; gap: var(--space-16); }
.utility__links a,
.utility__links span { color: var(--color-border-light); font-weight: 700; text-decoration: none; }
.utility__links a { position: relative; transition: color var(--dur-fast) var(--ease); }
.utility__links a:hover { color: var(--color-brand); }
.utility__links a::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%;
  height: 24px;
}

/* ── header ───────────────────────────────────────────────────────────── */
/* 1440×88, padding 0 64 (fig-spec 0:11). */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--color-bg);
}
/* The header is sticky, so everything the browser scrolls to has to clear it:
   an anchor from the step nav, the skip link, and the first field with an error
   that forms.js focuses — all of them landed underneath it. */
#main,
main [id] { scroll-margin-top: calc(var(--header-h) + var(--space-16)); }
.site-header__inner {
  display: flex; align-items: center;
  min-height: var(--header-h);
  gap: var(--space-24);
}

/* brand: wordmark 28px Anton + two-line 10px label, gap 12 (fig-spec 0:12) */
.brand { display: flex; align-items: center; gap: var(--space-12); text-decoration: none; }
.brand__mark {
  font-family: var(--font-display);
  font-size: 28px; line-height: 42px;
  color: var(--color-text);
}
.brand__rule { flex: 0 0 1px; width: 1px; height: 24px; background: var(--color-text); }

/* One line, Manrope Bold 12/16.39, 186 wide — the mockup's own kicker (0:15).
   The 96px cap and the 10px size were ours and folded it onto two lines. */
.brand__label {
  font-weight: 700; font-size: var(--fs-2xs); line-height: 16.39px;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}

.nav { margin-left: auto; }
.nav__list { display: flex; gap: var(--space-24); }
.nav__link {
  position: relative;
  display: inline-block;
  font-weight: 600; font-size: var(--fs-xs); line-height: 18px;
  color: var(--color-border-light);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link::after {                       /* tap target, not padding */
  content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%;
  height: 24px;
}
.nav__link:hover,
.nav__link.is-current { color: var(--color-brand); }

/* "18+ Australians only" — Inter 11px, the mockup's one non-Manrope note */
.age-notice--mobile { display: none; }   /* shown only in the mobile utility strip */
.age-notice {
  font-family: var(--font-note);
  font-size: var(--fs-3xs); line-height: 13px;
  color: #b3b3b3;
  white-space: nowrap;
}
.site-header__actions { display: flex; align-items: center; gap: var(--space-12); }

.burger { display: none; }

/* ── responsible gambling block (on every page) ───────────────────────── */
.rg { padding-block: var(--section-pad-y); background: var(--color-bg); }
.rg .container { display: flex; flex-direction: column; gap: 40px; }
.rg__head { display: flex; flex-direction: column; gap: 40px; }
.rg__heading { display: flex; flex-direction: column; gap: var(--space-8); }
.rg__heading span {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--fs-h1); line-height: 108.39px;
  color: var(--color-border-light);
}
.rg__heading span + span { color: var(--color-brand); }

.rg__modules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-24);
  min-height: 220px;                     /* the dividers set the row height in the mockup */
}
.rg__module {
  display: flex; flex-direction: column; gap: var(--space-12);
  padding-top: var(--space-20);
  position: relative;
}
.rg__module + .rg__module::before {       /* 1×220 divider, #2a2f3a */
  content: ""; position: absolute; left: -12px; top: 0;
  width: 1px; height: 100%; background: var(--color-border);
}
.rg__num {
  font-family: var(--font-display);
  font-size: var(--fs-h2); line-height: 72px;
  color: rgb(239 68 68 / .2);
}
.rg__title {
  font-family: var(--font-body); font-weight: 800;
  font-size: var(--fs-body); line-height: 22px;
  color: var(--color-border-light);
}
.rg__text { font-size: var(--fs-small); line-height: 19px; color: var(--color-muted); }
.rg__link {
  font-weight: 800; font-size: var(--fs-xs); line-height: 18px;
  color: var(--color-brand); text-decoration: none;
  align-self: flex-start; position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.rg__link::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 24px; }
.rg__link:hover { color: var(--color-brand-hover); text-decoration: underline; }

/* ── support strip ────────────────────────────────────────────────────── */
/* 1440×56, #f3f4f6, padding 0 64 (fig-spec 0:278) */
.support-strip { background: var(--color-light); color: var(--color-text-dark); }
.support-strip__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-16);
  min-height: 56px;
}
.support-strip__text { font-size: var(--fs-xs); line-height: 18px; }
.support-strip__text a { color: inherit; font-weight: 700; }
.support-strip__right { display: flex; align-items: center; gap: var(--space-12); }
.badge-18 {
  display: inline-flex; align-items: center;
  padding: var(--space-4) var(--space-10);
  background: var(--color-bg); color: var(--color-border-light);
  font-weight: 800; font-size: var(--fs-2xs); line-height: 16px;
}
.support-strip__betstop {
  display: inline-flex; align-items: center; gap: var(--space-8);
  font-weight: 800; font-size: var(--fs-xs); line-height: 18px;
  color: var(--color-brand); text-decoration: none;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.support-strip__betstop::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 24px; }
.support-strip__betstop:hover { color: var(--color-brand-active); text-decoration: underline; }

/* ── payment methods ──────────────────────────────────────────────────── */
/* 1440×140, padding 32 64 (fig-spec 0:286) */
.payments { background: var(--color-bg); padding-block: var(--space-32); }
.payments__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); }
.payments__left { display: flex; align-items: center; gap: var(--space-16); }
.payments__label {
  font-weight: 700; font-size: var(--fs-2xs); line-height: 16px;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-border-light);
}
.payments__logos { width: 300px; height: 40px; }
.payments__logos img { width: 100%; height: 100%; object-fit: contain; }
.payments__right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-8); }
.payments__badge {
  padding: var(--space-6) var(--space-10);
  background: var(--color-brand); color: var(--color-text);
  font-weight: 800; font-size: var(--fs-3xs); line-height: 15px;
  text-transform: uppercase;
}
.payments__note { font-size: var(--fs-xs); line-height: 18px; color: var(--color-muted); text-align: right; }
.payments__fine { font-size: var(--fs-3xs); line-height: 15px; color: var(--color-muted); }

/* ── footer ───────────────────────────────────────────────────────────── */
/* 1440×771, gradient, padding 64 (fig-spec 0:296) */
.site-footer {
  position: relative; isolation: isolate;
  background: var(--grad-brand);
  padding-block: var(--space-64);
  overflow: hidden;
}
/* The 560×560 wash the mockup floats behind the columns — 8%, so the footer's
   own gradient carries straight through it (0:297). */
.site-footer::before {
  content: ""; position: absolute; z-index: -1;
  right: -160px; top: -120px; width: 560px; height: 560px;
  background: var(--color-brand); opacity: .08;
}
.site-footer__inner { display: flex; flex-direction: column; gap: var(--space-48); }
.site-footer__watermark {
  font-family: var(--font-display);
  font-size: 100px; line-height: 151px;
  color: rgb(255 255 255 / .12);
  user-select: none;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 520px repeat(4, 1fr);
  gap: var(--space-48);
}
.site-footer__brand { display: flex; flex-direction: column; gap: var(--space-12); }
.site-footer__name {
  font-family: var(--font-display);
  font-size: 22px; line-height: 33px;
  color: var(--color-text);
}
.site-footer__tagline { font-size: var(--fs-small); line-height: 19px; color: rgb(255 255 255 / .702); }
.site-footer__age { font-size: var(--fs-xs); line-height: 18px; color: rgb(255 255 255 / .502); }
.site-footer__rg { display: flex; flex-direction: column; gap: var(--space-8); }
.site-footer__warning { font-size: var(--fs-small); line-height: 19px; color: rgb(255 255 255 / .6); }
.site-footer__rg a {
  font-size: var(--fs-small); line-height: 19px;
  color: var(--color-text); text-decoration: none;
  position: relative; width: fit-content;
  transition: color var(--dur-fast) var(--ease);
}
.site-footer__rg a::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 24px; }
.site-footer__rg a:hover { text-decoration: underline; }

.site-footer__col { display: flex; flex-direction: column; gap: var(--space-12); }
.site-footer__title {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-2xs); line-height: 16px;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: rgb(255 255 255 / .6);
}
.site-footer__list { display: flex; flex-direction: column; gap: var(--space-12); }
.site-footer__list a {
  position: relative;
  font-size: var(--fs-small); line-height: 19px;
  color: var(--color-text); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.site-footer__list a::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 24px; }
.site-footer__list a:hover { text-decoration: underline; }

.site-footer__rule { height: 1px; background: rgb(255 255 255 / .102); border: 0; margin: 0; }
.site-footer__legal { display: flex; flex-direction: column; gap: var(--space-12); }
.site-footer__legal p:first-child { font-size: var(--fs-xs); line-height: 18px; color: rgb(255 255 255 / .502); }
.site-footer__legal p { font-size: var(--fs-2xs); line-height: 16px; color: rgb(255 255 255 / .6); }
.site-footer__bottom {
  display: flex; align-items: center; justify-content: flex-end;
  font-size: var(--fs-2xs); line-height: 16px; color: rgb(255 255 255 / .6);
}

/* ── back to top ──────────────────────────────────────────────────────── */
.to-top {
  position: fixed; right: var(--space-24); bottom: var(--space-24); z-index: var(--z-header);
  width: 44px; height: 44px; border: 0;
  background: var(--color-brand); color: #fff; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
.to-top:hover { background: var(--color-brand-hover); }
.to-top::before { content: "↑"; font-size: 18px; }

/* ── mobile ───────────────────────────────────────────────────────────── */
/* The mockup's mobile frame (390) drives this block. */
@media (max-width: 1199px) {
  :root { --header-h: 56px; }
  .container { padding-inline: var(--container-pad-mobile); }
  .section { padding-block: var(--section-pad-y-mobile); }   /* markets: 48 in the mobile frame */
  .section--grad { padding-block: var(--space-64); }          /* next-to-jump: 64 */
  .rg { padding-block: var(--space-64); }

  /* The mockup splits the utility strip into two rows on mobile:
     the risk line, then the support links (frames 0:3586 / 0:3588). */
  /* On mobile each band is its own full-width strip with its own 20px gutters. */
  .utility__inner { display: block; padding-inline: 0; }
  .utility__band {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-8);
    padding: var(--space-8) var(--container-pad-mobile);
  }
  .utility__band--support { justify-content: flex-start; padding-block: var(--space-6); }
  .utility__note { font-size: var(--fs-micro); font-weight: 700; line-height: 14px; }
  .utility__links { gap: var(--space-12); padding-block: var(--space-6); font-size: var(--fs-micro); }
  .age-notice--mobile { display: block; align-self: center; font-size: 9px; line-height: 11px; }
  .utility__links a, .utility__links span { font-size: var(--fs-micro); line-height: 14px; }

  .site-header__inner { padding-block: 0; gap: var(--space-16); }
  .brand__label, .brand__rule { display: none; }
  .brand__mark { font-size: 24px; line-height: 36px; }
  .nav { display: none; }
  .site-header .age-notice { display: none; }   /* mobile frame puts it in the utility strip */
  .site-header__actions { margin-left: auto; gap: var(--space-16); }
  .burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer;
    position: relative;
  }
  /* 44 tall, 34 wide: the zone grows left and never past the header's right edge —
     at 320 an outward -10px right put it at 320.77 and pushed the document 1px. */
  .burger::after { content: ""; position: absolute; inset: -10px 0 -10px -10px; }
  .burger__line { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--color-light-2); }

  /* Mobile frame: the block stacks at 32, the headline is 42/42 four apart and the
     modules keep their 16 inner padding (0:3824). */
  .rg .container { gap: var(--space-32); }
  .rg__modules { grid-template-columns: 1fr; gap: var(--space-28); }
  .rg__module + .rg__module::before { display: none; }
  .rg__heading { gap: var(--space-4); }
  .rg__heading span { font-size: 42px; line-height: 42px; }
  .rg__num { font-size: 32px; line-height: 44px; }
  .rg__module { padding-top: 14px; }   /* the module is 172 in the mobile frame (0:3830) */

  .support-strip__inner { flex-direction: column; align-items: flex-start; gap: var(--space-16); padding-block: var(--space-24); }

  /* Mobile frame: logos, badge, note and fine print are one 16-pitch column and the
     "Payment Methods" label is not drawn — it stays for screen readers (31:96). */
  .payments__inner { flex-direction: column; align-items: flex-start; gap: var(--space-16); }
  .payments__left, .payments__right { display: contents; }
  .payments__label {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .payments__logos { width: 100%; max-width: 300px; }
  .payments__badge { font-size: var(--fs-micro); line-height: 14px; }
  .payments__note { text-align: left; font-size: var(--fs-2xs); line-height: 16px; }
  .payments__fine { font-size: var(--fs-micro); line-height: 14px; }

  .site-footer { padding-block: var(--space-48); }
  .site-footer__inner { gap: var(--space-32); }
  .site-footer__watermark { font-size: 54px; line-height: 81px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-24); }
  .site-footer__tagline,
  .site-footer__age,
  .site-footer__warning { font-size: var(--fs-2xs); line-height: 16px; color: var(--color-muted); }
  .site-footer__rg a { font-size: var(--fs-2xs); line-height: 16px; font-weight: 700; }
  .site-footer__title { font-weight: 800; font-size: var(--fs-3xs); line-height: 15px; color: var(--color-muted); }
  /* Mobile frame: a directory column is a 15 title over 18 rows, all 8 apart (31:115). */
  .site-footer__col { gap: var(--space-8); }
  .site-footer__list { gap: var(--space-8); }
  .site-footer__list a { font-size: var(--fs-xs); line-height: 18px; }
  .site-footer__legal p,
  .site-footer__legal p:first-child { font-size: var(--fs-3xs); line-height: 15px; color: var(--color-muted); }
  .site-footer__bottom { font-size: var(--fs-micro); line-height: 14px; color: var(--color-muted); }
}

/* ── narrower than the mobile frame (390) ──────────────────────────────── */
/* The mockup stops at 390. Below it the header row — wordmark, Log In, Join Now,
   burger — no longer fits 280px of content and the labels broke over two lines
   (measured: 320 and 360). Nothing here reaches the mockup's own width. */
@media (max-width: 389px) {
  .site-header__inner { gap: var(--space-12); }
  .brand__mark { font-size: 20px; line-height: 30px; }
  .site-header__actions { gap: var(--space-12); }
  .site-header__actions .btn { white-space: nowrap; }
  .site-header__actions .btn--link { padding-inline: 0; }
  .site-header__actions .btn--primary { padding-inline: var(--space-12); }
}

/* Between the two mockup frames: keep the footer columns from collapsing to a
   single line of four narrow strips before the mobile branch takes over. */
@media (min-width: 1200px) and (max-width: 1439px) {
  .site-footer__grid { grid-template-columns: minmax(320px, 1fr) repeat(4, minmax(140px, auto)); gap: var(--space-32); }
}