/* ==========================================================================
   spindjinn-pl — SpinDjinn Casino Polska. Family: HUB DECK (templates/hub-deck).
   Palette = the client pack's own tokens (metadata/manifest.json «palette», 12.10.2026):
   ground #1A0F2E · panel #2A1245 · purple #6B21A8 (FILL only, white ink) · gold #F5C518 (text accent)
   · CTA yellow #FFC53D with plum ink #241034 · teal #2DD4BF (second accent: ticket, «ok» cards).
   Locks: one action colour (yellow CTA), radius scale pill buttons / 18 cards / 12 small, dark only.
   Fonts: Righteous (display) + Urbanist (body) — neither used elsewhere in the fleet.
   theme.css = this file + _build/hubdeck-shell.css, assembled by build.py.
   ========================================================================== */
:root {
  --mp-bg: #1a0f2e; --mp-bg-1: #21133a; --mp-bg-2: #2a1245; --mp-bg-3: #3a1a5e;
  --mp-bg-card: #22143b; --mp-bg-card-2: #2a1748;
  --mp-ink: #ffffff; --mp-ink-2: #e6dcf3; --mp-ink-3: #bcaed2; --mp-ink-mute: #a898c0;
  --mp-border: rgba(245,197,24,0.16); --mp-border-strong: rgba(245,197,24,0.38);

  --mp-brand: #f5c518; --mp-brand-deep: #6b21a8; --mp-brand-dark: #4c1679;
  --mp-brand-light: #ffe27a; --mp-brand-glow: rgba(245,197,24,0.28); --mp-brand-ink: #241034;
  --mp-gold: #ffc53d; --mp-gold-hi: #f5c518; --mp-gold-ink: #241034;
  --mp-grad-cta: linear-gradient(180deg, #ffe071 0%, #ffc53d 100%);
  --mp-leaf: #2dd4bf; --mp-rose: #f472b6;

  --mp-font-body: 'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mp-font-display: 'Righteous', 'Urbanist', system-ui, sans-serif;
  --mp-font-mono: 'Urbanist', system-ui, sans-serif;

  --mp-t-display: clamp(2rem, 3.4vw + .6rem, 2.9rem);
  --mp-t-h1: clamp(1.9rem, 3vw + .5rem, 2.6rem);
  --mp-t-h2: clamp(1.5rem, 1.6vw + .8rem, 1.9rem);
  --mp-t-h3: 1.15rem; --mp-t-body: 1.0625rem; --mp-t-sm: .975rem; --mp-t-xs: .8125rem;

  --mp-s-1: 4px; --mp-s-2: 8px; --mp-s-3: 12px; --mp-s-4: 16px; --mp-s-5: 24px;
  --mp-s-6: 32px; --mp-s-7: 52px; --mp-s-8: 72px;
  --mp-max-w: 1200px; --mp-radius: 12px; --mp-radius-lg: 18px; --mp-radius-xl: 26px; --mp-radius-pill: 999px;
  --mp-shadow: 0 6px 24px rgba(8,2,20,.5); --mp-shadow-lg: 0 18px 50px rgba(8,2,20,.6);
  --mp-t-anim: 180ms cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; color: var(--mp-ink); font-family: var(--mp-font-body); font-size: var(--mp-t-body);
  line-height: 1.62; -webkit-font-smoothing: antialiased; font-weight: 500;
  background: var(--mp-bg) radial-gradient(1200px 600px at 85% -10%, rgba(107,33,168,.45), transparent 60%) no-repeat; }
img, svg { max-width: 100%; display: block; }
a { color: var(--mp-brand); text-decoration: underline; text-decoration-color: rgba(245,197,24,.4);
  text-underline-offset: 3px; transition: color var(--mp-t-anim); }
a:hover { color: var(--mp-brand-light); }
:focus-visible { outline: 2px solid var(--mp-leaf); outline-offset: 2px; }
h1, h2, h3, h4 { font-family: var(--mp-font-display); font-weight: 400; margin: 0; line-height: 1.15;
  letter-spacing: .005em; color: var(--mp-ink); }
h3 { font-family: var(--mp-font-body); font-weight: 800; letter-spacing: 0; }
h1 { font-size: var(--mp-t-h1); } h2 { font-size: var(--mp-t-h2); } h3 { font-size: var(--mp-t-h3); }
p { margin: 0 0 var(--mp-s-4); color: var(--mp-ink-2); }
strong, b { color: var(--mp-ink); font-weight: 800; }
ul, ol { color: var(--mp-ink-2); padding-left: 1.2em; }
li { margin: 5px 0; }
li::marker { color: var(--mp-gold-hi); }
table { border-collapse: collapse; }
.mp-table-wrap { overflow-x: auto; margin: var(--mp-s-4) 0; -webkit-overflow-scrolling: touch; }
.mp-table { width: 100%; min-width: 520px; font-size: var(--mp-t-sm); background: var(--mp-bg-card);
  border: 1px solid var(--mp-border); border-radius: var(--mp-radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.mp-table caption { text-align: left; color: var(--mp-ink-3); font-size: var(--mp-t-xs); padding: 0 14px 8px; }
.mp-table th, .mp-table td { padding: 11px 14px; border-bottom: 1px solid var(--mp-border); text-align: left;
  color: var(--mp-ink-2); vertical-align: top; }
.mp-table thead th { background: var(--mp-bg-2); color: var(--mp-gold-hi); font-size: var(--mp-t-xs);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.mp-table tbody tr:last-child td { border-bottom: 0; }
.mp-table td:first-child { color: var(--mp-ink); font-weight: 700; }
.mp-skip-link { position: absolute; left: -9999px; }
.mp-skip-link:focus { left: 8px; top: 8px; z-index: 99; background: var(--mp-gold); color: var(--mp-gold-ink);
  padding: 8px 14px; border-radius: 8px; }


/* ==== HUB DECK shell (templates/hub-deck/shell.css) ==== */
/*
Hub deck — четверта layout-родина. Префікс `mp-hd-*`. Підключати ПІСЛЯ theme.css ленда.

Це каркас під БАГАТОСТОРІНКОВИЙ сайт (hub-and-spoke), а не під одностраничник:
двоярусна шапка з повним меню → хлібні крихти → герой із «квитком» оферу → колода карток
розділів → стаття з липким змістом праворуч → липка смуга CTA.

LOBBY і SIDEBAR — оболонки одностраничника: там уся навігація це якорі. Тут навігація веде на
18 окремих URL, тож меню, крихти й перелінковка — головні елементи, а не додаток.

Усе кольорове — через токени ленда (--mp-*) плюс вісім --hd-* нижче.
*/

:root {
  --hd-brand:       var(--mp-brand);        /* акцент: крихти, номери, підкреслення */
  --hd-brand-deep:  var(--mp-brand-deep);
  --hd-brand-ink:   var(--mp-brand-ink);    /* текст НА акценті */
  --hd-second:      var(--mp-leaf);         /* другий акцент: квиток, «нове» */
  --hd-surface:     var(--mp-bg-card);
  --hd-line:        var(--mp-border);
  --hd-top-h:       56px;
  --hd-rail:        260px;                  /* ширина колонки змісту */
}

/* ==========================================================================
   1. ШАПКА — два яруси: марка/мова/CTA зверху, повне меню знизу
   ========================================================================== */
.mp-hd-top { position: sticky; top: 0; z-index: 60; background: var(--mp-bg-1); border-bottom: 1px solid var(--hd-line); }
.mp-hd-bar {
  max-width: var(--mp-max-w); margin: 0 auto; padding: 8px var(--mp-s-4);
  display: flex; align-items: center; gap: var(--mp-s-4); min-height: var(--hd-top-h);
}
.mp-hd-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mp-hd-logo img { height: 30px; width: auto; }
.mp-hd-logo b { font-family: var(--mp-font-display); font-size: 1.05rem; color: var(--mp-ink); white-space: nowrap; }
.mp-hd-lang { display: flex; gap: 4px; margin-left: auto; flex-shrink: 0; }
.mp-hd-lang a {
  font-size: var(--mp-t-xs); font-weight: 700; letter-spacing: .04em; padding: 6px 10px;
  border: 1px solid var(--hd-line); border-radius: var(--mp-radius); color: var(--mp-ink-3);
}
.mp-hd-lang a.is-on { background: var(--hd-brand); color: var(--hd-brand-ink); border-color: transparent; }

/* Меню: РЯДКИ, які переносяться, а не горизонтальний скрол — на 18 розділів рейка
   ховає половину пунктів за краєм екрана, і користувач їх просто не бачить. */
.mp-hd-menu { border-top: 1px solid var(--hd-line); background: var(--mp-bg); }
.mp-hd-menu-in {
  max-width: var(--mp-max-w); margin: 0 auto; padding: 6px var(--mp-s-4) 8px;
  display: flex; flex-wrap: wrap; gap: 2px 4px;
}
.mp-hd-menu a {
  padding: 7px 10px; border-radius: var(--mp-radius); font-size: var(--mp-t-sm);
  color: var(--mp-ink-2); white-space: nowrap;
}
.mp-hd-menu a:hover { background: var(--mp-bg-2); color: var(--mp-ink); }
.mp-hd-menu a[aria-current] { color: var(--hd-brand); font-weight: 700; }
.mp-hd-cta-top { flex-shrink: 0; }

@media (max-width: 900px) {
  /* En el teléfono el menú completo ocupaba 212px de alto (18 enlaces en cinco filas) y, al ser
     pegajoso, se comía un tercio de la pantalla de forma permanente. Acá pasa a una sola fila
     con desplazamiento horizontal: sí, esconde parte de los enlaces fuera del borde, pero es
     preferible a una barra fija que tapa el contenido en cada scroll. En escritorio se mantiene
     el menú completo a la vista, que es donde de verdad sirve. */
  .mp-hd-menu-in {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .mp-hd-menu-in::-webkit-scrollbar { display: none; }
  .mp-hd-menu-in a { flex: 0 0 auto; scroll-snap-align: start; }
}

/* ==========================================================================
   2. КРИХТИ
   ========================================================================== */
.mp-hd-crumbs {
  max-width: var(--mp-max-w); margin: 0 auto; padding: 12px var(--mp-s-4) 0;
  font-size: var(--mp-t-xs); color: var(--mp-ink-3);
  display: flex; flex-wrap: wrap; gap: 6px; list-style: none;
}
.mp-hd-crumbs li { display: flex; gap: 6px; align-items: center; }
.mp-hd-crumbs li + li::before { content: "›"; color: var(--mp-ink-mute); }
.mp-hd-crumbs a { color: var(--mp-ink-3); }
.mp-hd-crumbs a:hover { color: var(--hd-brand); }

/* ==========================================================================
   3. ГЕРОЙ + КВИТОК ОФЕРУ
   Квиток — підпис родини: вирізи по боках роблять радіальні градієнти
   у `background`, а не картинка й не clip-path (clip-path з'їдає тінь).
   ========================================================================== */
.mp-hd-hero { max-width: var(--mp-max-w); margin: 0 auto; padding: var(--mp-s-5) var(--mp-s-4) var(--mp-s-6); }
.mp-hd-hero-in { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); gap: var(--mp-s-6); align-items: center; }
.mp-hd-hero h1 { font-size: var(--mp-t-display); margin-bottom: var(--mp-s-3); }
.mp-hd-hero p { color: var(--mp-ink-2); max-width: 60ch; }

.mp-hd-ticket {
  position: relative; padding: 22px 24px; border-radius: 14px;
  background:
    radial-gradient(12px at 0 50%, transparent 98%, var(--hd-surface) 100%),
    radial-gradient(12px at 100% 50%, transparent 98%, var(--hd-surface) 100%),
    linear-gradient(160deg, var(--mp-bg-2), var(--hd-surface));
  border: 1px solid var(--hd-second);
  box-shadow: var(--mp-shadow-lg);
}
.mp-hd-ticket-k { font-family: var(--mp-font-mono); font-size: var(--mp-t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--hd-second); margin: 0 0 6px; }
.mp-hd-ticket-h { font-family: var(--mp-font-display); font-weight: 800; font-size: 1.6rem; color: var(--mp-ink); margin: 0 0 6px; line-height: 1.1; }
.mp-hd-ticket-p { font-size: var(--mp-t-sm); color: var(--mp-ink-2); margin: 0 0 16px; }
.mp-hd-ticket-cut { border-top: 1px dashed var(--hd-line); margin: 0 -24px 16px; }

.mp-hd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; font-weight: 800; font-size: var(--mp-t-sm); border-radius: 10px;
  color: var(--hd-brand-ink); background: var(--hd-brand); border: 0;
}
.mp-hd-btn:hover { color: var(--hd-brand-ink); background: var(--hd-brand-deep); }
.mp-hd-btn--wide { width: 100%; }
.mp-hd-btn--ghost { background: none; color: var(--mp-ink); border: 1px solid var(--mp-border-strong); }
.mp-hd-btn--ghost:hover { background: var(--mp-bg-2); color: var(--mp-ink); }

@media (max-width: 900px) { .mp-hd-hero-in { grid-template-columns: 1fr; } }

/* ==========================================================================
   4. КОЛОДА — картки розділів із великим номером (hub → spokes)
   ========================================================================== */
.mp-hd-deck { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: var(--mp-s-5) 0; }
@media (max-width: 900px) { .mp-hd-deck { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mp-hd-deck { grid-template-columns: 1fr; } }
.mp-hd-card {
  position: relative; overflow: hidden; display: block; padding: 18px 18px 16px;
  background: var(--hd-surface); border: 1px solid var(--hd-line); border-radius: 14px;
  transition: border-color var(--mp-t-anim), transform var(--mp-t-anim);
}
.mp-hd-card:hover { border-color: var(--hd-brand); transform: translateY(-2px); }
/* Номер картки: щільний чип, а не велика обведена цифра.
   Обведена цифра 3.2rem у кутку картки з `overflow:hidden` зрізалася зверху, налазила на
   заголовок і при `color:transparent` не мала контрасту взагалі. Чип читається, не ріжеться
   і не конкурує з текстом. */
.mp-hd-card-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin-bottom: 10px; border-radius: 8px;
  background: var(--hd-brand); color: var(--hd-brand-ink);
  font-family: var(--mp-font-mono); font-size: .75rem; font-weight: 700; line-height: 1;
}
.mp-hd-card h3 { font-size: 1.05rem; margin: 0 0 6px; color: var(--mp-ink); }
.mp-hd-card p { font-size: var(--mp-t-sm); color: var(--mp-ink-2); margin: 0; }
.mp-hd-card-go { display: inline-block; margin-top: 10px; font-size: var(--mp-t-sm); font-weight: 700; color: var(--hd-brand); }

/* ==========================================================================
   5. СТАТТЯ + ЛИПКИЙ ЗМІСТ ПРАВОРУЧ
   ========================================================================== */
.mp-hd-wrap { max-width: var(--mp-max-w); margin: 0 auto; padding: 0 var(--mp-s-4) var(--mp-s-7); }
.mp-hd-layout { display: grid; grid-template-columns: minmax(0,1fr) var(--hd-rail); gap: var(--mp-s-6); align-items: start; }
.mp-hd-body { min-width: 0; }
.mp-hd-body > h2 { margin: var(--mp-s-7) 0 var(--mp-s-3); scroll-margin-top: calc(var(--hd-top-h) + 60px); }
.mp-hd-body > h3 { margin: var(--mp-s-5) 0 var(--mp-s-2); scroll-margin-top: calc(var(--hd-top-h) + 60px); }
.mp-hd-body > p, .mp-hd-body > ul, .mp-hd-body > ol { max-width: 72ch; }

.mp-hd-toc { position: sticky; top: calc(var(--hd-top-h) + 60px); }
.mp-hd-toc-in { background: var(--hd-surface); border: 1px solid var(--hd-line); border-radius: 14px; padding: 16px; }
.mp-hd-toc h4 { font-size: var(--mp-t-xs); text-transform: uppercase; letter-spacing: .1em; font-family: var(--mp-font-mono); color: var(--mp-ink-3); margin: 0 0 10px; }
.mp-hd-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; counter-reset: toc; }
.mp-hd-toc li { counter-increment: toc; }
.mp-hd-toc a { font-size: var(--mp-t-sm); color: var(--mp-ink-2); display: flex; gap: 8px; }
.mp-hd-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--mp-font-mono); font-size: .75rem; color: var(--hd-brand); }
.mp-hd-toc a:hover { color: var(--mp-ink); }

