/* Malina Casino — theme for the monobrand template (pl-PL)
   Palette, type and component recipes read off the live Malina lobby:
   body #200922, header #2d0d30, panel #361039, card #3f1b44,
   the call to action a flat green plate #55b400 with a white label,
   the jackpot label a #fcf315 -> #fb9c0c yellow, the decor a berry
   magenta #770051 / #4d0035, everything set in Open Sans. */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/open-sans-var-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: "Open Sans";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/assets/fonts/open-sans-var-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;

  /* ---- Malina's own ramp ------------------------------------------------
     The neutral is the lobby's plum scale, lifted straight off its design
     tokens. The darkest steps are surfaces the live site actually ships —
     body #200922 (bg-primary), header #2d0d30, panel #361039 (bg-secondary,
     and the browser theme colour), card #3f1b44 (bg-tertiary) — so a
     component that asks for "surface" lands on a real Malina colour rather
     than an interpolated one. Above that the steps climb through the
     lobby's muted mauves to its two copy tones, #a392ac and #efefef.    */
  --stb-neutral-950: 25 3 27;     /* #19031b  deepest: table heads, plates */
  --stb-neutral-900: 32 9 34;     /* #200922  body        (bg-primary)     */
  --stb-neutral-850: 45 13 48;    /* #2d0d30  header band                  */
  --stb-neutral-800: 54 16 57;    /* #361039  panels, inputs (bg-secondary)*/
  --stb-neutral-750: 63 27 68;    /* #3f1b44  nav elements  (bg-tertiary)  */
  --stb-neutral-700: 69 40 74;    /* #45284a  game-card info strip         */
  --stb-neutral-600: 83 46 88;    /* #532e58  borders                      */
  --stb-neutral-550: 100 52 106;  /* #64346a  secondary stroke             */
  --stb-neutral-500: 110 67 124;  /* #6e437c                               */
  --stb-neutral-400: 136 123 143; /* #887b8f  secondary copy               */
  --stb-neutral-350: 155 136 166; /* #9b88a6                               */
  --stb-neutral-300: 163 146 172; /* #a392ac  fine print  (6.4:1 on body)  */
  --stb-neutral-200: 193 180 201; /* #c1b4c9  body copy                    */
  --stb-neutral-150: 203 188 213; /* #cbbcd5                               */
  --stb-neutral-100: 239 239 239; /* #efefef  bright copy  (text-primary)  */
  --stb-neutral-50: 255 255 255;  /* #ffffff                               */
  --stb-white: 255 255 255;
  --stb-black: 25 3 27;

  /* the lobby's yellow: #ffee5a is the jackpot label and the colour that
     marks every heading accent, amount and link; #fcf315 -> #fb9c0c is its
     own gradient-yellow; text on yellow is the panel plum #361039. */
  --stb-gold-100: 244 230 181;    /* #f4e6b5 */
  --stb-gold-200: 252 243 21;     /* #fcf315  gradient head */
  --stb-gold-300: 255 238 90;     /* #ffee5a  label-jackpot / active */
  --stb-gold-500: 255 184 0;      /* #ffb800  warning accent */
  --stb-gold-600: 251 156 12;     /* #fb9c0c  gradient foot  */
  --stb-gold-700: 54 16 57;       /* #361039  label on yellow */

  /* "brand" is the green plate every Malina call to action is painted on.
     It sits flat — #55b400 at rest, #62d000 on hover, #428d00 pressed —
     and always carries a white label, never a dark one. */
  --stb-brand-500: 98 208 0;      /* #62d000  hover   */
  --stb-brand-600: 85 180 0;      /* #55b400  at rest */
  --stb-brand-700: 66 141 0;      /* #428d00  pressed */
  --stb-brand-200: 168 230 110;
  --stb-brand-150: 205 243 175;

  /* the berry magenta the lobby paints its promo covers, sidebar tiles and
     label underlays with — the raspberry out of the wordmark itself */
  --stb-berry-900: 52 0 36;       /* #340024 */
  --stb-berry-800: 67 0 46;       /* #43002e */
  --stb-berry-700: 77 0 53;       /* #4d0035 */
  --stb-berry-600: 97 0 67;       /* #610043 */
  --stb-berry-500: 119 0 81;      /* #770051 */
  --stb-berry-400: 142 46 111;    /* #8e2e6f  label-exclusive */
  --stb-berry-300: 235 107 151;   /* #eb6b97 */

  /* the nav glyphs take the active yellow, the way the lobby filters its
     own menu icons to it */
  --stb-blue-500: 255 238 90;
  --stb-blue-600: 255 184 0;
  --stb-blue-700: 251 156 12;

  --stb-red-500: 251 80 79;       /* #fb504f  live / 18+ */
  --stb-green-500: 11 174 86;     /* #0bae56  success / "nowe" */

  /* ---- 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: #200922;
  /* 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-800));
  --surface-2: rgb(var(--stb-neutral-750));
  --border: rgb(var(--stb-neutral-600));
  --border-soft: rgb(var(--stb-neutral-750));

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

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

  /* Malina's own gradient-yellow, verbatim */
  --grad-gold: linear-gradient(180deg, rgb(var(--stb-gold-200)) 0%, rgb(var(--stb-gold-600)) 100%);
  /* the lobby's call to action: a flat green plate, lighter on hover */
  --grad-mint: rgb(var(--stb-brand-600));
  --grad-mint-hover: rgb(var(--stb-brand-500));
  --grad-teal: linear-gradient(180deg, rgb(var(--stb-neutral-750)) 0%, rgb(var(--stb-neutral-800)) 100%);
  /* the berry plate the lobby lays under its promo covers and labels */
  --grad-berry: linear-gradient(180deg, rgb(var(--stb-berry-700)) 0%, rgb(var(--stb-berry-900)) 100%);
  --berry: rgb(var(--stb-berry-500));
  --berry-deep: rgb(var(--stb-berry-700));
  --on-accent: rgb(var(--stb-gold-700));
  --on-cta: rgb(var(--stb-white));

  --glow-a: rgba(119, 0, 81, .2);
  --glow-b: rgba(142, 46, 111, .14);
  /* 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(32 9 34 / .96);

  --win: rgb(var(--stb-gold-300));
  --win-glow: rgba(255, 238, 90, .4);
  --tint-accent: rgba(255, 238, 90, .12);
  --accent-glow: rgba(255, 238, 90, .32);
  --cta-glow: rgba(85, 180, 0, .3);
  --subtle-fill: rgba(255, 255, 255, .05);
  --subtle-fill-2: rgba(255, 255, 255, .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: Malina barely rounds at all. Its thumbnails and shop cards
     are 2px, its cookie actions 4px, its tournament cards square. Keeping
     those numbers is most of what makes the lobby read as Malina rather
     than as a generic dark casino skin.                                */
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 4px;
  --radius-btn: 2px;
  --radius-pill: 9999px;
  --radius-thumb: 2px;

  /* ---- type: Open Sans throughout, the way the lobby sets it -----------
     Malina runs one variable family, 400-800. 800 and 700 carry the
     display lines, 700 the buttons — which are set in caps, the lobby's
     one piece of shouting — 600 the nav, 400 the body.                 */
  --font-display: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-weight: 800;
  --display-track: -.005em;
  --display-case: none;
  --btn-weight: 700;
  --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-white));
  --nav-weight: 600;
  --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 24px 0 rgba(25, 3, 27, .9);
}
: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; }

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


