/* =============================================================================
   STAKE BG — brand skin для gmb-univ-multi-v2-stake
   -----------------------------------------------------------------------------
   Подключается СТРОГО ПОСЛЕ /css/sfb-design.css (head-additions.html) — так
   :root-токены базы перекрываются брендовыми, а компоненты живут в собственном
   namespace `stk-*`.

   АНТИ-ФУТПРИНТ (почему именно так):
     • все ранжирующиеся EMD бренда (stakecasino.com, stake-casinoo.com,
       stakecasino.ar, stake-kazino-bg.com) — ТЁМНЫЕ slate-панели #1a2c38/#213743
       с зелёным акцентом и системным/Montserrat шрифтом. Соседний форк
       gmb-univ-multi-v2-mrbit — тоже тёмный (navy #060E24 + cyan).
       Поэтому здесь ровно наоборот: СВЕТЛАЯ «porcelain» бумага + глубокий
       хвойный ink + кислотно-зелёный CTA, тёмные band-полосы только акцентами.
     • шрифты: Unbounded (заголовки, широкий display с кириллицей) + Onest
       (текст/UI). Намеренно НЕ Montserrat / Open Sans / Josefin Sans / Lato
       (ими набраны клоны-аффилиаты) и НЕ Space Grotesk + Manrope (mrbit).

   SECTION MAP
     00 tokens · 01 base/типографика · 02 header + моб. меню · 03 hero
     04 verdict-band (оценки) · 05 answer-box + промо-спойлер
     06 offers-table · 07 game-accordion · 08 payments · 09 steps
     10 editorial (.Content) · 11 YMYL · 12 FAQ · 13 footer
     14 внутренние (stk-page*) · 15 inline .sfb-* перекраска · 16 адаптив
   ============================================================================= */

/* ── 00 TOKENS ─────────────────────────────────────────────────────────────── */
:root {
  /* базовые токены sfb-design.css — перекрашиваем под бренд */
  --accent:      #0F7A47;
  --accent-ink:  #0B5C36;
  --accent-tint: #E4F3EA;
  --cta:         #12C46B;
  --cta-ink:     #0B5C36;
  --success:     #0F7A47;
  --success-tint:#E4F3EA;
  --success-bd:  #BFE0CD;
  --warn:        #A9711A;
  --warn-tint:   #FBF1DF;

  --ink:         #10231A;
  --body:        #33463C;
  --reading:     #33463C;
  --muted:       #5E7268;
  --muted-2:     #7C8E84;

  --surface:     #F2F5EF;
  --surface-2:   #F8FAF6;
  --border:      #DCE3D8;
  --border-soft: #E9EEE5;

  --dark:        #0B2018;
  --dark-2:      #081912;
  --dark-hover:  #14372A;
  --dark-muted:  #9DB3A7;
  --dark-faint:  #7E9689;
  --page-bg:     #F2F4EF;

  --star:        #E39A2B;

  --font-body: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ── собственные stake-токены ── */
  --stk-paper:   #F2F4EF;   /* фон страницы (porcelain)               */
  --stk-card:    #FFFFFF;
  --stk-ink:     #10231A;   /* глубокий хвойный текст/заголовки       */
  --stk-mid:     #4E6157;
  --stk-soft:    #7C8E84;
  --stk-line:    #DCE3D8;
  --stk-line-2:  #EBEFE7;
  --stk-acc:     #12C46B;   /* CTA / акцент                           */
  --stk-acc-d:   #0E9E56;
  --stk-acc-ink: #05210F;   /* текст на зелёном (контраст ≥ 7:1)      */
  --stk-deep:    #0B2018;   /* тёмные band-полосы                     */
  --stk-deep-2:  #123326;
  --stk-amber:   #E39A2B;
  --stk-tint:    #E4F3EA;

  --stk-head: 'Unbounded', 'Onest', system-ui, sans-serif;
  --stk-text: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --stk-r:   4px;    /* намеренно «рубленая» геометрия, а не pill      */
  --stk-r-l: 8px;
  --stk-max: 1180px;
}

/* ── 01 BASE ───────────────────────────────────────────────────────────────── */
body.sfb-body { background: var(--stk-paper); }

.stk, .stk * { box-sizing: border-box; }
.stk {
  font-family: var(--stk-text);
  color: var(--stk-ink);
  background: var(--stk-paper);
  -webkit-font-smoothing: antialiased;
}
.stk a { color: var(--stk-acc-d); }
.stk-wrap { max-width: var(--stk-max); margin: 0 auto; padding: 0 22px; }

