/*
Theme Name: kompas-slotow
Version: 1.0.4
*/
/* Kompas Slotów — theme
   Deliberately not the reference look. Where affiliate sites default to a dark
   canvas with a yellow/red gradient and pill CTAs, this is a light editorial
   consumer-guide: warm paper, serif headlines, hairline rules, deep teal as the
   structural colour and a single burnt-orange accent reserved for actions. */

:root{
  /* surfaces */
  --paper:#FBF9F5;
  --surface:#FFFFFF;
  --surface-2:#F3EFE8;
  --surface-3:#EAE4D9;
  --ink:#16232A;
  --ink-bar:#121F26;

  /* text */
  --text:#1B2A32;
  --text-2:#4B5D67;
  --text-3:#75858E;
  --text-inv:#F6F2EA;

  /* lines */
  --rule:#DFD7C9;
  --rule-strong:#C6BBA8;

  /* brand */
  --primary:#0E5A57;
  --primary-dk:#0A4340;
  --primary-lt:#E4EFEC;
  --accent:#C2410C;
  --accent-dk:#9A3412;
  --accent-lt:#FBEAE1;
  --good:#2F6F4E;
  --warn:#B45309;

  /* hero band - the one dark surface on an otherwise light site */
  --hero-ink:#0B1A20;
  --hero-text:#F6F2EA;

  /* metrics */
  --container:1160px;
  --measure:74ch;
  --radius:6px;
  --radius-lg:10px;
  --header-h:64px;
  --gap-ss:8px; --gap-s:12px; --gap-m:16px; --gap-ml:24px; --gap-l:36px; --gap-xl:56px;

  --serif:Georgia,'Iowan Old Style','Source Serif Pro','Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.site-width{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gap-ml)}
@media(max-width:600px){.site-width{padding-inline:var(--gap-m)}}

/* ══════════════ header + mega menu ══════════════ */
.c-header{position:sticky;top:0;z-index:80;background:var(--ink-bar);color:var(--text-inv)}
.c-header__container{position:relative}
.c-header__container{
  display:flex;align-items:center;gap:var(--gap-l);
  min-height:var(--header-h);
}
.c-header__logo{display:flex;align-items:center;gap:10px;flex-shrink:0;color:var(--text-inv)}
.c-header__logo:hover{text-decoration:none}
.c-header__logo img{width:34px;height:34px;display:block}
.c-header__logo .site-title{
  margin:0;font-family:var(--serif);font-size:19px;font-weight:700;
  line-height:1;letter-spacing:.01em;color:var(--text-inv);
}
.c-header__logo .site-title em{
  display:block;font-family:var(--sans);font-style:normal;font-size:10px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:#8FB3AE;margin-top:3px;
}

.c-nav{display:flex;align-items:stretch;gap:2px;margin-left:auto}
.c-nav__item{position:relative;display:flex}
.c-nav__trigger{
  display:inline-flex;align-items:center;gap:6px;padding:0 14px;
  min-height:var(--header-h);background:none;border:0;cursor:pointer;
  color:var(--text-inv);font-family:var(--sans);font-size:14px;font-weight:600;
  white-space:nowrap;border-bottom:3px solid transparent;
}
.c-nav__trigger::after{content:'';width:6px;height:6px;border-right:2px solid #8FB3AE;border-bottom:2px solid #8FB3AE;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.c-nav__item:hover .c-nav__trigger,
.c-nav__item:focus-within .c-nav__trigger,
.c-nav__trigger[aria-expanded=true]{border-bottom-color:var(--accent);color:#fff}
.c-nav__item:hover .c-nav__trigger::after,
.c-nav__item:focus-within .c-nav__trigger::after{transform:rotate(-135deg) translateY(-2px)}

.c-nav__panel{
  position:absolute;top:100%;right:0;left:auto;min-width:300px;
  background:var(--surface);color:var(--text);
  border:1px solid var(--rule);border-top:3px solid var(--accent);
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 18px 40px rgba(18,31,38,.18);
  padding:var(--gap-m);opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .14s ease,transform .14s ease,visibility .14s;
}
.c-nav__item:hover .c-nav__panel,
.c-nav__item:focus-within .c-nav__panel,
.c-nav__panel.is-open{opacity:1;visibility:visible;transform:none}
.c-nav__panel h3{
  margin:0 0 var(--gap-ss);font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);
}
.c-nav__panel ul{list-style:none;margin:0;padding:0;columns:1}
.c-nav__panel.is-wide{min-width:520px}
.c-nav__panel.is-wide ul{columns:2;column-gap:var(--gap-ml)}
.c-nav__panel li{margin-bottom:2px;break-inside:avoid}
.c-nav__panel a{
  display:block;padding:7px 10px;border-radius:4px;
  color:var(--text);font-size:14.5px;line-height:1.35;
}
.c-nav__panel a:hover{background:var(--primary-lt);color:var(--primary-dk);text-decoration:none}
.c-nav__panel a[aria-current=page]{background:var(--primary-lt);color:var(--primary-dk);font-weight:600}
.c-nav__all{
  display:block;margin-top:var(--gap-s);padding-top:var(--gap-s);
  border-top:1px solid var(--rule);font-size:13px;font-weight:600;color:var(--primary);
}
.c-header__toggle{
  display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radius);cursor:pointer;padding:8px 11px;color:var(--text-inv);
  font-size:14px;font-weight:600;
}
@media(max-width:1023px){
  .c-header__toggle{display:block}
  .c-nav{
    display:none;position:absolute;left:0;right:0;top:var(--header-h);
    flex-direction:column;background:var(--ink-bar);margin:0;gap:0;
    max-height:calc(100dvh - var(--header-h));overflow-y:auto;
    border-top:1px solid rgba(255,255,255,.12);
  }
  .c-nav.is-open{display:flex}
  .c-nav__item{display:block}
  .c-nav__trigger{width:100%;justify-content:space-between;min-height:52px;padding:0 var(--gap-ml);border-bottom:1px solid rgba(255,255,255,.08)}
  .c-nav__panel{
    position:static;opacity:1;visibility:visible;transform:none;display:none;
    min-width:0;box-shadow:none;border:0;border-radius:0;
    background:#1A2B33;color:var(--text-inv);padding:var(--gap-ss) var(--gap-ml) var(--gap-m);
  }
  .c-nav__panel.is-wide ul{columns:1}
  .c-nav__item.is-open .c-nav__panel{display:block}
  .c-nav__item:hover .c-nav__panel,.c-nav__item:focus-within .c-nav__panel{opacity:1;visibility:visible}
  .c-nav__panel a{color:#D7E3E1}
  .c-nav__panel a:hover,.c-nav__panel a[aria-current=page]{background:rgba(255,255,255,.08);color:#fff}
  .c-nav__panel h3{color:#7E9C98}
  .c-nav__all{border-top-color:rgba(255,255,255,.15);color:#8FB3AE}
}

/* ══════════════ breadcrumbs ══════════════ */
.breadcrumbs{padding-block:var(--gap-s);font-size:13px;color:var(--text-3);border-bottom:1px solid var(--rule)}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.breadcrumbs li::after{content:'›';margin-left:6px;color:var(--rule-strong)}
.breadcrumbs li:last-child::after{content:''}
.breadcrumbs a{color:var(--text-2)}
.breadcrumbs.is-root{display:none}

/* ══════════════ page shell ══════════════ */
.site-main{padding-bottom:var(--gap-xl)}
.entry-title{
  margin:var(--gap-l) 0 var(--gap-m);max-width:20ch;
  font-family:var(--serif);font-size:44px;line-height:1.12;font-weight:700;
  letter-spacing:-.015em;color:var(--ink);
}
@media(max-width:900px){.entry-title{font-size:34px;max-width:none}}
@media(max-width:600px){.entry-title{font-size:28px;margin-top:var(--gap-ml)}}
.entry-lead{
  margin:0 0 var(--gap-ml);max-width:var(--measure);
  font-size:20px;line-height:1.55;color:var(--text-2);
}
@media(max-width:600px){.entry-lead{font-size:18px}}

.entry-content{font-size:17px;line-height:1.68}
.entry-content>p,.entry-content>ul,.entry-content>ol,
.entry-content>h2,.entry-content>h3,.entry-content>blockquote{max-width:var(--measure)}
.entry-content h2{
  margin:var(--gap-xl) 0 var(--gap-m);padding-top:var(--gap-m);
  border-top:2px solid var(--ink);
  font-family:var(--serif);font-size:29px;line-height:1.22;font-weight:700;
  letter-spacing:-.01em;color:var(--ink);
  scroll-margin-top:calc(var(--header-h) + 20px);
}
.entry-content h3{
  margin:var(--gap-ml) 0 var(--gap-s);
  font-family:var(--sans);font-size:19px;line-height:1.35;font-weight:700;color:var(--ink);
  scroll-margin-top:calc(var(--header-h) + 20px);
}
@media(max-width:600px){.entry-content h2{font-size:24px;margin-top:var(--gap-l)}.entry-content h3{font-size:17px}}
.entry-content p{margin:0 0 var(--gap-m)}
.entry-content ul,.entry-content ol{margin:0 0 var(--gap-ml);padding-left:0}
.entry-content li{margin-bottom:10px}
.entry-content ul{list-style:none}
.entry-content ul>li{position:relative;padding-left:24px}
.entry-content ul>li::before{
  content:'';position:absolute;left:2px;top:.62em;width:8px;height:2px;background:var(--accent);
}
.entry-content ol{list-style:none;counter-reset:step}
.entry-content ol>li{position:relative;padding-left:34px;counter-increment:step}
.entry-content ol>li::before{
  content:counter(step);position:absolute;left:0;top:.1em;
  width:23px;height:23px;display:grid;place-items:center;
  background:var(--primary);color:#fff;border-radius:50%;
  font-size:12px;font-weight:700;font-family:var(--sans);
}
.entry-content strong{color:var(--ink);font-weight:700}
.entry-content a{color:var(--primary);text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:3px}
.entry-content a:hover{text-decoration-color:var(--primary)}
.entry-content blockquote{
  margin:0 0 var(--gap-ml);padding:var(--gap-s) 0 var(--gap-s) var(--gap-ml);
  border-left:3px solid var(--accent);font-family:var(--serif);font-size:20px;
  line-height:1.5;color:var(--text-2);
}
.entry-content code{
  font-family:var(--mono);font-size:.88em;background:var(--surface-2);
  padding:2px 5px;border-radius:3px;
}

/* ══════════════ tables ══════════════ */
.table-container{
  width:100%;overflow-x:auto;margin:0 0 var(--gap-ml);
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface);
  -webkit-overflow-scrolling:touch;
}
.table-container table{width:100%;min-width:600px;border-collapse:collapse;font-size:15.5px}
.table-container th{
  background:var(--surface-2);color:var(--ink);font-weight:700;text-align:left;
  padding:13px 16px;border-bottom:2px solid var(--rule-strong);
  font-size:13px;letter-spacing:.05em;text-transform:uppercase;
}
.table-container td{
  padding:13px 16px;text-align:left;color:var(--text-2);
  border-bottom:1px solid var(--rule);vertical-align:top;
}
.table-container td:first-child{color:var(--ink);font-weight:600}
.table-container tr:last-child td{border-bottom:0}
.table-container tbody tr:hover td{background:var(--surface-2)}

/* ══════════════ TOC ══════════════ */
.table-of-content{
  margin:0 0 var(--gap-l);padding:var(--gap-m) var(--gap-ml);
  background:var(--surface);border:1px solid var(--rule);
  border-left:3px solid var(--primary);border-radius:var(--radius);
  max-width:var(--measure);
}
.table-of-content__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--gap-s);
  width:100%;padding:0;background:none;border:0;cursor:pointer;
  color:var(--ink);font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
}
.table-of-content__head::after{content:'+';font-size:18px;color:var(--primary);line-height:1}
.table-of-content.is-open .table-of-content__head::after{content:'–'}
.table-of-content__body{display:none;padding-top:var(--gap-m)}
.table-of-content.is-open .table-of-content__body{display:block}
.table-of-content ol{margin:0;padding-left:0;list-style:none;counter-reset:toc}
.table-of-content li{margin-bottom:7px;counter-increment:toc;padding-left:26px;position:relative}
.table-of-content li::before{
  content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:.15em;
  font-size:11px;font-weight:700;color:var(--text-3);font-family:var(--mono);
}
.table-of-content a{color:var(--text-2);font-size:15px}
.table-of-content a:hover{color:var(--primary)}

/* ══════════════ offer cards ══════════════ */
.c-offers{margin:0 0 var(--gap-xl)}
.c-offers__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--gap-s);
  flex-wrap:wrap;padding-bottom:var(--gap-s);margin-bottom:var(--gap-m);
  border-bottom:1px solid var(--rule);font-size:13px;color:var(--text-3);
}
.c-offer{
  position:relative;display:grid;
  grid-template-columns:230px 1fr 230px;gap:0;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  margin-bottom:var(--gap-m);overflow:hidden;
}
.c-offer__aside{
  padding:var(--gap-ml) var(--gap-m);background:var(--surface-2);
  border-right:1px solid var(--rule);
}
.c-offer__rank{
  display:inline-block;margin-bottom:var(--gap-s);padding:2px 9px;
  background:var(--ink);color:var(--text-inv);border-radius:3px;
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.c-offer__name{
  display:block;margin:0 0 var(--gap-ss);font-family:var(--serif);
  font-size:23px;line-height:1.15;font-weight:700;color:var(--ink);
}
.c-offer__rating{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-3)}
.c-offer__score{
  display:inline-grid;place-items:center;min-width:44px;padding:3px 8px;
  background:var(--primary);color:#fff;border-radius:3px;
  font-size:15px;font-weight:700;font-family:var(--mono);
}
.c-offer__body{padding:var(--gap-ml) var(--gap-m)}
.c-offer__headline{
  margin:0 0 var(--gap-m);padding-bottom:var(--gap-s);border-bottom:1px dashed var(--rule);
  font-size:20px;font-weight:700;color:var(--ink);line-height:1.3;
}
.c-offer__headline b{color:var(--accent)}
.c-offer__stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:var(--gap-s) var(--gap-m);margin:0 0 var(--gap-m);padding:0;list-style:none;
}
.c-offer__stats li{margin:0;padding:0;font-size:12px;color:var(--text-3);letter-spacing:.03em;text-transform:uppercase}
.c-offer__stats b{display:block;margin-top:3px;font-size:15.5px;color:var(--ink);text-transform:none;letter-spacing:0}
.c-offer__pay{display:flex;align-items:center;gap:var(--gap-s);flex-wrap:wrap;margin:0;padding:0;list-style:none}
.c-offer__pay span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.c-offer__pay li{margin:0;padding:0}
.c-offer__pay img{height:19px;width:auto;display:block;opacity:.85}
.c-offer__cta{
  display:flex;flex-direction:column;justify-content:center;gap:var(--gap-s);
  padding:var(--gap-ml) var(--gap-m);border-left:1px solid var(--rule);background:var(--surface);
}
.c-offer__note{margin:0;font-size:11.5px;line-height:1.45;color:var(--text-3);text-align:center}
.c-offer__note a{color:var(--text-2);text-decoration:underline}
@media(max-width:1023px){
  .c-offer{grid-template-columns:1fr 1fr}
  .c-offer__aside{border-right:0;border-bottom:1px solid var(--rule)}
  .c-offer__cta{grid-column:1/-1;border-left:0;border-top:1px solid var(--rule)}
}
@media(max-width:600px){
  .c-offer{grid-template-columns:1fr}
  .c-offer__body{border-top:1px solid var(--rule)}
  .c-offer__headline{font-size:18px}
}