@media (max-width: 1000px) {
  .mp-hd-layout { grid-template-columns: 1fr; }
  /* Зміст на телефоні їде НАГОРУ і згортається: липка колонка під статтею
     нікому не потрібна, а перед текстом він працює як навігація по сторінці. */
  .mp-hd-toc { position: static; order: -1; }
  .mp-hd-toc-in { padding: 12px 14px; }
  .mp-hd-toc ol { grid-template-columns: 1fr 1fr; display: grid; }
}
@media (max-width: 520px) { .mp-hd-toc ol { grid-template-columns: 1fr; } }

/* ==========================================================================
   6. БЛОКИ ВСЕРЕДИНІ СТАТТІ
   ========================================================================== */
.mp-hd-note {
  border-left: 3px solid var(--hd-second); background: var(--mp-bg-1);
  padding: 14px 16px; border-radius: 0 12px 12px 0; margin: var(--mp-s-4) 0;
}
.mp-hd-note p:last-child { margin-bottom: 0; }
.mp-hd-note b { color: var(--hd-second); }

.mp-hd-steps { list-style: none; counter-reset: st; padding: 0; margin: var(--mp-s-4) 0; display: grid; gap: 10px; }
.mp-hd-steps li { counter-increment: st; position: relative; padding: 12px 14px 12px 50px; background: var(--hd-surface); border: 1px solid var(--hd-line); border-radius: 12px; color: var(--mp-ink-2); }
.mp-hd-steps li::before {
  content: counter(st); position: absolute; left: 14px; top: 12px; width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 7px;
  background: var(--hd-brand); color: var(--hd-brand-ink);
  font-family: var(--mp-font-display); font-weight: 800; font-size: .8125rem;
}