.stk h1, .stk h2, .stk h3, .stk h4 {
  font-family: var(--stk-head);
  color: var(--stk-ink);
  letter-spacing: -.015em;
  line-height: 1.14;
  margin: 0;
  font-weight: 700;
}

.stk-eyebrow {
  font-family: var(--stk-text);
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--stk-acc-d);
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px;
}
.stk-eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--stk-acc); flex: none;
}
.stk-h2 { font-size: clamp(26px, 3.2vw, 38px); margin: 0 0 12px; }
.stk-intro { max-width: 74ch; color: var(--stk-mid); font-size: 17px; line-height: 1.7; margin: 0 0 26px; }

.stk-sec { padding: 60px 0; }
.stk-sec.paper { background: var(--stk-card); border-top: 1px solid var(--stk-line); border-bottom: 1px solid var(--stk-line); }

/* кнопка — рубленый прямоугольник со скошенным правым верхом (свой силуэт) */
.stk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--stk-text); font-weight: 700; font-size: 15px; letter-spacing: .01em;
  padding: 13px 26px;
  background: var(--stk-acc); color: var(--stk-acc-ink);
  border: 0; border-radius: var(--stk-r);
  text-decoration: none; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition: background .15s ease, transform .15s ease;
}
/* ⚠️ `.stk a {color:...}` (0-1-1) перебивает `.stk-btn` (0-1-0) — текст кнопки
   уезжал в зелёный по зелёному (контраст 1.5:1). Явно поднимаем специфичность. */
.stk a.stk-btn, .stk a.stk-btn:visited { color: var(--stk-acc-ink); }
.stk-btn:hover, .stk a.stk-btn:hover { background: var(--stk-acc-d); color: var(--stk-acc-ink); text-decoration: none; transform: translateY(-1px); }
.stk-btn.lg { font-size: 17px; padding: 16px 34px; }
.stk-btn.sm { font-size: 13px; padding: 9px 16px; clip-path: none; }
.stk-btn.ghost {
  background: transparent; color: var(--stk-ink);
  box-shadow: inset 0 0 0 2px var(--stk-ink); clip-path: none;
}
.stk a.stk-btn.ghost { color: var(--stk-ink); }
.stk-btn.ghost:hover, .stk a.stk-btn.ghost:hover { background: var(--stk-ink); color: #fff; }
.stk-btn.onlight { background: var(--stk-acc); color: var(--stk-acc-ink); }

/* ── 02 HEADER ─────────────────────────────────────────────────────────────── */
.stk-top {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--stk-line);
}
.stk-top .stk-wrap {
  display: flex; align-items: center; gap: 22px;
  height: 72px;
}
.stk-logo { display: block; height: 34px; width: auto; }
.stk-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.stk-nav > a, .stk-cat > .stk-cat-t {
  font-size: 14px; font-weight: 600; color: var(--stk-ink);
  padding: 9px 12px; border-radius: var(--stk-r); text-decoration: none;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; cursor: default;
}
.stk-nav > a { cursor: pointer; }
.stk-nav > a:hover, .stk-cat:hover > .stk-cat-t { background: var(--stk-tint); color: var(--stk-acc-d); }
.stk-cat { position: relative; }
.stk-cat-t em { font-style: normal; font-size: 10px; color: var(--stk-soft); }
.stk-drop {
  position: absolute; top: 100%; left: 0; min-width: 250px;
  background: #fff; border: 1px solid var(--stk-line); border-top: 3px solid var(--stk-acc);
  box-shadow: 0 18px 40px rgba(11,32,24,.14);
  padding: 8px; display: none; border-radius: 0 0 var(--stk-r-l) var(--stk-r-l);
}
.stk-cat:hover .stk-drop, .stk-cat:focus-within .stk-drop { display: block; }
.stk-drop.wide { display: none; }
.stk-cat:hover .stk-drop.wide, .stk-cat:focus-within .stk-drop.wide {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 520px;
  max-height: 72vh; overflow: auto;
}
.stk-drop a {
  display: block; padding: 9px 12px; font-size: 14px; color: var(--stk-mid);
  text-decoration: none; border-radius: var(--stk-r);
}
.stk-drop a:hover { background: var(--stk-tint); color: var(--stk-acc-d); }
.stk-top .stk-btn { flex: none; }

/* zero-JS бургер */
.stk-burger { display: none; }
.stk-burger-l { display: none; }

