/*
Theme Name: Skillnad
Theme URI: https://xn--ktenskapsskillnad-pqb.se/
Author: Consilex
Description: Eget tema for aktenskapsskillnad.se. Fyra hardkodade sidmallar och ett smalt blockbibliotek. Navigering efter var i processen besokaren ar. Designriktning Ro (CL2026-09-05): varm neutral grund, dampad indigo, Fraunces och Karla. 0.7.2: en atgard i stallet for knappar i par, pillren som fyllda block med knappradien, och ingress i blocklistan. Palett: Ro.
Version: 0.7.3
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: skillnad
*/

/* ============================================================
   1. Designtokens  (se designriktning, CL2026-09-03)
   ============================================================ */
:root{
  --paper:#F7F5F1; --surface:#FFFFFF; --raised:#FFFFFF;
  /* Designriktning Ro (CL2026-09-05). Varm neutral grund, dampad indigo.
     Detta ar sajtens palett; inga andra kulorer infors utan beslut. */
  --ink:#231F1A; --body:#4E483F; --muted:#756D60;
  --line:#E2DCD2; --line-strong:#CDC5B8;
  --accent:#3D4E7C; --accent-hover:#33426A; --accent-ink:#33426A;
  --accent-soft:#E5E8F1; --on-accent:#FBFAF8;
  --signal:#B0736B; --signal-soft:#F2E4E1; --signal-ink:#8F564F;
  --foot-bg:#2B3350; --foot-fg:#B8BECF; --foot-head:#F5F3EF; --foot-line:#3E4669;
  --shadow-sm:0 1px 3px rgba(35,31,26,.06);
  --shadow:0 2px 4px rgba(35,31,26,.04),0 18px 34px -26px rgba(35,31,26,.55);
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Karla","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",Consolas,monospace;
  --wrap:1140px; --sido:340px; --sido-gap:52px;
  /* Knappradien. Pillren delade den inte i 0.7.0 och satte 2px pa egen hand. */
  --radie-knapp:6px;
  /* Typskala. Fore 0.6.0 fanns 76 font-size-deklarationer med 35 olika varden,
     varav fjorton lag mellan 12,9 och 16,8 px. Skillnader pa brakdelar av en
     pixel laser sig inte som hierarki utan som slarv. Nu finns fem fasta steg
     plus tva rubrikstorlekar, och ingenting utanfor listan. */
  --t-xs:.75rem; --t-sm:.875rem; --t-base:1rem; --t-md:1.125rem; --t-lg:1.375rem;
  --t-h2:clamp(1.4rem,2.6vw,1.9rem); --t-h1:clamp(1.9rem,4.2vw,2.8rem);
  /* Gemensam textbredd. Varje block som forr hade ett eget ch-tak refererar hit,
     sa att inget block kan drifta ivag pa egen hand. Tvakolumnslayouten satter
     om den till 100% eftersom kolumnen da ar mattet. */
  --measure:74ch;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#171614; --surface:#1F1D1A; --raised:#26241F;
    --ink:#EFEBE4; --body:#CDC6BB; --muted:#948C7F;
    --line:#302D28; --line-strong:#413D36;
    --accent:#93A4D6; --accent-hover:#AFBCE4; --accent-ink:#AFBCE4;
    --accent-soft:#252A3A; --on-accent:#141721;
    --signal:#D9A099; --signal-soft:#33231F; --signal-ink:#E6B7B0;
    --foot-bg:#14161F; --foot-fg:#A8AEBE; --foot-head:#EFEBE4; --foot-line:#242838;
    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow:0 2px 4px rgba(0,0,0,.4),0 18px 34px -26px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --paper:#171614; --surface:#1F1D1A; --raised:#26241F;
  --ink:#EFEBE4; --body:#CDC6BB; --muted:#948C7F;
  --line:#302D28; --line-strong:#413D36;
  --accent:#93A4D6; --accent-hover:#AFBCE4; --accent-ink:#AFBCE4;
  --accent-soft:#252A3A; --on-accent:#141721;
  --signal:#D9A099; --signal-soft:#33231F; --signal-ink:#E6B7B0;
  --foot-bg:#14161F; --foot-fg:#A8AEBE; --foot-head:#EFEBE4; --foot-line:#242838;
}

