/* ===== Key Code – hemsidan. Design enligt mallen B2 (mall/keycode-b2-mall.html): ljust, trygghetsblått,
   orange för det besökaren ska göra härnäst, turkos när något är tryggt. Klasserna är desamma som förut,
   så att site.js, sajtredigeraren och egna sidor fungerar som tidigare. ===== */
:root{
  color-scheme:light;
  /* Sidans färger. --amb (accent), --danger och --ok kan ändras i sajtredigeraren (Tema & logga). */
  --bg:#FFFFFF; --bg2:#FFFFFF; --bg3:#F6F9FB; --bd:#D6DFE7; --bd2:#C9D5DF;
  --fg:#17212B; --dim:#4B5B6B; --faint:#5F6E7C; --ink:#17212B; --rubrikfarg:#102A43;
  --amb:#F28C28; --amb-h:#E07B17; --amb2:#9A5A12; --klar:#176B87; --klar-ljus:#E6F1F5;
  --turkos:#17705F; --turkos-ljus:#E3F3F0; --ok:#17705F; --ok-d:#17705F; --warn:#B7791F; --warn-bg:#FFF4E5;
  --danger:#C83E4D; --danger-hi:#C83E4D; --danger-t:#C83E4D; --rod-ljus:#FBECEE; --petrol:#176B87;
  /* Trygghetsblått: sidhuvud, hjältar, mörka rutor, sidfot */
  --mork:#102A43; --navy:#1F4B70; --navy2:#173B5C; --navy3:#21507A; --navy-linje:#2E5E86; --pa-mork:#E6EEF4; --pa-mork-dampad:#C5D3DF;
  --sans:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kod:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mono:var(--sans);   /* labels and tags; the terminal look of the first design is gone, --kod is for code */
  --r-sm:10px; --r:14px; --r-lg:18px;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --hh:72px;
  --skugga:0 1px 2px rgba(16,42,67,.06); --skugga-stor:0 30px 70px rgba(16,42,67,.14);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ overflow-x:clip; scroll-behavior:smooth; scroll-padding-top:calc(var(--hh) + 16px); }
body{ margin:0; background:var(--bg); color:var(--fg); font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:clip; }
::selection{ background:#FFE3C4; color:var(--fg); }
a{ color:var(--klar); }
button,input,select,textarea{ font:inherit; color:inherit; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:3px solid var(--klar); outline-offset:2px; border-radius:4px; }
h1,h2,h3,h4{ font-family:var(--rubrik,'Schibsted Grotesk','Hanken Grotesk',system-ui,sans-serif); font-weight:800; letter-spacing:-.02em; margin:0; line-height:1.12; color:var(--rubrikfarg); text-wrap:balance; }
.wrap{ max-width:1200px; margin:0 auto; padding-inline:clamp(16px,4vw,32px); }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:12px; top:-80px; z-index:500; background:#fff; color:var(--mork); padding:12px 16px; font-weight:700; border-radius:var(--r-sm); }
.skip:focus{ top:12px; }
body[data-mode="privat"] [data-only="foretag"], body[data-mode="foretag"] [data-only="privat"]{ display:none!important; }
[hidden]{ display:none!important; }

.eyebrow{ display:inline-block; font:700 13px/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--klar); }
.pr{ display:none; }
.mono{ font-family:var(--mono); }
.blk{ display:none; }