/* ── 03 HERO — центрированная редакционная колонка (без правой карточки) ──── */
.stk-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(680px 340px at 78% -8%, rgba(18,196,107,.20), transparent 62%),
    radial-gradient(520px 300px at 6% 108%, rgba(11,32,24,.07), transparent 60%),
    var(--stk-paper);
  border-bottom: 1px solid var(--stk-line);
  padding: 66px 0 58px;
}
.stk-hero .stk-wrap { max-width: 900px; text-align: center; position: relative; }
.stk-kick {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--stk-acc-d);
  border: 1px solid var(--stk-acc); background: rgba(18,196,107,.10);
  padding: 6px 14px; border-radius: var(--stk-r); margin-bottom: 20px;
}
.stk-hero h1 { font-size: clamp(32px, 5vw, 58px); line-height: 1.06; margin: 0 0 18px; }
.stk-sub { font-size: clamp(17px, 1.9vw, 20px); line-height: 1.62; color: var(--stk-mid); margin: 0 auto 28px; max-width: 68ch; }
.stk-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.stk-hero-note { font-size: 13px; color: var(--stk-soft); margin: 0; }

/* ── 04 VERDICT BAND — тёмная полоса с оценками-барами ─────────────────────── */
.stk-verdict { background: var(--stk-deep); color: #fff; padding: 40px 0; }
.stk-verdict .stk-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 46px; align-items: center; }
.stk-vscore { text-align: center; border-right: 1px solid rgba(255,255,255,.14); padding-right: 30px; }
.stk-vscore b {
  font-family: var(--stk-head); font-size: 62px; line-height: 1; color: var(--stk-acc);
  display: block; letter-spacing: -.03em;
}
.stk-vscore span { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dark-muted); margin-top: 10px; }
.stk-vrows { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 38px; }
.stk-vrow { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.stk-vrow .l { font-size: 14px; color: #E6EFE9; font-weight: 500; }
.stk-vrow .v { font-size: 14px; font-weight: 700; color: var(--stk-acc); font-family: var(--stk-head); }
.stk-vbar { grid-column: 1 / -1; height: 4px; background: rgba(255,255,255,.13); border-radius: 2px; overflow: hidden; }
.stk-vbar i { display: block; height: 100%; background: var(--stk-acc); }
.stk-vnote { grid-column: 1 / -1; font-size: 12.5px; color: var(--dark-faint); margin: 6px 0 0; }

/* ── 05 ANSWER BOX + ПРОМО-СПОЙЛЕР ─────────────────────────────────────────── */
.stk-answer { display: grid; grid-template-columns: 1.5fr 1fr; gap: 34px; align-items: start; }
.stk-abox {
  background: var(--stk-card); border: 1px solid var(--stk-line);
  border-left: 4px solid var(--stk-acc);
  padding: 26px 30px; border-radius: 0 var(--stk-r-l) var(--stk-r-l) 0;
}
.stk-abox .q { font-family: var(--stk-head); font-size: 20px; font-weight: 700; margin: 0 0 12px; }
.stk-abox .a { font-size: 16px; line-height: 1.72; color: var(--stk-mid); margin: 0; }

/* спойлер промо-кода: клик = переход по CTA (рулбук 3.6a) */
.stk-codebox {
  background: var(--stk-deep); color: #fff; padding: 22px; border-radius: var(--stk-r-l);
  border: 1px solid var(--stk-deep-2);
}
.stk-codebox .k { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dark-muted); margin-bottom: 10px; }
.stk-codebox .h { font-family: var(--stk-head); font-size: 19px; margin: 0 0 14px; color: #fff; }
.stk-code {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px dashed var(--stk-acc); background: rgba(18,196,107,.10);
  padding: 12px 14px; border-radius: var(--stk-r); text-decoration: none; margin-bottom: 14px;
}
.stk-code:hover { background: rgba(18,196,107,.20); text-decoration: none; }
.stk-code .v {
  font-family: var(--stk-head); font-weight: 700; font-size: 17px; letter-spacing: .12em;
  color: transparent; text-shadow: 0 0 9px rgba(255,255,255,.75); user-select: none;
}
.stk-code:hover .v { color: var(--stk-acc); text-shadow: none; }
.stk-code .go { font-size: 12.5px; font-weight: 700; color: var(--stk-acc); white-space: nowrap; }
.stk-codebox .rg { font-size: 12px; color: var(--dark-faint); margin-top: 12px; }
.stk-codebox .stk-btn { width: 100%; }

/* ── 06 OFFERS — семантическая таблица-регистр ─────────────────────────────── */
.stk-table { width: 100%; border-collapse: collapse; background: var(--stk-card); border: 1px solid var(--stk-line); }
.stk-table caption { caption-side: top; text-align: left; font-size: 13px; color: var(--stk-soft); padding: 0 0 10px; }
.stk-table th, .stk-table td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--stk-line-2); font-size: 15px; vertical-align: middle; }
.stk-table thead th {
  background: var(--stk-deep); color: #fff; font-family: var(--stk-text);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; border-bottom: 0;
}
.stk-table tbody tr:last-child td { border-bottom: 0; }
.stk-table tbody tr:hover { background: var(--stk-surface, #F8FAF6); }
.stk-table .nm { font-weight: 700; color: var(--stk-ink); font-size: 15.5px; }
.stk-table .sz { font-family: var(--stk-head); font-weight: 700; color: var(--stk-acc-d); white-space: nowrap; }
.stk-table .tr { color: var(--stk-mid); font-size: 14px; }
.stk-kind {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  background: var(--stk-tint); color: var(--stk-acc-d); padding: 4px 9px; border-radius: var(--stk-r);
}
.stk-tnote { font-size: 13px; color: var(--stk-soft); margin: 14px 0 0; }

/* ── 07 GAMES — аккордеон категорий ────────────────────────────────────────── */
.stk-acc { border-top: 2px solid var(--stk-ink); }
.stk-acc details { border-bottom: 1px solid var(--stk-line); }
.stk-acc summary {
  list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative;
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.stk-acc summary::-webkit-details-marker { display: none; }
.stk-acc summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: var(--stk-head); font-size: 22px; color: var(--stk-acc-d); line-height: 1;
}
.stk-acc details[open] summary::after { content: "\2013"; }
.stk-acc summary .t { font-family: var(--stk-head); font-size: 20px; font-weight: 700; color: var(--stk-ink); }
.stk-acc summary .n { font-size: 13px; font-weight: 700; color: var(--stk-acc-d); background: var(--stk-tint); padding: 3px 10px; border-radius: var(--stk-r); }
.stk-acc .in { padding: 0 44px 24px 0; }
.stk-acc .in p { margin: 0 0 14px; color: var(--stk-mid); font-size: 15.5px; line-height: 1.7; max-width: 78ch; }
.stk-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.stk-chips span {
  font-size: 12.5px; color: var(--stk-mid); border: 1px solid var(--stk-line);
  background: var(--stk-card); padding: 5px 11px; border-radius: var(--stk-r);
}

/* ── 08 PAYMENTS — две колонки-чеклиста ────────────────────────────────────── */
.stk-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.stk-paycol { background: var(--stk-card); border: 1px solid var(--stk-line); padding: 26px 28px; border-radius: var(--stk-r-l); }
.stk-paycol > h3 { font-size: 19px; margin: 0 0 4px; }
.stk-paycol > .sub { font-size: 13px; color: var(--stk-soft); margin: 0 0 18px; }
.stk-li { display: flex; gap: 13px; padding: 12px 0; border-top: 1px solid var(--stk-line-2); }
.stk-li i {
  flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--stk-tint);
  color: var(--stk-acc-d); font-style: normal; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; margin-top: 2px;
}
.stk-li b { display: block; font-size: 15px; color: var(--stk-ink); }
.stk-li small { display: block; font-size: 13.5px; color: var(--stk-mid); margin-top: 2px; }

/* ── 09 STEPS — горизонтальная нумерованная дорожка ────────────────────────── */
.stk-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: stk-s; }
.stk-step { position: relative; padding: 34px 20px 0; border-top: 2px solid var(--stk-line); counter-increment: stk-s; }
.stk-step::before {
  content: counter(stk-s); position: absolute; top: -15px; left: 20px;
  width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--stk-acc); color: var(--stk-acc-ink);
  font-family: var(--stk-head); font-weight: 700; font-size: 13px; border-radius: var(--stk-r);
}
.stk-step:first-child { padding-left: 0; }
.stk-step:first-child::before { left: 0; }
.stk-step b { display: block; font-family: var(--stk-head); font-size: 15.5px; margin-bottom: 7px; color: var(--stk-ink); }
.stk-step span { font-size: 14px; line-height: 1.62; color: var(--stk-mid); }

