/* 2HC design system (FIX_PLAN §4.1 / Appendix B).
   Injected as a BASE layer before the page's own CSS so every site looks
   intentional by default. Brand colors are overridden per project by the
   pipeline (the :root block below is replaced with the brand palette). */
:root{
  /* Brand colors — overridden per project */
  --color-primary:   #00ff66;
  --color-accent:    #00d15e;
  --color-bg:        #1f2528;
  --color-bg-2:      #101619;
  --color-text:      #ffffff;
  --color-muted:     #9fb0ab;
  --color-cta:       #00d15e;
  --color-cta-hover: #00c24f;

  /* Spacing scale (8px base) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
  --s-6: 1.5rem; --s-8: 2rem; --s-12: 3rem; --s-16: 4rem; --s-24: 6rem;

  /* Radii */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,.45);
  --shadow-glow: 0 0 0 1px rgba(0,255,102,.25), 0 8px 30px rgba(0,255,102,.25);

  /* Layout + type */
  --container: 1180px;
  --section-y: clamp(3rem, 7vw, 6rem);
  --fs-h1: clamp(2.2rem, 5vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 3.5vw, 2.3rem);
  --fs-body: 1.0625rem;
  --lh-body: 1.65;
}*,*::before,*::after{ box-sizing: border-box; }body,h1,h2,h3,p,ul,ol,figure,blockquote{ margin: 0; padding: 0; }body{
  background: radial-gradient(1200px 600px at 50% -10%, #243033 0%, var(--color-bg) 40%, var(--color-bg-2) 100%);
  color: var(--color-text);
  font-family: Inter, system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}.xc4f8-container{ width: min(100% - 2rem, var(--container)); margin-inline: auto; }section{ padding-block: var(--section-y); }section + section{ padding-block-start: 0; }h1{ font-size: var(--fs-h1); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }h2{ font-size: var(--fs-h2); line-height: 1.15; font-weight: 700; margin-bottom: var(--s-6); }p{ color: var(--color-text); max-width: 68ch; }/* CTA button with glow */
.xc4f8-btn{
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.6rem; border-radius: var(--r-pill);
  font-weight: 700; text-decoration: none;
  background: linear-gradient(180deg, var(--color-primary), var(--color-cta));
  color: #06210f; box-shadow: var(--shadow-glow);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}.xc4f8-btn:hover{ transform: translateY(-2px); filter: brightness(1.05);
  box-shadow: 0 0 0 1px rgba(0,255,102,.4), 0 12px 38px rgba(0,255,102,.35); }.xc4f8-btn:focus-visible{ outline: 3px solid var(--color-primary); outline-offset: 3px; }/* Game card — real image,gradient ONLY as overlay{
  position: relative; aspect-ratio: 3/4; border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--shadow-2);
}/* Tables (bonus terms,payments,limits) */
table{ width: 100%; max-width: 100%; border-collapse: collapse; border-radius: var(--r-md); overflow: hidden; }caption{ text-align: left; font-weight: 700; margin-bottom: var(--s-3); }th,td{ padding: .85rem 1rem; text-align: left; border-bottom: 1px solid rgba(255,255,255,.08); overflow-wrap: anywhere; }thead th{ background: rgba(255,255,255,.05); }@media (prefers-reduced-motion: reduce){*,*::before,*::after{ animation: none !important; transition: none !important; }}@media (prefers-reduced-motion: no-preference){html{ scroll-behavior: smooth; }}

/* ── Content panels over image-backed sections ──────────────────────────────
   The CWV step injects a fal.ai background-image onto #bonus/#hero. fal casino
   images often bake the word "BONUS" into the picture, so a data panel sitting
   directly on that section lets the art bleed through behind the terms table and
   obscure values (vision-gate HOLD, Basswin 2026-06-16). Give content panels an
   OPAQUE surface so the table is always readable. */
.bonus-card,.steps,.step{
  background: var(--color-bg-2, #101619);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md, 14px);
  padding: clamp(1.1rem, 3vw, 1.9rem);
  box-shadow: var(--shadow-2, 0 8px 24px rgba(0,0,0,.45));
  position: relative; z-index: 1;
}
.bonus-card table{ background: transparent; }

/* ── FAQ accordion ───────────────────────────────────────────────────────────
   Bare <details> render as broken/empty with dead whitespace (vision). Give
   items a surface, padding and a +/- affordance so even a collapsed FAQ reads
   as an intentional accordion. */
.xc4f8-faq{ display: flex; flex-direction: column; gap: .6rem; max-width: 820px; margin-inline: auto; }
.xc4f8-faq-item{
  background: color-mix(in srgb, var(--color-bg-2, #101619) 80%, transparent);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-sm, 8px);
  padding: .9rem 1.1rem;
}
.xc4f8-faq-item>summary{
  cursor: pointer; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  color: var(--color-text);
}
.xc4f8-faq-item>summary::-webkit-details-marker{ display: none; }
.xc4f8-faq-item>summary::after{ content: "+"; font-size: 1.3em; line-height: 1; opacity: .7; }
.xc4f8-faq-item[open]>summary::after{ content: "\2013"; }
.xc4f8-faq-item>*:not(summary){ margin-top: .7rem; }

/* ── Image-free build helpers (text logo / text payment pills / text game tiles)
   These give an intentional look when the project is generated with no pictures
   (logo as text, favicon only). Harmless when images ARE used — themes/layout
   CSS override the .xc4f8-game-card gradient. */
.brand-mark--text{ font-weight: 800; font-size: 1.45rem; letter-spacing: -.02em;
  color: var(--color-text); text-decoration: none; display: inline-flex; align-items: center; }
.brand-mark--text.xc4f8-brand-mark--footer{ font-size: 1.05rem; }
.pay,.payment-pill{ display: inline-flex; align-items: center; gap: .3rem;
  padding: .3rem .7rem; border-radius: var(--r-sm, 8px); border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06); font-size: .8rem; font-weight: 600; color: var(--color-text); }
.xc4f8-game-card:not(:has(img)){ display: flex; align-items: center; justify-content: center;
  text-align: center; min-height: 90px; padding: .75rem; border-radius: var(--r-md, 14px);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-primary, #4f46e5) 30%, #0b0b14),
    color-mix(in srgb, var(--color-accent, #a855f7) 24%, #0b0b14));
  border: 1px solid rgba(255,255,255,.10); font-weight: 700; color: var(--color-text); }
.game-name{ display: flex; align-items: center; justify-content: center; text-align: center;
  padding: .5rem; font-weight: 600; color: var(--color-text); }
/* Games grid — responsive columns. design-system OWNS this so it applies in
   NO-IMAGES mode too: generate_images only injects the grid on the image path,
   so the phased writer's <div class="games-grid"> was otherwise unstyled →
   full-width stacked bars that read as "broken artwork" (vision-gate 2026-06). */
.xc4f8-games-grid,.game-grid{ display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-4, 1rem); }
/* ── Review-page components (rendered by _review_blocks) ─────────────────────
   Every one is built from the palette variables, so all 15 themes carry it. A
   review page is components, not prose: lists, tables, cards and an accordion
   are what make its structure independent of how much text there is. */
.xc4f8-hero-sub{ margin-top: var(--s-4, 1rem); font-size: 1.15rem; opacity: .92; }
.xc4f8-key-points{ list-style: none; padding: 0; margin-top: var(--s-4, 1rem);
  display: flex; flex-wrap: wrap; gap: .5rem .6rem; }
.xc4f8-key-points li{ padding: .35rem .85rem; border-radius: var(--r-pill, 999px);
  border: 1px solid var(--line, rgba(255,255,255,.18)); background: rgba(255,255,255,.06); font-size: .92rem; }
.xc4f8-table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-md, 14px); }
.xc4f8-table-wrap table{ min-width: 540px; }
.xc4f8-compare-table th:first-child,.xc4f8-compare-table td:first-child{ white-space: nowrap; font-weight: 600; }
/* CTA column — the last cell of every comparison row. `width:1%` makes the
   column shrink to the button, so it cannot take space from the fact columns
   (it took 292px of a 1060px table and squeezed "Licenca" to 91px, where the
   base `overflow-wrap:anywhere` — there for long licence numbers — split the
   HEADING mid-word as "LICENC/A"). A column LABEL is a short word and must
   never break; a long licence VALUE in a `td` still wraps as before. */
.xc4f8-compare-table th{ overflow-wrap: normal; }
.xc4f8-compare-table .xc4f8-cta-cell,.xc4f8-compare-table th:last-child{ width: 1%; white-space: nowrap; text-align: center; }
.xc4f8-btn-sm{ padding: .45rem 1rem; font-size: .86rem; }
.xc4f8-compare-table .xc4f8-cta-cell .xc4f8-btn{ display: inline-block; width: 100%; min-width: 7.5rem; text-align: center; }
.xc4f8-op-cards{ display: grid; gap: var(--s-6, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.xc4f8-op-card,.pick{ background: var(--color-bg-2, #101619); border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: var(--r-md, 14px); padding: clamp(1.1rem, 3vw, 1.7rem); }
.xc4f8-op-card{ display: flex; flex-direction: column; gap: .9rem; }
.xc4f8-op-card p,.pick p{ max-width: none; }
.xc4f8-op-card h3,.pick h3{ font-size: 1.3rem; line-height: 1.2; }
.xc4f8-op-card .xc4f8-btn{ align-self: flex-start; margin-top: auto; }
/* One compared operator's own logo, next to its name in a card/table/pick
   row (see _review_blocks.py's op-logo-slot marker + _gi_review.py, which
   fills or drops it once the file exists on disk). Base rule, not per-skin —
   works on all 4 skins without an override. */
.xc4f8-op-logo{ height: 1.5em; width: auto; max-width: 6.5rem; vertical-align: -0.3em;
  margin-inline-end: .5em; object-fit: contain; }
.op-logo-slot:empty{ display: none; }
/* In a table cell the logo IS the row's label (the name beside it is dropped
   when the logo is placed — _gi_review.apply_operator_logo_slots), so it is
   drawn at label size rather than as an inline icon. */
.xc4f8-op-cell .xc4f8-op-logo{ display: block; height: 2.4em; max-width: 9rem; margin: 0; }
@media (max-width: 720px){ .xc4f8-op-cell .xc4f8-op-logo{ height: 2.2em; max-width: 8rem; } }
.xc4f8-facts{ list-style: none; padding: 0; display: grid; gap: .5rem; }
.xc4f8-facts li{ display: grid; grid-template-columns: minmax(6.5rem, 30%) 1fr; gap: .1rem .8rem; }
.xc4f8-facts li span{ font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
@media (max-width: 480px){ .xc4f8-facts li{ grid-template-columns: 1fr; } }
.xc4f8-pros-cons,.xc4f8-pros,.xc4f8-cons{ display: grid; gap: .35rem; }
.xc4f8-pros,.xc4f8-cons{ list-style: none; padding: 0; }
.xc4f8-pros li,.xc4f8-cons li{ position: relative; padding-left: 1.5rem; }
.xc4f8-pros li::before,.xc4f8-cons li::before{ position: absolute; left: 0; font-weight: 700; }
.xc4f8-pros li::before{ content: "+"; color: var(--color-primary, #0a0); }
.xc4f8-cons li::before{ content: "\2212"; opacity: .7; }
.pick-grid{ display: grid; gap: var(--s-4, 1rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
/* Keyword topics (_review_blocks.render_topic): an intro, then points as a
   two-part list — a bold lead-in and its sentence. A list by construction, so
   eight topics cannot become a paragraph wall. */
.xc4f8-topic-intro{ max-width: 70ch; }
.xc4f8-topic-points{ list-style: none; padding: 0; display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.xc4f8-topic-points li{ padding: .9rem 1rem; border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: var(--r-md, 12px); background: var(--color-bg-2, transparent); }
.xc4f8-topic-points li strong{ display: block; margin-bottom: .25rem; }
/* A topic's data table (one per page, _review_blocks.TABLE_KINDS). It borrows
   the comparison table's look but not its CTA column rules: its last column is
   prose ("what to check"), which `width:1%; nowrap` would squeeze into one
   endless line. */
.xc4f8-topic-table-wrap{ margin: var(--s-4, 1rem) 0; }
.xc4f8-topic-table th:last-child{ width: auto; white-space: normal; text-align: left; }
.xc4f8-topic-table th:first-child,.xc4f8-topic-table td:first-child{ white-space: normal; min-width: 7.5rem; }
.xc4f8-criteria{ list-style: none; padding: 0; counter-reset: crit; display: grid; gap: 1rem; }
.xc4f8-criteria li{ counter-increment: crit; position: relative; padding-left: 3rem; }
.xc4f8-criteria li::before{ content: counter(crit); position: absolute; left: 0; top: .1rem;
  width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%;
  font-weight: 700; background: var(--color-primary, #0a0); color: #06210f; }
.xc4f8-criteria li strong{ display: block; }
.xc4f8-checklist{ list-style: none; padding: 0; display: grid; gap: .55rem; }
.xc4f8-checklist li{ position: relative; padding-left: 1.8rem; }
.xc4f8-checklist li::before{ content: "\2713"; position: absolute; left: 0; font-weight: 700;
  color: var(--color-primary, #0a0); }
.xc4f8-glossary{ display: grid; gap: .9rem; margin: 0; }
.xc4f8-glossary dt{ font-weight: 700; }
.xc4f8-glossary dd{ margin: .15rem 0 0; opacity: .88; }
/* Dialect forms (_review_blocks.DIALECT_AXES). The same block in another
   markup — sub-headed paragraphs, a definition list, a list of defined terms —
   styled like the original, so a dialect changes the DOM and not the look.
   The shell wrappers only add a level of markup: display:contents keeps every
   theme and skin rule seeing the box tree it was written for. */
.xc4f8-op-body,.section-head,.xc4f8-section-body,.xc4f8-hero-inner,.nav-list,.nav-list>li,.footer-meta{ display: contents; }
dl.xc4f8-topic-points,dl.xc4f8-criteria{ margin: 0; }
.xc4f8-topic-points>div{ padding: .9rem 1rem; border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: var(--r-md, 12px); background: var(--color-bg-2, transparent); }
.xc4f8-topic-points h3,.xc4f8-topic-points dt,.xc4f8-criteria h3,.xc4f8-criteria dt{ display: block; margin: 0 0 .25rem;
  font-size: 1rem; line-height: 1.35; font-weight: 700; }
.xc4f8-topic-points p,.xc4f8-topic-points dd,.xc4f8-criteria p,.xc4f8-criteria dd{ margin: 0; max-width: none; }
.xc4f8-criteria>div{ counter-increment: crit; position: relative; padding-left: 3rem; }
.xc4f8-criteria>div::before{ content: counter(crit); position: absolute; left: 0; top: .1rem;
  width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%;
  font-weight: 700; background: var(--color-primary, #0a0); color: #06210f; }
.xc4f8-facts>div{ display: grid; grid-template-columns: minmax(6.5rem, 30%) 1fr; gap: .1rem .8rem; }
.xc4f8-facts dt{ font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.xc4f8-facts dd{ margin: 0; }
@media (max-width: 480px){ .xc4f8-facts>div{ grid-template-columns: 1fr; } }
ul.xc4f8-glossary{ list-style: none; padding: 0; }
.xc4f8-glossary dfn{ display: block; font-style: normal; font-weight: 700; }
.xc4f8-glossary li span{ display: block; margin-top: .15rem; opacity: .88; }
.xc4f8-faq-a>p{ margin: 0; }
.xc4f8-container > h3{ margin: 1.6rem 0 .6rem; }
.xc4f8-container > h3:first-child{ margin-top: 0; }

/* Keyword-topic pictures (_gi_review.apply_topic_figures): one under each
   topic's intro. Capped near the reading column, fixed 16:9 box so the page does
   not shift while a lazy image arrives. */
.xc4f8-topic-figure{ margin: var(--s-4, 1rem) 0 var(--s-5, 1.25rem); max-width: 860px; }
.xc4f8-topic-figure img{ display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: var(--r-md, 14px); }

/* Tables on a phone: one card per row (_review_blocks gives every value cell
   its column heading as data-label). A 5-column comparison at 390px either
   scrolled sideways or split words mid-syllable ("dobrodoš|lice", "20.00|0 €")
   — seen on the live review sites, 2026-09-24. */
@media (max-width: 640px){
  .xc4f8-table-wrap{ overflow: visible; border: 0 !important; border-radius: 0 !important; }
  .xc4f8-table-wrap table.xc4f8-compare-table{ min-width: 0; }
  table.xc4f8-compare-table{ border: 0 !important; background: none !important; margin: 0; }
  .xc4f8-compare-table thead{ display: none; }
  .xc4f8-compare-table, .xc4f8-compare-table tbody, .xc4f8-compare-table tr, .xc4f8-compare-table td{ display: block; width: 100% !important; }
  .xc4f8-compare-table tr{ border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: var(--r-md, 12px);
    padding: .8rem .95rem; margin-bottom: .85rem; background: var(--color-bg-2, rgba(255,255,255,.03)); }
  .xc4f8-compare-table td{ border: 0 !important; padding: .32rem 0 !important; text-align: left !important;
    white-space: normal !important; overflow-wrap: break-word; word-break: normal; }
  .xc4f8-compare-table td[data-label]{ display: grid; grid-template-columns: minmax(6rem, 36%) 1fr; gap: .7rem; }
  .xc4f8-compare-table td[data-label]::before{ content: attr(data-label); font-weight: 600; opacity: .72; font-size: .86em; }
  .xc4f8-compare-table td.xc4f8-op-cell{ font-size: 1.06rem; font-weight: 700; padding-bottom: .55rem !important; }
  .xc4f8-compare-table td.xc4f8-cta-cell{ padding-top: .7rem !important; }
  .xc4f8-compare-table td.xc4f8-cta-cell .xc4f8-btn{ width: 100%; min-width: 0; }
}

/* Review pages on a phone: a compact hero, so the listing starts on the first
   screen (it began 700-900px down, below a hero that filled the screen).
   body[data-skin] is set only on review pages; !important because each skin
   sizes its own hero with equal specificity. */
@media (max-width: 640px){
  body[data-skin] .xc4f8-hero{ padding: 26px 0 20px !important; min-height: 0 !important; }
  body[data-skin] .xc4f8-hero .xc4f8-container{ gap: .55rem !important; }
  body[data-skin] .xc4f8-hero h1{ font-size: clamp(1.65rem, 7.4vw, 2.15rem) !important; line-height: 1.1 !important; margin: 0 !important; }
  body[data-skin] .xc4f8-hero-sub{ font-size: .97rem !important; margin-top: .35rem !important; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  body[data-skin] .xc4f8-hero .xc4f8-key-points{ display: none !important; }
  body[data-skin] #table{ padding-top: 22px !important; }
}

/* ── page-specific CSS ── */
:root {
  --color-primary: #0066cc;
  --color-accent: #ff9900;
  --color-bg: #1a1a2e;
  --color-bg-2: #0b0b1f;
  --color-text: #ffffff;
  --color-secondary: #cccccc;
  --color-cta: #985900;
  --color-cta-hover: #a25d00;
}

.hero-ctas > .xc4f8-btn { margin: .3rem .35rem; }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body,'Inter',system-ui,sans-serif);background:#0d1117;color:var(--color-text);line-height:1.58;font-size:16px}img{max-width:100%;display:block}a{color:var(--color-accent);text-decoration:none}h1,h2,h3{line-height:1.08;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-stretch:condensed}h1{font-size:clamp(2.1rem,5.2vw,3.6rem);font-style:italic}h2{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:.7em;padding-left:14px;border-left:5px solid var(--color-cta)}h3{font-size:1rem}p{margin-bottom:1em;color:var(--color-text)}.xc4f8-container{max-width:1140px;margin:0 auto;padding:0 20px}.xc4f8-site-header{position:sticky;top:0;z-index:50;background:#0d1117;border-bottom:3px solid var(--color-cta)}.xc4f8-site-header .xc4f8-container{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px}.xc4f8-brand-mark{display:flex;align-items:center;gap:10px;min-height:38px;font-weight:800;white-space:nowrap}.xc4f8-brand-mark img{height:36px;width:auto;max-width:150px;object-fit:contain}.xc4f8-nav{display:flex;gap:18px;flex-wrap:wrap}.xc4f8-nav a{color:var(--color-text);font-weight:800;font-size:.84rem;text-transform:uppercase}.xc4f8-nav a:hover{color:var(--color-cta)}.xc4f8-btn{display:inline-block;padding:14px 34px;font-weight:900;font-size:.95rem;text-transform:uppercase;text-align:center;border:0;cursor:pointer;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:filter .12s}.xc4f8-btn:hover{filter:brightness(1.15)}.xc4f8-btn-primary{background:var(--color-cta);color:#fff}.xc4f8-hero{padding:64px 0 50px;background:linear-gradient(105deg,color-mix(in srgb,var(--color-primary) 32%,transparent) 0%,transparent 55%)}.xc4f8-hero .xc4f8-container{display:flex;flex-direction:column;align-items:flex-start;gap:16px}table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.94rem}th,td{padding:12px 14px;text-align:left;border-bottom:1px solid #1d2430}th{background:#141a23;color:var(--color-accent);text-transform:uppercase;font-size:.76rem;letter-spacing:.05em}.xc4f8-site-footer{background:#090d12;border-top:3px solid var(--color-cta);padding:42px 0 28px;font-size:.9rem}.xc4f8-site-footer .xc4f8-container{display:flex;flex-direction:column;gap:16px}.footer-nav{display:flex;gap:18px;flex-wrap:wrap}.footer-nav a{color:var(--color-secondary);font-weight:700}@media (max-width:720px){.xc4f8-nav{display:none}main main .xc4f8-btn{width:100%}.xc4f8-site-header .xc4f8-btn{width:auto;padding:9px 14px;font-size:.85rem;white-space:nowrap}.xc4f8-site-header .xc4f8-btn{width:auto;padding:9px 14px;font-size:.85rem;white-space:nowrap}.xc4f8-hero .xc4f8-container{align-items:stretch;text-align:center}}
body[data-skin="luxe"] h1,body[data-skin="luxe"] h2,body[data-skin="luxe"] h3{-webkit-text-fill-color:initial}

body[data-skin="luxe"]{
  --color-bg:#131013; --color-bg-2:#1d181c; --color-text:#f4eee6; --color-secondary:#c9bfb2;
  --color-primary:#d6b066; --color-accent:#e2c07a; --color-cta:#d6b066; --color-cta-hover:#e6c886;
  --line:rgba(226,192,122,.24); --ink-dark:#0d0a0d;
  --font-body:'Optima','Candara','Segoe UI',system-ui,sans-serif;
  --font-head:'Didot','Bodoni 72','Bodoni MT','Playfair Display',Georgia,serif;
  background:radial-gradient(1200px 600px at 50% -10%,#241c22 0%,var(--color-bg) 60%) no-repeat,var(--color-bg);
  color:var(--color-text); line-height:1.7;
}
body[data-skin="luxe"] h1,body[data-skin="luxe"] h2,body[data-skin="luxe"] h3{
  font-family:var(--font-head); font-weight:700; letter-spacing:.005em; text-transform:none; text-shadow:none}
body[data-skin="luxe"] .xc4f8-site-header{background:var(--ink-dark); backdrop-filter:none;
  border-bottom:1px solid var(--line)}
body[data-skin="luxe"] .xc4f8-nav a{color:var(--color-text); font-size:.8rem; text-transform:uppercase;
  letter-spacing:.14em; opacity:.88}
body[data-skin="luxe"] .xc4f8-nav a:hover{color:var(--color-accent); opacity:1}
body[data-skin="luxe"] .xc4f8-hero{text-align:center; padding:108px 0 88px; background-color:#131013}
body[data-skin="luxe"] .xc4f8-hero .xc4f8-container{align-items:center}
body[data-skin="luxe"] .xc4f8-hero,body[data-skin="luxe"] .xc4f8-hero p,body[data-skin="luxe"] .xc4f8-hero li{color:#fff}
body[data-skin="luxe"] .xc4f8-hero h1{font-size:clamp(2.4rem,6vw,4.3rem); max-width:18ch; margin-inline:auto; line-height:1.06}
body[data-skin="luxe"] .xc4f8-hero-sub{max-width:56ch; margin-inline:auto; font-size:1.12rem}
body[data-skin="luxe"] .xc4f8-key-points{justify-content:center}
body[data-skin="luxe"] .xc4f8-key-points li{background:rgba(19,16,19,.78); border:1px solid rgba(226,192,122,.6);
  border-radius:999px; font-size:.88rem; letter-spacing:.02em}
body[data-skin="luxe"] .xc4f8-section{padding:72px 0}
body[data-skin="luxe"] main h2{text-align:center; font-size:clamp(1.7rem,3.4vw,2.5rem); margin-bottom:1.2em;
  border-left:0; padding-left:0}  
body[data-skin="luxe"] main h2::after{content:""; display:block; width:4.5rem; height:1px; margin:.7rem auto 0;
  background:linear-gradient(90deg,transparent,var(--color-accent),transparent)}
body[data-skin="luxe"] .xc4f8-btn{clip-path:none; border-radius:999px; background:var(--color-cta); color:#1a1408;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.82rem; padding:13px 28px;
  box-shadow:0 6px 20px rgba(214,176,102,.22)}
body[data-skin="luxe"] .xc4f8-btn:hover{background:var(--color-cta-hover); transform:none}
body[data-skin="luxe"] .xc4f8-op-card,body[data-skin="luxe"] .pick{background:var(--color-bg-2);
  border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 40px rgba(0,0,0,.35)}
body[data-skin="luxe"] .xc4f8-op-card h3{color:var(--color-accent)}
body[data-skin="luxe"] .xc4f8-facts li span,body[data-skin="luxe"] .xc4f8-facts dt{color:var(--color-accent); opacity:.95}
body[data-skin="luxe"] .xc4f8-pros li::before{color:var(--color-accent)}
body[data-skin="luxe"] .xc4f8-table-wrap{border:1px solid var(--line); border-radius:16px}
body[data-skin="luxe"] table{border-radius:16px}
body[data-skin="luxe"] th{background:rgba(226,192,122,.1); color:var(--color-accent); font-family:var(--font-head);
  letter-spacing:.03em}
body[data-skin="luxe"] th,body[data-skin="luxe"] td{border-bottom:1px solid var(--line)}
body[data-skin="luxe"] .xc4f8-topic-points>*{background:var(--color-bg-2); border:1px solid var(--line); border-radius:14px}
body[data-skin="luxe"] .xc4f8-criteria>*::before{background:none; border:1px solid var(--color-accent);
  color:var(--color-accent); font-family:var(--font-head)}
body[data-skin="luxe"] .xc4f8-checklist li::before{color:var(--color-accent)}
body[data-skin="luxe"] .xc4f8-glossary dt,body[data-skin="luxe"] .xc4f8-glossary dfn{color:var(--color-accent); font-family:var(--font-head)}
body[data-skin="luxe"] .xc4f8-faq{max-width:860px}
body[data-skin="luxe"] .xc4f8-faq-item{background:none; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:1.05rem .2rem}
body[data-skin="luxe"] .xc4f8-faq-item>summary{font-family:var(--font-head); font-size:1.12rem; color:var(--color-text)}
body[data-skin="luxe"] .xc4f8-faq-item>summary::after{color:var(--color-accent); opacity:1}
body[data-skin="luxe"] .xc4f8-site-footer{background:var(--ink-dark); border-top:1px solid var(--line)}


#nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; }
.xc4f8-nav-burger { display: none; }
@media (min-width: 721px) {
  
  .xc4f8-site-header .xc4f8-container { flex-wrap: nowrap; }
  .xc4f8-nav { flex-wrap: nowrap; min-width: 0; }
  .xc4f8-nav a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
           max-width: 24ch; }
}
@media (max-width: 720px) {
  .xc4f8-site-header .xc4f8-container { position: relative; flex-wrap: nowrap; }
  
  .xc4f8-nav-burger { display: flex; flex-direction: column; justify-content: center;
                align-items: center; width: 44px; height: 44px;
                cursor: pointer; flex: 0 0 auto; color: var(--color-text, #fff); }
  .xc4f8-nav-burger::before, .xc4f8-nav-burger::after {
    content: ""; display: block; width: 22px; height: 2px; border-radius: 2px;
    background: currentColor; transition: transform .2s; }
  .xc4f8-nav-burger::before { box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor; }
  .xc4f8-nav-burger::after { display: none; }
  #nav-toggle:checked ~ .xc4f8-nav-burger::before { box-shadow: none;
    transform: rotate(45deg) translateY(1px); }
  #nav-toggle:checked ~ .xc4f8-nav-burger::after { display: block; margin-top: -2px;
    transform: rotate(-45deg) translateY(-1px); }
  
  #nav-toggle:checked ~ .xc4f8-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    background: var(--color-bg-2, var(--color-bg, #111));
    padding: 4px 22px 14px; box-shadow: 0 14px 28px rgba(0,0,0,.45);
  }
  #nav-toggle:checked ~ .xc4f8-nav a { padding: 13px 0; max-width: none;
    border-bottom: 1px solid rgba(255,255,255,.09); }
}
#hero, section#hero, .xc4f8-hero, .hero-section, [id*="hero"]:not([id^="t-"]) { background-image: linear-gradient(180deg, rgba(10,12,24,.20) 0%, rgba(10,12,24,.45) 55%, rgba(10,12,24,.72) 100%), url('../images/hero.jpg?v=10f32168') !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; }
#bonus, section#bonus, .bonus-section, [id*="bonus"]:not([id^="t-"]) { background-image: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('../images/bonus_bg.jpg?v=45329ab2') !important; background-size: cover !important; background-position: center !important; }
img[src*="hero"], img[src*="bonus_bg"], img.hero-image, img.bonus-banner { width: 100% !important; height: auto !important; max-height: 60vh !important; aspect-ratio: 16 / 9 !important; object-fit: cover !important; display: block !important; }