@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/oct/t/nr-var-ext-v1.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/oct/t/nr-var-lat-v1.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/oct/t/pp-400-ext-v1.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/oct/t/pp-400-lat-v1.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/oct/t/pp-500-ext-v1.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/oct/t/pp-500-lat-v1.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/oct/t/pp-600-ext-v1.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/oct/t/pp-600-lat-v1.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ============ 00 — токены ============================================= */
:root{
  --canvas:#dcd6c8; --paper:#fffdf7; --paper-2:#f6f1e4;
  /* R3 гейта: 4.5:1 и на --paper, и на --canvas (крошки/мета сидят на canvas).
     Было #55605a/#7c857e — 2.63 на canvas на 39 стр. из 39. */
  --ink:#1d211f; --ink-2:#414b45; --ink-3:#545d56;
  --green:#0f5c4b; --green-d:#0a3f34; --green-l:#e4ede8;
  --sienna:#b4532a; --sienna-d:#8f3d1c; --sienna-l:#f7e8de;
  --gold:#c99a2e; --rule:#cfc6b2; --rule-2:#e6dfcd; --warn:#9b2d20;
  --w:888px; --w-text:760px; --w-frame:1120px; --pad:20px;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Poppins','Segoe UI',Arial,sans-serif;
  --sh:0 1px 2px rgba(28,34,30,.06),0 8px 22px -14px rgba(28,34,30,.28);
}

/* ============ 01 — сброс слоя донора по ГОЛОМУ тегу ==================== */
/* :where() целиком вокруг селектора: (0,0,1) как у правил донора, а наш
   лист ниже — значит побеждаем без !important и не глушим свои классы. */
:where(body.oct-page header),:where(body.oct-page footer),
:where(body.oct-page nav),:where(body.oct-page aside),
:where(body.oct-page main),:where(body.oct-page section),
:where(body.oct-page article),:where(body.oct-page div){
  position:static;float:none;width:auto;max-height:none;min-height:0;
  background:none;border:0;box-shadow:none;transform:none;z-index:auto;
}
:where(body.oct-page a){color:var(--sienna-d)}
:where(body.oct-page figcaption){position:static}
/* Донорского CSS на странице не остаётся вовсе: <style>/<link> сняты, class/id/style
   вычищены санитаром. Блок выше — страховка на случай уцелевшего атрибута, поэтому
   он не глушит псевдоэлементы: свои ::before ниже должны работать. */

/* ============ 02 — база =============================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.oct-page{
  margin:0;background:var(--canvas);color:var(--ink);
  font:400 17px/1.72 var(--sans);
}
body.oct-page p,body.oct-page li,body.oct-page dd,body.oct-page dt,
body.oct-page td,body.oct-page th,body.oct-page blockquote{
  font-family:var(--sans);font-size:17px;line-height:1.72;
}
body.oct-page h1,body.oct-page h2,body.oct-page h3,body.oct-page h4{
  font-family:var(--serif);font-weight:600;color:var(--ink);
  line-height:1.16;letter-spacing:-.01em;margin:1.7em 0 .55em;
}
body.oct-page h1{font-size:clamp(30px,4.6vw,44px);font-weight:700;margin:.2em 0 .4em}
body.oct-page h2{font-size:clamp(23px,2.9vw,30px)}
body.oct-page h3{font-size:20px;font-weight:700}
body.oct-page h4{font-size:17.5px;font-weight:700;font-family:var(--sans)}
body.oct-page img{max-width:100%;height:auto}
body.oct-page table{max-width:100%}

/* ============ 03 — лист и полосы ======================================
   Полос во всю ширину у нас две — шапка и подвал, и обе носят свой класс;
   отдельного `-band` и обнулённого `-main--flush` не осталось: герой снят
   (§07), а витрина живёт внутри листа. Общей карточки `-card` тоже нет —
   рамку раздают те, кому она нужна: `-body`, `-fact`, `-val`, `-idx-wrap`. */
.oct-in{width:100%;max-width:var(--w-frame);margin-left:auto;margin-right:auto;
  padding-left:var(--pad);padding-right:var(--pad)}
.oct-sheet{width:100%;max-width:var(--w);margin:0 auto;
  padding-left:var(--pad);padding-right:var(--pad)}
.oct-sheet--text{max-width:var(--w-text)}
.oct-main{padding:26px 0 46px}

/* ============ 04 — шапка: мачта и ряд рубрик — ОДИН <header> ========== */
.oct-hd{background:var(--paper);border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:70}
.oct-hd__trust{background:var(--green-d);color:#e9f1ec;font-size:12.5px;
  line-height:1.5;letter-spacing:.01em}
.oct-hd__trust .oct-in{display:flex;flex-wrap:wrap;gap:6px 18px;
  align-items:center;padding-top:7px;padding-bottom:7px}
