/* ============================================================
   WellBet — racing & sports information front-end
   Static demonstration build. Vanilla CSS, no frameworks.
   ============================================================ */

/* 1. TOKENS ------------------------------------------------- */
:root {
  --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: "Trebuchet MS", "Segoe UI", Verdana, sans-serif;

  --navy: #0c2f66;
  --navy-2: #123f80;
  --blue: #1c5aa0;
  --blue-2: #2e6fb0;
  --blue-3: #3877b6;   /* odds */
  --blue-4: #4a90d0;
  --blue-light: #e8f2fb;
  --blue-lighter: #f2f8fe;
  --sky: #2f86c8;

  --yellow: #f4c01e;
  --yellow-2: #ffd84d;
  --red: #e8443b;
  --green: #2fa15a;

  --ink: #16324f;
  --muted: #6a86a3;
  --line: #e2ecf6;
  --line-2: #d3e2f1;
  --white: #ffffff;

  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  --sh-1: 0 1px 3px rgba(12,47,102,.10), 0 3px 8px rgba(12,47,102,.06);
  --sh-2: 0 8px 22px rgba(12,47,102,.16);
  --sh-3: 0 16px 40px rgba(8,32,74,.28);

  --ticker-h: 44px;
  --header-h: 62px;
  --wrap: 1400px;
  --gap: 16px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* 2. RESET -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.5;
  font-size: 15px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background:
    linear-gradient(180deg,
      #e9f5fd 0, #cfe7f8 120px, #4a97d0 380px,
      #2c7cc0 720px, #1f6cb4 1200px, #2b81c2 1900px, #f3cf95 100%);
  background-attachment: fixed;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--blue-2); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; }
h1,h2,h3,h4 { line-height: 1.15; font-weight: 800; color: var(--navy); font-family: var(--font-display); }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 4px; }

.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; flex: none; }
.icon--sm { width: 18px; height: 18px; }
.icon--lg { width: 26px; height: 26px; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--navy); color:#fff; padding:10px 16px; border-radius: var(--r-sm); transition: top .2s var(--ease); }
.skip-link:focus { top: 12px; text-decoration: none; }
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* 3. BUTTONS ------------------------------------------------ */
.btn {
  --bg: var(--blue-2); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-pill); font-weight: 700; font-size: .9rem;
  color: var(--fg); background: var(--bg); box-shadow: var(--sh-1);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), filter .15s var(--ease);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 18px; height: 18px; }
