/* verovapaatkasinot.it.com — ink navy + copper, Nordic editorial.
   Deliberately distinct from verovapaatkasinot.casino (teal/gold, serif, soft shapes):
   this site is sans-serif, sharp-cornered, full-bleed hero, hairline rules. */

:root{
  --ink:#0e1a33;          --ink-2:#16294d;      --ink-3:#07101f;
  --copper:#d2652c;       --copper-2:#ef9256;   --copper-ink:#7d3510;
  --cream:#fdfaf6;        --cream-2:#f5efe6;    --paper:#ffffff;
  --text:#18212f;         --muted:#5c6779;      --line:#e2dcd2;
  --ok:#1d6f4f;           --warn:#8a5a12;       --warn-bg:#fdf5e3;

  --maxw:1180px;  --prose:820px;  --wide:1080px;
  --r:3px;        --r-lg:5px;
  --shadow:0 1px 2px rgba(14,26,51,.06), 0 8px 24px -12px rgba(14,26,51,.18);
  --shadow-lg:0 2px 4px rgba(14,26,51,.08), 0 24px 48px -20px rgba(14,26,51,.28);

  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --display:'Sora','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--text);
  font:400 17px/1.68 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink-2);text-underline-offset:2px}
a:hover{color:var(--copper-ink)}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:100}
.skip-link:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--copper);outline-offset:2px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}