/* ══════════════ buttons ══════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 var(--gap-ml);border:0;cursor:pointer;
  border-radius:var(--radius);background:var(--accent);color:#fff;
  font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:.02em;
  text-align:center;transition:background .15s ease;
}
.btn:hover{background:var(--accent-dk);color:#fff;text-decoration:none}
.btn--block{width:100%}
.btn--quiet{background:var(--primary)}
.btn--quiet:hover{background:var(--primary-dk)}
.btn--ghost{background:transparent;border:1.5px solid var(--primary);color:var(--primary)}
.btn--ghost:hover{background:var(--primary-lt);color:var(--primary-dk)}

/* ══════════════ logo strips ══════════════ */
.logo-strip{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:1px;margin:0 0 var(--gap-ml);padding:0;list-style:none;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;
}
.logo-strip li{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  margin:0;padding:var(--gap-m) var(--gap-s);background:var(--surface);min-height:96px;
}
/* Many vendor marks are white-on-transparent, drawn for dark sites. Those tiles
   get an ink chip so the logo is actually visible on this light theme. */
.logo-strip li.on-dark{background:var(--ink)}
.logo-strip li.on-dark .logo-strip__name{color:#9FB0B7}
.c-offer__pay li.on-dark,.c-footer__marks .on-dark{
  background:var(--ink);border-radius:3px;padding:3px 6px;display:inline-flex;
}
.logo-strip img{max-height:34px;max-width:118px;width:auto;object-fit:contain}
.logo-strip .logo-strip__name{
  font-size:11.5px;font-weight:600;color:var(--text-3);text-align:center;line-height:1.25;
}
.logo-strip__caption{margin:calc(-1 * var(--gap-s)) 0 var(--gap-ml);font-size:12.5px;color:var(--text-3)}

/* ══════════════ FAQ ══════════════ */
.faq{margin:var(--gap-xl) 0 0;max-width:var(--measure)}
.faq__title{
  margin:0 0 var(--gap-m);padding-top:var(--gap-m);border-top:2px solid var(--ink);
  font-family:var(--serif);font-size:29px;font-weight:700;color:var(--ink);
}
@media(max-width:600px){.faq__title{font-size:24px}}
.faq__items{border-top:1px solid var(--rule)}
.faq__item{border-bottom:1px solid var(--rule)}
.faq__q{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--gap-m);width:100%;
  padding:var(--gap-m) 0;background:none;border:0;cursor:pointer;
  color:var(--ink);font-family:var(--sans);font-size:17px;font-weight:600;
  text-align:left;line-height:1.4;
}
.faq__q::after{
  content:'+';flex-shrink:0;width:22px;height:22px;display:grid;place-items:center;
  border:1px solid var(--rule-strong);border-radius:50%;
  color:var(--primary);font-size:15px;line-height:1;
}
.faq__q[aria-expanded=true]::after{content:'–'}
.faq__a{padding:0 0 var(--gap-m);color:var(--text-2);font-size:16px}
.faq__a p:last-child{margin-bottom:0}
.faq__item.is-collapsed .faq__a{display:none}

