/* Bizzo Casino — theme for the monobrand template (ro-RO)
   Palette, type and component recipes read off bizzocasino.com:
   body #2b1234, nav #41294a, card #452d4f, accent #fdcd0a,
   the call to action a green plate #bcff50 -> #08b83a on #24112c text,
   everything set in Poppins. */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap;
  src: url('/assets/fonts/poppins-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap;
  src: url('/assets/fonts/poppins-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --scheme: dark;

  /* type scale: every font-size in the sheet snaps to one of these steps */
  --fs-1: .7rem;
  --fs-2: .78rem;
  --fs-3: .85rem;
  --fs-4: .95rem;
  --fs-5: 1.05rem;
  --fs-6: 1.2rem;
  --fs-7: 1.35rem;

  /* ---- Bizzo's own ramp -------------------------------------------------
     The neutral is a plum scale struck off the lobby's own #2b1234 canvas.
     Its four darkest steps are the four surfaces the live site actually
     ships — body #2b1234, panel #3c2944, nav #41294a, game card #452d4f —
     so a component that asks for "surface" lands on a real Bizzo colour
     rather than an interpolated one. Above that the steps run out to the
     site's two text greys, #ba9cb4 and #f8e1f3.                          */
  --stb-neutral-950: 36 17 44;    /* #24112c  deepest: table heads, plates */
  --stb-neutral-900: 43 18 52;    /* #2b1234  body                          */
  --stb-neutral-850: 50 24 60;    /* #32183c  header band                   */
  --stb-neutral-800: 60 41 68;    /* #3c2944  dropdowns, inputs             */
  --stb-neutral-750: 65 41 74;    /* #41294a  nav elements                  */
  --stb-neutral-700: 69 45 79;    /* #452d4f  game-card info strip          */
  --stb-neutral-600: 86 58 96;    /* #563a60  borders                       */
  --stb-neutral-550: 99 69 110;
  --stb-neutral-500: 122 84 134;
  --stb-neutral-400: 154 115 164;
  --stb-neutral-350: 169 139 164;
  --stb-neutral-300: 186 156 180; /* #ba9cb4  body copy                     */
  --stb-neutral-200: 211 188 208;
  --stb-neutral-150: 228 207 224;
  --stb-neutral-100: 248 225 243; /* #f8e1f3  bright copy                   */
  --stb-neutral-50: 255 250 243;  /* #fffaf3  white                         */
  --stb-white: 255 250 243;
  --stb-black: 26 10 32;

  /* gold read off the lobby: #fdcd0a is the active colour that marks every
     heading, price and link; #ffb800 the accent under it; #cb7529 the
     wordmark's own bevel shadow. Text on gold is the body plum. */
  --stb-gold-100: 255 232 160;
  --stb-gold-200: 253 224 54;     /* #fde036 */
  --stb-gold-300: 253 205 10;     /* #fdcd0a  mainActiveColor */
  --stb-gold-500: 255 184 0;      /* #ffb800  accentMain      */
  --stb-gold-600: 203 117 41;     /* #cb7529  logo bevel      */
  --stb-gold-700: 36 17 44;       /* #24112c  label on gold   */

  /* "brand" is the green plate every Bizzo call to action is painted on:
     a vertical #bcff50 -> #08b83a, inverted on hover. */
  --stb-brand-500: 188 255 80;    /* #bcff50 */
  --stb-brand-600: 8 184 58;      /* #08b83a */
  --stb-brand-700: 6 143 45;
  --stb-brand-200: 215 255 154;
  --stb-brand-150: 232 255 198;

  /* the nav glyphs take the active gold, the way the lobby filters its own
     menu icons to it */
  --stb-blue-500: 253 205 10;
  --stb-blue-600: 255 184 0;
  --stb-blue-700: 203 117 41;

  --stb-red-500: 254 81 81;       /* #fe5151  live / 18+ */
  --stb-green-500: 15 168 16;     /* #0fa810  success    */

  /* ---- surfaces -------------------------------------------------------- */
  --bg: rgb(var(--stb-neutral-900));
  /* the plum the hero artwork carries at its top and side edges, so the
     banner can extend past the picture without a seam */
  --hero-blue: #2b1234;
  /* the shared stop list both hero scrims run, each in its own direction:
     a short solid lip, then an eased ramp to nothing */
  --hero-fade:
    rgb(var(--stb-neutral-900)) 0%,
    rgb(var(--stb-neutral-900)) 20%,
    rgb(var(--stb-neutral-900) / .96) 30%,
    rgb(var(--stb-neutral-900) / .84) 40%,
    rgb(var(--stb-neutral-900) / .68) 50%,
    rgb(var(--stb-neutral-900) / .5) 60%,
    rgb(var(--stb-neutral-900) / .32) 70%,
    rgb(var(--stb-neutral-900) / .16) 80%,
    rgb(var(--stb-neutral-900) / .04) 90%,
    rgb(var(--stb-neutral-900) / 0) 100%;
  /* the sides run the same eased ramp but over a shorter distance, since
     they only have to carry the picture's edge into the bare plum beside
     it. The left runs further: that is the side the copy sits on, so it
     doubles as the headline's ground. */
  --hero-side:
    rgb(var(--stb-neutral-900)) 0%,
    rgb(var(--stb-neutral-900)) 14%,
    rgb(var(--stb-neutral-900) / .94) 22%,
    rgb(var(--stb-neutral-900) / .8) 30%,
    rgb(var(--stb-neutral-900) / .6) 38%,
    rgb(var(--stb-neutral-900) / .38) 46%,
    rgb(var(--stb-neutral-900) / .2) 54%,
    rgb(var(--stb-neutral-900) / .08) 62%,
    rgb(var(--stb-neutral-900) / 0) 72%;
  --hero-side-soft:
    rgb(var(--stb-neutral-900) / .85) 0%,
    rgb(var(--stb-neutral-900) / .6) 4%,
    rgb(var(--stb-neutral-900) / .34) 9%,
    rgb(var(--stb-neutral-900) / .16) 14%,
    rgb(var(--stb-neutral-900) / .05) 19%,
    rgb(var(--stb-neutral-900) / 0) 24%;
  --bg-top: rgb(var(--stb-neutral-950));
  --bg-elevated: rgb(var(--stb-neutral-750));
  --surface: rgb(var(--stb-neutral-700));
  --surface-2: rgb(var(--stb-neutral-750));
  --border: rgb(var(--stb-neutral-600));
  --border-soft: rgb(var(--stb-neutral-800));

  --text: rgb(var(--stb-neutral-50));
  --text-muted: rgb(var(--stb-neutral-200));
  /* the fine print takes neutral-300, the site's own #ba9cb4, which is the
     lowest step on this ramp that still clears 4.5:1 on every surface the
     copy actually sits on */
  --text-faint: rgb(var(--stb-neutral-300));

  /* links and accents are the lobby's active gold */
  --gold: rgb(var(--stb-gold-300));
  --gold-2: rgb(var(--stb-gold-200));
  --green: rgb(var(--stb-gold-300));

  --grad-gold: linear-gradient(180deg, rgb(var(--stb-gold-200)) 0%, rgb(var(--stb-gold-500)) 100%);
  /* the lobby's call-to-action plate, and the hover that flips it */
  --grad-mint: linear-gradient(to bottom, rgb(var(--stb-brand-500)), rgb(var(--stb-brand-600)));
  --grad-mint-hover: linear-gradient(to bottom, rgb(var(--stb-brand-600)), rgb(var(--stb-brand-500)));
  --grad-teal: linear-gradient(180deg, rgb(var(--stb-neutral-750)) 0%, rgb(var(--stb-neutral-800)) 100%);
  --on-accent: rgb(var(--stb-gold-700));

  --glow-a: rgba(253, 205, 10, .05);
  --glow-b: rgba(255, 149, 236, .06);
  /* the header keeps a plum band a step up from the canvas */
  --header-bg: linear-gradient(180deg, rgb(var(--stb-neutral-850)) 0%, rgb(var(--stb-neutral-900)) 100%);
  --nav-panel-bg: rgb(var(--stb-neutral-850));
  --band-bg: linear-gradient(to top, rgb(var(--stb-neutral-950)), rgb(var(--stb-neutral-950) / .55));
  --scrim-top: linear-gradient(to bottom, rgb(var(--stb-neutral-950) / .7), transparent);
  --overlay: rgb(43 18 52 / .94);

  --win: rgb(var(--stb-gold-300));
  --win-glow: rgba(253, 205, 10, .4);
  --tint-accent: rgba(253, 205, 10, .12);
  --accent-glow: rgba(253, 205, 10, .32);
  --cta-glow: rgba(188, 255, 80, .26);
  --subtle-fill: rgba(248, 225, 243, .05);
  --subtle-fill-2: rgba(248, 225, 243, .1);
  /* the marks are black-on-transparent, so they are flattened to white
     rather than greyed the way they were against a light lobby */
  --provider-filter: brightness(0) invert(1);
  --provider-blend: normal;

  /* ---- radii: the lobby rounds tight - 5px on controls, 8px on cards --- */
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-btn: 5px;
  --radius-pill: 9999px;
  --radius-thumb: 5px;

  /* ---- type: Poppins throughout, the way the lobby sets it -------------
     Bizzo runs one family at five weights: 900 and 700 carry the display
     lines, 600 the buttons and badges, 500 the nav, 400 the body. Nothing
     is set in caps except the footer menu and the eyebrows.            */
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-weight: 700;
  --display-track: -.01em;
  --display-case: none;
  --btn-weight: 600;
  --btn-track: 0;
  --btn-case: none;
  --btn-shadow: none;
  /* the lobby's buttons sit flat: no hard step, just a short press */
  --btn-shadow-height: 0px;
  --btn-active-transform: 1px;
  --btn-label: rgb(var(--stb-neutral-50));
  --nav-weight: 500;
  --nav-track: 0;
  --nav-case: none;
  --hero-stroke: 0;

  --container: 1180px;
  --container-narrow: 720px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .25s;
  --shadow-1: 0 14px 34px -12px rgba(0, 0, 0, .65);
}
:root { --icon-accent: var(--gold-2); }

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

html {
  color-scheme: var(--scheme);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; font-weight: var(--display-weight); letter-spacing: var(--display-track); text-transform: var(--display-case); }
p { color: var(--text-muted); }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--gold);
  color: var(--on-accent);
  padding: .6rem 1rem;
  border-radius: var(--radius-sm);
  z-index: 200;
  font-weight: 700;
}
.skip-link:focus { left: 1rem; top: 1rem; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

.wrap {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
.wrap-narrow { max-width: var(--container-narrow); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.6rem;
  border-radius: var(--radius-btn);
  font-family: var(--font-display);
  font-weight: var(--btn-weight);
  font-size: var(--fs-4);
  text-transform: var(--btn-case);
  letter-spacing: var(--btn-track);
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), filter var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* ---- buttons, built to the lobby's own recipe -------------------------
   A flat vertical gradient, a 1px lit rim, a 2px inset highlight along the
   top edge and a hard step underneath that the press sinks onto.        */
.btn-primary {
  border: 1px solid rgba(255, 233, 176, .5);
  color: rgb(var(--stb-gold-700));
  background: var(--grad-gold);
  text-shadow: 0 2px 0 rgba(92, 46, 0, .25);
  box-shadow: 0 2px #ffe9b0 inset, 0 var(--btn-shadow-height) 0 0 rgb(var(--stb-gold-700));
}
.btn-primary:hover {
  text-shadow: none;
  background: linear-gradient(180deg, rgb(var(--stb-gold-100)) 0%, rgb(var(--stb-gold-300)) 100%);
}
.btn-primary:active {
  box-shadow: 0 1px #ffe9b0 inset, 0 1px rgb(var(--stb-gold-700));
  transform: translateY(var(--btn-active-transform));
}

.btn-ghost {
  border: 1px solid rgba(181, 117, 129, .45);
  color: var(--btn-label);
  background: var(--grad-teal);
  text-shadow: 0 2px 0 rgba(17, 0, 0, .3);
  box-shadow: 0 2px #8a4152 inset, 0 var(--btn-shadow-height) 0 0 rgb(var(--stb-neutral-800));
}
.btn-ghost:hover {
  text-shadow: none;
  color: var(--btn-label);
  border-color: rgba(181, 117, 129, .3);
  background: linear-gradient(180deg, rgb(var(--stb-neutral-300)) 0%, rgb(var(--stb-neutral-600)) 100%);
}
.btn-ghost:active {
  color: rgb(var(--stb-gold-200) / .8);
  box-shadow: 0 1px #4e1a24 inset, 0 1px rgb(var(--stb-neutral-800));
  transform: translateY(var(--btn-active-transform));
}

/* the lobby steps the step down with the button */
.btn-sm,
.header-actions .btn {
  --btn-shadow-height: 2px;
  --btn-active-transform: 1px;
  border-radius: 6px;
}

.btn-sm { padding: .55rem 1.1rem; font-size: var(--fs-3); }

/* ---- the cast plaques the old template shipped -----------------------
   Same three plates the lobby uses, so the header reads identically on a
   legal page. Slice and border-width hold one ratio per plate or the
   gold rail thickens as it turns a corner; see styles.css for the full
   note on the numbers.                                                 */
.btn-primary,
.header-actions .btn {
  background: none;
  border-style: solid;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-primary:hover,
.header-actions .btn:hover { filter: brightness(1.08); background: none; }
.btn-primary:active,
.header-actions .btn:active {
  background: none;
  box-shadow: none;
  filter: brightness(.95);
  transform: translateY(var(--btn-active-transform));
}

/* one stretched image, not a nine-slice: the plate's rails carry a
   horizontal gradient from each flared corner inwards, so slicing it cut
   that ramp and butted the modelled corners against a flat band of gold.
   See the full note in styles.css. */
.btn-primary {
  --btn-active-transform: 2px;
  position: relative;
  border: 0;
  background: none;
  /* sides clear the corner flares, top and bottom the rails, and the top
     carries the drop Luckiest Guy's high cap band needs */
  padding: 1.05em 2.5em .75em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 48, 0, .6);
}
/* on its own layer, so the purple header plates can switch it off rather
   than have green show through their rounded corners */
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--grad-mint);
}
.header-actions .btn-primary::before { content: none; }
.btn-primary.btn-sm { padding: .95em 2.2em .7em; --btn-active-transform: 1px; }