/* Плитки ігор: обкладинки з пакета оператора — різні пропорції, тому фіксуємо рамку */
.mp-hd-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: var(--mp-s-4) 0; }
@media (max-width: 860px) { .mp-hd-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .mp-hd-tiles { grid-template-columns: repeat(2, 1fr); } }
.mp-hd-tile { display: block; border: 1px solid var(--hd-line); border-radius: 12px; overflow: hidden; background: var(--hd-surface); }
.mp-hd-tile img { width: 100%; height: 116px; object-fit: cover; display: block; }
.mp-hd-tile span { display: block; padding: 8px 10px 10px; font-size: .8125rem; color: var(--mp-ink-2); }
.mp-hd-tile:hover { border-color: var(--hd-brand); }

/* Ряд платіжних логотипів: біла плашка — галузева норма; світле мистецтво міряється
   в _build/media.py і отримує темну плашку, інакше воно зникає на білому. */
.mp-hd-pay { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--mp-s-4) 0; }
.mp-hd-pay img {
  height: 42px !important; width: auto !important; object-fit: contain;
  background: #ffffff; border-radius: 9px; padding: 7px 12px; border: 1px solid var(--hd-line);
}
.mp-hd-pay img.is-light-art { background: #16130c; border-color: var(--mp-border-strong); }

/* ==========================================================================
   7. ЛИПКА СМУГА CTA + правові сторінки
   ========================================================================== */
.mp-hd-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: flex; align-items: center; gap: var(--mp-s-4); padding: 9px var(--mp-s-4);
  background: color-mix(in srgb, var(--mp-bg-1) 95%, transparent);
  backdrop-filter: blur(10px); border-top: 1px solid var(--hd-second);
}
.mp-hd-sticky p { margin: 0; font-size: var(--mp-t-sm); color: var(--mp-ink-2); }
.mp-hd-sticky b { color: var(--mp-ink); }
.mp-hd-sticky .mp-hd-btn { margin-left: auto; flex-shrink: 0; }
body:has(.mp-hd-sticky) { padding-bottom: 68px; }
@media (max-width: 560px) { .mp-hd-sticky p { font-size: var(--mp-t-xs); } }