/* ======================================================================
   MALINA BRAND OVERLAY  (shared chrome: header, buttons, footer)
   Restates, in Malina'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);
  /* was a hardcoded 600, which quietly outranked --btn-weight and made
     the token dead. The weight belongs to the token so one line moves
     every button face at once. */
  font-weight: var(--btn-weight);
  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 Malina 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 Malina 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 Polish 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 white on green once the header pins.
   At 13.6px, 600 weight and Polish 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)); }
/* ======================================================================
   MALINA — the lobby's own furniture
   The ramp above already carries Malina's surfaces, its yellow and its
   2px radii everywhere the template asks for a token. What is left are
   the places the old skin made a structural choice that Malina does not
   share: a gold call to action where Malina paints a flat green one, a
   gold rail on the secondary where Malina sinks a plum well, and the
   berry magenta the lobby lays under its promo covers and labels.
   ====================================================================== */

/* ---- the call to action ----------------------------------------------
   Malina's `.button--primary` is a flat #55b400 plate with a 1px stroke
   of its own colour, a WHITE label in caps, and 2px corners. It lightens
   to #62d000 on hover and sinks to #428d00 when pressed — no gradient,
   no bevel, no drop step. */
.btn-primary,
.btn-primary:hover,
.btn-primary:active {
  color: var(--on-cta);
  -webkit-text-fill-color: var(--on-cta);
  text-shadow: none;
  border: 0;
  box-shadow: none;
}
.btn-primary::before { background: rgb(var(--stb-brand-600)); }
.btn-primary:hover::before { background: rgb(var(--stb-brand-500)); }
.btn-primary:active::before { background: rgb(var(--stb-brand-700)); }