/* ---------------------------------------------------------------- top strip */
.strip{background:var(--ink-3);color:#c6d0e2;font-size:13px;letter-spacing:.01em}
.strip .wrap{display:flex;gap:16px;align-items:center;justify-content:space-between;
  min-height:38px;padding-block:7px;flex-wrap:wrap}
.strip b{color:var(--copper-2);font-weight:600}
.age-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid #33456b;
  color:#dbe3f0;border-radius:2px;padding:1px 7px;font-weight:600;font-size:12px}

/* ---------------------------------------------------------------- header */
.site-head{background:var(--ink);color:#fff;position:sticky;top:0;z-index:40;
  border-bottom:1px solid rgba(255,255,255,.08)}
.site-head .wrap{display:flex;align-items:center;gap:20px;min-height:68px}
.brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none;flex:0 0 auto}
.brand-mark{width:38px;height:38px;border-radius:var(--r);background:#fff;padding:2px}
.brand-txt{display:flex;flex-direction:column;line-height:1.14}
.brand-name{font:700 17px/1.15 var(--display);letter-spacing:-.015em}
.brand-sub{font-size:11px;color:#9fb0cc;letter-spacing:.06em;text-transform:uppercase}
.nav{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap}
.nav a{color:#cdd7e8;text-decoration:none;font-size:14.5px;font-weight:500;
  padding:8px 11px;border-radius:var(--r)}
.nav a:hover{background:rgba(255,255,255,.09);color:#fff}
.nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px 0 var(--copper)}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;background:var(--ink-3);color:#fff;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.46}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(7,16,31,.95) 0%,rgba(7,16,31,.82) 42%,rgba(7,16,31,.42) 100%)}
.hero .wrap{position:relative;z-index:2;padding-block:72px 64px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:44px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--copper-2);margin:0 0 16px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--copper)}
.hero h1{font:700 clamp(32px,4.6vw,52px)/1.1 var(--display);letter-spacing:-.028em;margin:0 0 18px}
.hero .lede{font-size:18.5px;line-height:1.62;color:#d7dfee;margin:0 0 26px;max-width:56ch}
.hero .lede{color:#d7dfee}
.hero-acts{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-meta{margin-top:26px;display:flex;gap:22px;flex-wrap:wrap;font-size:13.5px;color:#a9b8d2}
.hero-meta b{color:#fff;font-weight:600}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:600 15.5px/1 var(--sans);padding:14px 22px;border-radius:var(--r);
  text-decoration:none;border:1px solid transparent;cursor:pointer;transition:.15s}
.btn-primary{background:var(--copper);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.12)}
.btn-primary:hover{background:#c15a24;color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.34);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.btn-sm{padding:10px 15px;font-size:14px}

/* hero CTA card — the featured partner */
.hero-cta{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-lg);padding:22px;backdrop-filter:blur(3px)}
.hero-cta .tag{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--copper-2);display:block;margin-bottom:13px}
.hero-cta .tile{height:76px;border-radius:var(--r);display:flex;align-items:center;
  justify-content:center;margin-bottom:14px;overflow:hidden}
.hero-cta .tile img{max-height:58px;width:auto}
.hero-cta h2{font:700 20px/1.25 var(--display);margin:0 0 6px;color:#fff}
.hero-cta p{margin:0 0 16px;font-size:14.5px;color:#bcc8de;line-height:1.55}
.hero-cta .btn{width:100%}
.hero-cta .fine{margin:12px 0 0;font-size:11.5px;color:#8b9ab5;line-height:1.5}

/* ---------------------------------------------------------------- sections */
main{display:block}
.band{padding-block:56px}
.band-paper{background:var(--paper)}
.band-ink{background:var(--ink);color:#e7ecf5}
.band-ink h2,.band-ink h3{color:#fff}
.band-ink a{color:var(--copper-2)}

.sec-head{max-width:none;margin:0 0 30px}
.sec-head h2{font:700 clamp(24px,2.9vw,33px)/1.18 var(--display);letter-spacing:-.022em;margin:0 0 10px}
.sec-head p{margin:0;color:var(--muted);font-size:16.5px}
.band-ink .sec-head p{color:#a9b8d2}

/* ---------------------------------------------------------------- toplist */
.toplist{display:grid;gap:12px}
.rec{display:grid;grid-template-columns:52px 172px minmax(0,1fr) auto;gap:20px;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 20px;box-shadow:var(--shadow);transition:.16s}
.rec:hover{box-shadow:var(--shadow-lg);border-color:#cfc6b8;transform:translateY(-1px)}
.rec-rank{font:700 23px/1 var(--display);color:var(--ink);text-align:center;
  border-right:1px solid var(--line);padding-right:16px}
.rec-rank span{display:block;font-size:10px;letter-spacing:.1em;color:var(--muted);
  text-transform:uppercase;font-weight:600;margin-top:5px}
.rec-tile{height:64px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;
  overflow:hidden;border:1px solid var(--line)}
.rec-tile img{max-height:48px;width:auto}
.rec-body h3{font:700 17.5px/1.3 var(--display);margin:0 0 5px}
.rec-body p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5}
.rec-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tag{font-size:11.5px;font-weight:600;letter-spacing:.02em;background:var(--cream-2);
  color:#4a5464;border-radius:2px;padding:3px 8px;border:1px solid var(--line)}
.rec-act{display:flex;flex-direction:column;gap:7px;align-items:stretch;min-width:148px}
.rec-act .fine{font-size:11px;color:var(--muted);text-align:center;margin:0}

.rec-note{margin:16px 0 0;font-size:13.5px;color:var(--muted);line-height:1.6;
  border-left:2px solid var(--copper);padding-left:14px}

/* ---------------------------------------------------------------- prose */
.prose{max-width:none;margin-inline:0}   /* fills the wrap, so prose blocks share the
                                            toplist's left edge instead of sitting 26px in */
.prose h2{font:700 clamp(23px,2.7vw,31px)/1.2 var(--display);letter-spacing:-.022em;
  margin:44px 0 14px;scroll-margin-top:86px}
.prose h3{font:700 19.5px/1.32 var(--display);margin:30px 0 10px;scroll-margin-top:86px}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose p{margin:0 0 17px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:1.25em}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--copper)}
.prose strong{font-weight:650;color:var(--ink)}
.prose a{color:var(--ink-2);text-decoration:underline;text-decoration-color:#b9c4d6}
.prose a:hover{text-decoration-color:var(--copper)}

/* One edge, one width.
   The prose column fills the wrap and running text fills the prose column, so paragraphs,
   headings and lists span the same width as the toplist rows, tables and figures. */
.prose > p,
.prose > h2,
.prose > h3,
.prose > ul,
.prose > ol,
.prose > .byline,
.prose > .sources{max-width:none}

.prose .steps,.prose .faq,.prose .paylist,.prose .keyfacts,.prose .toc ol{padding-left:0}

/* figures */
.figure{margin:30px 0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:var(--paper)}
.figure img{width:100%}
.figure figcaption{font-size:13.5px;color:var(--muted);padding:11px 16px;
  border-top:1px solid var(--line);background:var(--cream)}

/* callouts */
.callout{border:1px solid var(--line);border-left:3px solid var(--copper);
  background:var(--paper);border-radius:var(--r);padding:18px 22px;margin:26px 0}
.callout h3,.callout h4{margin:0 0 8px;font:700 16px/1.3 var(--display)}
.callout p:last-child{margin-bottom:0}
.callout-warn{border-left-color:var(--warn);background:var(--warn-bg)}
.callout-law{border-left-color:var(--ink-2)}

/* key facts grid */
.keyfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px;
  margin:26px 0;list-style:none}
.keyfacts li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin:0}
.keyfacts b{display:block;font:700 22px/1.15 var(--display);color:var(--ink);margin-bottom:4px}
.keyfacts span{font-size:13.5px;color:var(--muted);line-height:1.45;display:block}

/* numbered steps */
.steps{list-style:none;counter-reset:s;margin:26px 0;display:grid;gap:11px}
.steps li{counter-increment:s;position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 20px 16px 58px;margin:0}
.steps li::before{content:counter(s);position:absolute;left:18px;top:15px;
  width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;
  font:700 13px/26px var(--display);text-align:center}
.steps li b{display:block;margin-bottom:3px;color:var(--ink)}

/* tables */
.table-wrap{margin:26px 0;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:auto;background:var(--paper)}
table{width:100%;border-collapse:collapse;font-size:15px}
caption{text-align:left;font-size:13.5px;color:var(--muted);padding:12px 16px;
  border-bottom:1px solid var(--line);background:var(--cream)}
th,td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--ink);color:#fff;font:600 13px/1.3 var(--sans);
  letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:#fcfaf7}

/* TOC */
.toc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 24px;margin:0 0 34px}
.toc h2{font:700 13px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:0 0 13px}
.toc ol{margin:0;list-style:none;counter-reset:t;columns:2;column-gap:32px}
.toc li{counter-increment:t;margin-bottom:8px;break-inside:avoid}
.toc a{text-decoration:none;font-size:15px;color:var(--ink-2)}
.toc a::before{content:counter(t) ".";color:var(--copper);font-weight:700;margin-right:7px}
.toc a:hover{text-decoration:underline}

/* payments */
.paylist{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;
  list-style:none;margin:24px 0}
.paylist li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  height:58px;display:flex;align-items:center;justify-content:center;padding:10px;margin:0}
.paylist img{max-height:26px;width:auto}

/* FAQ */
.faq{list-style:none;margin:26px 0;display:grid;gap:10px}
.faq li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:0;margin:0}
.faq details{padding:0}
.faq summary{cursor:pointer;padding:15px 20px;font:650 16px/1.4 var(--display);
  list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--copper);font-weight:700;font-size:21px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details > div{padding:0 20px 17px;color:var(--muted)}
.faq details > div p:last-child{margin-bottom:0}

/* author / byline */
.byline{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--muted);
  border-block:1px solid var(--line);padding-block:14px;margin:0 0 30px}
.byline img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.byline b{color:var(--text)}
.byline .dot{color:var(--line)}

.author-box{display:grid;grid-template-columns:76px minmax(0,1fr);gap:18px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px;margin:38px 0}
.author-box img{width:76px;height:76px;border-radius:var(--r);object-fit:cover}
.author-box h3{margin:0 0 4px;font:700 17px/1.3 var(--display)}
.author-box .role{font-size:13px;color:var(--copper-ink);font-weight:600;margin:0 0 9px}
.author-box p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.6}

