/**
 * Component skins — colors, radius, spacing, typography per component.
 * Mobile-first defaults live here; column/flow changes for wider screens live in layout.css.
 */

:root {
  /* In-page anchor scroll offset for the sticky .bd-site-header (below).
     Applied wherever a smooth-scroll target can land — see the
     `main > section[id], .bd-article h2, .bd-article h3` rule further down.
     145px clears the measured worst case: the header wraps to two rows
     between ~768–900px (129px tall) plus a small buffer; it's harmless
     extra whitespace above the target at widths where the header is a
     single row (~69px). If .bd-site-header's max height changes, update
     this one value and every anchor target stays correct. */
  --scroll-offset: 145px;
}

/* ---------- Header / nav ---------- */
.bd-site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(10, 10, 12, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

/* ---------- Logo: real brand mark (assets/brand/bd-logo.webp),
   transparent with a white outline, sized for the dark header/footer.
   Shared by the header link (.bd-brand) and the footer mark
   (.bd-site-footer__brand) — both wrap the same <img class="brand__logo">.
   Sized width-first (not height-first): base.css sets `img{max-width:100%}`
   globally, so a height-locked image would distort once its flex container
   goes narrower than the image's natural width. width+auto-height keeps the
   aspect ratio intact at any container width; the HTML width/height
   attributes still give the browser the intrinsic ratio for CLS. */
.bd-brand {
  display: inline-flex;
  align-items: center;
}
.bd-brand__logo {
  display: block;
  width: 171px;
  height: auto;
}
/* Footer repeats the logo smaller, at the old wordmark's 1rem/1.25rem
   (0.8x) ratio — 171px * 0.8 = ~137px wide, ~24px tall. */
.bd-site-footer__brand .bd-brand__logo {
  width: 137px;
}

.bd-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
  cursor: pointer;
}
.bd-nav-toggle:hover { border-color: var(--accent); }

.bd-nav-list {
  list-style: none;
  margin: 0;
  padding: var(--space-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.bd-nav-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
}
.bd-nav-list a:hover, .bd-nav-list a:focus-visible { color: var(--text); }

/* ---------- Buttons ---------- */
.bd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}
.bd-btn--primary {
  background: var(--cta);
  color: #FFFFFF;
}
.bd-btn--primary:hover, .bd-btn--primary:focus-visible {
  filter: brightness(1.1);
  text-decoration: none;
}
.bd-btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.bd-btn--ghost:hover, .bd-btn--ghost:focus-visible {
  border-color: var(--text-muted);
  text-decoration: none;
}

/* ---------- Hero ---------- */
.bd-hero__subtitle {
  color: var(--text-muted);
  max-width: 52ch;
}
.bd-hero__banner {
  /* No border/shadow: asset corners (~RGB 10,10,10) already match --bg and
     blend seamlessly — a frame would only draw an unwanted seam. */
  position: relative;
  aspect-ratio: 16 / 10;
  width: 100%;
  max-width: var(--banner-max);
  border-radius: var(--radius-card);
  background: var(--bg); /* matches image edges, avoids flash before load */
  overflow: hidden;
}
.bd-hero__banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Stats ---------- */
.bd-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  text-align: center;
}
.bd-stat__value {
  display: block;
  font-size: var(--fs-number);
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.bd-stat__label {
  display: block;
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}

/* ---------- Content card ---------- */
.bd-content-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-8);
}
.bd-content-card__text { color: var(--text-muted); }

