/* Lowryvo Digital, delad grund.
 *
 * Allt som är sig likt på varje sida bor här: typsnittet, färgerna, toppraden,
 * knapparna, foten och rörelsen. Det som bara finns på en enda sida ligger
 * kvar i den sidans egen <style>, för då syns det där det används.
 *
 * build-dist.sh skriver om jost-latin till jost-latin när bundlen byggs,
 * eftersom bundlen är platt. Rör inte den sökvägen utan att läsa skriptet.
 */

@font-face{
  font-family:Jost; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(jost-latin.woff2) format("woff2");
}
:root{
  --paper:#FFFFFF;
  --ink:#111111;
  --red:#D32011;
  --blue:#0B43C4;
  --yellow:#F5C400;
  --sans:Jost,ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;

  --d1:clamp(46px,11.5vw,152px);
  --d2:clamp(32px,5.4vw,68px);
  --d3:clamp(21px,2.5vw,31px);
  --body:clamp(17px,1.1vw,19px);
  --small:15px;

  --pad:clamp(20px,4.5vw,64px);
  --band:clamp(96px,12vw,200px);
  --max:1360px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--body); line-height:1.55;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; font-weight:900; letter-spacing:-.03em; line-height:.9}
h1{font-size:var(--d1)}
h2{font-size:var(--d2)}
h3{font-size:var(--d3); letter-spacing:-.02em; line-height:1}
p{margin:0}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
:focus-visible{outline:4px solid var(--red); outline-offset:3px}
.band :focus-visible{outline-color:var(--ink)}
.band--ink :focus-visible,.band--blue :focus-visible,.band--red :focus-visible{outline-color:var(--yellow)}

.skip{position:absolute; left:-9999px}
.skip:focus{position:fixed; left:var(--pad); top:16px; z-index:20;
  background:var(--ink); color:var(--paper); padding:14px 20px; font-weight:700}

.wrap{width:100%; max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.band{padding:var(--band) 0}
.band--paper{background:var(--paper); color:var(--ink)}
.band--ink{background:var(--ink); color:var(--paper)}
.band--blue{background:var(--blue); color:var(--paper)}
.band--red{background:var(--red); color:var(--paper)}
.band--yellow{background:var(--yellow); color:var(--ink)}

/* topprad: ordmärke, sidor, ett nummer. Ingen krom.
   Raden bryts till två rader på smal skärm i stället för att gömma något
   bakom en hamburgare: tre länkar är inte en meny. */
.top{background:var(--ink); color:var(--paper)}
.top .wrap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px 20px; min-height:68px; padding-top:12px; padding-bottom:12px}
.mark{font-weight:900; letter-spacing:.02em; font-size:clamp(15px,1.5vw,18px);
  text-transform:uppercase; text-decoration:none}
.top a.call{color:var(--yellow); font-weight:700; text-decoration:none;
  display:inline-flex; align-items:center; min-height:44px; font-size:clamp(15px,1.5vw,18px)}
.top a.call:hover{text-decoration:underline}
.sidnav{display:flex; flex-wrap:wrap; gap:4px 24px; order:3; width:100%}
.sidnav a{display:inline-flex; align-items:center; min-height:44px;
  font-weight:700; font-size:var(--small); text-decoration:none}
.sidnav a:hover{text-decoration:underline}
.sidnav a[aria-current="page"]{color:var(--yellow)}
@media(min-width:900px){
  .sidnav{order:0; width:auto; margin-left:auto; margin-right:32px; gap:28px}
  .sidnav a{font-size:clamp(15px,1.4vw,17px)}
}

/* knappar */
.btn{display:inline-flex; align-items:center; justify-content:center;
  min-height:60px; padding:16px 30px; background:var(--red); color:var(--paper);
  font:900 clamp(17px,1.6vw,20px)/1 var(--sans); letter-spacing:-.01em;
  text-decoration:none; border:0; border-radius:0; cursor:pointer;
  transition:background .14s ease, transform .14s ease}