.header-actions .btn {
  --btn-active-transform: 1px;
  border-width: 13px 17px;
  padding: .1rem .15rem;
  font-size: var(--fs-4);
  letter-spacing: 0;
}
/* the plate-era label shadows: see styles.css — they outranked the
   overlay's `text-shadow: none` and ghosted the pill labels */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border-soft);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--header-bg);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 72px;
}

.brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: var(--fs-6); flex-shrink: 0; }
.brand-logo { height: 52px; width: auto; }

.nav-side { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.nav-side-left { justify-content: flex-start; }
.nav-side-right { justify-content: flex-end; margin-left: auto; }

.nav-side ul { display: flex; align-items: center; gap: 1.75rem; }
.nav-side ul a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--fs-4);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.nav-side ul a:hover { color: var(--text); }

.nav-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--icon-accent);
}

.main-nav { display: none; }

.main-nav ul { display: flex; gap: 1.75rem; }
.main-nav ul a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--fs-4);
  transition: color var(--dur) var(--ease);
}
.main-nav ul a:hover { color: var(--text); }

.header-actions { display: flex; align-items: center; gap: .6rem; }

.nav-toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.nav-toggle:hover { background: var(--subtle-fill-2); }

.nav-toggle-bar {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translateX(-50%);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav-toggle-bar:nth-child(1) { top: 14px; }
.nav-toggle-bar:nth-child(2) { top: 19px; }
.nav-toggle-bar:nth-child(3) { top: 24px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { top: 19px; transform: translateX(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { top: 19px; transform: translateX(-50%) rotate(-45deg); }

.nav-actions { display: none; }

.site-footer {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-soft);
  padding-top: clamp(3rem, 5vw, 4.5rem);
}

.footer-inner {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  padding-bottom: 2.5rem;
}
@media (min-width: 780px) {
  .footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.footer-brand .brand-logo { height: 30px; }
.footer-brand p { margin: .9rem 0 1.1rem; font-size: var(--fs-4); max-width: 480px; }

.footer-col h3 {
  font-size: var(--fs-3);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: .65rem; }
.footer-col a { color: var(--text-muted); font-size: var(--fs-4); transition: color var(--dur) var(--ease); }
.footer-col a:hover { color: var(--text); }

.footer-bottom {
  border-top: 1px solid var(--border-soft);
  padding: 1.6rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-legal-text { display: flex; flex-direction: column; gap: .6rem; }
.footer-disclaimer { font-size: var(--fs-2); color: var(--text-faint); max-width: 100%; }

.footer-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: var(--fs-3);
  color: var(--text-faint);
}

.license-badge, .age-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: .3rem .7rem;
  font-weight: 700;
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }

  .nav-side ul { display: none; }

  .main-nav {
    display: block;
    position: fixed;
    inset: 72px 0 0 0;
    background: var(--nav-panel-bg);
    padding: 1.5rem clamp(1.25rem, 6vw, 2rem) 2rem;
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); }

  body.nav-open { overflow: hidden; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav li { border-bottom: 1px solid var(--border-soft); }
  .main-nav ul a { display: flex; padding: 1rem 0; font-size: var(--fs-5); }

  .nav-actions { display: flex; flex-direction: column; gap: .8rem; margin-top: 1.5rem; }
  .nav-actions .btn { width: 100%; }

  .header-actions .btn { display: none; }
}

.legal-hero {
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 2rem);
  border-bottom: 1px solid var(--border-soft);
}
.legal-hero .eyebrow {
  color: var(--gold-2);
  font-weight: 700;
  font-size: var(--fs-2);
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: .6rem;
}
.legal-hero h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
.legal-hero p { margin-top: .8rem; max-width: 720px; font-size: var(--fs-4); }

.legal-content {
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(3.5rem, 6vw, 5rem);
  max-width: 780px;
}

.legal-content h2 {
  font-size: var(--fs-6);
  margin-top: 2.25rem;
  margin-bottom: .75rem;
}
.legal-content h2:first-child { margin-top: 0; }

.legal-content h3 {
  font-size: var(--fs-5);
  margin-top: 1.5rem;
  margin-bottom: .5rem;
  color: var(--text);
}

.legal-content p { margin-bottom: 1rem; font-size: var(--fs-4); }

.legal-content ul, .legal-content ol {
  margin: 0 0 1rem;
  padding-left: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }
.legal-content li { font-size: var(--fs-4); color: var(--text-muted); }

.legal-content strong { color: var(--text); }

.legal-content a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover { color: var(--gold-2); }

.legal-table-wrap { overflow-x: auto; margin-bottom: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-md); }
.legal-table { width: 100%; border-collapse: collapse; font-size: var(--fs-4); }
.legal-table th, .legal-table td { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
.legal-table th { background: var(--surface-2); color: var(--text-faint); font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .05em; }
.legal-table tr:last-child td { border-bottom: none; }

.legal-note {
  margin-top: 2rem;
  padding: 1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--fs-3);
  color: var(--text-faint);
}