/* ---------- State cards (Sicher / Gefahr / loss) ---------- */
.bd-state-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Screenshot frame — Sicher and Gefahr cards embed a real widget capture
   instead of a drawn badge/button. The two source screenshots are very
   different shapes (landscape widget-only vs a tall full-pitch capture), so
   the frame can't just be `width:100%; height:auto`: side by side in the
   two-column layout that would leave the landscape card dramatically
   shorter than the portrait one. `object-fit: contain` guarantees neither
   image is ever cropped regardless of frame size (the hard requirement);
   `flex: 1 1 auto` on the frame — not a fixed px height — is what actually
   equalizes the two cards: CSS Grid's default `align-items: stretch`
   stretches both `.bd-state-card`s in a row to the same height, and the frame
   (the only flexible child) is what absorbs that extra height, so the
   shorter (landscape) screenshot ends up centered in a taller frame instead
   of leaving blank space under its badge/title/text. `max-height` keeps
   that letterboxing from growing unbounded on very wide rows; `min-height`
   keeps the portrait shot legible on mobile, where cards stack in a single
   column and nothing stretches them against each other. */
.bd-state-card__frame {
  flex: 1 1 auto;
  min-height: 190px;
  max-height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.bd-state-card__frame img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.bd-state-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.bd-state-card__text { color: var(--text-muted); }

/* Sicher — cash out available: green means "can take it", nothing else.
   No drawn state-card__button here on purpose: the real "Auszahlen €7,52"
   button is already visible in the screenshot above, a second painted pill
   underneath it would just contradict/duplicate the real UI. */
.bd-state-card--safe { border-color: var(--safe); }
.bd-state-card--safe .bd-state-card__badge { background: rgba(90, 158, 74, 0.15); color: var(--safe); }

/* Gefahr — cash out blocked: muted orange, never green, never "success"
   orange. Same reasoning as .bd-state-card--safe above — the greyed-out real
   button is already in the screenshot. */
.bd-state-card--danger { border-color: var(--danger); }
.bd-state-card--danger .bd-state-card__badge { background: rgba(199, 91, 42, 0.15); color: var(--danger); }

/* Loss — round ended before cash out: neutral, not reusing safe/danger
   tokens. This is the one state without a screenshot (see states.note in
   i18n — no capture exists because the widget disappears with the round),
   so it keeps the original drawn badge/button treatment as a plain text
   card, not a fake screenshot. */
.bd-state-card--loss { border-color: var(--border); }
.bd-state-card--loss .bd-state-card__badge { background: var(--surface-2); color: var(--text-muted); }

/* Third state, no screenshot available (see comment above) — sits as its
   own full-width strip below the two-up screenshot pair instead of a third
   grid column, so it never gets stretched to chase a photo's height, and
   the two screenshot cards never get stretched to chase empty space. */
.bd-state-card--note {
  margin-top: var(--space-4);
}

/* ---------- Comparison table → cards on mobile (same <table>, no duplication) ---------- */
.bd-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.bd-compare-table {
  width: 100%;
  border-collapse: collapse;
}
.bd-compare-table th, .bd-compare-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  /* top, not the browser default (middle): a 1-line cell next to a 3-line
     cell in the same row must not look shifted down to "center" against it */
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  /* long unbroken compound words (de/fi) must break inside a cell instead
     of forcing the table/card wider than the viewport */
  overflow-wrap: anywhere;
}
.bd-compare-table thead th {
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  white-space: nowrap;
}
.bd-compare-table tbody tr:last-child td { border-bottom: 0; }
.bd-compare-table tbody tr:hover { background: var(--surface); }

/* Mobile card mode: thead visually hidden (not display:none, stays for a11y/SEO), rows become cards */
.bd-compare-table--cards thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.bd-compare-table--cards tr {
  display: block;
  margin: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-2) var(--space-4);
}
.bd-compare-table--cards tbody tr:hover { background: none; }
.bd-compare-table--cards td {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  border: 0;
  padding: var(--space-2) 0;
  text-align: right;
  min-width: 0;
}
.bd-compare-table--cards td::before {
  content: attr(data-label);
  font-weight: 600;
  color: var(--text-muted);
  text-align: left;
  flex-shrink: 0;
  overflow-wrap: anywhere;
  max-width: 45%;
}

/* ---------- Article body (rendered from markdown) ---------- */
/* Long unbroken compound words (de/fi especially — "Auszahlen-Strategie",
   "Satunnaislukugeneraattori") must be able to break inside prose and inside
   table cells, otherwise a single word overflows the container at 320px. */