/* Правило живе в РОДИНІ, а не в ленді: на sidebar-shell той самий недогляд відправив
   у продакшен живу кнопку «забрати бонус» на сторінці приватності (FIX-61). */
.mp-rg .mp-hd-sticky,
.mp-rg .mp-hd-cta-top,
.mp-rg .mp-hd-ticket { display: none !important; }
.mp-rg:has(.mp-hd-sticky) { padding-bottom: 0; }

/* ==========================================================================
   8. ПІДВАЛ, FAQ І ТИПОГРАФІЧНІ ДРІБНИЦІ
   Ці компоненти є на КОЖНІЙ сторінці ленда, але їх немає в базовому киті скіла — у флоті вони
   жили в theme.css кожного ленда окремо. Родина, зібрана з китa скіла, лишалася без них, і
   підвал виїжджав голими маркерами списку, а FAQ — стандартними трикутниками <details>.
   ========================================================================== */
.mp-foot { border-top: 1px solid var(--hd-line); background: var(--mp-bg-1); margin-top: var(--mp-s-7); }
.mp-foot .wrap { max-width: var(--mp-max-w); margin: 0 auto; padding: var(--mp-s-6) var(--mp-s-4); }
.mp-foot-top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--mp-s-5);
  padding-bottom: var(--mp-s-5); border-bottom: 1px solid var(--hd-line);
}
.mp-foot-top > div > p { font-size: var(--mp-t-sm); color: var(--mp-ink-3); margin: 8px 0 0; }
.mp-brand-line { font-family: var(--mp-font-display); font-size: 1.05rem; color: var(--mp-ink); }
.mp-brand-line:hover { color: var(--hd-brand); }
.mp-foot-col h4 {
  font-family: var(--mp-font-mono); font-size: var(--mp-t-xs); text-transform: uppercase;
  letter-spacing: .1em; color: var(--mp-ink-3); margin: 0 0 10px; font-weight: 700;
}
.mp-foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.mp-foot-col a { font-size: var(--mp-t-sm); color: var(--mp-ink-2); }
.mp-foot-col a:hover { color: var(--hd-brand); }
.mp-foot-disclaimer-box {
  display: grid; grid-template-columns: auto 1fr; gap: var(--mp-s-4); align-items: start;
  padding: var(--mp-s-5) 0; border-bottom: 1px solid var(--hd-line);
}
.mp-foot-disclaimer-box p { font-size: var(--mp-t-sm); color: var(--mp-ink-3); margin: 0; }
.mp-foot-disclaimer-box strong { color: var(--mp-ink-2); }
.mp-foot-age-mark {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--hd-second); color: var(--hd-second);
  font-family: var(--mp-font-display); font-weight: 800; font-size: .9375rem;
}
.mp-foot-bottom {
  display: grid; gap: 8px; padding-top: var(--mp-s-4);
  /* --mp-ink-mute daba 3,38:1 sobre el fondo del pie: por debajo de 4,5 para texto pequeño.
     Medido, no estimado. */
  font-size: var(--mp-t-xs); color: var(--mp-ink-3); line-height: 1.6;
}
@media (max-width: 860px) {
  .mp-foot-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .mp-foot-top { grid-template-columns: 1fr; }
}