/* ============================================================
   2. Grund
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--sans);
  font-size:var(--t-base);line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 30px}
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);margin:0;text-wrap:balance;
  font-optical-sizing:auto}
h1{font-size:var(--t-h1);font-weight:500;line-height:1.1;letter-spacing:-.012em}
h2{font-size:var(--t-h2);font-weight:500;line-height:1.2;letter-spacing:-.008em}
h3{font-size:var(--t-md);font-weight:600;line-height:1.3}
h4{font-family:var(--sans);font-size:var(--t-base);font-weight:600;color:var(--ink)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:var(--accent-ink)}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.num,.tabular{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:6px}
.eyebrow{
  color:var(--signal-ink);}
.entry p{max-width:var(--measure)}
.entry ul,.entry ol{max-width:var(--measure);line-height:1.65}

/* ============================================================
   3. Knappar
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:var(--t-sm);
  font-weight:600;padding:12px 20px;border-radius:var(--radie-knapp);text-decoration:none;border:1px solid transparent;
  cursor:pointer;transition:background .15s,border-color .15s,transform .15s;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn-sm{padding:9px 15px;font-size:var(--t-sm)}
.arw{transition:transform .18s}
.btn:hover .arw{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ============================================================
   4. Sidhuvud och sidfot
   ============================================================ */
.site-header{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(10px)}
.site-header .wrap{display:flex;align-items:center;gap:26px;height:70px}
.brand{font-family:var(--display);font-size:var(--t-md);font-weight:600;color:var(--ink);
  text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.brand em{font-style:normal;color:var(--accent)}
.nav-main{margin-left:auto}
.nav-main ul{list-style:none;margin:0;padding:0;display:flex;gap:22px;overflow-x:auto;scrollbar-width:none}
.nav-main ul::-webkit-scrollbar{display:none}
.nav-main a{font-size:var(--t-sm);color:var(--body);text-decoration:none;white-space:nowrap;
  padding:6px 0;border-bottom:2px solid transparent;display:block}
.nav-main a:hover,.nav-main .current-menu-item>a{color:var(--ink);border-bottom-color:var(--accent)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line-strong);
  border-radius:6px;padding:9px 13px;font-family:var(--sans);font-weight:600;color:var(--ink);cursor:pointer}

.site-footer{background:var(--foot-bg);color:var(--foot-fg);padding:52px 0 32px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:30px}
.site-footer h4{
  color:var(--foot-head);margin:0 0 13px;}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-footer a{color:var(--foot-fg);text-decoration:none;font-size:var(--t-sm)}
.site-footer a:hover{color:var(--foot-head);text-decoration:underline}
.fbot{margin-top:34px;padding-top:20px;border-top:1px solid var(--foot-line);
  font-size:var(--t-sm);opacity:.82;line-height:1.55}

/* ============================================================
   5. Brodsmulor och kompaktraden (processkomponent, litet lage)
   ============================================================ */
.crumbs{padding-top:22px;font-family:var(--mono);font-size:var(--t-xs);color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent-ink)}
.statebar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 15px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0 7px 7px 0;
  padding:11px 16px;margin:14px 0 26px}
.statebar .k{color:var(--muted)}
.statebar .v{font-weight:600;color:var(--ink);font-size:var(--t-sm)}
.statebar .sep{color:var(--line-strong)}
.statebar .swap{font-size:var(--t-sm);margin-left:auto}

/* ============================================================
   6. Processkomponenten, fullt lage
   ============================================================ */