.oct-hd__trust b,.oct-hd__trust span,.oct-hd__trust a{color:#e9f1ec}
.oct-hd__trust a{text-decoration:underline;text-underline-offset:2px}
.oct-hd__trust i{font-style:normal;color:var(--gold);font-weight:700}
.oct-hd__mast .oct-in{display:flex;align-items:center;gap:18px;
  padding-top:15px;padding-bottom:13px}
.oct-hd__mast a.oct-hd__lg{display:block;line-height:0;flex:0 0 auto}
.oct-mk{display:block;height:34px;width:auto}
.oct-hd__tag{font-size:12.8px;color:var(--ink-2);line-height:1.4;
  border-left:2px solid var(--rule);padding-left:14px;max-width:290px}
.oct-hd__side{margin-left:auto;display:flex;align-items:center;gap:14px}
.oct-hd__yr{font:600 11.5px/1 var(--sans);letter-spacing:.14em;
  color:var(--green);border:1px solid var(--rule);border-radius:2px;
  padding:6px 9px;white-space:nowrap}
.oct-hd__how{font:600 13.5px/1.2 var(--sans);color:var(--sienna-d);
  text-decoration:none;border-bottom:1px solid var(--sienna-l)}
.oct-hd__how:hover{border-bottom-color:var(--sienna)}
/* ряд рубрик — внутренний блок того же header, отбит линейкой.
   ⛔ Полоса тянется во всю ширину окна ФОНОМ, а сами пункты — внутри `.oct-in`,
   ровно под логотипом. `margin:0`/`padding:0` shorthand на самой полосе не
   ставить: он глушит поля контейнера, и ряд уезжает в левый край окна. */
.oct-nav{border-top:1px solid var(--rule-2);background:var(--paper-2);
  position:relative;z-index:71}
.oct-nav__l{display:flex;flex-wrap:wrap;gap:0 2px;list-style:none;margin:0;
  padding:0}
.oct-nav li{margin:0}
.oct-nav__l>li>a{display:flex;align-items:center;gap:6px;padding:11px 13px;
  font:600 14px/1.3 var(--sans);color:var(--ink);text-decoration:none;
  border-bottom:3px solid transparent}
.oct-nav__l>li>a:hover{color:var(--green);border-bottom-color:var(--rule)}
.oct-nav__l>li>a[aria-current]{color:var(--green);
  border-bottom-color:var(--sienna)}
.oct-nav__c{width:10px;height:6px;flex:0 0 auto;opacity:.6}
/* выпадашка: ноль JS, `:hover` + `:focus-within` (с клавиатуры тоже открывается).
   ⛔ Не `<details>`: Chrome 131+ схлопывает закрытый `<details>` через
   `::details-content`, и меню исчезает целиком при живой разметке (05.4f).
   ⛔ Прятать `visibility`+`opacity`, а НЕ `display:none`: по display переход не
   идёт и панель мигает. Свой `z-index` — на полосе (71), а не только на панели:
   панель заперта в контексте наложения шапки ([[dropdown-menu-hidden-by-stacking-and-backdrop-filter]]). */
.oct-nav__i{position:relative}
.oct-nav__p{position:absolute;top:100%;left:0;z-index:80;min-width:250px;
  background:var(--paper);border:1px solid var(--rule);border-top:2px solid var(--green);
  box-shadow:0 14px 34px rgba(16,32,26,.16);padding:12px 4px 8px;
  visibility:hidden;opacity:0;transform:translateY(-5px);
  transition:opacity .13s ease,transform .13s ease,visibility .13s}
.oct-nav__p--w{min-width:480px;column-count:2;column-gap:8px}
/* ⚠️ Два последних блока раскрываются ВЛЕВО. Скрытая панель — `visibility:hidden`,
   а не `display:none`, то есть она участвует в раскладке и растит `scrollWidth`:
   широкая панель шестого пункта на 990 px выходила за правый край окна и гейт
   ловил горизонтальную прокрутку на странице, где меню даже не открывали. */
.oct-nav__i:nth-last-child(-n+2)>.oct-nav__p{left:auto;right:0}
.oct-nav__i:hover>.oct-nav__p,.oct-nav__i:focus-within>.oct-nav__p{
  visibility:visible;opacity:1;transform:none}
.oct-nav__p>b{display:block;font:700 11.5px/1 var(--sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);padding:0 13px 9px;
  column-span:all}
.oct-nav__p ul{list-style:none;margin:0;padding:0}
.oct-nav__p a{display:block;padding:7px 13px;font:15px/1.35 var(--sans);
  color:var(--ink);text-decoration:none;border-radius:2px;
  break-inside:avoid}
.oct-nav__p a:hover{background:var(--green-l);color:var(--green-d)}
.oct-brg,.oct-brg__b{display:none}

/* ============ 05 — крошки ============================================= */
.oct-crumbs{font-size:12.8px;color:var(--ink-3);margin:0 0 14px}
.oct-crumbs ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 6px;
  margin:0;padding:0}
.oct-crumbs li+li::before{content:'\203A';margin-right:6px;color:var(--rule)}
.oct-crumbs a{color:var(--ink-2);text-decoration:none}
.oct-crumbs a:hover{color:var(--sienna-d);text-decoration:underline}

/* ============ 06 — полоса заголовка: не больше трети экрана =========== */
.oct-ttl{padding:6px 0 4px}
.oct-ttl h1{margin:0 0 10px}
.oct-ttl__dek{font:400 19px/1.55 var(--serif);color:var(--ink-2);
  max-width:64ch;margin:0 0 12px}
.oct-ttl__meta{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;
  font-size:12.6px;color:var(--ink-3);border-top:1px solid var(--rule-2);
  padding-top:9px}
.oct-ttl__meta b{color:var(--ink-2);font-weight:600}

/* ============ 07 — ГЕРОЯ НЕТ ========================================== */
/* Правило владельца (DESIGN-ELEMENTS §18, 20.09.2026): первый экран — это
   КОНТЕНТ, а не оффер и не герой. Полосы героя на сайте нет ни на одной
   странице, поэтому и правил под неё здесь нет: мёртвый CSS — это брак
   приёмки (C09.31), а не запас на будущее. Первый экран держат крошки,
   полоса заголовка (§06, ≤ ⅓ экрана) и сразу за ними текст. */

/* ============ 08 — тело статьи ======================================== */
.oct-body{background:var(--paper);border:1px solid var(--rule-2);
  border-radius:3px;box-shadow:var(--sh);padding:26px var(--pad) 30px}
.oct-body>*:first-child{margin-top:0}
.oct-body p{margin:0 0 1.05em}
.oct-body a{color:var(--sienna-d);text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px}
.oct-body a:hover{color:var(--sienna)}
.oct-body h2{border-top:1px solid var(--rule-2);padding-top:20px}
.oct-body h2:first-of-type{border-top:0;padding-top:0}
/* ⚠️ `:not([class])` здесь обязателен, а не для чистоты. Типографика прозы
   живёт ВНУТРИ `.oct-body`, а внутрь тела попадают и наши блоки со своей
   раскладкой — витрина (`ol.octv-list`), полоса рубрик, оглавление. Селектор
   `.oct-body ol>li::before` весом (0,1,2) перебивает `.octv-list>li` (0,1,1)
   и дорисовывал КАЖДОЙ строке витрины номер «1.» в левом верхнем углу — рядом
   с нашим собственным номером места. Гейты этого не видят вовсе: элемент
   генерируемый, габаритов не меняет, контраст в норме (п. 08.4a — «два поля
   рядом, говорящие одно и то же»). Список донора класса не имеет — прозе
   правила достаются по-прежнему. */
.oct-body ul:not([class]),.oct-body ol:not([class]){margin:0 0 1.15em;
  padding-left:0;list-style:none}
.oct-body ol:not([class]){counter-reset:oct-o}
.oct-body ul:not([class])>li,.oct-body ol:not([class])>li{position:relative;
  padding-left:26px;margin:0 0 .5em}
.oct-body ul:not([class])>li::before{content:'';position:absolute;left:6px;
  top:.62em;width:7px;height:7px;background:var(--green);border-radius:1px;
  transform:rotate(45deg)}
.oct-body ol:not([class])>li{counter-increment:oct-o}
.oct-body ol:not([class])>li::before{content:counter(oct-o)'.';
  position:absolute;left:0;top:0;font:600 15px/1.72 var(--sans);
  color:var(--sienna)}
.oct-body blockquote{margin:1.4em 0;padding:2px 0 2px 18px;
  border-left:3px solid var(--gold);font:400 19px/1.6 var(--serif);
  color:var(--ink-2)}
.oct-body blockquote p{font-family:var(--serif);font-size:19px}
.oct-body figure{margin:1.5em 0}
.oct-body figcaption{font-size:12.6px;color:var(--ink-3);line-height:1.45;
  margin-top:7px}