/* ══════════════ author ══════════════ */
.post-meta.author-vcard{
  display:flex;align-items:center;gap:12px;margin:0 0 var(--gap-l);
  padding:var(--gap-s) 0;border-block:1px solid var(--rule);
  font-size:14px;color:var(--text-3);flex-wrap:wrap;max-width:var(--measure);
}
.post-meta.author-vcard img.avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0}
.post-meta.author-vcard .byline strong{color:var(--ink);font-weight:700}
.post-meta.author-vcard .byline a{color:var(--ink)}
.post-meta.author-vcard time,.post-meta.author-vcard .role{color:var(--text-3)}
.author-bio-box{
  display:flex;gap:var(--gap-ml);margin:var(--gap-xl) 0 0;padding:var(--gap-ml);
  background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--primary);
  border-radius:var(--radius);align-items:flex-start;flex-wrap:wrap;max-width:var(--measure);
}
.author-bio-box .avatar-wrap img{width:76px;height:76px;border-radius:50%;object-fit:cover;display:block}
.author-bio-box .bio-body{flex:1 1 280px;min-width:0}
.author-bio-box h3{margin:0 0 4px;font-family:var(--serif);font-size:20px;line-height:1.2;color:var(--ink)}
.author-bio-box .bio-role{margin:0 0 var(--gap-s);color:var(--text-3);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.author-bio-box .bio-text{margin:0 0 var(--gap-s);font-size:15.5px;line-height:1.6;color:var(--text-2)}
.author-bio-box .bio-credential{margin:0;font-size:13px;color:var(--text-3);font-style:italic}
.author-bio-box .bio-linkedin{
  display:inline-flex;align-items:center;gap:6px;margin-top:var(--gap-s);
  padding:6px 12px;background:var(--primary);color:#fff;border-radius:4px;
  font-size:13px;font-weight:600;
}
@media(max-width:600px){.author-bio-box{padding:var(--gap-m)}.author-bio-box .avatar-wrap img{width:60px;height:60px}}

/* ══════════════ notices ══════════════ */
.notice{
  display:block;padding:var(--gap-m) var(--gap-ml);margin:0 0 var(--gap-ml);max-width:var(--measure);
  background:var(--accent-lt);border-left:3px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0;
  font-size:15.5px;color:var(--text-2);
}
.notice strong{color:var(--ink)}
.notice p:last-child{margin-bottom:0}
.promo-code{
  display:inline-flex;align-items:center;gap:10px;padding:9px 16px;
  background:var(--surface);border:1.5px dashed var(--accent);border-radius:var(--radius);
  font-family:var(--mono);font-weight:700;letter-spacing:.08em;color:var(--accent-dk);font-size:16px;
}

/* ══════════════ forms ══════════════ */
.c-form{max-width:560px;margin-bottom:var(--gap-ml)}
.c-form label{display:block;margin-bottom:6px;font-size:13.5px;font-weight:600;color:var(--ink)}
.c-form input,.c-form textarea,.c-form select{
  width:100%;margin-bottom:var(--gap-m);padding:12px var(--gap-m);
  background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--radius);
  color:var(--text);font:inherit;font-size:15.5px;
}
.c-form textarea{min-height:130px;resize:vertical}
.c-form input::placeholder,.c-form textarea::placeholder{color:var(--text-3)}
.c-form input:focus,.c-form textarea:focus,.c-form select:focus{outline:2px solid var(--primary);outline-offset:0;border-color:var(--primary)}