.proc{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);overflow:hidden;margin:0 0 36px}
.proc-head{padding:18px 24px 16px;border-bottom:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.proc-head h3{font-family:var(--sans);font-size:var(--t-base)}
.proc-head .hint{font-size:var(--t-sm);color:var(--muted)}
.proc-steps{display:grid;grid-template-columns:repeat(5,1fr)}
.proc-step{appearance:none;background:transparent;border:0;border-right:1px solid var(--line);
  padding:16px 16px 19px;text-align:left;cursor:pointer;font-family:var(--sans);color:var(--muted);
  display:flex;flex-direction:column;gap:8px;transition:background .15s}
.proc-step:last-child{border-right:0}
.proc-step:hover{background:var(--paper)}
.proc-step .rail{height:3px;width:100%;border-radius:2px;background:var(--line)}
.proc-step .k{}
.proc-step .nm{font-size:var(--t-base);font-weight:600;color:var(--ink);line-height:1.22}
.proc-step .d{font-size:var(--t-xs);line-height:1.3}
.proc-step[aria-selected="true"]{background:var(--accent-soft)}
.proc-step[aria-selected="true"] .rail{background:var(--accent)}
.proc-step[aria-selected="true"] .k{color:var(--accent-ink)}
.proc-step.done .rail{background:var(--line-strong)}
.proc-body{padding:24px;background:var(--paper);border-top:1px solid var(--line);display:grid;gap:15px}
.proc-body .next{font-size:var(--t-base);line-height:1.6;max-width:var(--measure)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
/* 0.7.x: pillren var runda, omattade och lika varandra — samma anonyma form
   som pa varje genererad sajt. Nu fylld accent med texten vand ur fargen,
   och samma hornradie som knapparna via --radie-knapp. */
.chip-link{font-size:var(--t-sm);font-weight:600;color:var(--on-accent);text-decoration:none;
  background:var(--accent);border:0;padding:9px 15px;border-radius:var(--radie-knapp);
  display:inline-block;line-height:1.3;transition:background .15s}
.chip-link:hover{background:var(--ink)}

/* ============================================================
   7. Blockbiblioteket
   ============================================================ */
/* Fristflagga (massing, max en per sida) */
.blk-flagga{border-left:2px solid var(--signal);padding:2px 0 2px 18px;font-size:var(--t-sm);line-height:1.6;max-width:var(--measure);margin:0 0 30px}
.blk-flagga b{color:var(--ink)}

/* Verktygskort */
.blk-verktyg{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:0 0 34px}
.vk{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:24px;
  display:flex;flex-direction:column;gap:11px;text-decoration:none;color:inherit;
  transition:border-color .15s,transform .15s,box-shadow .15s}
.vk:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.vk .tag{
  color:var(--accent);align-self:flex-start;background:var(--accent-soft);padding:3px 8px;border-radius:3px}
.vk p{font-size:var(--t-sm);line-height:1.5;margin:0}
.vk .go{margin-top:auto;padding-top:8px;font-size:var(--t-sm);font-weight:600;color:var(--accent-ink);
  display:flex;align-items:center;gap:7px}
.vk:hover .go .arw{transform:translateX(3px)}

/* Blocklista (0.6.0)

   0.5.0 gjorde varje post till ett kort. Det loste breddproblemet men gav en
   lista med sju lankar samma visuella tyngd som bokningserbjudandet — pa en
   sida fanns 41 ramade eller tonade ytor, varav ett tjugotal var de har korten.
   Nu ar posterna vanlig text i tva spalter med en tunn linje under varje.
   Bredden fylls anda, men ingenting konkurrerar med det som ska synas. */
.blk-lista{margin:0 0 38px}
.blk-lista > h2{margin-bottom:12px;scroll-margin-top:88px}
/* 0.7.0: plats for en verklig ingress mellan rubrik och lankar. Utan den
   blev varje avsnitt en rubrik foljd av en enda mening. */
.blk-lista > .ing{margin:0 0 22px;max-width:var(--measure);color:var(--body)}
.blk-lista ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 44px}
.blk-lista li{display:flex;border-bottom:1px solid var(--line)}
.blk-lista li[hidden]{display:none}
.blk-lista .lk{flex:1;display:flex;flex-direction:column;gap:3px;padding:14px 0;
  text-decoration:none;color:var(--ink)}
.blk-lista .lk b{font-size:var(--t-base);line-height:1.32}
.blk-lista .lk span{font-size:var(--t-sm);color:var(--muted);line-height:1.45}
.blk-lista .lk:hover b{color:var(--accent-ink)}
.blk-lista .lk:hover span{color:var(--body)}
.blk-lista li.mer-cell{grid-column:1/-1;border-bottom:0}
.blk-lista .mer{background:none;border:0;padding:14px 0 0;font-family:var(--sans);
  font-size:var(--t-sm);font-weight:600;color:var(--accent-ink);cursor:pointer;text-align:left}
.blk-lista .mer:hover{text-decoration:underline}

/* Rakneexempel */
.blk-exempel{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:22px 24px;max-width:var(--measure);margin:0 0 30px}
.blk-exempel h3{font-family:var(--sans);font-size:var(--t-base);margin-bottom:14px}
.blk-exempel .rad{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:var(--t-sm)}
.blk-exempel .rad .v{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.blk-exempel .rad.sub .l{padding-left:14px;color:var(--muted);font-size:var(--t-sm)}
.blk-exempel .rad.tot{border-bottom:0;border-top:1px solid var(--line-strong);margin-top:3px;
  padding-top:12px;font-weight:600;color:var(--ink)}

/* Jamforelsetabell */
.blk-jmf{overflow-x:auto;margin:0 0 32px;padding:4px}
.blk-jmf table{border-collapse:separate;border-spacing:0;width:100%;min-width:620px}
.blk-jmf th,.blk-jmf td{text-align:left;padding:15px 18px;font-size:var(--t-sm);line-height:1.5;
  vertical-align:top;border-bottom:1px solid var(--line)}
.blk-jmf thead th{border-bottom:1px solid var(--line-strong)}
.blk-jmf thead .lab{
  color:var(--muted);margin-bottom:5px}
.blk-jmf thead .nm{font-family:var(--display);font-size:var(--t-md);font-weight:600;color:var(--ink)}
.blk-jmf tbody th{
  color:var(--muted);width:150px}
.blk-jmf .mid{background:var(--surface);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.blk-jmf thead .mid{border-top:2px solid var(--accent);border-radius:8px 8px 0 0}
.blk-jmf tbody tr:last-child td,.blk-jmf tbody tr:last-child th{border-bottom:0}
.blk-jmf tbody tr:last-child .mid{border-radius:0 0 8px 8px;border-bottom:1px solid var(--line)}
.blk-jmf .pris{font-family:var(--display);font-size:var(--t-lg);color:var(--ink);font-weight:500;
  font-variant-numeric:tabular-nums}

/* Stegflode */
.blk-steg{display:grid;gap:0;margin:0 0 30px;max-width:var(--measure);counter-reset:steg}
.blk-steg .s{display:grid;grid-template-columns:38px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.blk-steg .s:last-child{border-bottom:0}
.blk-steg .s::before{counter-increment:steg;content:counter(steg);font-family:var(--mono);font-size:var(--t-sm);
  color:var(--accent-ink);background:var(--accent-soft);border-radius:50%;width:30px;height:30px;
  display:grid;place-items:center;font-weight:500}
.blk-steg .s b{display:block;color:var(--ink);font-size:var(--t-base);margin-bottom:3px}
.blk-steg .s span{font-size:var(--t-sm);line-height:1.5}

/* Priskort */
.blk-priser{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:0 0 30px}
.pk{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:20px;
  display:flex;flex-direction:column;gap:10px}
.pk .typ{color:var(--accent)}
.pk .belopp{font-family:var(--display);font-size:var(--t-lg);font-weight:500;color:var(--ink);
  line-height:1.1;font-variant-numeric:tabular-nums}
.pk .belopp small{font-family:var(--sans);font-size:var(--t-sm);font-weight:400;color:var(--muted)}
.pk dl{margin:0;display:grid;gap:7px;font-size:var(--t-sm);line-height:1.45}
.pk dt{color:var(--muted)}
.pk dd{margin:0}
.pk .tredje{margin-top:2px;padding-top:10px;border-top:1px dashed var(--line-strong);
  font-size:var(--t-sm);color:var(--muted);line-height:1.45}

/* Granskningsrad — varumärket som avsändare, aldrig en person */
.blk-granskad{border-top:1px solid var(--line);padding:18px 0 0;margin:38px 0 0;max-width:var(--measure)}
/* Utkastlaget (0.7.3). Ska ga att skanna nar man bladdrar genom sajten, sa att
   det syns hur langt genomgangen kommit — men inte skrika, eftersom sajten ar
   full av dem till att borja med. */
.blk-granskad.ej{border-top:2px solid var(--signal);background:var(--signal-soft);
  padding:14px 17px 15px;border-radius:0 0 var(--radie-knapp) var(--radie-knapp)}
.blk-granskad.ej .k,.blk-granskad.ej .v,.blk-granskad.ej .hur{color:var(--signal-ink)}
.blk-granskad.ej .v{font-weight:600}
.blk-granskad.ej code{font-family:var(--mono);font-size:.92em;
  background:var(--surface);padding:1px 5px;border-radius:3px;color:var(--ink)}
.blk-granskad .rad{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.blk-granskad .k{
  color:var(--muted)}
.blk-granskad .v{font-family:var(--mono);font-size:var(--t-sm);color:var(--ink);font-weight:500}
.blk-granskad .sep{color:var(--line-strong)}
.blk-granskad .av{font-weight:600;color:var(--ink);font-size:var(--t-sm)}
.blk-granskad .kallor{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:9px;
  font-size:var(--t-sm);color:var(--body);line-height:1.5}
.blk-granskad .kallor b{color:var(--ink);font-weight:600}
.blk-granskad .hur{margin:10px 0 0;font-size:var(--t-sm);color:var(--muted);line-height:1.5}

/* Loften — varumarkets forrtoendeblock */
.blk-loften{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:0 0 34px}
.lof{background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--accent);
  border-radius:0 0 10px 10px;padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.lof h4{color:var(--ink);font-size:var(--t-base)}
.lof p{font-size:var(--t-sm);line-height:1.55;margin:0;color:var(--body)}
.lof .neg{color:var(--muted)}

/* Pelaringangar */
.blk-pelare{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin:0 0 34px}
.pel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:24px;
  display:flex;flex-direction:column;gap:14px}
.pel .ill svg{width:96px;height:auto;color:var(--accent);display:block}
.pel .tint{fill:var(--accent-soft)}
.pel ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pel ul a{font-size:var(--t-sm);color:var(--body);text-decoration:none;display:flex;gap:9px;line-height:1.45}
.pel ul a::before{content:"\203A";color:var(--accent);font-weight:600}
.pel ul a:hover{color:var(--accent-ink)}
.pel .all{margin-top:auto;padding-top:6px;font-size:var(--t-sm);font-weight:600;
  color:var(--accent-ink);text-decoration:none}

/* CTA */
.blk-cta{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;margin:0 0 30px}
.blk-cta h3{font-family:var(--display);font-size:var(--t-lg);font-weight:500}
.blk-cta p{font-size:var(--t-sm);margin:8px 0 0;max-width:56ch}
/* 0.7.0: blocket hade primarknapp plus sekundarknapp som alltid var
   "boka jurist". Nu en enda atgard; det andra alternativet star som en
   mening med textlank under. */
.blk-cta .acts{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.andra-vag{font-size:var(--t-sm);color:var(--muted);line-height:1.55;
  margin:-18px 0 30px;max-width:var(--measure)}
.andra-vag a{color:var(--accent-ink);font-weight:600;text-decoration:none;
  box-shadow:inset 0 -.5em 0 var(--accent-soft);transition:box-shadow .15s}
.andra-vag a:hover{box-shadow:inset 0 -1.05em 0 var(--accent-soft)}
/* Samma behandling pa startsidans notis, som ocksa tappade sin andra knapp. */
.tpl-hero .cta-note a{color:var(--accent-ink);font-weight:600;text-decoration:none;
  box-shadow:inset 0 -.5em 0 var(--accent-soft)}
.tpl-hero .cta-note a:hover{box-shadow:inset 0 -1.05em 0 var(--accent-soft)}

/* Friskrivning */
.blk-frisk{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:16px 18px;
  font-size:var(--t-sm);color:var(--muted);line-height:1.55;max-width:var(--measure);margin:0 0 30px}
.blk-frisk b{color:var(--ink)}

/* FAQ */
.blk-faq{max-width:var(--measure);margin:0 0 30px}
.blk-faq details{border-bottom:1px solid var(--line)}
.blk-faq summary{cursor:pointer;padding:15px 0;font-weight:600;color:var(--ink);font-size:var(--t-base);list-style:none}
.blk-faq summary::-webkit-details-marker{display:none}
.blk-faq summary::after{content:"+";float:right;color:var(--accent);font-weight:400;font-size:var(--t-lg);line-height:1}
.blk-faq details[open] summary::after{content:"\2212"}
.blk-faq .svar{padding:0 0 18px;font-size:var(--t-sm);line-height:1.6}

/* Relaterat */
.blk-relaterat{border-top:1px solid var(--line);padding-top:22px;margin:34px 0 0}
.blk-relaterat h4{margin-bottom:12px}
.blk-relaterat ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}

/* Illustration */
.blk-ill svg{width:120px;height:auto;color:var(--accent);display:block}
.blk-ill .tint{fill:var(--accent-soft)}

/* ============================================================
   8. Sidmallar
   ============================================================ */
.tpl-hero{padding:56px 0 22px}
.tpl-hero .lede{font-family:var(--display);font-size:var(--t-lg);line-height:1.52;
  color:var(--body);margin-top:18px;max-width:34em}
.tpl-hero .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.tpl-hero .cta-note{font-size:var(--t-sm);color:var(--muted);margin-top:11px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:start}
.hero-aside{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:22px 24px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-sm);margin-top:8px}
.hero-aside ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.hero-aside li{position:relative;padding-left:22px;font-size:var(--t-sm);line-height:1.5}
.hero-aside li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;
  border-radius:1px;background:var(--accent)}
.sektion{padding:46px 0;scroll-margin-top:88px}
.entry h2{scroll-margin-top:88px}
.sek-head{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;max-width:62ch}
.tpl-verktyg-grid{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:26px;align-items:start}

/* ------------------------------------------------------------
   Tvakolumnslayout med hogerspalt (0.5.0)

   Fore 0.5.0 lag allt i en 1140px-behallare dar varje block satte sin
   egen max-width i ch. Textblocken slutade kring 70 % och kortrutnaten
   gick ut till 100 %, sa sidan vaxlade bredd utan system och sag halvfardig
   ut. Nu ar behallaren delad: innehallskolumnen ar ca 690px, vilket ar
   samma matt som de gamla ch-taken lag pa, och den yta som forr stod tom
   bar innehallsforteckning, syskonsidor och bokningskortet.

   OBS: klassen heter .sidospalt, inte .rail — processkomponenten anvander
   redan .rail for stegstapeln (.proc-step .rail).

   Kolumnen ar mattet, darfor sattes --measure om till 100 % har inne.
   ------------------------------------------------------------ */
.tpl-layout{display:grid;grid-template-columns:minmax(0,1fr) var(--sido);
  gap:var(--sido-gap);align-items:start;padding-bottom:52px}
.tpl-layout .entry{--measure:100%;min-width:0}

/* Verktygssidor har inte hogerspalt — kalkylatorerna behover hela bredden —
   men ska inte heller falla tillbaka pa ch-taken. */
.entry-bred{--measure:100%}

.sidospalt{position:static;display:grid;gap:22px;font-size:var(--t-sm);
  padding-right:0}
.sido-rub{
  color:var(--muted);margin:0 0 12px}
.sidospalt ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}

.sido-toc{border-left:2px solid var(--line);padding-left:16px}
.sido-toc a{color:var(--body);text-decoration:none;line-height:1.4;display:block;font-size:var(--t-sm)}
.sido-toc a:hover{color:var(--accent-ink)}
.sido-toc li.pa a{color:var(--ink);font-weight:600}
.sido-toc li{position:relative}
.sido-toc li.pa::before{content:"";position:absolute;left:-18px;top:2px;bottom:2px;
  width:2px;background:var(--accent);border-radius:2px}

.sido-syskon{border-top:1px solid var(--line);padding-top:20px}
/* Utan innehallsforteckning ligger navigeringen forst — da ar linjen ovanfor lost. */
.sido-syskon:first-child{border-top:0;padding-top:0}
.sido-syskon a{color:var(--body);text-decoration:none;line-height:1.4;display:flex;gap:8px;font-size:var(--t-sm)}
.sido-syskon a::before{content:"\203A";color:var(--accent);font-weight:600}
.sido-syskon a:hover{color:var(--accent-ink)}

.sido-cta{background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--accent);
  border-radius:0 0 10px 10px;padding:20px;display:grid;gap:12px;box-shadow:var(--shadow-sm)}