.oct-body hr{border:0;border-top:1px solid var(--rule-2);margin:1.8em 0}
.oct-body strong{font-weight:600}
/* первая картинка страницы — флотом сбоку, не полосой (§18) */
.oct-body img.oct-lead{float:right;width:clamp(170px,32%,300px);
  margin:4px 0 16px 20px;border-radius:3px}

/* ⚠️ Полоса баннеров-рубрик донора. В доноре это был ряд из трёх колонок, но
   держала его ЧУЖАЯ сетка: после снятия классов три <figure> легли друг под
   друга во всю ширину, а первый кадр ещё и ушёл во флот как «ведущий» — на
   первом экране главной получилась дыра слева и три разнокалиберных баннера
   столбиком. Гейтам это видно не было: переполнения нет, картинки целы,
   контраст в норме (п. 12.4a — глаз ловит то, чего не мерит никто). */
.oct-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin:1.6em 0}
.oct-tiles a{display:block;border-radius:4px;overflow:hidden;
  border:1px solid var(--rule-2);background:var(--paper-2)}
.oct-tiles a:hover{border-color:var(--green)}
.oct-tiles img{display:block;width:100%;height:auto;margin:0}

/* Тот же блок этажом ниже: иконка + рубрика + строчка-пояснение. В доноре —
   россыпь голых <a> и <p> без обёрток, после снятия классов читалась как
   «Om te genieten 43 Nieuws Artikelen». */
.oct-navtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  list-style:none;margin:1.6em 0;padding:0}
.oct-navtiles li{margin:0}
.oct-navtiles a{display:grid;grid-template-columns:44px minmax(0,1fr);
  gap:2px 12px;align-items:center;height:100%;padding:13px 15px;
  border:1px solid var(--rule-2);border-left:3px solid var(--green);
  border-radius:4px;background:var(--paper-2);text-decoration:none;color:inherit}
.oct-navtiles a:hover{background:var(--green-l);border-color:var(--green)}
.oct-navtiles img{grid-row:1/3;width:36px;height:36px;object-fit:contain;
  margin:0}
.oct-navtiles b{font:600 15.5px/1.25 var(--sans);color:var(--green-d)}
.oct-navtiles span{font-size:13px;color:var(--ink-3);line-height:1.35}
.oct-navtiles em{font-style:normal;font-weight:600;color:var(--ink-2)}

/* Перечень спеллов/рубрик на хабе — карточками (lib.game_cards). Кнопка `/go/`
   узнаётся по адресу, а не по классу: сама ссылка переносится без изменений. */
.oct-gcard{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  list-style:none;margin:1.7em 0;padding:0}
.oct-gcard__i{display:flex;flex-direction:column;margin:0;overflow:hidden;
  border:1px solid var(--rule-2);border-radius:6px;background:var(--paper-2)}
/* кадр кадрируется под общую пропорцию: у донора они 350×200, но не все —
   один кадр другой высоты сдвигал заголовок карточки вниз, и ряд шёл лесенкой */
.oct-gcard__pic{display:block;aspect-ratio:7/4;overflow:hidden;
  background:var(--paper-2)}
body.oct-page .oct-gcard__pic img{display:block;width:100%;height:100%;
  object-fit:cover;margin:0}
.oct-gcard__t{margin:14px 15px 0;font:700 17px/1.25 var(--sans);
  color:var(--green-d)}
.oct-gcard__x{flex:1 1 auto;margin:8px 15px 0;font-size:14.4px;line-height:1.55;
  color:var(--ink-2)}
.oct-gcard__cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  margin:14px 15px 15px}
.oct-gcard__cta a[href^="/go/"]{display:inline-block;padding:9px 16px;
  border-radius:4px;background:var(--sienna);color:#fff;text-decoration:none;
  font:700 14px/1.2 var(--sans);text-transform:none}
.oct-gcard__cta a[href^="/go/"]:hover{background:var(--sienna-d)}
.oct-gcard__cta a:not([href^="/go/"]){font:600 14px/1.2 var(--sans);
  color:var(--green-d)}

/* ============ 09 — таблицы ============================================ */
/* Класс один и тот же у своих таблиц (figure.oct-tab из oct_arts/oct_extra) и у
   донорских, которые обёрткой получает lib.tables(): иначе половина таблиц
   сайта стоит без оформления — своя разметка была, а правил под неё не было. */
.oct-tab{margin:1.5em 0}
.oct-tab table{width:100%;border-collapse:collapse;background:var(--paper)}
.oct-tab caption{caption-side:top;text-align:left;font:600 12.5px/1.35 var(--sans);
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  padding:0 0 7px}
/* ⚠️ 16 px по горизонтали, а не 12: первая колонка таблицы упирается в край
   карточки, и на 12 px текст выглядит прилипшим (gate_padding, норма ≥16 —
   10 срабатываний на обзорах и live-страницах, п. 12.4a) */
.oct-tab th,.oct-tab td{padding:10px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule-2);font-size:15.5px;line-height:1.55}
.oct-tab thead th{background:var(--green-l);color:var(--green-d);
  font:600 13px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  border-bottom:2px solid var(--green)}
.oct-tab tbody tr:nth-child(even){background:var(--paper-2)}
/* две колонки без шапки: левая — подпись, и читается она так же, как в блоке
   фактов. Прокрутки здесь нет и на мобилке не появляется. */
.oct-tab--key table{table-layout:fixed}
.oct-tab--key tr>*:first-child{width:38%;font:600 14.5px/1.5 var(--sans);
  color:var(--green-d);background:var(--paper-2)}
.oct-tab--key tbody tr:nth-child(even){background:transparent}
/* строка-подзаголовок раздела внутри таблицы (lib.section_rows): она и в
   `--key` идёт во всю ширину, поэтому правило подписи её не касается */
.oct-tab td.oct-tab__sec{background:var(--green-l);color:var(--green-d);
  font:700 13px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  border-bottom:2px solid var(--green);padding:9px 16px;width:auto}
/* Широкая таблица (3+ колонки без шапки) прокручивается вбок, и таблица в ней
   берёт свою ширину, а не 100 %: с `width:100%` на 390 px первая колонка
   ужималась до одного слова в строке («Kaart / van / de / dealer» четырьмя
   строками, снимок 27.09.2026), а таблица всё равно оставалась шире экрана. */
.oct-tab--wide{overflow-x:auto}
.oct-tab--wide table{width:auto;min-width:100%}
.oct-tab--wide tr>*:first-child{white-space:nowrap}
.oct-tab__note{font-size:12.4px;color:var(--ink-3);margin:6px 0 0}