/* Readable-width column (80ch, resolved against .bd-article's own inherited
   body font-size) centered inside the wider .bd-container, so the text
   doesn't hug the left edge and leave an empty third of the viewport on
   the right on wide screens. The measure lives on .bd-article itself, once —
   NOT on each child — so headings, paragraphs, lists and the table wrapper
   all share exactly the same box and line up on one grid. (Putting 80ch on
   an h2 directly is a no-op: "ch" resolves against THAT element's own
   font-size, ~44px at desktop h2 sizes, so 80ch there is ~1800px and never
   constrains anything — this bit us once, don't reintroduce it.) */
.bd-article {
  max-width: 80ch;
  margin-inline: auto;
}
.bd-article :is(h2, h3, p, ul, ol, blockquote) {
  overflow-wrap: anywhere;
}
.bd-article h2, .bd-article h3 {
  margin-top: var(--space-12);
}
.bd-article h2:first-child, .bd-article h3:first-child {
  margin-top: 0;
}

/* Anchor-scroll offset for the sticky header: applies to every top-level
   <section id="..."> in <main> (nav links to #calculator/#states/#article/
   #faq/#cta), to #main itself (the skip-to-content link in the body and
   the CTA button both link to "#main" — confirmed by measurement that
   native fragment navigation lands it flush under the header, same bug
   class as the sections), AND to in-article headings (markdown ships real
   #anchor links to h2/h3, e.g. "#corners-or-goals-choosing-your-trigger").
   Without this, position:sticky .bd-site-header + html{scroll-behavior:smooth}
   lands the target underneath the header. Value: see --scroll-offset near
   the top of this file. */
main > section[id],
#main,
.bd-article h2,
.bd-article h3 {
  scroll-margin-top: var(--scroll-offset);
}
.bd-article p, .bd-article ul, .bd-article ol {
  color: var(--text-muted);
}
.bd-article ul, .bd-article ol {
  /* margin-block only (not the `margin` shorthand): a shorthand here would
     reset margin-left/right to 0 and silently undo the margin-inline:auto
     centering set above, since this rule has equal specificity and comes
     later in source order. */
  margin-block: 0 var(--space-4);
  padding-left: var(--space-6);
}
.bd-article li {
  margin-bottom: var(--space-2);
}
.bd-article li:last-child {
  margin-bottom: 0;
}
.bd-article a {
  overflow-wrap: anywhere;
}
.bd-article strong {
  color: var(--text);
}
.bd-article hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-8) 0;
}
/* Tables inside the article reuse .bd-table-wrap/.bd-compare-table--cards
   (build.js applies the same classes), so the mobile card behaviour and the
   overflow-wrap safety net defined in the comparison-table rules above
   apply unchanged — this only adds article-specific vertical spacing. */
.bd-article .bd-table-wrap {
  /* .bd-article itself is already the 80ch measure (see above), so the table
     wrapper just fills that box like every other child — no separate
     max-width/centering needed here. overflow-x:auto (inherited from
     .bd-table-wrap) still protects narrow viewports if the table's own min
     content is ever wider than the column. */
  margin-bottom: var(--space-6);
}

/* ---------- Commercial insertions inside the article (cta-inline / cta-card) ----------
   Only two fixed classes exist on these blocks — the generator (build.js,
   in progress elsewhere) does not add any BEM sub-classes to the nested
   heading/paragraph/link, so every rule below targets plain tags by
   descendant selector, not a sub-class. Both plausible inner shapes are
   covered: a heading tag for the label (h3/h4) OR a bold-only paragraph
   (markdown "**LABEL**" renders as `<p><strong>…</strong></p>`); and a
   link that is its own element (a real button) OR a link sitting inside
   running prose (markdown "[text](url)" at the end of a sentence). See
   _research/commercial-placements.md §7 for the draft copy this is built
   against — five of these total on the page (never more than one per
   H2 section), so neither variant should read as a banner.

   Colour: --cta (#2E7BFF) only — DESIGN_SYSTEM.md already names it "the
   main brand button" (reused verbatim from .bd-btn--primary above). --success/
   --safe (green) and --locked/--danger (orange) are reserved for in-game
   cash-out state and must never be reused for a plain commercial link —
   that would teach the reader the wrong thing about the widget itself.
   --accent (orange) is reused only for the small label, same as every
   other .bd-eyebrow on the page — not a new meaning, just the existing one. */

