/* ==========================================================================
Topbanker theme — main stylesheet
========================================================================== */
:root{
/* Topbanker — "Nordic Trust" palette (chosen 2026-06-05). Token NAMES kept from the
Pluskredit system so every template inherits the re-skin via var(); only the VALUES
changed. --coral = green accent (CTAs), --moss = teal (primary/trust). */
--ink: #13241B; /* forest-charcoal — text, dark surfaces */
--ink-2: #42554A;
--linen: #F6F8F4; /* warm-cool off-white canvas */
--paper: #FFFFFF;
--paper-2: #E9F0EA; /* sage alt surface */
--coral: #15945A; /* EMERALD accent — CTAs, highlights, links */
--coral-ink: #0F7A49; /* darker emerald — hover */
--moss: #0A3D2B; /* deep PINE — primary brand, dark accents */
--muted: #6E7E72; /* green-grey — WCAG AA on white */
--line: #E4EAE3;
--line-2: #D6E8DC;
--radius: 6px;
--radius-lg: 12px;
/* Schibsted Grotesk = Scandinavian display sans (chosen 2026-06-05). --serif/--mono
point at it so existing `var(--serif)` headlines re-skin with no template edits. */
--serif: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
--sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--mono: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
/* v2 illustration-layout tokens (refined premium green) */
--mint: #E4EFE8;
--mint-2: #D6E8DC;
--teal-dk: #0A3D2B;
--spring: #56C98A; /* crisp signature highlight (use sparingly) */
/* Validation/error — deliberately OUTSIDE the green family so errors can never
be mistaken for success states (the 2026-06-11 green-error bug). */
--error: #C23A2B;
--error-ink: #8C2B20;
--error-bg: #FBEDEA;
}
/* ============================================================
v2 sections — Crezu/ClearRate/Northmill-inspired (green/teal)
============================================================ */
.stars{color:#1FA463;letter-spacing:2px}
/* trust quad bar */
.trust-quad{background:var(--teal-dk);color:#DCEFE4}
.trust-quad-inner{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:16px 40px}
.trust-quad .q{display:flex;align-items:center;gap:10px;justify-content:center;font-size:14px;font-weight:500;padding:8px;text-align:center}
.trust-quad .q::before{content:"";width:18px;height:18px;flex:0 0 auto;background-image:url("data:image/svg+xml;utf8,");background-size:contain;background-repeat:no-repeat}
@media(max-width:760px){.trust-quad-inner{grid-template-columns:1fr 1fr;padding:14px 24px}}
/* benefit grid (Crezu-style) */
.benefits{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bcard{display:flex;align-items:center;gap:10px;background:var(--mint);border:1px solid var(--mint-2);border-radius:var(--radius-lg);padding:26px 28px;min-height:158px;overflow:hidden}
.bcard .b-txt{flex:1}
.bcard .b-txt h3{font-family:var(--serif);font-size:21px;font-weight:700;margin:0 0 6px;letter-spacing:-.01em}
.bcard .b-txt p{margin:0;color:var(--ink-2);font-size:15px}
.bcard .b-ill{flex:0 0 auto;width:185px;height:185px;display:flex;align-items:center;justify-content:center;margin-right:-14px}
.bcard .b-ill img{width:116%;height:116%;object-fit:contain;filter:drop-shadow(0 12px 14px rgba(10,61,43,.12))}
.bcard.cta{background:var(--teal-dk);color:#DCEFE4;flex-direction:column;align-items:flex-start;justify-content:center;gap:14px}
.bcard.cta h3{color:#fff;font-family:var(--serif);font-size:23px;margin:0}
.bcard.cta p{color:#A9CDBB;margin:0;font-size:15px}
@media(max-width:760px){.benefits{grid-template-columns:1fr}.bcard .b-ill{width:152px;height:152px}}
/* Northmill-style UI-snippet cards */
.snips{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
.snip{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;box-shadow:0 18px 40px -26px rgba(10,61,43,.4)}
.snip .s-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.snip .s-lbl{font-size:13px;color:var(--muted)}
.snip .s-val{font-family:var(--serif);font-weight:700;font-size:28px;letter-spacing:-.01em;line-height:1.1}
.snip .s-check{width:36px;height:36px;flex:0 0 auto;border-radius:50%;background:var(--coral);background-image:url("data:image/svg+xml;utf8,");background-size:20px;background-repeat:no-repeat;background-position:center}
.lstack{display:flex;flex-direction:column;gap:8px}
.lrow{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 14px}
.lrow.hi{box-shadow:0 8px 20px -10px rgba(21,148,90,.5);border-color:var(--mint-2)}
.lrow .l-nm{font-family:var(--serif);font-weight:600;font-size:14px;flex:1}
.lrow .l-am{font-size:12px;color:var(--muted)}
.lrow .l-bdg{width:22px;height:22px;flex:0 0 auto;border-radius:50%;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--serif)}
@media(max-width:760px){.snips{grid-template-columns:1fr}}
/* loan types */
.ltypes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ltype{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px;transition:.18s;text-decoration:none;color:inherit;display:block}
.ltype:hover{transform:translateY(-3px);border-color:var(--coral);box-shadow:0 20px 40px -24px rgba(21,148,90,.5)}
.ltype .l-ill{width:104px;height:104px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;margin-left:-6px}
.ltype .l-ill img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 9px 11px rgba(10,61,43,.13))}
.ltype h3{font-family:var(--serif);font-size:19px;font-weight:700;margin:0 0 6px}
.ltype p{color:var(--ink-2);font-size:14.5px;margin:0 0 14px}
.ltype .l-more{font-family:var(--serif);font-weight:600;font-size:14px;color:var(--coral-ink)}
@media(max-width:760px){.ltypes{grid-template-columns:1fr}}
/* hero bullets */
.hbullets{list-style:none;margin:24px 0 14px;padding:0;display:grid;gap:10px}
.hbullets li{display:flex;align-items:center;gap:11px;font-size:16px;color:var(--ink);font-weight:500}
.hbullets li::before{content:"";width:23px;height:23px;flex:0 0 auto;border-radius:50%;background:var(--mint);background-image:url("data:image/svg+xml;utf8,");background-size:14px;background-repeat:no-repeat;background-position:center}
/* loan examples — Enklare-style cards on dark pine + carousel */
.exsec{background:var(--teal-dk);color:#DCEFE4;padding:64px 0}
.exsec-inner{max-width:1180px;margin:0 auto;padding:0 40px}
.exsec .exhead h2{color:#fff;font-family:var(--serif);font-size:clamp(28px,4vw,40px);line-height:1.08;letter-spacing:-.02em;margin:0;font-weight:700}
.exsec .exhead h2 .u{color:var(--spring)}
.exsec .exhead p{color:#A9CDBB;margin:14px 0 0;max-width:640px;font-size:16px;line-height:1.5}
.exrow{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding:28px 2px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.exrow::-webkit-scrollbar{display:none}
.ex-controls{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.ex-arrow{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);color:#fff;font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;font-family:var(--serif);padding:0 0 3px}
.ex-arrow:hover{background:var(--spring);border-color:var(--spring);color:var(--moss)}
.ex-arrow:focus-visible{outline:2px solid var(--spring);outline-offset:2px}
.excard2{flex:0 0 320px;scroll-snap-align:start;background:#fff;color:var(--ink);border-radius:18px;padding:22px}
.exc-top{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.exc-av{width:38px;height:38px;border-radius:50%;background:var(--mint);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.exc-av svg{width:21px;height:21px;stroke:var(--coral-ink);stroke-width:1.8;fill:none}
.exc-who{font-family:var(--serif);font-weight:600;font-size:15px}
.exc-pill{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--coral-ink);background:var(--mint);border-radius:999px;padding:5px 11px;white-space:nowrap}
.exc-pill svg{width:13px;height:13px;stroke:var(--coral-ink);stroke-width:1.8;fill:none}
.exc-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;margin-bottom:18px}
.exc-stats .exc-k{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}
.exc-stats b{font-family:var(--serif);font-size:17px}
.exc-amt{background:var(--mint);border-radius:12px;padding:12px 14px;text-align:center}
.exc-amt span{display:block;font-size:11px;color:var(--muted)}
.exc-amt b{font-family:var(--serif);font-size:22px}
@media(max-width:760px){.exsec-inner{padding:0 20px}.exsec{padding:48px 0}.excard2{flex:0 0 86%;max-width:330px}}
/* testimonials */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rev{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px}
.rev .stars{margin-bottom:10px;display:block}
.rev p{margin:0 0 14px;font-size:15px}
.rev .r-who{display:flex;align-items:center;gap:11px}
.rev .r-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#15945A,#0A3D2B);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:14px}
.rev .r-who small{display:block;color:var(--muted)}
@media(max-width:760px){.revs{grid-template-columns:1fr}}
/* caution + representative example */
.caution-wrap{padding:36px 40px}
.caution{max-width:1180px;margin:0 auto;background:#FFF7E6;border:1px solid #F0E3C0;border-radius:var(--radius);padding:18px 22px;display:flex;gap:14px;align-items:flex-start;font-size:14px;color:#6B5A2A;line-height:1.5}
.caution .c-i{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:#E9B949;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--serif)}
.repex{background:var(--mint);font-size:12.5px;color:var(--ink-2);text-align:center;padding:18px 28px;line-height:1.5}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
background:var(--linen);
color:var(--ink);
font-family:var(--sans);
font-size:16px;
line-height:1.55;
-webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.mono{
font-family:var(--mono);
font-size:.72rem;
font-weight:500;
letter-spacing:.14em;
text-transform:uppercase;
}
/* Skip link */
.screen-reader-text{
border:0; clip:rect(1px,1px,1px,1px);
height:1px; width:1px; overflow:hidden;
position:absolute !important;
}
/* ---------- NAV ---------- */
.nav{
position:sticky; top:0; z-index:50;
display:flex; align-items:center; justify-content:space-between;
padding:18px 40px;
background:color-mix(in oklab, var(--linen) 88%, transparent);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:0; font-family:var(--serif); font-size:24px; font-weight:700; letter-spacing:-0.03em; color:var(--ink); text-decoration:none;}
.tri{ width:15px; height:14px; margin:0 3px; flex:0 0 auto;}
.tri path{ fill:var(--coral);}
.nav-links{ display:flex; gap:32px; align-items:center; list-style:none; padding:0; margin:0;}
.nav-links a{ color:var(--ink-2); text-decoration:none; font-size:14px; transition:color .15s;}
.nav-links a:hover, .nav-links .current-menu-item > a{ color:var(--coral);}
.nav-cta{
border:1px solid var(--coral);
background:var(--coral); color:#fff;
padding:10px 20px; border-radius:999px; font-size:13px; font-weight:700;
text-decoration:none; transition:.15s; font-family:var(--serif); cursor:pointer;
}
.nav-cta:hover{ background:var(--coral-ink); border-color:var(--coral-ink);}
/* ---------- MOBILE MENU (hamburger → slide-over, CSS :target, no JS) ---------- */
.nav-right{ display:flex; align-items:center; gap:12px;}
.burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:11px; background:var(--paper); color:var(--ink); cursor:pointer; text-decoration:none;}
.burger svg{ width:22px; height:22px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round;}
.mnav{ position:fixed; inset:0; z-index:120; background:rgba(10,61,43,.45); opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;}
.mnav:target{ opacity:1; visibility:visible;}
.mnav-panel{ position:absolute; top:0; right:0; width:82%; max-width:330px; height:100%; background:var(--paper); padding:22px; display:flex; flex-direction:column; gap:2px; transform:translateX(100%); transition:transform .25s ease; box-shadow:-20px 0 60px -30px rgba(10,61,43,.5);}
.mnav:target .mnav-panel{ transform:none;}
.mnav-panel a{ padding:15px 8px; font-family:var(--serif); font-weight:500; font-size:18px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line);}
.mnav-close{ align-self:flex-end; font-size:30px; line-height:1; color:var(--muted); border-bottom:0 !important; padding:4px 8px 8px;}
.mnav-cta{ margin-top:16px; background:var(--coral); color:#fff !important; border-radius:12px; text-align:center; border-bottom:0 !important; font-family:var(--sans); font-weight:600;}
/* Guard so the full-bleed hero background (100vw) reaches the viewport edges
without introducing a horizontal scrollbar. overflow-x:clip (not hidden) so
sticky/fixed elements are unaffected. */
body{ overflow-x:clip; }
/* ---------- HERO ---------- */
.hero{
position:relative;
padding:80px 40px 60px;
display:grid;
grid-template-columns:1.05fr .95fr;
gap:64px;
align-items:start;
max-width:1440px; margin:0 auto;
}
.hero::before{
content:""; position:absolute; z-index:-1; pointer-events:none;
/* Full-bleed: extend the background to the viewport edges instead of being
clipped at the 1440px hero cap (which left a hard cut on the right). */
top:0; bottom:0; left:50%; transform:translateX(-50%); width:100vw;
background:
radial-gradient(ellipse 920px 640px at 100% 0%, color-mix(in oklab, var(--coral) 16%, transparent), transparent 72%),
radial-gradient(ellipse 600px 350px at 0% 100%, color-mix(in oklab, var(--ink) 4%, transparent), transparent 60%);
}
.eyebrow{
display:inline-flex; align-items:center; gap:10px;
font-family:var(--mono); font-size:11px; color:var(--ink-2);
letter-spacing:.14em;
}
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--moss); animation:pulse 2s infinite;}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.5}}
/* Trustpilot in hero */
.hero-tp{
display:inline-flex; align-items:center; gap:10px;
margin-top:14px;
padding:6px 0;
text-decoration:none; color:var(--ink-2);
font-size:13px;
transition:opacity .15s;
}
.hero-tp:hover{ opacity:.7;}
.hero-tp-stars{ flex:0 0 auto; line-height:0;}
.hero-tp-text strong{ color:var(--ink); font-weight:600;}
.hero-tp-meta{ font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; margin-left:6px;}
@media (max-width:760px){
.hero-tp{ flex-wrap:wrap; gap:8px;}
.hero-tp-meta{ display:block; margin-left:0; flex-basis:100%;}
}
h1.display{
font-family:var(--serif);
font-weight:700;
font-size:clamp(44px, 5.4vw, 78px);
line-height:1.02;
letter-spacing:-0.025em;
margin:18px 0 0;
color:var(--ink);
text-wrap:balance;
}
h1.display em{ font-style:italic; color:var(--coral); font-weight:400; white-space:nowrap;}
h1.display .plus{ color:var(--coral); font-style:italic; font-weight:500;}
.hero-sub{
margin-top:24px; max-width:480px;
font-size:18px; color:var(--ink-2); line-height:1.55;
}
.trust-row{
margin-top:36px;
display:flex; gap:32px; flex-wrap:wrap;
padding-top:24px;
border-top:1px solid var(--line);
}
.trust-item{ display:flex; flex-direction:column; gap:4px;}
.trust-item .num{ font-family:var(--serif); font-weight:400; font-size:28px; color:var(--ink); letter-spacing:-.02em;}
.trust-item .num em{ font-style:italic; color:var(--coral);}
.trust-item .lbl{ font-family:var(--mono); font-size:10px; color:var(--muted);}
/* ---------- CALCULATOR (themed wrapper — the actual UI lives in the plugin) ---------- */
.calc-shell{
background:var(--paper);
border:1px solid var(--line);
border-radius:var(--radius-lg);
padding:32px;
box-shadow:0 1px 3px rgba(19,36,27,.04), 0 12px 40px -12px rgba(19,36,27,.08);
}
/* ---------- BANKS MARQUEE ---------- */
.banks{ background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:56px 0;}
.banks-inner{ max-width:1440px; margin:0 auto;}
.banks-head{ display:flex; justify-content:space-between; align-items:center; gap:24px; padding:0 40px; margin-bottom:32px;}
.banks-head .left{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;}
.banks-head .eyebrow-mono{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase;}
.banks-head .eyebrow-mono::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--moss);}
.banks-head .title{ font-family:var(--serif); font-size:18px; font-weight:400; color:var(--ink); letter-spacing:-.005em;}
.banks-head .title em{ font-style:italic; color:var(--coral);}
.banks-head .meta{ font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;}
.marquee{ position:relative; overflow:hidden; --gap:64px; --speed:50s;}
/* Edge fade via cheap pseudo-elements instead of mask-image (mask-image is GPU-expensive on mobile Safari) */
.marquee::before, .marquee::after{ content:""; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none;}
.marquee::before{ left:0; background:linear-gradient(to right, var(--paper) 0%, transparent 100%);}
.marquee::after{ right:0; background:linear-gradient(to left, var(--paper) 0%, transparent 100%);}
.marquee-track{
display:flex; gap:var(--gap); width:max-content;
animation:marquee var(--speed) linear infinite;
/* GPU compositing hints — keep animation off main thread */
will-change:transform;
transform:translate3d(0,0,0);
backface-visibility:hidden;
}
.marquee:hover .marquee-track{ animation-play-state:paused;}
@keyframes marquee{
from{ transform:translate3d(0,0,0);}
to { transform:translate3d(calc(-50% - var(--gap)/2), 0, 0);}
}
.bank-cell{ flex:0 0 auto; height:48px; width:auto; display:flex; align-items:center; justify-content:center; transition:filter .2s, opacity .2s; filter:grayscale(100%); opacity:.55;}
.bank-cell:hover{ filter:none; opacity:1;}
.bank-cell img{ height:28px; max-height:28px; width:auto; max-width:140px; display:block; object-fit:contain;}
/* Honor reduced motion preference */
@media (prefers-reduced-motion: reduce){
.marquee-track{ animation:none;}
}
/* ---------- SECTIONS ---------- */
.section{ padding:80px 40px; max-width:1440px; margin:0 auto;}
.section-head{ max-width:680px; margin-bottom:56px;}
.section-head h2{ font-family:var(--serif); font-size:clamp(32px,4vw,56px); font-weight:700; line-height:1.05; letter-spacing:-.02em; margin:14px 0 0;}
.section-head h2 em{ font-style:italic; color:var(--coral);}
.section-head p{ margin-top:16px; font-size:17px; color:var(--ink-2); line-height:1.55;}
.steps{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; position:relative;}
.steps::before{ content:""; position:absolute; top:46px; left:13%; right:13%; border-top:2px dashed var(--mint-2); z-index:0;}
.step{ position:relative; overflow:hidden; background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:24px 22px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s;}
.step:hover{ transform:translateY(-3px); box-shadow:0 22px 46px -28px rgba(10,61,43,.45); border-color:var(--mint-2);}
.step .bignum{ position:absolute; right:10px; bottom:-16px; font-family:var(--serif); font-weight:800; font-size:96px; line-height:1; color:var(--mint); opacity:.75; pointer-events:none; z-index:0;}
.step-top{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.step .num{ position:static; font-family:var(--serif); font-weight:700; font-size:17px; font-style:normal; color:#fff; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:linear-gradient(140deg,var(--coral),var(--teal-dk)); box-shadow:0 8px 18px -8px rgba(21,148,90,.6); padding:0; letter-spacing:0;}
.step-ic{ width:42px; height:42px; border-radius:12px; background:var(--mint); display:flex; align-items:center; justify-content:center;}
.step-ic svg{ width:22px; height:22px; stroke:var(--coral-ink); stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.step h3{ position:relative; z-index:1; font-family:var(--serif); font-size:18px; font-weight:600; margin:0; letter-spacing:-.01em; line-height:1.2;}
.step p{ position:relative; z-index:1; margin:6px 0 0; font-size:14.5px; color:var(--ink-2); line-height:1.5; max-width:none;}
.features{ display:grid; grid-template-columns:repeat(2,1fr); gap:48px 64px;}
.feature{ display:grid; grid-template-columns:48px 1fr; gap:20px;}
.feature-icon{ width:48px; height:48px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:20px; color:var(--coral); font-style:italic;}
.feature h3{ font-family:var(--serif); font-size:20px; font-weight:700; margin:0 0 8px; letter-spacing:-.01em;}
.feature p{ font-size:15px; color:var(--ink-2); line-height:1.55; margin:0;}
.faq{ display:flex; flex-direction:column; gap:0;}
.faq-item{ border-bottom:1px solid var(--line); padding:24px 0;}
.faq-item summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-family:var(--serif); font-size:20px; font-weight:600; letter-spacing:-.01em; padding-right:32px; position:relative;}
.faq-item summary::-webkit-details-marker{ display:none;}
.faq-item summary::after{ content:"+"; position:absolute; right:0; font-family:var(--serif); font-size:32px; color:var(--coral); font-weight:300; transition:.2s; line-height:1;}
.faq-item[open] summary::after{ transform:rotate(45deg);}
.faq-item .faq-body{ margin:16px 0 0; color:var(--ink-2); line-height:1.6;}
.cta-banner{
margin:80px 40px;
max-width:1360px;
margin-left:auto; margin-right:auto;
background:var(--ink); color:var(--paper);
border-radius:var(--radius-lg);
padding:80px 64px;
display:grid; grid-template-columns:1.5fr 1fr; gap:64px; align-items:center;
position:relative; overflow:hidden;
}
.cta-banner::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.4; background:radial-gradient(ellipse 600px 400px at 80% 50%, color-mix(in oklab, var(--coral) 35%, transparent), transparent 60%);}
.cta-banner > *{ position:relative; z-index:1;}
.cta-banner h2{ font-family:var(--serif); font-size:clamp(32px,3.5vw,48px); font-weight:700; letter-spacing:-.02em; line-height:1.05; margin:0;}
.cta-banner h2 em{ font-style:italic; color:var(--coral);}
.cta-banner .btn-row{ display:flex; flex-direction:column; gap:12px;}
.cta-banner .meta{ font-family:var(--mono); font-size:11px; color:color-mix(in oklab, var(--paper) 70%, transparent); margin-top:8px;}
.btn-cta{
display:inline-flex; align-items:center; justify-content:center;
padding:18px 24px;
background:var(--coral); color:#fff;
border:none; border-radius:var(--radius);
font-family:var(--serif); font-size:16px; font-weight:700;
letter-spacing:.01em; text-decoration:none;
cursor:pointer; transition:.15s;
}
.btn-cta:hover{ background:var(--coral-ink);}
/* CTA arrow comes from the button text (matches mockup) — no CSS ::after arrow. */
.cta-banner .btn-cta{ background:var(--coral); color:var(--ink);}
.cta-banner .btn-cta:hover{ background:var(--paper);}
/* ---------- TRUSTPILOT STRIP ---------- */
.trustpilot-strip{ background:var(--paper); border-bottom:1px solid var(--line); padding:20px 40px;}
.trustpilot-strip .tp-link{ display:inline-flex; align-items:center; gap:18px; max-width:1440px; margin:0 auto; text-decoration:none; color:inherit; padding:8px 0;}
.trustpilot-strip .tp-stars{ flex:0 0 auto;}
.trustpilot-strip .tp-text{ display:flex; flex-direction:column; gap:2px; font-size:14px; color:var(--ink-2);}
.trustpilot-strip .tp-text strong{ color:var(--ink); font-weight:600;}
.trustpilot-strip .tp-meta{ font-size:11px; color:var(--muted); font-family:var(--mono); letter-spacing:.04em;}
.trustpilot-strip .tp-arrow{ color:var(--coral); font-size:18px; transition:transform .2s; opacity:0; margin-left:auto;}
.trustpilot-strip .tp-link:hover .tp-arrow{ opacity:1; transform:translateX(4px);}
@media (max-width:760px){
.trustpilot-strip{ padding:14px 20px;}
.trustpilot-strip .tp-link{ flex-direction:column; align-items:flex-start; gap:6px;}
.trustpilot-strip .tp-text{ font-size:13px;}
}
/* ---------- ACTIVITY BAR (subtle social proof, top of page) ---------- */
.activity-bar{ background:var(--ink); color:color-mix(in oklab, var(--paper) 92%, transparent); padding:8px 16px; font-size:12px; font-family:var(--mono); letter-spacing:.02em;}
.activity-bar-inner{ max-width:1440px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;}
.activity-bar .activity-row{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap;}
/* Dot — explicit shrink:0 + line-height:1 so the green circle stays visible & circular
* even when the row wraps on mobile. align-self:center keeps it visually centered
* with the text line height. */
.activity-bar .dot{ width:8px; height:8px; min-width:8px; line-height:1; border-radius:50%; background:var(--spring); box-shadow:0 0 0 3px color-mix(in oklab, var(--spring) 40%, transparent); flex:0 0 8px; align-self:center; display:inline-block;}
.activity-bar .dot.pulse{ animation:pulse-bar 2s infinite;}
@keyframes pulse-bar{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.6; transform:scale(.85)}}
.activity-bar strong{ color:var(--paper); font-weight:600;}
/* Primary activity row is nowrap; at 12px it's ~330px wide and clips on 375px
* screens — one size down keeps it on one line within the viewport. */
@media (max-width:400px){ .activity-bar{ font-size:11px; padding:8px 12px;} }
.activity-bar .sep{ opacity:.4;}
@media (max-width:600px){
.activity-bar .sep{ display:none;}
.activity-bar-inner{ font-size:11px; flex-direction:column; gap:4px;}
/* When wrapped on mobile, keep dot top-aligned with the first text line
* (centering looks off when text wraps to multiple lines). */
.activity-bar .activity-row{ white-space:normal; align-items:flex-start;}
.activity-bar .dot{ margin-top:5px; align-self:flex-start;}
}
/* ---------- SAVINGS COMPARISON ---------- */
.savings-section{ padding:96px 40px; background:var(--paper); border-bottom:1px solid var(--line);}
.savings-inner{ max-width:1100px; margin:0 auto;}
.savings-head{ text-align:center; margin-bottom:48px;}
.savings-head .mono{ display:inline-block; font-family:var(--mono); font-size:11px; color:var(--coral); letter-spacing:.14em; margin-bottom:14px;}
.savings-head h2{ font-family:var(--serif); font-size:clamp(28px,3.5vw,44px); font-weight:700; line-height:1.1; letter-spacing:-.02em; margin:0;}
.savings-table{ display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch; background:var(--linen); border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);}
.savings-col{ padding:36px 32px; display:flex; flex-direction:column; gap:18px; background:var(--paper);}
.savings-col.bad{ background:color-mix(in oklab, #A33D26 4%, var(--paper));}
.savings-col.good{ background:color-mix(in oklab, var(--moss) 6%, var(--paper));}
.savings-vs{ display:flex; align-items:center; justify-content:center; padding:0 8px; font-family:var(--serif); font-size:24px; font-style:italic; color:var(--muted); border-left:1px solid var(--line); border-right:1px solid var(--line); background:var(--linen);}
.savings-label{ font-family:var(--mono); font-size:11px; color:var(--ink-2); letter-spacing:.12em; text-transform:uppercase; line-height:1.5;}
.savings-label .sub{ display:block; color:var(--muted); font-size:10px; letter-spacing:.08em; margin-top:2px; text-transform:none;}
.savings-stat{ display:flex; justify-content:space-between; align-items:baseline; padding:10px 0; border-bottom:1px dashed var(--line);}
.savings-stat:last-child{ border-bottom:0;}
.savings-stat .num{ font-family:var(--serif); font-size:24px; font-weight:400; letter-spacing:-.015em; color:var(--ink); font-variant-numeric:tabular-nums;}
.savings-col.good .savings-stat .num{ color:var(--moss);}
.savings-col.bad .savings-stat .num{ color:#A33D26;}
.savings-stat .lbl{ font-size:11px; color:var(--muted); font-family:var(--mono); letter-spacing:.04em; text-align:right;}
.savings-result{ margin-top:32px; padding:32px; background:var(--ink); color:var(--paper); border-radius:var(--radius-lg); text-align:center; position:relative; overflow:hidden;}
.savings-result::before{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 100%, color-mix(in oklab, var(--coral) 30%, transparent), transparent 60%); pointer-events:none;}
.savings-result > *{ position:relative; z-index:1;}
.savings-result-label{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:color-mix(in oklab, var(--paper) 70%, transparent); margin-bottom:8px;}
.savings-result-value{ display:block; font-family:var(--serif); font-size:clamp(48px,7vw,84px); font-weight:300; letter-spacing:-.03em; color:var(--coral); line-height:1; margin:8px 0;}
.savings-result-meta{ display:block; font-size:12px; color:color-mix(in oklab, var(--paper) 60%, transparent); margin-top:8px;}
.savings-disclaimer{ margin:24px auto 0; max-width:680px; text-align:center; font-size:12px; color:var(--muted); line-height:1.55; font-family:var(--mono); letter-spacing:.02em;}
.savings-disclaimer strong{ color:var(--ink-2); font-weight:600; font-family:var(--sans); letter-spacing:0;}
@media (max-width:760px){
.savings-section{ padding:64px 24px;}
.savings-table{ grid-template-columns:1fr;}
.savings-vs{ padding:8px; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); transform:none;}
}
/* ---------- TRUST BADGES IN FOOTER ---------- */
.footer-trust{ max-width:1440px; margin:32px auto 0; padding-top:24px; border-top:1px solid color-mix(in oklab, var(--paper) 12%, transparent); display:flex; gap:24px; flex-wrap:wrap; justify-content:center; font-family:var(--mono); font-size:11px; color:color-mix(in oklab, var(--paper) 70%, transparent); letter-spacing:.04em;}
.trust-badge{ display:inline-flex; align-items:center; gap:6px;}
.trust-badge svg{ flex:0 0 auto; opacity:.7;}
@media (max-width:760px){ .footer-trust{ gap:14px; font-size:10px;} }
/* ---------- STICKY MOBILE CTA ---------- */
.mobile-sticky-cta{ display:none; }
/* ---------- IN-FLOW CTA HIDING ----------
* When user is in the lead-submission flow (past step 1 of calculator OR on
* Topbanker /ansokan/ application page), hide both the nav CTA and mobile sticky CTA. They'd be
* distracting / redundant — user is already converting, don't pull them away.
*
* Triggers:
* - body.pk-form-active: added by calculator.js when going step1 → step2
* - body.page-ansokan: WordPress auto-adds page-{slug} class (Topbanker /ansokan/ application page)
*/
body.pk-form-active .mobile-sticky-cta,
body.page-ansokan .mobile-sticky-cta,
body.page-alternativa-erbjudanden .mobile-sticky-cta,
body.pk-form-active .nav-cta,
body.page-ansokan .nav-cta{
display:none !important;
}
/* The live-activity bar is marketing chrome — hide it mid-application (KYC). */
body.page-ansokan .activity-bar{ display:none !important; }
body.pk-form-active{ padding-bottom:0 !important; }
@media (max-width:760px){
.mobile-sticky-cta{
display:flex; align-items:center; gap:12px;
position:fixed; left:12px; right:12px; bottom:12px; z-index:100;
padding:12px 16px;
background:var(--coral); color:var(--paper);
border-radius:var(--radius-lg);
box-shadow:0 8px 32px -4px rgba(21,148,90,.4), 0 1px 0 rgba(255,255,255,.2) inset;
text-decoration:none;
font-family:var(--sans);
transition:transform .2s ease, box-shadow .2s ease;
}
.mobile-sticky-cta:active{ transform:scale(.98); }
.mobile-sticky-cta-icon{
flex:0 0 auto; width:36px; height:36px; border-radius:50%;
background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center;
font-size:18px; font-weight:600;
}
.mobile-sticky-cta-text{ display:flex; flex-direction:column; gap:2px;}
.mobile-sticky-cta-text strong{ font-size:15px; font-weight:600;}
.mobile-sticky-cta-text span{ font-size:11px; opacity:.85;}
body{ padding-bottom:100px; } /* reserve space so sticky CTA doesn't cover form inputs */
.activity-bar-inner{ font-size:10px; }
}
/* ---------- CROSS-LINKS BETWEEN LOAN PRODUCTS ---------- */
.cross-links{ padding:80px 40px;}
.cross-link-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:32px;}
.cross-link-card{ display:block; padding:36px 32px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); text-decoration:none; color:var(--ink); transition:.2s; position:relative;}
.cross-link-card:hover{ border-color:var(--coral); transform:translateY(-2px); box-shadow:0 12px 32px -16px rgba(21,148,90,.3);}
.cross-link-arrow{ position:absolute; top:24px; right:28px; font-size:24px; color:var(--coral); transition:transform .2s;}
.cross-link-card:hover .cross-link-arrow{ transform:translateX(4px);}
.cross-link-card h3{ font-family:var(--serif); font-size:24px; font-weight:700; letter-spacing:-.01em; margin:0 0 8px;}
.cross-link-card p{ font-size:14px; color:var(--ink-2); margin:0;}
@media (max-width:760px){ .cross-link-grid{ grid-template-columns:1fr;} }
/* ---------- DISCLAIMER ---------- */
.disclaimer{ background:var(--paper-2); padding:32px 40px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.disclaimer-inner{ max-width:1360px; margin:0 auto; font-size:12px; color:var(--muted); line-height:1.6;}
/* ---------- FOOTER ---------- */
.site-footer{ background:var(--ink); color:color-mix(in oklab, var(--paper) 75%, transparent); padding:80px 40px 32px;}
.footer-inner{ max-width:1440px; margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:48px;}
.footer-brand{ display:flex; align-items:center; gap:0; font-family:var(--serif); font-size:26px; color:var(--paper); font-weight:700; letter-spacing:-.03em;}
.footer-brand .tri{ width:16px; height:15px; margin:0 3px;}
.footer-tag{ margin-top:12px; font-size:14px; max-width:280px; line-height:1.6;}
.footer-col h4{ font-family:var(--mono); font-size:11px; color:color-mix(in oklab, var(--paper) 50%, transparent); margin:0 0 16px; font-weight:500; letter-spacing:.06em;}
.footer-col a{ display:block; color:color-mix(in oklab, var(--paper) 80%, transparent); text-decoration:none; font-size:14px; padding:6px 0; transition:.15s;}
.footer-col a:hover{ color:var(--coral);}
/* Menu-driven columns (footer-products / footer-about) render items; strip the
default list markers so they match the plain block links of the hardcoded column + mockup. */
.footer-col ul{ list-style:none; margin:0; padding:0;}
.footer-col li{ list-style:none; margin:0; padding:0;}
.footer-bottom{ max-width:1440px; margin:48px auto 0; padding-top:24px; border-top:1px solid color-mix(in oklab, var(--paper) 12%, transparent); display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:color-mix(in oklab, var(--paper) 50%, transparent);}
/* ---------- WP CONTENT (single posts, pages) ---------- */
.entry-wrap{ max-width:760px; margin:0 auto; padding:80px 40px;}
.entry-wrap h1{ font-family:var(--serif); font-size:clamp(32px,4vw,56px); font-weight:700; letter-spacing:-.025em; line-height:1.05;}
.entry-wrap h2{ font-family:var(--serif); font-size:32px; font-weight:700; letter-spacing:-.015em; margin-top:48px;}
.entry-wrap h3{ font-family:var(--serif); font-size:24px; font-weight:600; margin-top:32px;}
.entry-wrap p, .entry-wrap li{ font-size:17px; line-height:1.7; color:var(--ink-2);}
.entry-wrap a{ color:var(--coral); text-decoration:underline;}
/* CTA buttons inside prose must keep white-on-green text — override the green prose-link color + underline. */
.entry-wrap a.btn-cta{ color:#fff; text-decoration:none;}
.entry-wrap a.btn-cta:hover{ color:#fff;}
.entry-wrap img{ border-radius:var(--radius); margin:24px 0;}
/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
/* minmax(0,1fr) — a plain 1fr can't shrink below a child's min-content, so one
* wide nowrap element (badge/TP-row) inflates the track past the viewport and
* the whole hero clips on ≤400px phones. Mirrored in the critical CSS. */
.hero{ grid-template-columns:minmax(0,1fr); padding:48px 24px;}
.nav{ padding:14px 20px;}
.nav-links{ display:none;}
.burger{ display:flex;}
.nav-cta{ display:none;}
.steps{ grid-template-columns:1fr; gap:14px;}
.steps::before{ display:none;}
.features{ grid-template-columns:1fr; gap:32px;}
.footer-inner{ grid-template-columns:1fr 1fr; gap:32px;}
.cta-banner{ grid-template-columns:1fr; padding:48px 32px; margin:48px 20px;}
.section{ padding:56px 24px;}
.banks{ padding:40px 0;}
.banks-head{ padding:0 24px; flex-direction:column; align-items:flex-start; gap:8px;}
.marquee{ --gap:40px; --speed:35s;}
.entry-wrap{ padding:48px 24px;}
}
/* Small mobile (iPhone SE / 375px and below) — CRO-tuned spacing + collapse */
@media (max-width:480px){
/* Calculator-first: compress hero so the calculator sits in the first thumb-zone */
.hero{ padding:24px 20px 8px; gap:24px;}
h1.display{ font-size:clamp(30px,8.5vw,40px); margin-top:10px;}
.eyebrow{ font-size:10px;}
/* Hero sub: don't constrain width on tiny screens, soften text-size */
.hero-sub{ max-width:100%; font-size:16px; margin-top:14px;}
/* CTA-banner: cut padding to recover indholds-bredde (was only 311px on 375px) */
.cta-banner{ padding:40px 24px; margin:32px 12px;}
/* Footer: collapse to single column for full-width thumb-reachable links */
.footer-inner{ grid-template-columns:1fr; gap:28px;}
/* Marquee: faster + tighter on small screens */
.marquee{ --gap:24px; --speed:28s;}
/* Site footer: tighter padding so the linen reaches edge-to-edge for visual breath */
.site-footer{ padding:48px 24px 24px;}
/* Bank-section title: bigger heading hierarchy on phone (was clamp'd to ~17px) */
.savings-head h2{ font-size:22px;}
}
/* ===== Generic page hero + CTA (driven by ACF "Side-indhold (ekstra)") ===== */
.page-hero { background: var(--linen); padding: 56px 0 32px; border-bottom: 1px solid var(--line); }
.page-hero-wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.page-hero-eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--coral); font-weight: 600; margin: 0 0 12px; }
.page-hero-title { font-family: var(--serif); font-size: clamp(28px, 4vw, 44px); line-height: 1.15; margin: 0 0 14px; font-weight: 500; color: var(--ink); }
.page-hero-lede { font-size: 17px; line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 640px; }
.page-cta { background: var(--ink); color: #fff; padding: 56px 0; text-align: center; margin-top: 48px; }
.page-cta-wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.page-cta-title { font-family: var(--serif); font-size: clamp(24px, 3.5vw, 36px); margin: 0 0 24px; font-weight: 500; color: #fff; line-height: 1.2; }
.page-cta-title em { color: var(--coral); font-style: normal; }
.page-cta-btn { display: inline-block; background: var(--coral); color: #fff; text-decoration: none; padding: 14px 28px; border-radius: var(--radius); font-weight: 700; font-size: 16px; transition: background .15s ease; }
.page-cta-btn:hover { background: var(--coral-ink); color: #fff; }
.page-cta-meta { margin: 14px 0 0; font-size: 13px; color: rgba(255,255,255,.7); font-family: var(--mono); letter-spacing: .04em; }
/* =========================================================================
LOAN-PRODUCT PAGE — breadcrumb, intro + snabbfakta, use-cases,
rate-factors, longform guide (page-loan-product.php). Desktop-first.
========================================================================= */
.crumbs{ max-width:1440px; margin:0 auto; padding:20px 40px 0; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted);}
.crumbs a{ color:var(--coral-ink); text-decoration:none;}
.crumbs a:hover{ text-decoration:underline;}
.crumbs span[aria-current]{ color:var(--ink); font-weight:600;}
/* intro split: copy + sticky snabbfakta card */
.lp-intro{ display:grid; grid-template-columns:1.35fr .65fr; gap:48px; align-items:start; max-width:1180px; margin:0 auto;}
.lp-intro .intro-copy .mono{ display:inline-block; font-family:var(--mono); font-size:11px; color:var(--coral); letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px;}
.lp-intro .intro-copy h2{ font-family:var(--serif); font-size:clamp(28px,3.4vw,42px); font-weight:700; line-height:1.08; letter-spacing:-.02em; margin:6px 0 18px;}
.lp-intro .intro-copy h2 em{ font-style:italic; color:var(--coral);}
.lp-intro .intro-copy p{ color:var(--ink-2); font-size:16px; line-height:1.7; margin:0 0 16px;}
.lp-intro .intro-copy strong{ color:var(--ink); font-weight:600;}
.facts{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; box-shadow:0 18px 44px -30px rgba(10,61,43,.5); position:sticky; top:96px;}
.facts h3{ font-family:var(--serif); font-size:18px; font-weight:600; margin:0 0 10px;}
.facts ul{ list-style:none; margin:0 0 18px; padding:0;}
.facts li{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--line);}
.facts li:last-child{ border-bottom:0;}
.facts li span{ color:var(--muted); font-size:14px;}
.facts li b{ font-size:14.5px; color:var(--ink);}
.facts .btn-cta{ display:flex; width:100%; justify-content:center; margin-top:4px;}
/* use-case cards */
.ucards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.ucard{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px;}
.ucard .uic{ width:46px; height:46px; border-radius:13px; background:var(--mint); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.ucard .uic svg{ width:24px; height:24px; fill:none; stroke:var(--coral-ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.ucard h3{ font-family:var(--serif); font-size:18px; font-weight:600; margin:0 0 7px;}
.ucard p{ color:var(--ink-2); font-size:14.5px; line-height:1.6; margin:0;}
/* rate factors */
.rfac{ display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.rfac-item{ display:flex; gap:16px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px;}
.rfac-num{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; background:var(--moss); color:#fff; font-family:var(--serif); font-weight:700; font-size:16px; display:flex; align-items:center; justify-content:center;}
.rfac-item h3{ font-family:var(--serif); font-size:17px; font-weight:600; margin:0 0 5px;}
.rfac-item p{ color:var(--ink-2); font-size:14.5px; line-height:1.6; margin:0;}
/* longform article */
.prose{ max-width:780px;}
.prose .lead{ color:var(--ink-2); font-size:18px; line-height:1.7; margin:0 0 26px;}
.prose h3{ font-family:var(--serif); font-size:22px; font-weight:600; margin:32px 0 10px; display:flex; align-items:center; gap:11px; letter-spacing:-.01em;}
.prose h3::before{ content:""; width:15px; height:14px; flex:0 0 auto; background:var(--coral); clip-path:polygon(50% 0,100% 100%,0 100%);}
.prose p{ color:var(--ink-2); font-size:16px; line-height:1.75; margin:0 0 14px;}
@media (max-width:760px){
.crumbs{ padding:14px 24px 0;}
.lp-intro{ grid-template-columns:1fr; gap:24px;}
.facts{ position:static;}
.ucards{ grid-template-columns:1fr;}
.rfac{ grid-template-columns:1fr;}
.prose .lead{ font-size:16px;}
.prose h3{ font-size:20px;}
}
/* ============ Blog / guide content ============ */
.entry-byline{ font-size:14px; color:var(--muted); margin:8px 0 0; }
.entry-byline a{ color:var(--ink-2); text-decoration:none; }
.entry-byline a:hover{ text-decoration:underline; }
.entry-figure{ margin:28px 0; }
.entry-figure img{ width:100%; height:auto; border-radius:var(--radius-lg); display:block; }
.author-box{ max-width:760px; margin:40px auto 0; padding:18px 20px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--linen); }
.author-box-name{ display:block; font-size:14px; margin-bottom:4px; color:var(--ink); }
.author-box-bio{ margin:0 0 8px; font-size:13px; color:var(--ink-2); line-height:1.6; }
.author-box-link{ font-size:13px; color:var(--coral); text-decoration:none; font-weight:600; }
.author-box-link:hover{ text-decoration:underline; }
.post-products{ max-width:760px; margin:32px auto 0; padding-top:24px; border-top:1px solid var(--line); }
.post-products-eyebrow{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--coral-ink); }
.post-products-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
.post-products-links a{ display:inline-block; padding:8px 14px; border:1px solid var(--line-2); border-radius:999px; background:var(--paper); color:var(--ink); text-decoration:none; font-size:14px; font-weight:600; }
.post-products-links a:hover{ border-color:var(--coral); color:var(--coral-ink); }
.related-posts{ max-width:760px; margin:32px auto 0; }
.related-posts h2{ font-size:20px; margin:0 0 12px; }
.related-posts ul{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.related-posts a{ color:var(--ink-2); text-decoration:none; font-weight:600; }
.related-posts a:hover{ color:var(--coral-ink); text-decoration:underline; }
/* Blog hub (/blogg/) */
.blog-hub{ max-width:1080px; margin:0 auto; padding:32px 20px 64px; }
.blog-hub-head{ max-width:720px; margin:0 0 32px; }
.blog-hub-intro{ color:var(--ink-2); font-size:17px; line-height:1.6; margin-top:12px; }
.blog-grid{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.blog-card{ display:flex; }
.blog-card>a{ display:flex; flex-direction:column; width:100%; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; color:inherit; transition:border-color .15s, transform .15s; }
.blog-card>a:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.blog-card-thumb img{ width:100%; height:160px; object-fit:cover; display:block; }
.blog-card-body{ display:flex; flex-direction:column; gap:8px; padding:18px; }
.blog-card-title{ font-size:18px; line-height:1.3; margin:0; color:var(--ink); }
.blog-card-excerpt{ font-size:14px; color:var(--ink-2); line-height:1.55; }
.blog-card-meta{ font-size:12px; color:var(--muted); margin-top:auto; }
.blog-empty{ color:var(--muted); }