/* =========================================================
   OnlyBetsAU — independent informational portal
   Shared stylesheet. Dark-first, token driven.
========================================================= */

:root {
  --bg: #0a0e14;
  --bg-2: #0d1219;
  --surface: #141b25;
  --surface-2: #1b2431;
  --surface-3: #212c3b;
  --border: #27323f;
  --border-2: #35475c;
  --text: #e9eef5;
  --text-2: #aab6c6;
  --text-3: #7f8c9e;
  --accent: #ffb224;
  --accent-soft: rgba(255, 178, 36, 0.12);
  --accent-ink: #1a1206;
  --teal: #2ee6a8;
  --teal-soft: rgba(46, 230, 168, 0.12);
  --red: #ff7a6b;
  --red-soft: rgba(255, 122, 107, 0.12);
  --radius: 16px;
  --radius-sm: 10px;
  --maxw: 1180px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 86px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(900px 500px at 12% -8%, rgba(255, 178, 36, 0.10), transparent 60%),
    radial-gradient(800px 520px at 92% 2%, rgba(46, 230, 168, 0.07), transparent 62%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5 { margin: 0 0 0.5em; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.1vw, 2.35rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.02rem; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: 0.5em; }
strong { color: #fff; font-weight: 650; }
small { font-size: 0.86rem; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100000;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: 0 0 8px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =========================================================
   TOP NOTICE + HEADER
========================================================= */

.top-notice {
  background: var(--accent-soft);
  border-bottom: 1px solid rgba(255, 178, 36, 0.22);
  color: #ffd38a;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
  text-align: center;
}
.top-notice .container { padding: 9px 20px; }

.site-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(10, 14, 20, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 68px; }

.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; color: var(--text); font-weight: 800; }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 36px;
  border-radius: 10px;
  background: linear-gradient(140deg, var(--accent), #ff8a3d);
  color: var(--accent-ink);
  font-size: 0.95rem; font-weight: 900;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text b { font-size: 1.04rem; letter-spacing: -0.02em; }
.brand-text span {
  color: var(--text-3); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
}

.site-nav ul { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.site-nav li { margin: 0; }
.site-nav a {
  display: block; padding: 9px 13px;
  border-radius: 9px;
  color: var(--text-2); font-size: 0.94rem; font-weight: 600;
}
.site-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }

.age-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 11px;
  border: 1px solid var(--red); border-radius: 999px;
  background: var(--red-soft);
  color: var(--red);
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  padding: 9px 12px;
  border: 1px solid var(--border-2); border-radius: 9px;
  background: var(--surface-2);
  color: var(--text);
  font-family: inherit; font-size: 0.9rem; font-weight: 700;
  cursor: pointer;
}

/* =========================================================
   HERO + 18+ GATE OVER THE FIRST BLOCK
   The gate covers the first block only. The rest of the
   page stays readable and scrollable at all times.
========================================================= */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  padding: 72px 0 96px;
  /* Fills the first screen. --chrome-h is the measured height of the
     notice bar plus the sticky header, set by js/site.js on load and
     resize; the literal is the fallback when scripting is off. */
  min-height: calc(100vh - var(--chrome-h, 104px));
  min-height: calc(100svh - var(--chrome-h, 104px));
  border-bottom: 1px solid var(--border);
  /* Layer order, front to back:
       1. scrim, keeps the headline legible over any photograph
       2. the photograph itself, supplied inline as --bg-photo
       3+. a designed fallback backdrop that shows through while
           the photograph is still outstanding, so the block never
           reads as an empty band.
     The photograph is sized cover, so it hides the fallback
     completely once the file lands. */
  background-image:
    linear-gradient(180deg, rgba(10, 14, 20, 0.52) 0%, rgba(10, 14, 20, 0.74) 56%, var(--bg) 100%),
    var(--bg-photo, none),
    radial-gradient(1150px 540px at 16% 10%, rgba(255, 178, 36, 0.17), transparent 62%),
    radial-gradient(950px 540px at 86% 84%, rgba(46, 230, 168, 0.13), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.022) 0 2px, rgba(255, 255, 255, 0) 2px 9px),
    linear-gradient(180deg, #111926 0%, #0b1017 100%);
  background-size: cover, cover, auto, auto, auto, auto;
  background-position: center center, center 30%, center, center, center, center;
  background-repeat: no-repeat;
}
/* Legibility insurance for the type sitting directly on a photograph. */
.hero h1,
.hero-lead { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55); }
.hero > .container { width: 100%; }
/* Intentionally not positioned: the gate below anchors to .hero so it
   covers the whole first screen rather than just this content box. */
.hero-stage { display: flex; align-items: center; }
.hero-inner { width: 100%; text-align: center; }

/* The first block has three states, in order:
     1. hl-loading  - simulated load, the loader panel is shown
     2. ag-pending  - loaded, waiting on the 18+ confirmation
     3. neither     - revealed
   In states 1 and 2 only this block is obscured; the rest of the
   page is readable and scrollable throughout. */
.hero-inner {
  transition: filter 0.55s ease, opacity 0.55s ease, transform 0.55s ease;
}
html.hl-loading .hero-inner,
html.ag-pending .hero-inner {
  filter: blur(9px);
  opacity: 0.45;
  transform: translateY(10px);
  pointer-events: none;
  user-select: none;
}
html.hl-loading .hero-cue { display: none; }

.age-gate { display: none; }
/* The gate waits its turn: it only appears once loading has finished. */
html.ag-pending:not(.hl-loading) .age-gate { display: flex; }

.age-gate {
  position: absolute; inset: 0;
  z-index: 50;
  align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(7, 10, 15, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.age-card {
  position: relative;
  width: 100%; max-width: 480px;
  overflow: hidden;
  border: 1px solid var(--border-2);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow);
  text-align: center;
}
.age-accent { height: 5px; background: linear-gradient(90deg, var(--accent), var(--teal)); }
.age-content { padding: 32px 26px 8px; }

.age-icon-ring {
  display: inline-flex; align-items: center; justify-content: center;
  width: 74px; height: 74px; margin-bottom: 18px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.35rem; font-weight: 800; letter-spacing: -0.03em;
}
.age-card h2 { font-size: 1.5rem; margin-bottom: 18px; }
.age-divider { width: 54px; height: 3px; margin: 0 auto 18px; border-radius: 2px; background: var(--border-2); }
.age-description { color: var(--text-2); font-size: 0.97rem; margin-bottom: 4px; }
.age-note { color: var(--text-3); font-size: 0.82rem; margin: 14px 0 0; }
.age-cta-zone { padding: 18px 26px 26px; }

.age-cta {
  display: block; width: 100%;
  padding: 15px 18px;
  border: 0; border-radius: 12px;
  background: linear-gradient(180deg, #ffc248, var(--accent));
  color: var(--accent-ink);
  font-family: inherit; font-size: 1rem; font-weight: 800;
  cursor: pointer;
}
.age-cta:hover { filter: brightness(1.06); }
.age-under { margin: 13px 0 0; color: var(--text-3); font-size: 0.84rem; }

/* =========================================================
   FIRST-BLOCK LOADER
   Single source of truth for the duration: js/site.js reads
   --hl-duration off the root element, so changing it here
   changes the whole sequence.
========================================================= */

:root { --hl-duration: 2600ms; }

.hero-loader { display: none; }
html.hl-loading .hero-loader { display: flex; }

.hero-loader {
  position: absolute; inset: 0;
  z-index: 60;
  align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(7, 10, 15, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hl-card {
  width: 100%; max-width: 360px;
  padding: 30px 26px 26px;
  border: 1px solid var(--border-2); border-radius: 20px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow);
  text-align: center;
}

.hl-ring {
  display: block;
  width: 44px; height: 44px; margin: 0 auto 18px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: hl-spin 0.9s linear infinite;
}

.hl-label {
  margin: 0 0 16px;
  color: var(--text-2);
  font-size: 0.95rem; font-weight: 600;
}

.hl-track {
  height: 4px; overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
}
.hl-bar {
  display: block; width: 0; height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--teal));
  animation: hl-fill var(--hl-duration, 2600ms) ease-out forwards;
}

.hl-note {
  margin: 14px 0 0;
  color: var(--text-3);
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}

@keyframes hl-spin { to { transform: rotate(360deg); } }
@keyframes hl-fill { from { width: 0; } to { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .hero-inner { transition: none; }
  .hl-ring { animation: none; border-top-color: var(--accent); }
  .hl-bar { animation: none; width: 100%; }
}

/* Scroll cue — a full-height first screen hides the fact that there is
   more below, so point at it. Suppressed while the gate is pending. */
.hero-cue {
  position: absolute; left: 50%; bottom: 26px;
  z-index: 20;
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  transform: translateX(-50%);
  color: var(--text-3);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.hero-cue:hover { color: var(--accent); text-decoration: none; }
.hero-cue svg { width: 20px; height: 20px; animation: cue-nudge 2.4s ease-in-out infinite; }
html.ag-pending .hero-cue { display: none; }

@keyframes cue-nudge {
  0%, 100% { transform: translateY(0); opacity: 0.65; }
  50% { transform: translateY(5px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cue svg { animation: none; }
}

/* =========================================================
   HERO CONTENT
========================================================= */

.eyebrow {
  display: inline-block; margin-bottom: 20px;
  padding: 7px 16px;
  border: 1px solid var(--border-2); border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.84rem; font-weight: 700; letter-spacing: 0.02em;
}
.hero h1 { max-width: 22ch; margin: 0 auto 0.45em; }
.hero h1 .grad {
  background: linear-gradient(94deg, var(--accent), var(--teal));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero-lead {
  max-width: 76ch; margin: 0 auto 30px;
  color: var(--text-2); font-size: clamp(1rem, 1.5vw, 1.15rem);
}
.hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.85rem; font-weight: 600;
}
.chip b { color: var(--text); font-weight: 700; }
.chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: 0 0 7px; }
.chip-dot.warn { background: var(--accent); }
.chip-dot.stop { background: var(--red); }

/* =========================================================
   SECTIONS
========================================================= */

.section { padding: 62px 0; border-top: 1px solid var(--border); }
.section.alt { background: var(--bg-2); }
.section-head { max-width: 80ch; margin-bottom: 36px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-eyebrow {
  display: block; margin-bottom: 12px;
  color: var(--accent);
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
}
.section-lead { color: var(--text-2); font-size: 1.05rem; margin-bottom: 0; }

.prose { max-width: 78ch; }
.prose p:last-child { margin-bottom: 0; }
.stack > * + * { margin-top: 20px; }

/* =========================================================
   IMAGERY
   Photographs are commissioned from image-brief.json and sit
   under a scrim on every surface. A missing file degrades to
   an aspect-correct placeholder, never to a broken layout.
========================================================= */

.media {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  object-fit: cover;
}
.media-placeholder {
  display: flex; align-items: center; justify-content: center;
  padding: 12px; overflow: hidden;
  background-color: var(--surface);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.025) 0 10px,
    rgba(255, 255, 255, 0) 10px 20px
  );
  color: var(--text-3);
}
.media-placeholder span {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
  text-align: center; word-break: break-all; opacity: 0.8;
}

/* Wide band above or inside a section */
.band { margin-bottom: 32px; }
.band .media { aspect-ratio: 16 / 7; }
.band-tall .media { aspect-ratio: 16 / 9; }

/* Figure with a credit or explanatory caption */
.media-figure { margin: 0; }
.media-figure figcaption {
  margin-top: 10px;
  color: var(--text-3); font-size: 0.84rem; line-height: 1.5;
}

/* Image bleeding to the top edge of a card */
.card-media {
  margin: -26px -24px 18px;
  border: 0; border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  aspect-ratio: 8 / 5;
}

/* Two-column photo + text */
.media-split {
  display: grid; gap: 28px; align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.media-split .media { aspect-ratio: 3 / 2; }
.media-split p:last-child { margin-bottom: 0; }

/* Subpage header with an optional photograph */
.page-head.has-photo {
  background-image:
    linear-gradient(180deg, rgba(10, 14, 20, 0.60) 0%, rgba(10, 14, 20, 0.84) 68%, var(--bg) 100%),
    var(--bg-photo, none),
    radial-gradient(900px 420px at 20% 8%, rgba(255, 178, 36, 0.13), transparent 60%),
    linear-gradient(180deg, #101825 0%, #0b1017 100%);
  background-size: cover, cover, auto, auto;
  background-position: center center, center 35%, center, center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--border);
  padding-bottom: 46px;
}
.page-head.has-photo h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5); }

@media (max-width: 420px) {
  .card-media { margin: -20px -18px 16px; }
}

/* Grids and cards */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.card {
  padding: 26px 24px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.card h3, .card h4 { margin-bottom: 0.5em; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.card-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: 14px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.95rem; font-weight: 800;
}
.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; margin-bottom: 16px;
  border: 1px solid var(--border-2); border-radius: 11px;
  background: var(--surface-2);
  font-size: 1.1rem;
}
.card-muted { color: var(--text-2); font-size: 0.96rem; }
.card.highlight { border-color: var(--border-2); background: linear-gradient(180deg, var(--surface-2), var(--surface)); }

/* Definition rows (licence data) */
.datalist { margin: 0; }
.datalist div {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.datalist div:last-child { border-bottom: 0; padding-bottom: 0; }
.datalist dt {
  flex: 0 0 210px;
  color: var(--text-3); font-size: 0.86rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.datalist dd { flex: 1 1 260px; margin: 0; font-size: 0.98rem; }

/* Callouts */
.callout {
  display: flex; gap: 16px;
  padding: 22px 24px;
  border: 1px solid var(--border-2); border-left-width: 4px; border-radius: var(--radius-sm);
  background: var(--surface);
}
.callout-icon { flex: 0 0 auto; font-size: 1.3rem; line-height: 1.3; }
.callout h3, .callout h4 { margin-bottom: 0.4em; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout.warn { border-left-color: var(--accent); background: linear-gradient(90deg, var(--accent-soft), var(--surface) 55%); }
.callout.stop { border-left-color: var(--red); background: linear-gradient(90deg, var(--red-soft), var(--surface) 55%); }
.callout.info { border-left-color: var(--teal); background: linear-gradient(90deg, var(--teal-soft), var(--surface) 55%); }
.callout + .callout { margin-top: 16px; }

/* Pros / cons */
.proscons { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.pc-col { padding: 26px 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.pc-col.pros { border-top: 3px solid var(--teal); }
.pc-col.cons { border-top: 3px solid var(--red); }
.pc-list { margin: 0; padding: 0; list-style: none; }
.pc-list li { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); margin: 0; }
.pc-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.pc-mark { flex: 0 0 auto; font-weight: 800; }
.pros .pc-mark { color: var(--teal); }
.cons .pc-mark { color: var(--red); }
.pc-list b { display: block; }
.pc-list .pc-text { color: var(--text-2); font-size: 0.95rem; }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
thead th {
  background: var(--surface-2); color: var(--text);
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.015); }

/* Help contacts */
.help-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.help-card {
  padding: 24px;
  border: 1px solid var(--border-2); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.help-card h4 { margin-bottom: 0.3em; }
.help-phone { display: block; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--teal); }
.help-phone:hover { text-decoration: none; filter: brightness(1.1); }
.help-card p { margin: 8px 0 0; color: var(--text-2); font-size: 0.92rem; }
.help-card p a { word-break: break-word; }

/* FAQ */
.faq { max-width: 86ch; }
.faq details {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: 12px;
}
.faq details[open] { border-color: var(--border-2); }
.faq summary {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 22px;
  cursor: pointer;
  font-size: 1.02rem; font-weight: 650;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  color: var(--accent);
  font-size: 1.35rem; font-weight: 700; line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: #fff; }
.faq .faq-body { padding: 0 22px 20px; color: var(--text-2); }
.faq .faq-body p:last-child { margin-bottom: 0; }

/* Big disclaimer */
.disclaimer-block {
  padding: 30px 28px;
  border: 1px solid var(--red); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 122, 107, 0.09), var(--surface));
}
.disclaimer-block h2 {
  font-size: 1.1rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--red);
}
.disclaimer-block p { color: var(--text-2); font-size: 0.94rem; }
.disclaimer-block p:last-child { margin-bottom: 0; }

/* Page header for subpages */
.page-head { padding: 54px 0 34px; }
.page-head h1 { max-width: 28ch; margin-bottom: 0.4em; font-size: clamp(1.9rem, 3.8vw, 2.7rem); }
.page-head p { max-width: 74ch; color: var(--text-2); margin-bottom: 0; }
.breadcrumb { margin-bottom: 16px; color: var(--text-3); font-size: 0.86rem; }
.breadcrumb a { color: var(--text-3); }
.breadcrumb a:hover { color: var(--accent); }
.updated { margin-top: 18px; color: var(--text-3); font-size: 0.84rem; }

/* =========================================================
   FOOTER
========================================================= */

.site-footer { border-top: 1px solid var(--border); background: var(--bg-2); padding: 56px 0 30px; }
.footer-top {
  display: grid; gap: 34px;
  grid-template-columns: minmax(260px, 1.5fr) repeat(auto-fit, minmax(170px, 1fr));
  margin-bottom: 40px;
}
.footer-about p { color: var(--text-2); font-size: 0.94rem; max-width: 46ch; }
.footer-col h4 {
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 1em;
}
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: var(--text-2); font-size: 0.94rem; }
.footer-col a:hover { color: var(--accent); }

.footer-legal { padding: 26px 0 0; border-top: 1px solid var(--border); }
.footer-legal h5 {
  margin: 0 0 10px;
  color: var(--red);
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
}
.footer-legal p { color: var(--text-3); font-size: 0.84rem; line-height: 1.65; }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding-top: 20px; margin-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--text-3); font-size: 0.84rem;
}
.footer-bottom .age-chip { font-size: 0.74rem; }

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 860px) {
  .nav-toggle { display: block; order: 3; }
  .site-nav { order: 4; display: none; width: 100%; padding: 6px 0 14px; }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav a { padding: 12px 14px; }
  .header-inner { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  .hero { padding: 48px 0 80px; }
  .section { padding: 48px 0; }
  .datalist dt { flex: 1 1 100%; }
}

@media (max-width: 420px) {
  body { font-size: 16px; }
  .container { padding: 0 16px; }
  .card, .pc-col, .help-card, .disclaimer-block { padding: 20px 18px; }
  .age-content { padding: 26px 20px 6px; }
  .age-cta-zone { padding: 14px 20px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media print {
  .age-gate, .site-header, .top-notice, .nav-toggle { display: none !important; }
  html.ag-pending .hero-inner { filter: none; opacity: 1; }
  body { background: #fff; color: #000; }
}