/* Quiet in-flow line: reads as a sentence, not a callout. A left rule +
   very faint tint of --cta is the only signal — no card, no button, no
   background block big enough to interrupt reading rhythm. */
.bd-cta-inline {
  display: block;
  margin: var(--space-6) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--cta);
  background: rgba(46, 123, 255, 0.06); /* --cta at low opacity, same token */
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  color: var(--text-muted); /* matches .bd-article p; also covers the case
                                where .bd-cta-inline is a wrapper div rather
                                than the <p> itself */
}
.bd-cta-inline a {
  /* --link (#4A9EFF, ~7:1 on this background), not --cta (#2E7BFF, ~4.4:1
     here) — body-size text in running prose needs the 4.5:1 AA floor,
     unlike the card's bold/large-UI button below which is exempt. Every
     other in-article link already uses --link (base.css); this keeps
     that rule instead of carving out a lower-contrast exception. */
  color: var(--link);
  font-weight: 600;
}
.bd-cta-inline a:hover, .bd-cta-inline a:focus-visible {
  text-decoration: underline;
}
/* Covers the case where .bd-cta-inline is a wrapper (e.g. <div class="cta-inline"><p>…</p></div>)
   instead of the <p> itself: .bd-article p's own margin (0 0 var(--space-4))
   would otherwise leave lopsided padding — 16px dead space under the last
   line vs. this block's own var(--space-3) top padding. Same fix pattern
   as .bd-cta-card's > :first-child/:last-child reset above. */
.bd-cta-inline > :first-child { margin-top: 0; }
.bd-cta-inline > :last-child { margin-bottom: 0; }

/* Card: same weight class as .bd-state-card (padding var(--space-6), plain
   1px border) — deliberately NOT .bd-content-card's heavier var(--space-8)
   and NOT a coloured edge like .bd-state-card--safe/--danger use, since a
   coloured edge on THIS card would read as a third game-state colour. */