/* Статья автопостинга приезжает ГОЛЫМ html: `%CONTENT_1%` кладётся как есть, и
   ни одной обёртки сборщика (`figure.oct-tab`, `oct-tab--wide`) у неё не будет
   никогда. Поэтому таблица и `pre` БЕЗ обёртки прокручиваются сами, а подпись
   такой таблицы держится на месте — иначе она уезжает вместе с прокруткой и
   обрезается. Гейты этого не видят: в момент приёмки статей робота ещё нет. */
.oct-body>table,.oct-body>pre{display:block;max-width:100%;overflow-x:auto}
.oct-body>table{border-collapse:collapse;background:var(--paper);
  font:15px/1.55 var(--sans);margin:1.5em 0}
.oct-body>table th,.oct-body>table td{padding:10px 16px;text-align:left;
  vertical-align:top;border:1px solid var(--rule-2)}
.oct-body>table thead th{background:var(--green-l);color:var(--green-d);
  font-weight:600}
.oct-body>table caption{caption-side:top;text-align:left;
  font:600 12.5px/1.35 var(--sans);letter-spacing:.02em;color:var(--ink-3);
  padding:0 0 7px;position:sticky;left:0;
  /* Ширина подписи — по колонке текста, а НЕ по таблице: `min-width:100%` даёт
     ширину прокручиваемой таблицы (1170 px на 11 колонок), и подпись обрезается
     краем экрана на первом же слове, которое за него вышло. `min()` держит её
     внутри колонки на обоих концах: 390 px → 350, десктоп → 704 при колонке
     760−2×20. Проверено крайним случаем 27.09.2026. */
  width:min(100vw - 2.5rem,44rem);min-width:0}
.oct-body>pre{background:var(--paper-2);border:1px solid var(--rule-2);
  padding:14px 16px;font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}
/* Голая ссылка без пробелов внутри — единственное, что рвёт колонку на 390 px. */
.oct-body a{overflow-wrap:break-word}
/* Дату публикации ставит робот своим классом, в скине её больше негде взять. */
.pbn-published-date{font:600 12.5px/1.4 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 1.3em}
.oct-src{font-size:13px;line-height:1.55;color:var(--ink-3);
  border-top:1px solid var(--rule-2);padding-top:9px;margin:1.6em 0 0}
.oct-src b{color:var(--ink-2);font-weight:600}
.oct-src a{color:var(--sienna-d)}

/* ============ 10 — оглавление: своё, СВЁРНУТОЕ ======================== */
.oct-toc{margin:1.3em 0;background:var(--paper-2);border:1px solid var(--rule-2);
  border-radius:3px}
.oct-toc>summary{cursor:pointer;padding:12px 16px;font:600 14px/1.3 var(--sans);
  color:var(--green-d);letter-spacing:.03em}
.oct-toc>summary::marker{color:var(--sienna)}
.oct-toc ol{margin:0;padding:0 16px 14px 34px;list-style:decimal}
.oct-toc li{margin:.32em 0;padding-left:0}
.oct-toc li::before{content:none}
.oct-toc a{color:var(--ink);text-decoration:none;font-size:15px}
.oct-toc a:hover{color:var(--sienna-d);text-decoration:underline}
/* шапка липкая (z-70): без запаса заголовок по якорю уезжает ПОД неё */
body.oct-page h2[id]{scroll-margin-top:96px}
@media (max-width:640px){body.oct-page h2[id]{scroll-margin-top:72px}}

/* ============ 11 — FAQ: все ответы развёрнуты ========================
   Обёртки у блока нет: вопросы и ответы донора идут подряд среди прочей прозы
   и отступы держат сами. */
.oct-faq__q{font:700 17.5px/1.4 var(--sans);color:var(--green-d);
  margin:1.1em 0 .35em;padding-left:28px;position:relative}
.oct-faq__q::before{content:'?';position:absolute;left:0;top:-1px;
  width:20px;height:20px;border-radius:50%;background:var(--green);
  color:#fffdf7;font:700 13px/20px var(--sans);text-align:center}
.oct-faq__a{margin:0 0 .9em;padding-left:28px;color:var(--ink)}

/* ============ 12 — ПЛЮСОВ И МИНУСОВ НЕТ =============================== */
/* Список «за и против» — это оценка, а её взять неоткуда: у донора поля
   «Positieve Punten»/«Negatieve Punten» — ПУСТЫЕ поля формы отзыва (119
   страниц), а своя оценка запрещена (§28a). Нет источника — нет поля, значит
   и правил под блок нет. Факты вместо оценки даёт блок §13. */

/* ============ 13 — блок фактов ======================================== */
.oct-fact{margin:1.6em 0;background:var(--green-l);border-radius:3px;
  padding:16px 18px}
.oct-fact h3{margin:0 0 10px;font:600 12.5px/1.2 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;color:var(--green-d)}
.oct-fact dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0}
.oct-fact dt{font:600 13.5px/1.5 var(--sans);color:var(--ink-2)}
.oct-fact dd{margin:0;font-size:15px;color:var(--ink)}
.oct-fact__how{display:inline-block;margin-top:12px;font:600 13px/1.2 var(--sans);
  color:var(--sienna-d)}

/* ============ 13б — плита ОДНОГО бренда на его обзоре ================= */
/* Витрины на обзоре бренда нет (C11.4), но кнопка самого бренда обязана
   остаться: у донора она жила в `entry-header`/`auto-content`, а те снимаются
   чисткой как чужой хром — вместе с CTA (найдено 27.09.2026: 22 обзора из 28
   вышли с НУЛЁМ `/go/`, включая лицензиатов пула, правило СК.4 и п. 10.2). */
.oct-play{display:grid;grid-template-columns:1fr auto;gap:14px 22px;
  align-items:center;margin:1.6em 0;padding:16px 18px;
  background:var(--paper);border:1px solid var(--rule);border-radius:3px}
.oct-play__id{display:flex;flex-direction:column;gap:3px;min-width:0}
.oct-play__plate{display:flex;align-items:center;justify-content:flex-start;
  height:34px;margin-bottom:5px}
.oct-play__plate img{max-height:34px;width:auto;height:auto}
.oct-play__name{font:700 18px/1.25 var(--sans);color:var(--ink)}
.oct-play__lic,.oct-play__note{font:400 13.5px/1.45 var(--sans);color:var(--ink-2)}
.oct-play__offer{grid-column:1;display:flex;flex-direction:column;gap:2px}
.oct-play__lbl{font:600 11.5px/1.2 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--green-d)}
.oct-play__offer strong{font:600 16px/1.35 var(--sans);color:var(--ink)}
.oct-play__terms{font:400 13px/1.45 var(--sans);color:var(--ink-2)}
/* `grid-column:2` обязателен. Без него у блока остаётся определённой только
   строка, а такой элемент раскладка ставит РАНЬШЕ полностью автоматических
   (CSS Grid, шаг «items locked to a given row») — кнопка уезжала в первую
   колонку, а логотип с именем во вторую (снимок 27.09.2026). */