.btn:hover{background:var(--ink)}
.btn:active{transform:translateY(2px)}
.btn--ink{background:var(--ink)}
.btn--ink:hover{background:var(--red)}
.btn-row{display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin-top:clamp(32px,4vw,44px)}
.btn-note{font-weight:500}

/* listor och brödtext utan linjer */
.plain{list-style:none; margin:clamp(36px,4vw,56px) 0 0; padding:0; max-width:34ch;
  font-size:var(--d3); font-weight:700; line-height:1.2; letter-spacing:-.02em}
.plain li{margin:0 0 clamp(20px,2.4vw,30px)}
.plain li:last-child{margin-bottom:0}
.two{display:grid; gap:clamp(36px,5vw,72px); grid-template-columns:1fr; align-items:start}
@media(min-width:900px){ .two{grid-template-columns:1fr 1fr} }
.note{max-width:52ch; font-weight:500}
.note + .note{margin-top:1em}
.fine{font-size:var(--small); font-weight:500; margin-top:1.4em; max-width:60ch}

/* fot: namnet kommer tillbaka i full bredd */
.foot{background:var(--ink); color:var(--paper); padding:var(--band) 0 clamp(40px,5vw,64px)}
.foot .two{align-items:start}
.foot a{font-weight:700}
.foot .lines{font-weight:500}
.foot .lines a{display:inline-flex; align-items:center; min-height:44px; font-size:var(--d3); font-weight:900; letter-spacing:-.02em}
.wordmark{margin-top:clamp(56px,7vw,104px); font-weight:900; line-height:.82;
  letter-spacing:-.045em; font-size:clamp(44px,13.5vw,210px); text-transform:uppercase}
.legal{margin-top:clamp(28px,3vw,40px); font-size:var(--small); font-weight:500}
.legal a{text-decoration:underline}
.sitemap{margin-top:clamp(44px,5vw,64px); display:flex; flex-wrap:wrap; gap:12px 32px;
  padding:0; list-style:none; font-weight:700}
.sitemap a{display:inline-flex; align-items:center; min-height:44px; text-decoration:underline;
  text-underline-offset:4px}

/* ===== delar som bara undersidorna använder ===== */

/* brödsmula: en rad, aldrig en grafisk sak */
.brod{font-size:var(--small); font-weight:700; padding-top:clamp(20px,2.6vw,32px)}
.brod a{text-decoration:underline; text-underline-offset:3px}
.brod span{opacity:.72}

/* svaret först. Den här rutan är sidans hela poäng i tre meningar, och den
   står före all försäljning. Både en människa som skummar och en sökmotor
   som plockar ut ett svar läser den först. */
.svar{background:var(--yellow); color:var(--ink);
  padding:clamp(28px,4vw,52px); margin-top:clamp(32px,4vw,48px)}
.svar p{font-size:clamp(19px,1.7vw,24px); font-weight:500; line-height:1.4; max-width:62ch}
.svar p + p{margin-top:.9em}
.svar strong{font-weight:900}

/* en fråga, ett svar. Rubriken är formulerad som folk faktiskt söker. */
.qa{margin-top:clamp(40px,5vw,64px)}
.qa > div{border-top:3px solid currentColor; padding:clamp(22px,2.8vw,34px) 0}
.qa > div:last-child{border-bottom:3px solid currentColor}
.qa h3{max-width:34ch}
.qa p{margin-top:14px; max-width:62ch; font-weight:500}
.qa p + p{margin-top:.9em}

/* numrerade steg, siffran som form */
.steg{list-style:none; margin:clamp(40px,5vw,64px) 0 0; padding:0; counter-reset:s}
.steg li{counter-increment:s; display:grid; grid-template-columns:auto 1fr;
  gap:clamp(18px,2.4vw,32px); align-items:start;
  padding:clamp(20px,2.6vw,30px) 0; border-top:3px solid currentColor}
