/*
Theme Name: EcoPayz kasinot
Description: Light editorial comparison layout for the Finnish payment-method EMD sites. Table-first toplist, serif display, hairline rules.
Version: 1.0.9
Author: Nordkap Media OU
Text Domain: vertailupoyta
*/

/* ===========================================================================
   Design system

   Deliberately unlike every other site in the portfolio, which are all dark
   card stacks on a sans stack. Here: warm light canvas, a serif display face,
   hairline rules instead of borders-everywhere, and the toplist is a real
   comparison TABLE rather than stacked cards - so eight offers can be compared
   on one screen instead of scrolled past one at a time.

   Brand accent is injected per site via inc/brand.php; everything else is
   shared.
   =========================================================================== */

:root{
  /* canvas + ink */
  --canvas:#faf8f5;
  --paper:#ffffff;
  --paper-2:#f4f1ec;
  --ink:#16141a;
  --ink-2:#3d3944;
  --ink-3:#6b6676;
  --ink-4:#9b96a5;
  --rule:#e3ded6;
  --rule-2:#cfc8bd;

  /* accent - overridden per brand */
  --acc:#c2185b;
  --acc-d:#8e0f42;
  --acc-l:#fce4ec;
  --acc-ink:#ffffff;

  /* semantic */
  --good:#1b7a52;
  --good-l:#e6f3ed;
  --bad:#b3261e;
  --bad-l:#fbeae9;
  --warn:#8a5a00;
  --warn-l:#fdf3e2;

  --maxw:1180px;
  --gut:22px;
  --r:4px;
  --r-lg:8px;

  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.012em;margin:0}
h1{font-size:clamp(38px,6.2vw,68px)}
h2{font-size:clamp(28px,4vw,42px)}
h3{font-size:clamp(21px,2.4vw,27px)}
h4{font-size:19px}
p{margin:0 0 16px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:760px}

/* ---------- utility bar ---------- */
.ubar{background:var(--ink);color:#cfc9d6;font-size:12.5px;letter-spacing:.01em}
.ubar .wrap{display:flex;gap:18px;align-items:center;justify-content:space-between;
  min-height:38px;flex-wrap:wrap;padding-top:7px;padding-bottom:7px}
.ubar b{color:#fff;font-weight:600}
.ubar .ub-r{display:flex;gap:16px;align-items:center}
.ubar a{color:#cfc9d6;text-decoration:underline;text-underline-offset:2px}
.ubar a:hover{color:#fff}

/* ---------- header ---------- */
.hdr{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:60}
.hdr .wrap{display:flex;align-items:center;gap:24px;min-height:70px}
.brand{display:flex;align-items:baseline;gap:9px;text-decoration:none;font-family:var(--serif);
  font-size:25px;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.brand em{font-style:normal;color:var(--acc)}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--acc);display:inline-block;
  margin-left:1px;transform:translateY(-1px)}
.nav{display:flex;gap:26px;margin-left:auto;align-items:center}
/* :not(.btn) is load-bearing. A descendant link rule outranks .btn-ink on
   specificity, which painted the header CTA dark text on a dark button. */
.nav a:not(.btn){font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none;
  padding:6px 0;border-bottom:2px solid transparent}
.nav a:not(.btn):hover{color:var(--ink);border-bottom-color:var(--acc)}
.navcta{margin-left:4px}
.navbtn{display:none;background:none;border:1px solid var(--rule-2);border-radius:var(--r);
  padding:8px 11px;cursor:pointer;margin-left:auto}
.navbtn span{display:block;width:17px;height:2px;background:var(--ink);margin:3px 0}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.005em;
  padding:12px 20px;border-radius:var(--r);text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s;white-space:nowrap}
.btn-acc{background:var(--acc);color:var(--acc-ink);box-shadow:0 1px 0 var(--acc-d)}
.btn-acc:hover{background:var(--acc-d);transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.16)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000;transform:translateY(-1px)}
.btn-out{background:var(--paper);color:var(--ink);border-color:var(--rule-2)}
.btn-out:hover{border-color:var(--ink);background:var(--paper-2)}
.btn-sm{padding:8px 14px;font-size:13.5px}
.btn-lg{padding:15px 26px;font-size:16.5px}
.btn-block{width:100%}

/* ---------- hero ---------- */
.hero{background:var(--paper);border-bottom:1px solid var(--rule);padding:46px 0 40px}
.hero-g{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:48px;align-items:start}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:16px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--acc)}
.hero h1{margin-bottom:18px}
.hero .lede{font-size:19.5px;line-height:1.55;color:var(--ink-2);max-width:62ch}
.meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;font-size:13.5px;color:var(--ink-3);
  padding-top:18px;border-top:1px solid var(--rule)}