/* ══════════════ related / section links ══════════════ */
.related{margin:var(--gap-xl) 0 0;padding-top:var(--gap-ml);border-top:2px solid var(--ink)}
.related h2{margin:0 0 var(--gap-m);font-family:var(--serif);font-size:23px;color:var(--ink)}
.related ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;margin:0;padding:0;list-style:none;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.related li{margin:0;padding:0}
.related a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--gap-s);
  height:100%;padding:var(--gap-m);background:var(--surface);
  color:var(--ink);font-size:15.5px;font-weight:600;line-height:1.3;
}
.related a::after{content:'→';color:var(--accent);flex-shrink:0}
.related a:hover{background:var(--primary-lt);text-decoration:none}

/* ══════════════ footer ══════════════ */
.c-footer{background:var(--ink-bar);color:#B9C7CC;padding:var(--gap-xl) 0 var(--gap-ml);margin-top:var(--gap-xl)}
.c-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--gap-l) var(--gap-ml)}
.c-footer h2{
  margin:0 0 var(--gap-s);padding-bottom:var(--gap-ss);border-bottom:1px solid rgba(255,255,255,.14);
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#8FB3AE;
}
.c-footer nav ul{margin:0;padding:0;list-style:none}
.c-footer nav li{margin-bottom:7px}
.c-footer nav a{color:#B9C7CC;font-size:14px}
.c-footer nav a:hover{color:#fff}
.c-footer__disclaimer{
  margin:var(--gap-l) 0 0;padding-top:var(--gap-m);border-top:1px solid rgba(255,255,255,.14);
  font-size:12.5px;line-height:1.65;color:#8B9BA1;max-width:90ch;
}
.c-footer__disclaimer a{color:#A8C6C1}
.c-footer__bottom{
  margin-top:var(--gap-m);padding-top:var(--gap-m);border-top:1px solid rgba(255,255,255,.14);
  display:flex;gap:var(--gap-m);align-items:center;justify-content:space-between;flex-wrap:wrap;
  font-size:12.5px;color:#8B9BA1;
}
.c-footer__badges{display:flex;gap:var(--gap-m);align-items:center;flex-wrap:wrap}
.c-footer__badges a{color:#A8C6C1}
.badge-18{
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  border:2px solid #C2410C;color:#E8814F;font-weight:800;font-size:11px;flex-shrink:0;
}
.c-footer__marks{display:flex;gap:var(--gap-m);align-items:center;flex-wrap:wrap;margin-top:var(--gap-m)}
.c-footer__marks img{height:22px;width:auto;opacity:.55;filter:grayscale(1) brightness(2.2)}

/* ══════════════ sticky mobile CTA ══════════════ */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  padding:9px var(--gap-m);background:rgba(251,249,245,.96);
  border-top:1px solid var(--rule);backdrop-filter:blur(8px);
}
@media(max-width:767px){.sticky-cta{display:block}body{padding-bottom:70px}}

/* ══════════════ utilities ══════════════ */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;z-index:100}
.skip-link:focus{left:0}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.section-title{
  margin:var(--gap-xl) 0 var(--gap-m);padding-top:var(--gap-m);border-top:2px solid var(--ink);
  font-family:var(--serif);font-size:29px;font-weight:700;color:var(--ink);
}
@media(max-width:600px){.section-title{font-size:24px}}

/* ── specificity guards: .entry-content styling must not leak into components ── */
.entry-content .btn{color:#fff;text-decoration:none}
.entry-content .btn--ghost{color:var(--primary)}
.entry-content .logo-strip,.entry-content .related ul,
.entry-content .c-offer__stats,.entry-content .c-offer__pay,
.entry-content .c-nav__panel ul,.entry-content .table-of-content ol{padding-left:0;list-style:none}
.entry-content .logo-strip>li,.entry-content .related li,
.entry-content .c-offer__stats>li,.entry-content .c-offer__pay>li{padding-left:0}
.entry-content .logo-strip>li::before,.entry-content .related li::before,
.entry-content .c-offer__stats>li::before,.entry-content .c-offer__pay>li::before,
.entry-content .c-footer li::before{content:none}
.entry-content .related a{color:var(--ink);text-decoration:none}
.entry-content .c-offer__note a{color:var(--text-2)}
.entry-content .faq__a a{color:var(--primary)}

/* ══════════════ hero (first screen) ══════════════
   One band on every page, over a picture built from the game tiles the page
   covers. The rest of the site stays warm paper and dark type; the hero
   inverts to dark so the first screen reads as a single object and the one
   orange CTA on it has nowhere to hide.

   Two modes. `full` carries the offer card — bonus figures and the promo code
   in one panel, which is the whole point of the block. `lite` drops the card
   on the four pages whose job is proving we are not for sale.

   The grid is head / card / body so the mobile reflow can put the card
   directly under the H1. DOM order and visual order stay identical in both
   layouts, so focus order never diverges from what is on screen. */
.hero{
  position:relative;isolation:isolate;
  background:var(--hero-ink);color:var(--hero-text);
  border-bottom:1px solid rgba(246,242,234,.10);
}
.hero__art{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero__art img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;display:block}
/* the scrim lives here, not in the webp: the picture is object-fit:cover, so a
   baked-in dark left edge would crop to the wrong place off 1600px */
.hero__art::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(97deg,
      rgba(8,20,25,.97) 0%, rgba(8,20,25,.95) 26%,
      rgba(8,20,25,.80) 46%, rgba(8,20,25,.58) 62%, rgba(8,20,25,.52) 100%),
    linear-gradient(to bottom,
      rgba(8,20,25,.62) 0%, rgba(8,20,25,0) 20%,
      rgba(8,20,25,0) 64%, rgba(8,20,25,.66) 100%);
}
.hero__inner{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) 396px;
  grid-template-areas:'head card' 'body card';
  column-gap:var(--gap-xl);row-gap:var(--gap-m);align-items:start;
  padding-block:var(--gap-l) var(--gap-l);
}
.hero__head{grid-area:head;min-width:0}
.hero__body{grid-area:body;min-width:0;max-width:62ch}
.hero__card{grid-area:card;min-width:0;position:sticky;top:calc(var(--header-h) + 16px)}
.hero--lite .hero__inner{
  grid-template-columns:minmax(0,1fr);grid-template-areas:'head' 'body';
}
/* no card covers the right half here, so the same artwork would shout. The
   compliance pages get the picture at half voice. */
.hero--lite .hero__art::after{
  background:
    linear-gradient(97deg,
      rgba(8,20,25,.97) 0%, rgba(8,20,25,.95) 30%,
      rgba(8,20,25,.88) 52%, rgba(8,20,25,.78) 72%, rgba(8,20,25,.76) 100%),
    linear-gradient(to bottom,
      rgba(8,20,25,.62) 0%, rgba(8,20,25,0) 20%,
      rgba(8,20,25,0) 64%, rgba(8,20,25,.66) 100%);
}

.hero__eyebrow{
  margin:0 0 var(--gap-s);padding-bottom:var(--gap-ss);
  border-bottom:2px solid var(--accent);display:inline-block;
  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(246,242,234,.72);
}
.hero__eyebrow a{color:#F0A882}
.hero__eyebrow a:hover{color:#fff}
.hero .entry-title{margin:0;color:var(--hero-text);text-shadow:0 2px 22px rgba(8,20,25,.55)}
.hero .entry-lead{margin:0 0 var(--gap-m);color:rgba(246,242,234,.86)}
/* scoped to the light-on-dark columns only: `.hero a` would also repaint the
   links *inside* the white offer card, including the CTA label */
.hero__head a,.hero__body a{color:#7FD3C6}
.hero__head a:hover,.hero__body a:hover{color:#B8ECE2}

/* three claims instead of a sentence of method: same checks, scannable */
.hero__proof{display:flex;flex-wrap:wrap;gap:var(--gap-ss) var(--gap-m);margin:0 0 var(--gap-s);padding:0;list-style:none}
.hero__proof li{
  position:relative;margin:0;padding-left:23px;
  font-size:13.5px;line-height:1.4;color:rgba(246,242,234,.80);
}
.hero__proof li::before{
  content:'';position:absolute;left:0;top:2px;width:15px;height:15px;border-radius:50%;
  background:rgba(127,211,198,.16);
  /* the tick, drawn rather than typeset, so it lines up at any font size */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.6' fill='none' stroke='%237FD3C6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:14px 14px;
}
.hero__method{margin:0 0 var(--gap-m);font-size:13px;line-height:1.5}

.hero__trust{
  display:flex;align-items:center;gap:var(--gap-s);flex-wrap:wrap;
  padding-top:var(--gap-m);border-top:1px solid rgba(246,242,234,.14);
}
.hero__trust p{margin:0;font-size:13px;line-height:1.45;color:rgba(246,242,234,.62);flex:1 1 230px;min-width:0}
.hero__marks{display:flex;align-items:center;gap:var(--gap-s);margin:0;padding:0;list-style:none;flex-wrap:wrap}
.hero__marks li{margin:0;padding:0;opacity:.85}
.hero__marks li.on-light{background:rgba(246,242,234,.92);border-radius:4px;padding:4px 8px;display:inline-flex;opacity:1}
.hero__marks img{display:block;height:20px;width:auto}

/* ── offer card: bonus + promo code, one panel ── */
.hero-card{
  background:var(--surface);border:1px solid rgba(255,255,255,.14);
  border-top:3px solid var(--accent);border-radius:var(--radius-lg);
  box-shadow:0 22px 48px rgba(4,12,16,.44);overflow:hidden;
}
.hero-card__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--gap-s);
  margin:0;padding:10px var(--gap-m);background:var(--ink);color:var(--text-inv);
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.hero-card__head span{
  font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:none;
  color:rgba(246,242,234,.55);
}
.hero-card__tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-bottom:1px solid var(--rule)}
.hero-card__tab{
  padding:11px 6px;background:var(--surface-2);border:0;border-right:1px solid var(--rule);
  cursor:pointer;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--text-3);
  border-bottom:3px solid transparent;
}
.hero-card__tab:last-child{border-right:0}
.hero-card__tab:hover{color:var(--ink)}
.hero-card__tab[aria-selected=true]{background:var(--surface);color:var(--ink);border-bottom-color:var(--accent)}
.hero-card__panes{padding:var(--gap-m)}
.hero-card__figure{
  margin:0 0 var(--gap-s);font-family:var(--serif);font-size:36px;line-height:1.05;
  font-weight:700;color:var(--ink);letter-spacing:-.02em;
}
.hero-card__figure small{display:block;margin-top:5px;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--accent);letter-spacing:0}
.hero-card__stats{display:grid;gap:0;margin:0 0 var(--gap-s);padding:0;list-style:none;border-top:1px solid var(--rule)}
.hero-card__stats li{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--gap-s);
  margin:0;padding:7px 0;border-bottom:1px solid var(--rule);
}
.hero-card__stats span{font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-3)}
.hero-card__stats b{font-size:14.5px;color:var(--ink);text-align:right}
.hero-card__catch{
  margin:0 0 var(--gap-s);padding:9px var(--gap-s);
  background:var(--accent-lt);border-left:3px solid var(--accent);border-radius:0 4px 4px 0;
  font-size:13px;line-height:1.45;color:var(--text-2);
}
.hero-card__catch b{color:var(--accent-dk);font-weight:700}
.hero-card__cta{margin-top:var(--gap-s);font-size:16px;min-height:50px}
.hero-card__terms{
  display:block;margin-top:9px;text-align:center;
  font-size:12.5px;color:var(--text-2);text-decoration:underline;text-underline-offset:2px;
}
.hero-card__note{margin:var(--gap-ss) 0 0;font-size:11px;line-height:1.45;color:var(--text-3);text-align:center}
.hero-card__note a{color:var(--text-2);text-decoration:underline}