.sido-cta p{font-size:var(--t-sm);line-height:1.52;margin:0;color:var(--body)}
.sido-cta .btn{justify-content:center}
.sido-cta .sido-lank{font-size:var(--t-sm);font-weight:600;color:var(--accent-ink);
  text-decoration:none;text-align:center}
.sido-cta .sido-lank:hover{text-decoration:underline}

@media (max-width:1040px){
  .tpl-layout{grid-template-columns:1fr;gap:38px}
  .sidospalt{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}
  .sido-syskon{border-top:0}
  /* Innehallsforteckningen hamnar under texten nar spalten faller ned.
     Da har man redan last sidan, sa den doljs i stallet. */
  .sido-toc{display:none}
  .tpl-layout .entry{--measure:74ch}
}
@media (max-width:980px){
  .hero-grid,.tpl-verktyg-grid,.blk-cta{grid-template-columns:1fr}
  .hero-grid{gap:30px}
  .proc-steps{grid-template-columns:1fr 1fr}
  .proc-step{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
  .nav-main{display:none}
  .nav-main.open{display:block;position:absolute;top:70px;left:0;right:0;background:var(--surface);
    border-bottom:1px solid var(--line);padding:14px 30px}
  .nav-main.open ul{flex-direction:column;gap:2px}
  .nav-toggle{display:block}
  .wrap{padding:0 20px}
  .tpl-hero{padding:36px 0 18px}
  .sektion{padding:34px 0}
}

/* Priskort utan belopp — beslut CL2026-09-04, inga summor på sajten */
.pk .besked{font-family:var(--display);font-size:var(--t-md);font-weight:500;color:var(--ink);
  line-height:1.35;text-wrap:balance}
.pk-besked{border-left:3px solid var(--accent);border-radius:0 8px 8px 0}

/* Kostnadsbesked — det som ersatter det utskrivna priset */
.blk-kostnad{background:var(--accent-soft);border-radius:10px;padding:24px 26px;margin:0 0 32px;max-width:var(--measure)}
.blk-kostnad h3{margin:0 0 10px;font-family:var(--display);font-size:var(--t-lg);font-weight:600;color:var(--accent-ink)}
.blk-kostnad .ing{margin:0 0 12px;color:var(--body);line-height:1.6}
.blk-kostnad ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.blk-kostnad li{position:relative;padding-left:22px;line-height:1.55;color:var(--body);font-size:var(--t-sm)}
.blk-kostnad li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;
  border-radius:2px;background:var(--accent)}