.legal-updated { font-size: var(--fs-3); color: var(--text-faint); margin-top: .5rem; }

.brand-logo { height: 46px; width: auto; }
.footer-brand .brand-logo { height: 40px; }
.cta-band-logo { height: 44px; width: auto; }

/* ---- where each face lands -------------------------------------------
   Luckiest Guy keeps the headings, the wordmark and the buttons; the
   small chrome runs on condensed bold, which stays legible at 12-15px. */
.license-badge,
.age-badge {
  font-family: var(--font-ui);
}

/* the buttons carry the display face, as they do in the lobby. One
   weight ships, so 700 would only be synthesised into a smear. */
.btn {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .03em;
}
.nav-side ul a,
.main-nav ul a,
.nav-actions a { font-weight: 400; }

.brand { font-family: var(--font-display); font-weight: 400; }

h1, h2, h3, h4 { font-weight: var(--display-weight); line-height: 1.3; }

/* Bizzo sets dark text on the green plate, so neither the four-way rim
   nor the header pill's drop shadow is needed — both only doubled the
   glyphs. */


/* ======================================================================
   BIZZO BRAND OVERLAY  (shared chrome: header, buttons, footer)
   Restates, in Bizzo's own recipe, the plate-based buttons and the
   display face the template had drawn for a different lobby. Last in the
   sheet, so it wins on source order.
   ====================================================================== */

