/* ══════ hemsida-v8 ══════ */
:root{
  --bg:#FDF9F6; --bg2:#F0EEFF; --ink:#17151F; --ink2:#4E4A60; --ink3:#9993AA;
  --red:#D43870; --red-d:#B02A5B; --pink-t:#FFE0E6;
  --mint:#7FD6A8; --mint-t:#E6F8F0; --mint-d:#1A6B45;
  --lav:#C4B8FF; --lav-t:#F0EEFF; --lav-2:#E5E0FB; --lav-3:#D8D1F8; --lav-d:#4B3FA0;
  --white:#fff; --pink:#FFB8CC; --ink-2:#2D1F5E; --border:rgba(23,21,31,.08);
  --paper:#FEFCFA;
  --r:14px; --r-lg:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Bricolage Grotesque',sans-serif;background:var(--bg);color:var(--ink);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px;position:relative;z-index:2}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
/* ---------- TYPO ---------- */
h1{font-size:clamp(33px,5.4vw,58px);font-weight:800;line-height:1.05;letter-spacing:-.04em}
h2{font-size:clamp(27px,4vw,42px);font-weight:800;letter-spacing:-.035em;line-height:1.12}
h3{font-size:clamp(23px,3.2vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.lead{font-size:18px;color:var(--ink2);line-height:1.55}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase;color:var(--red);margin-bottom:13px}
.accent{color:var(--red)}
.accent-m{color:var(--mint-d)}
/* ---------- BUTTONS ---------- */
.btn{display:inline-block;background:var(--ink);color:#fff;padding:15px 32px;border-radius:99px;
  font-weight:700;font-size:17px;transition:background .16s,transform .12s;border:none;cursor:pointer;font-family:inherit}
.btn:hover{background:#000;transform:translateY(-1px)}
.btn-ghost{display:inline-block;padding:15px 30px;border-radius:99px;font-weight:600;font-size:17px;
  background:var(--white);border:1.5px solid var(--border);transition:all .16s}
.btn-ghost:hover{border-color:var(--ink3);transform:translateY(-1px)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
/* ---------- NAV ---------- */
nav{position:sticky;top:0;z-index:200;background:rgba(253,249,246,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border)}
.nav-in{max-width:1120px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between}
/* Logotypen: måtten följer varumärkesversionen på sparaa.com, inte
   designförlagan. Förlagan hade smalare streck (4px) och för stort avstånd
   till ordet (10px). Rör inte utan att jämföra mot varumärkesmanualen. */
.logo{display:flex;align-items:center;gap:7px}
.logo-bar{width:5px;height:28px;background:var(--lav);border-radius:2px}
.logo-word{font-size:22px;font-weight:800;letter-spacing:-1px}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{font-size:15px;color:var(--ink2);font-weight:500}
.nav-links a:hover{color:var(--ink)}
/* 99px enligt varumärkesmanualen: "14px standard, 22px stora ytor, 99px
   knappar". Förlagan hade 10px här, vilket gjorde menyknappen till den enda
   kantiga knappen på sajten. */
.nav-cta{background:var(--red);color:#fff !important;padding:11px 20px;border-radius:99px;font-weight:600}
.nav-cta:hover{background:#000}
@media(max-width:800px){.nav-links a:not(.nav-cta){display:none}}
/* ---------- RÖDA TRÅDEN ---------- */
.thread{position:absolute;left:50%;top:0;width:1500px;height:100%;transform:translateX(-50%);
  pointer-events:none;z-index:0;opacity:.30}
.thread path{fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:6000;stroke-dashoffset:6000;transition:stroke-dashoffset 2.4s ease-out}
.thread.on path{stroke-dashoffset:0}
/* ---------- PAPPERSOBJEKTET ---------- */
.doc{position:relative;background:var(--paper);border-radius:3px;padding:30px 32px 36px;
  box-shadow:0 1px 1px rgba(23,21,31,.05),0 24px 54px -18px rgba(23,21,31,.30),0 2px 6px rgba(23,21,31,.06);
  background-image:linear-gradient(180deg,rgba(23,21,31,.014),transparent 12%),
    repeating-linear-gradient(0deg,rgba(23,21,31,.008) 0 1px,transparent 1px 3px)}
.doc::after{content:"";position:absolute;top:0;right:0;width:34px;height:34px;
  background:linear-gradient(225deg,var(--bg) 0 50%,transparent 50%);box-shadow:-2px 2px 4px rgba(23,21,31,.08)}
.doc-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;
  padding-bottom:16px;border-bottom:1px solid rgba(23,21,31,.09)}
.doc-title{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink3);font-weight:700}
.doc-sup{font-size:18px;font-weight:800;letter-spacing:-.4px;margin-top:4px}
.doc-date{font-size:11px;color:var(--ink3);text-align:right;line-height:1.5}
.doc-line{height:7px;background:rgba(23,21,31,.055);border-radius:99px;margin-bottom:9px}
.w90{width:90%}
.w70{width:70%}
.w55{width:55%}
.doc-bar{margin-top:20px;padding-top:18px;border-top:1px dashed rgba(23,21,31,.14)}
.dbl{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--lav-d);font-weight:700;
  margin-bottom:9px;display:flex;align-items:center;gap:6px}
.dbl i{width:5px;height:5px;border-radius:50%;background:var(--lav)}
.dbar{height:9px;border-radius:99px;background:rgba(23,21,31,.05);margin-bottom:6px;overflow:hidden}
.dbar span{display:block;height:100%;border-radius:99px;width:0;transition:width 1.2s cubic-bezier(.22,1,.36,1)}
.dbar.you span{background:var(--red)}
.dbar.avg span{background:var(--lav)}
.on .dbar.you span{width:100%}
.on .dbar.avg span{width:64%;transition-delay:.15s}
.dbar-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--ink3);margin-top:2px}
.doc-amt{margin-top:22px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.amt-old{font-size:26px;font-weight:700;color:var(--ink3);position:relative;font-variant-numeric:tabular-nums}
.amt-old::after{content:"";position:absolute;left:-4px;right:-4px;top:52%;height:3px;background:var(--red);
  border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.22,1,.36,1) .9s}
.on .amt-old::after{transform:scaleX(1)}
.amt-new{font-size:30px;font-weight:800;letter-spacing:-.8px;color:var(--mint-d);font-variant-numeric:tabular-nums;
  opacity:0;transform:translateY(6px);transition:all .45s ease-out 1.35s}
.on .amt-new{opacity:1;transform:none}
.amt-tag{font-size:12px;font-weight:700;color:var(--mint-d);background:var(--mint-t);padding:4px 10px;
  border-radius:6px;opacity:0;transition:opacity .45s ease-out 1.6s}
.on .amt-tag{opacity:1}
.stamp{position:absolute;bottom:26px;right:30px;border:2.5px solid var(--mint-d);color:var(--mint-d);
  border-radius:8px;padding:6px 12px;font-size:12px;font-weight:800;letter-spacing:1.4px;
  opacity:0;transform:rotate(-11deg) scale(1.5);transition:all .4s cubic-bezier(.34,1.56,.64,1) 1.85s}
.on .stamp{opacity:.85;transform:rotate(-11deg) scale(1)}
/* ---------- HERO ---------- */
.hero{padding:74px 0 88px}
.hero .grid{display:grid;grid-template-columns:1.02fr .98fr;gap:66px;align-items:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--lav-t);color:var(--lav-d);
  font-size:13px;font-weight:600;padding:6px 16px;border-radius:20px;margin-bottom:24px}