.oct-play__cta{grid-column:2;grid-row:1/span 2;display:flex;
  flex-direction:column;gap:6px;align-items:stretch;text-align:center}
.oct-play--plain .oct-play__cta{grid-row:1}
.oct-play__btn{display:inline-block;padding:12px 26px;border-radius:3px;
  background:var(--sienna-d);color:#fffdf7!important;text-decoration:none;
  font:700 15.5px/1.2 var(--sans);white-space:nowrap}
.oct-play__btn:hover{background:var(--sienna)}
.oct-play__fine{font:400 12px/1.35 var(--sans);color:var(--ink-2)}
@media (max-width:560px){
  .oct-play{grid-template-columns:1fr}
  .oct-play__cta{grid-column:1;grid-row:auto}
  .oct-play__btn{padding:13px 18px}
}

/* ============ 14 — блоки карточек рубрик (хабы) ====================== */
/* Правила блока лежат рядом с разметкой — в oct_pages.css() (.oct-clus,
   .oct-clus__i/__pic/__t/__x): это единственное место, где карточки строятся.
   Второго набора правил здесь нет намеренно — два набора под один блок и дали
   мёртвый CSS, который валит C09.31. */

/* ============ 15 — индекс-список (последние материалы, архивы) ======== */
.oct-idx-wrap{margin:2em 0}
.oct-idx-wrap>h2{margin:0 0 4px;padding-bottom:9px;
  border-bottom:2px solid var(--green)}
.oct-idx-list{list-style:none;margin:0;padding:0}
.oct-idx-list>li{margin:0;padding:12px 0;border-bottom:1px solid var(--rule-2);
  display:flex;gap:14px;align-items:baseline}
.oct-idx-list>li>a{font:600 16.5px/1.4 var(--sans);color:var(--ink);
  text-decoration:none;flex:1 1 auto}
.oct-idx-list>li>a:hover{color:var(--sienna-d)}
.oct-idx__k{font:600 11px/1 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);flex:0 0 auto}
.oct-idx-more{display:inline-block;margin-top:14px;padding:9px 16px;
  font:600 13.5px/1.2 var(--sans);color:var(--green-d);
  border:1px solid var(--green);border-radius:2px;text-decoration:none}
.oct-idx-more:hover{background:var(--green);color:#fffdf7}

/* ---- лента автопостинга: контейнер метки, оформление приходящих анонсов ----
   ⚠️ Анонс кладёт РОБОТ, сразу за меткой, своей разметкой и со своим инлайновым
   `margin-bottom:20px`: `<div style="margin-bottom: 20px"><h4><a>…</a></h4><p>…</p></div>`.
   Значит одеть его можно только от КОНТЕЙНЕРА, и метка обязана лежать в своём
   блоке (в `<ul>` ленты робот дал бы `div` прямым ребёнком списка).
   Заголовка контейнеру не давать: до первой публикации это пустая секция на
   видном месте, и пустой контейнер прячется сам — комментарий внутри `:empty`
   не отменяет. */
.oct-wire{margin:1.6em 0 0}
.oct-wire:empty{display:none;margin:0}
.oct-wire>div{margin:0 0 18px!important;padding:0 0 16px;
  border-bottom:1px solid var(--rule-2)}
.oct-wire>div:last-child{border-bottom:0;padding-bottom:0}
.oct-wire h4{margin:0 0 5px;font:600 18px/1.35 var(--serif);letter-spacing:0}
.oct-wire h4 a{color:var(--ink);text-decoration:none}
.oct-wire h4 a:hover{color:var(--sienna-d)}
.oct-wire p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}

/* ============ 16 — блок ценности ===================================== */
.oct-val{background:var(--paper-2);border-top:3px solid var(--gold);
  padding:20px var(--pad);margin:2em 0}
.oct-val h2{margin:0 0 12px;font-size:23px}
.oct-val__g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px 20px;margin:0 0 12px}
.oct-val__i{display:flex;gap:11px;align-items:flex-start}
.oct-val__ic{flex:0 0 auto;width:26px;height:26px;color:var(--green)}
.oct-val__n{display:block;font:700 25px/1.05 var(--serif);color:var(--green-d)}
.oct-val__t{display:block;font-size:13.6px;line-height:1.45;color:var(--ink-2)}
.oct-val__lnk{font:600 14.5px/1.2 var(--sans);color:var(--sienna-d)}

/* ============ 17 — линия помощи ====================================== */
.oct-help{margin:2em 0 0;background:var(--sienna-l);border-left:3px solid var(--sienna);
  padding:14px 18px;font-size:15px;line-height:1.6;color:var(--ink)}
.oct-help b{font-weight:600;color:var(--sienna-d)}
.oct-help a{color:var(--sienna-d)}

/* ============ 18 — подвал: ОДНА тёмная плита ========================= */
.oct-ft{background:var(--green-d);color:#d8e5df;margin-top:40px;
  font-size:14.5px;line-height:1.65}