.btn {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  padding: .85rem 1.9rem;
  font-size: var(--fs-4);
  line-height: 1.2;
  box-shadow: none;
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease),
              background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn:hover { transform: none; }
.btn:active { transform: translateY(var(--btn-active-transform)); }
.brand { font-family: var(--font-ui); font-weight: 700; }
.nav-side ul a,
.main-nav ul a,
.nav-actions a { font-weight: 500; text-transform: none; letter-spacing: 0; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.01em; text-transform: none; line-height: 1.25; }

.btn-primary {
  position: relative;
  z-index: 0;
  border: 0;
  border-image: none;
  background: none;
  box-shadow: none;
  padding: .85rem 1.9rem;
  color: var(--on-accent);
  -webkit-text-fill-color: var(--on-accent);
  text-shadow: none;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: var(--radius-btn);
  background: var(--grad-mint);
  transition: background var(--dur) var(--ease);
}
.btn-primary:hover { filter: none; background: none; }
.btn-primary:hover::before { background: var(--grad-mint-hover); }

.btn-ghost,
.header-actions .btn-ghost {
  border: 1px solid var(--gold);
  border-image: none;
  border-radius: var(--radius-btn);
  background: none;
  color: var(--gold);
  -webkit-text-fill-color: var(--gold);
  text-shadow: none;
  box-shadow: none;
  padding: .85rem 1.9rem;
}
.btn-ghost:hover,
.header-actions .btn-ghost:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-accent);
  -webkit-text-fill-color: var(--on-accent);
}
.btn-sm { padding: .5rem 1.1rem; font-size: var(--fs-3); }
.btn-primary.btn-sm { padding: .5rem 1.1rem; }
.header-actions .btn {
  border-width: 1px;
  border-radius: var(--radius-btn);
  padding: .55rem 1.15rem;
  font-size: var(--fs-3);
  letter-spacing: 0;
}
.header-actions .btn-primary { padding: .55rem 1.15rem; }