/* FAQ на <details>: працює без JS і друкується розгорнутим */
.mp-faq {
  background: var(--hd-surface); border: 1px solid var(--hd-line);
  border-radius: 12px; overflow: hidden; margin-bottom: 10px;
}
.mp-faq > summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 15px 50px 15px 16px;
  font-family: var(--mp-font-display); font-weight: 700; font-size: 1.0313rem; color: var(--mp-ink);
}
.mp-faq > summary::-webkit-details-marker { display: none; }
.mp-faq > summary::after {
  content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 1.3rem; line-height: 1; color: var(--hd-brand);
}
.mp-faq[open] > summary::after { content: "−"; }
.mp-faq > div { padding: 0 16px 16px; color: var(--mp-ink-2); font-size: var(--mp-t-sm); }
.mp-faq > div > p:last-child { margin-bottom: 0; }
.mp-faq:hover { border-color: var(--mp-border-strong); }

/* Лід і подпись автора */
.mp-lead { font-size: 1.0625rem; color: var(--mp-ink-2); }
.mp-byline {
  font-family: var(--mp-font-mono); font-size: var(--mp-t-xs); color: var(--mp-ink-3);
  border-left: 2px solid var(--hd-brand); padding-left: 10px; margin-bottom: var(--mp-s-5);
}

@media (prefers-reduced-motion: reduce) { .mp-hd-card { transition: none; } }

/* --------------------------------------------------------------------------
   Палітри (8 токенів у :root ленда):
     золото+нефрит (altaficha-ar): --hd-brand #ffc536 · deep #e0a400 · second #12b886
     індиго+корал:                 --hd-brand #5b6cff · deep #3d4ae0 · second #ff7a66
     мідь+бірюза:                  --hd-brand #d97742 · deep #b45c2e · second #2bb3a3
   -------------------------------------------------------------------------- */

/* ---- SpinDjinn own blocks (prefix sd-) ------------------------------------ */
/* hub-deck tokens AFTER the shell's :root (which maps --hd-* to --mp-brand) */
:root { --hd-brand: #ffc53d; --hd-brand-deep: #ffd75e; --hd-brand-ink: #241034;
  --hd-second: #2dd4bf; --hd-surface: #22143b; --hd-line: rgba(245,197,24,0.16); --hd-top-h: 68px; --hd-rail: 250px; }

/* buttons: pill, yellow gradient, plum ink */
.mp-hd-btn { border-radius: var(--mp-radius-pill); background: var(--mp-grad-cta); color: var(--mp-gold-ink);
  font-family: var(--mp-font-body); font-weight: 800; font-size: 1rem; padding: 12px 24px; min-height: 46px;
  text-decoration: none; white-space: nowrap; box-shadow: 0 6px 18px rgba(255,197,61,.22); }
.mp-hd-btn:hover { background: #ffe071; color: var(--mp-gold-ink); }
.mp-hd-btn--ghost { background: rgba(255,255,255,.04); color: var(--mp-ink); border: 1px solid var(--mp-border-strong); box-shadow: none; }
.mp-hd-btn--ghost:hover { background: var(--mp-bg-3); color: var(--mp-ink); }
.mp-hd-btn[disabled] { opacity: .55; cursor: default; }
.sd-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--mp-s-4) 0; }

/* header: ONE row — logo · menu · two buttons; burger under 1000px */
.mp-hd-top { background: rgba(26,15,46,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hd-line); }
.mp-hd-bar { gap: 20px; min-height: var(--hd-top-h); max-width: var(--mp-max-w); }
.sd-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; }
.sd-logo img { width: 46px; height: auto; }
.sd-logo span { font-family: var(--mp-font-display); font-size: 1.5rem; line-height: 1; color: #d9a6ff;
  letter-spacing: .01em; }
.sd-logo span b { color: var(--mp-gold-hi); font-weight: 400; }
.sd-nav { display: flex; gap: 2px; margin-left: 8px; }
.sd-nav a { padding: 10px 12px; border-radius: var(--mp-radius); color: var(--mp-ink-2); text-decoration: none;
  font-weight: 700; font-size: .975rem; white-space: nowrap; }
.sd-nav a:hover { color: var(--mp-ink); background: var(--mp-bg-2); }
.sd-nav a[aria-current] { color: var(--mp-gold-hi); background: var(--mp-bg-2); }
.sd-top-btns { display: flex; gap: 8px; margin-left: auto; }
.sd-top-btns .mp-hd-btn { padding: 10px 18px; min-height: 44px; font-size: .95rem; }
.sd-menu-t { position: absolute; opacity: 0; pointer-events: none; }
.sd-burger { display: none; }
@media (max-width: 1060px) {
  .sd-burger { display: grid; place-items: center; width: 46px; height: 46px; margin-left: auto; order: 3;
    border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius); cursor: pointer; }
  .sd-burger span, .sd-burger span::before, .sd-burger span::after { display: block; width: 20px; height: 2px;
    background: var(--mp-ink); border-radius: 2px; position: relative; content: ""; }
  .sd-burger span::before { position: absolute; top: -6px; } .sd-burger span::after { position: absolute; top: 6px; }
  .sd-top-btns { order: 2; }
  .sd-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 10px 16px 16px;
    flex-direction: column; background: var(--mp-bg-1); border-bottom: 1px solid var(--hd-line); box-shadow: var(--mp-shadow-lg); }
  .sd-nav a { padding: 13px 12px; font-size: 1.05rem; }
  .sd-menu-t:checked ~ .sd-nav { display: flex; }
  .sd-menu-t:focus-visible ~ .sd-burger { outline: 2px solid var(--mp-leaf); }
}
@media (max-width: 560px) {
  .mp-hd-bar { gap: 10px; padding: 8px 12px; }
  .sd-logo img { width: 38px; } .sd-logo span { font-size: 1.25rem; }
  .sd-top-btns .mp-hd-btn--ghost { display: none; }
  .sd-top-btns .mp-hd-btn { padding: 9px 14px; font-size: .9rem; }
}
@media (max-width: 360px) { .sd-logo span { display: none; } }