/* ---- the secondary ----------------------------------------------------
   `.button--secondary`: a plum well #502c56 inside a 1px #64346a stroke,
   label in the lobby's bright neutral. It lifts a step on hover rather
   than flipping to a fill. */
.btn-ghost,
.header-actions .btn-ghost {
  border: 1px solid rgb(var(--stb-neutral-550));
  background: rgb(80 44 86);
  color: rgb(var(--stb-neutral-100));
  -webkit-text-fill-color: rgb(var(--stb-neutral-100));
  text-shadow: none;
  box-shadow: none;
}
.btn-ghost:hover,
.header-actions .btn-ghost:hover {
  background: rgb(86 35 92);
  border-color: rgb(var(--stb-neutral-500));
  color: var(--on-cta);
  -webkit-text-fill-color: var(--on-cta);
}
.btn-ghost:active,
.header-actions .btn-ghost:active {
  background: rgb(62 19 67);
  border-color: rgb(83 46 88);
  color: var(--on-cta);
  -webkit-text-fill-color: var(--on-cta);
}

/* the outline face and "pokaż więcej" take the same well, so the lobby
   never shows two different secondary shapes on one screen */
.btn-outline,
.show-more-btn {
  border: 1px solid rgb(var(--stb-neutral-550));
  background: rgb(80 44 86);
  color: rgb(var(--stb-neutral-100));
}
.btn-outline:hover,
.show-more-btn:hover {
  background: rgb(86 35 92);
  border-color: rgb(var(--stb-neutral-500));
  color: var(--on-cta);
}

/* ---- display type -----------------------------------------------------
   The old face carried a warm brown bevel under the hero figure, drawn
   for a gold wordmark. Malina's drop is its own near-black plum. */
.grad-text { text-shadow: 0 2px 14px rgba(25, 3, 27, .7); }
.hero .hero-headline,
.hero .hero-headline .hero-subtext,
.hero-lead { text-shadow: 0 2px 12px rgba(25, 3, 27, .72); }
.hero .hero-headline .grad-text,
.cta-band h2 .grad-text {
  text-shadow: 0 2px 14px rgba(25, 3, 27, .78), 0 2px 0 rgba(25, 3, 27, .55);
}

/* ---- labels on tiles --------------------------------------------------
   Malina plates its thumbnail labels, square, 2px: the jackpot label is
   #ffee5a with the panel plum on it, "nowe" is #0bae56 with white, and
   the exclusive label is the berry #8e2e6f with white. */
