/* kasinoholvi.com — Vault ledger archetype */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Manrope:wght@400;500;600;700&display=swap");
:root {
  --bg: #F5F7FB;
  --accent: #1E853E;
  --cta: #1E853E;
  --accent-2: #1A3B8B;
  --text: #1A1D26;
  --primary-blue: var(--accent-2);
  --accent-green: var(--accent);
  --ink: var(--text, #121820);
  --paper: var(--bg);
  --panel: #f7f9fb;
  --header: var(--accent-2);
  --gold: var(--accent);
  --gold-deep: #156830;
  --line: #c5ced8;
  --muted: #5a6573;
  --ok: var(--accent);
  --edge: clamp(1.25rem, 12vw, 10rem);
  --header-h: 4.25rem;
  --display: "Fraunces", Georgia, serif;
  --ui: "Manrope", "Segoe UI", sans-serif;
  --radius: 6px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(201,162,39,.12), transparent 55%),
    linear-gradient(180deg, #dfe6ee 0%, var(--paper) 28%, var(--paper) 100%);
  font-family: var(--ui);
  line-height: 1.65;
  font-size: 1.05rem;
}
img { max-width: 100%; display: block; }
a { color: var(--gold-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
.skip { position:absolute; left:-999px; }
.skip:focus { left:12px; top:8px; background:#fff; padding:8px 12px; z-index:99; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  min-height: var(--header-h);
  display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
  padding: 0.5rem clamp(0.85rem, 2.4vw, 1.75rem);
  background: var(--header);
  color: #f3f6fa;
  border-bottom: 2px solid var(--gold);
  box-shadow: 0 8px 24px rgba(18,24,32,.25);
}
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; max-width:min(20rem,62%); flex-shrink:0; }
.brand-logo { height: 56px; width:auto; max-width:min(300px,68vw); object-fit:contain; background:transparent !important; border-radius:0; padding:0; filter:none; }
.brand-mark { font-family: var(--display); font-weight:700; letter-spacing:.02em; font-size:1.15rem; white-space:nowrap; }
.brand-mark span { color: var(--gold); }

.nav-toggle {
  margin-left: auto; border:1px solid rgba(255,255,255,.25); background:transparent; color:#fff;
  padding:.45rem .7rem; border-radius:4px; cursor:pointer; font:inherit;
}
.nav {
  display:none; position:absolute; left:0; right:0; top:100%;
  background:#121820; border-bottom:1px solid var(--gold); padding:1rem;
}
.nav.is-open { display:block; }
.nav a, .nav summary {
  color:#e8edf2; text-decoration:none; display:block; padding:.4rem 0; font-weight:600;
}
.nav details { margin:.35rem 0; }
.nav ul { list-style:none; margin:.25rem 0 .75rem; padding:0 0 0 .75rem; border-left:2px solid rgba(201,162,39,.45); }
.nav li a { font-weight:500; color:#b8c2d0; }
@media (min-width: 1100px) {
  .nav-toggle { display:none; }
  .nav {
    display:flex !important; position:static; background:transparent; border:0; padding:0;
    margin-left:auto; align-items:center; gap:.85rem; flex-wrap:wrap;
  }
  .nav details { margin:0; position:relative; }
  .nav summary { list-style:none; cursor:pointer; padding:.35rem .2rem; }
  .nav summary::-webkit-details-marker { display:none; }
  .nav ul {
    display:none; position:absolute; top:100%; left:0; min-width:14rem;
    background:#121820; border:1px solid rgba(201,162,39,.5); padding:.5rem .75rem; z-index:60;
  }
  .nav details[open] ul, .nav details:hover ul { display:block; }
  .nav a { padding:.35rem .2rem; }
}

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.7rem 1.1rem; border-radius:4px; font-weight:700; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
}
.btn-primary { background: var(--gold); color:#121820; }
.btn-primary:hover { filter:brightness(1.05); color:#121820; }
.btn-ghost { border-color: rgba(255,255,255,.35); color:#fff; background:transparent; }
.mobile-header-cta { display:none; }
.site-header .btn-primary,
.mobile-header-cta {
  font-size: .72rem; letter-spacing: .02em; padding: .38rem .55rem;
  white-space: nowrap; line-height: 1.1; flex-shrink: 0;
}
/* cta-compact */
@media (max-width: 1099px) {
  .mobile-header-cta { display:inline-flex; margin-left:auto; }
  .nav-toggle { margin-left:0; }
}

.hero {
  position: relative;
  padding: clamp(2.4rem, 6vw, 4.25rem) var(--edge) 2.4rem;
  color: #f7f9fb;
  background:
    linear-gradient(105deg, rgba(8,12,18,.82) 8%, rgba(18,24,32,.55) 42%, rgba(18,24,32,.28) 100%),
    url("../assets/hero-vault.jpg") center/cover no-repeat,
    #0c1018;
  border-bottom: 3px solid var(--gold);
  overflow: hidden;
  min-height: clamp(18rem, 52vh, 28rem);
}
.hero .hero-inner { max-width: 40rem; }
@media (min-width: 960px) {
  .hero { display:flex; align-items:center; justify-content:flex-end;
    background:
      linear-gradient(255deg, rgba(8,12,18,.15) 0%, rgba(8,12,18,.35) 38%, rgba(8,12,18,.88) 72%),
      url("../assets/hero-vault.jpg") center/cover no-repeat,
      #0c1018;
  }
  .hero .hero-inner {
    margin-left: auto; margin-right: 0; text-align: left;
    max-width: min(38rem, 46%);
    background: linear-gradient(180deg, rgba(8,12,18,.55), rgba(8,12,18,.35));
    padding: 1.25rem 1.35rem; border-radius: 8px; border: 1px solid rgba(201,162,39,.25);
  }
}

body[data-page="tekija-elina-saarinen"] .hero,
body[data-page="tekija-mikael-aalto"] .hero,
body[data-page="tekija-sofia-laine"] .hero,
body[data-page="tekija-joonas-makinen"] .hero,
body[data-page="toimitus"] .hero,
body[data-page="meista"] .hero {
  min-height: 0;
  background:
    linear-gradient(115deg, rgba(18,24,32,.92) 20%, rgba(26,36,51,.78) 100%),
    #1a2433;
}
.hero::after {
  content:""; position:absolute; inset:auto -10% -40% auto; width:320px; height:320px;
  background: radial-gradient(circle, rgba(201,162,39,.35), transparent 70%);
  pointer-events:none;
}
.hero-inner { position:relative; z-index:1; max-width: 48rem; }
.hero .kicker { color: var(--gold); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; }
.hero h1 { font-family: var(--display); font-size: clamp(1.9rem, 4vw, 3rem); line-height:1.15; margin:.4rem 0 1rem; }
.hero p { color:#d5dde8; max-width:40rem; }
.byline { display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; align-items:center; margin:1rem 0 1.25rem; font-size:.92rem; color:#c5ced8; }
.byline a { color: var(--gold); }
.hero-cta { display:flex; flex-wrap:wrap; gap:.75rem; }

.layout { padding: 1.5rem var(--edge) 3rem; }
.toc {
  position: sticky; top: calc(var(--header-h) + .5rem); z-index: 20;
  display:flex; gap:.5rem; overflow-x:auto; padding:.65rem; margin:0 0 1.25rem;
  background: rgba(247,249,251,.92); border:1px solid var(--line); border-radius: var(--radius);
  backdrop-filter: blur(6px);
}
.toc a { white-space:nowrap; text-decoration:none; color:var(--muted); font-weight:600; font-size:.9rem; padding:.25rem .5rem; border-radius:4px; }
.toc a.is-active, .toc a:hover { color:var(--ink); background:rgba(201,162,39,.18); }

.section { margin: 2.25rem 0; }
.section h2 { font-family: var(--display); font-size: clamp(1.45rem, 2.5vw, 1.9rem); margin:0 0 .75rem; }
.section h3 { font-size:1.15rem; margin:1.25rem 0 .5rem; }
.kicker { color: var(--gold-deep); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.75rem; margin:0 0 .35rem; }
.lede { font-size:1.08rem; max-width: 62rem; }

#rating, [data-ranking] { margin: 1.5rem 0 2rem; }
.rank-card {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .85rem 1.1rem;
  background: var(--panel); border:1px solid var(--line); border-left:4px solid var(--gold);
  border-radius: var(--radius); padding: .9rem 1.1rem; margin:0 0 .75rem;
  box-shadow: 0 6px 18px rgba(18,24,32,.05);
}
.rank-card .badge { font-weight:800; color:var(--gold-deep); font-size:1.05rem; flex:0 0 2rem; }
.rank-logo-link { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.rank-logo { width:108px; height:52px; object-fit:contain; background:transparent; border:0; border-radius:0; padding:0; }
.rank-logo-link.is-dark-plate {
  background:#121820; border-radius:6px; padding:6px 10px;
  border:1px solid rgba(18,24,32,.2);
}
.rank-logo-link.is-dark-plate .rank-logo { background:transparent; }
.rank-identity { flex: 0 1 9rem; min-width: 7rem; }
.rank-name { font-weight:800; font-size:1.02rem; margin:0 0 .2rem; }
.rank-stars { color: var(--gold-deep); font-size:.85rem; white-space:nowrap; }
.rank-metric { display:flex; flex-direction:column; gap:.12rem; flex: 0 0 auto; min-width: 4.2rem; }
.rank-metric .lbl { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; }
.rank-metric strong { font-size:.95rem; font-weight:800; color:var(--ink); }
.rank-bonus {
  flex: 1 1 11rem;
  font-weight:700; font-size:.92rem; line-height:1.35; color:var(--ink);
  max-width: none;
}
.rank-pays { display:flex; gap:5px; flex-wrap:wrap; align-items:center; margin:0; flex: 0 1 auto; }
.rank-pays img { width:40px; height:26px; object-fit:contain; background:#fff; border:1px solid var(--line); border-radius:3px; padding:2px; }
.rank-cta { display:flex; align-items:center; flex: 0 0 auto; margin-left: 0; }
.rank-cta .btn { white-space:nowrap; padding:.65rem 1.05rem; }
.rank-card .features { display:none; }
@media (max-width: 1100px) {
  .rank-card { flex-wrap: wrap; }
  .rank-bonus { flex: 1 1 12rem; }
}
@media (max-width: 760px) {
  .rank-card { position: relative; justify-content: center; text-align: center; padding-top: 2.1rem; }
  .rank-card .badge { position: absolute; left: .85rem; top: .7rem; }
  .rank-logo-link, .rank-identity { flex: 1 1 100%; display:flex; flex-direction:column; align-items:center; }
  .rank-metric { flex: 1 1 28%; align-items:center; }
  .rank-pays { flex: 1 1 42%; justify-content: flex-start; }
  .rank-bonus { flex: 1 1 42%; text-align: right; }
  .rank-cta { flex: 1 1 100%; }
  .rank-cta .btn { width: 100%; }
}

.table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius: var(--radius); background:var(--panel); }
table { width:100%; border-collapse: collapse; font-size:.95rem; }
th, td { padding:.7rem .85rem; border-bottom:1px solid var(--line); text-align:left; }
th { background:#dfe6ee; font-weight:700; }
.pay-compare { margin-top:1rem; }
.pay-row { display:grid; grid-template-columns: 1.2fr 1fr; gap:.75rem; padding:.85rem; border-bottom:1px solid var(--line); align-items:center; }
.pay-metrics { display:grid; grid-template-columns:1fr 1fr; gap:.35rem .75rem; font-size:.88rem; }
@media (min-width: 860px) {
  .pay-compare-desktop { display:block; }
  .pay-compare-mobile { display:none; }
}
@media (max-width: 859px) {
  .pay-compare-desktop { display:none; }
  .pay-compare-mobile { display:block; }
}

.slot-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .35rem .4rem; margin-top:.75rem; }
.pay-logos { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .85rem; margin-top:1rem; }
@media (max-width: 1100px) { .slot-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 700px) { .slot-grid, .pay-logos { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.slot-card, .pay-logo {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:.65rem; text-align:center;
}
.slot-card img {
  width:100%; height:auto; display:block;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
  border-radius:4px; background:transparent;
}
.slot-card { padding:0 0 .4rem; margin:0; }
.slot-card figcaption { font-weight:600; font-size:.92rem; }
.authors-byline { display:flex; flex-wrap:wrap; gap:.35rem .85rem; align-items:center; }
.authors-byline .author-chip { display:inline-flex; align-items:center; gap:.35rem; }
.compare-table th:first-child, .compare-table td:first-child { white-space:nowrap; }

.pay-logo img { margin:0 auto .35rem; height:40px; width:auto; object-fit:contain; }

.faq .acc { border:1px solid var(--line); border-radius:var(--radius); margin:0 0 .55rem; background:var(--panel); }
.acc-trigger {
  width:100%; text-align:left; background:transparent; border:0; padding:1rem 1.1rem;
  font:inherit; font-weight:700; cursor:pointer; display:flex; justify-content:space-between; gap:1rem;
}
.acc-trigger::after { content:"+"; color:var(--gold-deep); font-weight:800; }
.acc.is-open .acc-trigger::after { content:"–"; }
.acc-panel { display:none; padding:0 1.1rem 1rem; color:var(--muted); }
.acc.is-open .acc-panel { display:block; }

.author-card {
  display:flex; gap:1rem; align-items:flex-start; padding:1.1rem; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--panel); margin:2rem 0;
}
.author-card img { width:72px; height:72px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); }
.site-footer {
  background: var(--header); color:#c5ced8; padding:2.5rem var(--edge) 2rem; margin-top:2rem;
  border-top:2px solid var(--gold);
}
.site-footer a { color:#e8edf2; }
.footer-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(12rem,1fr)); gap:1.5rem; }
.footer-grid h3 { color:var(--gold); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; }
.footer-grid ul { list-style:none; padding:0; margin:0; }
.footer-grid li { margin:.35rem 0; }
.to-top {
  position:fixed; right:1rem; bottom:1rem; z-index:40; display:none;
  background:var(--gold); color:var(--ink); border:0; border-radius:4px; padding:.65rem .8rem; font-weight:800; cursor:pointer;
}
.to-top.is-visible { display:block; }
.meta-strip { font-size:.88rem; color:var(--muted); margin:.5rem 0 1rem; }
.hub-stub-note { border-left:3px solid var(--gold); padding:.75rem 1rem; background:rgba(201,162,39,.1); margin:1rem 0; }

.team-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:1.25rem; margin:1.5rem 0; }
@media (max-width: 800px) { .team-grid { grid-template-columns: 1fr; } }
.team-card { display:flex; gap:1rem; align-items:flex-start; background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:var(--radius); padding:1.1rem; }
.team-card img { width:96px; height:96px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); flex-shrink:0; }
.author-hero-photo { width:140px; height:140px; border-radius:50%; object-fit:cover; border:3px solid var(--gold); box-shadow:0 8px 24px rgba(18,24,32,.18); }
.author-profile { display:flex; gap:1.25rem; align-items:flex-start; flex-wrap:wrap; margin:0 0 1.5rem; }
#vertailu .table-scroll { border:1px solid var(--gold); box-shadow: 0 8px 20px rgba(201,162,39,.12); }
.compare-placeholder { min-height: 6rem; }


.authors-rail {
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:1rem;
  margin:2rem 0; padding:1.25rem; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--panel);
  border-left:4px solid var(--gold);
}
.authors-rail > .authors-rail-head {
  grid-column: 1 / -1; display:flex; justify-content:space-between; align-items:baseline; gap:1rem; flex-wrap:wrap;
  margin:0 0 .25rem;
}
.authors-rail-head strong { font-family:var(--display); font-size:1.15rem; }
.authors-rail-head a { font-size:.92rem; font-weight:600; }
.author-chip-card {
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.55rem;
  text-decoration:none; color:inherit; padding:.5rem .35rem; border-radius:var(--radius);
  transition: background .15s ease, transform .15s ease;
}
.author-chip-card:hover { background:rgba(201,162,39,.12); color:var(--ink); transform:translateY(-2px); }
.author-chip-card img {
  width:72px; height:72px; border-radius:50%; object-fit:cover;
  border:2px solid var(--gold); box-shadow:0 4px 12px rgba(18,24,32,.12);
}
.author-chip-card span { font-weight:700; font-size:.95rem; line-height:1.25; }
.author-chip-card small { color:var(--muted); font-size:.78rem; font-weight:500; }
@media (max-width: 900px) {
  .authors-rail { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 480px) {
  .authors-rail { grid-template-columns: 1fr 1fr; gap:.75rem; padding:1rem; }
  .author-chip-card img { width:64px; height:64px; }
}

.crumb-bar {
  background: #0c1018; border-bottom: 1px solid rgba(201,162,39,.35);
  padding: .55rem var(--edge);
}
.breadcrumbs {
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .55rem;
  margin:0; font-size:.88rem; color:#b8c2d0; max-width: 100%;
}
.breadcrumbs a { color: var(--gold); text-decoration:none; font-weight:600; }
.breadcrumbs a:hover { text-decoration:underline; color:#ffe08a; }
.breadcrumbs .crumb-sep { opacity:.55; }
.breadcrumbs .crumb-current { color:#f3f6fa; font-weight:600; }
.breadcrumbs .crumb-offer {
  display:inline-flex; align-items:center; gap:.3rem;
  margin-left:.15rem; padding:.22rem .65rem; border-radius:999px;
  background:rgba(201,162,39,.18); border:1px solid rgba(201,162,39,.5);
  color:#ffe08a; font-weight:800; font-size:.78rem; text-decoration:none;
  white-space:nowrap; max-width:100%;
}
.breadcrumbs .crumb-offer:hover { background:rgba(201,162,39,.32); color:#fff; }
.hero .breadcrumbs { display:none; }
.layout > .breadcrumbs { display:none; }

/* footer-mobile-2col */
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
  .footer-grid > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: auto; }
}

/* home-blocks-v2 */
.ok-check { color: var(--ok); font-weight: 800; white-space: nowrap; }
.ok-check::after { content: " ✓"; }
.meta-lead { font-size: 1.02rem; color: var(--ink); max-width: 46rem; margin: .35rem 0 1rem; }
.proof-box {
  display:flex; gap:1rem; align-items:flex-start; padding:1.1rem 1.2rem; margin:1rem 0 1.5rem;
  background:#121820; color:#d5dde8; border-radius:var(--radius); border-left:4px solid var(--ok);
}
.proof-box a { color:#7dcea0; }
.proof-ico {
  flex:0 0 2.2rem; height:2.2rem; border-radius:6px; background:#1f6b4a;
  display:flex; align-items:center; justify-content:center; color:#c8f7d8; font-weight:800;
}
.panel-dark {
  background:#121820; color:#e8edf2; border-radius:10px; padding:1.35rem 1.4rem; margin:1.5rem 0;
  border:1px solid rgba(201,162,39,.28);
}
.panel-dark h2, .panel-dark h3 { color:#f7f9fb; }
.panel-dark .kicker { color: var(--gold); }
.panel-dark p, .panel-dark li { color:#c5ced8; }
.panel-dark a { color: var(--gold); }
.bonus-track {
  display:flex; gap:1rem; overflow-x:auto; padding:.35rem .15rem 1rem; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
}
.bonus-card {
  flex:0 0 min(280px, 82vw); scroll-snap-align:start;
  background:#0c1018; border:1px solid rgba(201,162,39,.35); border-top:3px solid var(--gold);
  border-radius:8px; padding:1rem 1.05rem; display:flex; flex-direction:column; gap:.65rem;
}
.bonus-card .tag {
  display:inline-block; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(201,162,39,.55); padding:.2rem .45rem; border-radius:4px; width:fit-content;
}
.bonus-card .offer { color:var(--gold); font-weight:800; font-size:1.05rem; line-height:1.3; margin:0; }
.bonus-card .terms { color:#9aa6b5; font-size:.84rem; margin:0; }
.bonus-card .brand-row { display:flex; align-items:center; gap:.55rem; margin-top:auto; color:#e8edf2; font-weight:700; }
.bonus-card .brand-row img { width:42px; height:28px; object-fit:contain; background:#1a2433; border-radius:4px; padding:2px; }
.wd-table .med { color:var(--ok); font-weight:800; }
.wd-bar {
  display:inline-block; height:6px; background:rgba(31,107,74,.25); border-radius:99px; vertical-align:middle; margin-left:.45rem; width:72px; position:relative;
}
.wd-bar > i { display:block; height:100%; background:var(--ok); border-radius:99px; }
.license-scroll { display:flex; gap:.85rem; overflow-x:auto; padding:.5rem 0 1rem; }
.license-chip {
  flex:0 0 auto; min-width:11rem; background:var(--panel); border:1px solid var(--line);
  border-left:4px solid var(--gold); border-radius:8px; padding:.9rem 1rem;
}
.license-chip strong { display:block; margin-bottom:.35rem; }
.license-chip span { color:var(--muted); font-size:.9rem; }
.hub-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:1rem; margin:1rem 0; }
@media (max-width:800px){ .hub-grid { grid-template-columns:1fr; } }
.hub-card {
  background:#121820; color:#d5dde8; border-radius:10px; padding:1.15rem 1.2rem;
  border:1px solid rgba(201,162,39,.28); display:flex; flex-direction:column; gap:.55rem;
}
.hub-card .kicker { color:var(--gold); margin:0; }
.hub-card h3 { color:#fff; margin:0; font-size:1.15rem; }
.hub-card p { margin:0; color:#aeb8c6; font-size:.95rem; }
.hub-card a.more { color:var(--gold); font-weight:700; margin-top:auto; }
.hub-mini { margin:.35rem 0; padding:0; list-style:none; }
.hub-mini li { display:flex; justify-content:space-between; gap:.75rem; padding:.28rem 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:.9rem; }
.hub-mini b { color:#fff; }
.hub-mini em { color:var(--ok); font-style:normal; font-weight:700; }
.responsible-box {
  display:flex; gap:1rem; align-items:flex-start; background:#1a1510; color:#e8edf2;
  border:1px solid rgba(201,162,39,.35); border-left:4px solid #c47a1a; border-radius:10px; padding:1.25rem 1.35rem; margin:1.5rem 0;
}
.responsible-box .warn {
  flex:0 0 2.4rem; height:2.4rem; border-radius:8px; background:rgba(196,122,26,.25);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.responsible-box ul { margin:.5rem 0 1rem; padding-left:1.1rem; color:#c5ced8; }
.experts-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:1rem; margin:1rem 0; }
@media (max-width:700px){ .experts-grid { grid-template-columns:1fr; } }
.expert-card {
  display:flex; gap:1rem; align-items:center; background:var(--panel); border:1px solid var(--line);
  border-radius:10px; padding:1rem; text-decoration:none; color:inherit;
}
.expert-card:hover { border-color:var(--gold); }
.expert-card img { width:72px; height:72px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); }
.expert-card strong { display:block; font-size:1.05rem; }
.expert-card .role { color:var(--gold-deep); font-weight:700; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; }
.expert-card .yrs { color:var(--muted); font-size:.88rem; }
.tax-widget {
  display:grid; grid-template-columns: 1.1fr 1fr; gap:1rem; margin-top:1rem;
  background: linear-gradient(135deg, #2a2416, #1a1510); border-radius:12px; padding:1.2rem; border:1px solid rgba(201,162,39,.4);
}
@media (max-width:800px){ .tax-widget { grid-template-columns:1fr; } }
.tax-widget .btn { background:var(--gold); color:#121820; }
.tax-steps { background:#0c1018; border-radius:8px; padding:1rem; }
.tax-step { padding:.55rem .7rem; border:1px solid rgba(255,255,255,.1); border-radius:6px; margin:0 0 .5rem; color:#c5ced8; font-size:.9rem; }
.tax-step.is-on { border-color:var(--gold); color:#fff; }
.tax-result { background:rgba(31,107,74,.25); border:1px solid var(--ok); color:#c8f7d8; border-radius:8px; padding:.85rem; font-weight:700; }


/* fix-blocks-v3 */
.bonus-card .brand-row--top {
  display:flex; flex-direction:column; align-items:flex-start; gap:.45rem; margin:0 0 .35rem;
}
.bonus-card .brand-row--top .logo-frame {
  width:100%; background: linear-gradient(180deg, #2a3340, #1a2433);
  border-radius:8px; padding:6px; border:1px solid rgba(201,162,39,.35);
}
.bonus-card .brand-row--top img {
  width:100%; max-width:100%; height:64px; object-fit:contain; object-position:center;
  background:#fff; border-radius:5px; padding:8px 12px; border:0; display:block;
}
.bonus-card .brand-row--top strong { font-size:1.05rem; color:#fff; }
.bonus-card { flex:0 0 min(300px, 85vw); min-height: 20rem; }
.bonus-track { gap:1.1rem; padding-bottom:1.1rem; }

.panel-dark .wd-list { margin:1rem 0; border:1px solid rgba(201,162,39,.25); border-radius:8px; overflow:hidden; background:#0c1018; }
.wd-head, .wd-row {
  display:grid; grid-template-columns: minmax(11rem,1.4fr) minmax(8rem,1.1fr) minmax(4.5rem,.7fr) minmax(7rem,1fr) minmax(5.5rem,.8fr);
  gap:.75rem 1rem; align-items:center; padding:.85rem 1rem;
}
.wd-head { background:#1a2433; color:var(--gold); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; }
.wd-row { border-top:1px solid rgba(255,255,255,.08); color:#e8edf2; font-size:.95rem; }
.wd-row:nth-child(even) { background:rgba(255,255,255,.03); }
.wd-brand { display:flex; align-items:center; gap:.75rem; min-width:0; }
.wd-brand .logo-frame {
  flex:0 0 auto; background:linear-gradient(180deg,#2a3340,#1a2433);
  border-radius:8px; padding:5px; border:1px solid rgba(201,162,39,.35);
}
.wd-brand img {
  width:110px; height:52px; object-fit:contain; display:block;
  background:#fff; border-radius:4px; padding:6px 8px;
}
.wd-brand b { font-size:1.02rem; }
.panel-dark .wd-list .med { color:#7dcea0; font-weight:800; }
.panel-dark .wd-list a { color:var(--gold); }
@media (max-width:900px) {
  .wd-head { display:none; }
  .wd-row {
    grid-template-columns: 1fr 1fr; gap:.5rem .75rem;
  }
  .wd-brand { grid-column:1 / -1; }
}

.license-chip {
  cursor:pointer; font:inherit; text-align:left; color:#121820;
  background:#f7f9fb; border:1px solid var(--line); border-left:4px solid var(--gold);
}
.license-chip span { color:#5a6573; display:block; }
.license-chip strong { color:#121820; }
.license-chip.is-active {
  background:#121820; color:#f7f9fb; border-color:var(--gold);
}
.license-chip.is-active span { color:#c5ced8; }
.license-chip.is-active strong { color:#ffe08a; }
.license-panel {
  background:#121820; color:#e8edf2; border-radius:10px; padding:1.2rem 1.35rem;
  border:1px solid rgba(201,162,39,.35); margin:.25rem 0 1.25rem;
}
.license-panel h3 { color:#fff; margin:.2rem 0 .65rem; }
.license-panel p, .license-panel li { color:#c5ced8; }
.license-panel ul { margin:.5rem 0 0; padding-left:1.15rem; }

#toimitus-experts { margin:2rem 0 1.25rem; }

/* tax-widget-contrast */
.tax-widget { color:#f3f6fa; }
.tax-widget p { color:#e8edf2 !important; opacity:1; font-size:1rem; line-height:1.55; }
.tax-widget .tax-lead { color:#f3f6fa !important; font-size:1.02rem; margin:0 0 1rem; }
.tax-widget h3 { color:#fff !important; }
.tax-steps { background:#0c1018; }
.tax-step {
  display:block; width:100%; text-align:left; cursor:pointer; font:inherit;
  padding:.65rem .8rem; border:1px solid rgba(255,255,255,.18); border-radius:6px;
  margin:0 0 .5rem; color:#f3f6fa !important; background:rgba(255,255,255,.04);
  text-decoration:none;
}
.tax-step:hover, .tax-step.is-on {
  border-color:var(--gold); color:#fff !important; background:rgba(201,162,39,.12);
}
.tax-step strong { color:#ffe08a; }
.tax-result { color:#c8f7d8 !important; }
.tax-result small { color:#a8e6c1; }
.license-panel { color:#f3f6fa; }
.license-panel p, .license-panel li { color:#e8edf2 !important; }
.license-panel h3 { color:#fff !important; }

.rank-logo-link.is-light-plate {
  background: linear-gradient(180deg, #2a3340, #1a2433);
  border-radius: 8px; padding: 5px; border: 1px solid rgba(201,162,39,.35);
}
.rank-logo-link.is-light-plate .rank-logo {
  background: #fff; border-radius: 4px; padding: 6px 8px;
}

/* Popular slots lobby — full art, TOC-aware cols, mobile 2-col + scroll tabs */
.slots-lobby {
  background: #121820;
  color: #f4f6f8;
  border-radius: var(--radius);
  padding: 1.35rem 1.25rem 1.5rem;
  margin-top: 1.25rem;
  overflow: visible;
  border: 1px solid rgba(201, 162, 39, 0.35);
}
.slots-lobby .kicker { color: var(--gold); }
.slots-lobby h2 { color: #fff; margin-bottom: 0.4rem; font-family: var(--display); }
.slots-lobby > p { color: rgba(244, 246, 248, 0.78); max-width: 54ch; }
.slots-lobby__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 1.1rem 0 1.15rem;
}
.slots-lobby__tab {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.7rem 1.15rem;
  border-radius: 0.65rem;
  background: var(--gold);
  color: #111;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease, filter 0.15s ease, background 0.15s ease;
}
.slots-lobby__tab:hover { filter: brightness(1.06); transform: translateY(-1px); }
.slots-lobby__tab.is-active {
  background: #fff;
  color: #111;
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.slots-lobby__grid {
  --slot-cols: 4;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--slot-cols), minmax(0, 1fr));
  gap: 1rem 0.9rem;
  overflow: visible;
}
.slots-lobby__grid[data-toc="top"] { --slot-cols: 4; }
.slots-lobby__grid[data-toc="side"] { --slot-cols: 3; }
.slots-lobby__item[hidden] { display: none !important; }
.slot-tile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  color: #fff;
  border-radius: 0.75rem;
  transition: transform 0.2s ease;
  transform-origin: center center;
}
.slot-tile:hover,
.slot-tile:focus-visible {
  transform: scale(1.05);
  z-index: 3;
  color: #fff;
}
.slot-tile:active { transform: scale(1.08); }
.slot-tile__media {
  display: block;
  overflow: visible;
  border-radius: 0.85rem;
  background: #1a222c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  line-height: 0;
  padding: 0.4rem;
}
.slot-tile__media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 0.55rem;
  transform: none !important;
}
.slot-tile__name {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.25;
  padding: 0 0.15rem;
  color: #fff;
}
@media (max-width: 980px) {
  .slots-lobby__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--gold) rgba(255, 255, 255, 0.12);
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding: 0.15rem 0.25rem 0.55rem;
  }
  .slots-lobby__tabs::-webkit-scrollbar { height: 6px; }
  .slots-lobby__tabs::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
  }
  .slots-lobby__tabs::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 999px;
  }
  .slots-lobby__grid,
  .slots-lobby__grid[data-toc="top"],
  .slots-lobby__grid[data-toc="side"] {
    --slot-cols: 2 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .slot-tile,
  .slots-lobby__tab { transition: none; }
  .slot-tile:hover,
  .slot-tile:focus-visible,
  .slot-tile:active { transform: none; }
}


/* Competitor-style hyödyt / haitat */
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:1.25rem 0}
.pros-cons__col{background:var(--panel,#f7f9fb);border:1px solid rgba(18,24,32,.08);border-radius:12px;padding:1rem 1.15rem}
.pros-cons__col h3{margin-top:0;font-size:1.05rem}
.pros-cons__col--pro h3{color:#1a7a4c}
.pros-cons__col--con h3{color:#a33}
.pros-cons ul{margin:0;padding-left:1.1rem}
@media (max-width:720px){.pros-cons{grid-template-columns:1fr}}

/* SiteReview hub spine helpers */
.facts-list{margin:1rem 0;padding-left:1.15rem;line-height:1.7}
.facts-list li{margin:.35rem 0}
.article-figure{margin:1.5rem 0;border-radius:12px;overflow:hidden;background:#0c1018}
.article-figure img{display:block;width:100%;height:auto}
.article-figure figcaption{padding:.65rem 1rem;font-size:.9rem;color:var(--muted,#5a6573);background:var(--panel,#f7f9fb)}
.sitemap-list{columns:2;gap:2rem;line-height:1.85}
@media (max-width:720px){.sitemap-list{columns:1}}
.meta-strip{font-size:.9rem;color:var(--muted,#5a6573);margin:.5rem 0 1rem}


/* === UX: fact cards (calc / examples) — white bg, accent outline === */
.fact-card-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin:1.25rem 0 1.5rem;
}
@media (min-width:900px){
  .fact-card-grid{grid-template-columns:1fr 1fr;}
  .fact-card-grid .fact-card--wide{grid-column:1 / -1;}
}
.fact-card{
  background:#fff;
  border:2px solid var(--gold);
  border-radius:10px;
  padding:1.1rem 1.2rem;
  box-shadow:none;
}
.fact-card h3,
.fact-card .fact-card__title{
  margin:0 0 .55rem;
  font-family:var(--display);
  font-size:1.05rem;
  color:var(--ink);
  line-height:1.35;
}
.fact-card p{margin:0;color:var(--ink);}
.fact-card p + p{margin-top:.65rem;}
.fact-card strong{color:var(--gold-deep);}

/* === UX: related hubs as horizontal accent tabs / slider === */
.hub-tabs-wrap{margin:1.25rem 0 1.5rem;}
.hub-tabs{
  display:flex;
  gap:.75rem;
  overflow-x:auto;
  padding:.35rem .15rem 1rem;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-color:var(--gold) rgba(18,24,32,.08);
}
.hub-tabs::-webkit-scrollbar{height:8px;}
.hub-tabs::-webkit-scrollbar-thumb{background:var(--gold);border-radius:99px;}
.hub-tab{
  flex:0 0 auto;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  gap:.35rem;
  min-width:min(78vw, 220px);
  max-width:260px;
  padding:.9rem 1.05rem;
  background:var(--gold);
  color:#121820 !important;
  text-decoration:none !important;
  border-radius:10px;
  border:2px solid var(--gold-deep);
  font-weight:700;
  line-height:1.35;
  transition:transform .15s ease, filter .15s ease;
}
.hub-tab:hover{filter:brightness(1.05);transform:translateY(-2px);color:#121820 !important;}
.hub-tab__label{font-family:var(--display);font-size:1.05rem;}
.hub-tab__note{font-weight:500;font-size:.86rem;opacity:.85;}