.steg li:last-child{border-bottom:3px solid currentColor}
.steg li::before{content:counter(s); font-weight:900; line-height:.8;
  font-size:clamp(34px,4.4vw,60px); letter-spacing:-.04em}
.steg h3{margin-bottom:10px}
.steg p{font-weight:500; max-width:56ch}

/* ett yrke, en ruta. Det som skiljer yrkena åt står här, inte samma text
   fem gånger med ett utbytt ord. */
.yrken{display:grid; gap:0; grid-template-columns:1fr; margin-top:clamp(40px,5vw,64px)}
@media(min-width:860px){ .yrken{grid-template-columns:1fr 1fr} }
.yrke{padding:clamp(26px,3.2vw,40px); scroll-margin-top:24px}
.yrke:nth-child(4n+1){background:var(--ink); color:var(--paper)}
.yrke:nth-child(4n+2){background:var(--blue); color:var(--paper)}
.yrke:nth-child(4n+3){background:var(--red); color:var(--paper)}
.yrke:nth-child(4n+4){background:var(--yellow); color:var(--ink)}
.yrke p{margin-top:16px; font-weight:500; max-width:46ch}
.yrke p + p{margin-top:.9em}

/* tal bredvid tal. Ingen tabellram, bara linjer. */
.tal{width:100%; border-collapse:collapse; margin-top:clamp(36px,4vw,56px);
  text-align:left; font-variant-numeric:tabular-nums}
.tal caption{text-align:left; font-weight:500; font-size:var(--small);
  padding-bottom:16px; max-width:70ch}
.tal th,.tal td{border-top:3px solid currentColor; padding:clamp(14px,1.8vw,20px) 16px
  clamp(14px,1.8vw,20px) 0; vertical-align:top; font-weight:500}
.tal thead th{font-weight:900; letter-spacing:-.01em}
.tal tbody th{font-weight:700}
.tal tr:last-child td,.tal tr:last-child th{border-bottom:3px solid currentColor}

/* Under 700px staplas tabellen. En jämförelsetabell med fyra kolumner
 * behöver 428px bara för talen, och den bredden finns inte på en telefon.
 * Mätt i webbläsaren 2026-11-04: utan det här skrollar sidan i sidled, och
 * sista kolumnen hamnar utanför skärmen.
 */
@media(max-width:699px){
  .tal,.tal caption,.tal thead,.tal tbody,.tal tr,.tal th,.tal td{display:block; width:auto}
  .tal caption{max-width:none}
  .tal thead{position:absolute; left:-9999px}
  .tal tbody tr{border-top:3px solid currentColor; padding:clamp(18px,4vw,24px) 0}
  .tal tbody tr:last-child{border-bottom:3px solid currentColor}
  .tal tbody th,.tal tbody td{border:0; padding:0}
  .tal tbody th{font-weight:900; font-size:1.15em; letter-spacing:-.02em;
    margin-bottom:12px}
  .tal tbody td{margin-top:10px}
  .tal tbody td::before{content:attr(data-etikett); display:block;
    font-size:var(--small); font-weight:700; opacity:.65; margin-bottom:2px}
}

/* vidare härifrån */
.vidare{display:grid; gap:0; grid-template-columns:1fr; margin-top:clamp(40px,5vw,64px)}
@media(min-width:760px){ .vidare{grid-template-columns:1fr 1fr} }
.vidare a{display:block; text-decoration:none;
  padding:clamp(26px,3.2vw,40px); background:var(--ink); color:var(--paper);
  transition:background .14s ease}
.vidare a:nth-child(even){background:var(--blue)}
.vidare a:hover{background:var(--red)}
.vidare a span{display:block; margin-top:14px; font-weight:500; max-width:40ch}
.vidare a h3{text-decoration:underline; text-underline-offset:6px}

