/* Bison Casino — theme for the monobrand template (pl-PL)
   Palette, type and component recipes read off bisoncasino4.io/pl:
   page #10192D, header #162036, card #1A2640, raised #2A3150, border #32446A,
   the active colour a coral #FD7F50, the call to action a warm plate
   #FF9533 -> #FF642A, the signature trim a #5352ED -> #FD7F50 gradient,
   body set in Lato, section headings in the lobby's own Digitalt. */

@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;
}
/* the lobby's own display face: an all-caps condensed set in every category
   header. One weight only, so the display tokens below ask for 400. */
@font-face { font-family: "Digitalt"; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/digitalt-latin.woff2') format('woff2');
}

: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;

  /* ---- Bison's own ramp -------------------------------------------------
     A navy scale struck off the lobby's own #10192D canvas. Its six darkest
     steps are the six surfaces the live site actually ships — footer #0C1527,
     body #10192D, header #162036, card #1A2640, raised panel #2A3150 and the
     #32446A it draws every border and icon button in — so a component that
     asks for "surface" lands on a real Bison colour rather than an
     interpolated one. Above that the steps run out to the site's own text
     greys, #ADBDDE and #E4EAF1.                                           */
  --stb-neutral-950: 12 21 39;    /* #0C1527  deepest: footer, table heads  */
  --stb-neutral-900: 16 25 45;    /* #10192D  body                          */
  --stb-neutral-850: 22 32 54;    /* #162036  header band                   */
  --stb-neutral-800: 26 38 64;    /* #1A2640  cards, dropdowns, inputs      */
  --stb-neutral-750: 42 49 80;    /* #2A3150  nav elements, tabs            */
  --stb-neutral-700: 44 58 89;    /* #2C3A59  card info strip               */
  --stb-neutral-600: 50 68 106;   /* #32446A  borders, icon buttons         */
  --stb-neutral-550: 69 93 146;   /* #455D92  hover border                  */
  --stb-neutral-500: 90 116 173;
  --stb-neutral-400: 126 147 194;
  --stb-neutral-350: 156 172 203;
  --stb-neutral-300: 173 189 222; /* #ADBDDE  body copy                     */
  --stb-neutral-200: 187 203 220; /* #BBCBDC  bright body copy              */
  --stb-neutral-150: 228 234 241; /* #E4EAF1                                */
  --stb-neutral-100: 249 250 250; /* #F9FAFA  brightest copy                */
  --stb-neutral-50: 255 255 255;  /* #FFFFFF                                */
  --stb-white: 255 255 255;
  --stb-black: 3 6 14;            /* #03060E  the lobby's input well        */

  /* the coral read off the lobby: #FD7F50 is the active colour that marks
     every heading, price and link; #FF642A the harder accent under it that
     the banner button is painted in; #D96D45 the hover. Text on coral is the
     body navy, which is what the site calls --accent-text-color. */
  --stb-gold-100: 255 217 198;
  --stb-gold-200: 253 151 114;    /* #FD9772  accent, light   */
  --stb-gold-300: 253 127 80;     /* #FD7F50  activeColor     */
  --stb-gold-500: 255 100 42;     /* #FF642A  sandyOrange     */
  --stb-gold-600: 217 109 69;     /* #D96D45  accent hover    */
  --stb-gold-700: 16 25 45;       /* #10192D  label on coral  */

  /* "brand" is the warm plate every Bison call to action is painted on:
     a vertical #FF9533 -> #FF642A, inverted on hover. */
  --stb-brand-500: 255 149 51;    /* #FF9533 */
  --stb-brand-600: 255 100 42;    /* #FF642A */
  --stb-brand-700: 217 109 69;    /* #D96D45 */
  --stb-brand-200: 255 199 155;
  --stb-brand-150: 255 224 201;

  /* the nav glyphs take the active coral, the way the lobby filters its own
     menu icons to it */
  --stb-blue-500: 253 127 80;
  --stb-blue-600: 255 100 42;
  --stb-blue-700: 217 109 69;

  /* the indigo the lobby trims its cards and level tags with: it is the top
     stop of every gradient border on the site */
  --stb-indigo-500: 83 82 237;    /* #5352ED */
  --stb-indigo-300: 123 122 242;

  --stb-red-500: 255 114 114;     /* #FF7272  live / 18+ */
  --stb-green-500: 183 255 82;    /* #B7FF52  success    */

  /* ---- surfaces -------------------------------------------------------- */
  --bg: rgb(var(--stb-neutral-900));
  /* the navy the hero artwork carries at its edges, so the banner can extend
     past the picture without a seam */
  --hero-blue: #10192D;
  /* 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 navy 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-50));
  --text-muted: rgb(var(--stb-neutral-200));
  /* the fine print takes neutral-300, the site's own #ADBDDE, which is the
     lowest step on this ramp that still clears 4.5:1 on every surface the
     copy actually sits on */
  --text-faint: rgb(var(--stb-neutral-300));

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

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

  /* the signature trim: every card, promo box and CTA plate on the live site
     is drawn with an indigo-to-coral border running top to bottom */
  --trim-grad: linear-gradient(180deg, rgb(var(--stb-indigo-500)) 0%, rgb(var(--stb-gold-300)) 100%);
  --trim-card: linear-gradient(rgb(var(--stb-neutral-800)), rgb(var(--stb-neutral-800))) padding-box,
               linear-gradient(180deg, rgb(var(--stb-indigo-500)) 0%, rgb(var(--stb-gold-300)) 100%) border-box;
  /* the indigo wash the lobby lays under its cards and provider tiles */
  --card-wash: linear-gradient(180deg, rgb(var(--stb-indigo-500) / .04) 0%, rgb(var(--stb-indigo-500) / .2) 100%);

  --glow-a: rgba(253, 127, 80, .05);
  --glow-b: rgba(83, 82, 237, .07);
  /* the header keeps a navy 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(16 25 45 / .94);

  --win: rgb(var(--stb-gold-300));
  --win-glow: rgba(253, 127, 80, .4);
  --tint-accent: rgba(253, 127, 80, .12);
  --accent-glow: rgba(253, 127, 80, .32);
  --cta-glow: rgba(255, 100, 42, .3);
  --subtle-fill: rgba(228, 234, 241, .05);
  --subtle-fill-2: rgba(228, 234, 241, .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 soft - 12px is its default, 8 on small
     controls, 16 on the big panels ------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-btn: 12px;
  --radius-pill: 9999px;
  --radius-thumb: 12px;

  /* ---- type: Lato for everything the reader reads, Digitalt for the
     section headings ----------------------------------------------------
     Bison runs Lato at three weights: 900 carries the display lines and the
     buttons, 700 the nav and badges, 400 the body. The category headers are
     set in Digitalt, the all-caps face the lobby loads as --category-font,
     at a single weight and a half-pixel of tracking.                    */
  --font-display: "Digitalt", "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: 400;
  --display-track: .5px;
  --display-case: none;
  /* the banner headline and every card title stay in Lato Black: Digitalt is
     caps-only, so it is kept for the short section headers it was drawn for */
  --font-heavy: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --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: 1248px;
  --container-narrow: 760px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .25s;
  /* the one shadow the live site ships, on every card and dropdown */
  --shadow-1: 0 8px 16px rgba(0, 0, 0, .7);
}
: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; }