.people{list-style:none;padding:0;margin:26px 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.people li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;margin:0}
.people img{width:60px;height:60px;border-radius:50%;object-fit:cover;margin-bottom:12px}

/* sources */
.sources{font-size:14px;color:var(--muted);margin:34px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.sources h2{font:700 13px/1 var(--sans);letter-spacing:.11em;text-transform:uppercase;margin:0 0 12px}
.sources ol{margin:0;padding-left:1.3em}
.sources li{margin-bottom:7px}

/* related */
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:12px;margin:0}
.related a{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:19px 21px;text-decoration:none;transition:.15s}
.related a:hover{border-color:var(--copper);box-shadow:var(--shadow)}
.related b{display:block;font:700 16px/1.32 var(--display);color:var(--ink);margin-bottom:5px}
.related span{font-size:14px;color:var(--muted);line-height:1.5}

/* responsible gambling band */
.rg{background:var(--ink-2);color:#dbe4f2}
.rg .wrap{padding-block:34px}
.rg h2{font:700 20px/1.3 var(--display);color:#fff;margin:0 0 10px}
.rg p{margin:0 0 10px;font-size:15px;line-height:1.6}
.rg a{color:var(--copper-2)}
.rg-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:14.5px}

/* footer */
.site-foot{background:var(--ink-3);color:#9fb0cc;font-size:14.5px}
.site-foot .wrap{padding-block:46px 32px}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:34px;margin-bottom:32px}
.foot-grid h3{font:700 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:#cdd7e8;margin:0 0 14px}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin-bottom:9px}
.foot-grid a{color:#9fb0cc;text-decoration:none}
.foot-grid a:hover{color:#fff;text-decoration:underline}
.foot-about p{margin:0 0 12px;line-height:1.62}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;
  display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap;font-size:13.5px;color:#7f90ad}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media (max-width:860px){
  body{font-size:16.5px}
  .wrap{padding-inline:18px}
  .hero .wrap{padding-block:48px 44px}
  .band{padding-block:42px}
  .site-head .wrap{min-height:60px;flex-wrap:wrap;gap:10px}
  .nav{width:100%;margin-left:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:8px;flex-wrap:nowrap}
  .nav a{white-space:nowrap}
  .toc ol{columns:1}

  /* toplist becomes a stacked card */
  .rec{grid-template-columns:44px minmax(0,1fr);grid-template-areas:
      "rank tile" "body body" "act act";gap:12px 14px;padding:16px}
  .rec-rank{grid-area:rank;border-right:0;padding-right:0;text-align:left;font-size:20px}
  .rec-tile{grid-area:tile;justify-self:start;width:150px}
  .rec-body{grid-area:body}
  .rec-act{grid-area:act;min-width:0}

  /* tables become stacked rows */
  .table-wrap{border:0;overflow:visible;background:transparent}
  table,tbody,tr,td{display:block;width:100%}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  caption{display:block;border:0;padding:0 0 10px;background:transparent}
  tbody tr{background:var(--paper)!important;border:1px solid var(--line);
    border-radius:var(--r);margin-bottom:10px;padding:6px 0}
  td{border-bottom:1px solid var(--line);padding:9px 16px}
  tr td:last-child{border-bottom:0}
  td[data-label]::before{content:attr(data-label);display:block;font-size:11px;
    font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}

  .author-box{grid-template-columns:1fr}
  .author-box img{width:64px;height:64px}
}
@media (max-width:520px){
  .foot-grid{grid-template-columns:1fr}
  .keyfacts{grid-template-columns:1fr}
  .hero h1{font-size:30px}
  .rec-tile{width:128px;height:56px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

@media print{
  .site-head,.strip,.hero-media,.nav,.rec-act,.site-foot{display:none}
  body{background:#fff;font-size:12pt}
}