.bd-cta-card {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
.bd-cta-card > :first-child { margin-top: 0; }
.bd-cta-card > :last-child { margin-bottom: 0; }

/* Corner-flag photo, from 640px up only (matches the site's existing
   --bp-sm cutoff — see tokens.css and the .bd-stats/.bd-hero__banner rules in
   layout.css). Rendered and screenshotted the real range first: below
   640px the card is tall/narrow enough (wrapped CTA copy, see the button
   comment below) that background-size:cover's horizontal crop leaves only
   a thin diagonal corner of the flag at 480–540px — not the intended
   motif, arguably worse than no photo. Card stays exactly as above (flat
   --surface, the previously-tested contrast) below 640px.

   Photo is 2.5:1 (720x288 / 1440x576), corner flag + floodlight on the
   right, flat dark field on the left. background-position: right top,
   not center, on purpose:
   - "right" keeps the flag in frame when the card is narrower/taller than
     2.5:1 (cover crops the image horizontally in that case) — center would
     cut the flag off mid-pole.
   - "top" keeps the flag+floodlight in frame when the card is wider/
     shorter than 2.5:1 (cover crops vertically instead) — center would
     shave the flag's pennant off the top and leave dead grass/gradient in
     its place, i.e. lose the whole point of the asset.
   Two full background-image declarations (not one image-set() call) so
   browsers without image-set() support fall back to the 1x file instead
   of the property being dropped entirely — see MDN graceful-degradation
   pattern for image-set().

   Gradient stops and the 55% text-column cap below were NOT eyeballed —
   first pass (flat-dark-to-42%, fading to 0 by 76%, text capped at 58%)
   measured out at body-text contrast 1.87:1 against the brightest bokeh
   highlight the photo puts under a p at 640px/card 2 ("Real fixtures come
   and go..."), nowhere near the 4.5:1 AA floor for --text-muted (#8E8E96)
   body copy. Re-measured (Playwright + per-pixel sub-sampling of the
   rendered card, brightest background pixel under each text box's actual
   rect, not assumed) across 640–1440px on both cards on the page with the
   glyphs hidden so only the photo/gradient pixel counts: this version —
   opaque dark flat through 60%, fading to 0 by 100%, text capped at 55%
   (comfortably inside the flat zone, not at its edge) — holds >=5.1:1 for
   body copy and >=8.8:1 for the --accent (#F5A623) label everywhere in
   that range, worst case included. */
@media (min-width: 640px) {
  .bd-cta-card {
    background-image:
      linear-gradient(to right,
        rgba(22, 22, 26, 0.97) 0%,
        rgba(22, 22, 26, 0.97) 60%,
        rgba(22, 22, 26, 0.5) 72%,
        rgba(22, 22, 26, 0.08) 88%,
        rgba(22, 22, 26, 0) 100%),
      url("/assets/cta/bd-cta-card-bg.webp");
    background-image:
      linear-gradient(to right,
        rgba(22, 22, 26, 0.97) 0%,
        rgba(22, 22, 26, 0.97) 60%,
        rgba(22, 22, 26, 0.5) 72%,
        rgba(22, 22, 26, 0.08) 88%,
        rgba(22, 22, 26, 0) 100%),
      image-set(
        url("/assets/cta/bd-cta-card-bg.webp") 1x,
        url("/assets/cta/bd-cta-card-bg@2x.webp") 2x);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: cover;
  }
  /* Text column stays inside the flat/darkened left side of the photo —
     the flag on the right is decorative, nothing should sit on top of it.
     Applies to the eyebrow label and body copy; the button/fallback-link
     max-width lives with the button rules further down (same media query,
     re-declared there deliberately: those rules set their own unconditional
     max-width: 100%, later in source order, which would otherwise win the
     cascade over a cap declared only up here). */
  .bd-cta-card h3, .bd-cta-card h4,
  .bd-cta-card p {
    max-width: 55%;
  }
}

.bd-cta-card h3, .bd-cta-card h4,
.bd-cta-card p:first-child > strong:only-child {
  display: block;
  margin: 0 0 var(--space-2);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--accent); /* same role as every other .bd-eyebrow, not new */
}
.bd-cta-card p {
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
}

/* Button variant: the link is its own element (direct child of the card,
   or the sole content of its own paragraph) — the "кнопка" the brief asks
   for, ≥44px touch target either way. Uses --radius-card (12px), not the
   site's usual --radius-pill: every other pill button (.bd-btn,
   .bd-nav-toggle) carries a short 1-2 word label, but this one carries a
   full CTA sentence that legitimately wraps to 2+ lines on narrow/DE-FI
   copy — a full 999px pill on a multi-line box degrades into an oval
   blob (confirmed by rendering a stress-length string at 320/375px). */
.bd-cta-card > a,
.bd-cta-card p > a:only-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-card);
  background: var(--cta);
  color: #FFFFFF;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere; /* long de/fi button copy must wrap, not overflow */
}
.bd-cta-card > a:hover, .bd-cta-card > a:focus-visible,
.bd-cta-card p > a:only-child:hover, .bd-cta-card p > a:only-child:focus-visible {
  filter: brightness(1.1);
  text-decoration: none;
}

/* Fallback: a link sitting inside a normal sentence (not alone in its own
   paragraph) stays a plain link, not a pill — the higher-specificity
   :only-child rule above wins whenever the link IS alone. */
.bd-cta-card p a {
  font-weight: 600;
}

/* Same 55% text-column cap as the label/body copy above, applied to the
   button variant specifically (must come after its own max-width: 100%
   above to win the cascade — see the comment on the photo block). Solid
   --cta fill, so this isn't a contrast concern, just keeps the button off
   the decorative flag on wide/short cards where it would otherwise be free
   to sit anywhere across the full width. */