.oct-ft a{color:#e7efeb;text-decoration:none}
.oct-ft a:hover{color:#fffdf7;text-decoration:underline}
.oct-ft__g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.25fr;
  gap:26px 30px;padding-top:32px;padding-bottom:22px}
/* ⚠️ body.oct-page h2 (0,1,2) перебивал .oct-ft h2 (0,1,1) и красил заголовки
   колонок подвала в --ink: «Rubrieken» шло 1.38 на тёмной плите. Селектор с body. */
body.oct-page .oct-ft h2{font:600 11.5px/1.2 var(--sans);letter-spacing:.15em;
  text-transform:uppercase;color:#b3cdc2;margin:0 0 12px;font-family:var(--sans)}
.oct-ft ul{list-style:none;margin:0;padding:0}
.oct-ft li{margin:0 0 7px}
.oct-ft__about p{margin:12px 0 0;color:#bdd2c9;font-size:13.8px}
.oct-ft__badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.oct-ft__badge{display:inline-flex;align-items:center;gap:6px;
  background:#0d3329;border:1px solid #1d5c4b;border-radius:2px;
  padding:6px 9px;font:600 11.5px/1 var(--sans);letter-spacing:.06em;
  color:#e7efeb!important}
.oct-ft__badge--age{background:#fffdf7;border-color:#fffdf7;
  color:#14171c!important;font-weight:700}
.oct-ft__badge svg{width:14px;height:14px}
.oct-ft__svc{border-top:1px solid #1d5c4b;padding-top:14px;padding-bottom:12px}
.oct-ft__svc ul{display:flex;flex-wrap:wrap;gap:6px 20px}
.oct-ft__svc li{margin:0;font-size:13.6px}
.oct-ft__law{border-top:1px solid #1d5c4b;padding-top:14px;padding-bottom:26px;
  font-size:12.8px;color:#a8c2b7}
/* ⚠️ раскладка висит на ВНУТРЕННЕМ `oct-in`, а не на самой полосе: между ними
   лежит обёртка ширины, и `display:flex` на внешнем блоке раскладывал ровно
   один элемент — саму обёртку. Три предложения при этом склеивались в строку
   без пробелов («Online Casino TipsGokken kan…», «missen.Wij ontvangen…»):
   зазор `gap` есть, а применять его не к чему. Гейты этого не мерят. */
.oct-ft__law>.oct-in{display:flex;flex-wrap:wrap;gap:6px 22px}
.oct-ft__law span,.oct-ft__law a{color:#a8c2b7}
.oct-ft__val{border-top:1px solid #1d5c4b;padding-top:13px;padding-bottom:13px;
  font-size:13.6px;color:#c6dbd1}
.oct-ft__val b{color:#fffdf7;font-weight:600}
.oct-ft .oct-mk{height:30px}

/* ============ 19 — мобилка (ниже десктопных правил, что отменяет) ===== */
.oct-nav__close{display:none}
@media (max-width:980px){
  :root{--pad:14px}
  .oct-hd__tag{display:none}
  .oct-hd__mast .oct-in{padding-top:11px;padding-bottom:10px}
  .oct-brg__b{display:flex;align-items:center;justify-content:center;gap:8px;
    margin-left:auto;min-width:46px;min-height:46px;padding:0 12px;
    border:1px solid var(--rule);border-radius:2px;background:var(--paper-2);
    font:600 13px/1 var(--sans);color:var(--ink);cursor:pointer}
  .oct-brg__b svg{width:18px;height:18px}
  .oct-hd__side{display:none}
  .oct-nav{display:none;background:var(--paper)}
  /* чекбокс лежит ПЕРЕД <header>, а список рубрик — ВНУТРИ него: `~ .oct-nav`
     соседа не находит (разные родители), и меню не открывалось вовсе.
     Правильный путь — через сам header (gate_menu N3, 27.09.2026). */
  .oct-brg:checked ~ .oct-hd .oct-nav{display:block}
  .oct-nav__l{display:block}
  .oct-nav__l>li>a{padding:13px 14px;min-height:46px;font-size:15.5px;
    border-bottom:1px solid var(--rule-2);justify-content:space-between}
  .oct-nav__l>li>a[aria-current]{background:var(--green-l)}
  /* В бургере панель СТАТИЧЕСКАЯ под своим пунктом и раскрыта: наведения на
     телефоне нет. Заголовок панели прячется — он дословно повторяет пункт над
     собой. Две колонки: 70+ ссылок столбиком уводят бургер за 2 000 px
     ([[header-menu-blocks-follow-owner-order]]). */
  .oct-nav__p{position:static;visibility:visible;opacity:1;transform:none;
    min-width:0;box-shadow:none;border:0;border-bottom:1px solid var(--rule-2);
    background:var(--paper-2);padding:6px 0 8px;
    column-count:2;column-gap:6px;transition:none}
  .oct-nav__p--w{min-width:0}
  .oct-nav__p>b{display:none}
  /* Цель нажатия у ссылки ПОДМЕНЮ — те же 44 px, что у верхнего ряда: `padding:9px`
     при шрифте 14px давал 38 px, и гейт меню краснел «N4 ссылок с целью ниже 44px: 54»
     — по числу пунктов второго уровня, а не ссылок в теле страницы. `min-height` без
     `display:flex` не работает: текст прижимается к верху строки
     ([[drawer-submenu-link-below-44px]]). */
  .oct-nav__p a{display:flex;align-items:center;padding:12px 14px;font-size:14px;
    min-height:44px}
  /* Галочка «раскрыть» в бургере врёт: панель там уже раскрыта. */
  .oct-nav__c{display:none}
  /* Раскрытый бургер — это 7 блоков и 74 ссылки. Без своей прокрутки шапка
     становится выше экрана, а она `sticky`: подвал и тело под ней недостижимы. */
  .oct-brg:checked ~ .oct-hd .oct-nav{max-height:calc(100vh - 62px);
    overflow-y:auto;-webkit-overflow-scrolling:touch}
  .oct-nav__close{display:block;padding:13px 14px;min-height:46px;
    font:600 14px/1.3 var(--sans);color:var(--sienna-d);text-align:center;
    background:var(--paper-2);cursor:pointer}
  .oct-ft__g{grid-template-columns:1fr 1fr;gap:20px}
  .oct-val__g{grid-template-columns:1fr 1fr}
}
@media (min-width:981px){.oct-nav{display:block!important}}
@media (max-width:640px){
  body.oct-page{font-size:16.5px}
  body.oct-page p,body.oct-page li,body.oct-page dd,body.oct-page dt{font-size:16.5px}
  .oct-body{padding:18px 14px 22px}
  .oct-ft__g{grid-template-columns:1fr}
  .oct-val__g{grid-template-columns:1fr}
  .oct-fact dl{grid-template-columns:1fr;gap:2px 0}
  .oct-fact dt{margin-top:8px}
  .oct-body img.oct-lead{width:45%;margin-left:14px}
  /* баннер рубрики 600×292 в колонке 390 px читается, два в ряд — уже нет */
  .oct-tiles{grid-template-columns:1fr;gap:11px}
  .oct-navtiles{grid-template-columns:1fr;gap:9px}
  .oct-gcard{grid-template-columns:1fr;gap:12px}
  /* таблицы: подпись → значение, шапка спрятана (не горизонтальный скролл) */
  .oct-tab--card table,.oct-tab--card tbody,.oct-tab--card tr,.oct-tab--card td,
  .oct-tab--card tbody th{display:block;width:100%}
  .oct-tab--card thead{display:none}
  .oct-tab--card tr{background:var(--paper)!important;
    border:1px solid var(--rule-2);border-radius:3px;margin:0 0 12px;padding:4px 0}
  .oct-tab--card td,.oct-tab--card tbody th{
    border-bottom:1px solid var(--rule-2);padding:8px 16px}
  .oct-tab--card tr>*:last-child{border-bottom:0}
  .oct-tab--card td::before{content:attr(data-oct-l);display:block;
    font:600 11px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;
    color:var(--ink-3);margin-bottom:3px}
  .oct-tab--card td:empty{display:none}
  /* двухколоночная: подпись встаёт НАД значением — 38 % ширины на 375 px
     оставляют значению три слова в строку */
  .oct-tab--key table,.oct-tab--key tbody,.oct-tab--key tr,
  .oct-tab--key td,.oct-tab--key th{display:block;width:100%}
  .oct-tab--key tr{border:1px solid var(--rule-2);border-radius:3px;
    margin:0 0 12px;padding:4px 0}
  .oct-tab--key tr>*:first-child{width:100%;background:transparent;
    border-bottom:0;padding-bottom:0}
  .oct-tab--key tr>*:last-child{border-bottom:0;padding-top:2px}
  /* подзаголовок раздела и на мобилке остаётся полосой, а не подписью строки */
  .oct-tab--key tr>td.oct-tab__sec{background:var(--green-l);
    color:var(--green-d);border-bottom:2px solid var(--green);padding:9px 12px}
}


/* ============ 20 — витрина этапа 08 =================================== */
.octv-wrap{margin:30px 0 34px;padding:22px 22px 18px;background:var(--paper);
  border:1px solid var(--rule);border-radius:14px;box-shadow:var(--sh)}
.octv-h{margin:0 0 6px}
.octv-sub{margin:0 0 16px;font-family:var(--sans);font-size:13.5px;
  line-height:1.5;color:var(--ink-2)}
.octv-sub a{color:var(--sienna-d)}
.octv-fbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0 0 16px;font-family:var(--sans);font-size:13px}
.octv-fbar>span{color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase;
  font-size:11.5px;font-weight:600}
.octv-fbar label{cursor:pointer;padding:7px 15px;border:1px solid var(--rule);
  border-radius:999px;background:var(--paper-2);color:var(--ink);line-height:1}
.octv-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.octv-list>li{display:grid;grid-template-columns:32px minmax(0,296px) minmax(0,1fr) 184px;
  align-items:center;gap:0 20px;min-height:168px;padding:16px 18px;
  border:1px solid var(--rule-2);border-radius:12px;background:var(--paper)}
.octv-list>li:nth-child(-n+3){border-color:var(--green);
  box-shadow:inset 3px 0 0 var(--green)}
.octv-rank{font-family:var(--sans);font-size:20px;font-weight:700;
  color:var(--ink-3);text-align:center}
.octv-id{display:grid;justify-items:start;gap:7px}
.octv-plate{display:grid;place-items:center;width:180px;height:52px;padding:5px;
  background:#fff;border:1px solid var(--rule-2);border-radius:10px}
.octv-plate--p0{height:40px}
/* ⚠️ высота плиты p1 — 56, а не 52: R15 меряет долю по БОЛЬШЕЙ стороне против
   ВНЕШНЕГО размера плиты, и у знака 300×93 (Casino777) выходило 70 % против
   нормы 75 %. Масштаб тут не при чём — знак вписан по высоте, поэтому растёт
   поле под ним (и внутренний отступ 5 вместо 7: это ещё 4 px знака). */
.octv-plate--p1{height:56px}
.octv-plate--p2{height:88px}
.octv-plate--p3{height:124px}
/* ⚠️ R15 «знак вылез за плитку» 119 из 170: у grid-элемента min-height:auto
   равен внутреннему размеру картинки и перебивает max-height:100% — знак
   рисовался ШИРЕ плитки (медиана площади 115 %). Селектор с двумя классами,
   иначе `body.oct-page img{height:auto}` (0,1,2) перебьёт height. */
.octv-wrap .octv-plate img{width:100%;height:100%;min-width:0;min-height:0;
  object-fit:contain;object-position:center;display:block}
.octv-name{font-family:var(--sans);font-size:17px;font-weight:700;line-height:1.2}
.octv-lic{font-family:var(--sans);font-size:11.8px;line-height:1.35;color:var(--ink-3)}
.octv-tags{display:flex;flex-wrap:wrap;gap:6px}
.octv-tag{font-family:var(--sans);font-size:11.5px;font-weight:600;line-height:1;
  padding:5px 9px;border-radius:999px;background:var(--green-l);color:var(--green-d)}
.octv-offer{display:grid;gap:5px;align-content:center}
.octv-lbl{font-family:var(--sans);font-size:11.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.octv-mech{font-family:var(--serif);font-size:23px;line-height:1.2;
  font-weight:600;color:var(--sienna-d)}
.octv-terms{font-family:var(--sans);font-size:12.4px;line-height:1.4;color:var(--ink-2)}
.octv-cta{display:grid;justify-items:stretch;gap:7px;text-align:center}
.octv-btn{display:block;padding:15px 12px;border-radius:10px;background:var(--sienna);
  color:#fff!important;font-family:var(--sans);font-size:15.5px;font-weight:700;
  text-decoration:none;line-height:1.1}
.octv-fine{font-family:var(--sans);font-size:11px;line-height:1.35;color:var(--ink-3)}
.octv-rev{font-family:var(--sans);font-size:12.6px;color:var(--sienna-d)}
.octv-disc{margin:16px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;
  color:var(--ink-3)}
.octv-mlab{display:inline-block;margin:14px auto 2px;padding:12px 22px;cursor:pointer;
  border:1px solid var(--green);border-radius:999px;background:var(--green-l);
  color:var(--green-d);font-family:var(--sans);font-size:14px;font-weight:600}
.octv-wrap{text-align:left}
.octv-mlab{margin-left:auto;margin-right:auto;display:block;width:max-content}
/* состояния: скрытый хвост → «показать все» → фильтры (порядок важен) */
.octv-list>li.octv-hid{display:none}
#octv-more:checked~.octv-list>li.octv-hid{display:grid}
#octv-more:checked~.octv-mlab{display:none}
#octv-f-spins:checked~.octv-list>li:not(.m-spins){display:none}
#octv-f-dep:checked~.octv-list>li:not(.m-dep){display:none}
#octv-f-spins:checked~.octv-fbar label[for="octv-f-spins"],
#octv-f-dep:checked~.octv-fbar label[for="octv-f-dep"]{background:var(--green);
  border-color:var(--green);color:#fff}
@media (max-width:860px){
  .octv-list>li{grid-template-columns:30px minmax(0,1fr);
    grid-template-areas:"rank id" "offer offer" "cta cta";gap:12px 14px}
  .octv-rank{grid-area:rank;align-self:start;padding-top:4px}
  .octv-id{grid-area:id}
  .octv-offer{grid-area:offer}
  .octv-cta{grid-area:cta;grid-template-columns:1fr;justify-items:center}
  .octv-btn{width:100%}
}
@media (max-width:640px){
  .octv-wrap{padding:16px 14px 14px}
  /* R9: строка витрины на телефоне мерилась 331 px против принятых 150–290.
     Плитка и название встают в одну линию, «Welkomstbonus» и мелкий шрифт
     под кнопкой не занимают собственных строк. */
  .octv-list>li{min-height:0;padding:10px;gap:7px 12px}
  /* ⚠️ Высота плиты на телефоне считается ОТ ЗНАКА, а не на глаз: пол 90 px по
     длинной стороне (владелец, 25.09.2026). Знак вписывается с `contain`, то
     есть длинная сторона = (высота поля) × пропорция знака. Почти квадратным
     знакам (p3, 300×238…254) нужно поле 86 px, чтобы выйти на 92–108 px; при
     62 px они мерились 61–72 px, при 82 — 87 px, и гейт валился на одном знаке.
     Внутренний отступ 3, не 5: 6 px поля — это ещё 7 px знака. */
  .octv-plate{width:132px;height:44px;padding:3px}
  .octv-plate--p0{height:34px}
  .octv-plate--p1{height:44px}
  .octv-plate--p2{height:56px}
  .octv-plate--p3{height:86px}
  /* ⚠️ R9: строка мерилась 313–335 px против принятых 150–290. Съедала высоту
     не плита, а лицензия в колонке 91 px — «KSA (Godwits Limited, 888.nl)»
     ложилась в ПЯТЬ строк. Поэтому рядом с плитой стоит только название, а
     лицензия и метки идут во всю ширину строки: пять строк становятся одной. */
  .octv-id{grid-template-columns:132px minmax(0,1fr);
    justify-items:start;align-items:center;gap:6px 11px}
  .octv-plate{grid-row:1;grid-column:1}
  .octv-name{grid-row:1;grid-column:2;font-size:16px;line-height:1.15}
  .octv-lic{grid-column:1/3}
  .octv-tags{grid-column:1/3}
  .octv-lbl{display:none}
  .octv-mech{font-size:19px}
  .octv-btn{padding:13px 12px;grid-column:1/3}
  /* мелкий шрифт и ссылка на обзор — в одну строку под кнопкой, а не двумя */
  .octv-cta{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;
    align-items:center;justify-items:stretch}
  .octv-fine{font-size:10.8px;grid-column:1;text-align:left}
  .octv-rev{grid-column:2;white-space:nowrap}
}

/* ============ 21 — блоки карточек кластера (08.1) ===================== */
.oct-clus{list-style:none;margin:26px 0 30px;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.oct-clus__i{margin:0}
.oct-clus__i>a{display:grid;gap:9px;height:100%;padding:12px 12px 14px;
  text-decoration:none;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule-2);border-radius:12px;align-content:start}
.oct-clus__pic{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:8px;
  background:var(--paper-2);border:1px solid var(--rule-2)}
/* ⚠️ `body.oct-page` в селекторе не для красоты: у общего правила скина
   `body.oct-page img{height:auto}` та же специфичность, и при одинаковом весе
   побеждает то, что ниже в файле. У карточки с размерами в разметке (100×75)
   высота уезжала на 154 px в коробке 16/9 — знак рисовался вдвое больше файла
   и вылезал за рамку (R17 «растянутая картинка», /buitenland/). */
body.oct-page .oct-clus__pic img{width:100%;height:100%;object-fit:cover;
  display:block}
.oct-clus__t{font-family:var(--sans);font-size:15.5px;font-weight:700;line-height:1.3}
.oct-clus__x{font-family:var(--sans);font-size:12.8px;line-height:1.45;color:var(--ink-2)}
.oct-clus__i>a:hover .oct-clus__t{color:var(--sienna-d)}
@media (max-width:640px){
  .oct-clus{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .oct-clus__i>a{padding:9px 9px 11px;gap:7px}
  .oct-clus__t{font-size:14px}
  .oct-clus__x{display:none}
}

/* ============ 22 — подпись редакции (09.28-п) ======================== */
.oct-sig{margin:38px 0 4px;border-top:1px solid var(--rule);padding-top:18px}
.oct-sig__in{display:flex;gap:14px;align-items:flex-start}
.oct-sig__m{flex:0 0 32px;color:var(--green-d)}
.oct-sig__t{min-width:0}
.oct-sig__who{margin:0 0 4px;font-family:var(--sans);font-weight:600;font-size:15px}
.oct-sig__who a{color:var(--ink);text-decoration:none}
.oct-sig__who a:hover{color:var(--sienna-d);text-decoration:underline}
.oct-sig__what{margin:0 0 6px;font-size:14.5px;color:var(--ink-2);max-width:70ch}
.oct-sig__d{margin:0;font-family:var(--sans);font-size:13px;color:var(--ink-3)}
@media (max-width:520px){.oct-sig__in{gap:10px}.oct-sig__what{font-size:14px}}

/* ============ 23 — рамка «без вергюннинга» (09.28b) ================== */
.oct-warn{margin:0 0 22px;border:1px solid var(--sienna);border-left-width:5px;
  border-radius:2px;background:#fdf3ea;padding:14px 16px}
.oct-warn p{margin:0;font-size:15.5px;color:var(--ink);max-width:72ch}
.oct-warn b{color:var(--sienna-d)}
.oct-warn a{color:var(--sienna-d)}
@media (max-width:520px){.oct-warn{padding:12px 13px}.oct-warn p{font-size:15px}}

/* ============ виджеты владельца (fortunida) =========================== */
#subscribe-form-target,#feedback-form{margin:1.8em 0}
#subscribe-form-target .subscribe-form-container,
#feedback-form .feedback-form-container{max-width:100%;margin:0;
  background:var(--paper-2);border:1px solid var(--rule-2);border-radius:3px;
  padding:20px var(--pad) 22px;box-shadow:var(--sh)}
#subscribe-form-target h3,#feedback-form h3{font:700 22px/1.25 var(--serif);
  color:var(--ink);margin:0 0 .45em}
#subscribe-form-target p,#feedback-form p{font:15px/1.6 var(--sans);
  color:var(--ink-2)}
#subscribe-form-target label,#feedback-form label{font:600 13px/1.4 var(--sans);
  color:var(--ink-2);letter-spacing:.02em}
#subscribe-form-target input,#feedback-form input,#feedback-form textarea{
  font:15px/1.5 var(--sans);color:var(--ink);background:var(--paper);
  border:1px solid var(--rule-2);border-radius:3px;padding:10px 12px;
  max-width:100%;box-sizing:border-box}
#subscribe-form-target input:focus,#feedback-form input:focus,
#feedback-form textarea:focus{outline:2px solid var(--green);outline-offset:1px}
#subscribe-form-target .subscribe-form-submit,
#feedback-form .feedback-form-submit{font:600 15px/1.2 var(--sans);
  border-radius:3px;padding:12px 20px;cursor:pointer}
/* Подпись про приватность виджет красит #9CA3AF по белому — 2,3 по контрасту,
   и это не регрессия скина, а цена возврата виджета (гейт «контраст 1»). */
#subscribe-form-target .subscribe-form-privacy,
#feedback-form .feedback-form-privacy{color:var(--ink-3);font-size:13px}
#subscribe-form-target .subscribe-form-error,
#feedback-form .feedback-form-error{color:var(--sienna-d)}