.meta b{color:var(--ink);font-weight:600}
.meta a{color:var(--ink-2)}

/* verdict panel - the editorial answer, stated before the list */
.verdict{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:26px 26px 24px;
  position:relative;overflow:hidden}
.verdict::after{content:"";position:absolute;inset:auto -40px -40px auto;width:150px;height:150px;
  background:var(--acc);opacity:.17;border-radius:50%}
.verdict h2{font-size:23px;color:#fff;margin-bottom:12px;position:relative}
.verdict p{font-size:15px;line-height:1.58;color:#d6d1dd;position:relative;margin-bottom:14px}
.verdict .v-k{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);
  font-weight:700;margin-bottom:10px;display:block;position:relative}
.verdict .btn{position:relative}
.verdict .v-fine{font-size:11.5px;color:#8f8a99;margin:12px 0 0;position:relative}

/* ---------- sticky section nav ---------- */
.snav{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:70px;z-index:50}
.snav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-top:0;padding-bottom:0}
.snav .wrap::-webkit-scrollbar{display:none}
.snav a{flex:none;font-size:13.5px;font-weight:600;color:var(--ink-3);text-decoration:none;
  padding:13px 14px;border-bottom:2px solid transparent;white-space:nowrap}
.snav a:hover{color:var(--ink)}
.snav a.on{color:var(--acc);border-bottom-color:var(--acc)}

/* ===========================================================================
   Toplist - a real comparison table
   Eight offers readable on one screen. Each row is scannable left to right and
   ends in its own CTA; the header row sticks while the body scrolls.
   =========================================================================== */
.tl-wrap{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);
  overflow:hidden;margin:0 0 14px}
.tl-head{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--rule);
  background:var(--paper-2);flex-wrap:wrap}
.tl-head h2{font-size:22px}
.tl-head .tl-n{font-size:13px;color:var(--ink-3);margin-left:auto}

.tlist{width:100%;border-collapse:collapse;font-size:15px}
/* Not sticky: stacked under the sticky header AND the sticky section nav it
   overlapped row one instead of docking cleanly. The table is short enough
   to read without a pinned header. */
.tlist thead th{background:var(--paper-2);font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-align:left;
  padding:11px 14px;border-bottom:1px solid var(--rule-2)}
.tlist tbody tr{border-bottom:1px solid var(--rule)}
.tlist tbody tr:last-child{border-bottom:0}
.tlist tbody tr:hover{background:#fcfaf7}
.tlist tbody tr.is-top{background:var(--acc-l)}
.tlist tbody tr.is-top:hover{background:var(--acc-l)}
.tlist td{padding:16px 14px;vertical-align:middle}

.c-rank{width:54px;text-align:center}
.rank-n{font-family:var(--serif);font-size:26px;color:var(--ink-4);line-height:1}
.is-top .rank-n{color:var(--acc)}
.rank-tag{display:block;font-family:var(--sans);font-size:9.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--acc);margin-top:3px}

.c-name{min-width:210px}
.op{display:flex;align-items:center;gap:13px}
.op-logo{width:104px;height:46px;flex:none;display:flex;align-items:center;justify-content:center;background:#15131a;
  border-radius:var(--r);padding:6px 9px;overflow:hidden}
/* Fixed box + contain: WordPress reports no intrinsic size for SVG attachments,
   so auto sizing cannot be trusted. Dark plate because several logos are white. */