@media (min-width: 640px) {
  .bd-cta-card > a,
  .bd-cta-card p > a:only-child {
    max-width: 55%;
  }
}

/* Wide context screenshot (whole live-match page, widget in the right
   column) — appended after the rendered markdown, inside .bd-article, so it
   inherits the same 80ch column instead of needing its own width rule.
   Plain width:100%/height:auto (no object-fit frame): this is a single
   full-bleed image, not a pair that needs height-matching. */
.bd-article-figure {
  margin-top: var(--space-8);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
}
.bd-article-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.bd-article-figure figcaption {
  padding: var(--space-4) var(--space-6);
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* ---------- FAQ (native <details>, no JS) ---------- */
.bd-faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.bd-faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.bd-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-4) var(--space-6);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 44px;
}
.bd-faq-item summary::-webkit-details-marker { display: none; }
.bd-faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  color: var(--accent);
  font-size: 1.25rem;
  line-height: 1;
}
.bd-faq-item[open] summary::after { content: '\2212'; }
.bd-faq-item__body {
  padding: 0 var(--space-6) var(--space-4);
  color: var(--text-muted);
}

/* ---------- CTA block ---------- */
.bd-cta-block {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-12) var(--space-6);
}
.bd-cta-block__text {
  color: var(--text-muted);
  max-width: 60ch;
  margin-inline: auto;
}

/* ---------- Payout calculator (vanilla JS, no libraries) ---------- */
.bd-calculator {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
.bd-calculator__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.bd-calculator__field label {
  color: var(--text-muted);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.bd-calculator__input {
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 1.125rem;
  font-variant-numeric: tabular-nums;
}
.bd-calculator__input:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
  border-color: var(--cta);
}
.bd-calculator__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.bd-calculator__result-label {
  color: var(--text-muted);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.bd-calculator__result-value {
  font-size: var(--fs-number);
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ---------- Responsible gambling notice ---------- */
/* Regulatory content, not a warning — calm styling, not a red alert banner.
   Deliberately does NOT inherit .bd-site-footer's --text-dim/0.875rem: this is
   not "small grey print", it has to read as its own block. */
.bd-responsible-gambling {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--border);
}
.bd-responsible-gambling__badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--accent);
  border-radius: var(--radius-pill);
  color: var(--accent);
  font-weight: 700;
  font-size: 1rem;
}
.bd-responsible-gambling__body {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.bd-responsible-gambling__text {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
}
.bd-responsible-gambling__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.bd-responsible-gambling__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.bd-responsible-gambling__link:hover,
.bd-responsible-gambling__link:focus-visible {
  border-color: var(--accent);
  text-decoration: none;
}

/* ---------- Footer ---------- */
.bd-site-footer {
  border-top: 1px solid var(--border);
  padding-block: var(--space-8);
  color: var(--text-dim);
  font-size: 0.875rem;
}

/* Footer logo is a link like the header one; inline-flex so the anchor box
   matches the image instead of inheriting line-height slack. */
.bd-brand__link {
  display: inline-flex;
  align-items: center;
}

/* ---------- 404 / Not found ---------- */
/* Reuses .bd-section/.bd-section__head/.bd-section__intro/.bd-eyebrow/.bd-btn
   from the rest of this file — no new page chrome, same design tokens, so
   the 404 page (see build.js buildNotFoundData / src/templates/404.html)
   reads as part of the site, not a bolted-on error screen. */
.bd-not-found {
  text-align: center;
}
.bd-not-found__head {
  margin-inline: auto;
}
.bd-not-found__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.bd-not-found__links {
  margin-top: var(--space-8);
}
.bd-not-found__links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
}
/* min-height: 44px — touch target floor, same rule .bd-nav-list a already
   follows (above, in this file). */
.bd-not-found__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--link);
  text-decoration: none;
}
.bd-not-found__links a:hover,
.bd-not-found__links a:focus-visible {
  text-decoration: underline;
}