/* ── promo code ── */
.promo-code{
  display:flex;align-items:center;gap:var(--gap-ss);
  padding:9px 10px;border:1px dashed var(--rule-strong);border-radius:var(--radius);
  background:repeating-linear-gradient(135deg,var(--surface-2) 0 9px,var(--surface) 9px 18px);
}
.promo-code__label{
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-3);flex-shrink:0;
}
.promo-code__value{
  flex:1 1 auto;min-width:0;font-family:var(--mono);font-size:16px;font-weight:700;
  letter-spacing:.06em;color:var(--ink);text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.promo-code__copy{
  /* wide enough for "Skopiowano" so the confirmation does not shove the code
     sideways for the two seconds it is shown */
  flex-shrink:0;min-width:92px;padding:6px 11px;border:1px solid var(--primary);border-radius:4px;
  background:var(--primary);color:#fff;cursor:pointer;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.02em;
  transition:background .15s ease;
}
.promo-code__copy:hover{background:var(--primary-dk);border-color:var(--primary-dk)}
.promo-code__copy.is-done{background:var(--good);border-color:var(--good)}

@media(max-width:1099px){
  .hero__inner{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:'head' 'card' 'body';
    gap:var(--gap-m);
  }
  .hero__card{position:static;max-width:440px}
  .hero__body{max-width:none}
}
@media(max-width:767px){
  /* The picture is 2.4:1 and the band is three times taller than it is wide
     here, so `cover` would zoom into a corner of one tile. Crop it to a strip
     behind the eyebrow and the H1 instead, fading into the ink before the
     offer card starts - the reader still gets a picture, and it is one they
     can actually read. */
  .hero__art{height:320px;bottom:auto}
  .hero__art img{object-position:50% 46%}
  .hero__art::after{
    background:
      linear-gradient(to bottom,
        rgba(8,20,25,.72) 0%, rgba(8,20,25,.62) 30%,
        rgba(8,20,25,.86) 74%, var(--hero-ink) 100%);
  }
  .hero__inner{padding-block:var(--gap-ml) var(--gap-ml)}
  .hero__card{max-width:none}
  .hero-card__figure{font-size:30px}
  .hero .entry-lead{font-size:17px}
  .hero__proof{gap:6px var(--gap-s)}
  .hero__proof li{font-size:13px}
}
@media(max-width:359px){
  .promo-code{flex-wrap:wrap;justify-content:center}
  .promo-code__value{flex:1 1 100%;order:-1;font-size:18px}
}

/* specificity guards: the hero sits outside .entry-content but reuses list
   elements the article styles would otherwise claim */
.entry-content .hero__marks,.entry-content .hero-card__stats,.entry-content .hero__proof{padding-left:0;list-style:none}
.entry-content .hero__marks>li,.entry-content .hero-card__stats>li{padding-left:0}
.entry-content .hero__marks>li::before,.entry-content .hero-card__stats>li::before{content:none}
.entry-content .hero__proof>li{padding-left:23px}

/* ══════════════ game band (between hero and article) ══════════════
   The catalogue preview used to sit below the article, which meant a reader
   met the games only after eight screens of copy. It is a band directly under
   the hero now, on every page - dark hero, light strip, then the article, so
   the two furniture blocks read as one opening unit. */
.game-band{
  background:var(--surface-2);border-bottom:1px solid var(--rule);
}
.game-band__inner{padding-block:var(--gap-l)}
.game-band .game-grid{margin:0}
/* the section heading inside the band is a label, not an article rule */
.game-band .section-title{
  margin:0 0 6px;padding-top:0;border-top:0;font-size:24px;
}
.game-band .game-grid__intro{margin:0 0 var(--gap-m);font-size:15px}
.game-band .game-grid__list{
  grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gap-s);
}
.game-band .game-card__meta{padding:9px 10px 11px}
.game-band .game-card__name{font-size:14px}
.game-band .game-card__studio{font-size:12px}
.game-band .game-grid__note{margin-top:var(--gap-s)}
@media(max-width:1099px){
  .game-band .game-grid__list{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* the fifth and sixth tiles would start a lonely second row */
  .game-band .game-card:nth-child(n+5){display:none}
}
@media(max-width:767px){
  .game-band__inner{padding-block:var(--gap-ml)}
  .game-band .section-title{font-size:20px}
  .game-band .game-grid__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .game-band .game-card:nth-child(n+5){display:block}
}

/* ══════════════ game grid ══════════════ */
.game-grid{margin:var(--gap-xl) 0 0}
.game-grid__intro{margin:0 0 var(--gap-m);max-width:var(--measure);color:var(--text-2)}
.game-grid__list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:var(--gap-m);margin:0 0 var(--gap-s);padding:0;list-style:none;
}
.game-card{margin:0;padding:0}
.game-card>a{
  display:block;height:100%;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;
  color:var(--ink);text-decoration:none;transition:border-color .15s,transform .15s;
}
.game-card>a:hover{border-color:var(--primary);transform:translateY(-2px);text-decoration:none}
.game-card__shot{display:block;aspect-ratio:490/278;background:var(--surface-3);overflow:hidden}
.game-card__shot img{width:100%;height:100%;object-fit:cover;display:block}
.game-card__meta{display:block;padding:11px var(--gap-s) 13px}
.game-card__name{display:block;font-weight:700;font-size:15px;line-height:1.25;color:var(--ink)}
.game-card__studio{display:block;margin-top:2px;font-size:12.5px;color:var(--text-3)}
.game-card__kind{
  display:inline-block;margin-top:8px;padding:2px 8px;border-radius:3px;
  background:var(--surface-2);color:var(--text-2);
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.game-card--live .game-card__kind{background:var(--primary-lt);color:var(--primary-dk)}
.game-card--jackpot .game-card__kind{background:var(--accent-lt);color:var(--accent-dk)}
.game-grid__note{margin:0;font-size:12px;color:var(--text-3);max-width:var(--measure)}
.entry-content .game-grid__list{padding-left:0;list-style:none}
.entry-content .game-grid__list>li{padding-left:0}
.entry-content .game-grid__list>li::before{content:none}
.entry-content .game-card>a{color:var(--ink);text-decoration:none}

/* ══════════════ bonus-type marks (offer aside) ══════════════
   The aside is the slot where an operator logo would sit. This catalogue names
   no operator, so the slot carries a readout dial for the bonus TYPE instead.

   The plate is CSS, not SVG: the same white tile, hairline and 6px radius as
   `.logo-strip li`, i.e. the theme's existing "an object goes here" primitive.
   It is a flex item with flex:1 1 auto, so it ABSORBS the aside's leftover
   height — the mark fills the empty beige instead of being stacked on top of
   it. The dial inside keeps a fixed size on every card, so a column of cards
   reads as one optical size. See BONUS_MARKS in scripts/build_site.py. */
.c-offer__aside{display:flex;flex-direction:column;align-items:stretch}
.c-offer__rank{align-self:flex-start}
.c-offer__mark{
  flex:1 1 auto;min-height:80px;max-height:136px;
  display:flex;align-items:center;justify-content:center;
  margin:0 0 var(--gap-s);
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
}
.c-offer__mark svg{display:block;flex:none;width:64px;height:64px;max-width:100%}

/* Tablet: the card is two columns, so the aside is wide and badly under-filled.
   The plate is uncapped there and simply takes the slack, which turns a dead
   beige band into a logo-strip-shaped tile. Card height does not change. */
@media(max-width:1023px){
  .c-offer__mark{min-height:120px;max-height:none}
  .c-offer__mark svg{width:76px;height:76px}
}
/* Phone: the aside is a short full-width band, so a stacked plate would add
   ~110px to every card. The plate moves beside the three text lines instead
   and card height is unchanged. Every child needs a grid-area here — a new
   child added to the aside without one would land in an implicit row. */
@media(max-width:600px){
  .c-offer__aside{
    display:grid;grid-template-columns:96px minmax(0,1fr);
    grid-template-areas:'mark rank' 'mark name' 'mark score';
    column-gap:var(--gap-s);align-content:center;
  }
  .c-offer__mark{
    grid-area:mark;align-self:center;justify-self:stretch;margin:0;
    min-height:96px;max-height:96px;
  }
  .c-offer__mark svg{width:56px;height:56px}
  .c-offer__rank{grid-area:rank;align-self:start;justify-self:start}
  .c-offer__name{grid-area:name}
  .c-offer__rating{grid-area:score;align-self:start}
}

/* ── specificity guards ──
   The offers block is emitted inside .entry-content (build_page), which
   restyles ul/li/a and injects ::before bullets and ::before counters. The mark
   is a plain div + svg so nothing matches today; these keep it immune if the
   leak widens, and the explicit svg sizing survives any future bare
   `svg{width:…;fill:currentColor}` arriving from the wp-camouflage stylesheet
   (today its only svg rule is scoped to .author-bio-box .bio-linkedin svg).
   fill:none here is safe because every element in every mark declares its own
   fill, and a presentation attribute on the child beats an inherited value. */
.entry-content .c-offer__mark{margin:0 0 var(--gap-s);padding:0;list-style:none}
.entry-content .c-offer__mark::before,.entry-content .c-offer__mark::after{content:none}
.entry-content .c-offer__mark svg{display:block;width:64px;height:64px;max-width:100%;fill:none}
@media(max-width:1023px){.entry-content .c-offer__mark svg{width:76px;height:76px}}
@media(max-width:600px){
  .entry-content .c-offer__mark{margin:0}
  .entry-content .c-offer__mark svg{width:56px;height:56px}
}