.pg-badge,
.jp-tier {
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: .03em;
}
.pg-badge-hot { background: rgb(var(--stb-gold-300)); color: var(--on-accent); }
.pg-badge-new { background: rgb(var(--stb-green-500)); color: var(--on-cta); }
.pg-badge-excl { background: rgb(var(--stb-berry-400)); color: var(--on-cta); }
.jp-tier-mega { background: rgb(var(--stb-gold-300)); color: var(--on-accent); }
.jp-tier-major { background: rgb(var(--stb-berry-400)); color: var(--on-cta); }
.jp-tier-minor { background: rgb(var(--stb-green-500)); color: var(--on-cta); }

/* ---- promo covers -----------------------------------------------------
   The lobby's promo cards are not plum panels: they are berry plates,
   #340024 rising to #4d0035 on hover, which is what carries the
   raspberry through the page. The bonus name keeps the yellow hairline
   it already had, which now reads against the berry rather than beside
   another plum. */
.promo-card {
  background: var(--grad-berry);
  border: 1px solid rgb(var(--stb-berry-600));
}
.promo-card:hover {
  background: linear-gradient(180deg, rgb(var(--stb-berry-600)) 0%, rgb(var(--stb-berry-800)) 100%);
  border-color: rgb(var(--stb-berry-500));
  box-shadow: 0 8px 24px rgba(25, 3, 27, .5);
}
.promo-card-featured {
  background: linear-gradient(180deg, rgb(var(--stb-berry-500)) 0%, rgb(var(--stb-berry-800)) 100%);
  border-color: var(--gold);
}
.promo-tag {
  background: rgb(var(--stb-gold-300));
  color: var(--on-accent);
  border-radius: var(--radius-sm);
  font-weight: 700;
}
.promo-card p:not(.promo-value) { color: rgb(var(--stb-neutral-150)); }

/* ---- the berry rule ---------------------------------------------------
   A short magenta-to-yellow rule the lobby runs under its section heads,
   which is the one piece of decor that makes a plain text section read
   as part of the Malina lobby rather than as a generic dark page. */
.eyebrow { position: relative; display: inline-block; padding-bottom: .4rem; }
.eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.4rem;
  height: 2px;
  background: linear-gradient(to right, rgb(var(--stb-berry-300)), rgb(var(--stb-gold-300)));
}

/* the data panels keep the berry at their leading edge, the way the
   lobby marks its own info blocks */
.info-block {
  border-left: 3px solid rgb(var(--stb-berry-500));
}

/* ---- header -----------------------------------------------------------
   A solid plum band with a hairline under it, and the lens/pill row
   sitting on #2d0d30 rather than on a gradient that fades into the page. */
.site-header { border-bottom: 1px solid rgb(var(--stb-berry-700)); }

/* ---- footer -----------------------------------------------------------
   The footer carries the same berry hairline, so the page closes on the
   colour it opened with. */
.site-footer { border-top: 2px solid rgb(var(--stb-berry-700)); }

/* ---- header parity with the home page --------------------------------
   Two things the text pages never inherited.

   First, the register pill. The old skin painted .btn-primary itself and
   switched the ::before plate off inside the header, because the plate's
   square corners showed through the pill's rounded ones. Malina's button
   IS the plate — .btn-primary carries no background of its own — so with
   `content: none` the header pill rendered as bare text on the band. The
   plate goes back on; at a 2px radius there are no corners to show.

   Second, the middle breakpoints. styles.css tightens the single-row
   header between 861 and 1320px, where five nav labels and two pills do
   not otherwise fit; without it the pills ran over "Obsługa klienta" on
   a laptop. Same numbers here, so the header reads identically on every
   page of the site. */
.header-actions .btn-primary::before {
  content: "";
  background: rgb(var(--stb-brand-600));
}
.header-actions .btn-primary:hover::before { background: rgb(var(--stb-brand-500)); }
.header-actions .btn-primary:active::before { background: rgb(var(--stb-brand-700)); }