/* ── 10 EDITORIAL (.Content морды) ─────────────────────────────────────────── */
.stk-editorial { max-width: 82ch; }

/* ── 11 YMYL ───────────────────────────────────────────────────────────────── */
.stk-ymyl { background: var(--stk-deep); color: #E6EFE9; padding: 40px 0; }
.stk-ymyl h3 { color: #fff; font-size: 24px; display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.stk-ymyl p { font-size: 15.5px; line-height: 1.72; color: #C6D6CC; max-width: 88ch; margin: 0 0 18px; }
.stk-ymyl a { color: var(--stk-acc); }
.b18 {
  display: inline-grid; place-items: center; min-width: 42px; height: 26px; padding: 0 8px;
  background: var(--stk-acc); color: var(--stk-acc-ink);
  font-family: var(--stk-head); font-weight: 700; font-size: 13px; border-radius: var(--stk-r); flex: none;
}
.stk-tools { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0; }
.stk-tool { border: 1px solid rgba(255,255,255,.16); border-left: 3px solid var(--stk-acc); padding: 14px 16px; }
.stk-tool b { display: block; color: #fff; font-size: 14.5px; margin-bottom: 4px; }
.stk-tool span { font-size: 13px; color: var(--dark-muted); line-height: 1.55; }
.stk-help { font-size: 14px; color: #C6D6CC; }

/* ── 12 FAQ ────────────────────────────────────────────────────────────────── */
.stk-faq details { background: var(--stk-card); border: 1px solid var(--stk-line); margin-bottom: 10px; border-radius: var(--stk-r-l); }
.stk-faq summary {
  list-style: none; cursor: pointer; padding: 17px 48px 17px 22px; position: relative;
  font-family: var(--stk-head); font-weight: 600; font-size: 16px; color: var(--stk-ink);
}
.stk-faq summary::-webkit-details-marker { display: none; }
.stk-faq summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 20px; color: var(--stk-acc-d); line-height: 1;
}
.stk-faq details[open] summary::after { content: "\2013"; }
.stk-faq details[open] { border-color: var(--stk-acc); }
.stk-faq p { margin: 0; padding: 0 22px 20px; font-size: 15.5px; line-height: 1.72; color: var(--stk-mid); }

/* ── 13 FOOTER ─────────────────────────────────────────────────────────────── */
.stk-agebar { background: var(--stk-deep-2); color: #B9CCC1; font-size: 13.5px; }
.stk-agebar .stk-wrap { display: flex; align-items: center; gap: 14px; padding-top: 14px; padding-bottom: 14px; line-height: 1.6; }
.stk-agebar a { color: var(--stk-acc); }
.stk-foot { background: var(--stk-deep); color: var(--dark-muted); padding: 46px 0 30px; }
.stk-foot .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; }
.stk-foot .logo { height: 30px; width: auto; margin-bottom: 14px; }
.stk-foot p { font-size: 14px; line-height: 1.65; color: var(--dark-muted); margin: 0; max-width: 42ch; }
.stk-foot .fh { font-family: var(--stk-head); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 12px; }
.stk-foot a { display: block; font-size: 14px; color: var(--dark-muted); text-decoration: none; padding: 5px 0; }
.stk-foot a:hover { color: var(--stk-acc); }
.stk-foot .fine {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12.5px; line-height: 1.7; color: var(--dark-faint);
}

/* =============================================================================
   14 · ВНУТРЕННИЕ СТРАНИЦЫ (рулбук 3.6c) — скелет stk-page
   Отличия от базы: НЕТ .page-wrap/.reading/.rail/.hero/.zone-*.
   Отличия от mrbit: НЕТ горизонтального sticky chapter-bar и нет тёмного
   hero-band — здесь светлый artichead, TOC свёрнут в <details> внутри потока,
   H2 нумеруются CSS-счётчиком в поле слева, related — карточки 2 в ряд.
   ============================================================================= */
.stk-page { background: var(--stk-paper); }
.stk-artichead { background: var(--stk-card); border-bottom: 1px solid var(--stk-line); padding: 30px 0 34px; }
.stk-artichead .stk-wrap { max-width: 900px; }
.stk-crumbs { font-size: 13px; color: var(--stk-soft); margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.stk-crumbs a { color: var(--stk-mid); text-decoration: none; }
.stk-crumbs a:hover { color: var(--stk-acc-d); }
.stk-crumbs .sep { color: var(--stk-line); }
.stk-crumbs .cur { color: var(--stk-ink); font-weight: 600; }
.stk-artichead h1 { font-size: clamp(28px, 3.8vw, 42px); margin: 0 0 14px; }
.stk-artilead { font-size: 18px; line-height: 1.65; color: var(--stk-mid); margin: 0 0 20px; }
.stk-flags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.stk-flag {
  font-size: 12px; font-weight: 600; color: var(--stk-mid);
  border: 1px solid var(--stk-line); padding: 4px 10px; border-radius: var(--stk-r);
}
.stk-flag.ok { color: var(--stk-acc-d); border-color: var(--stk-acc); background: var(--stk-tint); }
.stk-flag.age { background: var(--stk-ink); color: #fff; border-color: var(--stk-ink); }
.stk-artimeta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.stk-by { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--stk-mid); }
.stk-by .av {
  width: 28px; height: 28px; border-radius: 50%; background: var(--stk-ink); color: #fff;
  display: grid; place-items: center; font-family: var(--stk-head); font-size: 12px; font-weight: 700;
}

.stk-doc { padding: 34px 0 54px; }
.stk-doc .stk-wrap { max-width: 900px; }

/* TOC — свёрнутый блок в потоке (не боковой рельс, не sticky-бар) */
.stk-toc {
  background: var(--stk-card); border: 1px solid var(--stk-line);
  border-radius: var(--stk-r-l); margin: 0 0 30px;
}
.stk-toc > summary {
  list-style: none; cursor: pointer; padding: 15px 20px; position: relative;
  font-family: var(--stk-head); font-weight: 600; font-size: 15px; color: var(--stk-ink);
}
.stk-toc > summary::-webkit-details-marker { display: none; }
.stk-toc > summary::after { content: "\25BE"; position: absolute; right: 20px; color: var(--stk-acc-d); }
.stk-toc[open] > summary::after { content: "\25B4"; }
.stk-toc ol { margin: 0; padding: 0 20px 18px 20px; list-style: none; counter-reset: stk-toc; }
.stk-toc li { counter-increment: stk-toc; border-top: 1px solid var(--stk-line-2); }
.stk-toc a { display: flex; gap: 12px; padding: 10px 0; font-size: 14.5px; color: var(--stk-mid); text-decoration: none; }
.stk-toc a::before {
  content: counter(stk-toc, decimal-leading-zero);
  font-family: var(--stk-head); font-size: 12px; color: var(--stk-acc-d); flex: none; padding-top: 2px;
}
.stk-toc a:hover { color: var(--stk-acc-d); }

/* оффер-карточка на внутренней — ПОСЛЕ шапки, в потоке статьи */
.stk-offercard {
  display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center;
  background: var(--stk-deep); color: #fff; padding: 22px 26px;
  border-radius: var(--stk-r-l); margin: 0 0 30px;
}
.stk-offercard .k { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dark-muted); }
.stk-offercard .t { font-family: var(--stk-head); font-size: 19px; font-weight: 700; margin: 6px 0; color: #fff; }
.stk-offercard .m { font-size: 12.5px; color: var(--dark-faint); }
.stk-offercard .stk-code { margin: 0 0 10px; min-width: 240px; }

/* типографика статьи */
.stk-prose { font-size: 17px; line-height: 1.78; color: var(--stk-mid); counter-reset: stk-h2; }
.stk-prose > p { margin: 0 0 20px; max-width: 74ch; }
.stk-prose > p:first-of-type { font-size: 18.5px; color: var(--stk-ink); }
.stk-prose h2 {
  font-family: var(--stk-head); font-size: clamp(22px, 2.6vw, 30px); color: var(--stk-ink);
  margin: 42px 0 16px; padding-left: 54px; position: relative; counter-increment: stk-h2; line-height: 1.2;
}
.stk-prose h2::before {
  content: counter(stk-h2, decimal-leading-zero);
  position: absolute; left: 0; top: .18em;
  font-size: 15px; color: var(--stk-acc-d); font-weight: 700;
  border-left: 3px solid var(--stk-acc); padding-left: 10px;
}
.stk-prose h3 { font-family: var(--stk-head); font-size: 20px; color: var(--stk-ink); margin: 30px 0 10px; }
.stk-prose h4 { font-family: var(--stk-head); font-size: 17px; color: var(--stk-ink); margin: 24px 0 8px; }
.stk-prose ul, .stk-prose ol { margin: 0 0 20px; padding-left: 0; list-style: none; max-width: 74ch; }
.stk-prose ul > li { position: relative; padding-left: 26px; margin-bottom: 9px; }
.stk-prose ul > li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 7px; height: 7px; background: var(--stk-acc); border-radius: 1px; transform: rotate(45deg);
}
.stk-prose ol { counter-reset: stk-ol; }
.stk-prose ol > li { position: relative; padding-left: 32px; margin-bottom: 9px; counter-increment: stk-ol; }
.stk-prose ol > li::before {
  content: counter(stk-ol); position: absolute; left: 0; top: 0;
  font-family: var(--stk-head); font-size: 12.5px; font-weight: 700;
  color: var(--stk-acc-ink); background: var(--stk-acc);
  width: 21px; height: 21px; display: grid; place-items: center; border-radius: var(--stk-r); margin-top: 4px;
}
.stk-prose blockquote {
  margin: 26px 0; padding: 18px 24px; background: var(--stk-card);
  border-left: 4px solid var(--stk-acc); border-radius: 0 var(--stk-r-l) var(--stk-r-l) 0;
  font-size: 17px; color: var(--stk-ink);
}
.stk-prose table { width: 100%; border-collapse: collapse; margin: 24px 0; background: var(--stk-card); border: 1px solid var(--stk-line); font-size: 15px; }
.stk-prose th { background: var(--stk-deep); color: #fff; text-align: left; padding: 12px 15px; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.stk-prose td { padding: 12px 15px; border-top: 1px solid var(--stk-line-2); }
.stk-prose a { color: var(--stk-acc-d); text-decoration: underline; text-underline-offset: 2px; }
.stk-prose img { max-width: 100%; height: auto; border-radius: var(--stk-r-l); }

.stk-block { margin: 26px 0; }
.stk-block-cta { margin-top: 14px; }

.stk-rgline {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--stk-card); border: 1px solid var(--stk-line); border-left: 4px solid var(--stk-amber);
  padding: 18px 22px; border-radius: 0 var(--stk-r-l) var(--stk-r-l) 0; margin: 34px 0 18px;
}
.stk-rgline p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--stk-mid); }
.stk-disclosure { font-size: 13px; color: var(--stk-soft); line-height: 1.65; margin: 0 0 30px; }

.stk-related { margin-top: 34px; }
.stk-related__h { font-family: var(--stk-head); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--stk-soft); margin-bottom: 14px; }
.stk-rgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stk-rcard {
  display: block; background: var(--stk-card); border: 1px solid var(--stk-line);
  border-radius: var(--stk-r-l); padding: 16px 18px; text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.stk-rcard:hover { border-color: var(--stk-acc); transform: translateY(-2px); text-decoration: none; }
.stk-rcard .tag { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--stk-acc-d); display: block; margin-bottom: 6px; }
.stk-rcard .t { font-family: var(--stk-head); font-size: 15.5px; color: var(--stk-ink); font-weight: 600; }

