/* ═══ ok-home v3.2 — hybrid design language (D2 base / D1 comparison layer / D3 CTA energy in toplist)
   under the semantic colour system (HOMEPAGE-V3-COLOUR-SYSTEM.md). Dossier pass: composed cards, score badges,
   integrated rank bands, capsule rows, layered hero object, in-house watermark illustrations — SAME colour discipline:
   · --ok-action appears ONLY in primary-button + focus rules
   · --ok-podium-* appears ONLY in .okh-medal--1/2/3
   · score/verdict colours come ONLY from --ok-band-1..5 via .okh-s1..s5
   · green = positive status · amber = caution/terms · red = risk only (s5; unused today)
   · brand colour never appears here (only via --acc inline on monogram plates) ═══ */

.ok-home{background:#fff;padding-bottom:0}
.ok-home .ok-home-sec{margin:0}
.okh-band{padding:84px 0;border-top:1px solid rgba(11,16,34,.05)}
.okh-band--white{background:#fff}
.okh-band--cool{background:var(--ok-surface-cool)}
.okh-band--mint{background:var(--ok-surface-mint)}
.okh-band--amber{background:var(--ok-surface-amber)}
.okh-band--sand{background:var(--ok-surface-sand)}
.okh-band--navy{background:linear-gradient(135deg,var(--ok-surface-navy) 0%,var(--ok-surface-navy-2) 100%);border-top:0}

/* ── ACTION COLOUR: the only blue, buttons + focus only ── */
.ok-home .ok-btn--primary{background:var(--ok-action);box-shadow:0 1px 2px rgba(20,67,173,.25),0 6px 14px -6px rgba(26,86,219,.45)}
.ok-home .ok-btn--primary:hover{background:var(--ok-action-deep);box-shadow:0 2px 4px rgba(20,67,173,.3),0 10px 20px -6px rgba(26,86,219,.5)}
.ok-home a:focus-visible,.ok-home .ok-btn:focus-visible,.ok-home summary:focus-visible{outline:3px solid var(--ok-action-ring);outline-offset:2px}
.ok-home .ok-btn--light{background:#fff;color:var(--ok-ink) !important}
.ok-home .ok-btn--light:hover{background:var(--ok-mint-dim)}
.okh-quiet{color:var(--ok-ink);font-weight:600;font-size:15px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ok-line-2)}
.okh-quiet:hover{text-decoration-color:var(--ok-ink)}
.okh-quiet--ondark{color:var(--ok-on-dark)}
.okh-quiet--ondark:hover{color:#fff;text-decoration-color:#fff}

/* ── Section heads ── */
.okh-kick{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ok-text-soft);margin-bottom:12px}
.okh-kick::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--ok-ink-2);opacity:.55}
.okh-kick--ondark{color:var(--ok-on-dark-faint)}
.okh-kick--ondark::before{background:var(--ok-on-dark-faint)}
.okh-kick--ondark img{height:16px;width:auto;border-radius:3px}
.okh-sechead{margin-bottom:38px;max-width:72ch}
.okh-sechead h2{font-size:34px;letter-spacing:-.018em;margin:0 0 10px;color:var(--ok-ink)}
.okh-sechead p{color:var(--ok-text-soft);margin:0;font-size:16.5px}
.okh-band--navy h2{color:#fff}
.ok-ad-inline{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ok-muted);border:1px solid var(--ok-line-2);border-radius:6px;padding:2px 7px;vertical-align:2px;margin-left:6px}
.okh-cap{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ok-muted)}
.okh-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ok-ink-2);background:var(--ok-surface-cool);border:1px solid var(--ok-line);border-radius:999px;padding:4px 11px}
.okh-tag--ed{background:#fff}

/* ── Brand identity slot (the ONLY brand-colour surface) ── */
.okh-brand{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.okh-brand img{display:block;width:auto;object-fit:contain}
.okh-brand--xs img{height:20px;max-width:74px}
.okh-brand--sm img{height:28px;max-width:104px}
.okh-brand--md img{height:40px;max-width:150px}
.okh-mono{display:grid;place-items:center;background-color:var(--acc,var(--ok-ink-2));background-image:linear-gradient(rgba(0,0,0,.22),rgba(0,0,0,.22));color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.35);font-family:var(--ok-font-display);font-weight:700;border-radius:10px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18),0 1px 2px rgba(11,16,34,.12);text-shadow:0 1px 1px rgba(0,0,0,.35)}
.okh-brand--xs .okh-mono{width:24px;height:24px;font-size:12px;border-radius:7px}
.okh-brand--sm .okh-mono{width:32px;height:32px;font-size:15px}
.okh-brand--md .okh-mono{width:52px;height:52px;font-size:23px;border-radius:13px}