.mp-hd-crumbs { padding-top: 16px; font-size: var(--mp-t-xs); }
.mp-hd-crumbs a { text-decoration: none; }

/* hero */
.sd-hero { position: relative; background: url(/assets/tlo/fiolet-zloto.webp) center/cover no-repeat; border-bottom: 1px solid var(--hd-line); }
.sd-hero-in { max-width: var(--mp-max-w); margin: 0 auto; padding: var(--mp-s-6) var(--mp-s-4) var(--mp-s-6); }
.sd-hero h1 { font-size: var(--mp-t-display); margin: 0 0 var(--mp-s-3); }
.sd-hero .mp-lead { font-size: 1.15rem; max-width: 62ch; color: var(--mp-ink-2); }
.sd-hero-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(260px,.75fr); gap: var(--mp-s-6); align-items: center; }
.sd-hero-art img { width: 100%; max-width: 380px; height: auto; margin: 0 auto; filter: drop-shadow(0 18px 40px rgba(245,197,24,.18)); }
.sd-hero--legal { background: var(--mp-bg-1); }
.sd-hero--legal .sd-hero-grid { grid-template-columns: 1fr; }
.sd-updated { font-size: var(--mp-t-xs); color: var(--mp-ink-3); margin: 0; }
.mp-hd-crumbs + .sd-hero { margin-top: -30px; padding-top: 30px; }
@media (max-width: 900px) {
  .sd-hero-grid { grid-template-columns: 1fr; gap: var(--mp-s-4); }
  .sd-hero-art img { max-width: 220px; }
  .sd-hero-in { padding: var(--mp-s-5) var(--mp-s-4); }
}

/* home hero: H1 + lead, then the slider (brief: hero slider, offer + chest) */
.sd-hero--home .sd-hero-in { padding-bottom: var(--mp-s-5); }
.sd-hero--home h1 { margin-bottom: 6px; }
.sd-hero--home .mp-lead { margin-bottom: var(--mp-s-4); }
.sd-slider { position: relative; margin: 0 0 12px; }
.sd-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: var(--mp-radius-xl); border: 1px solid var(--mp-border-strong); box-shadow: var(--mp-shadow-lg); }
.sd-slides::-webkit-scrollbar { display: none; }
.sd-slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  align-items: center; gap: 12px; padding: 30px 40px; min-height: 330px;
  background: radial-gradient(500px 300px at 78% 55%, rgba(245,197,24,.22), transparent 70%),
              linear-gradient(120deg, #2a1245 0%, #3a1a5e 60%, #4c1679 100%); }
.sd-slide-k { font-weight: 800; font-size: var(--mp-t-sm); color: var(--mp-leaf); margin: 0 0 6px; letter-spacing: .02em; }
.sd-slide-h { font-family: var(--mp-font-display); font-size: clamp(1.9rem, 3.4vw + .4rem, 3.1rem); line-height: 1.05;
  color: var(--mp-gold-hi); margin: 0 0 10px; }
.sd-slide-p { color: var(--mp-ink-2); margin: 0 0 18px; max-width: 46ch; }
.sd-slide-art img { width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.sd-dots { display: flex; justify-content: center; gap: 4px; margin-top: 8px; }
.sd-dots a { width: 44px; height: 24px; display: grid; place-items: center; }
.sd-dots a::before { content: ""; width: 26px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.25); }
.sd-dots a[aria-current="true"]::before { background: var(--mp-gold-hi); }
@media (max-width: 700px) {
  .sd-slide { grid-template-columns: 1fr; padding: 22px 20px 24px; min-height: 0; gap: 0; }
  .sd-slide-art { order: -1; } .sd-slide-art img { max-width: 130px; margin-bottom: 4px; }
  /* first CTA inside 375x812: the lead goes UNDER the slider on phones (design-taste §3) */
  .sd-hero--home .sd-hero-in { display: flex; flex-direction: column; padding-top: 18px; }
  .sd-hero--home .sd-slider { order: 1; } .sd-hero--home .mp-lead { order: 2; margin: 14px 0 6px; font-size: 1.05rem; }
  .sd-hero--home .sd-updated { order: 3; }
  .sd-slide .mp-hd-btn { width: 100%; }
}

/* ticket (bonusy) */
.mp-hd-ticket { border-radius: var(--mp-radius-lg); border-color: var(--mp-leaf); }
.sd-hero .mp-hd-ticket-k { color: var(--mp-leaf); font-family: var(--mp-font-body); font-weight: 800; letter-spacing: .08em; }
.sd-hero .mp-hd-ticket-h { font-family: var(--mp-font-display); font-weight: 400; color: var(--mp-gold-hi); font-size: 2.2rem; }
.sd-hero .mp-hd-ticket-p { color: var(--mp-ink-2); }

/* deck + related */
.mp-hd-card { border-radius: var(--mp-radius-lg); text-decoration: none; background: linear-gradient(160deg, var(--mp-bg-card-2), var(--mp-bg-card)); }
.mp-hd-card h3 { font-size: 1.1rem; }
.mp-hd-card-n { border-radius: 50%; background: var(--mp-brand-deep); color: #fff; }
.mp-hd-card-go { color: var(--mp-gold-hi); }
.sd-deck--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .sd-deck--2 { grid-template-columns: 1fr; } }

/* article */
.mp-hd-wrap { padding-top: var(--mp-s-5); }
.mp-hd-body > h2:first-child { margin-top: var(--mp-s-3); }
.sd-narrow { max-width: 820px; }
.mp-hd-toc-in { border-radius: var(--mp-radius-lg); }
.mp-hd-toc h4 { font-family: var(--mp-font-body); font-weight: 800; }
.mp-hd-toc a { text-decoration: none; }
.mp-hd-toc a::before { color: var(--mp-gold-hi); font-weight: 800; }
.mp-hd-steps li { border-radius: 14px; }
.mp-hd-steps li::before { border-radius: 50%; background: var(--mp-gold); color: var(--mp-gold-ink); font-family: var(--mp-font-body); }
.mp-hd-note { border-left-color: var(--mp-leaf); border-radius: 0 var(--mp-radius) var(--mp-radius) 0; }
.mp-hd-note b, .mp-hd-note strong { color: var(--mp-leaf); }
.mp-hd-body h3 { margin: var(--mp-s-5) 0 var(--mp-s-2); }

/* offer card = every in-body CTA (house rule 15) */
.sd-offer { position: relative; margin: var(--mp-s-6) 0 var(--mp-s-5); padding: 24px 24px 22px; border-radius: var(--mp-radius-lg);
  background: linear-gradient(160deg, var(--mp-bg-2), var(--mp-bg-card)); border: 1px solid var(--mp-border-strong);
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px 24px; align-items: center; }
.sd-offer::before { content: attr(data-badge); position: absolute; top: -12px; left: 20px; padding: 4px 12px;
  border-radius: var(--mp-radius-pill); background: var(--mp-brand-deep); color: #fff; font-size: var(--mp-t-xs);
  font-weight: 800; letter-spacing: .04em; }
.mp-hd-body .sd-offer-h { font-family: var(--mp-font-display); font-size: 1.6rem; line-height: 1.12; color: var(--mp-gold-hi); margin: 2px 0 4px; }
.mp-hd-body .sd-offer-p { margin: 0; font-size: var(--mp-t-sm); color: var(--mp-ink-2); }
.sd-offer .mp-hd-btn { padding: 15px 28px; font-size: 1.05rem; }
.sd-offer--spot { border-color: var(--mp-gold-hi);
  background: radial-gradient(420px 200px at 100% 0%, rgba(245,197,24,.22), transparent 70%),
              linear-gradient(135deg, #3a1a5e, #22143b); box-shadow: 0 0 40px var(--mp-brand-glow); }
.mp-hd-body .sd-offer--spot .sd-offer-h { font-size: 2.05rem; }
@media (max-width: 640px) { .sd-offer { grid-template-columns: 1fr; } .sd-offer .mp-hd-btn { width: 100%; } }

/* category rail + game covers (titles are baked into the art: no caption plate) */
.sd-cats { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin: var(--mp-s-4) 0; }
.sd-cat { display: grid; justify-items: center; gap: 6px; padding: 10px 4px 9px; border-radius: var(--mp-radius);
  background: var(--mp-bg-card); border: 1px solid var(--mp-border); text-decoration: none; color: var(--mp-ink-2);
  font-weight: 700; font-size: .875rem; min-height: 44px; }
.sd-cat img { width: 34px; height: 34px; }
.sd-cat:hover { border-color: var(--mp-gold-hi); color: var(--mp-ink); }
@media (max-width: 760px) { .sd-cats { grid-template-columns: repeat(4, 1fr); } }
.sd-games { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: var(--mp-s-4) 0; }
.sd-games--4, .sd-games--8 { grid-template-columns: repeat(4, 1fr); }
.sd-game { display: block; border-radius: 14px; overflow: hidden; transition: transform var(--mp-t-anim), box-shadow var(--mp-t-anim); }
.sd-game img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; }
.sd-game:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(245,197,24,.2); }
@media (max-width: 1000px) { .sd-games, .sd-games--8 { grid-template-columns: repeat(4, 1fr); } .sd-games--6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .sd-games { grid-template-columns: repeat(3, 1fr); } .sd-games--4, .sd-games--8 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .sd-games { grid-template-columns: repeat(2, 1fr); } }

/* Koło Fortuny widget */
.sd-wheel { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 24px; align-items: center; margin: var(--mp-s-5) 0;
  padding: 22px; border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border-strong);
  background: radial-gradient(300px 220px at 15% 50%, rgba(45,212,191,.16), transparent 70%), var(--mp-bg-card); }