.site-header { box-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
.nav-toggle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
}
.nav-toggle:hover .nav-toggle-bar { background: var(--gold); }
.nav-toggle::before { right: 9px; bottom: 9px; }
.nav-toggle::after { right: 6px; bottom: 7px; }
.nav-toggle-bar:nth-child(1) { width: 22px; top: 15px; left: 11px; }
.nav-toggle-bar:nth-child(2) { width: 17px; top: 21px; left: 11px; }
.nav-toggle-bar:nth-child(3) { width: 11px; top: 27px; left: 11px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1),
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { top: 21px; width: 22px; }
.nav-icon [fill="currentColor"] { fill: var(--gold); }
.nav-icon [stroke="currentColor"] { stroke: var(--gold); }

/* the live site's text pages: gold heads and links, #ba9cb4 body */
.legal-content h2, .legal-content h3 { color: var(--gold); }
.legal-content p, .legal-content li { color: var(--text-faint); }
.legal-table th { background: rgb(var(--stb-neutral-950)); color: var(--gold); }
.legal-table td { color: var(--text-faint); }
.legal-table-wrap, .legal-note { border-radius: var(--radius-md); }

.site-footer { border-top: 1px solid var(--border-soft); }
.footer-col h3 { color: var(--gold); text-transform: uppercase; letter-spacing: .06em; }
.footer-col ul a { color: var(--text-faint); }
.footer-col ul a:hover { color: var(--gold); }
.age-badge {
  background: rgb(var(--stb-red-500));
  color: #fff;
  border: 0;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--fs-3);
}
.license-badge { color: var(--text-faint); }
.license-badge svg { color: var(--gold); }
.footer-bottom { position: relative; }
.footer-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--gold) 50%, transparent);
}