/* Textdokument: villkor och integritetspolicy. En smal spalt och en
 * dragspelslista, för de sidorna läses uppifrån och ned och ska gå att
 * skanna. Egen klass i stället för .wrap, så den breda rutnätsbredden och
 * den smala läsbredden aldrig slåss om samma selektor.
 *
 * Båda sidorna hade tidigare den här blocket inlagt ordagrant var för sig,
 * tillsammans med en egen :root. Det är just den dubbleringen bygget nu
 * vägrar: två paletter som glider isär utan att någon märker det.
 */
.doc{width:100%; max-width:760px; margin:0 auto;
  padding:clamp(40px,7vw,80px) clamp(20px,4.5vw,40px) clamp(64px,8vw,112px)}
.doc h1{font-size:clamp(40px,8vw,84px); margin-bottom:.4em}
.doc h2{font-size:clamp(21px,2.4vw,28px); letter-spacing:-.02em; margin:2em 0 .5em}
.doc p,.doc li{max-width:66ch}
.doc p{margin:0 0 1em}
.doc a{text-decoration:underline; text-underline-offset:3px}
.doc ul{padding-left:1.1em}
.doc li{margin:0 0 .5em}
.doc .back{display:inline-flex; align-items:center; min-height:48px;
  font-weight:700; text-decoration:none; margin-bottom:clamp(24px,3vw,40px)}
.doc .back:hover{text-decoration:underline}
.doc .meta{font-size:var(--small); margin-top:3em;
  background:var(--ink); color:var(--paper); padding:clamp(20px,3vw,32px)}
.doc .meta a{color:var(--yellow)}
.doc .meta p:last-child{margin-bottom:0}

.doc details{border-top:3px solid var(--ink); margin:0}
.doc details:last-of-type{border-bottom:3px solid var(--ink)}
.doc summary{display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; cursor:pointer; list-style:none; padding:clamp(20px,2.6vw,28px) 0;
  font-weight:900; letter-spacing:-.02em; line-height:1.05;
  font-size:clamp(20px,2.3vw,27px)}
.doc summary::-webkit-details-marker{display:none}
.doc summary::after{content:"+"; font-weight:900; font-size:1.1em; line-height:1; flex:0 0 auto}
.doc details[open] summary::after{content:"\2212"}
.doc summary:hover{color:var(--red)}
.doc summary:focus-visible{outline:4px solid var(--red); outline-offset:-4px}
.doc details > *:not(summary){margin-bottom:1em}
.doc details > *:last-child{margin-bottom:clamp(20px,2.6vw,28px)}

/* rörelse: bara entréer, innehållet syns utan skript */
.js .r{opacity:0; transform:translateY(26px)}
.js .r.in{opacity:1; transform:none;
  transition:opacity .5s cubic-bezier(.2,.6,.2,1), transform .5s cubic-bezier(.2,.6,.2,1);
  transition-delay:calc(var(--i,0) * 75ms)}
@media(prefers-reduced-motion:reduce){
  .js .r{opacity:1; transform:none}
  .js .r.in{transition:none; transform:none}
  .btn{transition:none}
}
@media print{
  body{background:#fff; color:#000; font-size:11pt}
  .band,.hero,.foot,.top,.svar,.yrke,.vidare a{background:#fff !important; color:#000 !important; padding:14pt 0}
  .check,.ask,.opt span{background:#fff !important; color:#000 !important; box-shadow:none}
  img,.ask form{display:none}
  .doc{max-width:none; padding:0}
  .doc details{border:0; break-inside:avoid}
  .doc summary::after{content:"" !important}
  .doc .back{display:none}
  .doc .meta{background:#fff !important; color:#000 !important; padding:0;
    border-top:1px solid #000}
  .doc h1,.doc h2{break-after:avoid}
  a[href^="tel"]::after,a[href^="mailto"]::after{content:" (" attr(href) ")"; font-size:9pt}
}