@media (min-width: 861px) and (max-width: 1320px) {
  .header-inner { gap: 1rem; }
  .nav-side { gap: .75rem; }
  .nav-side ul { gap: 1rem; }
  .nav-side ul a { font-size: var(--fs-3); gap: .3rem; }
  .nav-icon { width: 15px; height: 15px; }
  .header-actions { gap: .4rem; }
  .header-actions .btn { padding: .5rem .85rem; font-size: var(--fs-2); }
  .header-actions .btn-primary { padding: .5rem .85rem; }
  .app-dl { width: 36px; height: 36px; }
  .app-dl-icon { width: 12px; height: 12px; }
  .app-dl-mark { font-size: .5rem; }
}

@media (min-width: 861px) and (max-width: 1100px) {
  .header-inner { gap: .75rem; }
  .nav-side { gap: .6rem; }
  .nav-side ul { gap: .6rem; }
  .nav-side ul a { gap: 0; font-size: var(--fs-2); }
  .nav-side ul a .nav-icon { display: none; }
  .header-actions { gap: .3rem; }
  .header-actions .btn { padding: .45rem .65rem; }
  .header-actions .btn-primary { padding: .45rem .65rem; }
  .app-dl { width: 34px; height: 34px; }
  .app-dl-icon { width: 11px; height: 11px; }
  .app-dl-mark { font-size: .47rem; }
  .brand-logo { height: 40px; }
}

@media (max-width: 860px) {
  .site-header.is-stuck .header-actions .btn-primary {
    color: var(--on-cta);
    -webkit-text-fill-color: var(--on-cta);
  }
}

/* ---- table head -------------------------------------------------------
   The header row was painted in --stb-neutral-950, a near-black that sat
   a shade darker than the first data row and read as a gap rather than
   as a head. It takes the berry instead — the colour the promo covers
   and the panel rules already use — with a rule under it and the same
   vertical padding as a data row, so the table opens on a band. */
.summary-table thead th,
.limits-table thead th {
  padding-block: .9rem;
  background: rgb(var(--stb-berry-800));
  color: var(--gold);
  border-bottom: 1px solid rgb(var(--stb-berry-600));
}

/* the phone metrics the home page uses for the same table */
@media (max-width: 860px) {
  .summary-table { font-size: var(--fs-3); }
  .summary-table td { padding: .7rem .7rem; }
  .summary-table thead th { padding: .6rem .7rem; }
}

/* ---- menu button: bars only ------------------------------------------
   The toggle carried a small search lens in its bottom-right corner, and
   the three bars tapered (26/20/13px) to leave room for it. With the
   lens gone the taper had nothing to defer to and read as a mistake, so
   the bars go back to one width, centred in the button. */
.nav-toggle::before,
.nav-toggle::after { display: none; }
.nav-toggle-bar { left: 11px; }
.nav-toggle-bar:nth-child(1),
.nav-toggle-bar:nth-child(2),
.nav-toggle-bar:nth-child(3) { width: 24px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1),
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { width: 24px; }


/* the phone header pill was dropped to 500 for the diacritics; it takes
   a smaller step than the rest of the buttons rather than none */
@media (max-width: 860px) {
  .header-actions .btn-primary { font-weight: 700; }
}

/* ---- the sticky bar sits lower ---------------------------------------
   60px for a 25px glyph over a 13px label left about 18px of slack doing
   nothing. The bar comes down to 52px and the room comes out of the
   spacing — the gap between glyph and label and the label's own leading
   — so the icons keep their size. The raised bonus plate gives back the
   same 4px it would otherwise have gained, so it still breaks the bar's
   top edge by the same amount as before. */
@media (max-width: 860px) {
  .bottom-nav { height: 52px; }
  .bottom-nav-item { gap: .08rem; }
  .bottom-nav-item > span { line-height: 1.05; }
  .bottom-nav-plate { margin-top: -13px; }
}