.brand-logo { height: 48px; width: auto; }
.footer-brand .brand-logo { height: 44px; }

@media (max-width: 860px) {
  .header-actions .btn {
    display: inline-flex;
    flex: 1 1 0;
    border-width: 1px;
    padding: .5rem .8rem;
    font-size: var(--fs-3);
  }
  .header-actions .btn-primary { padding: .5rem .8rem; }
  .brand-logo { height: 52px; }
}

/* ---- corrections after review against the live lobby ------------------ */
.providers-carousel-title {
  font-style: normal;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--gold);
}

/* ======================================================================
   MOBILE BOTTOM NAV  (same bar the home page carries)
   ====================================================================== */

.bottom-nav { display: none; }

@media (max-width: 860px) {
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }

  .bottom-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    height: 60px;
    padding: 0 .35rem env(safe-area-inset-bottom);
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .35);
  }

  .bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    padding: 0 .1rem;
    color: var(--text-faint);
    font-family: var(--font-ui);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.1;
    text-align: center;
    transition: color var(--dur) var(--ease);
  }
  .bottom-nav-item > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bottom-nav-item .nav-icon { width: 25px; height: 25px; }
  .bottom-nav .nav-icon [fill="currentColor"] { fill: currentColor; }
  .bottom-nav .nav-icon [stroke="currentColor"] { stroke: currentColor; }
  .bottom-nav-item:hover,
  .bottom-nav-item:active { color: var(--gold); }

  .bottom-nav-play { color: var(--gold); }
  .bottom-nav-plate {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-top: -17px;
    border-radius: var(--radius-md);
    background: var(--grad-mint);
    color: var(--on-accent);
    border: 2px solid var(--surface-2);
    animation: bottom-nav-play-pulse 2s ease-in-out infinite;
  }
  .bottom-nav-plate .nav-icon { width: 24px; height: 24px; }
  .bottom-nav-play:hover .bottom-nav-plate,
  .bottom-nav-play:active .bottom-nav-plate { animation-play-state: paused; }

  @keyframes bottom-nav-play-pulse {
    0%, 100% {
      transform: scale(1);
      filter: drop-shadow(0 0 0 rgba(130, 255, 120, 0));
    }
    50% {
      transform: scale(1.07);
      filter: drop-shadow(0 0 10px rgba(130, 255, 120, .55));
    }
  }

  .main-nav { padding-bottom: calc(60px + 2rem + env(safe-area-inset-bottom)); }
}