/* identity tile: composed frame for logo/monogram */
.okh-tile{display:grid;place-items:center;width:56px;height:56px;background:#fff;border:1px solid var(--ok-line);border-radius:14px;box-shadow:0 1px 2px rgba(11,16,34,.06);flex:0 0 auto}
.okh-tile--lg{width:64px;height:64px}
.okh-tile .okh-brand--sm img{height:26px;max-width:44px}
.okh-tile .okh-brand--sm .okh-mono{width:34px;height:34px;font-size:16px}
.okh-tile--lg .okh-brand--md img{height:30px;max-width:52px}
.okh-tile--lg .okh-brand--md .okh-mono{width:42px;height:42px;font-size:19px;border-radius:11px}

/* ── Semantic score (band colour only — never brand colour) ── */
.okh-s1{--band:var(--ok-band-1)}
.okh-s2{--band:var(--ok-band-2)}
.okh-s3{--band:var(--ok-band-3)}
.okh-s4{--band:var(--ok-band-4)}
.okh-s5{--band:var(--ok-band-5)}
.okh-s0{--band:var(--ok-muted)}
/* score badge: solid band-colour plate — compact, commercial, integrated */
.okh-scoreb{display:inline-flex;align-items:baseline;justify-content:center;gap:2px;background:var(--band);color:#fff;border-radius:10px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.16),0 1px 3px rgba(11,16,34,.14);flex:0 0 auto;line-height:1}
.okh-scoreb b{font-family:var(--ok-font-display);font-weight:700;color:#fff}
.okh-scoreb i{font-style:normal;color:rgba(255,255,255,.9);font-weight:600}
.okh-scoreb--lg{padding:13px 15px;border-radius:13px}
.okh-scoreb--lg b{font-size:25px}
.okh-scoreb--lg i{font-size:12px}
.okh-scoreb--md{padding:10px 12px}
.okh-scoreb--md b{font-size:19px}
.okh-scoreb--md i{font-size:10.5px}
.okh-scoreb--sm{padding:8px 10px}
.okh-scoreb--sm b{font-size:16px}
.okh-scoreb--sm i{font-size:9.5px}
.okh-scoreb--xs{padding:6px 8px;border-radius:8px}
.okh-scoreb--xs b{font-size:14px}
.okh-scoreb--xs i{display:none}
/* badge armor: no context selector may recolour badge internals (cascade bug 2026-07-05) */
.ok-home .okh-scoreb b{color:#fff}
.ok-home .okh-scoreb i{color:rgba(255,255,255,.9)}
/* s3 softening: tinted plate instead of solid amber — "godkänd med blandad bild", not alarm */
.ok-home .okh-scoreb.okh-s3{background:var(--ok-band-3-bg);box-shadow:inset 0 0 0 1px var(--ok-warn-line)}
.ok-home .okh-scoreb.okh-s3 b{color:#7a5c17}
.ok-home .okh-scoreb.okh-s3 i{color:rgba(122,92,23,.75)}
.okh-verdict{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.okh-verdict--s1{color:var(--ok-band-1)}
.okh-verdict--s2{color:var(--ok-band-2)}
.okh-verdict--s3{color:var(--ok-band-3)}
.okh-verdict--s4{color:var(--ok-band-4)}
.okh-verdict--s5{color:var(--ok-band-5)}

/* ── Podium medals: top 3 ONLY ── */
.okh-medal{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:#fff;font-size:12px;font-weight:800;flex:0 0 auto;box-shadow:inset 0 -2px 0 rgba(0,0,0,.22),0 0 0 2px rgba(255,255,255,.9),0 1px 3px rgba(11,16,34,.2)}
.okh-medal--1{background:var(--ok-podium-1)}
.okh-medal--2{background:var(--ok-podium-2)}
.okh-medal--3{background:var(--ok-podium-3)}
/* neutral rank marker, positions 4+ */
.okh-rank{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:2px solid var(--ok-line-2);background:#fff;color:var(--ok-ink-2);font-family:var(--ok-font-display);font-weight:700;font-size:15px;flex:0 0 auto}

/* ghost-card rule (impeccable polish): rest shadows are hairline-subtle sitewide-on-home; the hero object is the ONE deliberately elevated element. Hover lift = state, unchanged. */
/* ── Hero (sand editorial + layered comparison object) ── */
.okh-hero{position:relative;background:var(--ok-surface-sand);border-bottom:1px solid var(--ok-sand-line-2);overflow:hidden}
.okh-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(16,27,63,.035) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}
.okh-hero::after{content:"";position:absolute;right:-180px;top:-220px;width:560px;height:560px;border-radius:50%;background:radial-gradient(closest-side,rgba(16,27,63,.05),transparent);pointer-events:none}
.okh-hero-in{position:relative;display:grid;grid-template-columns:1.4fr 1fr;gap:60px;padding-top:84px;padding-bottom:84px;align-items:start}
.okh-hero-main h1{color:var(--ok-ink);font-size:clamp(32px,4.3vw,48px);letter-spacing:-.02em;line-height:1.08;margin:0 0 16px;max-width:20ch}
.okh-hero-sub{color:var(--ok-text-soft);font-size:17.5px;max-width:56ch;margin:0 0 26px}
.okh-hero-ctas{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.okh-hero-ctas .ok-btn--lg{width:auto}
.okh-hero-facts{list-style:none;display:flex;flex-direction:column;gap:10px;margin:30px 0 0;padding:20px 0 0;border-top:1px solid var(--ok-sand-line)}
.okh-hero-facts li{display:inline-flex;align-items:center;gap:9px}
.okh-fact-ic{display:grid;place-items:center;flex:0 0 auto}
.okh-fact-ic .okh-ic{width:16px;height:16px;color:var(--ok-ink-2)}
.okh-hero-facts b{font-size:13.5px;color:var(--ok-ink-2);font-weight:600;letter-spacing:.005em}
.okh-objstack{position:relative;padding-top:20px;margin-top:34px}
/* layered-paper strips: intentional one-off literals (stacked-dossier art) */
.okh-objstack::before{content:"";position:absolute;top:10px;left:26px;right:26px;height:16px;border-radius:12px 12px 0 0;background:#efe8d8;border:1px solid #e5dcc6;border-bottom:0}
.okh-objstack::after{content:"";position:absolute;top:0;left:48px;right:48px;height:16px;border-radius:12px 12px 0 0;background:#f3eee1;border:1px solid #e9e1cf;border-bottom:0}
.okh-hero-obj{position:relative;z-index:1;background:#fff;border:1px solid var(--ok-line);border-radius:16px;box-shadow:var(--ok-shadow-lg)}
.okh-hero-obj-head{display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(135deg,var(--ok-surface-navy),var(--ok-surface-navy-2));padding:16px 20px;border-radius:15px 15px 0 0}
.okh-hero-obj-headtxt{display:flex;flex-direction:column;gap:3px}
.okh-hero-obj-cap{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#fff}
.okh-hero-obj-sub{font-size:11.5px;color:var(--ok-on-dark-faint)}
.okh-hero-obj-illo{color:#fff;opacity:.5;flex:0 0 auto}
.okh-hero-obj-illo .okh-illo{width:52px;height:auto;display:block}
.okh-hero-obj-body{padding:16px 18px 14px}
.okh-heromini{display:flex;align-items:center;gap:13px;padding:12px 13px;border:1px solid var(--ok-line);border-radius:12px;margin-bottom:9px;text-decoration:none;background:#fff;transition:border-color var(--ok-dur) var(--ok-ease),box-shadow var(--ok-dur) var(--ok-ease),transform var(--ok-dur) var(--ok-ease)}
.okh-heromini:hover{border-color:var(--ok-line-2);box-shadow:var(--ok-shadow);transform:translateY(-1px)}
.okh-heromini-id{flex:1;min-width:0}
.okh-heromini-id b{display:block;font-weight:700;color:var(--ok-ink);font-size:15px}
.okh-heromini-id i{display:block;font-style:normal;font-size:11px;color:var(--ok-muted);margin-top:1px}
.okh-hero-pay{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:13px;padding-top:14px;border-top:1px solid var(--ok-line)}
.okh-hero-pay>span:first-child{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ok-muted)}
.okh-hero-rg{margin:0;padding:10px 20px;font-size:11.5px;color:var(--ok-muted);background:var(--ok-surface-faint);border-top:1px solid var(--ok-line);border-radius:0 0 15px 15px}
.okh-hero-rg a{color:var(--ok-text-soft);text-decoration:underline}

/* ── Payment marks (official brand files on white plates) ── */
.okh-pmrow{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.okh-pm{display:inline-grid;place-items:center;height:28px;padding:0 9px;background:#fff;border:1px solid var(--ok-line);border-radius:7px;box-shadow:0 1px 2px rgba(11,16,34,.05)}
.okh-pm img{height:16px;width:auto;display:block}

/* ── Top 3 cards (dossier composition: integrated rank band, composed header) ── */
.okh-top3{display:grid;grid-template-columns:1.05fr 1fr 1fr;gap:20px;margin-bottom:30px;align-items:start}
.okh-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--ok-line);border-radius:16px;box-shadow:0 1px 2px rgba(11,16,34,.05);padding:0 18px 16px;overflow:hidden}
.okh-card--first{border-color:var(--ok-ink-2);box-shadow:0 1px 3px rgba(11,16,34,.08)}
.okh-card-band{display:flex;align-items:center;gap:9px;margin:0 -18px 15px;padding:9px 18px;background:var(--ok-surface-cool);border-bottom:1px solid var(--ok-line)}
.okh-card-band b{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ok-ink-2)}
.okh-card-band-upd{margin-left:auto;font-size:10.5px;color:var(--ok-muted)}
.okh-card-band--first{background:linear-gradient(135deg,var(--ok-surface-navy),var(--ok-surface-navy-2));border-bottom:0}
.okh-card-band--first b{color:#fff}
.okh-card-band--first .okh-card-band-upd{color:var(--ok-on-dark-faint)}
.okh-card-head{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:13px;align-items:center}
.okh-card-id h3{margin:0;font-size:18.5px;letter-spacing:-.012em;line-height:1.15}
.okh-card-id h3 a{color:var(--ok-ink);text-decoration:none}
.okh-card-id h3 a:hover{text-decoration:underline}
.okh-bestfor{display:block;font-size:12px;color:var(--ok-muted);margin-top:3px}
.okh-card-score{display:flex;flex-direction:column;align-items:center;gap:4px}
.okh-card-why{color:var(--ok-text-soft);font-size:13.5px;line-height:1.5;margin:12px 0 0}
.okh-cuesrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.okh-cuechip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ok-text);background:#fff;border:1px solid var(--ok-line-2);border-radius:999px;padding:5px 11px;text-decoration:none}
.okh-cuechip .okh-ic{width:13px;height:13px;color:var(--ok-ink-2)}
.okh-cuechip--pos{color:var(--ok-green-ink);border-color:var(--ok-success-line);background:var(--ok-success-surface)}
.okh-cuechip--pos .okh-ic{color:var(--ok-green-deep)}
.okh-cuechip--caut{color:var(--ok-warn-text);border-color:var(--ok-warn-line);background:var(--ok-warn-surface)}
.okh-cuechip--caut .okh-ic{color:var(--ok-band-3)}
a.okh-cuechip--caut:hover{text-decoration:underline}
.okh-comblock{margin-top:13px;border:1px solid var(--ok-warn-line);border-radius:12px;overflow:hidden}
.okh-comblock-bonus{padding:11px 14px;background:var(--ok-warn-surface)}
.okh-comblock-bonus .okh-cap{margin-bottom:2px}
.okh-comblock-bonus b{display:block;font-family:var(--ok-font-display);font-size:16.5px;letter-spacing:-.01em;color:var(--ok-ink)}
.okh-comblock-bonus i{display:block;font-style:normal;font-size:11.5px;color:var(--ok-warn-text);margin-top:3px}
.okh-comblock--none{border-color:var(--ok-line)}
.okh-comblock--none .okh-comblock-bonus{background:var(--ok-surface-faint)}
.okh-comblock--none .okh-comblock-bonus i{color:var(--ok-muted)}
.okh-comblock-pay{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:9px 14px;background:#fff;border-top:1px solid var(--ok-line)}
.okh-verified{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--ok-green-ink)}
.okh-verified .okh-ic{width:12px;height:12px;color:var(--ok-green-deep)}
.okh-minins{font-size:11.5px;color:var(--ok-muted)}
.okh-card-act{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.okh-card-act .ok-btn{width:100%}
.okh-card--first .okh-card-act .ok-btn{font-size:16px;padding:14px 26px}
.okh-card-act .ok-ccard-rev{text-align:center;font-size:13px}
.okh-microrg{margin:10px 0 0;font-size:10.5px;color:var(--ok-muted);text-align:center}
.okh-microrg a{color:var(--ok-muted);text-decoration:underline}

/* ── Rows 4–10 (decision rows: identity tile + data capsules — no spreadsheet hairlines) ── */
.okh-rows{display:flex;flex-direction:column;gap:12px}
.okh-row{display:grid;grid-template-columns:34px minmax(0,1.9fr) 180px minmax(0,1fr) 172px;gap:18px;align-items:center;background:#fff;border:1px solid var(--ok-line);border-radius:14px;padding:15px 20px;box-shadow:0 1px 2px rgba(11,16,34,.04);transition:box-shadow var(--ok-dur) var(--ok-ease),transform var(--ok-dur) var(--ok-ease),border-color var(--ok-dur) var(--ok-ease)}
.okh-row:hover{box-shadow:var(--ok-shadow);transform:translateY(-1px);border-color:var(--ok-line-2)}
.okh-row-id{display:flex;align-items:center;gap:14px;min-width:0}
.okh-row-txt{min-width:0}
.okh-row-name{font-family:var(--ok-font-display);font-weight:700;font-size:16.5px;letter-spacing:-.01em;color:var(--ok-ink);text-decoration:none}
.okh-row-name:hover{text-decoration:underline}
.okh-row-why{margin:3px 0 7px;font-size:12.5px;color:var(--ok-text-soft)}
.okh-chips{display:flex;gap:6px;flex-wrap:wrap}
.okh-chip{font-style:normal;font-size:11px;font-weight:600;color:var(--ok-text-soft);border:1px solid var(--ok-line-2);border-radius:999px;padding:3px 10px;background:#fff}
.okh-chip--pos{color:var(--ok-green-ink);border-color:var(--ok-success-line);background:var(--ok-success-surface)}
.okh-chip--caut{color:var(--ok-warn-text);border-color:var(--ok-warn-line);background:var(--ok-warn-surface)}
.okh-rowstat{background:var(--ok-surface-cool);border-radius:12px;padding:10px 14px;min-width:0}
.okh-rowstat .okh-cap{margin-bottom:5px}
.okh-rowstat-in{display:flex;align-items:center;gap:9px}
.okh-rowstat>b{display:block;font-size:13.5px;color:var(--ok-ink)}
.okh-rowstat>i{display:block;font-style:normal;font-size:11px;color:var(--ok-muted);margin-top:2px}
.okh-row-act{display:flex;flex-direction:column;gap:7px}
.okh-row-act .ok-btn{width:100%}
.okh-row-act .ok-ccard-rev{text-align:center;font-size:12.5px}

/* ── Comparison table (v3 skin on shared cmpv2 base) ── */
.okh-legend{display:flex;gap:18px;flex-wrap:wrap;margin:14px 0 0;font-size:12.5px;color:var(--ok-text-soft)}
.okh-legend-item{display:inline-flex;align-items:center;gap:7px}
.okh-legend-caut{font-style:normal;color:var(--ok-warn-text);font-weight:600}
.ok-home .okh-cmp{border-radius:16px;box-shadow:0 1px 2px rgba(11,16,34,.05);border-color:var(--ok-line)}
.ok-home .okh-cmp .ok-cmpv2-head{background:linear-gradient(135deg,var(--ok-surface-navy),var(--ok-surface-navy-2));color:var(--ok-on-dark);border-bottom:0;padding:16px 20px;font-size:11px;letter-spacing:.09em}
.ok-home .okh-cmp .ok-cmpv2-row{padding:16px 20px;border-top:1px solid var(--ok-line)}
.ok-home .okh-cmp .ok-cmpv2-row:nth-child(odd){background:var(--ok-surface-faint)}
.ok-home .okh-cmp .ok-cmpv2-row:hover{background:var(--ok-surface-cool)}
.ok-home .okh-cmp .ok-cmpv2-name{display:flex;align-items:center;gap:11px}
.ok-home .okh-cmp .ok-cmpv2-name a{font-size:15.5px}
.ok-home .okh-cmp .ok-cmpv2-score{display:flex;align-items:center;gap:9px}
.ok-home .okh-cmp .ok-cmpv2-score em{font-size:12px}
.okh-yes{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--ok-success-surface);border:1px solid var(--ok-success-line)}
.okh-yes .okh-ic{width:13px;height:13px;color:var(--ok-green-deep)}
.okh-no{color:var(--ok-muted)}
.okh-clean{color:var(--ok-green-ink);font-weight:600;font-size:13.5px}
.okh-flaglink{color:var(--ok-band-3);font-weight:600;font-size:13.5px;text-decoration:underline;text-underline-offset:3px}

/* ── Why us (editorial steps) ── */
.okh-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin:0;padding:0}
.okh-steps li{border-top:2px solid var(--ok-line-2);padding-top:20px}
.okh-step-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--ok-surface-cool);margin-bottom:14px}
.okh-step-ic .okh-ic{width:21px;height:21px;color:var(--ok-ink-2)}
.okh-steps b{display:block;color:var(--ok-ink);font-size:16px;margin-bottom:6px}
.okh-steps span:not(.okh-step-ic){font-size:13.5px;color:var(--ok-text-soft)}

/* ── Svensk licens (navy authority) ── */
.okh-licpanel{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:center}
.okh-lic-main h2{color:#fff;font-size:31px;letter-spacing:-.015em;margin:0 0 12px}
.okh-lic-main p{color:var(--ok-on-dark-dim);font-size:15px;max-width:60ch}
.okh-lic-main a{color:var(--ok-on-dark);text-decoration:underline}
.okh-licstats{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.okh-licstats span{font-size:12.5px;color:var(--ok-on-dark-dim);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 14px}
.okh-licstats b{color:#fff;font-weight:700}
.okh-lic-links{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:18px}
.okh-lic-list{list-style:none;display:grid;gap:10px;margin:0;padding:0}
.okh-lic-list li{display:grid;grid-template-columns:36px 1fr;gap:2px 14px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:13px 16px}
.okh-lic-list .okh-ic{width:18px;height:18px;color:var(--ok-mint);grid-row:span 2;place-self:center;margin:0}
.okh-lic-list b{color:#fff;font-size:14.5px}
.okh-lic-list span{grid-column:2;font-size:12.5px;color:var(--ok-on-dark-faint)}

/* ── Methodology (mint trust surface, neutral data bars) ── */
.okh-methodpanel{display:grid;grid-template-columns:1fr 1.35fr;gap:44px;align-items:start}
.okh-method-intro h2{font-size:30px;letter-spacing:-.015em;margin:0 0 10px}
.okh-method-intro p{color:var(--ok-text);max-width:46ch}
.okh-bandscale{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 20px}
.okh-scale-item{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ok-text-soft);font-weight:600;background:#fff;border:1px solid var(--ok-line);border-radius:999px;padding:6px 12px}
.okh-dot{width:10px;height:10px;border-radius:50%}
.okh-dot--s1{background:var(--ok-band-1)}
.okh-dot--s2{background:var(--ok-band-2)}
.okh-dot--s3{background:var(--ok-band-3)}
.okh-dot--s4{background:var(--ok-band-4)}
.okh-dot--s5{background:var(--ok-band-5)}
.okh-weights{list-style:none;margin:0;padding:26px 28px;background:#fff;border:1px solid var(--ok-line);border-radius:16px;box-shadow:0 1px 2px rgba(11,16,34,.05);display:flex;flex-direction:column;gap:15px}
.okh-weights li{display:grid;gap:5px}
.okh-w-label{display:flex;align-items:center;gap:10px}
.okh-w-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--ok-surface-cool);flex:0 0 auto}
.okh-w-ic .okh-ic{width:14px;height:14px;color:var(--ok-ink-2)}
.okh-w-label b{flex:1;font-size:14px;color:var(--ok-ink)}
.okh-w-label em{font-style:normal;font-family:var(--ok-font-display);font-weight:700;font-size:14.5px;color:var(--ok-ink-2)}
.okh-w-stack{display:flex;height:12px;border-radius:999px;overflow:hidden;margin:2px 0 6px}
.okh-w-stack i{display:block;height:100%;background:var(--ok-ink-2)}
.okh-w-stack i:nth-child(even){background:#3d4a6e}
.okh-w-desc{font-size:12px;color:var(--ok-muted)}
.okh-weights li.okh-w-sum{display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--ok-line);padding-top:13px;margin-top:2px;font-family:var(--ok-font-display);font-weight:700;font-size:13.5px;color:var(--ok-ink)}

/* ── Watermark illustrations (in-house, low-opacity — editorial depth, no new colour) ── */
.okh-band--crop{position:relative;overflow:hidden}
.okh-wm{position:absolute;pointer-events:none}
.okh-wm .okh-illo{width:300px;height:auto;display:block}
.okh-wm--light{right:-40px;bottom:-56px;color:#fff;opacity:.055}
.okh-wm--dark{right:20px;top:26px;color:var(--ok-ink);opacity:.05}
.okh-wm--dark .okh-illo{width:220px}

/* ── Payments ── */
.okh-paygrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.okh-paycard{background:#fff;border:1px solid var(--ok-line);border-radius:14px;padding:22px;box-shadow:0 1px 2px rgba(11,16,34,.04);transition:box-shadow var(--ok-dur) var(--ok-ease),transform var(--ok-dur) var(--ok-ease)}
.okh-paycard:hover{box-shadow:var(--ok-shadow);transform:translateY(-2px)}
.okh-pay-mark{display:flex;align-items:center;gap:8px;height:34px;margin-bottom:13px}
.okh-pay-mark img{height:26px;width:auto}
.okh-pay-mark--fn .okh-ic{width:26px;height:26px;color:var(--ok-ink-2)}
.okh-paycard b{display:block;font-size:16.5px;color:var(--ok-ink);margin-bottom:5px}
.okh-paycard p{font-size:13.5px;color:var(--ok-text-soft);margin:0 0 12px}
.okh-paycount{display:inline-block;font-size:12.5px;font-weight:700;color:var(--ok-ink-2)}
.okh-linkrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
/* unified link-pill vocabulary: linkrow + continue + shared .ok-cmp all speak the same dialect */
.okh-linkrow a,.ok-home .ok-cmp a{font-size:13px;font-weight:600;color:var(--ok-ink-2);background:#fff;border:1px solid var(--ok-line-2);border-radius:999px;padding:8px 15px;text-decoration:none;box-shadow:none;transition:border-color var(--ok-dur) var(--ok-ease)}
.okh-linkrow a:hover,.ok-home .ok-cmp a:hover{border-color:var(--ok-ink-2);color:var(--ok-ink-2)}

/* ── Game tiles (gated slot modules — render only with verified content) ── */
.okh-gamegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.okh-gamecard{display:block;background:#fff;border:1px solid var(--ok-line);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(11,16,34,.04);text-decoration:none;transition:box-shadow var(--ok-dur) var(--ok-ease),transform var(--ok-dur) var(--ok-ease)}
.okh-gamecard:hover{box-shadow:var(--ok-shadow);transform:translateY(-2px)}
.okh-game-art{display:block;aspect-ratio:4/3;background:var(--ok-surface-cool)}
.okh-game-art img{width:100%;height:100%;object-fit:cover;display:block}
.okh-game-body{display:flex;flex-direction:column;gap:7px;padding:14px 16px 16px}
.okh-game-title{font-family:var(--ok-font-display);font-size:16px;letter-spacing:-.01em;color:var(--ok-ink)}
.okh-game-provider img{height:16px;width:auto;display:block}
.okh-game-provider{font-size:12px;font-weight:600;color:var(--ok-text-soft)}
.okh-game-body p{margin:0;font-size:12.5px;color:var(--ok-text-soft)}
.okh-game-stats{display:flex;gap:8px;flex-wrap:wrap}
.okh-game-stats em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--ok-ink-2);background:var(--ok-surface-cool);border-radius:999px;padding:4px 10px}
.okh-microrg--left{text-align:left;margin-top:18px}
/* new-casino rows reuse okh-row; the launch tag sits above the grid line */
#nya-casinon .okh-row{grid-template-rows:auto;position:relative;padding-top:34px}
#nya-casinon .okh-row>.okh-tag{position:absolute;top:12px;left:20px}

/* ── Bonus (amber = terms context) ── */
.okh-bonusnote{font-size:13.5px;color:var(--ok-text-soft);max-width:78ch;margin:0 0 18px}
.okh-bonusrows{display:flex;flex-direction:column;gap:11px}
.okh-bonusrow{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.9fr) 176px;gap:18px;align-items:center;background:#fff;border:1px solid var(--ok-line);border-radius:13px;padding:15px 20px;box-shadow:0 1px 2px rgba(11,16,34,.04)}
.okh-bonusrow-id{display:flex;align-items:center;gap:11px}
.okh-bonusrow-id a{font-weight:700;font-size:15px;color:var(--ok-ink);text-decoration:none}
.okh-bonusrow-id a:hover{text-decoration:underline}
.okh-bonusrow-offer b{display:block;font-family:var(--ok-font-display);font-size:15.5px;color:var(--ok-ink)}
.okh-bonusrow-terms{font-size:11.5px;color:var(--ok-warn-text);margin-top:2px}
.okh-bonusrow-cta .ok-btn{width:100%}

/* ── RG (navy, serious) ── */
.okh-rgpanel{display:flex;gap:26px;align-items:flex-start}
.okh-rg-badge{flex:0 0 auto;font-family:var(--ok-font-display);font-weight:700;color:#fff;border:2px solid rgba(255,255,255,.4);border-radius:12px;padding:9px 13px;font-size:17px}
.okh-rgpanel h2{color:#fff;font-size:24px;margin:0 0 8px}
.okh-rgpanel p{color:var(--ok-on-dark-dim);font-size:15px;max-width:74ch;margin:0 0 12px}
.okh-rgpanel a{color:var(--ok-on-dark);text-decoration:underline}
.okh-rg-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin:0 0 14px;padding:0}
.okh-rg-list li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--ok-on-dark-dim)}
.okh-rg-list .okh-ic{width:16px;height:16px;color:var(--ok-on-dark-dim);flex:0 0 auto;margin-top:2px}

/* ── Editorial: latest + features + continue ── */
.okh-latestgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.okh-latestcard{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--ok-line);border-radius:14px;padding:20px 22px;text-decoration:none;box-shadow:0 1px 2px rgba(11,16,34,.04);transition:box-shadow var(--ok-dur) var(--ok-ease),transform var(--ok-dur) var(--ok-ease)}
.okh-latestcard:hover{box-shadow:var(--ok-shadow);transform:translateY(-2px)}
.okh-latestcard .okh-tag{align-self:flex-start}
.okh-latestcard-id{display:flex;align-items:center;gap:11px}
.okh-latestcard-id>b{flex:1;font-family:var(--ok-font-display);font-size:16.5px;letter-spacing:-.01em;color:var(--ok-ink)}
.okh-latestcard p{margin:0;font-size:13px;color:var(--ok-text-soft);flex:1}
.okh-latestcard-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--ok-ink)}
.okh-latestcard-link i{font-style:normal;transition:transform var(--ok-dur) var(--ok-ease)}
.okh-latestcard:hover .okh-latestcard-link i,.okh-edcard:hover .okh-latestcard-link i{transform:translateX(3px)}
.okh-edgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:22px}
.okh-edcard{display:grid;grid-template-columns:56px 1fr;gap:16px;background:#fff;border:1px solid var(--ok-line);border-radius:14px;padding:22px;text-decoration:none;box-shadow:0 1px 2px rgba(11,16,34,.04);transition:box-shadow var(--ok-dur) var(--ok-ease),transform var(--ok-dur) var(--ok-ease)}
.okh-edcard:hover{box-shadow:var(--ok-shadow);transform:translateY(-2px)}
.okh-ed-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--ok-surface-navy),var(--ok-surface-navy-2))}
.okh-ed-ic .okh-ic{width:24px;height:24px;color:#fff}
.okh-ed-body{display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.okh-edcard b{color:var(--ok-ink);font-family:var(--ok-font-display);font-size:17.5px;letter-spacing:-.012em;line-height:1.25}
.okh-edcard-sub{font-size:13px;color:var(--ok-text-soft)}
.okh-continue{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;background:#fff;border:1px solid var(--ok-line);border-radius:14px;padding:16px 22px;box-shadow:0 1px 2px rgba(11,16,34,.04)}
.okh-continue-cap{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ok-ink-2)}
.okh-continue-cap .okh-ic{width:15px;height:15px;color:var(--ok-ink-2)}
.okh-continue-links{display:flex;gap:10px;flex-wrap:wrap}
.okh-continue-links a{font-size:13px;font-weight:600;color:var(--ok-ink-2);background:#fff;border:1px solid var(--ok-line-2);border-radius:999px;padding:8px 15px;text-decoration:none;transition:border-color var(--ok-dur) var(--ok-ease)}
.okh-continue-links a:hover{border-color:var(--ok-ink-2)}

/* ── Nyheter (compact card row — auto-fill keeps cards small even when few) ── */
.okh-newsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-bottom:18px}
.okh-newscard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ok-line);border-radius:12px;overflow:hidden;text-decoration:none;box-shadow:0 1px 2px rgba(11,16,34,.04);transition:box-shadow var(--ok-dur) var(--ok-ease),transform var(--ok-dur) var(--ok-ease)}
.okh-newscard:hover{box-shadow:var(--ok-shadow);transform:translateY(-2px)}
.okh-news-img{display:block;aspect-ratio:16/9;background:var(--ok-surface-sand)}
.okh-news-img img{width:100%;height:100%;object-fit:cover;display:block}
.okh-newscard-body{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;flex:1}
.okh-newscard b{font-family:var(--ok-font-display);font-size:14.5px;letter-spacing:-.008em;line-height:1.3;color:var(--ok-ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.okh-newscard .okh-latestcard-link{margin-top:auto;font-size:12px}

/* ── Disclosure strip ── */
.okh-discstrip{display:flex;align-items:flex-start;gap:14px;background:#fff;border:1px solid var(--ok-line);border-radius:13px;padding:17px 22px;box-shadow:0 1px 2px rgba(11,16,34,.04)}
.okh-disc-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--ok-surface-cool);flex:0 0 auto}
.okh-disc-ic .okh-ic{width:17px;height:17px;color:var(--ok-ink-2)}
.okh-discstrip p{margin:0;font-size:13.5px;color:var(--ok-text-soft);flex:1}
.okh-discstrip-links{display:flex;gap:14px;flex:0 0 auto}
.okh-discstrip-links a{font-size:13px;font-weight:600;color:var(--ok-ink);text-decoration:underline;text-underline-offset:3px}

/* ── FAQ ── */
.okh-faqsec .ok-wrap{max-width:900px}
.okh-faq details{background:#fff;border:1px solid var(--ok-line);border-radius:12px;margin-bottom:10px;overflow:hidden;box-shadow:0 1px 2px rgba(11,16,34,.04)}
.okh-faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;list-style:none;padding:17px 22px;font-weight:700;font-size:15.5px;color:var(--ok-ink)}
.okh-faq summary::-webkit-details-marker{display:none}
.okh-faq-mark{font-family:var(--ok-font-display);font-size:20px;color:var(--ok-muted);transition:transform var(--ok-dur) var(--ok-ease)}
.okh-faq details[open] .okh-faq-mark{transform:rotate(45deg)}
.okh-faq details[open]{border-color:var(--ok-line-2)}
.okh-faq details[open] summary{background:var(--ok-surface-cool)}
.okh-faq details p{margin:0;padding:14px 22px 17px;font-size:14px;color:var(--ok-text-soft)}

/* ── Hub navigation (grouped internal-link module) ── */
.okh-hubgroups{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.okh-hubgroup-cap{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ok-text-soft);margin:0 0 12px}
.okh-hubgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.okh-hubcard{position:relative;display:grid;grid-template-columns:40px 1fr 18px;gap:12px;align-items:center;background:#fff;border:1px solid var(--ok-line);border-radius:13px;padding:14px 16px;text-decoration:none;box-shadow:0 1px 2px rgba(11,16,34,.04);transition:box-shadow var(--ok-dur) var(--ok-ease),transform var(--ok-dur) var(--ok-ease),border-color var(--ok-dur) var(--ok-ease)}
.okh-hubcard:hover{box-shadow:var(--ok-shadow);transform:translateY(-2px);border-color:var(--ok-line-2)}
.okh-hub-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--ok-surface-cool)}
.okh-hub-ic .okh-ic{width:19px;height:19px;color:var(--ok-ink-2)}
.okh-hub-txt b{display:block;color:var(--ok-ink);font-size:15.5px}
.okh-hub-txt span{display:block;font-size:12.5px;color:var(--ok-text-soft);margin-top:2px}
.okh-hubcard i{font-style:normal;color:var(--ok-ink-2);font-weight:700;transition:transform var(--ok-dur) var(--ok-ease)}
.okh-hubcard:hover i{transform:translateX(3px)}

/* fine print: ONE voice on light surfaces (12–12.5px, muted, left) */
.ok-home .ok-disc,.ok-home .ok-disc--light{font-size:12px;color:var(--ok-muted);text-align:left;max-width:76ch;margin-top:22px}
.ok-home .ok-disc a,.ok-home .ok-disc--light a{color:var(--ok-text-soft)}
.ok-home .ok-comp-line{text-align:left;color:var(--ok-muted);margin-top:22px}
.ok-home .ok-comp-line a{color:var(--ok-text-soft)}
.okh-microrg{font-size:11.5px}
.ok-home-note{font-size:12.5px;color:var(--ok-muted);margin-top:14px}
.ok-home-note a{color:var(--ok-text-soft);text-decoration:underline}

/* ── Responsive ── */
@media(max-width:1080px){
  .okh-hero-in{grid-template-columns:1fr;gap:36px}
  .okh-hero-facts{grid-template-columns:1fr}
  .okh-top3{grid-template-columns:1fr;max-width:660px}
  .okh-methodpanel,.okh-licpanel{grid-template-columns:1fr;gap:30px}
  .okh-paygrid{grid-template-columns:1fr 1fr}
  .okh-steps{grid-template-columns:1fr}
  .okh-latestgrid{grid-template-columns:1fr 1fr}
  .okh-hubgroups{grid-template-columns:1fr}
  .okh-steps{grid-template-columns:1fr;gap:22px}
  .okh-row{grid-template-columns:34px 1fr 1fr;grid-template-areas:"rank id id" ". score bonus" ". act act";row-gap:12px}
  .okh-row>.okh-rank{grid-area:rank}
  .okh-row-id{grid-area:id}
  .okh-row .okh-rowstat:nth-of-type(2){grid-area:score}
  .okh-row .okh-rowstat:nth-of-type(3){grid-area:bonus}
  .okh-row-act{grid-area:act;align-items:stretch}
  .okh-bonusrow{grid-template-columns:1fr 1fr}
  .okh-bonusrow-cta{grid-column:1 / -1}
}
@media(max-width:640px){
  /* adapt: touch targets ≥44px on the mobile-heavy audience (WCAG 2.5.8 best practice);
     desktop keeps the tighter editorial sizing */
  .okh-continue-links a,.okh-linkrow a{min-height:44px;display:inline-flex;align-items:center;padding:10px 17px}
  a.okh-cuechip{min-height:44px;padding:10px 14px}
  .ok-home .ok-btn--sm{min-height:44px;padding:12px 16px}
  .okh-row-act .ok-ccard-rev,.okh-card-act .ok-ccard-rev,.okh-latestcard-link{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .okh-quiet{display:inline-flex;align-items:center;min-height:44px}
  .okh-band{padding:56px 0}
  .okh-hero-in{padding-top:48px;padding-bottom:52px}
  .okh-sechead h2{font-size:26px}
  .okh-latestgrid,.okh-edgrid,.okh-paygrid,.okh-hubgrid,.okh-newsgrid{grid-template-columns:1fr 1fr}
  .okh-edcard{grid-template-columns:44px 1fr;padding:18px}
  .okh-ed-ic{width:44px;height:44px}
  .okh-row{padding:14px;grid-template-columns:1fr 1fr;grid-template-areas:"id id" "score bonus" "act act"}
  .okh-row>.okh-rank{display:none}
  .okh-hero-obj-illo{display:none}
  .okh-bonusrow{grid-template-columns:1fr}
  .okh-discstrip{flex-direction:column}
  .okh-rgpanel{flex-direction:column}
  .okh-continue{align-items:flex-start;flex-direction:column}
  .okh-hero-obj-head{flex-direction:column;gap:2px}
}
/* Phones ≤600px: rich cards need ~223px min-content each, so a 2-col grid overflows
   a 390–430px viewport. Collapse the card grids to a single column and drop the
   decorative watermark (which extends past the viewport edge). */
@media(max-width:600px){
  .okh-latestgrid,.okh-edgrid,.okh-hubgrid,.okh-newsgrid{grid-template-columns:1fr}
  .okh-wm{display:none}
}

/* Sticky mobil-CTA (audit 2026-07-17) — hubbarnas bottenlist-monster i okh-drakt */
.okh-stickybar{display:none}
@media(max-width:980px){
  .okh-hasbar .okh-stickybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:200;align-items:center;gap:10px;padding:9px 13px;background:#fff;border-top:1px solid var(--ok-line-2);box-shadow:0 -8px 24px rgba(11,16,34,.14)}
  .okh-stickybar-brand{flex:0 0 auto;display:flex}
  .okh-stickybar-brand .okh-brand--sm img{max-width:46px;max-height:28px;width:auto;height:auto}
  .okh-stickybar-id{display:flex;align-items:center;gap:8px;min-width:0;margin-right:auto}
  .okh-stickybar-id b{font-family:var(--ok-font-display);font-size:14.5px;color:var(--ok-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .okh-stickybar .ok-btn{white-space:nowrap;flex:0 0 auto;padding:11px 18px}
  .okh-hasbar{padding-bottom:68px}
}