:root{
  --deep:#20303c; --warm:#a2452c; --metal:#e8d8cf;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --page:#f5f6f8; --panel:#fff; --border:#e5e8ed; --line:#eef0f4;
  --subhead:#f7f8fa; --text:#1c2126; --muted:#78838d; --alt:#fafbfc;
  /* Links stay a neutral blue fleet-wide so --warm can be reserved for CTAs, which is the
     one colour rule the money pages are linted on. */
  --link:#2b6ca3; --link-dark:#1b4a74;
  --tint:color-mix(in srgb,var(--warm) 7%,#fff);
  --tint-line:color-mix(in srgb,var(--warm) 18%,#fff);
  --shadow:0 1px 2px rgba(20,28,36,.05),0 1px 10px rgba(20,28,36,.04);
  /* ⚠ LOAD-BEARING ALIASES. The ranked offer block inside a money thread is baked into
     data/lbp-threads.js with INLINE styles referencing the old chrome's token names
     (--orange for the CTA background, --ink-soft for the deal line). Those tokens do not
     exist in this skin, so `background:var(--orange)` was an invalid declaration and every
     CTA rendered as its own `color:#fff` on the white panel — invisible, on the one element
     the site earns from. Verified live on 3 boards before this was added. Aliases rather
     than a rewrite of the data files, because `site_content_gen` appends new threads with
     that same markup and must keep painting correctly without knowing about this skin. */
  --orange:var(--warm); --orange-2:var(--warm); --ink-soft:var(--muted);
  --ink:var(--text); --link-text:var(--link);
}
@supports not (color:color-mix(in srgb,red,#fff)){
  :root{--tint:#f6f7f9;--tint-line:#e5e8ed}
  .footerLegal{background:#16202a}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--text);
  font:14px/1.55 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-dark);text-decoration:underline}
img{max-width:100%;border:0}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 .85em}
ul,ol{margin:0 0 .85em;padding-left:22px}
input,select,textarea,button{font:inherit}

/* ---------- frame ---------- */
.pageWrapper{max-width:1120px;margin:0 auto;padding:0 14px}
#headerMover{background:var(--deep);color:#fff}
.headerInner{max-width:1120px;margin:0 auto;padding:16px 14px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none}
.logo:hover{color:#fff;text-decoration:none}
.logoMark{width:38px;height:38px;flex:none;border-radius:10px;background:var(--warm);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:700}
.logoText{font-size:20px;font-weight:600;line-height:1.15}
.logoTag{display:block;font-size:12px;font-weight:400;opacity:.72;letter-spacing:0;
  margin-top:2px}
.headerSpacer{flex:1}
.headerSearch form{display:flex;gap:6px}
.headerSearch input{width:216px;padding:7px 11px;border:1px solid rgba(255,255,255,.22);
  border-radius:8px;background:rgba(255,255,255,.10);color:#fff}
.headerSearch input::placeholder{color:rgba(255,255,255,.6)}
.headerSearch input:focus{outline:0;background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.45)}
.headerSearch button{padding:7px 13px;border:0;border-radius:8px;background:var(--warm);
  color:#fff;font-weight:600;cursor:pointer}
.headerSearch button:hover{filter:brightness(1.08)}

/* ---------- nav tabs ---------- */
.navTabs{background:var(--deep);box-shadow:inset 0 1px 0 rgba(255,255,255,.09)}
.navTabsInner{max-width:1120px;margin:0 auto;padding:0 14px;display:flex;
  align-items:stretch;flex-wrap:wrap;gap:2px}
.navTabs a.tab{display:block;padding:11px 14px;color:rgba(255,255,255,.76);
  font-weight:600;font-size:14px;border-bottom:2px solid transparent}
.navTabs a.tab:hover{color:#fff;text-decoration:none;background:rgba(255,255,255,.07)}
.navTabs a.tab.selected{color:#fff;border-bottom-color:var(--warm)}
.navTabs .navRight{margin-left:auto;display:flex}
.navToggle{display:none;background:none;border:0;color:#fff;padding:11px 12px;
  font-weight:600;cursor:pointer}
.navToggle:hover{background:rgba(255,255,255,.07)}

/* ---------- breadcrumb ---------- */
.breadBoxTop{margin:14px 0 12px}
.breadcrumb{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:6px;font-size:12.5px;color:var(--muted)}
.breadcrumb li:after{content:"/";padding-left:6px;color:#c3cad2}
.breadcrumb li:last-child:after{content:""}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--link-dark)}

/* ---------- panels ---------- */
.mainContainer{display:flex;gap:16px;align-items:flex-start;padding-bottom:22px}
.content{flex:1;min-width:0}
.sidebar{width:266px;flex:none}
.sectionMain{background:var(--panel);border:1px solid var(--border);border-radius:10px;
  margin-bottom:16px;overflow:hidden;box-shadow:var(--shadow)}
.sectionHeader{background:var(--subhead);border-bottom:1px solid var(--border);
  padding:11px 14px;font-size:14px;font-weight:600;color:var(--text)}
.sectionHeader a{color:var(--text)}
.subHeading{background:var(--subhead);border-bottom:1px solid var(--border);
  padding:9px 14px;font-size:11.5px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em}
.sectionFooter{background:var(--alt);border-top:1px solid var(--border);padding:9px 14px;
  font-size:12.5px;color:var(--muted)}
.titleBar{margin:0 0 14px}
.titleBar h1{font-size:24px;font-weight:600}
.titleBar .muted{font-size:12.5px;color:var(--muted);font-weight:400;margin-top:4px}
.blockBody{padding:14px}
.pageDesc{padding:11px 14px;background:var(--tint);border-bottom:1px solid var(--tint-line);
  font-size:13px;color:#3d4650}

/* ---------- node (forum) list ---------- */
.nodeList{list-style:none;margin:0;padding:0}
.node{display:flex;align-items:center;gap:14px;padding:14px;
  border-bottom:1px solid var(--line)}
.node:last-child{border-bottom:0}
.node:hover{background:var(--alt)}
.nodeIcon{width:40px;height:40px;flex:none;border-radius:11px;background:var(--tint);
  border:1px solid var(--tint-line);display:flex;align-items:center;justify-content:center;
  color:var(--warm);font-size:17px;font-weight:700}
.nodeMain{flex:1;min-width:0}
.nodeTitle{font-size:15px;font-weight:600}
.nodeTitle a{color:var(--text)}
.nodeTitle a:hover{color:var(--link-dark)}
.nodeDesc{font-size:13px;color:var(--muted);margin-top:3px}
.nodeStats{width:132px;flex:none;font-size:12px;color:var(--muted);text-align:right}
.nodeStats dt{display:inline}
.nodeStats dd{display:inline;margin:0;font-weight:600;color:#4b555f}
.nodeLastPost{width:238px;flex:none;font-size:12px;color:var(--muted);
  border-left:1px solid var(--line);padding-left:14px}
.nodeLastPost .title{display:block;font-size:13px;font-weight:500;margin-bottom:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){
  .nodeStats,.nodeLastPost{display:none}
}

/* ---------- thread list ---------- */
.discussionList{list-style:none;margin:0;padding:0}
.discussionListItem{display:flex;gap:13px;padding:13px 14px;
  border-bottom:1px solid var(--line)}
.discussionListItem:last-child{border-bottom:0}
.discussionListItem:hover{background:var(--alt)}
.posterAvatar{width:40px;height:40px;flex:none}
.avatar{display:flex;width:40px;height:40px;border-radius:50%;background:var(--tint);
  border:1px solid var(--tint-line);color:var(--warm);font-weight:700;font-size:16px;
  align-items:center;justify-content:center;text-decoration:none}
.avatar:hover{text-decoration:none;filter:brightness(.97)}
.avatar.s{width:28px;height:28px;font-size:12px}
.avatar.l{width:84px;height:84px;font-size:34px;border-radius:18px}
/* A profile picture fills its slot and inherits the slot's shape, so one 160px file serves
   the 28/40/84px avatars without a second asset. The tinted background stays behind it as
   the placeholder while the image loads. */
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.dlMain{flex:1;min-width:0}
.dlTitle{font-size:15px;font-weight:600;margin-bottom:3px}
.dlTitle a{color:var(--text)}
.dlTitle a:hover{color:var(--link-dark)}
.dlTitle .label{display:inline-block;background:var(--tint);border:1px solid var(--tint-line);
  color:var(--warm);font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:20px;
  vertical-align:1px;margin-right:5px}
.dlMeta{font-size:12px;color:var(--muted)}
.dlSnippet{font-size:13px;color:#525d67;margin-top:5px}
.dlStats{width:124px;flex:none;text-align:center;font-size:12px;color:var(--muted)}
.dlStats dl{margin:0;display:flex;gap:12px;justify-content:center}
.dlStats dd{margin:0;font-weight:600;color:#4b555f}
.dlLastPost{width:176px;flex:none;font-size:12px;color:var(--muted);
  border-left:1px solid var(--line);padding-left:13px}
@media (max-width:900px){
  .dlStats,.dlLastPost{display:none}
  .sidebar{display:none}
}

/* ---------- messages (thread view) ---------- */
.messageList{margin:0;padding:0;list-style:none}
.message{background:var(--panel);border:1px solid var(--border);border-radius:10px;
  margin-bottom:14px;display:flex;overflow:hidden;box-shadow:var(--shadow)}
.messageUserBlock{width:178px;flex:none;background:var(--alt);
  border-right:1px solid var(--line);padding:16px 14px;text-align:center}
.messageUserBlock .avatar{margin:0 auto 9px}
.messageUserBlock .username{font-size:14px;font-weight:600;display:block;color:var(--text)}
.messageUserBlock .userTitle{font-size:12px;color:var(--muted);margin-top:2px}
.messageUserBlock dl{margin:11px 0 0;font-size:12px;color:var(--muted);text-align:left;
  border-top:1px solid var(--border);padding-top:9px}
.messageUserBlock dl div{display:flex;justify-content:space-between;gap:6px}
.messageUserBlock dd{margin:0;font-weight:600;color:#4b555f}
.messageInfo{flex:1;min-width:0;padding:14px 18px}
.messageMeta{display:flex;justify-content:space-between;gap:10px;font-size:12px;
  color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:8px;
  margin-bottom:12px}
.messageContent{font-size:14px;line-height:1.62;overflow-wrap:break-word}
.messageContent h2,.messageContent h3{font-size:15px;margin:1.2em 0 .45em}
.messageContent blockquote{margin:.8em 0;padding:10px 14px;background:var(--alt);
  border:1px solid var(--border);border-left:3px solid var(--warm);border-radius:8px;
  font-size:13.5px}
.messageContent table{border-collapse:collapse;width:100%;margin:.9em 0;font-size:13px}
.messageContent th,.messageContent td{border:1px solid var(--border);padding:8px 10px;
  text-align:left}
.messageContent th{background:var(--subhead)}
@media (max-width:720px){
  .message{display:block}
  .messageUserBlock{width:auto;display:flex;align-items:center;gap:11px;text-align:left;
    border-right:0;border-bottom:1px solid var(--line);padding:11px 14px}
  .messageUserBlock .avatar{margin:0}
  .messageUserBlock dl{display:none}
}

/* offer blocks that live inside generated post bodies */
.messageContent .offer,.messageContent .offerBox{border:1px solid var(--tint-line);
  background:var(--tint);border-radius:10px;padding:13px 15px;margin:1em 0}
.btn,.messageContent .cta{display:inline-block;padding:8px 16px;border-radius:8px;
  background:var(--warm);color:#fff!important;font-weight:600;border:0;
  text-decoration:none!important;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.secondary{background:var(--alt);color:var(--text)!important;
  border:1px solid var(--border)}

/* ---------- member list / profile ---------- */
.memberList{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));
  gap:1px;background:var(--line)}
.memberListItem{background:var(--panel);padding:14px;display:flex;gap:12px;
  align-items:center}
.memberListItem:hover{background:var(--alt)}
.memberListItem .name{font-size:14px;font-weight:600}
.memberListItem .name a{color:var(--text)}
.memberListItem .stats{font-size:12px;color:var(--muted);margin-top:2px}
.profileHeader{display:flex;gap:18px;padding:18px;align-items:center}
.profileHeader .who h1{font-size:22px}
.profileHeader .who .userTitle{font-size:13px;color:var(--muted);margin-top:3px}
.pairs{margin:0;font-size:13px}
.pairs div{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.pairs div:last-child{border-bottom:0}
.pairs dt{color:var(--muted);min-width:104px}
.pairs dd{margin:0;font-weight:600;color:#4b555f}

/* ---------- sidebar blocks ---------- */
.sidebar .sectionMain{margin-bottom:14px}
.sidebar .blockBody{font-size:13px}
.avatarRow{display:flex;flex-wrap:wrap;gap:6px}
.onlineList{margin:0;padding:0;list-style:none;font-size:13px}
.onlineList li{padding:7px 0;border-bottom:1px solid var(--line);line-height:1.45}
.onlineList li:last-child{border-bottom:0}
.onlineList li a{color:var(--text);font-weight:500}
.onlineList .muted{font-size:11.5px}
.statPairs div{display:flex;justify-content:space-between;gap:8px;padding:6px 0;
  border-bottom:1px solid var(--line);font-size:13px}
.statPairs div:last-child{border-bottom:0}
.statPairs dt{color:var(--muted)}
.statPairs dd{margin:0;font-weight:600;color:#4b555f}

/* ---------- forms ---------- */
.formRow{margin-bottom:14px}
.formRow label{display:block;font-size:12.5px;font-weight:600;margin-bottom:5px}
.textCtrl{width:100%;max-width:360px;padding:9px 11px;border:1px solid #d3d9e0;
  border-radius:8px;background:#fff}
.textCtrl:focus{border-color:var(--warm);outline:0;
  box-shadow:0 0 0 3px var(--tint)}
.formNote{font-size:12.5px;color:var(--muted);margin-top:12px}
.infoBlock{background:var(--tint);border:1px solid var(--tint-line);border-radius:10px;
  padding:12px 14px;font-size:13px;margin-bottom:16px}

/* ---------- generic page-node bodies (trust pages) ---------- */
.pageNode{padding:20px 22px;font-size:14px;line-height:1.68;max-width:760px}
.pageNode h1{font-size:26px;margin-bottom:.5em}
.pageNode h2{font-size:17px;margin:1.5em 0 .5em}
.pageNode h3{font-size:14.5px;margin:1.2em 0 .4em}
.pageNode .kick,.pageNode .lede,.pageNode .updated{display:block}
.pageNode .kick{font-size:11.5px;font-weight:700;color:var(--warm);text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:6px}
.pageNode .lede{font-size:16px;color:#3d4650;margin-bottom:1em;line-height:1.6}
.pageNode .updated{font-size:12px;color:var(--muted);margin-bottom:1.4em}
.pageNode .card{border:1px solid var(--border);border-radius:10px;padding:14px 16px;
  margin:1.2em 0;background:var(--alt)}
.pageNode dl{margin:0}
.pageNode .ct{display:flex;gap:12px;padding:7px 0;border-bottom:1px solid var(--line)}
.pageNode .ct:last-child{border-bottom:0}
.pageNode .ct .l{color:var(--muted);min-width:158px}
.pageNode .crumb{display:none}
.pageNode table{border-collapse:collapse;width:100%;margin:1.2em 0;font-size:13px}
.pageNode th,.pageNode td{border:1px solid var(--border);padding:9px 11px;text-align:left}
.pageNode th{background:var(--subhead)}

/* ---------- reviews (toplist) ---------- */
.brandTable{width:100%;border-collapse:collapse;font-size:14px}
.brandTable th{background:var(--subhead);color:var(--muted);font-size:11.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  text-align:left;padding:10px 14px;border-bottom:1px solid var(--border)}
.brandTable td{padding:14px;border-bottom:1px solid var(--line);vertical-align:middle}
.brandTable tr:last-child td{border-bottom:0}
.brandTable tr:hover td{background:var(--alt)}
.brandTable .rank{width:44px;text-align:center;color:var(--muted);font-weight:700}
.brandTable .logo{width:112px}
.brandTable .logo img{max-height:38px;width:auto}
.brandTable .brandName{font-weight:600;font-size:14px}
.brandTable .offer{font-size:13px;color:#4b555f}
.brandTable .go{width:150px;text-align:right}
.brandTable .go .btn{white-space:nowrap}
.stars{color:#e0a516;font-size:12px;letter-spacing:1.5px;margin-top:2px}
/* The toplist is the widest thing on the site and its CTA label is per-locale. A fixed
   column plus nowrap fitted "Visit site" and shoved Dutch "Bezoeken" clean off the screen,
   so: the table scrolls inside its OWN box rather than the page, and on narrow screens the
   button is allowed to wrap and the column to shrink. Nothing may push the body sideways. */
.tableScroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:720px){
  .brandTable .logo,.brandTable .rank{display:none}
  .brandTable td{padding:11px 10px}
  .brandTable .go{width:auto}
  .brandTable .go .btn{white-space:normal;padding:8px 12px}
}
/* Below this width a 5-column toplist cannot fit no matter how the columns are sized — the
   offer text alone sets a minimum. Letting the row STACK is the only thing that keeps the
   CTA fully on screen without a sideways swipe, and the CTA is the point of the page. */
@media (max-width:560px){
  .brandTable,.brandTable tbody,.brandTable tr,.brandTable td{display:block;width:auto}
  .brandTable thead{display:none}
  .brandTable tr{border-bottom:1px solid var(--line);padding:12px 14px}
  .brandTable tr:last-child{border-bottom:0}
  .brandTable td{border-bottom:0;padding:0 0 7px}
  .brandTable tr:hover td{background:transparent}
  .brandTable .go{padding:4px 0 0;text-align:left}
  .brandTable .go .btn{display:block;text-align:center}
}

/* ---------- tools (calculators) ---------- */
.calcGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;
  padding:16px}
.calc{border:1px solid var(--border);border-radius:10px;background:var(--panel);
  overflow:hidden}
.calc h3{background:var(--subhead);border-bottom:1px solid var(--border);padding:10px 13px;
  font-size:13px;font-weight:600}
.calc .body{padding:14px}
.calc .row{display:flex;gap:9px;align-items:center;margin-bottom:9px;font-size:13px}
.calc .row label{flex:1;color:var(--muted)}
.calc input,.calc select{width:112px;padding:7px 9px;border:1px solid #d3d9e0;
  border-radius:8px}
.calc input:focus{outline:0;border-color:var(--warm);box-shadow:0 0 0 3px var(--tint)}
.calc .out{margin-top:12px;padding:11px 13px;background:var(--tint);
  border:1px solid var(--tint-line);border-radius:8px;font-weight:600;font-size:14px}

/* ---------- footer ---------- */
.footer{background:var(--deep);color:rgba(255,255,255,.72);margin-top:8px}
.footerInner{max-width:1120px;margin:0 auto;padding:18px 14px;display:flex;
  flex-wrap:wrap;gap:10px 20px;font-size:13px;align-items:center}
.footer a{color:#fff;opacity:.86}
.footer a:hover{opacity:1}
/* Its own opaque colour, not a translucent overlay: this band is a SIBLING of .footer, so
   an rgba tint composited over the page background instead of over --deep and shipped white
   text on light grey. */
.footerLegal{background:color-mix(in srgb,var(--deep) 82%,#000);
  color:rgba(255,255,255,.66);font-size:12px;line-height:1.6}
.footerLegal .footerInner{display:block;padding:14px}
.footerLegal p{margin:0 0 .5em}
.footerLegal p:last-child{margin:0}
.footerLegal a{color:#fff;text-decoration:underline}

/* ---------- pagination + misc ---------- */
.PageNav{padding:10px 14px;font-size:12.5px;color:var(--muted);background:var(--alt);
  border-top:1px solid var(--border)}
.PageNav a,.PageNav span{display:inline-block;padding:3px 9px;border:1px solid var(--border);
  border-radius:7px;background:#fff;margin-right:4px}
.PageNav span.current{background:var(--warm);color:#fff;border-color:var(--warm)}
.muted{color:var(--muted)}
.right{text-align:right}
.noResults{padding:26px 16px;text-align:center;color:var(--muted)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:10px;top:10px;background:#fff;padding:8px;z-index:10;border-radius:6px}

/* mobile nav: the SAME link list as the tab bar, not a second one.
   Selectors are qualified to out-specify `.navTabs a.tab` above — an unqualified
   `.navTabsInner .tab{display:none}` LOSES to it, which shipped the menu permanently open. */
@media (max-width:780px){
  .navToggle{display:block}
  .navTabsInner{display:block;position:relative;padding:0}
  .navTabs .navTabsInner a.tab,.navTabs .navTabsInner .navRight{display:none}
  .navTabs .navTabsInner.open a.tab{display:block;
    border-bottom:1px solid rgba(255,255,255,.10);padding:12px 14px}
  .navTabs .navTabsInner.open a.tab.selected{border-bottom-color:var(--warm)}
  .navTabs .navTabsInner.open .navRight{display:block;margin:0}
  .headerInner{padding:14px}
  .headerSearch{width:100%}
  .headerSearch input{width:100%}
  .logoText{font-size:18px}
  .pageNode{padding:16px}
}