.btn--yellow { --bg: linear-gradient(180deg, var(--yellow-2), var(--yellow)); --fg: var(--navy); }
.btn--outline-white { --bg: transparent; --fg: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.65); }
.btn--outline-white:hover { --bg: rgba(255,255,255,.14); }
.btn--white { --bg:#fff; --fg: var(--blue-2); }
.btn--block { width: 100%; }
.btn--sm { padding: 8px 14px; font-size: .82rem; }
.btn--lg { padding: 13px 26px; font-size: 1rem; }

/* 4. TICKER ------------------------------------------------- */
.ticker {
  position: sticky; top: 0; z-index: 90; height: var(--ticker-h);
  background: linear-gradient(90deg, var(--navy), var(--navy-2));
  display: flex; align-items: center; color:#fff; box-shadow: 0 2px 10px rgba(8,32,74,.35);
}
.ticker__viewport { flex: 1 1 auto; overflow: hidden; height: 100%; }
.ticker__track { display: flex; height: 100%; width: max-content; }
.ticker__item {
  display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 16px;
  color: #eaf3ff; font-size: .82rem; font-weight: 600;
  border-right: 1px solid rgba(255,255,255,.12); transition: background .15s var(--ease);
}
.ticker__item:hover { background: rgba(255,255,255,.10); text-decoration: none; }
.ticker__item .icon { width: 16px; height: 16px; color: #8fc0f0; }
.ticker__item .flag { font-size: .72rem; color: #9fc4ea; }
.ticker__time {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: .76rem;
  padding: 3px 8px; border-radius: var(--r-sm); background: rgba(255,255,255,.16); min-width: 54px; text-align: center;
}
.ticker__time.is-soon { background: var(--red); color:#fff; }
.ticker__time.is-mid { background: var(--yellow); color: var(--navy); }
.ticker__nav { display: flex; height: 100%; flex: none; }
.ticker__nav button { width: 40px; height: 100%; color:#fff; background: rgba(255,255,255,.10); transition: background .15s var(--ease); }
.ticker__nav button:hover { background: rgba(255,255,255,.22); }
.ticker__nav button + button { border-left: 1px solid rgba(255,255,255,.14); }

/* 5. HEADER ------------------------------------------------- */
.site-header {
  position: sticky; top: var(--ticker-h); z-index: 85; height: var(--header-h);
  transition: background .25s var(--ease), box-shadow .25s var(--ease);
}
.site-header.scrolled { background: linear-gradient(90deg, var(--navy), var(--blue)); box-shadow: 0 4px 16px rgba(8,32,74,.28); }
.site-header__inner { max-width: var(--wrap); margin-inline:auto; height:100%; padding-inline: 16px; display:flex; align-items:center; gap:14px; }
.brand { display:inline-flex; align-items:center; flex:none; }
.brand img { height: 30px; width:auto; }
.nav-toggle { display:none; align-items:center; justify-content:center; width:42px; height:42px; border-radius: var(--r-sm); color:#fff; background: rgba(255,255,255,.16); }
.header-spacer { flex: 1 1 auto; }

/* Racing / Sport switch (volleyball toggle) */
.switch { display:inline-flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:.95rem; letter-spacing:.02em; }
.switch__labels { display:inline-flex; align-items:center; gap:12px; }
.switch__labels span { opacity:.7; transition: opacity .2s var(--ease); cursor:pointer; }
.switch__labels span.active { opacity:1; }
.switch__track {
  position: relative; width: 66px; height: 30px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.28); box-shadow: inset 0 1px 3px rgba(0,0,0,.25); cursor: pointer;
}
.switch__thumb {
  position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #fff, #cfe3f5);
  box-shadow: 0 2px 4px rgba(0,0,0,.3); display:grid; place-items:center; color: var(--blue-2);
  transition: transform .25s var(--ease);
}
.switch__thumb .icon { width: 18px; height: 18px; }
.switch[data-mode="sport"] .switch__thumb { transform: translateX(36px); }

.header-actions { display:flex; align-items:center; gap:10px; flex:none; }
.header-crumbs { display:flex; align-items:center; gap:8px; flex:1 1 auto; margin: 0 16px; padding: 10px 18px; border-radius: var(--r-pill); background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); color:#eaf3ff; font-size:.76rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; overflow:hidden; white-space:nowrap; }
.header-crumbs a { color:#eaf3ff; } .header-crumbs a:hover { color:#fff; }
.header-crumbs .sep { opacity:.55; }
.header-crumbs .cur { color:#fff; }
@media (max-width: 860px){ .header-crumbs { display:none; } }

/* Interior page content card in the 3-column layout */
.content-card { background:#fff; border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: clamp(18px, 3vw, 34px); }
.content-card > h1 { color: var(--blue-2); font-size: 1.5rem; margin-bottom: 16px; }
.content-card h2 { color: var(--navy); font-size: 1.12rem; margin: 26px 0 8px; scroll-margin-top: 120px; }
.content-card h3 { color: var(--blue); font-size: 1rem; margin: 18px 0 6px; }
.content-card p, .content-card li { color:#33465e; font-size:.94rem; line-height:1.72; }
.content-card p { margin-bottom: 11px; }
.content-card ul.bullets { list-style: disc; padding-left: 22px; margin: 0 0 13px; }
.content-card ul.bullets li { margin-bottom: 6px; }
.content-card ul.bullets ul.bullets { margin: 6px 0 4px; }
.content-card strong { color: var(--navy); }
.content-card a { color: var(--blue-2); font-weight: 600; }
.content-card a:hover { color: var(--blue); }
.pdf-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.pdf-head h1 { margin:0; color: var(--blue-2); font-size:1.5rem; }
.pdf-embed { width:100%; height: 80vh; min-height: 520px; border:1px solid var(--line-2); border-radius: var(--r); background:#eef4fb; display:block; }
.pdf-fallback { padding: 16px; color: var(--muted); font-size:.9rem; }

/* 6. HERO --------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; min-height: 340px;
  background: #2f86c8 url("../img/hero-beach.svg") right center / cover no-repeat;
}
.hero::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg, rgba(11,44,96,.72) 0%, rgba(15,70,130,.35) 42%, rgba(15,70,130,0) 70%); }
.hero__inner { position: relative; z-index:2; max-width: var(--wrap); margin-inline:auto; padding: 46px 18px 54px; min-height: 340px; display:flex; align-items:center; }
.hero__slides { position: relative; max-width: 560px; min-height: 190px; }
.hero__slide { position:absolute; inset:0; opacity:0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); pointer-events:none; }
.hero__slide.active { opacity:1; transform:none; pointer-events:auto; position: relative; }
.hero__kicker { display:inline-block; color: var(--yellow-2); font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:.82rem; margin-bottom:10px; }
.hero h1 { color:#fff; font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1; text-transform: uppercase; letter-spacing:-.01em; text-shadow: 0 3px 14px rgba(6,28,66,.4); }
.hero h1 em { font-style: normal; color: var(--yellow-2); display:block; }
.hero__sub { color:#eaf4ff; font-size: 1.05rem; margin: 12px 0 20px; max-width: 42ch; }
.hero__dots { position:absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index:3; display:flex; gap:9px; }
.hero__dots button { width: 11px; height: 11px; border-radius:50%; background: rgba(255,255,255,.5); transition: background .2s var(--ease), transform .2s var(--ease); }
.hero__dots button.active { background:#fff; transform: scale(1.2); }

/* 7. LAYOUT ------------------------------------------------- */
.layout { max-width: var(--wrap); margin: 18px auto; padding-inline: 16px; display: grid; grid-template-columns: 232px minmax(0,1fr) 316px; gap: var(--gap); align-items: start; }
.col-main { min-width: 0; display:flex; flex-direction:column; gap: 22px; }

.sidebar-sticky { position: sticky; top: calc(var(--ticker-h) + var(--header-h) + 12px); }

/* Left nav card list */
.nav-list { display:flex; flex-direction:column; gap: 7px; }
.nav-card {
  display:flex; align-items:center; gap:12px; padding: 11px 14px; background:#fff; border-radius: var(--r);
  color: var(--ink); font-weight:700; font-size:.92rem; box-shadow: var(--sh-1);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), color .14s var(--ease);
}
.nav-card:hover { text-decoration:none; transform: translateX(3px); color: var(--blue-2); box-shadow: var(--sh-2); }
.nav-card .icon { width: 22px; height: 22px; color: var(--blue-2); }
.nav-card--active { background: linear-gradient(90deg, var(--blue), var(--blue-2)); color:#fff; }
.nav-card--active .icon { color: var(--yellow-2); }
.nav-title { color:#fff; font-weight:800; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; opacity:.9; padding: 12px 6px 2px; text-shadow: 0 1px 3px rgba(6,28,66,.4); }

/* 8. RACE CARDS --------------------------------------------- */
.cards-row { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap); }
.card { background:#fff; border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; display:flex; flex-direction:column; }
.card__head { display:flex; align-items:center; gap:9px; padding: 11px 14px; background: var(--blue-light); }
.card__head .icon { width: 22px; height: 22px; color: var(--blue-2); }
.card__head h3 { font-size: 1.02rem; color: var(--navy); margin-right:auto; }
.chip { font-size:.72rem; font-weight:800; padding: 3px 9px; border-radius: var(--r-pill); }
.chip--time { background: var(--blue-light); color: var(--blue-2); font-variant-numeric: tabular-nums; }
.chip--time.is-soon { background: var(--red); color:#fff; }
.chip--time.is-mid { background: var(--yellow); color: var(--navy); }
.chip--r { background: var(--blue-2); color:#fff; }
.card__subhead { display:flex; justify-content:space-between; padding: 8px 14px; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color: var(--muted); background: var(--blue-lighter); }
.runner { display:flex; align-items:center; gap:11px; padding: 9px 14px; border-top: 1px solid var(--line); }
.runner:hover { background: var(--blue-lighter); }
.silk { width: 28px; height: 28px; border-radius: 7px; flex:none; display:grid; place-items:center; color:#fff; font-weight:800; font-size:.78rem; box-shadow: inset 0 -3px 0 rgba(0,0,0,.14); }
.runner__name { min-width:0; }
.runner__name strong { display:block; font-size:.9rem; color: var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.runner__name span { font-size:.75rem; color: var(--muted); }
.odd {
  margin-left:auto; min-width: 56px; text-align:center; font-weight:800; font-size:.95rem; color:#fff;
  background: linear-gradient(180deg, var(--blue-4), var(--blue-3)); padding: 8px 10px; border-radius: var(--r-sm);
  box-shadow: 0 2px 4px rgba(12,47,102,.2); transition: transform .14s var(--ease), filter .14s var(--ease);
}
.odd:hover { transform: translateY(-2px); filter: brightness(1.06); text-decoration:none; color:#fff; }
.odd.is-selected { background: linear-gradient(180deg, var(--yellow-2), var(--yellow)); color: var(--navy); }
.card__foot .btn { border-radius:0; width:100%; box-shadow:none; padding: 12px; background: linear-gradient(90deg, var(--blue), var(--blue-2)); color:#fff; font-weight:800; letter-spacing:.04em; }
.card__foot .btn:hover { transform:none; filter: brightness(1.06); }

/* silk palette */
.silk--1{background:#e23a54}.silk--2{background:#1e88e5}.silk--3{background:#2e9247}
.silk--4{background:#ffb020;color:var(--navy)!important}.silk--5{background:#7b3fe4}
.silk--6{background:#14213d}.silk--7{background:#ff7a18}.silk--8{background:#d81b8c}
.silk--check{background:repeating-conic-gradient(#14213d 0 25%,#fff 0 50%) 0 0/13px 13px}

/* 9. RIGHT SIDEBAR / BET SLIP ------------------------------- */
.panel { background:#fff; border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow:hidden; }
.panel + .panel { margin-top: var(--gap); }
.panel__head { display:flex; align-items:center; gap:9px; padding: 12px 15px; font-weight:800; color: var(--navy); border-bottom: 2px solid var(--blue-light); font-family: var(--font-display); }
.panel__head .icon { color: var(--blue-2); }
.panel__head .count { margin-left:auto; background: var(--yellow); color: var(--navy); font-weight:800; font-size:.8rem; min-width:24px; height:24px; padding:0 7px; border-radius: var(--r-pill); display:grid; place-items:center; }
.panel__body { padding: 16px; }
.slip-empty { text-align:center; }
.slip-empty img { width: 200px; margin: 4px auto 12px; }
.slip-empty h4 { color: var(--blue-2); font-size: 1.15rem; }
.slip-empty p { color: var(--muted); font-size:.86rem; margin-top:6px; }
.slip-list { display:flex; flex-direction:column; gap:10px; margin-bottom: 12px; }
.slip-item { display:flex; align-items:center; gap:10px; padding: 9px 11px; border:1px solid var(--line); border-radius: var(--r); background: var(--blue-lighter); }
.slip-item .silk { width: 24px; height:24px; }
.slip-item .sm { min-width:0; }
.slip-item .sm strong { display:block; font-size:.86rem; }
.slip-item .sm span { font-size:.74rem; color: var(--muted); }
.slip-item .so { margin-left:auto; font-weight:800; color: var(--blue-2); }
.slip-item .rm { color: var(--muted); width:26px; height:26px; border-radius:7px; display:grid; place-items:center; }
.slip-item .rm:hover { background:#ffe6e9; color: var(--red); }

.imagine {
  background:#fff; border-radius: var(--r-lg); box-shadow: var(--sh-1); margin-top: var(--gap);
  padding: 16px; border-left: 5px solid var(--yellow);
}
.imagine h4 { font-size:.92rem; color: var(--navy); letter-spacing:.02em; }
.imagine p { font-size:.82rem; color: var(--muted); margin-top:6px; }
.imagine a { color: var(--blue-2); font-weight:700; }

/* 10. FEATURED RACE ---------------------------------------- */
.featured {
  position: relative; overflow:hidden; border-radius: var(--r-lg); box-shadow: var(--sh-2);
  background: linear-gradient(120deg, var(--navy) 0%, var(--blue) 60%, var(--sky) 100%);
  min-height: 260px; display:flex; align-items:center;
}
.featured__art { position:absolute; right:0; top:0; bottom:0; width: 52%; }
.featured__art img { width:100%; height:100%; object-fit: cover; opacity:.96; }
.featured__art::before { content:""; position:absolute; inset:0; background: linear-gradient(90deg, var(--navy) 0%, rgba(12,47,102,0) 55%); z-index:1; }
.featured__label { position: relative; z-index:2; padding: 26px 24px; }
.featured__label .ttl { font-family: var(--font-display); color:#fff; font-weight:800; text-transform:uppercase; font-size: clamp(1.8rem,4vw,2.8rem); line-height:.95; text-shadow: 0 3px 14px rgba(6,28,66,.4); }
.featured__label .ttl em { color: var(--yellow-2); font-style:normal; display:block; }
.featured__card { position: relative; z-index:3; margin-left: auto; width: 300px; max-width: 46%; margin-right: 24px; }
@media (max-width: 640px){ .featured__card{ margin: 0 16px 16px; width:auto; max-width:none; } }

/* 11. MEETING COLUMNS -------------------------------------- */
.section-title { color:#fff; font-family: var(--font-display); font-weight:800; text-align:center; text-transform:uppercase; letter-spacing:.06em; font-size:.95rem; margin-bottom: 10px; text-shadow: 0 1px 4px rgba(6,28,66,.4); }
.meet-cols { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gap); align-items:start; }
.meet-list { display:flex; flex-direction:column; gap: 8px; }
.meet {
  display:flex; align-items:center; gap:10px; padding: 11px 13px; background:#fff; border-radius: var(--r);
  box-shadow: var(--sh-1); transition: transform .14s var(--ease), box-shadow .14s var(--ease);
}
.meet:hover { text-decoration:none; transform: translateY(-2px); box-shadow: var(--sh-2); }
.meet .m-ico { width: 30px; height:30px; border-radius:8px; background: var(--blue-light); color: var(--blue-2); display:grid; place-items:center; flex:none; }
.meet .m-ico .icon { width:18px; height:18px; }
.meet .m-name { font-weight:700; font-size:.9rem; color: var(--ink); }
.meet .m-name small { display:block; font-weight:500; font-size:.72rem; color: var(--muted); }
.meet .m-r { font-size:.68rem; font-weight:800; padding:4px 7px; border-radius:6px; background: var(--blue-2); color:#fff; }
.meet .m-time { min-width: 52px; text-align:center; font-size:.74rem; font-weight:800; padding: 4px 8px; border-radius: var(--r-pill); background: var(--blue-light); color: var(--blue-2); font-variant-numeric: tabular-nums; }
.meet .m-time.is-soon { background: var(--red); color:#fff; }
.meet .m-time.is-mid { background: var(--yellow); color: var(--navy); }

.info-note { background: rgba(255,255,255,.9); border-radius: var(--r); padding: 14px 16px; color: var(--ink); font-size:.86rem; display:flex; gap:10px; align-items:flex-start; box-shadow: var(--sh-1); }
.info-note .icon { color: var(--blue-2); flex:none; }

/* 12. FOOTER ----------------------------------------------- */
.site-footer { position: relative; margin-top: 26px; color: #dbe9fa; background: linear-gradient(180deg, rgba(9,40,92,.2), rgba(9,40,92,.75)); }
.footer-apps { max-width: var(--wrap); margin-inline:auto; padding: 26px 18px 6px; display:flex; align-items:center; justify-content:space-between; gap: 18px; flex-wrap:wrap; }
.footer-apps .brand img { height: 34px; }
.store-badges { display:flex; gap: 12px; flex-wrap:wrap; }
.store-badges img { height: 46px; width:auto; }
.footer-rg { max-width: var(--wrap); margin-inline:auto; padding: 14px 18px; }
.footer-rg p { font-size:.86rem; line-height:1.7; color:#cfe0f4; margin-bottom: 12px; }
.footer-rg a { color: var(--yellow-2); }
.footer-rg strong { color:#fff; }

.footer-cols { max-width: var(--wrap); margin-inline:auto; padding: 6px 18px 14px; display:grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.footer-cols h4 { color:#fff; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom: 12px; }
.partner-row { display:flex; flex-wrap:wrap; gap: 10px; align-items:center; }
.partner-row .tile { background:#fff; border-radius: var(--r-sm); padding: 8px 10px; height: 46px; display:grid; place-items:center; }
.partner-row .tile img { height: 26px; width:auto; }
.pay-row { display:flex; gap:10px; align-items:center; }
.pay-row .tile { background:#fff; border-radius: var(--r-sm); padding: 8px 12px; height:46px; display:grid; place-items:center; }
.pay-row .tile img { height: 22px; }

.footer-links { max-width: var(--wrap); margin-inline:auto; padding: 6px 18px 14px; }
.footer-links > h4 { color:#fff; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom: 14px; }
.footer-links__grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px 20px; max-width: 900px; }
.footer-links__grid ul { display:flex; flex-direction:column; gap: 14px; }
.footer-links a { color:#eaf3fb; font-size:.98rem; font-weight:700; }
.footer-links a:hover { color:#fff; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); }
.footer-bottom__inner { max-width: var(--wrap); margin-inline:auto; padding: 16px 18px 26px; display:flex; align-items:center; gap: 14px; flex-wrap:wrap; }
.badge18 { width: 42px; height:42px; border-radius:50%; border: 2px solid #cfe0f4; color:#cfe0f4; display:grid; place-items:center; font-weight:800; font-size:.8rem; flex:none; }
.footer-bottom__inner .copy { font-size:.82rem; color:#aec6e4; margin-right: 10px; }
.footer-bottom__inner .mustbe { font-weight:700; color:#cfe0f4; font-size:.82rem; display:inline-flex; align-items:center; gap:8px; }

/* Think bar (sticky bottom) */
.think-bar {
  position: sticky; bottom: 0; z-index: 80; background:#fff; box-shadow: 0 -3px 14px rgba(8,32,74,.18);
  text-align:center; padding: 12px 16px;
}
.think-bar strong { display:block; color: var(--navy); font-family: var(--font-display); font-size: clamp(.95rem, 2vw, 1.15rem); letter-spacing:.02em; }
.think-bar span { color: var(--muted); font-size:.82rem; }
.think-bar a { color: var(--blue-2); font-weight:700; }
.think-bar .close { position:absolute; right: 10px; top: 8px; width:28px; height:28px; border-radius:7px; color: var(--muted); display:grid; place-items:center; }
.think-bar .close:hover { background: var(--blue-light); }

/* 13. PAGE HERO / DOCS (subpages) --------------------------- */
.page-hero { position: relative; overflow:hidden; background: linear-gradient(120deg, var(--navy), var(--blue) 70%, var(--sky)); color:#fff; }
.page-hero__inner { max-width: var(--wrap); margin-inline:auto; padding: 40px 18px; position:relative; z-index:2; }
.breadcrumbs { display:flex; gap:8px; align-items:center; font-size:.82rem; color:#bcd8f7; margin-bottom:8px; }
.breadcrumbs a { color:#bcd8f7; } .breadcrumbs a:hover { color:#fff; } .breadcrumbs .sep { opacity:.6; }
.page-hero h1 { color:#fff; font-size: clamp(1.8rem,4vw,2.6rem); margin-bottom:6px; }
.page-hero p { color:#dcecff; max-width: 60ch; }

.doc-wrap { max-width: 1100px; margin: 22px auto; padding-inline: 16px; display:grid; grid-template-columns: 250px minmax(0,1fr); gap: var(--gap); align-items:start; }
.doc-wrap--full { grid-template-columns: 1fr; }
.toc { position: sticky; top: calc(var(--ticker-h) + var(--header-h) + 12px); background:#fff; border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow:hidden; }
.toc .h { padding: 12px 15px; font-weight:800; color: var(--navy); border-bottom: 2px solid var(--blue-light); display:flex; align-items:center; gap:8px; font-family: var(--font-display); }
.toc .h .icon { color: var(--blue-2); }
.toc nav { padding: 8px; }
.toc a { display:block; padding: 8px 12px; border-radius: var(--r-sm); color: var(--ink); font-size:.87rem; font-weight:600; }
.toc a:hover, .toc a.is-active { background: var(--blue-light); color: var(--blue-2); text-decoration:none; }

.doc { background:#fff; border-radius: var(--r-lg); box-shadow: var(--sh-1); padding: clamp(20px, 4vw, 38px); }
.doc .updated { display:inline-flex; align-items:center; gap:7px; font-size:.82rem; color: var(--muted); background: var(--blue-lighter); border:1px solid var(--line); padding:6px 12px; border-radius: var(--r-pill); margin-bottom:16px; }
.doc h2 { font-size: 1.25rem; margin: 26px 0 10px; scroll-margin-top: calc(var(--ticker-h) + var(--header-h) + 16px); }
.doc h2:first-of-type { margin-top: 4px; }
.doc h3 { font-size: 1.02rem; color: var(--blue); margin: 18px 0 8px; }
.doc p, .doc li { color:#31465e; font-size:.95rem; line-height:1.75; }
.doc p { margin-bottom: 12px; }
.doc ul.bullets { list-style: disc; padding-left: 22px; margin-bottom: 14px; }
.doc ul.bullets li { margin-bottom: 6px; }
.doc .callout { display:flex; gap:12px; background: var(--blue-lighter); border:1px solid var(--line); border-left: 4px solid var(--blue-2); border-radius: var(--r); padding: 14px 16px; margin: 16px 0; }
.doc .callout .icon { color: var(--blue-2); flex:none; margin-top:2px; }
.doc .callout.warn { border-left-color: var(--yellow); background: #fff8e6; }
.doc .callout.warn .icon { color: #d9a406; }
.doc table.data { width:100%; border-collapse: collapse; margin: 14px 0; font-size:.9rem; }
.doc table.data th, .doc table.data td { border:1px solid var(--line); padding: 10px 12px; text-align:left; }
.doc table.data th { background: var(--blue-lighter); color: var(--navy); }

/* Auth (register / login / account) */
.auth-wrap { max-width: 520px; margin: 26px auto; padding-inline: 16px; }
.auth-card { background:#fff; border-radius: var(--r-lg); box-shadow: var(--sh-2); padding: clamp(22px, 4vw, 36px); }
.auth-card h1 { color: var(--navy); font-size: 1.6rem; margin-bottom: 4px; }
.auth-card .lead { color: var(--muted); font-size:.94rem; margin-bottom: 18px; }
.form-row2 { display:grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 480px){ .form-row2 { grid-template-columns: 1fr; } }
.field-error { color:#c0271e; font-size:.78rem; margin-top:5px; min-height: 1em; }
[aria-invalid="true"] { border-color:#e8443b !important; background:#fff6f5 !important; }
.form-banner { display:none; margin-bottom:16px; padding:11px 14px; border-radius: var(--r-sm); font-size:.9rem; }
.form-banner.ok { display:block; background:#e7f7ec; color:#1c7a3a; border:1px solid #bfe6cc; }
.form-banner.err { display:block; background:#fdecec; color:#b3261e; border:1px solid #f3c2c0; }
.auth-alt { text-align:center; margin-top:16px; font-size:.92rem; color: var(--muted); }
.auth-alt a { font-weight:700; }
.pw-wrap { position: relative; }
.pw-toggle { position:absolute; right:8px; top:50%; transform: translateY(-50%); background: var(--blue-light); color: var(--blue-2); border-radius: var(--r-sm); padding:6px 10px; font-size:.76rem; font-weight:700; }
.account-meta { display:flex; flex-direction:column; gap: 2px; margin: 8px 0 20px; }
.account-row { display:flex; justify-content:space-between; gap:12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.account-row span { color: var(--muted); font-size:.86rem; }
.account-row strong { color: var(--ink); font-size:.95rem; }
.account-avatar { width:62px; height:62px; border-radius:50%; background: linear-gradient(135deg, var(--blue-4), var(--blue)); color:#fff; display:grid; place-items:center; font-weight:800; font-size:1.5rem; font-family: var(--font-display); flex:none; }
.account-head { display:flex; align-items:center; gap:14px; margin-bottom:10px; }
.account-head h1 { margin:0; }
.account-head .lead { margin:0; }

/* Contact */
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.form-field { margin-bottom: 14px; }
.form-field label { display:block; font-weight:700; font-size:.86rem; margin-bottom:6px; color: var(--navy); }
.form-field input, .form-field select, .form-field textarea { width:100%; font:inherit; padding: 11px 13px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--blue-lighter); color: var(--ink); transition: border-color .15s var(--ease), background .15s; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline:none; border-color: var(--blue-2); background:#fff; }
.form-field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size:.8rem; color: var(--muted); margin-top:4px; }
.form-status { margin-top:12px; padding:12px 14px; border-radius: var(--r-sm); font-size:.9rem; display:none; }
.form-status.ok { display:block; background:#e7f7ec; color:#1c7a3a; border:1px solid #bfe6cc; }
.ci-row { display:flex; gap:12px; align-items:flex-start; padding: 13px 0; border-bottom:1px solid var(--line); }
.ci-row:last-child { border-bottom:0; }
.ci-ico { width:42px; height:42px; border-radius:12px; background: var(--blue-light); color: var(--blue-2); display:grid; place-items:center; flex:none; }
.ci-row h4 { font-size:.94rem; } .ci-row p, .ci-row a { font-size:.9rem; color: var(--muted); }

/* Back to top */
.to-top { position: fixed; right: 16px; bottom: 84px; z-index: 82; width: 44px; height:44px; border-radius:50%; background: var(--blue-2); color:#fff; display:grid; place-items:center; box-shadow: var(--sh-2); opacity:0; transform: translateY(12px); pointer-events:none; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.to-top.is-visible { opacity:1; transform:none; pointer-events:auto; }
.to-top .icon { transform: rotate(180deg); }

/* Reveal */
.reveal { opacity:0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity:1; transform:none; }

.drawer-backdrop { position: fixed; inset:0; background: rgba(6,20,45,.5); opacity:0; visibility:hidden; z-index:110; transition: opacity .28s var(--ease); }
.drawer-backdrop.is-open { opacity:1; visibility:visible; }
.drawer-close { display:none; align-items:center; justify-content:space-between; margin-bottom:10px; }

/* 14. RESPONSIVE ------------------------------------------- */
@media (max-width: 1200px) {
  .layout { grid-template-columns: 210px minmax(0,1fr); }
  .col-right { grid-column: 1 / -1; }
  .col-right .sidebar-sticky { position: static; display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items:start; }
  .col-right .imagine, .col-right .panel + .panel { margin-top: 0; }
}
@media (max-width: 1024px) {
  .cards-row { grid-template-columns: 1fr 1fr; }
  .hero__sub { font-size: .98rem; }
}
@media (max-width: 860px) {
  .nav-toggle { display:inline-flex; }
  .switch { display:none; }
  .col-left {
    position: fixed; inset: 0 auto 0 0; z-index:120; width: 268px; max-width: 84vw;
    background: linear-gradient(180deg, var(--blue), var(--navy)); box-shadow: var(--sh-3);
    padding: 14px; transform: translateX(-102%); transition: transform .28s var(--ease); overflow-y:auto;
  }
  .col-left.is-open { transform: translateX(0); }
  .col-left .sidebar-sticky { position: static; }
  .drawer-close { display:flex; }
  .drawer-close .brand img { height: 28px; }
  .layout { grid-template-columns: 1fr; }
  .cards-row { grid-template-columns: 1fr; }
  .meet-cols { grid-template-columns: 1fr; }
  .col-right .sidebar-sticky { grid-template-columns: 1fr; }
  .doc-wrap { grid-template-columns: 1fr; }
  .toc { position: static; }
  .contact-grid { grid-template-columns: 1fr; }
  .featured { flex-direction: column; align-items: stretch; }
  .featured__art { position: relative; width: 100%; height: 150px; }
  .featured__label { padding: 20px; }
  .featured__card { margin: 0 16px 18px; width: auto; max-width: none; }
}
@media (max-width: 640px) {
  .footer-cols { grid-template-columns: 1fr; gap: 20px; }
  .footer-links__grid { grid-template-columns: 1fr 1fr; }
  .footer-apps { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-rg p { font-size: .84rem; }
}
@media (max-width: 560px) {
  :root { --ticker-h: 42px; }
  .ticker__nav { display: none; }
  .ticker__item { padding: 0 13px; font-size: .8rem; }
  /* keep header labels visible, just make the bar compact so all fits */
  .site-header__inner { gap: 8px; padding-inline: 12px; }
  .header-actions { gap: 7px; }
  .header-actions .btn { padding: 7px 12px; font-size: .78rem; }
  .brand img { height: 27px; }
  .nav-toggle { width: 40px; height: 40px; }
  /* hero */
  .hero { min-height: 296px; }
  .hero__inner { padding: 28px 16px 46px; min-height: 296px; }
  .hero__slides { min-height: 172px; max-width: 100%; }
  .hero h1 { font-size: clamp(1.75rem, 8.6vw, 2.4rem); text-shadow: 0 3px 16px rgba(6,28,66,.55); }
  .hero__sub { font-size: .95rem; margin: 10px 0 16px; }
  .hero__dots { bottom: 14px; }
  /* content pages */
  .content-card { padding: 18px 15px; }
  .content-card > h1, .pdf-head h1 { font-size: 1.3rem; }
  .pdf-embed { height: 68vh; min-height: 400px; }
  .page-hero__inner { padding: 26px 16px; }
  .auth-wrap { margin: 16px auto; }
  .auth-card { padding: 20px 16px; }
  /* responsible-gambling message bar */
  .think-bar { padding: 10px 36px 10px 14px; }
  .think-bar strong { font-size: .9rem; }
  .think-bar span { font-size: .76rem; }
  .to-top { bottom: 108px; right: 12px; width: 42px; height: 42px; }
  .footer-links__grid { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .footer-bottom__inner { gap: 8px 12px; }
}
@media (max-width: 380px) {
  .header-actions .btn { padding: 6px 9px; font-size: .72rem; }
  .brand img { height: 24px; }
  .nav-toggle { width: 36px; height: 36px; }
  .hero h1 { font-size: 1.68rem; }
  .footer-links__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; }
}
@media print {
  .ticker, .site-header, .to-top, .think-bar, .col-left, .col-right { display:none!important; }
  body { background:#fff; }
}