.sd-wheel-art { position: relative; }
.sd-wheel-art img { width: 100%; height: auto; transition: transform 3.2s cubic-bezier(.15,.85,.25,1); }
.sd-wheel-pin { position: absolute; top: -6px; left: 50%; width: 0; height: 0; transform: translateX(-50%);
  border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 20px solid var(--mp-leaf); }
.mp-hd-body .sd-wheel-h { font-family: var(--mp-font-display); font-size: 1.6rem; color: var(--mp-gold-hi); margin: 0 0 6px; }
.mp-hd-body .sd-wheel-p { margin: 0 0 14px; }
.sd-wheel-go[hidden], .sd-wheel button[hidden] { display: none; }
.sd-wheel-go { margin: 0; }
@media (max-width: 640px) { .sd-wheel { grid-template-columns: 1fr; text-align: center; } .sd-wheel-art { max-width: 200px; margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .sd-wheel-art img, .sd-game { transition: none; } }

/* payments: white plates — the one light device on a dark page (logo shelf) */
.sd-pay { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; list-style: none; padding: 0; margin: var(--mp-s-4) 0; }
.sd-pay li { margin: 0; height: 52px; display: grid; place-items: center; padding: 8px 10px; border-radius: var(--mp-radius); background: #fff; }
.sd-pay img { height: 28px; width: auto; max-width: 100%; object-fit: contain; }
.sd-pay-txt span { font-weight: 800; color: #241034; font-size: .95rem; }
@media (max-width: 760px) { .sd-pay { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 420px) { .sd-pay { grid-template-columns: repeat(3, 1fr); } }

/* screenshots from the pack */
.sd-shot { margin: var(--mp-s-4) 0; }
.sd-shot img { width: 100%; height: auto; border-radius: var(--mp-radius-lg); border: 1px solid var(--mp-border); }
.sd-shot figcaption { font-size: var(--mp-t-xs); color: var(--mp-ink-3); margin-top: 6px; }

/* fact cards */
.sd-grid { display: grid; gap: 12px; margin: var(--mp-s-4) 0; padding: 0; list-style: none; }
.sd-grid--2 { grid-template-columns: repeat(2, 1fr); } .sd-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sd-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .sd-grid--3, .sd-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sd-grid--2, .sd-grid--3, .sd-grid--4 { grid-template-columns: 1fr; } }
.sd-grid li { margin: 0; padding: 16px 18px; background: var(--mp-bg-card); border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius-lg); font-size: var(--mp-t-sm); color: var(--mp-ink-2); }
.sd-grid li b { display: block; color: var(--mp-gold-hi); font-size: 1.15rem; margin-bottom: 4px; }
.sd-grid li .sd-k { display: block; color: var(--mp-leaf); font-size: var(--mp-t-xs); font-weight: 800; margin-bottom: 4px; }

/* two contrasting cards */
.sd-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: var(--mp-s-4) 0; }
.sd-duo > div { padding: 16px 18px; border-radius: var(--mp-radius-lg); background: var(--mp-bg-card); border: 1px solid var(--mp-border); }
.sd-duo h3 { margin: 0 0 8px; font-size: 1.05rem; }
.sd-duo-ok { border-top: 3px solid var(--mp-leaf) !important; } .sd-duo-ok h3 { color: var(--mp-leaf); }
.sd-duo-no { border-top: 3px solid var(--mp-rose) !important; } .sd-duo-no h3 { color: var(--mp-rose); }
.sd-duo p:last-child, .sd-duo ul:last-child { margin-bottom: 0; }
@media (max-width: 600px) { .sd-duo { grid-template-columns: 1fr; } }

/* VIP ladder: the lamp glows brighter with each level */
.sd-ladder { list-style: none; counter-reset: lv; padding: 0; margin: var(--mp-s-4) 0; display: grid; gap: 8px; }
.sd-ladder li { counter-increment: lv; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 4px 14px; align-items: center;
  margin: 0; padding: 12px 16px; border-radius: 14px; background: var(--mp-bg-card); border: 1px solid var(--mp-border); }
.sd-ladder li::before { content: counter(lv); grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mp-font-display); font-size: 1.2rem; color: var(--mp-gold-ink); background: var(--mp-gold); }
.sd-ladder li:nth-child(1)::before { box-shadow: 0 0 4px rgba(245,197,24,.2); background: #c9a227; }
.sd-ladder li:nth-child(2)::before { box-shadow: 0 0 10px rgba(245,197,24,.35); background: #dcb22a; }
.sd-ladder li:nth-child(3)::before { box-shadow: 0 0 16px rgba(245,197,24,.5); }
.sd-ladder li:nth-child(4)::before { box-shadow: 0 0 24px rgba(245,197,24,.65); background: #ffd75e; }
.sd-ladder li:nth-child(5)::before { box-shadow: 0 0 34px rgba(255,224,113,.85); background: #ffe58f; }
.sd-ladder b { color: var(--mp-ink); } .sd-ladder span { color: var(--mp-ink-2); font-size: var(--mp-t-sm); }

.sd-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: var(--mp-s-3) 0; }
.sd-chips li { margin: 0; padding: 6px 12px; border-radius: var(--mp-radius-pill); border: 1px solid var(--mp-border-strong);
  font-size: var(--mp-t-xs); font-weight: 700; color: var(--mp-ink-2); background: var(--mp-bg-card); }

.sd-honest { border: 1px dashed var(--mp-border-strong); border-radius: var(--mp-radius); padding: 14px 16px;
  margin: var(--mp-s-4) 0; background: var(--mp-bg-1); font-size: var(--mp-t-sm); }
.sd-honest p:last-child { margin: 0; }

.sd-faq { margin-top: var(--mp-s-3); }
.mp-faq { border-radius: 14px; }
.mp-faq > summary { font-family: var(--mp-font-body); font-weight: 800; font-size: 1.05rem; }
.mp-faq > summary::after { color: var(--mp-gold-hi); }
.mp-faq[open] > summary::after { content: "\2212"; }

/* sticky bonus bar — every breakpoint (house rule 15) */
.mp-hd-sticky { border-top: 1px solid var(--mp-gold-hi); background: rgba(33,19,58,.96); gap: 12px; }
.mp-hd-sticky .sd-sticky-ico { width: 34px; height: auto; }
.mp-hd-sticky b { color: var(--mp-gold-hi); }
.mp-hd-sticky .mp-hd-btn { padding: 11px 22px; }
@media (max-width: 640px) {
  .mp-hd-sticky p { font-size: var(--mp-t-xs); line-height: 1.3; }
  .mp-hd-sticky .mp-hd-btn { padding: 10px 14px; font-size: .9rem; }
}
@media (max-width: 380px) { .mp-hd-sticky .sd-sticky-ico { display: none; } }

/* footer */
.mp-foot { background: #150b26; }
.mp-foot-top { grid-template-columns: 1.6fr 1fr 1fr; }
.mp-foot-col h4 { font-family: var(--mp-font-body); font-weight: 800; color: var(--mp-gold-hi); }
.mp-foot-col a, .mp-foot a { text-decoration: none; }
.mp-foot-disclaimer-box a { text-decoration: underline; }
.mp-foot .sd-pay { margin: var(--mp-s-5) 0 0; }
.mp-foot .sd-pay li { height: 44px; }
.mp-foot .sd-pay img { height: 24px; }
.sd-trust { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 14px 0 0; }
.sd-trust li { margin: 0; padding: 5px 11px; border: 1px solid var(--mp-border-strong); border-radius: var(--mp-radius-pill);
  font-size: var(--mp-t-xs); font-weight: 800; color: var(--mp-ink-2); }
.mp-foot-age-mark { border-color: var(--mp-gold-hi); color: var(--mp-gold-hi); }
@media (max-width: 860px) { .mp-foot-top { grid-template-columns: 1fr 1fr; } .mp-foot-top > div:first-child { grid-column: 1 / -1; } }

.mp-hd-body, td, summary, .mp-faq div { overflow-wrap: anywhere; }
.sd-404 { min-height: 55vh; display: grid; place-items: center; text-align: center; padding: var(--mp-s-7) var(--mp-s-4); }
.sd-404 .sd-btns { justify-content: center; }