/* ---- phone header: lens left, mark centred, both pills on their own row
   The home page restructures the header at this breakpoint; the text
   pages shipped without that block, so once the Bizzo overlay brought
   the two pills back into the header they had nowhere to sit and ran
   under the wordmark. This is the same layout styles.css uses, so the
   header reads identically on every page. */
@media (max-width: 860px) {
  .header-inner {
    flex-wrap: wrap;
    height: auto;
    gap: .75rem;
    row-gap: .65rem;
    padding-block: .6rem;
  }
  .nav-side-left { display: none; }
  .brand { margin-inline: auto; }
  .nav-toggle { position: absolute; top: 12px; left: .75rem; }
  .nav-side-right { width: 100%; margin-left: 0; }
  .header-actions { width: 100%; gap: .5rem; }
  .header-actions .btn { display: inline-flex; flex: 1 1 0; }
  /* log in / register live in the header, so the panel holds links only */
  .nav-actions { display: none; }
  .main-nav { inset: var(--nav-top, 110px) 0 0 0; }
  /* the open state here carried a translateX from the old centred bars;
     the Bizzo overlay left-aligns them, so the shift has to come off or
     the cross sits off-centre in its disc */
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: rotate(-45deg); }
}

/* ---- menu button: stacked bars with a search lens ---------------------
   styles.css carries this; the text pages did not, so the toggle showed
   centred white bars and no lens. Restated here so the control is the
   same object on every page. */