/* =============================================================================
   15 · INLINE .sfb-* ВНУТРИ .Content — перекраска под бренд
   (базовый sfb-design.css стилизует их в свои цвета; префикс .stk-prose /
    .stk-editorial бьёт специфичность)
   ============================================================================= */
.stk-prose .sfb-cta, .stk-editorial .sfb-cta {
  background: var(--stk-deep); border: 0; border-radius: var(--stk-r-l); color: #fff;
}
.stk-prose .sfb-cta__title, .stk-editorial .sfb-cta__title { color: #fff; font-family: var(--stk-head); }
.stk-prose .sfb-cta__note, .stk-editorial .sfb-cta__note { color: var(--dark-faint); }
.stk-prose .sfb-cta .button1, .stk-prose .sfb-cta__btn,
.stk-editorial .sfb-cta .button1, .stk-editorial .sfb-cta__btn {
  background: var(--stk-acc); color: var(--stk-acc-ink); border-radius: var(--stk-r);
  box-shadow: none; font-family: var(--stk-text); font-weight: 700;
}
.stk-prose .sfb-slots, .stk-editorial .sfb-slots { gap: 10px; }
.stk-prose .sfb-slot, .stk-editorial .sfb-slot {
  background: var(--stk-card); border: 1px solid var(--stk-line); border-radius: var(--stk-r-l); color: var(--stk-ink);
}
.stk-prose .sfb-slot:hover, .stk-editorial .sfb-slot:hover { border-color: var(--stk-acc); }
.stk-prose .sfb-faq, .stk-editorial .sfb-faq { border-radius: var(--stk-r-l); }
.stk-prose .sfb-faq details, .stk-editorial .sfb-faq details { border-bottom: 1px solid var(--stk-line); }
.stk-prose .sfb-faq summary, .stk-editorial .sfb-faq summary { font-family: var(--stk-head); color: var(--stk-ink); }
.stk-prose .sfb-table th, .stk-editorial .sfb-table th { background: var(--stk-deep); color: #fff; }
.stk-prose .sfb-rg, .stk-editorial .sfb-rg { border-left: 4px solid var(--stk-amber); background: var(--stk-card); }

/* спойлер промо-кода, подставляемый скриптом в .Content */
.stk-codelink {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--stk-text); font-weight: 700; font-size: 13.5px;
  background: var(--stk-acc); color: var(--stk-acc-ink);
  padding: 3px 11px; border-radius: var(--stk-r); text-decoration: none; white-space: nowrap;
}
.stk-codelink::after { content: "\2192"; }
.stk-codelink:hover { background: var(--stk-acc-d); text-decoration: none; color: var(--stk-acc-ink); }

/* =============================================================================
   16 · АДАПТИВ
   ============================================================================= */
@media (max-width: 1040px) {
  .stk-verdict .stk-wrap { grid-template-columns: 1fr; gap: 26px; }
  .stk-vscore { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); padding: 0 0 20px; display: flex; align-items: center; justify-content: center; gap: 16px; }
  .stk-vscore b { font-size: 46px; }
  .stk-vscore span { margin: 0; }
  .stk-steps { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  .stk-tools { grid-template-columns: 1fr 1fr; }
  .stk-foot .cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .stk-answer { grid-template-columns: 1fr; }
  .stk-pay { grid-template-columns: 1fr; }
  .stk-vrows { grid-template-columns: 1fr; }
  .stk-offercard { grid-template-columns: 1fr; }
  .stk-rgrid { grid-template-columns: 1fr; }
  .stk-sec { padding: 44px 0; }
  .stk-prose h2 { padding-left: 0; }
  .stk-prose h2::before { position: static; display: block; border-left: 0; padding: 0 0 6px; }
}

/* ── мобильное меню: ≤720px, zero-JS (checkbox + label), панель НЕПРОЗРАЧНАЯ ── */
@media (max-width: 720px) {
  .stk-top .stk-wrap { height: 62px; gap: 12px; }
  .stk-logo { height: 28px; }
  .stk-burger-l {
    display: block; order: 3; margin-left: auto; width: 42px; height: 38px;
    border: 1px solid var(--stk-line); border-radius: var(--stk-r);
    position: relative; cursor: pointer; background: #fff;
  }
  .stk-burger-l span, .stk-burger-l span::before, .stk-burger-l span::after {
    content: ""; position: absolute; left: 11px; width: 18px; height: 2px;
    background: var(--stk-ink); border-radius: 2px;
  }
  .stk-burger-l span { top: 18px; }
  .stk-burger-l span::before { top: -6px; left: 0; }
  .stk-burger-l span::after { top: 6px; left: 0; }

  .stk-nav {
    display: none; order: 5; width: 100%;
    position: absolute; left: 0; top: 62px;
    background: #FFFFFF;                 /* непрозрачная панель */
    border-top: 1px solid var(--stk-line);
    border-bottom: 3px solid var(--stk-acc);
    box-shadow: 0 20px 40px rgba(11,32,24,.18);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px 16px 18px; max-height: 78vh; overflow: auto;
  }
  .stk-burger:checked ~ .stk-nav { display: flex; }
  .stk-nav > a, .stk-cat > .stk-cat-t { padding: 12px 4px; font-size: 15px; border-bottom: 1px solid var(--stk-line-2); border-radius: 0; }
  .stk-cat { position: static; }
  .stk-drop, .stk-cat:hover .stk-drop, .stk-cat:focus-within .stk-drop,
  .stk-drop.wide, .stk-cat:hover .stk-drop.wide, .stk-cat:focus-within .stk-drop.wide {
    display: block; position: static; min-width: 0; border: 0; box-shadow: none;
    padding: 0 0 8px 12px; grid-template-columns: 1fr; max-height: none; background: #fff;
  }
  .stk-drop a { padding: 8px 4px; font-size: 14px; }
  .stk-top .stk-btn { order: 2; font-size: 13px; padding: 10px 16px; clip-path: none; }

  .stk-steps { grid-template-columns: 1fr; }
  .stk-tools { grid-template-columns: 1fr; }
  .stk-foot .cols { grid-template-columns: 1fr; }
  .stk-hero { padding: 40px 0 36px; }
  .stk-table thead { display: none; }
  .stk-table, .stk-table tbody, .stk-table tr, .stk-table td { display: block; width: 100%; }
  .stk-table tr { border-bottom: 1px solid var(--stk-line); padding: 8px 0; }
  .stk-table td { border: 0; padding: 5px 16px; }
  .stk-table td::before { content: attr(data-l) " · "; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--stk-soft); }
  .stk-table td.act::before { content: ""; }
}

@media (prefers-reduced-motion: reduce) {
  .stk-btn, .stk-rcard { transition: none; }
}