.op-logo img{width:100%;height:100%;object-fit:contain;display:block}
.op-logo i{font-style:normal;font-family:var(--serif);font-size:19px;color:#fff}
.op-t b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.op-t small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.op-t a{text-decoration:none}
.op-t a:hover b{color:var(--acc)}

.c-offer{min-width:190px}
.offer-b{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.offer-s{font-size:13px;color:var(--good);font-weight:600;margin-top:3px}
.offer-n{font-size:12.5px;color:var(--ink-3);margin-top:3px}

.c-fact{min-width:150px;font-size:13.5px;color:var(--ink-2)}
.c-fact b{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-4);font-weight:700;margin-bottom:2px}
.c-fact .na{color:var(--ink-4)}

.c-act{width:178px;text-align:right}
.c-act .btn{width:100%}
.c-act .t{display:block;font-size:12px;color:var(--ink-3);margin-top:7px;text-decoration:underline;
  text-underline-offset:2px}
.c-act .t:hover{color:var(--acc)}

.tl-foot{padding:13px 20px;border-top:1px solid var(--rule);background:var(--paper-2);
  font-size:12.5px;color:var(--ink-3)}
.tl-foot a{color:var(--ink-2)}

/* score pill */
.score{display:inline-flex;align-items:baseline;gap:4px;font-family:var(--serif);font-size:20px;
  line-height:1;color:var(--ink)}
.score small{font-family:var(--sans);font-size:11px;color:var(--ink-4);font-weight:600}

/* ---------- prose ---------- */
.sec{padding:52px 0;border-bottom:1px solid var(--rule)}
.sec:last-child{border-bottom:0}
.sec-k{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc);margin-bottom:12px}
.prose{font-size:17px;color:var(--ink-2);max-width:72ch}
.prose h2{color:var(--ink);margin:0 0 18px}
.prose h3{color:var(--ink);margin:34px 0 12px}
.prose p{margin:0 0 17px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin-bottom:8px}
.prose strong{color:var(--ink);font-weight:650}
.prose a:not(.btn){color:var(--acc-d);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
.prose a:not(.btn):hover{background:var(--acc-l)}

/* pull quote */
.pull{margin:30px 0;padding:0 0 0 22px;border-left:3px solid var(--acc);
  font-family:var(--serif);font-size:25px;line-height:1.32;color:var(--ink)}
.pull cite{display:block;font-family:var(--sans);font-size:13px;font-style:normal;
  color:var(--ink-3);margin-top:12px}
.pull cite b{color:var(--ink-2);font-weight:650}

/* ledger-style pros/cons - hairlines, not boxes */
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:28px 0;border:1px solid var(--rule);
  border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.ledger>div{padding:22px 24px}
.ledger>div+div{border-left:1px solid var(--rule)}
/* A label, not a heading: as an <h3> it skipped a level under the page H1. */
.ledger .lg-h{display:block;font-family:var(--sans);font-size:12px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;margin:0 0 14px}
.ledger .lg-p .lg-h{color:var(--good)}
.ledger .lg-m .lg-h{color:var(--bad)}
.ledger ul{list-style:none;margin:0;padding:0}
.ledger li{position:relative;padding-left:24px;margin-bottom:11px;font-size:15px;color:var(--ink-2);
  line-height:1.5}
.ledger li::before{position:absolute;left:0;top:0;font-weight:700}
.lg-p li::before{content:"+";color:var(--good)}
.lg-m li::before{content:"\2212";color:var(--bad)}

/* callouts */
.note{border-left:3px solid var(--rule-2);padding:4px 0 4px 18px;margin:24px 0;font-size:15px;
  color:var(--ink-3)}
.flag{display:flex;gap:14px;padding:18px 20px;border-radius:var(--r-lg);margin:26px 0;font-size:15.5px;
  line-height:1.55}
.flag b{display:block;margin-bottom:3px}
.flag.warn{background:var(--warn-l);color:#5e3e00}
.flag.good{background:var(--good-l);color:#0f4a32}
.flag.bad{background:var(--bad-l);color:#7d1a15}
.flag .ic{font-family:var(--serif);font-size:22px;line-height:1;flex:none}

/* steps */
.steps{counter-reset:s;list-style:none;margin:26px 0;padding:0}
.steps li{counter-increment:s;position:relative;padding:0 0 22px 50px;border-left:1px solid var(--rule);
  margin-left:15px}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{content:counter(s);position:absolute;left:-15px;top:-2px;width:30px;height:30px;
  border-radius:50%;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;
  font-family:var(--sans);font-weight:800;font-size:13.5px}
.steps b{display:block;color:var(--ink);margin-bottom:3px;font-size:16px}

/* data table */
.dt-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-lg);margin:26px 0;
  background:var(--paper)}
.dt{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.dt th{background:var(--paper-2);text-align:left;font-family:var(--sans);font-size:11.5px;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  padding:11px 15px;border-bottom:1px solid var(--rule-2)}
.dt td{padding:12px 15px;border-bottom:1px solid var(--rule);color:var(--ink-2)}
.dt tr:last-child td{border-bottom:0}
.dt td b{color:var(--ink)}

/* FAQ */
.faq{border-top:1px solid var(--rule);margin-top:10px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;position:relative;
  font-family:var(--serif);font-size:20px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:21px;color:var(--acc);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 0 20px;font-size:16px;color:var(--ink-2);max-width:72ch}
.faq .a p:last-child{margin-bottom:0}

/* figures */
.fig{margin:30px 0}
.fig img{width:100%;border:1px solid var(--rule);border-radius:var(--r-lg);display:block;background:var(--paper)}
.fig figcaption{margin-top:9px;font-size:13px;color:var(--ink-3);line-height:1.5}
.fig figcaption .src{display:block;margin-top:3px;font-size:12px;color:var(--ink-4)}
.fig figcaption a{color:var(--ink-3)}

/* author / editorial */
.byline{display:flex;align-items:center;gap:13px;padding:20px 0;border-top:1px solid var(--rule);
  margin-top:34px}
.ava{width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:grid;
  place-items:center;font-family:var(--serif);font-size:17px;flex:none}
.byline .b-t{font-size:14px;color:var(--ink-3);line-height:1.5}
.byline .b-t b{display:block;color:var(--ink);font-size:15.5px;font-weight:650}
.byline a{color:var(--ink-2)}

/* responsible gambling block */
.rg{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r-lg);padding:20px 22px;
  margin:30px 0;display:flex;gap:16px;font-size:14px;color:var(--ink-2);line-height:1.55}
.rg .a18{width:42px;height:42px;border-radius:50%;border:2px solid var(--bad);color:var(--bad);
  display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}

/* ---------- footer ---------- */
.ftr{background:var(--ink);color:#b8b2c2;padding:52px 0 26px;font-size:14px}
.ftr a:not(.btn){color:#b8b2c2;text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline}
.f-g{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px;padding-bottom:30px;
  border-bottom:1px solid #2e2a35}
.f-g h4{font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;margin:0 0 14px}
.f-g nav{display:grid;gap:9px}
.f-brand{font-family:var(--serif);font-size:24px;color:#fff;margin-bottom:12px;display:block}
.f-bot{padding-top:22px;display:flex;gap:18px;justify-content:space-between;flex-wrap:wrap;
  font-size:12.5px;color:#8b8596}
.f-badges{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.f-badges span{border:1px solid #3a3544;border-radius:var(--r);padding:5px 10px;font-size:11.5px}

/* ---------- mobile CTA dock ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;gap:10px;padding:10px 14px;
  background:rgba(255,255,255,.97);border-top:1px solid var(--rule-2);
  box-shadow:0 -4px 20px rgba(0,0,0,.08);backdrop-filter:blur(6px)}
.dock .btn{flex:1}

/* ---------- responsive ---------- */
@media(max-width:1000px){
  /* Heading first on a phone. Ordering the verdict above it meant the reader
     met a dark panel before the page title, and made that panel the LCP. */
  .hero-g{grid-template-columns:minmax(0,1fr);gap:28px}
  .tlist thead{display:none}
  .tlist tbody tr{display:grid;grid-template-columns:48px 1fr;gap:4px 12px;padding:16px 14px}
  .tlist td{padding:0;border:0}
  .c-rank{grid-row:1;grid-column:1;align-self:start;padding-top:4px!important}
  .c-name{grid-row:1;grid-column:2}
  .c-offer{grid-column:1/-1;margin-top:12px}
  .c-fact{grid-column:1/-1;margin-top:9px;display:flex;gap:7px;align-items:baseline}
  .c-fact b{margin:0}
  .c-act{grid-column:1/-1;width:auto;text-align:left;margin-top:14px}
  .ledger{grid-template-columns:1fr}
  .ledger>div+div{border-left:0;border-top:1px solid var(--rule)}
  .f-g{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  body{font-size:16.5px}
  .nav{display:none}
  .navbtn{display:block}
  .nav.open{display:flex;position:absolute;top:70px;left:0;right:0;background:var(--paper);
    flex-direction:column;gap:0;padding:8px 22px 18px;border-bottom:1px solid var(--rule);
    box-shadow:0 10px 24px rgba(0,0,0,.07)}
  .nav.open a{padding:12px 0;border-bottom:1px solid var(--rule);border-left:0}
  .navcta{display:none}
  .snav{top:70px}
  .hero{padding:32px 0 28px}
  .sec{padding:38px 0}
  .dock{display:flex}
  body{padding-bottom:70px}
  .f-g{grid-template-columns:1fr;gap:26px}
  .pull{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* --- hero top pick, author portraits, CTA-only nav ----------------------- */
.nav.nav-cta { display: flex; justify-content: flex-end; gap: 0; }

.hpick {
	background: #fff; border: 1px solid var(--line, #e6ded3); border-radius: 16px;
	padding: 18px 18px 16px; display: grid; gap: 8px; justify-items: center;
	text-align: center; box-shadow: 0 18px 40px rgba(12, 40, 28, .10);
}
.hp-k {
	font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
	color: var(--acc, #0b6b47);
}
.hp-logo {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 56px; border-radius: 10px; background: #11211a;
	padding: 7px 12px; overflow: hidden;
}
.hp-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hp-logo i { font-style: normal; font-weight: 800; color: #fff; }
.hp-name { font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.hp-rate { font-size: .86rem; color: var(--ink-3, #6f8179); }
.hp-rate b { color: var(--ink, #14211b); font-size: .98rem; }
.hp-offer {
	display: grid; gap: 1px; width: 100%; padding: 10px 8px; border-radius: 10px;
	background: var(--acc-l, #e4f3ec);
}
.hp-offer span {
	font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	color: var(--acc-d, #074b32);
}
.hp-offer b { font-size: .98rem; line-height: 1.25; }
.hp-offer em { font-style: normal; font-size: .82rem; font-weight: 600; color: var(--acc-d, #074b32); }
.hp-f { font-size: .8rem; color: var(--ink-3, #6f8179); }
.hp-f b { color: var(--ink-2, #45574f); font-weight: 600; }
.hpick .btn-block { margin-top: 2px; }
.hp-all { font-size: .84rem; font-weight: 600; }
.hp-fine { font-size: .66rem; color: var(--ink-3, #6f8179); line-height: 1.45; }

.face { border-radius: 50%; display: block; flex: none; background: var(--acc-l, #e4f3ec); }
.face-sm { width: 26px; height: 26px; }
.face-lg { width: 104px; height: 104px; }
.meta .by-p { display: inline-flex; align-items: center; gap: 7px; }
.person { margin: 0 0 18px; }

@media (max-width: 760px) {
	.face-lg { width: 84px; height: 84px; }
}

/* --- flow diagram, Parhaat lede, Uudet grid ----------------------------- */
.flow { display: block; width: 100%; height: auto; border-radius: 16px; margin: 26px 0 4px; }
.tl-lede { max-width: 72ch; color: var(--ink-2, #45574f); margin: 0 0 18px; }

.uudet { margin: 34px 0 6px; }
.uudet h2 { margin-bottom: 6px; }
.u-lede { max-width: 70ch; color: var(--ink-2, #45574f); margin: 0 0 18px; }
.u-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.u-card {
	background: #fff; border: 1px solid var(--line, #e6ded3); border-radius: 14px;
	padding: 16px; display: grid; gap: 7px; justify-items: center; text-align: center;
}
.u-logo {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 48px; border-radius: 9px; background: #11211a;
	padding: 6px 10px; overflow: hidden;
}
.u-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.u-logo i { font-style: normal; font-weight: 800; color: #fff; }
.u-card b { font-size: 1rem; }
.u-offer { font-size: .9rem; font-weight: 600; color: var(--acc-d, #074b32); }
.u-lic { font-size: .8rem; color: var(--ink-3, #6f8179); }
.u-card .btn { width: 100%; }

@media (max-width: 860px) { .u-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .u-grid { grid-template-columns: 1fr; } }

/* --- arvostelut: hub list and review card ---------------------------------
   One row per casino: identity, offer and facts, action. Three columns on a
   wide screen, stacked below 860px. Colours are this theme's own, with the
   accent darkened where the brand colour is too light to read as text. */
.rv-list { --rv-card: #ffffff; --rv-tint: #f2f7f4; --rv-line: #e2ded6;
           --rv-ink: #14211b; --rv-soft: #45574f; --rv-faint: #6f8179;
           --rv-accent: #0b6b47;
           display: grid; gap: 14px; margin: 26px 0 34px; }

.rv-row {
	display: grid; grid-template-columns: minmax(170px, 1fr) minmax(0, 1.5fr) 190px;
	gap: 18px; align-items: center;
	background: var(--rv-card); border: 1px solid var(--rv-line);
	border-radius: 12px; padding: 16px 18px;
}
.rv-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rv-rank {
	flex: none; width: 26px; height: 26px; border-radius: 50%;
	display: grid; place-items: center; font-weight: 800; font-size: .8rem;
	background: var(--rv-accent); color: #fff;
}
/* Fixed plate, flex not grid: a percentage height on a centred grid item
   resolves to auto and a tall logo overflows. */
.rv-logo {
	flex: none; width: 104px; height: 48px; border-radius: 8px;
	background: var(--rv-tint); display: flex; align-items: center;
	justify-content: center; overflow: hidden; padding: 6px 8px;
}
.rv-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rv-logo i { font-style: normal; font-weight: 800; color: var(--rv-soft); }
.rv-id { display: grid; gap: 2px; min-width: 0; }
.rv-id b { color: var(--rv-ink); font-size: 1.02rem; }
.rv-rate { color: var(--rv-faint); font-size: .84rem; }

.rv-mid { display: grid; gap: 3px; min-width: 0; }
.rv-lab {
	font-size: .64rem; font-weight: 700; letter-spacing: .09em;
	text-transform: uppercase; color: var(--rv-faint);
}
.rv-bonus { font-weight: 700; color: var(--rv-ink); font-size: 1rem; line-height: 1.3; }
.rv-spins { color: var(--rv-accent); font-weight: 600; font-size: .86rem; }
.rv-facts {
	display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 6px;
	padding-top: 8px; border-top: 1px solid var(--rv-line);
}
.rv-facts div { display: flex; gap: 6px; font-size: .82rem; }
.rv-facts span { color: var(--rv-faint); }
.rv-facts b { color: var(--rv-soft); font-weight: 600; }

.rv-act { display: grid; justify-items: center; gap: 6px; }
.rv-act .rv-go { width: 100%; text-align: center; }
.rv-more { font-size: .86rem; font-weight: 600; color: var(--rv-accent); }
.rv-soon { font-size: .82rem; color: var(--rv-faint); }
.rv-fine { font-size: .68rem; color: var(--rv-faint); }

.rv-single { margin-top: 0; }
.rv-single .rv-row { background: var(--rv-tint); }

@media (max-width: 860px) {
	.rv-row { grid-template-columns: 1fr; gap: 12px; }
	.rv-act { justify-items: stretch; }
	.rv-act .rv-go { width: 100%; }
}

/* --- section banners and review pros/cons -------------------------------- */
.prose img.banner, img.banner {
	display: block; width: 100%; height: auto; border-radius: 12px;
	margin: 22px 0 18px;
}
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 20px 0; }
.proscons > div {
	border: 1px solid var(--line, #e2ded6); border-radius: 14px; padding: 16px 18px;
	background: #fff;
}
.proscons .pros { border-color: #bfe0cf; background: var(--acc-l, #e4f3ec); }
.proscons h3 { margin: 0 0 8px; font-size: 1rem; }
.proscons .pros h3 { color: var(--acc-d, #074b32); }
.proscons .cons h3 { color: #8c2f2f; }
.proscons ul { margin: 0; padding-left: 18px; }
.proscons li { margin: 4px 0; }

@media (max-width: 680px) { .proscons { grid-template-columns: 1fr; } }

/* The hero lede is a block now, not a single paragraph. */
.hero .lede p { margin: 0 0 14px; }
.hero .lede p:last-child { margin-bottom: 0; }