.hero-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--lav-d)}
.hero .lead{max-width:490px;margin-top:20px}
.hero-note{font-size:14px;color:var(--ink3);margin-top:18px}
.hero-note b{color:var(--ink2);font-weight:600}
.docWrap{position:relative}
.docWrap .doc{transform:rotate(-1.6deg)}
.ghost{position:absolute;background:var(--paper);border-radius:3px;border:1px solid rgba(23,21,31,.05);
  box-shadow:0 12px 30px -14px rgba(23,21,31,.22)}
.g1{inset:16px -16px -14px 22px;transform:rotate(3.2deg);z-index:-2;opacity:.7}
.g2{inset:8px -6px -7px 12px;transform:rotate(1.4deg);z-index:-1;opacity:.85}
/* ---------- PRODUKTSKÄRM ---------- */
.shot{margin-top:64px}
.shot img{width:100%;max-width:1000px;margin:0 auto;border-radius:var(--r-lg);border:1px solid var(--border);
  box-shadow:0 34px 84px -22px rgba(23,21,31,.26)}
/* ---------- SECTIONS ---------- */
section{padding:70px 0;position:relative}
.tinted{background:var(--bg2)}
/* PROBLEM */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:42px}
.pcard{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:28px;position:relative;overflow:hidden}
.pcard .pbar{height:5px;border-radius:99px;margin-bottom:20px;width:0;transition:width 1.1s cubic-bezier(.22,1,.36,1)}
.on .pcard:nth-child(1) .pbar{width:100%;background:var(--red)}
.on .pcard:nth-child(2) .pbar{width:64%;background:var(--red);transition-delay:.12s}
.on .pcard:nth-child(3) .pbar{width:22%;background:var(--mint);transition-delay:.24s}
.pcard .num{font-size:38px;font-weight:800;letter-spacing:-1.2px;line-height:1;margin-bottom:12px;font-variant-numeric:tabular-nums}
.pcard:nth-child(1) .num,.pcard:nth-child(2) .num{color:var(--red)}
.pcard:nth-child(3) .num{color:var(--mint-d)}
.pcard h4{font-size:17px;font-weight:700;margin-bottom:8px}
.pcard p{font-size:15px;color:var(--ink2);line-height:1.55}
/* LÖFTET */
.promise{text-align:center}
.promise h2{max-width:820px;margin:0 auto 18px}
.promise .lead{max-width:600px;margin:0 auto}
.psteps{display:flex;gap:0;margin-top:48px;justify-content:center;flex-wrap:wrap}
.pstep{flex:1;min-width:200px;max-width:290px;padding:0 26px;text-align:center;position:relative}
.pstep:not(:last-child)::after{content:"";position:absolute;right:-14px;top:26px;width:28px;height:2px;
  background:var(--red);opacity:.3;border-radius:2px}
.pnum{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;
  font-size:23px;font-weight:800;margin:0 auto 15px}
.pstep:nth-child(1) .pnum{background:var(--lav-t);color:var(--lav-d)}
.pstep:nth-child(2) .pnum{background:var(--pink-t);color:var(--red)}
.pstep:nth-child(3) .pnum{background:var(--mint-t);color:var(--mint-d)}
.pstep h4{font-size:17px;font-weight:700;margin-bottom:6px}
.pstep p{font-size:14.5px;color:var(--ink2);line-height:1.5}
/* FEATURE ROWS */
.feat{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center}
.feat.rev .ftext{order:2}
.ftag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.6px;padding:5px 12px;border-radius:8px;margin-bottom:15px}
.ftag.i{background:var(--lav-t);color:var(--lav-d)}
.ftag.a{background:var(--pink-t);color:var(--red)}
.ftext h3{margin-bottom:15px}
.ftext p{font-size:17px;color:var(--ink2);line-height:1.6;margin-bottom:16px}
.edge{font-size:16px;font-weight:600;padding:16px 20px;background:var(--white);border-left:3px solid var(--red);border-radius:0 10px 10px 0}
.fshot img{border-radius:var(--r);border:1px solid var(--border);box-shadow:0 22px 54px -18px rgba(23,21,31,.22)}
/* EDGE BANNER */
.banner{background:linear-gradient(145deg,var(--ink),#2D1F5E);color:#fff;border-radius:var(--r-lg);padding:58px 48px;text-align:center;position:relative;overflow:hidden}
.banner::before{content:"";position:absolute;top:-45%;right:-8%;width:420px;height:420px;
  background:radial-gradient(circle,rgba(196,184,255,.20),transparent 70%)}
.banner h2{max-width:790px;margin:0 auto 18px;position:relative}
.banner h2 .hl{color:var(--lav)}
.banner p{font-size:18px;color:rgba(255,255,255,.68);max-width:600px;margin:0 auto;position:relative}
/* RESULTAT */
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:58px;align-items:center;margin-top:42px}
.rstats{display:flex;flex-direction:column;gap:18px}
/* align-items:center, inte baseline. Med baseline linjerar etikettens FÖRSTA
   rad med siffran, så en tvåradig etikett hamnar 11px under kortets mitt medan
   siffran hamnar 8px över — 19px snedhet som syns direkt mot de enradiga. */
.rstat{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:24px 28px;
  display:flex;align-items:center;gap:18px}
.rstat .big{font-size:34px;font-weight:800;letter-spacing:-1px;color:var(--red);font-variant-numeric:tabular-nums;white-space:nowrap}
.rstat .lbl{font-size:15.5px;color:var(--ink2)}
/* KATEGORIKORT (objektet återkommer) */
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
.mdoc{background:var(--paper);border-radius:3px;padding:20px 22px;position:relative;
  box-shadow:0 1px 1px rgba(23,21,31,.05),0 14px 32px -14px rgba(23,21,31,.24);transition:transform .3s}
.mdoc::after{content:"";position:absolute;top:0;right:0;width:22px;height:22px;
  background:linear-gradient(225deg,var(--bg2) 0 50%,transparent 50%)}
.mdoc:nth-child(1){transform:rotate(-1.4deg)}
.mdoc:nth-child(2){transform:rotate(.9deg)}
.mdoc:nth-child(3){transform:rotate(-.6deg)}
.mdoc:hover{transform:rotate(0) translateY(-4px)}
.md-cat{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink3);font-weight:700;margin-bottom:11px}
.md-l{height:6px;background:rgba(23,21,31,.055);border-radius:99px;margin-bottom:7px}
.md-l.s{width:58%}
.md-foot{margin-top:16px;padding-top:12px;border-top:1px dashed rgba(23,21,31,.13);
  display:flex;justify-content:space-between;align-items:center}