.blk-kostnad .fot{margin:14px 0 0;font-size:var(--t-sm);color:var(--muted);line-height:1.55}
.blk-kostnad .fot a{color:var(--accent-ink)}

/* ============================================================
   9. En behandling per typografiskt jobb  (0.6.0)

   Regeln: Fraunces ar rubriker, Karla ar lopande text, mono ar
   etiketter och siffror. Ingen av dem gor nagon annans jobb.

   Fore detta fanns sex olika behandlingar av samma lilla etikett —
   Fraunces kursiv 15px, Karla versal .8rem, mono versal 11px,
   mono 11px, mono versal 10.5px och Karla versal .78rem. Den
   kursiva stilen var sajtens enda kursiv och utgar.
   ============================================================ */
.statebar .k,.proc-step .k,.vk .tag,.blk-jmf thead .lab,.blk-jmf tbody th,
.pk .typ,.pk dt,.blk-granskad .k,.sido-rub,.site-footer h4,.eyebrow{
  font-family:var(--mono);font-size:var(--t-xs);font-weight:500;font-style:normal;
  letter-spacing:.09em;text-transform:uppercase;line-height:1.4;display:block;margin:0}
.site-footer h4{margin:0 0 13px}
.sido-rub{margin:0 0 12px}
.eyebrow{color:var(--signal-ink)}
.pk .typ{color:var(--accent)}
.blk-jmf tbody th{text-align:left}

/* Rubriker: en storlek per niva, ingen egen avvikelse per block. */
h3,.proc-head h3,.blk-exempel h3,.blk-cta h3,.blk-kostnad h3,.lof h4,.blk-relaterat h4,
.blk-steg .s b,.blk-faq summary,.proc-step .nm,.blk-lista .lk b,.vk h3,.pel h3{
  font-family:var(--sans);font-weight:600;color:var(--ink)}
h3,.blk-cta h3,.blk-kostnad h3{font-size:var(--t-md);line-height:1.3}
.blk-cta h3,.blk-kostnad h3{font-family:var(--display);font-weight:500}