.nav-toggle-bar {
  left: 11px;
  width: 22px;
  height: 3px;
  border-radius: 99px;
  background: var(--gold);
  transform: none;
}
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  position: absolute;
  transition: opacity var(--dur) var(--ease);
}
.nav-toggle::before {
  right: 9px;
  bottom: 9px;
  width: 13px;
  height: 13px;
  border: 2.5px solid var(--gold);
  border-radius: 50%;
}
.nav-toggle::after {
  right: 6px;
  bottom: 7px;
  width: 2.5px;
  height: 7px;
  border-radius: 99px;
  background: var(--gold);
  transform: rotate(-45deg);
}
.nav-toggle[aria-expanded="true"]::before,
.nav-toggle[aria-expanded="true"]::after { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1),
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { top: 21px; width: 22px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: rotate(-45deg); }

/* ---- the bar arrives on the first scroll (see styles.css) ------------- */
@media (max-width: 860px) {
  .bottom-nav {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition:
      transform .3s var(--ease),
      opacity .3s var(--ease);
    will-change: transform;
  }
  .bottom-nav.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* ---- anchor targets clear the sticky header (see styles.css) ---------- */
:root { --scroll-offset: 88px; }

#main,
main section[id] {
  scroll-margin-top: var(--scroll-offset);
}

/* ---- phone header pills ----------------------------------------------
   At the top of the page both pills are gold rails, so the header reads
   as one quiet row sitting over the banner artwork — where the hero
   already carries the green call to action a few lines below. The
   register pill lights up green only once the header pins, where it has
   a flat plum band behind it and becomes the page's standing CTA.

   Only colour changes across that line, never a metric: the border keeps
   its 1px and the padding is untouched, so the pill cannot resize on
   scroll the way it used to.                                          */
@media (max-width: 860px) {
  .header-actions .btn-primary {
    border: 1px solid var(--gold);
    color: var(--gold);
    -webkit-text-fill-color: var(--gold);
    /* No transition on this swap, deliberately. -webkit-text-fill-color
       is not an animatable property, so it snapped to the dark label the
       instant the header pinned while the plate and the border were
       still fading in behind it — for a quarter of a second the pill was
       dark text on a dark ground, and scrolling back and forth across
       the threshold made the label look like it was smearing. The state
       now changes in one frame. */
    transition: none;
  }
  .header-actions .btn-primary::before {
    opacity: 0;
    transition: none;
  }
  .site-header.is-stuck .header-actions .btn-primary {
    border-color: transparent;
    color: var(--on-accent);
    -webkit-text-fill-color: var(--on-accent);
  }
  .site-header.is-stuck .header-actions .btn-primary::before { opacity: 1; }
}

/* ---- app download ----------------------------------------------------
   One of the lobby's round header controls: a 45px plum disc that turns
   gold on hover. On the phone it is pulled out of the action row and
   pinned to the right edge, mirroring the menu button on the left so the
   wordmark sits centred between two identical discs. */
.app-dl {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--gold);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.app-dl:hover { background: var(--gold); color: var(--on-accent); }
/* a glyph of a phone read as anything but an app, so the control says the
   word instead — "APP" carries in Romanian and needs no legend */
.app-dl-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.app-dl-mark {
  font-family: var(--font-ui);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
}

@media (max-width: 860px) {
  .app-dl {
    position: absolute;
    top: 12px;
    right: .75rem;
    width: 45px;
    height: 45px;
  }
  .app-dl-icon { width: 16px; height: 16px; }
  .app-dl-mark { font-size: .62rem; }
}

/* The register pill's label is dark plum on green once the header pins.
   At 13.6px, 600 weight and Romanian diacritics that combination clots —
   the strokes thicken into each other and the whole pill reads as a dark
   smear. Dropping a weight and opening the tracking a hair separates the
   letters again; the colour stays, since it clears 6.6:1 on the plate. */
@media (max-width: 860px) {
  .header-actions .btn-primary {
    font-weight: 500;
    letter-spacing: .015em;
  }
}

/* see styles.css: no composited layers in the sticky header, or the pill
   labels resample and go soft on scroll */
.site-header,
.site-header::before,
.header-actions .btn,
.header-actions .btn::before {
  will-change: auto;
  backdrop-filter: none;
}
.header-actions .btn { transform: none; }
.header-actions .btn:active { transform: translateY(var(--btn-active-transform)); }