/* ===========================================================================
   Lemon Casino PL - lemonkasyno-pl.net
   Palette, type and decor read off the live Lemon Casino lobby
   (teal-green canvas + #ffd36c lemon gold + orange-to-red flame accent).
   =========================================================================== */

@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/lato-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: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/lato-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: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/lato-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: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/lato-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: "Lato"; font-style: normal; font-weight: 900; font-display: swap;
  src: url('/assets/fonts/lato-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: "Lato"; font-style: normal; font-weight: 900; font-display: swap;
  src: url('/assets/fonts/lato-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;

  /* ---- Lemon's own ramp --------------------------------------------------
     The neutral is a teal-green scale struck off the lobby's own surfaces.
     Its steps are the colours the live site actually ships - canvas #21312f,
     footer and boxes #1b2827, header band #1b3836, cards #1b4b48, panels
     #2a5653, borders #2f615d, dividers #3c7b77, the bright rule #439d97 -
     so a component asking for "surface" lands on a real Lemon colour rather
     than an interpolated one.                                             */
  --stb-neutral-950: 21 30 30;    /* #151e1e  deepest: plates, table heads  */
  --stb-neutral-900: 33 49 47;    /* #21312f  body canvas (--global-bg)     */
  --stb-neutral-850: 27 56 54;    /* #1b3836  header band (--header-bg)     */
  --stb-neutral-800: 35 71 69;    /* #234745  inputs, dropdowns             */
  --stb-neutral-750: 27 75 72;    /* #1b4b48  nav, list items, card bodies  */
  --stb-neutral-700: 42 86 83;    /* #2a5653  raised panels (--main-bg)     */
  --stb-neutral-600: 47 97 93;    /* #2f615d  borders (--head-bg)           */
  --stb-neutral-550: 60 123 119;  /* #3c7b77  dividers, label plates        */
  --stb-neutral-500: 67 157 151;  /* #439d97  bright rule (--batch-color)   */
  --stb-neutral-400: 95 184 177;
  --stb-neutral-350: 142 207 201;
  --stb-neutral-300: 179 201 198; /* body copy: 7.9:1 on the canvas         */
  --stb-neutral-200: 218 218 218; /* #dadada  the lobby's own light grey    */
  --stb-neutral-150: 238 244 243;
  --stb-neutral-100: 255 255 255;
  --stb-neutral-50: 255 255 255;
  --stb-white: 255 255 255;
  --stb-black: 13 31 31;          /* #0d1f1f  (--dark-text)                 */

  /* the lemon gold: #ffd36c is the active colour that marks every heading,
     price, border and button; #ffe5aa the hover and anchor tint; #e6bc64
     the VIP bevel. Text on gold is the box teal #1b2827. */
  --stb-gold-100: 255 240 204;
  --stb-gold-200: 255 218 133;    /* #ffda85  link text                     */
  --stb-gold-300: 255 211 108;    /* #ffd36c  mainActiveColor               */
  --stb-gold-500: 245 197 83;     /* #f5c553  accent under it               */
  --stb-gold-600: 230 188 100;    /* #e6bc64  VIP bevel                     */
  --stb-gold-700: 27 40 39;       /* #1b2827  label on gold (--btn-text)    */

  /* "brand" is the gold plate every Lemon call to action is painted on:
     a short vertical #ffe5aa -> #ffd36c, brightening on hover. */
  --stb-brand-500: 255 229 170;   /* #ffe5aa */
  --stb-brand-600: 255 211 108;   /* #ffd36c */
  --stb-brand-700: 245 197 83;    /* #f5c553  pressed */
  --stb-brand-200: 255 240 204;
  --stb-brand-150: 255 247 230;

  /* the flame: Lemon's orange-to-red accent, used on featured borders,
     hot badges and tier marks (--gradient on the live site) */
  --stb-flame-400: 255 181 113;
  --stb-flame-500: 255 159 71;    /* #ff9f47 */
  --stb-flame-600: 224 16 29;     /* #e0101d */

  /* the nav glyphs take the active gold, the way the lobby filters its own
     menu icons to it */
  --stb-blue-500: 255 211 108;
  --stb-blue-600: 255 211 108;
  --stb-blue-700: 230 188 100;

  --stb-red-500: 241 47 48;       /* #f12f30  live / 18+ (--text-red)  */
  --stb-green-500: 53 182 104;    /* #35b668  success (--verified-bg)  */

  /* ---- surfaces -------------------------------------------------------- */
  --bg: rgb(var(--stb-neutral-900));
  /* the teal the hero artwork carries at its top and side edges, so the
     banner can extend past the picture without a seam */
  --hero-blue: #21312f;
  /* 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 teal 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-750));
  --surface-2: rgb(var(--stb-neutral-700));
  --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 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 lemon 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 lifts 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-200)), 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));

  /* Lemon's flame accent and the card wrappers it edges */
  --grad-flame: linear-gradient(180deg, rgb(var(--stb-flame-500)), rgb(var(--stb-flame-600)));
  --grad-flame-soft: linear-gradient(180deg, rgb(var(--stb-flame-400)), rgb(var(--stb-flame-500)));
  /* the provider/game card plate the live lobby paints every tile on */
  --card-plate: linear-gradient(181deg, #1f5653 1%, #1b4b48 25%, #1b4b48 75%, #1f5653 99%);
  --card-plate-raised: linear-gradient(180deg, rgb(var(--stb-neutral-750)) 0%, rgb(var(--stb-neutral-550)) 100%);
  /* the teal plate the lobby slides under its section labels and eyebrows */
  --label-plate: rgb(var(--stb-neutral-550));
  --label-plate-soft: rgb(var(--stb-neutral-550) / .35);
  --vip-gold-gradient: linear-gradient(270deg, #e6bc64 -5.72%, #e1d696 22.44%, #faf8ca 49%, #f6da93 77.69%, #f5c553 100%);

  --glow-a: rgba(67, 157, 151, .10);
  --glow-b: rgba(255, 211, 108, .055);
  /* the header keeps a teal 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(33 49 47 / .94);

  --win: rgb(var(--stb-gold-300));
  --win-glow: rgba(255, 211, 108, .4);
  --tint-accent: rgba(255, 211, 108, .12);
  --accent-glow: rgba(255, 211, 108, .32);
  --cta-glow: rgba(255, 211, 108, .26);
  --subtle-fill: rgba(238, 244, 243, .05);
  --subtle-fill-2: rgba(238, 244, 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 generously - pills on every control,
     12px on tiles and 16px on the panels that hold them ------------------ */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-btn: 9999px;
  --radius-pill: 9999px;
  --radius-thumb: 12px;

  /* ---- shadows: Lemon drops a deep soft plate under its cards and a
     short hard lip under its sticky bars -------------------------------- */
  --shadow-card: 0 8px 16px rgba(0, 0, 0, .55);
  --shadow-lip: 0 4px 4px rgba(0, 0, 0, .25);
  --shadow-cta: 0 8px 20px -6px rgba(255, 211, 108, .45);

  /* ---- type: Lato throughout, the way the lobby sets it ----------------
     Lemon runs one family at three weights: 900 carries the display lines
     and the buttons, 700 the nav, badges and table heads, 400 the body.
     Buttons and eyebrows are the only things set in caps.               */
  --font-display: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-weight: 900;
  --display-track: -.01em;
  --display-case: none;
  --btn-weight: 900;
  --btn-track: .02em;
  --btn-case: uppercase;
  --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: 700;
  --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; }

/* Lemon 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. */


/* ======================================================================
   LEMON BRAND OVERLAY  (shared chrome: header, buttons, footer)
   Restates, in Lemon'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 Lemon 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 Lemon 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)); }

/* ===========================================================================
   LEMON DECOR LAYER (legal pages)
   =========================================================================== */
.btn-ghost:hover,
.header-actions .btn-ghost:hover,
.btn-outline:hover,
.show-more-btn:hover {
  background: rgb(var(--stb-gold-300) / .2);
  border-color: rgb(var(--stb-gold-200));
  color: rgb(var(--stb-gold-200));
  -webkit-text-fill-color: rgb(var(--stb-gold-200));
}
.btn-primary::before { box-shadow: var(--shadow-cta); }
.btn-primary:active::before { box-shadow: none; }

.site-header {
  border-bottom: 1px solid rgb(var(--stb-neutral-550) / .55);
  box-shadow: var(--shadow-lip);
}
.site-header::before { background: rgb(var(--stb-neutral-850)); }
.main-nav { background: rgb(var(--stb-neutral-850)); }
.bottom-nav { background: rgb(var(--stb-neutral-850)); border-top: 1px solid rgb(var(--stb-neutral-600)); }

.eyebrow {
  display: inline-block;
  padding: .32rem .8rem;
  border-radius: var(--radius-pill);
  background: var(--label-plate-soft);
  border: 1px solid rgb(var(--stb-neutral-550));
  color: rgb(var(--stb-gold-300));
}

/* the legal copy sits on the same teal plate the lobby gives its cards */
.legal-content {
  background: var(--card-plate);
  border: 1px solid rgb(var(--stb-neutral-600));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.25rem, 3vw, 2.5rem);
}
.legal-content h2 {
  color: rgb(var(--stb-gold-300));
  font-weight: 900;
}
.legal-content h3 { color: rgb(var(--stb-neutral-50)); font-weight: 700; }
.legal-content a { color: rgb(var(--stb-gold-200)); }
.legal-content a:hover { color: rgb(var(--stb-gold-100)); }

.summary-table thead th,
.limits-table thead th {
  background: rgb(var(--stb-neutral-600));
  color: rgb(var(--stb-neutral-50));
  font-weight: 900;
}
.summary-table tr:nth-child(even),
.limits-table tbody tr:nth-child(even) { background: rgb(var(--stb-neutral-950) / .55); }

.site-footer { background: rgb(var(--stb-neutral-850)); }
.site-footer .footer-bottom { border-top: 1px solid rgb(var(--stb-neutral-600)); }
.license-badge {
  background: rgb(var(--stb-neutral-950) / .6);
  border: 1px solid rgb(var(--stb-neutral-600));
  border-radius: var(--radius-pill);
  padding: .35rem .8rem;
}
.age-badge { background: rgb(var(--stb-red-500)); color: #fff; border-radius: var(--radius-pill); }

/* ===========================================================================
   LEMON DECOR LAYER — REVISIONS (legal pages: shared chrome)
   =========================================================================== */
.brand-logo { height: 38px; width: auto; }
.footer-brand .brand-logo { height: 36px; }
@media (min-width: 861px) and (max-width: 1100px) {
  .brand-logo { height: 32px; }
}
@media (max-width: 860px) {
  .brand-logo { height: 42px; }
  .footer-brand .brand-logo { height: 34px; }
}

.updated-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  text-align: center;
  color: var(--text-faint);
  font-size: var(--fs-3);
}
.updated-icon { flex-shrink: 0; color: rgb(var(--stb-gold-300)); }
.updated-date {
  color: rgb(var(--stb-gold-300));
  font-weight: 900;
  white-space: nowrap;
}

/* --- menu button: bars only, no search lens -----------------------------
   The template drew a magnifying glass in the button's bottom-right corner
   out of ::before (the ring) and ::after (the handle), which left the bars
   crowded into the top-left. The lens is gone and the three bars take the
   middle of the button, even width, evenly spaced. */
.nav-toggle::before,
.nav-toggle::after { content: none; }
.nav-toggle-bar,
.nav-toggle-bar:nth-child(1),
.nav-toggle-bar:nth-child(2),
.nav-toggle-bar:nth-child(3) {
  left: 50%;
  width: 19px;
  transform: translateX(-50%);
}
.nav-toggle-bar:nth-child(1) { top: 13px; }
.nav-toggle-bar:nth-child(2) { top: 18.5px; }
.nav-toggle-bar:nth-child(3) { top: 24px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1),
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
  top: 18.5px;
  width: 19px;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { 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) { transform: translateX(-50%) rotate(-45deg); }