/* The previous brand set 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. */


/* ======================================================================
   LEGACY BRAND OVERLAY (superseded by the Bison overlay at the end)  (shared chrome: header, buttons, footer)
   Restates, in that brand'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 legacy 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 legacy 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 dark plum 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)); }


/* ======================================================================
   BISON BRAND OVERLAY  (shared chrome: header, buttons, footer)
   Same recipe as the home sheet: Lato Black uppercase on the buttons,
   Digitalt kept for the headings it was drawn for, and the white label
   the live banner button carries.
   ====================================================================== */

.btn {
  font-family: var(--font-ui);
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.brand { font-family: var(--font-ui); font-weight: 900; }
.nav-side ul a,
.main-nav ul a,
.nav-actions a,
.bottom-nav-item span { font-family: var(--font-ui); font-weight: 700; }

/* the page copy stays in Lato: a legal page is read, not scanned, and
   Digitalt is caps-only */
h1, h2, h3, h4 {
  font-family: var(--font-heavy);
  font-weight: 900;
  letter-spacing: -.01em;
  text-transform: none;
  line-height: 1.25;
}
/* the hero kicker and the footer menu headings are short enough to take
   the lobby's display face, the way the section headers do on the home page */
.legal-hero .eyebrow,
.footer-col h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--display-track);
  text-transform: none;
}

/* the call to action keeps a white label on the coral plate */
.btn-primary,
.btn-primary:hover,
.btn-primary:active {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

/* the one shadow the live site ships */
.site-header { box-shadow: var(--shadow-1); }

/* the legal tables take the same trim the home panels carry */
.summary-table-wrap {
  border: 1px solid transparent;
  background: var(--trim-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* The text pages dropped the plate behind the header's register pill
   outright (`content: none`), which the previous brand could afford
   because its pill was a plain outlined button. Bison paints that pill in
   the same coral as every other call to action, so the plate comes back.
   Only `content` is restored here: the phone rules above still own the
   opacity, so the pill stays transparent until the header pins. */
.header-actions .btn-primary::before { content: ""; }


/* ---- data tables on the text pages -----------------------------------
   The text pages never carried a table, so none of the table recipe was
   in this sheet. These are the home sheet's rules, with the multi-column
   `data-table` variant that ranges every column left rather than pinning
   a label column against a value one. */
.summary-table-wrap { margin-top: 1.5rem; overflow-x: auto; }
.summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-4);
}
.summary-table td {
  padding: .95rem 1.3rem;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-faint);
}
.summary-table tr:last-child td { border-bottom: none; }
.summary-table tbody tr:nth-child(even) { background: rgb(var(--stb-neutral-750) / .5); }
.summary-table td:first-child { color: var(--text); font-weight: 700; }
.summary-table thead th {
  padding: .8rem 1.3rem;
  background: rgb(var(--stb-neutral-950));
  color: var(--gold);
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.summary-table.data-table td { white-space: nowrap; }
.table-note {
  margin-top: .8rem;
  font-size: var(--fs-2);
  color: var(--text-faint);
}


/* ---- the display face needs its own sizes ----------------------------
   Same correction as the home sheet: Digitalt is a condensed display face
   drawn as capitals, so the labels it took over — the hero kicker and the
   footer menu heads — were left reading a step smaller than they measure,
   and their capitals crowded at the size a text face was happy at. */
.legal-hero .eyebrow {
  font-size: var(--fs-4);
  letter-spacing: .1em;
}
.footer-col h3 {
  font-size: var(--fs-4);
  letter-spacing: .08em;
}
.summary-table thead th { font-size: var(--fs-2); }