.md-v{font-size:17px;font-weight:800;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.md-p{font-size:10px;font-weight:700;padding:3px 8px;border-radius:5px}
.p-red{background:var(--pink-t);color:var(--red)}
.p-mint{background:var(--mint-t);color:var(--mint-d)}
.p-lav{background:var(--lav-t);color:var(--lav-d)}
/* ===== INTERAKTIV AVTALSHÖG ===== */
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-top:32px}
.fpill{font-family:inherit;font-size:14px;font-weight:600;color:var(--ink2);background:var(--white);
  border:1.5px solid var(--border);border-radius:99px;padding:9px 17px;cursor:pointer;
  transition:all .2s;display:inline-flex;align-items:center;gap:7px}
.fpill b{font-size:12px;font-weight:700;color:var(--ink3);background:rgba(23,21,31,.05);
  border-radius:99px;padding:1px 7px;transition:all .2s}
.fpill:hover{border-color:var(--ink3)}
.fpill.active{background:var(--ink);border-color:var(--ink);color:#fff}
.fpill.active b{background:rgba(255,255,255,.16);color:#fff}
.fpill:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.stack{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.scard{position:relative;background:var(--paper);border-radius:4px;padding:20px 22px 18px;cursor:default;
  box-shadow:0 1px 1px rgba(23,21,31,.05),0 16px 34px -14px rgba(23,21,31,.26);
  background-image:repeating-linear-gradient(0deg,rgba(23,21,31,.007) 0 1px,transparent 1px 3px);
  /* start: rörig hög */
  transform:rotate(var(--rx)) translate(var(--tx),var(--ty)) scale(.97);
  transition:transform .85s cubic-bezier(.22,1,.36,1),opacity .4s ease,box-shadow .3s ease,filter .4s ease}
.scard::after{content:"";position:absolute;top:0;right:0;width:22px;height:22px;
  background:linear-gradient(225deg,var(--bg) 0 50%,transparent 50%)}
.t-lav .scard::after,.t-lav2 .scard::after{background:linear-gradient(225deg,var(--lav-t) 0 50%,transparent 50%)}
/* ordnat läge när sektionen syns */
.stackSec.on .scard{transform:rotate(calc(var(--rx) * .12)) translate(0,0) scale(1)}
.stackSec.on .scard:nth-child(1){transition-delay:.05s}
.stackSec.on .scard:nth-child(2){transition-delay:.11s}
.stackSec.on .scard:nth-child(3){transition-delay:.17s}
.stackSec.on .scard:nth-child(4){transition-delay:.23s}
.stackSec.on .scard:nth-child(5){transition-delay:.29s}
.stackSec.on .scard:nth-child(6){transition-delay:.35s}
/* hover lyfter */
.stackSec.on .scard:hover{transform:rotate(0) translateY(-6px) scale(1.015);
  box-shadow:0 1px 1px rgba(23,21,31,.05),0 26px 50px -16px rgba(23,21,31,.32)}
/* filtrerat bort */
.scard.dim{opacity:.26;filter:grayscale(.7)}
.stackSec.on .scard.dim{transform:rotate(calc(var(--rx) * .12)) translate(0,0) scale(.95)}
.stackSec.on .scard.dim:hover{transform:rotate(calc(var(--rx) * .12)) translate(0,0) scale(.95);
  box-shadow:0 1px 1px rgba(23,21,31,.05),0 16px 34px -14px rgba(23,21,31,.26)}
/* träffar lyfts fram */
.scard.hit{box-shadow:0 1px 1px rgba(23,21,31,.05),0 24px 46px -14px rgba(23,21,31,.30)}
.sc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.sc-cat{font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--ink3);font-weight:700}
.sc-pill{font-size:10px;font-weight:700;padding:3px 9px;border-radius:5px;white-space:nowrap}
.sc-name{font-size:16.5px;font-weight:800;letter-spacing:-.3px;margin-bottom:14px}
.sc-l{height:6px;background:rgba(23,21,31,.055);border-radius:99px;margin-bottom:7px}
.sc-l.s{width:56%}
.sc-foot{margin-top:16px;padding-top:12px;border-top:1px dashed rgba(23,21,31,.13);
  display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sc-v{font-size:17px;font-weight:800;letter-spacing:-.4px;font-variant-numeric:tabular-nums}
.sc-v i{font-size:12px;font-weight:600;font-style:normal;color:var(--ink3)}
.sc-v.sav{color:var(--mint-d)}
.sc-d{font-size:11.5px;color:var(--ink3);text-align:right}
/* max-width: utan den blir raden 142 tecken bred på en 1280px-skärm.
   Bekväm läsning ligger under ~90. 720px är samma mått som .fitline. */
.catline{font-size:15px;color:var(--ink3);margin-top:30px;max-width:640px}
/* TAGG — tinted pill med ikon */
.stag{display:inline-flex;align-items:center;gap:8px;padding:7px 16px 7px 12px;border-radius:99px;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:20px}
.stag svg{width:15px;height:15px;flex-shrink:0;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.stag.lav{background:var(--lav-t);color:var(--lav-d)}
.stag.lav svg{stroke:var(--lav-d)}
.stag.mint{background:var(--mint-t);color:#1A6B45}
.stag.mint svg{stroke:#1A6B45}
.stag.pink{background:var(--pink-t);color:var(--red)}
.stag.pink svg{stroke:var(--red)}
/* tintade sektioner */
.t-lav{background:var(--lav-t)}
.t-lav2{background:var(--lav-2)}
.t-dark{background:linear-gradient(150deg,var(--ink),#2D1F5E);color:#fff}
/* På mörk botten måste sektionens egen text ljusas upp. Reglerna gäller bara
   direkta barn till .wrap — kort som har egen vit bakgrund (.pcard, .hstep,
   .tcard) ligger djupare och behåller sin mörka text. Skriv aldrig
   `.t-dark h4` utan barnväljare: det träffar rubrikerna inne i de vita
   korten och ger vit text på vit botten. */
.t-dark > .wrap > h2,
.t-dark > .wrap > h3{color:#fff}
.t-dark > .wrap > .lead,
.t-dark > .wrap > p{color:rgba(255,255,255,.74)}
.t-dark > .wrap > .catline,
.t-dark > .wrap > .fitline,
.t-dark > .wrap > .offernote,
.t-dark > .wrap > .calcnote{color:rgba(255,255,255,.6)}
/* Kort med egen ljus bakgrund måste sätta sin textfärg uttryckligen. Utan
   detta ärver rubriker utan egen color den vita texten från .t-dark och blir
   vit text på vitt kort. */
.pcard,.hstep,.tcard,.fitcard,.ocard,.rstat,.kcard,.scard,.mdoc{color:var(--ink)}
/* ===== KALKYLATOR ===== */
.calcwrap{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:44px;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.calcin{padding:38px 38px 40px}
.calcout{padding:38px;background:linear-gradient(160deg,var(--lav-t),var(--lav-3));display:flex;flex-direction:column;justify-content:center}
.clab{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);margin-bottom:14px;display:block}
.empnum{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.empnum b{font-size:40px;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1}
.empnum span{font-size:15px;color:var(--ink2)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--red) var(--pct,25%),rgba(23,21,31,.09) var(--pct,25%));outline:none;margin:14px 0 4px;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:var(--white);border:3px solid var(--red);cursor:pointer;box-shadow:0 2px 8px rgba(23,21,31,.2)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--white);
  border:3px solid var(--red);cursor:pointer;box-shadow:0 2px 8px rgba(23,21,31,.2)}
input[type=range]:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.rangeends{display:flex;justify-content:space-between;font-size:12px;color:var(--ink3)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{font-family:inherit;font-size:14px;font-weight:600;color:var(--ink2);background:var(--bg);
  border:1.5px solid var(--border);border-radius:99px;padding:9px 16px;cursor:pointer;transition:all .18s;
  display:inline-flex;align-items:center;gap:8px}
.chip:hover{border-color:var(--ink3)}
.chip .cx{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--border);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:all .18s}
.chip .cx svg{width:9px;height:9px;stroke:#fff;stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .15s}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip.on .cx{background:var(--red);border-color:var(--red)}
.chip.on .cx svg{opacity:1}
.chip:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.outlab{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lav-d);margin-bottom:10px}
.outbig{font-size:clamp(42px,5.6vw,64px);font-weight:800;letter-spacing:-.045em;line-height:1;
  color:var(--red);font-variant-numeric:tabular-nums}
.outrange{font-size:15px;color:var(--ink2);margin-top:12px}
.outsplit{margin-top:26px;padding-top:22px;border-top:1px solid rgba(23,21,31,.10)}
.orow{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;font-size:14.5px}
.orow .on{color:var(--ink2)}
.orow .ov{font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.outtot{display:flex;justify-content:space-between;margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(23,21,31,.10);font-size:15px}
.outtot b{font-weight:800;font-variant-numeric:tabular-nums}
/* max-width: utan den spänner brödtexten över hela 1064px, vilket blir
   170 tecken per rad — oläsbart långt. */
.calcnote{font-size:12.5px;color:var(--ink3);margin-top:20px;line-height:1.5;max-width:560px}
.calccta{margin-top:24px}
.calcempty{font-size:15px;color:var(--ink2);line-height:1.6}
/* ===== FÖRTROENDE ===== */
.trustrow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px;border-top:1px solid var(--border)}
.titem{padding:28px 26px 0;border-right:1px solid var(--border)}
.titem:last-child{border-right:none}
.titem:first-child{padding-left:0}
.titem svg{width:22px;height:22px;stroke:var(--lav-d);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.titem h4{font-size:17px;font-weight:700;margin-bottom:6px;letter-spacing:-.02em}
.titem p{font-size:14px;color:var(--ink2);line-height:1.5}
/* ===== ERBJUDANDE ===== */
.offergrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.ocard{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:32px}
/* Hette .ocard.feat i designförlagan, vilket krockade med .feat — de
   tvåspaltiga innehållsblocken. Prisboxen blev då ett tvåspaltigt raster och
   beskrivningen hamnade vid sidan av priset i stället för under. Egen klass
   nu, så krocken inte kan återuppstå. */
.ocard.framhavd{border-color:var(--red)}
.otop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;
  padding-bottom:18px;border-bottom:1px solid var(--border)}
.otag{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:6px 13px;border-radius:99px}
.otag.lav{background:var(--lav-t);color:var(--lav-d)}
.otag.pink{background:var(--pink-t);color:var(--red)}
.oprice{font-size:30px;font-weight:800;letter-spacing:-.035em;text-align:right;line-height:1;white-space:nowrap}
.oprice small{display:block;font-size:13px;font-weight:500;color:var(--ink3);letter-spacing:0;margin-top:5px}
.odesc{font-size:15.5px;color:var(--ink2);line-height:1.6;margin-bottom:18px}
.olist{list-style:none;display:flex;flex-direction:column;gap:9px}
.olist li{font-size:14.5px;color:var(--ink2);padding-left:26px;position:relative;line-height:1.5}
.olist li::before{content:"";position:absolute;left:0;top:6px;width:15px;height:15px;border-radius:50%;
  background:var(--mint-t)}
.olist li::after{content:"";position:absolute;left:4.5px;top:10px;width:6px;height:3px;
  border-left:2px solid var(--mint-d);border-bottom:2px solid var(--mint-d);transform:rotate(-45deg)}
.offernote{font-size:14.5px;color:var(--ink3);margin-top:26px;max-width:640px;line-height:1.6}
@media(max-width:900px){
  .calcwrap,.offergrid{grid-template-columns:1fr}
  .calcin,.calcout{padding:30px 26px}
  .trustrow{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.trustrow{grid-template-columns:1fr}
  .titem{border-right:none;border-top:1px solid var(--border);padding:24px 0 0}}
/* ===== MOBILMENY ===== */
/* 44×44 är minsta rekommenderade tryckyta. Förlagan hade 38×32, vilket är
   litet för sajtens huvudkontroll på mobil. Strecken är oförändrade. */
.burger{display:none;background:none;border:none;padding:0;cursor:pointer;margin-left:4px;
  width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column}
.burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all .25s}
.burger span+span{margin-top:5px}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobmenu{display:none;border-top:1px solid var(--border);background:var(--bg)}
.mobmenu a{display:block;padding:15px 28px;font-size:17px;font-weight:600;border-bottom:1px solid var(--border)}
.mobmenu a:last-child{border-bottom:none}
.mobmenu.open{display:block}
/* ===== MEJLFÅNGST ===== */
.capture{margin-top:18px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:26px 30px;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
.capture h4{font-size:18px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.capture p{font-size:14.5px;color:var(--ink2);line-height:1.5}
.capform{display:flex;gap:9px;flex-wrap:wrap}
.capform input{font-family:inherit;font-size:16px;padding:14px 18px;border:1.5px solid var(--border);
  border-radius:99px;min-width:250px;background:var(--bg);color:var(--ink);outline:none;transition:border-color .16s}
.capform input:focus{border-color:var(--red)}
.capform button{font-family:inherit;font-size:16px;font-weight:700;background:var(--ink);color:#fff;
  border:none;border-radius:99px;padding:14px 28px;cursor:pointer;transition:background .16s;white-space:nowrap}
.capform button:hover{background:#000}
.capdone{display:none;align-items:center;gap:11px;font-size:16px;font-weight:600;color:var(--mint-d)}
.capdone svg{width:20px;height:20px;stroke:var(--mint-d);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.capnote{font-size:12.5px;color:var(--ink3);margin-top:9px}
/* ===== PASSAR ER OM ===== */
.fitgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:44px}
.fitcard{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:30px}
.fitcard .fh{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.fitcard .fi{width:38px;height:38px;border-radius:11px;background:var(--lav-t);display:flex;
  align-items:center;justify-content:center;flex-shrink:0}
.fitcard .fi svg{width:19px;height:19px;stroke:var(--lav-d);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fitcard h4{font-size:18.5px;font-weight:700;letter-spacing:-.02em}
.fitcard p{font-size:15.5px;color:var(--ink2);line-height:1.6}
.fitline{margin-top:28px;font-size:15.5px;color:var(--ink2);line-height:1.65;max-width:720px}
.fitline b{color:var(--ink);font-weight:600}
/* ===== FÖRNYELSE-BRÅDSKA ===== */
.renew{background:linear-gradient(150deg,var(--ink),#2D1F5E);border-radius:var(--r-lg);
  padding:44px 46px;display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center;color:#fff}
.renew .rico{width:56px;height:56px;border-radius:16px;background:rgba(196,184,255,.16);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.renew .rico svg{width:26px;height:26px;stroke:var(--lav);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.renew h3{font-size:clamp(21px,2.6vw,27px);font-weight:800;letter-spacing:-.03em;color:#fff;margin-bottom:7px}
.renew p{font-size:15.5px;color:rgba(255,255,255,.68);line-height:1.55;max-width:520px}
.renew .btn{background:#fff;color:var(--ink);white-space:nowrap}
.renew .btn:hover{background:var(--lav-t)}
@media(max-width:900px){
  .capture{grid-template-columns:1fr;gap:18px}
  .capform input{min-width:0;flex:1}
  .fitgrid{grid-template-columns:1fr}
  .renew{grid-template-columns:1fr;gap:22px;padding:34px 28px;text-align:left}
}
@media(max-width:800px){
  .burger{display:flex}
  .nav-in{padding:12px 20px}
}
/* mobil: släta ut den röriga högen så inget sticker ut */
@media(max-width:900px){
  .scard{transform:none !important}
  .stackSec.on .scard{transform:none !important}
  .stackSec.on .scard:hover{transform:translateY(-4px) !important}
  .stackSec.on .scard.dim{transform:none !important}
}
/* PROCESS */
.hsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:42px}
.hstep{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:24px}
.hwho{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:4px 10px;border-radius:6px;margin-bottom:14px}
.hwho.ni{background:var(--mint-t);color:var(--mint-d)}
.hwho.oss{background:var(--lav-t);color:var(--lav-d)}
.hstep h4{font-size:17px;font-weight:700;margin-bottom:6px}
.hstep p{font-size:14px;color:var(--ink2);line-height:1.5}
/* RISKFRI */
.riskbox{background:linear-gradient(135deg,var(--lav-t),var(--lav-3));border-radius:var(--r-lg);
  padding:54px 42px;max-width:840px;margin:0 auto;text-align:center}
.riskbox h2{margin-bottom:16px}
.riskbox p{font-size:18px;color:var(--ink2);max-width:580px;margin:0 auto 10px;line-height:1.55}
/* SOCIAL PROOF */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.tcard{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:26px}
.tcard .q{font-size:16px;font-weight:500;line-height:1.5;margin-bottom:14px}
.tcard .m{font-size:13.5px;color:var(--ink3)}
/* FAQ */
/* FAQ — utfällbar. Byggd på <details>/<summary> i stället för JavaScript, så
   frågorna går att öppna även om skript inte laddas. Svaren ligger kvar i
   HTML:en även när de är stängda, vilket är vad Google kräver för att
   FAQPage-schemat ska godkännas. */
.faq{max-width:760px;margin-top:32px}
.fitem{border-bottom:1px solid var(--border)}
.fitem summary{
  font-size:18px;font-weight:700;line-height:1.4;padding:22px 0;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  list-style:none;
}
.fitem summary::-webkit-details-marker{display:none}
.fitem summary::after{
  content:"+";flex-shrink:0;
  font-size:24px;font-weight:600;line-height:.9;color:var(--red-txt);
}
.fitem[open] summary::after{content:"–"}
.fitem summary:hover{color:var(--red-txt)}
.fitem summary:focus-visible{outline:2px solid var(--red-txt);outline-offset:3px;border-radius:4px}
.fitem p{font-size:16px;color:var(--ink2);line-height:1.55;padding:0 44px 24px 0;margin-top:-6px;max-width:640px}
/* FINAL */
.final{text-align:center;padding:84px 0}
.final h2{max-width:720px;margin:0 auto 18px}
.final .lead{max-width:540px;margin:0 auto}
.final .cta-row{justify-content:center;margin-top:32px}
/* FOOTER */
footer{background:var(--ink);color:rgba(255,255,255,.6);padding:50px 0 30px}
.fin{display:flex;justify-content:space-between;flex-wrap:wrap;gap:28px}
/* Footerns logotyp – samma proportioner som i menyn, i mindre skala. */
.flogo{display:flex;align-items:center;gap:5px;margin-bottom:12px}
.flogo i{width:4px;height:22px;background:var(--lav);border-radius:2px}
.flogo b{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.8px}
footer p{font-size:14px;line-height:1.6}
footer a:hover{color:#fff}
.flinks{display:flex;gap:44px;flex-wrap:wrap}
.fcol h5{color:#fff;font-size:14px;font-weight:600;margin-bottom:10px}
.fcol a{display:block;font-size:14px;margin-bottom:6px;color:rgba(255,255,255,.65)}
.fbot{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:13px}
/* REVEAL */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease-out,transform .6s ease-out}
.rv.on{opacity:1;transform:none}
@media(max-width:900px){
  .hero .grid,.feat,.rgrid{grid-template-columns:1fr;gap:44px}
  .feat.rev .ftext{order:0}
  .pgrid,.mgrid,.tgrid{grid-template-columns:1fr}
  .stack{grid-template-columns:1fr}
  .hsteps{grid-template-columns:1fr 1fr}
  .thread{display:none}
  .psteps{flex-direction:column;align-items:center}
  .pstep:not(:last-child)::after{display:none}
  .pstep{margin-bottom:24px}
}
@media(max-width:560px){.hsteps{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  .rv{opacity:1;transform:none}
  .scard{transform:none !important}
  .stackSec.on .scard:hover{transform:none !important}
}

/* ══════ anvandarvillkor ══════ */
/* ---- UNDERSIDOR ---- */
.pagehead{padding:76px 0 56px}
.pagehead h1{max-width:760px}
.pagehead .lead{max-width:600px;margin-top:20px}
.crumb{font-size:13.5px;color:var(--ink3);margin-bottom:22px}
.crumb a:hover{color:var(--ink)}
/* artikelkort */
.agrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.acard{background:var(--white);border:1px solid var(--border);border-radius:var(--r);
  padding:26px 26px 24px;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.acard:hover{transform:translateY(-4px);box-shadow:0 22px 44px -18px rgba(23,21,31,.22)}
.acard .acat{font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--lav-d);background:var(--lav-t);padding:4px 10px;border-radius:6px;align-self:flex-start;margin-bottom:16px}
.acard h3{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.25;margin-bottom:10px}
.acard p{font-size:14.5px;color:var(--ink2);line-height:1.55;flex:1}
.acard .amore{font-size:14px;font-weight:600;color:var(--red);margin-top:18px}
/* kategorilista */
.kgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:44px}
.kcard{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:26px 28px}
.kcard .ktop{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.kcard .kico{width:38px;height:38px;border-radius:11px;background:var(--lav-t);display:flex;
  align-items:center;justify-content:center;flex-shrink:0}
.kcard .kico svg{width:19px;height:19px;stroke:var(--lav-d);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.kcard h3{font-size:20px;font-weight:700;letter-spacing:-.02em}
.kcard p{font-size:15px;color:var(--ink2);line-height:1.55;margin-bottom:14px}
.klink{font-size:13.5px;font-weight:600;color:var(--red);margin-left:12px;white-space:nowrap}
.kcard .ksave{font-size:13px;font-weight:700;color:var(--mint-d);background:var(--mint-t);
  padding:5px 11px;border-radius:7px;display:inline-block}
/* om oss */
.aboutgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.portrait{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:4/5;position:relative;
  background:linear-gradient(160deg,var(--lav-t),var(--lav-3));display:flex;align-items:center;justify-content:center}
.portrait .ph{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--lav-d);
  font-weight:700;text-align:center;max-width:200px;line-height:1.9;opacity:.75}
.abouttext p{font-size:17px;color:var(--ink2);line-height:1.7;margin-bottom:18px}
.abouttext p strong{color:var(--ink);font-weight:600}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.pcard2{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:26px}
.pcard2 h4{font-size:17px;font-weight:700;margin-bottom:8px;letter-spacing:-.02em}
.pcard2 p{font-size:14.5px;color:var(--ink2);line-height:1.55}
/* kontakt */
.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.cbox{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:34px}
.cbox h3{font-size:21px;font-weight:700;margin-bottom:12px;letter-spacing:-.02em}
.cbox p{font-size:15.5px;color:var(--ink2);line-height:1.6;margin-bottom:20px}
.cmail{display:inline-flex;align-items:center;gap:10px;font-size:18px;font-weight:700;color:var(--ink)}
.cmail svg{width:19px;height:19px;stroke:var(--red);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.csteps{margin-top:8px}
.cstep{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--border)}
.cstep:last-child{border-bottom:none}
.cnum{width:30px;height:30px;border-radius:50%;background:var(--lav-t);color:var(--lav-d);
  font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cstep h4{font-size:16.5px;font-weight:700;margin-bottom:4px;letter-spacing:-.02em}
.cstep p{font-size:14.5px;color:var(--ink2);line-height:1.5}
@media(max-width:900px){
  .agrid,.kgrid,.principles,.contactgrid{grid-template-columns:1fr}
  .aboutgrid{grid-template-columns:1fr;gap:36px}
}
/* ---- ARTIKEL ---- */
.artmeta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.artcat{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:var(--lav-t);color:var(--lav-d);padding:6px 13px;border-radius:99px}
.artdate{font-size:13.5px;color:var(--ink3)}
.arthead h1{max-width:820px}
.artlead{font-size:20px;color:var(--ink2);line-height:1.55;max-width:660px;margin-top:20px}
.keyfig{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:44px 0 8px;border-top:1px solid var(--border)}
.kf{padding:30px 30px 0;border-right:1px solid var(--border)}
.kf:last-child{border-right:none}
.kf:first-child{padding-left:0}
.kf .kv{font-size:clamp(32px,4.4vw,48px);font-weight:800;letter-spacing:-.04em;line-height:1;
  color:var(--red);font-variant-numeric:tabular-nums}
.kf .kk{font-size:14.5px;color:var(--ink2);margin-top:12px;line-height:1.5}
.prose{max-width:680px}
.prose h2{font-size:clamp(24px,3.2vw,32px);font-weight:800;letter-spacing:-.035em;margin:52px 0 16px;line-height:1.15}
.prose p{font-size:17.5px;color:var(--ink2);line-height:1.75;margin-bottom:20px}
.prose p b,.prose strong{color:var(--ink);font-weight:600}
.prose ul{list-style:none;margin:0 0 22px}
.prose li{font-size:17px;color:var(--ink2);line-height:1.65;padding-left:26px;position:relative;margin-bottom:11px}
.prose li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--lav)}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:28px 0 30px;border-radius:var(--r)}
.tscroll .ptable,.tscroll .ltable{margin:0}
.ptable{width:100%;min-width:520px;border-collapse:collapse;margin:28px 0 30px;background:var(--white);
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden;font-size:15px}
.ptable th{background:var(--ink);color:#fff;text-align:left;padding:13px 16px;font-size:12.5px;
  font-weight:700;letter-spacing:.05em}
.ptable td{padding:13px 16px;border-bottom:1px solid var(--border);color:var(--ink2)}
.ptable tbody tr:last-child td{border-bottom:none}
.ptable td:first-child{font-weight:600;color:var(--ink)}
.ptable .hi{color:var(--red);font-weight:700}
.tcap{font-size:13.5px;color:var(--ink3);margin:-18px 0 30px;line-height:1.5}
.callout{background:var(--lav-t);border-radius:var(--r);padding:24px 28px;margin:30px 0}
.callout b{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--lav-d);margin-bottom:9px}
.callout p{font-size:16.5px;color:var(--ink2);line-height:1.65;margin:0}
.artcta{background:linear-gradient(150deg,var(--ink),#2D1F5E);border-radius:var(--r-lg);
  padding:40px 42px;margin-top:56px;color:#fff}
.artcta h3{font-size:24px;font-weight:800;letter-spacing:-.03em;color:#fff;margin-bottom:10px}
.artcta p{font-size:16px;color:rgba(255,255,255,.7);line-height:1.6;margin-bottom:24px;max-width:520px}
.artcta .btn{background:#fff;color:var(--ink)}
.artcta .btn:hover{background:var(--lav-t)}
.related{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px}
.relcard{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:24px;transition:transform .25s}
.relcard:hover{transform:translateY(-3px)}
.relcard .rc{font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--lav-d);display:block;margin-bottom:9px}
.relcard h4{font-size:17.5px;font-weight:700;line-height:1.3;letter-spacing:-.02em;margin-bottom:6px}
.relcard p{font-size:14px;color:var(--ink3)}
/* index: utvald artikel */
.feat-art{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:38px 40px;margin-top:44px}
.feat-art h2{font-size:clamp(25px,3.4vw,34px);font-weight:800;letter-spacing:-.035em;line-height:1.15;margin:14px 0 12px;max-width:640px}
.feat-art p{font-size:17px;color:var(--ink2);line-height:1.6;max-width:600px;margin-bottom:22px}
.feat-stats{display:flex;gap:0;margin-top:28px;padding-top:24px;border-top:1px solid var(--border);flex-wrap:wrap}
.fs{padding-right:44px;margin-right:44px;border-right:1px solid var(--border)}
.fs:last-child{border-right:none;margin-right:0;padding-right:0}
.fs .v{font-size:28px;font-weight:800;letter-spacing:-.03em;color:var(--red);font-variant-numeric:tabular-nums}
.fs .k{font-size:13.5px;color:var(--ink3);margin-top:4px}
@media(max-width:900px){
  .keyfig{grid-template-columns:1fr;border-top:none}
  .kf{border-right:none;border-top:1px solid var(--border);padding:24px 0 0}
  .related{grid-template-columns:1fr}
  .fs{padding-right:26px;margin-right:26px}
  .artcta{padding:30px 26px}
}
/* ---- JURIDIK ---- */
.legal{max-width:720px}
.legal h2{font-size:clamp(22px,3vw,29px);font-weight:800;letter-spacing:-.03em;margin:48px 0 14px;line-height:1.15}
.legal h3{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:30px 0 10px}
.legal p{font-size:16.5px;color:var(--ink2);line-height:1.75;margin-bottom:18px}
.legal p b,.legal strong{color:var(--ink);font-weight:600}
.legal ul{list-style:none;margin:0 0 20px}
.legal li{font-size:16px;color:var(--ink2);line-height:1.65;padding-left:24px;position:relative;margin-bottom:10px}
.legal li::before{content:"";position:absolute;left:2px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--lav)}
.legal a{color:var(--red);font-weight:600;border-bottom:1px solid rgba(212,56,112,.28)}
.ltable{width:100%;border-collapse:collapse;margin:22px 0 28px;background:var(--white);
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden;font-size:14.5px}
.ltable th{background:var(--ink);color:#fff;text-align:left;padding:12px 15px;font-size:12px;font-weight:700;letter-spacing:.05em}
.ltable td{padding:12px 15px;border-bottom:1px solid var(--border);color:var(--ink2);vertical-align:top;line-height:1.5}
.ltable tbody tr:last-child td{border-bottom:none}
.ltable td:first-child{font-weight:600;color:var(--ink);width:34%}
.lbox{background:var(--lav-t);border-radius:var(--r);padding:22px 26px;margin:26px 0}
.lbox b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--lav-d);margin-bottom:8px}
.lbox p{font-size:16px;margin:0;line-height:1.65}
.updated{font-size:14px;color:var(--ink3);margin-top:10px}
.tocbox{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:22px 26px;margin:34px 0 0}
.tocbox b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:12px}
.tocbox a{display:block;font-size:15px;color:var(--ink2);padding:5px 0;border-bottom:none;font-weight:500}
.tocbox a:hover{color:var(--red)}
@media(max-width:900px){.ltable{font-size:13px}.ltable th,.ltable td{padding:10px 11px}
  .ltable td:first-child{width:40%}}

/* ══════ insikter ══════ */
/* ---- ARTIKEL ---- */
.ptable{width:100%;border-collapse:collapse;margin:28px 0 30px;background:var(--white);
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden;font-size:15px}

/* ══════ kategorier ══════ */
/* ===== MOBILMENY ===== */
@media(max-width:800px){.burger{display:block}.nav-in{padding:12px 20px}}

/* ══════ kontakt ══════ */
/* om oss */
.cprimary{background:linear-gradient(150deg,var(--ink),#2D1F5E);color:#fff;border-radius:var(--r-lg);padding:38px}
.cprimary h3{font-size:23px;font-weight:700;color:#fff;margin-bottom:10px;letter-spacing:-.02em}
.cprimary p{font-size:15.5px;color:rgba(255,255,255,.7);line-height:1.6;margin-bottom:24px}
.cbtnw{display:inline-block;background:#fff;color:var(--ink);padding:15px 30px;border-radius:99px;font-weight:700;font-size:16.5px}
.cbtnw:hover{background:var(--lav-t)}
.calt{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:14.5px;color:rgba(255,255,255,.6)}
.calt a{color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.3)}
.cwho{display:flex;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.cav{width:44px;height:44px;border-radius:50%;background:var(--lav);color:var(--ink);display:flex;
  align-items:center;justify-content:center;font-weight:800;font-size:16px;flex-shrink:0}
.cwho div b{display:block;color:#fff;font-size:15px;font-weight:700}
.cwho div span{font-size:13.5px;color:rgba(255,255,255,.6)}

/* ══════ metod ══════ */
/* metod */
.mstep{display:grid;grid-template-columns:74px 1fr;gap:28px;padding:34px 0;border-bottom:1px solid var(--border)}
.mstep:last-child{border-bottom:none}
.mnum{width:56px;height:56px;border-radius:16px;background:var(--lav-t);color:var(--lav-d);
  font-size:21px;font-weight:800;display:flex;align-items:center;justify-content:center}
.mstep.us .mnum{background:var(--pink-t);color:var(--red)}
.mstep h3{font-size:22px;font-weight:700;letter-spacing:-.025em;margin-bottom:5px}
.mwho{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-bottom:11px;display:block}
.mstep p{font-size:16px;color:var(--ink2);line-height:1.65;margin-bottom:12px;max-width:660px}
.mdetail{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:18px 22px;max-width:660px}
.mdetail b{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-bottom:9px}
.mdetail ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.mdetail li{font-size:14.5px;color:var(--ink2);padding-left:20px;position:relative;line-height:1.5}
.mdetail li::before{content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--lav)}
.qa{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
.qacard{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:26px 28px}
.qacard h4{font-size:17.5px;font-weight:700;margin-bottom:8px;letter-spacing:-.02em}
.qacard p{font-size:15px;color:var(--ink2);line-height:1.6}
/* plattform */
.pv{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center;padding:52px 0;border-bottom:1px solid var(--border)}
.pv:last-of-type{border-bottom:none}
.pv.rev .pvtext{order:2}
.pvtext h3{font-size:26px;font-weight:700;letter-spacing:-.03em;margin-bottom:12px}
.pvtext p{font-size:16.5px;color:var(--ink2);line-height:1.6}
.pv img{border-radius:var(--r);border:1px solid var(--border);box-shadow:0 24px 54px -20px rgba(23,21,31,.22)}
.plans{width:100%;border-collapse:collapse;margin-top:40px;background:var(--white);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.plans th,.plans td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--border);font-size:15px}
.plans thead th{background:var(--ink);color:#fff;font-size:13px;font-weight:700;letter-spacing:.05em}
.plans thead th:nth-child(n+2){text-align:center;width:150px}
.plans td:nth-child(n+2){text-align:center}
.plans tbody tr:last-child td{border-bottom:none}
.plans .yes{color:var(--mint-d);font-weight:800}
.plans .no{color:var(--ink3)}
.plans .ph{font-weight:600;color:var(--ink)}
@media(max-width:900px){
  .mstep{grid-template-columns:1fr;gap:14px}
  .qa,.pv{grid-template-columns:1fr;gap:26px}
  .pv.rev .pvtext{order:0}
  .plans th,.plans td{padding:12px 12px;font-size:13.5px}
}

/* ══════ om-oss ══════ */
/* Om oss – bolagsröst */
.bigstats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:52px;border-top:1px solid var(--border)}
.bstat{padding:34px 32px 0;border-right:1px solid var(--border)}
.bstat:last-child{border-right:none}
.bstat:first-child{padding-left:0}
.bstat .bv{font-size:clamp(38px,5vw,58px);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--lav-d);font-variant-numeric:tabular-nums}
.bstat .bk{font-size:15.5px;color:var(--ink2);margin-top:14px;line-height:1.5}
.pullquote{padding:64px 0;text-align:center}
.pullquote blockquote{font-size:clamp(24px,3.6vw,38px);font-weight:800;letter-spacing:-.03em;
  line-height:1.2;max-width:760px;margin:0 auto;color:var(--ink)}
.pullquote blockquote span{color:var(--red)}
.modelbox{display:grid;grid-template-columns:.75fr 1.25fr;gap:56px;align-items:center}
.modelnum{font-size:clamp(72px,11vw,132px);font-weight:800;letter-spacing:-.05em;line-height:.9;color:var(--red)}
.modelnum small{display:block;font-size:16px;font-weight:600;color:var(--ink2);letter-spacing:0;margin-top:16px;line-height:1.5}
.modellist{display:flex;flex-direction:column;gap:2px}
.mrow{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--border);align-items:flex-start}
.mrow:last-child{border-bottom:none}
.mrow svg{width:20px;height:20px;flex-shrink:0;margin-top:3px;stroke:var(--mint-d);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.mrow p{font-size:16.5px;color:var(--ink2);line-height:1.55}
.mrow p b{color:var(--ink);font-weight:600}
@media(max-width:900px){.bigstats{grid-template-columns:1fr;border-top:none}
  .bstat{border-right:none;border-top:1px solid var(--border);padding:26px 0 0}
  .modelbox{grid-template-columns:1fr;gap:32px}}

/* ===== PLATSHÅLLARE SOM MÅSTE FYLLAS I FÖRE LANSERING =====
   Gulmarkerat och omöjligt att missa. build.mjs varnar också vid varje bygge
   så länge någon av dem ligger kvar. Ta bort <mark>-taggen när uppgiften
   är ifylld — då försvinner varningen. */
mark.fyll-i{
  background:#FFE94A;color:#17151F;font-weight:700;
  padding:2px 8px;border-radius:5px;
  border:2px solid #C79A00;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
mark.fyll-i::before{content:"⚠ ";font-weight:800}

/* Språkväljare i menyn. Diskret — den ska finnas för den som letar, inte
   konkurrera med huvudnavigeringen. */
.lang-switch{font-size:14px !important;color:var(--ink3) !important;font-weight:600 !important;
  border:1.5px solid var(--border);border-radius:99px;padding:6px 14px}
.lang-switch:hover{color:var(--ink) !important;border-color:var(--ink3)}

/* ===== RUBRIKSKALA =====
   Kortrubriker: h4 17px, h3 20px. Använd dessa, inte mellanvärden — 16 mot
   17px syns inte och skapar bara inkonsekvens. Större steg är avsiktliga och
   hör till sitt sammanhang: .capture h4 18px, .mstep h3 22px,
   .artcta h3 24px, .pvtext h3 26px. */

/* Granskningsnot på artiklar. Ett odaterat påstående om marknadspriser går
   inte att citera med förtroende — varken av en läsare eller en språkmodell.
   Noten talar också om vilket urval siffrorna gäller. */
.artrev{margin-top:40px;padding:18px 22px;background:var(--white);
  border:1px solid var(--border);border-left:3px solid var(--lav);
  border-radius:0 10px 10px 0;font-size:14px;color:var(--ink2);line-height:1.6;max-width:640px}
.artrev b{color:var(--ink);font-weight:600}

/* ===== SPAMSKYDD ===== */
/* Honeypot: dolt för människor, men bottar fyller i det. Får inte döljas med
   display:none — då hoppar många bottar över det. */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ===== KONTRASTJUSTERINGAR (WCAG AA) ===== */
/* Tertiär text: #9993AA gav 2.82 mot bakgrunden. #6E6880 ger 5.07 och behåller trestegsskalan. */
:root{ --ink3:#6E6880; --red-txt:#B02A5B; }

/* Röd som liten text (under 18.66px fet) — #D43870 låg på 4.36, precis under kravet. */
.acard .amore, .klink, .legal a, .ptable .hi, .eyebrow{ color:var(--red-txt) }

/* Röd text på rosa yta — #D43870 mot #FFE0E6 gav bara 3.71. */
.stag.pink, .ftag.a, .otag.pink, .p-red, .sc-pill.p-red, .md-p.p-red{ color:var(--red-txt) }
.stag.pink svg{ stroke:var(--red-txt) }

/* Stora rubriker och siffror behåller signaturröd #D43870 — de klarar kravet 3.0 för stor text. */

/* Synlig tangentbordsfokus på alla interaktiva element */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--red-txt); outline-offset:3px; border-radius:4px }