/* Knappar: orange för det besökaren ska göra härnäst, klarblå kontur för sekundärt */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border:2px solid var(--amb); border-radius:var(--r-sm); background:var(--amb); color:var(--ink); font:700 16px/1 var(--sans); text-decoration:none; cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s; }
.btn:hover{ background:var(--amb-h); border-color:var(--amb-h); }
.btn.ghost{ background:transparent; color:var(--klar); border-color:var(--klar); }
.btn.ghost:hover{ background:var(--klar-ljus); }
.btn.dark{ background:var(--mork); border-color:var(--mork); color:#fff; }
.btn.dark:hover{ background:var(--navy); border-color:var(--navy); }
.btn.sm{ min-height:42px; padding:0 16px; font-size:15px; }
.link{ background:none; border:0; padding:0; color:var(--klar); font:600 15px var(--sans); text-decoration:underline; text-underline-offset:3px; cursor:pointer; min-height:24px; }
/* "Menade du …?" under an e-mail field (site.js visaEpostForslag). */
.epost-forslag{ margin:6px 0 0; font-size:14.5px; color:inherit; } .epost-forslag .link{ font-size:14.5px; }

/* ===== Sidhuvud ===== */
.tick, .logo-cur, .abar, .hack, .egg, .ascii, .boot{ display:none!important; }
.hd{ position:sticky; top:env(safe-area-inset-top,0px); z-index:100; background:var(--navy2); color:var(--pa-mork); border-bottom:1px solid #2A5274; }
.hd-in{ display:flex; align-items:center; gap:16px; min-height:var(--hh); }
/* Loggan: en ruta med fast storlek för båda lägena. Bilderna är beskurna så att KEY CODE-texten är lika stor och
   börjar på samma ställe; Företagsloggans SECURITY får plats under. Vid byte tonar de över i varandra. */
.logo{ --lh:20px; flex:none; position:relative; display:block; width:calc(var(--lh) * 3.7 + 18px); height:calc(var(--lh) * 1.69 + 10px); background:#fff; border-radius:6px; }
.logo img{ position:absolute; left:9px; top:5px; width:calc(var(--lh) * 3.7); height:auto; transition:opacity .35s var(--ease); }
.logo img[data-logo="foretag"]{ opacity:0; }
body[data-mode="foretag"] .logo img[data-logo="foretag"]{ opacity:1; }
body[data-mode="foretag"] .logo img[data-logo="privat"]{ opacity:0; }
.hd .sw{ flex:none; }
.sw{ display:inline-flex; padding:3px; border-radius:99px; background:#20486B; }
.sw button{ min-height:36px; padding:0 14px; border:0; border-radius:99px; background:none; font:700 14px var(--sans); color:var(--pa-mork); cursor:pointer; }
/* The chosen side is white, as in the other switches: green on the site means "safe", not "selected". */
.sw button[aria-pressed="true"]{ background:#fff; color:var(--rubrikfarg); box-shadow:0 1px 2px rgba(0,0,0,.18); }
.nav{ display:flex; gap:2px; margin-left:auto; }
.ni{ position:relative; }
.nb{ display:flex; align-items:center; gap:7px; min-height:44px; padding:0 12px; background:none; border:0; border-radius:8px; font:600 15.5px var(--sans); color:var(--pa-mork); text-decoration:none; cursor:pointer; white-space:nowrap; }
.nb:hover,.nb[aria-expanded="true"]{ background:rgba(255,255,255,.08); color:#fff; }
.nb svg{ width:10px; height:10px; transition:transform .2s; opacity:.8; }
.nb[aria-expanded="true"] svg{ transform:rotate(180deg); }
.pn{ position:absolute; top:calc(100% + 8px); left:0; min-width:300px; background:#1C4466; color:var(--pa-mork); border:1px solid var(--navy-linje); border-radius:var(--r); padding:12px; box-shadow:0 24px 60px rgba(0,0,0,.35); display:block; z-index:110;
  visibility:hidden; opacity:0; transform:translateY(-6px) scale(.985); transform-origin:top left; pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s; }
/* Osynlig brygga över mellanrummet, så att menyn inte stängs när pekaren går från knappen till menyn. */
.pn::before{ content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
.pn.open{ visibility:visible; opacity:1; transform:none; pointer-events:auto; transition-delay:0s; }
.pn.wide{ display:grid; grid-template-columns:1fr 1fr; min-width:560px; gap:4px 14px; }
@keyframes pnIn{ from{ opacity:0; transform:translateY(-4px); } }
.pn h3{ font:700 12px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#A9BDCD; margin:6px 10px 6px; }
.pn a{ display:block; padding:9px 10px; border-radius:8px; text-decoration:none; font:700 15.5px var(--sans); color:#fff; }
.pn a{ transition:background-color .15s, transform .15s; }
.pn a:hover{ background:#24527A; transform:translateX(2px); }
.nb{ transition:background-color .15s, color .15s; }
.pn a small{ display:block; color:#B9CAD8; font-size:13.5px; font-weight:400; line-height:1.4; }
.pn a .tg{ font:700 11px var(--mono); color:#8FE0CF; background:rgba(30,138,120,.25); border-radius:99px; padding:1px 7px; margin-left:6px; vertical-align:1px; }
.hd-r{ display:flex; align-items:center; gap:8px; }
/* Boka möte: the one call to action that stays in the header at every width. */
.hd-boka{ display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:2px solid var(--amb); border-radius:8px; color:#fff; font:700 15.5px var(--sans); text-decoration:none; white-space:nowrap; transition:background-color .15s, color .15s; }
.hd-boka:hover,.hd-boka:focus-visible{ background:var(--amb); color:var(--ink); }
@media (max-width:480px){ .hd-boka{ min-height:40px; padding:0 11px; font-size:14px; } }
.login{ display:flex; align-items:center; gap:4px; }
.login .bev{ background:var(--amb); color:var(--ink); }
.login .bev:hover,.login .bev[aria-expanded="true"]{ background:var(--amb-h); color:var(--ink); }
.login .pn{ left:auto; right:0; }
.burger{ display:none; min-height:44px; padding:0 14px; border-radius:8px; border:1px solid #2A5274; background:none; color:var(--pa-mork); font:700 15px var(--sans); cursor:pointer; }
.burger span{ display:block; width:18px; height:2px; background:currentColor; margin:4px auto; }
@media (max-width:1280px){ .login .reg{ display:none; } }
@media (max-width:1140px){ .nav,.login{ display:none; } .burger{ display:block; } .hd-r{ margin-left:auto; } }
/* För många menyval för bredden (site.js passaMeny): samma som på smala skärmar. */
.kc-meny-reg .login .reg{ display:none; }
.kc-meny-full .nav,.kc-meny-full .login{ display:none; } .kc-meny-full .burger{ display:block; } .kc-meny-full .hd-r{ margin-left:auto; }
@media (max-width:640px){ .hd .sw{ display:none; } .logo{ --lh:17px; } }
.mm{ position:fixed; inset:0; z-index:300; background:#fff; overflow-y:auto; padding:calc(env(safe-area-inset-top,0px) + 14px) 18px calc(env(safe-area-inset-bottom,0px) + 40px); display:none; }
.mm.open{ display:block; }
.mm-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:10px; }
.mm .sw{ background:var(--bg3); border:1px solid var(--bd); }
.mm .sw button{ color:var(--fg); }
.x{ width:46px; height:46px; border-radius:var(--r-sm); border:1px solid var(--bd); background:#fff; color:var(--fg); font-size:22px; cursor:pointer; flex:none; }
.mm details{ border-top:1px solid var(--bd); }
.mm summary{ list-style:none; cursor:pointer; padding:16px 0; font:800 20px var(--rubrik,'Schibsted Grotesk',sans-serif); color:var(--rubrikfarg); display:flex; justify-content:space-between; }
.mm summary::-webkit-details-marker{ display:none; }
.mm summary::after{ content:"+"; color:var(--klar); margin-left:auto; }
.mm details[open] summary::after{ content:"−"; }
.mm .mm-l{ display:flex; padding:16px 0; border-top:1px solid var(--bd); font:800 20px var(--rubrik,'Schibsted Grotesk',sans-serif); color:var(--rubrikfarg); text-decoration:none; }
.mm .mm-l::after{ content:"→"; color:var(--klar); margin-left:auto; }
.mm details a small{ display:block; margin-top:2px; font-size:14px; color:var(--dim); }
.mm details a{ display:block; padding:11px 0 11px 14px; text-decoration:none; color:var(--fg); font-size:17px; }

/* ===== Hjälten (trygghetsblå) ===== */
.hero{ position:relative; overflow:hidden; background:var(--navy); color:#DDE6EE; }
.hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 85% 20%, rgba(64,150,180,.35), transparent 70%); pointer-events:none; }
.hero canvas{ display:none; }
.hero-g{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,5vw,64px); padding-block:clamp(44px,6vw,88px); align-items:center; }
.hero .eyebrow{ color:#7FC8DD; }
.hero h1{ font-size:clamp(2.2rem,4.6vw,3.6rem); color:#fff; margin:14px 0 18px; }
.hero h1 em{ font-style:normal; color:#7FD6C6; }
.lead{ font-size:clamp(18px,1.6vw,20px); color:#C5D3DF; max-width:56ch; margin:0 0 24px; }
.gl{ display:inline; }
.prompt{ max-width:580px; }
.prompt label{ display:block; font-weight:700; font-size:15px; color:#fff; margin-bottom:8px; }
.prompt label b{ display:none; }
/* The leak check's human check and optional boxes (site.js leakForm), in the text color of the section around them. */
.prompt .lacka-extra{ display:grid; gap:10px; margin:12px 0 14px; }
.prompt .lacka-extra .kryss{ display:flex; margin:0; font-weight:400; font-size:14.5px; line-height:1.45; color:inherit; }
.prompt .lacka-extra .manniska:empty{ display:none; }
.row{ display:flex; align-items:stretch; gap:6px; background:#fff; border-radius:var(--r-sm); padding:6px; }
.row .ps{ display:none; }
.row input{ flex:1; min-width:0; border:0; background:none; outline:none; font:500 17px var(--sans); color:var(--fg); height:48px; padding:0 10px; }
.row input::placeholder{ color:#7A8794; }
.row:focus-within{ box-shadow:0 0 0 3px #7FC8DD; }
.err{ color:#FFB3BB; font-weight:700; font-size:15px; margin:10px 0 0; min-height:1px; }
.tiny{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:12px; font-size:14.5px; color:#C5D3DF; }
.tiny b{ color:#fff; font-weight:600; }
.hero .link{ color:#BFE6F2; }
@media (max-width:560px){ .row{ flex-direction:column; } .row .btn{ width:100%; } .row input{ flex:none; height:48px; }
  .koll-kort .row{ border:0; padding:0; background:none; gap:8px; }
  .koll-kort .row:focus-within{ box-shadow:none; }
  .koll-kort .row input{ border:1.5px solid var(--bd2); border-radius:var(--r-sm); background:#fff; }
  .koll-kort .row input:focus{ border-color:var(--klar); box-shadow:0 0 0 3px var(--klar-ljus); } }
.trust{ display:grid; grid-template-columns:repeat(4,auto); justify-content:start; gap:12px 28px; margin-top:30px; padding-top:20px; border-top:1px solid rgba(255,255,255,.16); }
.trust b{ display:block; font-weight:800; font-size:16px; color:#fff; }
.trust span{ font-size:14px; color:#C5D3DF; }
@media (max-width:700px){ .trust{ grid-template-columns:1fr 1fr; } }

/* ===== Startsidan (mallen B2) ===== */
.hero .knappar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero .btn.ghost{ border-color:#7FC8DD; color:#E6EEF4; }
.hero .btn.ghost:hover{ background:rgba(127,200,221,.12); }
.hchips{ display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; }
.hchips a,.hchips button{ display:inline-flex; align-items:center; border:1px solid #3C6688; border-radius:99px; padding:6px 14px; color:#E6EEF4; text-decoration:none; font:600 15px var(--sans); background:transparent; cursor:pointer; }
.hchips a:hover,.hchips button:hover{ border-color:#7FC8DD; }
/* Statusrutan: samma utseende som i Key Code Bevakning */
.bpanel{ background:var(--navy2); border:1px solid var(--navy-linje); border-radius:16px; padding:18px; display:grid; gap:10px; box-shadow:0 30px 70px rgba(10,30,50,.28); color:var(--pa-mork); }
.bpanel .topp{ display:flex; justify-content:space-between; gap:10px; font:700 12px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#A9BDCD; }
.brad{ display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:12px 14px; border-radius:10px; background:#21507A; border:1px solid var(--navy-linje); }
.brad .punkt{ width:10px; height:10px; border-radius:50%; background:var(--turkos); box-shadow:0 0 0 4px rgba(30,138,120,.25); }
.brad.info .punkt{ background:#4096B4; box-shadow:0 0 0 4px rgba(64,150,180,.3); }
.brad.fara .punkt{ background:#E5626F; box-shadow:0 0 0 4px rgba(229,98,111,.3); }
.brad b{ display:block; color:#fff; font-weight:700; font-size:15.5px; }
.brad small{ display:block; color:#C5D3DF; font:500 12.5px var(--mono); }
.brad .st2{ font:700 12px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:#8FE0CF; }
.brad.info .st2{ color:#9FD3E6; } .brad.fara .st2{ color:#FFB3BB; }
.bpanel .notis{ font:italic 500 13px var(--mono); color:#A9BDCD; margin:2px 0 0; }
/* Vad vill du göra? */
.flikar{ display:inline-flex; max-width:100%; gap:4px; padding:4px; background:#EEF3F7; border:1px solid var(--bd); border-radius:14px; margin-bottom:28px; }
.flikar button{ flex:1 1 auto; min-height:44px; padding:8px 20px; border:0; border-radius:10px; background:transparent; color:var(--dim); font:700 15.5px/1.25 var(--sans); cursor:pointer; transition:background-color .15s, color .15s, box-shadow .15s; }
.flikar button:hover{ color:var(--rubrikfarg); background:rgba(16,42,67,.05); }
.flikar button[aria-selected="true"]{ background:#fff; color:var(--rubrikfarg); box-shadow:0 1px 2px rgba(16,42,67,.08), 0 6px 16px -6px rgba(16,42,67,.18); }
@media (max-width:640px){ .flikar{ display:flex; } .flikar button{ padding:8px 12px; font-size:15px; } }
.koll-g{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr); gap:22px; align-items:start; }
.koll-steg{ display:grid; gap:18px; min-width:0; }
.koll-kort{ background:#fff; border:1px solid var(--bd); border-radius:var(--r); padding:22px; display:grid; gap:12px; box-shadow:var(--skugga); min-width:0; }
.steg-rubrik{ display:flex; gap:10px; align-items:center; font:800 1.2rem var(--rubrik,'Schibsted Grotesk',sans-serif); color:var(--rubrikfarg); margin:0; }
.steg-nr{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--klar-ljus); color:var(--klar); font:700 14px var(--mono); flex:none; }
.koll-kort .row{ border:1.5px solid var(--bd2); }
.koll-kort .row:focus-within{ border-color:var(--klar); box-shadow:0 0 0 3px var(--klar-ljus); }
.row:focus-within{ outline:3px solid var(--klar); outline-offset:2px; }
.koll-kort .err{ color:var(--danger); margin:0; } .koll-kort .tiny{ color:var(--dim); margin:0; } .koll-kort .tiny b{ color:var(--fg); } .koll-kort .link{ color:var(--klar); }
.koll-kort > .dampad{ color:var(--dim); margin:0; }
.koll-kort .qcard{ padding:0; border:0; box-shadow:none; }
.koll-res{ position:sticky; top:calc(var(--hh) + 16px); }
#vad .villkor{ margin-top:18px; }
@media (max-width:980px){ .koll-g{ grid-template-columns:minmax(0,1fr); } .koll-res{ position:static; order:-1; } }
/* Har något hänt? */
.akutband{ background:var(--bg3); border-top:1px solid var(--bd); }
.akutband .wrap{ display:grid; grid-template-columns:1.1fr repeat(3,1fr); gap:18px; padding-block:34px; align-items:center; }
.akutband h2{ font-size:1.6rem; }
.akutband .link{ margin-top:6px; }
.akutband .nr{ display:grid; gap:2px; border-left:2px solid var(--bd); padding-left:16px; }
.akutband .nr span{ font-size:14.5px; color:var(--dim); }
.akutband .nr a{ font:800 1.45rem var(--rubrik,'Schibsted Grotesk',sans-serif); color:var(--rubrikfarg); text-decoration:none; }
.akutband .nr a:hover{ text-decoration:underline; }
@media (max-width:900px){ .akutband .wrap{ grid-template-columns:1fr 1fr; } .akutband .wrap > div:first-child{ grid-column:1/-1; } }
@media (max-width:520px){ .akutband .wrap{ grid-template-columns:1fr; } }
/* Fakta */
.fakta{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.fakta div{ display:grid; gap:4px; align-content:start; }
.fakta b{ font:800 clamp(1.6rem,3vw,2.2rem)/1.1 var(--rubrik,'Schibsted Grotesk',sans-serif); color:var(--rubrikfarg); }
.fakta span{ color:var(--dim); }
@media (max-width:800px){ .fakta{ grid-template-columns:1fr 1fr; } }
@media (min-width:801px){ .fakta{ gap:0; } .fakta > div{ padding-inline:clamp(16px,2.4vw,32px); } .fakta > div:first-child{ padding-left:0; } .fakta > div + div{ border-left:1px solid var(--bd); } }
/* Nyhetsbrev */
.nyhetsband .wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(24px,5vw,64px); align-items:start; }
@media (max-width:860px){ .nyhetsband .wrap{ grid-template-columns:minmax(0,1fr); } }
.nb-val{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.nb-val .kryss{ padding:14px; border:1.5px solid var(--bd2); border-radius:var(--r-sm); background:#fff; transition:border-color .18s, background-color .18s; }
.nb-val .kryss:has(input:checked){ border-color:var(--klar); background:var(--klar-ljus); }
.nb-val b{ display:block; }
.nb-val small{ display:block; margin-top:2px; color:var(--dim); font-size:14px; line-height:1.4; }
.nb-yta .row{ padding:0; gap:10px; background:none; }
.nb-yta .row:focus-within{ box-shadow:none; }
.nb-yta .nb-fel:empty{ min-height:0; }
.nb-tack{ padding:18px; border:1.5px solid var(--klar); border-radius:var(--r-sm); background:var(--klar-ljus); }
.nb-tack p{ margin:0; color:var(--fg); }
.nb-tack p + p{ margin-top:6px; }
@media (max-width:560px){ .nb-val{ grid-template-columns:minmax(0,1fr); } }
.nyhetsband h2{ font-size:clamp(1.6rem,3vw,2.2rem); margin-top:8px; }
.nyhetsband p{ color:var(--dim); margin:10px 0 0; max-width:56ch; }
.nb-form{ display:grid; gap:12px; }
.nb-form .fl{ display:block; font-weight:700; margin-bottom:6px; }
.nb-form input[type=email]{ width:100%; min-height:48px; border:1.5px solid var(--bd2); border-radius:var(--r-sm); padding:0 14px; font:500 16px var(--sans); }
.nb-form input[type=email]:focus{ border-color:var(--klar); box-shadow:0 0 0 3px var(--klar-ljus); }
.kryss{ display:flex; gap:10px; align-items:flex-start; font-size:15px; cursor:pointer; }
.kryss input{ width:20px; height:20px; margin-top:2px; accent-color:var(--klar); flex:none; }
.nb-fel{ color:var(--danger); font-weight:700; min-height:1.2em; margin:0; }
.hp{ position:absolute!important; left:-9999px; width:1px; height:1px; }

/* Mörka rutor: statusrader som i Key Code Bevakning (term, logg, tillägget) */
.term{ background:var(--navy2); border:1px solid var(--navy-linje); border-radius:16px; overflow:hidden; color:var(--pa-mork); box-shadow:0 30px 70px rgba(10,30,50,.28); }
.tbar{ display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--navy-linje); font:700 12px var(--kod); letter-spacing:.08em; text-transform:uppercase; color:#A9BDCD; }
.dots{ display:none; }
.rec{ margin-left:auto; color:#8FE0CF; letter-spacing:.06em; }
.cap{ padding:14px 16px 4px; }
.cap b{ font-weight:700; color:#fff; }
.cap p{ margin:4px 0 0; font-size:15px; color:var(--pa-mork-dampad); }
.log{ padding:8px 16px 14px; height:300px; overflow:hidden; font:500 13px/1.75 var(--kod); color:#C5D3DF; display:flex; flex-direction:column; justify-content:flex-end; }
.log div{ flex:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.log .t{ color:#8FA6B8; margin-right:8px; }
.log .ok{ color:#8FE0CF; } .log .am{ color:#FFD199; } .log .bad{ color:#FFB3BB; font-weight:700; } .log .fg{ color:#fff; display:inline; padding:0; border:0; }
.log .cur::after{ content:""; }
.tfoot{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--navy-linje); }
.tfoot div{ padding:12px 16px; border-right:1px solid var(--navy-linje); }
.tfoot div:last-child{ border-right:0; }
.tfoot b{ display:block; font:800 22px var(--sans); color:#fff; font-variant-numeric:tabular-nums; }
.tfoot span{ font-size:12.5px; color:#A9BDCD; }
@media (max-width:1000px){ .hero-g{ grid-template-columns:minmax(0,1fr); } .log{ height:210px; } }

/* Löpande rad (marquee) */
.marq{ background:var(--bg3); border-bottom:1px solid var(--bd); padding:14px 0; overflow:hidden; }
.mq{ display:flex; gap:40px; width:max-content; animation:tk 60s linear infinite; }
.mq span{ font-weight:600; font-size:15px; color:var(--fg); white-space:nowrap; }
.mq span::before{ content:"✓ "; color:var(--turkos); font-weight:800; }
@keyframes tk{ to{ transform:translateX(-50%); } }

/* ===== Avsnitt ===== */
.sec{ padding-block:clamp(56px,7vw,96px); border-top:1px solid var(--bd); position:relative; background:#fff; }
.sh{ max-width:780px; margin-bottom:32px; }
.sh h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); margin-top:10px; }
.sh p{ color:var(--dim); font-size:clamp(17px,1.5vw,19px); margin:12px 0 0; max-width:62ch; }
.panel{ background:#fff; border:1px solid var(--bd); border-radius:var(--r); box-shadow:var(--skugga); }

/* Resultat (Läckagekoll, Bolagskoll) */
#resultat{ background:var(--bg3); }
.rep{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:24px; align-items:start; }
.rep-h{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--bd); font:700 12.5px var(--mono); color:var(--dim); letter-spacing:.04em; }
.demo-tag{ font:700 11px var(--mono); letter-spacing:.08em; color:var(--amb2); background:var(--warn-bg); border-radius:99px; padding:3px 9px; text-transform:uppercase; }
.rep-b{ padding:clamp(18px,3vw,30px); }
.verdict{ font-size:clamp(1.7rem,3.2vw,2.5rem); }
.verdict em{ font-style:normal; color:var(--danger); }
.verdict.good em{ color:var(--turkos); }
.rep-b > p{ color:var(--dim); margin:10px 0 0; }
.lt{ list-style:none; margin:24px 0 0; padding:0; border-left:2px solid var(--bd); }
.lt li{ position:relative; padding:0 0 20px 22px; }
.lt li::before{ content:""; position:absolute; left:-6px; top:8px; width:10px; height:10px; border-radius:50%; background:var(--danger); }
.lt .y{ font-weight:800; font-size:19px; }
.lt .s{ font-weight:600; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.chip{ font:700 12px var(--mono); padding:3px 9px; border-radius:99px; background:var(--rod-ljus); color:var(--danger); }
.chip.n{ background:var(--bg3); color:var(--dim); }
.h4{ font-weight:800; font-size:16px; color:var(--rubrikfarg); margin:24px 0 12px; }
.sites{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.sites span{ display:grid; place-items:center; height:50px; border-radius:var(--r-sm); border:1px solid var(--bd); font-weight:800; color:var(--dim); }
.sites span.on{ background:var(--rod-ljus); border-color:#EBC1C7; color:var(--danger); }
.note{ font-size:13.5px; color:var(--faint); margin:8px 0 0; }
.acts{ margin-top:8px; }
.act{ display:grid; grid-template-columns:1fr auto; gap:12px 20px; align-items:center; padding:16px 0; border-top:1px solid var(--bd); }
.act h5{ margin:0 0 4px; font-weight:700; font-size:16px; }
.act p{ margin:0; font-size:15px; color:var(--dim); }
.act .pc{ text-align:right; font-size:14px; color:var(--dim); }
.act .pc b{ display:block; color:var(--rubrikfarg); font-size:16px; }
@media (max-width:640px){ .act{ grid-template-columns:minmax(0,1fr); } .act .pc{ text-align:left; } .sites{ grid-template-columns:repeat(4,1fr); } }
.score-card{ padding:22px; text-align:center; }
.happy-mark{ width:96px; height:96px; margin:4px auto 16px; border-radius:50%; display:grid; place-items:center; background:var(--turkos-ljus); }
.happy-mark svg{ width:48px; height:48px; }
.happy-mark path{ stroke-dasharray:60; stroke-dashoffset:60; animation:draw .7s .2s var(--ease) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.tl{ list-style:none; margin:22px 0 0; padding:0; }
.tl li{ display:grid; grid-template-columns:110px 1fr auto; gap:14px; align-items:start; padding:14px 0; border-top:1px solid var(--bd); }
.tl .d{ font:700 13px var(--mono); color:var(--dim); }
.tl h5{ margin:0 0 3px; font-weight:700; font-size:16px; }
.tl p{ margin:0; font-size:15px; color:var(--dim); }
.flag{ font:700 12px var(--mono); padding:4px 10px; border-radius:99px; background:var(--danger); color:#fff; letter-spacing:.04em; }
.chg{ font:700 12px var(--mono); padding:3px 9px; border-radius:99px; border:1px solid var(--bd); color:var(--dim); }
@media (max-width:640px){ .tl li{ grid-template-columns:1fr; gap:4px; } }
.warnbox{ margin-top:18px; padding:18px; border-radius:var(--r); border:1px solid #EBC1C7; background:var(--rod-ljus); }
.warnbox p{ margin:6px 0 12px; color:#5C1F27; }
@media (max-width:980px){ .rep{ grid-template-columns:minmax(0,1fr); } }
.ask{ margin-top:22px; padding:22px; border-radius:var(--r); border:1px solid var(--bd); background:var(--klar-ljus); }
.ask p{ margin:0 0 14px; font-weight:700; font-size:18px; color:var(--rubrikfarg); }
.ask-b{ display:flex; flex-wrap:wrap; gap:10px; }
.ask [aria-pressed="true"]{ outline:3px solid var(--klar); outline-offset:2px; }
.ask-out:not(:empty){ margin-top:24px; }
.ask .lead-samtycke, .ask .lead-svar{ margin:12px 0 0; font:400 14px/1.5 var(--sans); color:var(--dim); max-width:62ch; }
.ask .lead-svar:empty{ display:none; }
.ask .lead-svar.ok{ color:var(--turkos); font-weight:700; font-size:15px; }
.ask .lead-svar.fel{ color:var(--danger); font-weight:700; font-size:15px; }

/* Läget i Sverige */
.lg{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,56px); align-items:start; }
.nums{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.nums div{ padding:20px; border:1px solid var(--bd); border-radius:var(--r); background:#fff; }
.nums b{ display:block; font:800 clamp(1.8rem,3.2vw,2.6rem)/1 var(--rubrik,'Schibsted Grotesk',sans-serif); color:var(--rubrikfarg); font-variant-numeric:tabular-nums; }
.nums .hot{ color:var(--danger); }
.nums span{ display:block; margin-top:10px; color:var(--dim); font-size:15px; }
.nums small{ display:block; margin-top:6px; color:var(--faint); font-size:13px; }
.bars{ padding:6px 18px 18px; font:600 clamp(12px,1.35vw,14px)/1 var(--mono); }
.brow{ display:grid; grid-template-columns:52px 1fr auto; gap:14px; align-items:center; padding:13px 0; border-bottom:1px solid var(--navy-linje); }
.brow:last-of-type{ border-bottom:0; }
.brow .y{ color:#A9BDCD; font-weight:700; }
.brow .bb{ display:block; height:12px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
.brow .bb i{ display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#4F9FBF,#7FC8DD); transition:width .2s linear; }
.brow.hot .bb i{ background:linear-gradient(90deg,#E07B17,#F28C28); }
.brow .v{ font-weight:700; color:#fff; font-variant-numeric:tabular-nums; }
.bars .note{ color:#A9BDCD; }
.live{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center; margin-top:14px; padding:16px 18px; border:1px solid var(--bd); border-left:4px solid var(--danger); border-radius:var(--r-sm); background:#fff; }
.live b{ font:800 clamp(1.8rem,3vw,2.4rem)/1 var(--rubrik,'Schibsted Grotesk',sans-serif); color:var(--danger); font-variant-numeric:tabular-nums; }
.live span{ color:var(--dim); font-size:15px; }
.live small{ display:block; color:var(--faint); font-size:13px; }
@media (max-width:980px){ .lg{ grid-template-columns:minmax(0,1fr); } }

/* Trygghetspoäng */
.qz{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:22px; align-items:stretch; }
.qcard{ padding:clamp(18px,3vw,28px); display:flex; flex-direction:column; }
.qtop{ display:flex; justify-content:space-between; align-items:center; gap:10px; font:700 12.5px var(--mono); color:var(--dim); }
.qprog{ display:flex; gap:4px; }
.qprog i{ width:22px; height:6px; border-radius:99px; background:var(--bd); }
.qprog i.d{ background:var(--klar); } .qprog i.c{ background:var(--amb); }
.qbody{ flex:1; min-height:160px; display:flex; flex-direction:column; justify-content:center; }
.qq{ font:800 clamp(21px,2.3vw,28px)/1.2 var(--rubrik,'Schibsted Grotesk',sans-serif); color:var(--rubrikfarg); margin:16px 0 6px; }
.qh{ color:var(--dim); margin:0; }
.kc-anim .qbody.swap{ animation:qin .3s var(--ease); }
@keyframes qin{ from{ opacity:0; transform:translateX(12px); } }
.qa{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.qa button{ min-height:58px; border-radius:var(--r-sm); border:1.5px solid var(--bd2); background:#fff; font:700 17px var(--sans); color:var(--fg); cursor:pointer; transition:border-color .15s, background .15s; }
.qa button:hover{ border-color:var(--klar); background:var(--klar-ljus); }
.qa kbd{ font:700 12px var(--kod); color:var(--klar); border:1px solid var(--bd2); border-radius:4px; padding:1px 6px; margin-right:8px; }
.qf{ display:flex; justify-content:space-between; gap:10px; margin-top:14px; font-size:13.5px; color:var(--faint); }
.gauge{ padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.gauge svg{ width:100%; max-width:360px; height:auto; overflow:visible; }
.seg{ transition:fill .4s; }
.gv{ font:800 clamp(3.2rem,6vw,4.6rem)/1 var(--rubrik,'Schibsted Grotesk',sans-serif); color:var(--rubrikfarg); margin-top:-12px; font-variant-numeric:tabular-nums; }
.gv small{ font-size:.32em; color:var(--dim); }
.gl2{ font:700 12.5px var(--mono); color:var(--dim); letter-spacing:.08em; text-transform:uppercase; margin-top:8px; }
.glvl{ margin-top:12px; font:700 13px var(--mono); padding:5px 12px; border-radius:99px; border:1.5px solid var(--bd2); letter-spacing:.06em; }
.pop{ position:absolute; font:800 28px var(--sans); color:var(--turkos); pointer-events:none; opacity:0; }
.pop.go{ animation:popup 1.1s var(--ease); }
@keyframes popup{ 0%{ opacity:0; transform:translateY(10px) scale(.8); } 20%{ opacity:1; transform:none; } 100%{ opacity:0; transform:translateY(-40px); } }
.qout:not(:empty){ margin-top:24px; }
@media (max-width:980px){ .qz{ grid-template-columns:minmax(0,1fr); } .gauge{ order:-1; } }

/* Tjänstekort */
.svg3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.pc2{ position:relative; display:flex; flex-direction:column; gap:8px; padding:22px; border-radius:var(--r); background:#fff; border:1px solid var(--bd); box-shadow:var(--skugga); text-align:left; color:var(--fg); overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.pc2:hover{ border-color:var(--klar); box-shadow:0 18px 40px rgba(16,42,67,.1); }
.pc2 .tgs{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.pts{ font:700 11.5px var(--mono); letter-spacing:.04em; color:var(--turkos); background:var(--turkos-ljus); border-radius:99px; padding:3px 9px; }
.knd{ font:700 12px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--klar); background:var(--klar-ljus); border-radius:99px; padding:3px 9px; }
.pc2 h3{ font-size:clamp(20px,1.8vw,24px); margin-top:4px; }
.pc2 p{ margin:0; color:var(--dim); font-size:15.5px; }
.pc2 .pr2{ margin-top:auto; padding-top:14px; border-top:1px solid var(--bd); display:flex; justify-content:space-between; align-items:flex-end; gap:10px; }
.pr2 b{ font:800 21px var(--rubrik,'Schibsted Grotesk',sans-serif); color:var(--rubrikfarg); display:block; }
.pr2 small{ font-size:13.5px; color:var(--dim); }
.pr2 .ph{ color:var(--amb2); font:700 14px var(--mono); }
.pc2 .gh{ display:none; }
@media (max-width:980px){ .svg3{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .svg3{ grid-template-columns:minmax(0,1fr); } }
/* The quiz result sits in the left column beside the score gauge, too narrow for three cards: there it fills
   the row with cards of at least 260px, so long names such as Låsbytesgaranti stay inside their card. */
.qout .svg3{ grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); }
.pc2 h3{ overflow-wrap:break-word; hyphens:auto; }
.pc2 .pr2{ flex-wrap:wrap; }
.pc2 .pr2 .btn{ margin-left:auto; }
.prods{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.prods .big{ grid-column:span 2; }
.prods .big .inner{ display:grid; grid-template-columns:1fr auto; gap:20px; align-items:start; }
.prods .big ul{ margin:10px 0 0; padding:0; list-style:none; color:var(--dim); font-size:15px; }
.prods .big li{ padding:4px 0 4px 26px; position:relative; }
.prods .big li::before{ content:"✓"; position:absolute; left:0; color:var(--turkos); font-weight:800; }
.tagimg{ width:120px; flex:none; margin:-6px -6px 0 0; }
.prods .pc2 button{ align-self:flex-start; }
.villkor{ margin-top:22px; padding:16px 18px; border:1px solid var(--bd); border-radius:var(--r-sm); background:var(--bg3); font-size:15px; color:var(--dim); }
.villkor b{ color:var(--fg); }
@media (max-width:980px){ .prods{ grid-template-columns:1fr 1fr; } .prods .big{ grid-column:1/-1; } }
@media (max-width:640px){ .prods{ grid-template-columns:minmax(0,1fr); } .prods .big .inner{ grid-template-columns:minmax(0,1fr); } .tagimg{ display:none; } }

/* Tillägget */
.ext{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(24px,4vw,56px); align-items:start; }
.lvls{ display:grid; gap:10px; margin:24px 0; }
.lv{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; padding:14px 16px; border-radius:var(--r); border:1.5px solid var(--bd); background:#fff; cursor:pointer; text-align:left; color:var(--fg); transition:border-color .15s, box-shadow .15s; }
.lv:hover,.lv[aria-selected="true"]{ border-color:var(--klar); box-shadow:0 0 0 3px var(--klar-ljus); }
.lv .tg{ font:700 11px var(--mono); letter-spacing:.06em; padding:4px 8px; border-radius:99px; min-width:76px; text-align:center; }
.tg.ok{ background:var(--turkos-ljus); color:var(--turkos); } .tg.wn{ background:var(--warn-bg); color:#8A5D00; } .tg.dg{ background:var(--rod-ljus); color:#B0303F; } .tg.ytg{ background:var(--klar-ljus); color:var(--klar); }
.lv b{ display:block; font-weight:700; font-size:16px; }
.lv small{ color:var(--dim); font-size:14px; }
.brw{ border-radius:var(--r-lg); overflow:hidden; background:#fff; color:var(--ink); border:1px solid var(--bd); box-shadow:var(--skugga-stor); }
.bt{ height:42px; background:#E9EEF3; display:flex; align-items:center; gap:10px; padding:0 12px; }
.bt .dots{ display:flex; gap:6px; } .bt .dots i{ width:10px; height:10px; border-radius:50%; background:#C9D3DD; display:block; }
.addr{ flex:1; min-width:0; height:28px; border-radius:99px; background:#fff; display:flex; align-items:center; padding:0 12px; font:500 12.5px var(--kod); color:#5d5a54; white-space:nowrap; overflow:hidden; transition:box-shadow .3s,color .3s; }
.addr.bad{ box-shadow:0 0 0 2px var(--danger); color:var(--danger); }
.exti{ position:relative; width:30px; height:30px; border-radius:8px; background:var(--navy2); flex:none; display:grid; place-items:center; }
.exti::before{ content:""; width:7px; height:7px; border-radius:50%; background:#8FE0CF; position:absolute; top:7px; }
.exti::after{ content:""; width:3px; height:8px; background:#8FE0CF; position:absolute; top:12px; }
.exti b{ position:absolute; right:-7px; top:-6px; min-width:18px; height:17px; border-radius:9px; background:var(--turkos); color:#fff; font:700 10.5px/17px var(--sans); text-align:center; padding:0 4px; border:2px solid #E9EEF3; }
.vp{ position:relative; height:360px; overflow:hidden; background:#fff; }
.scn{ position:absolute; inset:0; padding:18px 22px; }
.sk{ height:10px; border-radius:5px; background:#E9EEF3; margin:8px 0; }
.sk.h{ height:18px; width:55%; background:#D6DFE7; }
.imgph{ height:110px; border-radius:8px; background:linear-gradient(135deg,#DFE8EC,#E6F1F5); margin:12px 0; }
.toast{ position:absolute; right:16px; bottom:16px; width:290px; background:#fff; border-radius:13px; box-shadow:0 20px 44px -12px rgba(16,42,67,.35); padding:22px 16px 18px; font-size:14px; display:flex; gap:11px; align-items:center; transform:translateY(30px) scale(.9); opacity:0; transition:transform .5s var(--spring),opacity .3s; overflow:hidden; }
.toast.on{ transform:none; opacity:1; }
.toast .brand{ position:absolute; left:16px; top:7px; font:700 9px var(--mono); letter-spacing:.14em; color:var(--klar); }
.toast .ck{ width:22px; height:22px; border-radius:50%; background:var(--turkos); flex:none; display:grid; place-items:center; color:#fff; font-size:13px; font-weight:800; }
.toast div{ flex:1; line-height:1.3; }
.toast small{ display:block; color:var(--dim); font-size:12px; }
.toast u{ text-decoration:none; font-weight:800; color:var(--klar); }
.toast .tm{ position:absolute; left:0; right:0; bottom:0; height:3px; background:#eee; }
.toast .tm i{ display:block; height:100%; width:100%; background:var(--turkos); }
.toast.on .tm i{ animation:shr 6s linear forwards; }
@keyframes shr{ to{ width:0; } }
.form{ max-width:300px; margin:12px auto; background:#fff; border:1px solid var(--bd); border-radius:12px; padding:18px; }
.form h6{ margin:0 0 8px; font:800 16px var(--sans); }
.fld{ height:38px; border:1.5px solid var(--bd); border-radius:8px; margin-top:8px; display:flex; align-items:center; padding:0 11px; color:#8A97A5; font-size:13px; }
.fld.hl{ border-color:#E3A43B; }
.wbox{ margin-top:8px; background:var(--warn-bg); border:1.5px solid #E3A43B; border-radius:8px; padding:10px 12px; font-size:12.5px; color:#5a4200; }
.kc-anim .wbox.shk{ animation:shk .35s steps(3); }
@keyframes shk{ 25%{ transform:translateX(-3px); } 50%{ transform:translateX(3px); } 75%{ transform:translateX(-1px); } }
.wbox b{ display:block; font-size:13px; color:#3d2d00; }
.wbox code{ background:rgba(0,0,0,.06); padding:0 4px; border-radius:3px; }
.wbtn{ display:flex; gap:8px; margin-top:8px; }
.wbtn span{ font:700 12px var(--sans); padding:6px 10px; border-radius:6px; background:#fff; border:1px solid #e3c877; }
.fakebtn{ margin-top:10px; height:38px; border-radius:8px; background:#1f4f8f; color:#fff; display:grid; place-items:center; font:700 13px var(--sans); opacity:.4; }
.red{ position:absolute; inset:0; background:var(--danger); display:flex; align-items:center; justify-content:center; padding:20px; }
.fcard{ position:relative; z-index:1; width:min(420px,100%); background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(0,0,0,.45); }
.fh{ background:var(--danger); color:#fff; font:700 11px var(--mono); letter-spacing:.12em; padding:10px 16px; border-bottom:1px solid rgba(255,255,255,.3); }
.fb{ padding:16px 18px 18px; }
.fb h6{ margin:0 0 6px; font:800 20px var(--rubrik,'Schibsted Grotesk',sans-serif); color:var(--rubrikfarg); }
.fb p{ margin:0 0 14px; font-size:13.5px; color:var(--dim); }
.fb code{ background:var(--rod-ljus); color:var(--danger); padding:0 4px; border-radius:3px; }
.fb .cls{ display:inline-block; background:var(--mork); color:#fff; font:700 13px var(--sans); padding:10px 16px; border-radius:8px; }
.fb .cont{ margin-left:10px; font-size:12.5px; color:#8A97A5; }
.yt{ position:absolute; inset:18px 22px auto; aspect-ratio:16/9; border-radius:10px; background:#0f0f0f; overflow:hidden; }
.yt::after{ content:""; position:absolute; left:50%; top:50%; width:0; height:0; margin:-14px 0 0 -8px; border-left:24px solid rgba(255,255,255,.3); border-top:14px solid transparent; border-bottom:14px solid transparent; }
.ytl{ position:absolute; left:12px; top:12px; display:flex; align-items:center; gap:10px; background:var(--amb); color:var(--ink); font:700 12px var(--sans); padding:7px 10px; border-radius:6px; transition:background .4s; }
.ytl.done{ background:var(--turkos); color:#fff; }
.ytl span{ background:rgba(0,0,0,.14); padding:2px 6px; border-radius:4px; }
.elog{ margin-top:12px; }
.elog .log{ height:132px; }
.ctas{ display:flex; flex-wrap:wrap; gap:10px; }
@media (max-width:980px){ .ext{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:560px){ .vp{ height:330px; } .toast{ left:12px; right:12px; width:auto; } }

/* Så fungerar det */
.steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; counter-reset:s; }
.steps li{ counter-increment:s; position:relative; padding:18px; border-radius:var(--r); border:1px solid var(--bd); background:#fff; box-shadow:var(--skugga); }
.steps li::before{ content:counter(s); display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--klar); color:#fff; font:700 14px var(--mono); margin-bottom:12px; }
.steps h3{ font-size:17px; margin-bottom:6px; line-height:1.25; }
.steps p{ margin:0; font-size:15px; color:var(--dim); }
.steps li.alarm{ border-color:#EBC1C7; background:var(--rod-ljus); }
.steps li.alarm::before{ background:var(--danger); }

/* Säljarna */
.pre{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; max-width:820px; }
.pre label{ display:block; font-weight:700; font-size:14.5px; color:var(--fg); margin-bottom:6px; }
.pre input{ width:100%; height:48px; border-radius:var(--r-sm); border:1.5px solid var(--bd2); background:#fff; padding:0 14px; font:500 16px var(--sans); color:var(--fg); }
.pre input:focus{ border-color:var(--klar); box-shadow:0 0 0 3px var(--klar-ljus); }
.cons{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.cc{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--bd); background:#fff; box-shadow:var(--skugga); text-decoration:none; color:var(--fg); transition:border-color .2s, box-shadow .2s; }
.cc:hover{ border-color:var(--klar); box-shadow:0 18px 40px rgba(16,42,67,.12); }
.cc .ph{ display:block; position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--bg3); }
.cc .ph img{ width:100%; height:100%; object-fit:cover; object-position:50% 25%; transition:transform .5s var(--ease); }
.cc:hover .ph img{ transform:scale(1.03); }
.cc .ph i{ display:none; }
.cc .inf{ padding:clamp(18px,2.4vw,26px); display:flex; flex-direction:column; gap:6px; }
.cc .id{ font:700 12px var(--mono); color:var(--klar); letter-spacing:.06em; text-transform:uppercase; }
.cc h3{ font-size:clamp(22px,2.2vw,28px); }
.cc .ttl{ font-weight:700; font-size:15px; color:var(--dim); }
.cc ul{ list-style:none; margin:10px 0 0; padding:0; font-size:15px; color:var(--dim); }
.cc li{ padding:3px 0 3px 24px; position:relative; }
.cc li::before{ content:"✓"; position:absolute; left:0; color:var(--turkos); font-weight:800; }
.cc .btn{ margin-top:auto; align-self:stretch; }
.more{ margin-top:18px; display:grid; grid-template-columns:auto 1fr 1fr; gap:12px; align-items:center; }
.more > span{ font-weight:700; font-size:14.5px; color:var(--dim); }
.mini{ display:flex; align-items:center; gap:14px; padding:10px 14px 10px 10px; border-radius:var(--r); border:1px solid var(--bd); background:#fff; text-decoration:none; color:var(--fg); min-height:76px; transition:border-color .15s; }
.mini:hover{ border-color:var(--klar); }
.mini img{ width:54px; height:54px; border-radius:50%; object-fit:cover; object-position:50% 22%; }
.mini b{ display:block; font-weight:700; font-size:15.5px; }
.mini small{ font-size:13.5px; color:var(--dim); }
.mini .go{ margin-left:auto; font-weight:700; font-size:14px; color:var(--klar); white-space:nowrap; }
.cfoot{ margin-top:14px; font-size:15px; color:var(--dim); }
@media (max-width:1060px){ .cons{ grid-template-columns:minmax(0,1fr); } .more{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:560px){ .cc{ grid-template-columns:minmax(0,1fr); } .cc .ph{ aspect-ratio:5/4; } .pre{ grid-template-columns:minmax(0,1fr); } }

/* Mötesbokningen (live): dag, tid och kontaktuppgifter i samma steg */
.boka-g{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(18px,3vw,32px); align-items:start; }
.boka-form{ padding:clamp(20px,3vw,28px); display:grid; gap:16px; }
.boka-form .del{ display:grid; gap:12px; }
.boka-form .del + .del{ border-top:1px solid var(--bd); padding-top:16px; }
.boka-form .falt-g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr)); gap:12px; }
.boka-form label{ display:block; font-weight:700; font-size:15px; margin-bottom:6px; }
.boka-form .valfri{ font-weight:400; color:var(--faint); }
.boka-form input, .boka-form select, .boka-form textarea{ width:100%; min-height:48px; border:1.5px solid var(--bd2); border-radius:var(--r-sm); padding:0 14px; font:500 16px var(--sans); background:#fff; color:var(--fg); }
.boka-form textarea{ padding:10px 14px; min-height:90px; resize:vertical; }
.boka-form input:focus, .boka-form select:focus, .boka-form textarea:focus{ border-color:var(--klar); box-shadow:0 0 0 3px var(--klar-ljus); }
.boka-form .btn{ justify-self:start; }
.boka-form .note{ margin:0; }
.boka-klar{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; padding:20px; border-radius:var(--r); background:var(--turkos-ljus); border:1px solid #B7DFD7; }
.boka-klar img{ width:72px; height:90px; object-fit:cover; border-radius:var(--r-sm); }
.boka-klar b{ font-size:18px; color:var(--rubrikfarg); }
.boka-klar p{ margin:4px 0 0; }
.boka-sjalv h3{ font-size:1.15rem; margin:0 0 12px; }
.boka-sjalv .cons{ grid-template-columns:minmax(0,1fr); gap:12px; }
@media (max-width:980px){ .boka-g{ grid-template-columns:minmax(0,1fr); } }

/* Tilläggets sidor (mallen B2) */
.ext-hero .hero-g{ padding-block:clamp(40px,5vw,72px); }
.ext-hero .fordelar{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 22px; color:#DDE8F0; font-size:15.5px; }
.ext-hero .fordelar li::before{ content:"✓ "; color:#8FE0CF; font-weight:800; }
.funk-g{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.funk{ background:#fff; border:1px solid var(--bd); border-radius:var(--r); padding:18px; display:grid; gap:8px; align-content:start; box-shadow:var(--skugga); }
.funk b{ font:800 1.05rem var(--rubrik,'Schibsted Grotesk',sans-serif); color:var(--rubrikfarg); }
.funk span{ color:var(--dim); font-size:15.5px; }
.niv-g{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:980px; }
.niv-g.fyra{ grid-template-columns:repeat(4,minmax(0,1fr)); max-width:none; }
.niv-g.fyra .plan{ padding:20px; min-width:0; grid-template-columns:minmax(0,1fr); }
.niv-g.fyra .plan > *{ min-width:0; overflow-wrap:anywhere; }
.niv-g.fyra .plan .namn{ flex-wrap:wrap; justify-content:flex-start; }
.niv-g.fyra .plan .pris small{ display:block; margin-top:6px; }
.niv-g.fyra .plan .btn{ white-space:normal; text-align:center; max-width:100%; line-height:1.3; }
.niv-g.fyra .plan .pris{ font-size:1.7rem; }
.niv-g.fyra .plan .btn{ margin-top:auto; justify-self:start; }
@media (max-width:1180px){ .niv-g.fyra{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .niv-g.fyra{ grid-template-columns:1fr; } }
.plan{ background:#fff; border:1px solid var(--bd); border-radius:var(--r); padding:24px; display:grid; gap:14px; align-content:start; box-shadow:var(--skugga); }
.plan.plus{ border:2px solid var(--klar); }
.plan .namn{ display:flex; gap:10px; align-items:center; justify-content:space-between; }
.plan .namn h3{ font-size:1.4rem; }
.plan .tagg{ font:700 11.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; border-radius:99px; padding:3px 10px; background:var(--klar-ljus); color:var(--klar); }
.plan.plus .tagg{ background:var(--klar); color:#fff; }
.plan .pris{ font:800 2.1rem/1 var(--rubrik,'Schibsted Grotesk',sans-serif); color:var(--rubrikfarg); margin:0; }
.plan .pris small{ font:500 15px var(--sans); color:var(--dim); }
.plan ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.plan li{ position:relative; padding-left:28px; }
.plan li::before{ content:"✓"; position:absolute; left:0; color:var(--turkos); font-weight:800; }
.plan li small{ display:block; color:var(--dim); font-size:14.5px; }
.plan .allt{ font-weight:700; color:var(--rubrikfarg); margin:0; }
.plan .btn{ justify-self:start; }
.ladda{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:start; }
.webbl{ display:flex; gap:8px; flex-wrap:wrap; }
.webbl button{ min-height:42px; padding:0 16px; border-radius:99px; border:1.5px solid var(--bd); background:#fff; font:700 15px var(--sans); cursor:pointer; }
.webbl button[aria-pressed="true"]{ background:var(--mork); color:#fff; border-color:var(--mork); }
.ladda .stor{ min-height:58px; font-size:18px; }
.ladda .upptackt{ color:var(--dim); margin:0; }
.steg4{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; counter-reset:s; }
.steg4 li{ counter-increment:s; background:#fff; border:1px solid var(--bd); border-radius:var(--r); padding:18px; display:grid; gap:8px; align-content:start; box-shadow:var(--skugga); }
.steg4 li::before{ content:counter(s); display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--klar); color:#fff; font:700 14px var(--mono); }
.steg4 b{ color:var(--rubrikfarg); }
.steg4 span{ color:var(--dim); font-size:15.5px; }
.beh{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px; }
.beh div{ background:#fff; border:1px solid var(--bd); border-radius:var(--r); padding:18px; display:grid; gap:6px; }
.beh q{ font-weight:700; color:var(--rubrikfarg); }
.beh span{ color:var(--dim); font-size:15.5px; }
@media (max-width:1039px){ .funk-g{ grid-template-columns:1fr 1fr; } .steg4{ grid-template-columns:1fr 1fr; } .niv-g,.ladda,.beh{ grid-template-columns:1fr; } }
@media (max-width:600px){ .funk-g,.steg4{ grid-template-columns:1fr; } }

/* Key Code Bevakning (mallen B2) */
.kb-hero .hero-g{ grid-template-columns:1fr 430px; align-items:center; padding-block:clamp(40px,5vw,72px); }
.kb-kort{ background:#fff; color:var(--text); border-radius:18px; padding:clamp(20px,3vw,28px); display:grid; gap:14px; box-shadow:0 30px 70px rgba(0,0,0,.28); }
.kb-kort h2{ font-size:1.4rem; color:var(--rubrikfarg); }
.kb-bankid{ display:flex; gap:12px; align-items:center; justify-content:center; min-height:56px; border:0; border-radius:12px; background:#183E4F; color:#fff; font:700 17px var(--sans); cursor:pointer; width:100%; }
.kb-bankid:hover{ background:#0F2C39; }
.kb-bankid i{ width:30px; height:30px; border-radius:7px; background:#fff; color:#183E4F; display:grid; place-items:center; font-style:normal; font-weight:800; font-size:11px; }
.kb-annan{ justify-self:center; background:none; border:0; color:var(--klar); font:700 15px var(--sans); text-decoration:underline; cursor:pointer; padding:6px; }
.kb-forsta{ border-top:1px solid var(--bd); padding-top:14px; display:grid; gap:6px; }
.kb-forsta b{ color:var(--rubrikfarg); }
.kb-forsta .btn{ justify-self:start; }
.kb-hjalp{ font-size:14px; color:var(--dim); margin:0; }
.hero .kb-kort span, .hero .kb-kort p{ color:var(--dim); }
.hero .kb-kort b{ color:var(--rubrikfarg); }
.hero .kb-kort .btn.ghost{ color:var(--rubrikfarg); border-color:var(--bd); background:#fff; }
.hero .kb-kort .btn.ghost:hover{ border-color:var(--klar); }
.kb-stangd{ background:var(--klar-ljus); border-radius:12px; padding:14px 16px; display:grid; gap:6px; }
.kb-stangd b{ color:var(--rubrikfarg); }
.kb-hero .lead + p{ color:#C5D3DF; }
.kb-forh .forh-g{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.kb-forh .exempel{ display:inline-block; font:700 11.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; border-radius:99px; padding:3px 10px; background:#FFF1E2; color:#A2530B; }
.hand{ display:grid; gap:10px; }
.hand div{ background:#fff; border:1px solid var(--bd); border-radius:var(--r); padding:14px 16px; display:grid; gap:3px; }
.hand time{ font:600 12.5px var(--mono); color:var(--dim); }
.hand b{ color:var(--rubrikfarg); }
.hand span{ color:var(--dim); font-size:15px; }
.kb-forh .bpanel{ box-shadow:var(--skugga); }
@media (max-width:1039px){ .kb-hero .hero-g, .kb-forh .forh-g{ grid-template-columns:1fr; } }

/* Om oss och förtroende */
.trg{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:22px; }
.qt{ position:relative; padding:clamp(24px,4vw,40px); overflow:hidden; }
.qt blockquote{ margin:0; font:700 clamp(21px,2.4vw,28px)/1.3 var(--rubrik,'Schibsted Grotesk',sans-serif); color:var(--rubrikfarg); }
.qt blockquote::before{ content:"\201D"; display:block; font-size:70px; line-height:.6; color:var(--amb); margin-bottom:10px; }
.qt figcaption{ margin-top:18px; color:var(--dim); }
.qt figcaption b{ color:var(--fg); }
.qph{ display:grid; gap:8px; margin-top:22px; }
.qph div{ padding:12px 14px; border:1px dashed var(--bd2); border-radius:var(--r-sm); font-size:14px; color:var(--faint); }
.facts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; align-content:start; }
.fct{ padding:18px; border-radius:var(--r); border:1px solid var(--bd); background:#fff; }
.fct b{ display:block; font:800 22px var(--rubrik,'Schibsted Grotesk',sans-serif); color:var(--rubrikfarg); }
.fct span{ font-size:14.5px; color:var(--dim); }
.prt{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-top:6px; }
.prt em{ font:700 12px var(--mono); font-style:normal; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-right:2px; }
.prt span{ font-weight:600; font-size:14.5px; padding:7px 12px; border-radius:99px; border:1px solid var(--bd); background:#fff; }
@media (max-width:900px){ .trg{ grid-template-columns:minmax(0,1fr); } }

/* Frågor och svar */
.faq{ display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:40px; }
.qs{ display:grid; gap:10px; }
.qs details{ background:#fff; border:1px solid var(--bd); border-radius:var(--r); padding:0 18px; }
.qs summary{ list-style:none; cursor:pointer; padding:16px 36px 16px 0; font-weight:700; font-size:16.5px; position:relative; min-height:44px; color:var(--rubrikfarg); }
.qs summary::-webkit-details-marker{ display:none; }
.qs summary::after{ content:"+"; position:absolute; right:2px; top:13px; color:var(--klar); font-size:22px; font-weight:400; }
.qs details[open] summary::after{ content:"–"; }
.qs p{ margin:0 0 16px; color:var(--dim); max-width:68ch; }
.qs .svar{ padding-bottom:4px; font-size:16px; line-height:1.65; }
.qs .svar p{ margin:0 0 12px; }
.qs .svar ul{ margin:0 0 14px; padding-left:20px; color:var(--dim); max-width:68ch; }
.qs .svar li{ margin:4px 0; }
.qs .svar b{ color:var(--fg); }
.qs .svar a{ color:var(--klar); text-underline-offset:3px; }
@media (max-width:900px){ .faq{ grid-template-columns:minmax(0,1fr); gap:10px; } }

/* Kontakt */
.ct{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.ct div{ padding:22px; border-radius:var(--r); border:1px solid var(--bd); background:#fff; box-shadow:var(--skugga); }
.ct .u{ background:var(--navy2); border-color:var(--navy2); color:var(--pa-mork); }
.ct h3{ font:700 12.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--dim); margin-bottom:10px; }
.ct .u h3{ color:#A9BDCD; }
.ct a.n{ display:block; font:800 clamp(22px,2.2vw,27px) var(--rubrik,'Schibsted Grotesk',sans-serif); color:var(--rubrikfarg); text-decoration:none; min-height:44px; }
.ct .u a.n{ color:#fff; }
.ct a.n:hover{ text-decoration:underline; }
.ct p{ margin:4px 0 0; font-size:14.5px; color:var(--dim); }
.ct .u p{ color:var(--pa-mork-dampad); }
@media (max-width:1000px){ .ct{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ct{ grid-template-columns:minmax(0,1fr); } }

/* Avslutning och sidfot */
.final{ padding-block:clamp(48px,6vw,80px); border-top:1px solid var(--bd); }
.fbox{ position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--navy); color:#DDE8F0; padding:clamp(28px,5vw,56px); display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center; }
.fbox .c{ display:block; font:700 13px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:#7FC8DD; margin-bottom:10px; }
.fbox h2{ font-size:clamp(1.7rem,3.2vw,2.6rem); color:#fff; }
.fbox h2 span{ color:#C5D3DF; }
.fbox .ctas{ flex-direction:column; align-items:stretch; }
.fbox .btn.dark{ background:var(--amb); border-color:var(--amb); color:var(--ink); }
.fbox .btn.dark:hover{ background:var(--amb-h); }
.fbox .btn.dark + .btn.dark{ background:transparent; border-color:#7FC8DD; color:#E6EEF4; }
@media (max-width:900px){ .fbox{ grid-template-columns:minmax(0,1fr); } }
.ft{ background:var(--navy2); color:var(--pa-mork-dampad); padding-block:52px 28px; font-size:15.5px; }
.ft a{ color:#E6EEF4; text-decoration:none; } .ft a:hover{ text-decoration:underline; }
.motto{ font-size:15.5px; color:var(--pa-mork-dampad); margin:0 0 28px; }
.fg{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:28px; }
.fg h3{ font:700 16px var(--sans); letter-spacing:0; color:#fff; margin-bottom:10px; }
.fg ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.fg p{ margin:0 0 6px; }
.fg .lp{ display:inline-flex; background:#fff; border-radius:6px; padding:6px 10px; margin-bottom:14px; }
.fg .lp img{ height:30px; width:auto; }
.fg .fnr b{ color:#fff; }
.fpart{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; padding-top:22px; border-top:1px solid #2A5274; }
.fpart span{ border:1px solid #2E5E86; border-radius:8px; padding:6px 12px; font-size:14px; color:var(--pa-mork-dampad); }
.fpart b{ color:#fff; }
.fb2{ margin-top:32px; padding-top:18px; border-top:1px solid #2A5274; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; font-size:14px; color:#9FB2C3; }
.fb2 button{ background:none; border:0; padding:0; color:#E6EEF4; cursor:pointer; font:inherit; min-height:24px; }
.fb2 button:hover{ text-decoration:underline; }
@media (max-width:1000px){ .fg{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .fg{ grid-template-columns:minmax(0,1fr); } }

/* Dialoger */
dialog.dl{ border:0; padding:0; width:100%; max-width:min(640px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); background:#fff; color:var(--fg); border-radius:var(--r-lg); box-shadow:0 40px 100px rgba(12,34,54,.4); overflow:hidden; }
dialog.dl[open]{ display:flex; flex-direction:column; animation:dlg .2s var(--ease); }
dialog.dl::backdrop{ background:rgba(12,34,54,.55); }
@keyframes dlg{ from{ opacity:0; transform:translateY(10px) scale(.98); } }
.dh{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:16px 20px; border-bottom:1px solid var(--bd); }
.dh h2{ font-size:23px; }
.db{ padding:20px; overflow-y:auto; }
.akd .dh{ background:var(--navy2); border:0; color:#fff; }
.akd .dh h2{ color:#fff; }
.akd .dh small{ display:block; font:700 12px var(--mono); letter-spacing:.08em; color:#FFB3BB; }
.akd .x{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); color:#fff; }
.at{ display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--bd); }
.at button{ min-height:60px; padding:8px; border:0; border-bottom:3px solid transparent; background:none; font:700 14.5px var(--sans); color:var(--dim); cursor:pointer; line-height:1.25; }
.at button[aria-selected="true"]{ color:var(--rubrikfarg); border-bottom-color:var(--amb); background:var(--bg3); }
.tel{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 18px; margin-bottom:10px; border-radius:var(--r); border:1px solid var(--bd); background:var(--bg3); text-decoration:none; min-height:74px; transition:border-color .15s; color:var(--fg); }
.tel:hover{ border-color:var(--klar); }
.tel b{ font:800 clamp(24px,5vw,30px)/1 var(--rubrik,'Schibsted Grotesk',sans-serif); color:var(--rubrikfarg); }
.tel span{ font-size:14px; color:var(--dim); text-align:right; }
.chk{ list-style:none; margin:14px 0 0; padding:0; counter-reset:c; }
.chk li{ counter-increment:c; display:grid; grid-template-columns:36px 1fr; gap:8px; padding:10px 0; border-top:1px solid var(--bd); }
.chk li::before{ content:counter(c); display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--klar-ljus); color:var(--klar); font-weight:800; font-size:14px; }
.pdp{ display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; padding:14px 0; margin:14px 0; border-block:1px solid var(--bd); }
.pdp b{ font:800 32px var(--rubrik,'Schibsted Grotesk',sans-serif); color:var(--rubrikfarg); }
.pdp span{ color:var(--dim); }
.terms{ margin:6px 0 18px; padding-left:18px; color:var(--dim); font-size:15px; }
.pdk{ font:700 12px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--klar); }
.ckr{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 0; border-bottom:1px solid var(--bd); }
.ckr input{ width:22px; height:22px; accent-color:var(--klar); }
.toastg{ position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,20px); z-index:600; background:var(--mork); color:#fff; padding:12px 18px; border-radius:var(--r-sm); font:600 15px var(--sans); opacity:0; pointer-events:none; transition:.25s; max-width:calc(100vw - 32px); box-shadow:0 10px 30px rgba(16,42,67,.3); }
.toastg.on{ opacity:1; transform:translate(-50%,0); }
.confetti{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:5; }
.confetti i{ position:absolute; top:-16px; width:8px; height:8px; animation:fall 2.8s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes fall{ to{ transform:translateY(900px) rotate(540deg); opacity:.1; } }

/* Mjuka sidbyten: webbläsaren tonar över från sidan man lämnar till den nya i stället för att visa en tom vit sida
   (View Transitions; webbläsare utan stöd byter sida som vanligt). */
@view-transition{ navigation:auto; }
::view-transition-old(root), ::view-transition-new(root){ animation-duration:.25s; animation-timing-function:var(--ease); }
html{ background:var(--bg); }
/* Mjukare: avsnitt tonar in, Privat/Företag tonar över, mobilmenyn glider in, knappar och kort svarar på hover. */
main section.sec.rv{ opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
main section.sec.rv.rv-in{ opacity:1; transform:none; }
@keyframes lageIn{ from{ opacity:0; transform:translateY(6px); } }   /* används av bokningsbekräftelsen */
.mm.open{ animation:mmIn .22s var(--ease); }
@keyframes mmIn{ from{ opacity:0; transform:translateY(-8px); } }
.btn{ transition:background-color .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s; }
.btn:active{ transform:translateY(1px); }
.pc2, .mini, .lv{ transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
@media (hover:hover){ .pc2:hover, .mini:hover{ transform:translateY(-2px); } }
a, button{ -webkit-tap-highlight-color:transparent; }
@media (prefers-reduced-motion:reduce){ @view-transition{ navigation:none; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  html{ scroll-behavior:auto; }
  .mq{ animation:none; }
  .confetti{ display:none; }
}

/* data-styrt */
.sec[hidden],#resultat[hidden]{ display:none!important; }
.prods .pc2.small-only .inner{ display:block; }

/* ===== Design från sajtredigeraren: typsnitt för rubriker, knappar, stil per avsnitt och block ===== */
html.kc-knapp-kontur .btn:not(.ghost):not(.dark){ background:transparent; color:var(--amb2); }
html.kc-knapp-rund .btn{ border-radius:999px; }
.sst-bakgrund-panel, .sst-bakgrund-panel > .sec{ background:var(--bg3); }
.sst-bakgrund-ton, .sst-bakgrund-ton > .sec{ background:var(--klar-ljus); }
.sst-bakgrund-ljus, .sst-bakgrund-ljus > .sec{ background:#fff; }
.sst-bakgrund-accent, .sst-bakgrund-accent > .sec{ background:var(--navy); color:var(--pa-mork); --fg:#E6EEF4; --dim:#C5D3DF; --faint:#A9BDCD; --rubrikfarg:#fff; --klar:#BFE6F2; --bd:#2E5E86; }
.sst-bakgrund-accent .panel, .sst-bakgrund-accent .pc2, .sst-bakgrund-accent .cc, .sst-bakgrund-accent .qs details{ --fg:#17212B; --dim:#4B5B6B; --faint:#5F6E7C; --rubrikfarg:#102A43; --klar:#176B87; --bd:#D6DFE7; color:var(--fg); }
.sst-avstand-kompakt > .sec, .sec.sst-avstand-kompakt{ padding-block:clamp(32px,4vw,52px); }
.sst-avstand-luftig > .sec, .sec.sst-avstand-luftig{ padding-block:clamp(96px,11vw,150px); }
.sst-justering-mitten{ text-align:center; }
.sst-justering-mitten .sh, .sst-justering-mitten .blk-text, .sst-justering-mitten .blk-lead, .sst-justering-mitten .sh p, .sst-justering-mitten .blk-citat blockquote{ margin-inline:auto; }
.sst-justering-mitten .ctas{ justify-content:center; }
.sst-bredd-smal .wrap{ max-width:860px; }
.sst-bredd-bred .wrap{ max-width:1440px; }

/* ===== Egna sidor: block ===== */
.blk-hero{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; }
.blk-hero.utan-bild{ grid-template-columns:minmax(0,1fr); }
.blk-hero > img, .blk-fig img{ width:100%; height:auto; border-radius:var(--r); border:1px solid var(--bd); }
.blk-hero-bild{ display:grid; place-items:center; aspect-ratio:5/4; padding:clamp(24px,4vw,48px); border-radius:calc(var(--r) + 6px); border:1px solid var(--bd); background:radial-gradient(120% 110% at 25% 15%, #FFFFFF 0%, #EEF5F9 55%, #DDEBF2 100%); }
.blk-hero-bild img{ width:auto; height:auto; max-width:min(100%,250px); max-height:230px; filter:drop-shadow(0 18px 28px rgba(16,42,67,.16)); }
@media (max-width:900px){ .blk-hero-bild{ aspect-ratio:auto; padding:22px; } .blk-hero-bild img{ max-height:130px; } }
.blk-pris{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin:18px 0 0; }
.blk-pris b{ font:800 clamp(22px,2.2vw,27px) var(--rubrik,'Schibsted Grotesk',sans-serif); color:var(--rubrikfarg); }
.blk-pris small{ color:var(--dim); font-size:15px; }
.blk-avslut{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 32px; padding:clamp(22px,3vw,32px) clamp(22px,3.5vw,40px); border-radius:calc(var(--r) + 6px); background:linear-gradient(135deg,#173B5C 0%,#1F4E73 100%); color:#fff; box-shadow:0 18px 40px -24px rgba(16,42,67,.6); }
.blk-avslut h2{ color:#fff; font-size:clamp(1.4rem,2.4vw,1.9rem); }
.blk-avslut .blk-pris{ margin-top:6px; }
.blk-avslut .blk-pris b{ color:#fff; }
.blk-avslut .blk-pris small{ color:#C5D3DF; }
.blk-avslut .ctas{ margin:0; }
h1.blk-rubrik{ font-size:clamp(2.1rem,4.6vw,3.4rem); margin-top:10px; }
h2.blk-rubrik{ font-size:clamp(1.7rem,3.2vw,2.5rem); margin-top:10px; }
.blk-lead{ color:var(--dim); font-size:clamp(18px,1.6vw,20px); margin:14px 0 0; max-width:62ch; }
.eb .ctas{ margin-top:24px; }
.blk-text{ max-width:72ch; }
/* Wide screens: the heading in its own column beside the text, sticky while the text scrolls. A text without a heading
   keeps the empty column, so consecutive sections line up as one article. Centred sections keep one column. */
@media (min-width:900px){
  .blk-text{ max-width:none; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr); gap:clamp(32px,5vw,80px); align-items:start; }
  .blk-th{ position:sticky; top:calc(var(--hh, 72px) + 24px); }
  .blk-th:empty{ position:static; }
  .blk-th h2.blk-rubrik{ font-size:clamp(1.5rem,2.3vw,2rem); margin-top:6px; }
  .sst-justering-mitten .blk-text{ display:block; max-width:72ch; }
}
.blk-tb{ min-width:0; font-size:17.5px; line-height:1.7; }
.blk-th .blk-lead{ margin-top:12px; }
/* Text after text reads as one article: no rule between and no extra gap above. */
.eb-text:not([class*="sst-bakgrund"]) + .eb-text:not([class*="sst-bakgrund"]), .eb-text:not([class*="sst-bakgrund"]) + .eb-punkter:not([class*="sst-bakgrund"]), .eb-punkter:not([class*="sst-bakgrund"]) + .eb-text:not([class*="sst-bakgrund"]){ border-top:0; padding-top:clamp(8px,1.5vw,16px); }
.blk-text .blk-rubrik{ margin-bottom:16px; }
.blk-text p, .blk-kt p{ margin:0 0 14px; }
.blk-text p:last-child, .blk-kt p:last-child{ margin-bottom:0; }
.blk-ul{ margin:0 0 14px; padding-left:22px; }
.blk-text a, .blk-kt a, .blk-list a{ color:var(--klar); }
.blk-fig{ margin:0; }
.blk-fig figcaption{ color:var(--faint); font-size:14px; margin-top:10px; }
.blk-grid{ display:grid; gap:18px; grid-template-columns:repeat(var(--kol,3),minmax(0,1fr)); }
@media (max-width:900px){ .blk-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .blk-hero{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:600px){ .blk-grid{ grid-template-columns:minmax(0,1fr); } }
.blk-kort{ padding:22px; display:flex; flex-direction:column; gap:10px; min-width:0; }
.blk-kort h3{ font-size:1.25rem; }
.blk-kort .blk-kt{ color:var(--dim); }
.blk-kort img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-sm); }
.blk-kort .more{ margin-top:auto; color:var(--klar); font-weight:700; text-decoration:none; }
.blk-list{ list-style:none; padding:0; margin:0; display:grid; gap:12px 28px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.blk-list li{ position:relative; padding-left:30px; }
.blk-list li::before{ content:"✓"; position:absolute; left:0; color:var(--turkos); font-weight:800; }
.blk-citat{ margin:0; }
.blk-citat blockquote{ margin:0; max-width:40ch; font:700 clamp(1.3rem,2.4vw,1.8rem)/1.35 var(--rubrik,'Schibsted Grotesk',sans-serif); color:var(--rubrikfarg); }
.blk-citat figcaption{ margin-top:16px; color:var(--dim); }
.blk-siffror{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.blk-siffror b{ display:block; font:800 clamp(1.9rem,3.6vw,2.7rem)/1 var(--rubrik,'Schibsted Grotesk',sans-serif); color:var(--rubrikfarg); margin-bottom:8px; }
.blk-siffror span{ color:var(--dim); }
.blk-fb{ margin:12px 0 0; font-size:18px; color:#C5D3DF; }
.eb .fbox h2{ font-size:clamp(1.7rem,3.2vw,2.5rem); }
/* Egna sidor: blocken följer tätt på varandra, sidhuvudet (rubrikblocket) får luft och en linje under. */
#egen .sec.eb{ border-top:0; padding-block:clamp(22px,3vw,36px); }
#egen .sec.eb-rubrik{ padding-block:clamp(40px,6vw,72px) clamp(28px,4vw,44px); border-bottom:1px solid var(--bd); margin-bottom:clamp(12px,2vw,24px); }
#egen .sec.eb:last-child{ padding-bottom:clamp(56px,7vw,96px); }
#egen .eb-text h2.blk-rubrik{ font-size:clamp(1.4rem,2.4vw,1.8rem); }
#egen .eb-avsnitt .sec{ border-top:0; }
.blk-form{ max-width:none; padding:clamp(20px,3vw,32px); display:grid; gap:16px; }
/* Short fields in pairs on a wide form: postcode and town, phone and e-mail, company and its number, first and last name. */
@media (min-width:700px){
  .blk-form{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:16px; }
  .blk-form > *{ grid-column:1 / -1; }
  .blk-form > .ff-postnummer, .blk-form > .ff-ort, .blk-form > .ff-telefon, .blk-form > .ff-epost, .blk-form > .ff-foretag, .blk-form > .ff-orgnr,
  .blk-form > .ff-efternamn, .blk-form[data-formular="nyckelbricka"] > .ff-namn{ grid-column:auto; }
}
.blk-formlayout .blk-tb{ font-size:inherit; line-height:inherit; }
.blk-form .nb-fel:empty{ display:none; }
.blk-formlayout .blk-form > .btn{ justify-self:start; min-width:200px; }
.form-ring{ margin:22px 0 0; padding-top:18px; border-top:1px solid var(--bd); color:var(--dim); font-size:15.5px; }
.form-ring a{ display:block; margin-top:4px; font:800 22px var(--rubrik,'Schibsted Grotesk',sans-serif); color:var(--rubrikfarg); text-decoration:none; }
.form-ring a:hover{ color:var(--klar); }
.form-ring small{ display:block; margin-top:4px; font-size:14px; color:var(--faint); }
.blk-form label{ display:block; font-weight:700; font-size:15px; margin-bottom:6px; }
.blk-form .valfri{ font-weight:400; color:var(--faint); }
.blk-form input, .blk-form select, .blk-form textarea{ width:100%; min-height:48px; border:1.5px solid var(--bd2); border-radius:var(--r-sm); padding:10px 14px; font:500 16px var(--sans); background:#fff; color:var(--fg); }
.blk-form textarea{ resize:vertical; min-height:120px; }
/* Cloudflare's check: takes no room until the widget is drawn (the check is off locally and on the test site). */
.blk-form .manniska:empty{ display:none; }
.blk-form input:focus, .blk-form select:focus, .blk-form textarea:focus{ border-color:var(--klar); box-shadow:0 0 0 3px var(--klar-ljus); }
.blk-form [data-pris]{ margin:6px 0 0; }
.blk-form [data-pris]:empty{ display:none; }
.blk-form .blk-check{ display:grid; grid-template-columns:22px 1fr; align-items:start; gap:6px 10px; }
.blk-form .blk-check input{ width:22px; height:22px; min-height:0; padding:0; margin:1px 0 0; accent-color:var(--klar); }
.blk-form .blk-check label{ margin:0; font-weight:600; }
.blk-form .blk-check a{ grid-column:2; }
.blk-form .btn{ justify-self:start; }
.blk-form .tack{ color:var(--turkos); font-weight:700; font-size:18px; margin:0; }
.blankett .btn{ justify-self:start; align-self:flex-start; }

/* Så går det till: sex steg i tre kolumner */
.steg4.tre{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1039px){ .steg4.tre{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .steg4.tre{ grid-template-columns:1fr; } }

/* Bekräftelsen efter bokning */
.bokad{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:24px; align-items:start; animation:lageIn .4s var(--ease); }
.bokad-kort{ display:grid; grid-template-columns:auto 1fr; gap:14px 16px; align-items:center; padding:24px; border-radius:var(--r); background:var(--turkos-ljus); border:1px solid #B7DFD7; }
.bokad-kort img{ width:72px; height:90px; object-fit:cover; border-radius:var(--r-sm); }
.bokad-kort b{ display:block; font-size:19px; color:var(--rubrikfarg); }
.bokad-kort div span{ display:block; opacity:.75; font-size:14px; }
.bokad-kort ul{ grid-column:1/-1; list-style:none; margin:0; padding:0; display:grid; gap:6px; font-weight:600; }
.bokad-kort li{ display:flex; align-items:center; gap:8px; }
.bokad-kort .btn{ grid-column:1/-1; justify-self:start; }
.bokad-info h3{ margin:0 0 12px; }
.kal-knappar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.bokad-info p{ margin:6px 0 0; }
#bokadH:focus{ outline:none; }
@media (max-width:760px){ .bokad{ grid-template-columns:1fr; } .kal-knappar .btn{ flex:1 1 100%; } }

/* Tidsväljaren i bokningen */
.kal{ display:grid; gap:10px; }
.kal-topp{ display:flex; align-items:center; justify-content:space-between; }
.kal-rub{ font-weight:700; font-size:15px; }
.kal-pilar{ display:flex; gap:6px; }
.kal-pil{ width:36px; height:36px; border-radius:50%; border:1.5px solid var(--bd2); background:#fff; font:700 20px/1 var(--sans); color:var(--fg); cursor:pointer; transition:border-color .15s, background .15s; }
.kal-pil:hover{ border-color:var(--klar); background:var(--klar-ljus); }
.kal-dagar{ display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:2px 2px 6px; -webkit-overflow-scrolling:touch; }
.kal-dagar::-webkit-scrollbar{ display:none; }
.kal-dag{ flex:0 0 auto; width:68px; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 0; border-radius:var(--r-sm); border:1.5px solid var(--bd2); background:#fff; color:var(--fg); cursor:pointer; font:500 13px var(--sans); text-transform:capitalize; transition:border-color .15s, background .15s, color .15s, transform .15s; }
.kal-dag b{ font-size:22px; line-height:1.1; }
.kal-dag:hover{ border-color:var(--klar); transform:translateY(-1px); }
.kal-dag[aria-checked="true"]{ background:var(--klar); border-color:var(--klar); color:#fff; }
.kal-tider{ display:grid; gap:12px; }
.kal-grupp > span{ display:block; font-size:13px; opacity:.7; margin-bottom:6px; }
.kal-grupp > div{ display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:8px; }
.kal-tid{ min-height:44px; border-radius:var(--r-sm); border:1.5px solid var(--bd2); background:#fff; color:var(--fg); font:700 15px var(--mono); cursor:pointer; transition:border-color .15s, background .15s, color .15s; }
.kal-tid:hover{ border-color:var(--klar); background:var(--klar-ljus); }
.kal-tid[aria-checked="true"]{ background:var(--klar); border-color:var(--klar); color:#fff; }
.kal-dag:focus-visible, .kal-tid:focus-visible, .kal-pil:focus-visible{ outline:3px solid var(--klar-ljus); outline-offset:2px; }
.kal-info{ margin:0; padding:12px 0; opacity:.8; }

/* Sidans text i HTML:en för sökmotorer och AI-läsare (tas bort av skriptet; syns aldrig för besökare). */
.forrender{ display:none; }

/* Avvikande öppettider: bara för Kundtjänst, hopfällda i Kundtjänsts ruta */
.avvikande{ margin-top:12px; font-size:14px; }
.avvikande summary{ cursor:pointer; font-weight:700; color:var(--klar,#176B87); }
.avvikande ul{ margin:8px 0 0; padding:0; list-style:none; color:var(--dim); line-height:1.65; max-height:260px; overflow:auto; }

/* Kort med loggor (Partners): hela loggan syns, på vit botten */
.loggor .blk-kort img{ aspect-ratio:3/1; object-fit:contain; background:#fff; }
.blk-bildlank{ display:block; border-radius:var(--r-sm); }

/* Tjänsterna: länk till tjänstens egen sida */
.pc-mer{ display:inline-block; margin-top:10px; font-weight:700; color:var(--klar,#176B87); text-underline-offset:3px; }
.pr-bild{ float:right; width:110px; max-height:150px; object-fit:contain; margin:0 0 10px 16px; }
@media (max-width:520px){ .pr-bild{ width:80px; } }
.blk-hero > img{ max-height:340px; object-fit:contain; background:#fff; }
.loggor .blk-kort img{ max-height:220px; }

/* ===== Säkerhetsnytt (the blog moved from the old keycode.se) ===== */
.blogg-wrap{ max-width:820px; }
.blogg-brod{ display:flex; flex-wrap:wrap; gap:8px; font-size:14.5px; color:var(--dim); margin-bottom:18px; }
.blogg-brod a{ color:var(--klar); }
.blogg-meta{ display:block; font:700 13px/1.4 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:var(--klar); }
.blogg-artikel h1{ font-size:clamp(2rem,4vw,3rem); margin:10px 0 24px; }
.blogg-bild{ margin:0 0 30px; }
.blogg-bild img{ width:100%; height:auto; border-radius:var(--r); border:1px solid var(--bd); }
.blogg-text{ font-size:18px; line-height:1.7; }
.blogg-text h2{ font-size:clamp(1.4rem,2.6vw,1.8rem); margin:36px 0 12px; }
.blogg-text h3{ font-size:1.25rem; margin:28px 0 10px; }
.blogg-text p, .blogg-text ul, .blogg-text ol{ margin:0 0 16px; }
.blogg-text ul, .blogg-text ol{ padding-left:24px; }
.blogg-text li{ margin-bottom:6px; }
.blogg-text blockquote{ margin:24px 0; padding:4px 0 4px 20px; border-left:4px solid var(--amb); color:var(--rubrikfarg); font-style:italic; }
.blogg-text figure{ margin:24px 0; }
.blogg-text figure img{ width:100%; height:auto; border-radius:var(--r-sm); }
.blogg-text a{ color:var(--klar); }
.blogg-ingress{ font-size:clamp(19px,1.8vw,21px); line-height:1.6; color:var(--rubrikfarg); font-weight:500; }
.blogg-cta{ margin:44px 0 0; padding:26px; background:var(--klar-ljus); border-color:transparent; }
.blogg-cta h2{ font-size:1.4rem; margin:0 0 8px; }
.blogg-cta p{ margin:0 0 16px; color:var(--dim); }
.blogg-fler{ margin-top:56px; }
.blogg-fler h2{ font-size:1.6rem; margin-bottom:18px; }
.blogg-grid{ display:grid; gap:20px; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); }
.blogg-kort{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--bd); border-radius:var(--r); overflow:hidden; text-decoration:none; color:inherit; box-shadow:var(--skugga); transition:border-color .15s, transform .15s; }
.blogg-kort:hover{ border-color:var(--klar); transform:translateY(-2px); }
.blogg-kort:focus-visible{ outline:3px solid var(--klar); outline-offset:2px; }
.blogg-kort img, .blogg-kort-tom{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--bg3); }
.blogg-kort-text{ display:flex; flex-direction:column; gap:8px; padding:18px 20px 22px; }
.blogg-kort b{ font:800 1.12rem/1.3 var(--rubrik,'Schibsted Grotesk','Hanken Grotesk',system-ui,sans-serif); color:var(--rubrikfarg); }
.blogg-kort-ingress{ color:var(--dim); font-size:15.5px; line-height:1.55; }
.blogg-filter{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
.blogg-filter button{ min-height:42px; padding:0 18px; border-radius:99px; border:1px solid var(--bd2); background:#fff; color:var(--fg); font-weight:700; cursor:pointer; }
.blogg-filter button[aria-pressed="true"]{ background:var(--mork); border-color:var(--mork); color:#fff; }
@media (prefers-reduced-motion:reduce){ .blogg-kort{ transition:none; } .blogg-kort:hover{ transform:none; } }

/* ===== Premium layer (2026-10-23). Softer depth, rounder shapes, calmer rules and crisper buttons, on top of the rules
   above, so the editor's theme colours (--amb, --danger, --ok) still apply. ===== */
:root{
  --r-sm:12px; --r:16px; --r-lg:20px;
  --bd:#DDE5EC;
  --skugga:0 1px 2px rgba(16,42,67,.04), 0 4px 14px -6px rgba(16,42,67,.10);
  --skugga-lyft:0 2px 4px rgba(16,42,67,.05), 0 20px 40px -16px rgba(16,42,67,.24);
}
body{ line-height:1.65; text-rendering:optimizeLegibility; }
h1,h2,h3{ letter-spacing:-.025em; }
.blk-pris b, .pr2 b, .fakta b, .ak b, .form-ring a{ font-variant-numeric:tabular-nums; }

/* Buttons: the orange one carries a soft glow and lifts a pixel under the pointer. */
.btn{ border-radius:12px; border-width:1.5px; letter-spacing:-.005em; }
.btn:not(.ghost):not(.dark){ box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(16,42,67,.14), 0 8px 18px -10px rgba(242,140,40,.85); }
@media (hover:hover){
  .btn:hover{ transform:translateY(-1px); }
  .btn:not(.ghost):not(.dark):hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 2px 4px rgba(16,42,67,.14), 0 14px 26px -12px rgba(242,140,40,.95); }
}
.btn:active{ transform:none; }

/* Cards: one border colour and one shadow everywhere; what can be clicked rises under the pointer. */
.panel, .pc2, .blk-kort{ border-color:var(--bd); }
@media (hover:hover){ .pc2:hover, a.panel:hover, .cc:hover, .mini:hover{ box-shadow:var(--skugga-lyft); } }
.blk-kort{ padding:clamp(18px,2.2vw,24px); }
.blk-kort h3{ font-size:clamp(17px,1.5vw,19px); margin-bottom:8px; }

/* Sections: a lighter rule between them. */
.sec{ border-top-color:#EAEFF4; }

/* Header: a shadow once the page scrolls (site.js sets .skrollad). */
.hd{ transition:box-shadow .2s var(--ease); }
.skrollad .hd{ box-shadow:0 10px 30px -14px rgba(5,20,35,.6); }

/* Footer: small capitals for the column headings, more air between the links. */
.fg h3{ font:700 12.5px var(--sans); letter-spacing:.09em; text-transform:uppercase; color:#9FB2C3; margin-bottom:14px; }
.fg ul{ gap:9px; }
.ft a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* ===== Visual sweep (2026-10-23): findings of a page-by-page review at 1440 and 390 px. ===== */
/* FAQ: an open answer keeps its distance from the card's bottom edge. */
.qs details > .blk-kt{ padding-bottom:18px; }
/* Forms on a phone: the phone number above the form card gets air. */
@media (max-width:899px){ .blk-formlayout .blk-th{ margin-bottom:18px; } }
/* A heading without text of its own introduces what follows: it spans the width instead of leaving an empty column. */
.blk-text:has(> .blk-tb:empty){ display:block; }
.blk-text:has(> .blk-tb:empty) .blk-th{ position:static; }
/* The closing order block: no deep shadow cut off by the next section, and the button close to the price on a phone. */
.blk-avslut{ box-shadow:0 12px 28px -20px rgba(16,42,67,.55); }
@media (max-width:640px){ .blk-avslut{ gap:14px; } .blk-avslut .ctas, .blk-avslut .btn{ width:100%; } }
/* Hero images: only the drawn icons are kept small; a photo or a picture fills its frame. */
.blk-hero-bild img:not([src*="/ikon-"]){ max-width:100%; max-height:320px; filter:none; border-radius:10px; }
/* Partner logos: the same visual height whatever the file's proportions. */
.loggor .blk-kort img{ aspect-ratio:auto; height:64px; width:auto; max-width:80%; margin:6px auto 18px; object-fit:contain; background:none; }
/* Blog: an order button in a post keeps the button colours, and "Fler inlägg" shows its three posts in one row. */
.blogg-artikel a.btn, .blogg-artikel a.btn:hover{ color:var(--ink); text-decoration:none; }
@media (min-width:900px){ .blogg-fler .blogg-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* Booking on the start page: empty helper elements leave no gap before the button. */
#bExtra:empty, #bManniska:empty, #bFel:empty{ display:none; }
/* Touch screens have no J and N keys to press. */
@media (hover:none){ .qa kbd{ display:none; } }
#gSvg text{ font-family:var(--sans); }
.lg .term .tbar{ font-family:var(--sans); }
/* Opening hours that differ: a real control instead of the browser's small triangle. */
details.avvikande summary{ display:inline-flex; align-items:center; gap:8px; min-height:44px; cursor:pointer; font-weight:700; color:var(--klar); list-style:none; }
details.avvikande summary::-webkit-details-marker{ display:none; }
details.avvikande summary::after{ content:"+"; font-weight:800; }
details.avvikande[open] summary::after{ content:"−"; }
/* Footer links at the bottom: a comfortable tap target. */
.fb2 a, .fb2 button{ display:inline-flex; align-items:center; min-height:32px; }
/* Narrow phones: stat and step grids in one column instead of words broken over lines. */
@media (max-width:420px){ .nums, .steg4, .blk-grid{ grid-template-columns:minmax(0,1fr) !important; } }

/* ===== Last details (2026-10-23) ===== */
/* Cards with only a picture (the key tags) show it as a photo, not at logo height. */
.loggor .blk-kort:not(:has(.blk-kt)) img{ height:auto; max-height:200px; max-width:60%; margin:8px auto; }
/* A photo in a page's hero stays a photo on a phone; only the drawn icons are kept small there. */
@media (max-width:900px){ .blk-hero-bild img:not([src*="/ikon-"]){ max-height:220px; } }
/* "villkor i korthet" starts with a capital where it stands alone or opens the line. */
.villkor-rubrik{ display:block; font-size:14px; }
.villkor-rubrik::first-letter, .villkor b::first-letter{ text-transform:uppercase; }
.villkor b{ display:inline-block; }
/* The example label on the Bevakning page like the site's other labels. */
.kb-forh .exempel{ background:#E6F1F5; color:#176B87; }
/* The day strip in the booking scrolls sideways: a soft fade at its right edge instead of a card cut in half. */
.kal-dagar{ -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent); padding-right:40px; }

/* The Key Code Bevakning app (site.js S.bevApp): the text and a list on the left, the phone on the right. */
.app-g{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:56px; align-items:center; }
.app-text .sh{ margin-bottom:0; } .app-text .sh p{ max-width:560px; }
.app-punkter{ list-style:none; display:grid; gap:14px; margin:26px 0 24px; padding:0; max-width:560px; }
.app-punkter li{ display:grid; gap:2px; padding-left:16px; border-left:3px solid var(--klar); }
.app-punkter b{ font-weight:650; color:var(--rubrikfarg); }
.app-punkter span{ color:var(--dim); font-size:15px; }
.app-status{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 8px; max-width:560px; margin:0; color:var(--dim); font-size:15px; }
.app-status b{ color:var(--rubrikfarg); }
.app-prick{ width:8px; height:8px; border-radius:50%; background:var(--amb); align-self:center; }
.app-not{ margin:10px 0 0; font-size:13px; color:var(--faint); }
/* The phones are iframes of /appvy; the phone inside scales to whatever size the frame gets. */
.app-tel{ margin:0; text-align:center; }
.app-tel iframe{ display:block; width:330px; height:667px; margin-inline:auto; border:0; background:transparent; }
.app-tel figcaption{ margin:8px auto 0; font-size:15px; color:var(--dim); max-width:30ch; }
@media (max-width:900px){ .app-g{ grid-template-columns:minmax(0,1fr); gap:32px; } .app-tel iframe{ width:min(310px,82vw); height:calc((min(310px,82vw) - 24px) * 2.1007 + 24px); } }

/* ===== A more mature look (Philip 2026-10-27: "mogen och vuxen", for grown-ups and business owners). Calmer type,
   labels in sentence case instead of tracked capitals, squarer controls, one-colour headlines, quiet links in place
   of pills, and a meter without a glow. Later rules win, so this layer sits last. ===== */
:root{ --r-sm:8px; --r:12px; --r-lg:14px; }
h1,h2,h3,h4{ font-weight:700; letter-spacing:-.015em; line-height:1.15; }
h3,h4{ font-weight:650; }
.eyebrow{ font:600 14px/1.3 var(--sans); letter-spacing:.01em; text-transform:none; color:var(--dim); }
.hero .eyebrow, .ft .eyebrow{ color:#B9CCD9; }
.hero h1 em{ color:#fff; font-weight:500; }
.btn{ font-weight:600; letter-spacing:0; box-shadow:none; }
.btn:hover{ transform:none; }
.hchips{ gap:4px 18px; margin-top:20px; }
.hchips a,.hchips button{ border:0; border-radius:0; padding:2px 0; color:#C9D8E3; font:500 15px var(--sans); text-decoration:underline; text-decoration-color:rgba(201,216,227,.4); text-underline-offset:4px; }
.hchips a:hover,.hchips button:hover{ color:#fff; text-decoration-color:#fff; }
.qa kbd{ display:none; }
.chip{ border-radius:4px; font-weight:600; }

/* Login button in the content: deep blue with a light sweep on hover. It opens the login in the header (site.js,
   visaInloggning), where the page dims behind the header and the menu lands with a short spring and a glow. */
.btn-bankid{ position:relative; overflow:hidden; isolation:isolate; gap:10px; padding:0 18px 0 10px; background:linear-gradient(135deg,var(--navy2),var(--navy3)); border-color:transparent; color:#fff; box-shadow:0 10px 24px rgba(16,42,67,.22); transition:transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s; }
.btn-bankid:hover,.btn-bankid:focus-visible{ background:linear-gradient(135deg,var(--navy),var(--navy3)); border-color:transparent; color:#fff; transform:translateY(-1px); box-shadow:0 16px 34px rgba(16,42,67,.3); }
.btn-bankid::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%); transform:translateX(-120%); transition:transform .8s var(--ease); }
.btn-bankid:hover::after,.btn-bankid:focus-visible::after{ transform:translateX(120%); }
.bid-ikon{ display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.bid-ikon svg{ width:17px; height:17px; }
.bid-pil{ display:inline-flex; transition:transform .2s var(--ease); }
.bid-pil svg{ width:16px; height:16px; }
.btn-bankid:hover .bid-pil,.btn-bankid:focus-visible .bid-pil{ transform:translateX(3px); }
.blk-kort .btn-bankid{ margin-top:16px; min-height:46px; font-size:15.5px; }
.login-dim{ position:fixed; inset:0; z-index:90; background:rgba(10,24,38,.42); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.login-dim.on{ opacity:1; pointer-events:auto; }
.pn.spot{ animation:pnSpot .7s var(--spring) both; box-shadow:0 0 0 2px var(--amb),0 28px 70px rgba(0,0,0,.5); }
.pn.spot > a:first-of-type{ animation:spotGlow 1.4s var(--ease) .35s 2; }
@keyframes pnSpot{ 0%{ opacity:0; transform:translateY(-12px) scale(.94); } 100%{ opacity:1; transform:none; } }
@keyframes spotGlow{ 0%,100%{ box-shadow:0 0 0 0 rgba(242,140,40,0); background:transparent; } 45%{ box-shadow:0 0 0 5px rgba(242,140,40,.32); background:#24527A; } }
@media (prefers-reduced-motion:reduce){ .pn.spot,.pn.spot > a:first-of-type{ animation:none; } .btn-bankid,.btn-bankid::after,.bid-pil,.login-dim{ transition:none; } }