/* ══════════════════════════════════════════════════════════════════════
   UPPVISAT DESIGNSYSTEM
   Kontroll. Trygghet. Automation.

   Stramare än Lagly: en enda sans, mindre rundning, färre dekorativa
   containers. Luft, typografi och status bär designen.
   Färg är aldrig ensam informationsbärare — varje status har symbol
   OCH text OCH färg.
   ══════════════════════════════════════════════════════════════════ */
:root{
  /* Primär — djup petrol */
  --petrol-900:#082A32;
  --petrol-800:#0E3A44;
  --petrol-700:#12505C;
  --petrol-600:#186B78;
  --petrol-100:#E2EEF0;

  /* Neutraler */
  --bg:#F7F9FA;
  --yta:#FFFFFF;
  --yta-2:#EFF3F4;
  --linje:#E1E8EA;
  --linje-2:#C9D6D9;
  --ink:#082A32;
  --ink-2:#3B535B;
  /* Mörkare än den såg ut att behöva vara: #6A828A gav 4,06:1 mot vitt och
     3,84:1 mot --bg, alltså under AA:s 4,5 för brödtext. #546A72 klarar båda
     med marginal, och även tonade notisytor i demot — samma tal på båda håll. */
  --dov:#546A72;
  --pa-morkt:#FFFFFF;

  /* Status — varje par har text, bakgrund och kantlinje */
  --ok:#16704F;      --ok-bg:#E4F2EC;      --ok-line:#BEDCD0;
  --vantar:#8A5D06;  --vantar-bg:#FBF0D9;  --vantar-line:#EAD9A8;
  --atgard:#A93B25;  --atgard-bg:#FBEAE5;  --atgard-line:#EFCBC1;
  /* Tre av fyra statuspar klarade AA direkt. Det neutrala gav 3,63:1 på sin
     egen bakgrund — mörkare tills det klarar 4,5 som de andra. */
  --neutral:#586E76; --neutral-bg:#EFF3F4; --neutral-line:#DCE4E6;

  /* Form — måttlig radie på stora kort, mindre inuti */
  --r-kort:12px;
  --r-liten:8px;
  --r-pill:999px;
  --skugga:0 1px 2px rgba(8,42,50,.04), 0 18px 44px -28px rgba(8,42,50,.30);
  --skugga-lyft:0 2px 4px rgba(8,42,50,.05), 0 28px 60px -30px rgba(8,42,50,.34);

  /* Typografi */
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Spacing-skala */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
}

*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  font-family:var(--sans); font-size:17px; line-height:1.62;
  color:var(--ink-2); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ── Typografisk skala ─────────────────────────────────────────────── */
h1,h2,h3,h4{color:var(--ink); font-weight:700; line-height:1.12; letter-spacing:-.021em}
h1{font-size:clamp(2.3rem,5.4vw,3.7rem); letter-spacing:-.03em}
h2{font-size:clamp(1.75rem,3.4vw,2.5rem); letter-spacing:-.026em}
h3{font-size:1.14rem; letter-spacing:-.015em}
h4{font-size:.98rem; letter-spacing:-.01em}
p{max-width:66ch}
a{color:var(--petrol-700); text-decoration:none}
a:hover{text-decoration:underline}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.lede{font-size:clamp(1.02rem,1.7vw,1.2rem); color:var(--ink-2); max-width:62ch}
.liten{font-size:.87rem; line-height:1.55}
.dov{color:var(--dov)}
.eyebrow{
  font-size:.74rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--petrol-600); display:block; margin-bottom:var(--s3);
}
.mork .eyebrow{color:#7FC2C9}

/* ── Layout ────────────────────────────────────────────────────────── */
.wrap{width:min(1180px,calc(100% - 44px)); margin-inline:auto}
section{padding:var(--s9) 0}
section.tat{padding:var(--s8) 0}
.sekhuvud{margin-bottom:var(--s7); max-width:62ch}
.ljus{background:var(--yta)}
.mork{background:var(--petrol-900); color:#C6D8DB}
.mork h1,.mork h2,.mork h3,.mork h4{color:#fff}
.mork .dov{color:#8FAAB0}
.rutnat{display:grid; gap:var(--s5)}
/* Rutnätsceller har min-width:auto och krymper därför inte under sitt längsta
   ord. Utan den här raden sprängde "Polismyndighetens" flödesspalten vid 320 px. */
.rutnat > *{min-width:0}
.k2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.k3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.k4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
/* Två lika spalter som faktiskt viker sig. Ett inline-rutnät utan brytpunkt
   sprängde sidan i sidled på 360 px. */
.k2-fast{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s7); align-items:start}
@media(max-width:860px){ .k2-fast{grid-template-columns:1fr; gap:var(--s6)} }

/* ── Komponent: kort ───────────────────────────────────────────────── */
.kort{
  background:var(--yta); border:1px solid var(--linje);
  border-radius:var(--r-kort); padding:var(--s5);
}
.kort h3{margin-bottom:var(--s2)}
.kort p{font-size:.94rem}
.mork .kort{background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.12)}

/* ── Komponent: knapp ──────────────────────────────────────────────── */
.knapp{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:inherit; font-size:.96rem; font-weight:600; line-height:1;
  padding:15px 24px; border-radius:var(--r-liten); border:1px solid transparent;
  cursor:pointer; text-decoration:none; transition:background .13s, border-color .13s, color .13s;
  min-height:48px;                       /* mobil: stor klickyta */
}
.knapp:hover{text-decoration:none}
.k-primar{background:var(--petrol-700); color:var(--pa-morkt)}
.k-primar:hover{background:var(--petrol-800)}
.k-sekundar{background:var(--yta); color:var(--ink); border-color:var(--linje-2)}
.k-sekundar:hover{border-color:var(--petrol-600); color:var(--petrol-700)}
.mork .k-sekundar{background:transparent; color:#fff; border-color:rgba(255,255,255,.28)}
.mork .k-sekundar:hover{border-color:#fff}
/* Bekräftar något som får följder — och som därför ska se ut som det.
   Bär åtgärdsfärgen, samma som statuspillen, så färgen betyder samma sak
   överallt: här behöver en människa ta ställning. */
.k-fara{background:var(--atgard); color:#fff}
.k-fara:hover{background:#8E3020}
/* Vägen tillbaka. Ska finnas, ska inte konkurrera. */
.k-tyst{background:transparent; color:var(--dov); border-color:transparent}
.k-tyst:hover{color:var(--ink); border-color:var(--linje-2)}
.mork .k-tyst{color:rgba(255,255,255,.72)}
.mork .k-tyst:hover{color:#fff; border-color:rgba(255,255,255,.28)}
.knapp:disabled{opacity:.55; cursor:not-allowed}
.knappar{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6)}

/* .lede sätter en egen mörk färg och ärver därför inte .mork:s ljusa text.
   På petrolbotten blev den 1.8:1 — praktiskt taget osynlig. Bara guiden
   använder kombinationen idag; regeln finns för att nästa som gör det inte
   ska behöva upptäcka det själv. */
.mork .lede{color:#C6D8DB}

/* Produktvyns åtgärdslista. Speglar översiktens uppbyggnad i miniatyr:
   grupprubrik med pill, rader under. */
.pv-attgora{border:1px solid var(--atgard-line); border-radius:var(--r-liten); overflow:hidden}
.pv-attgora-topp{
  display:flex; justify-content:space-between; align-items:baseline;
  background:var(--atgard-bg); padding:10px 14px; color:var(--atgard);
}
.pv-attgora-topp b{font-size:.94rem}
.pv-attgora-topp span{font-size:.82rem}
.pv-grupp{
  display:flex; align-items:center; gap:10px; padding:11px 14px 7px;
  border-top:1px solid var(--linje);
}
.pv-grupp:first-of-type{border-top:none}
.pv-grupp > span{font-size:.82rem; color:var(--dov)}
.pv-attgora .pvrad{border-top:none; padding:7px 14px 11px}

/* Löftet till ledaren, i den mörka integritetssektionen. Ljusare botten så
   det läses som ett tilltal och inte som en punkt i en lista. */
.mork .loftet{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16);
  margin-bottom:var(--s7); max-width:70ch}
.mork .loftet h3{color:#fff; margin-bottom:var(--s3)}
.mork .loftet p{color:#C6D8DB}
.loftet p + p{margin-top:var(--s4)}
.mork .loftet b{color:#fff}
.mork .loftet .dov{color:#8FAAB0}

/* ── Komponent: hopfällt alternativ ────────────────────────────────────
   Den andra vägen, för den som vill ha den. Hopfälld med flit: avläsningen
   är det normala och det snabbare, och en synlig andra väg gör valet till
   en fråga där ingen fråga behövs. */
.sjalv{margin-top:var(--s6); border-top:1px solid var(--linje); padding-top:var(--s5)}
.sjalv summary{
  cursor:pointer; font-size:.92rem; font-weight:600; color:var(--petrol-700);
  list-style:none; display:flex; align-items:center; gap:8px;
}
.sjalv summary::-webkit-details-marker{display:none}
.sjalv summary::before{content:'+'; font-weight:700; font-size:1.05rem; line-height:1}
.sjalv[open] summary::before{content:'–'}
.sjalv summary:hover{color:var(--petrol-800)}
.sjalv > p{margin:var(--s4) 0 var(--s5)}
.sjalv form{margin:0}

/* ── Komponent: felrad i importen ──────────────────────────────────────
   En avvisad CSV-rad, återgiven som den står, med den felande cellen märkt.
   Innehållet kommer ur textrutan i webbläsaren — servern skickar bara
   radnummer och kolumnnamn, aldrig värdet. */
.felrader{display:grid; gap:8px}
.felrad{
  background:var(--yta); border:1px solid var(--atgard-line);
  border-radius:var(--r-liten); padding:11px 13px; cursor:pointer;
}
.felrad:hover{border-color:var(--atgard)}
.felrad:focus-visible{outline:2px solid var(--atgard); outline-offset:2px}
.felhuvud{display:flex; align-items:baseline; gap:10px; margin-bottom:7px}
.felhuvud b{font-size:.9rem; color:var(--atgard)}
.felhuvud .liten{color:var(--dov)}
.felrad p{color:var(--atgard)}
.felkod{
  font-family:var(--mono); font-size:.82rem; line-height:1.7;
  overflow-x:auto; white-space:nowrap; padding-bottom:2px;
}
.felkod .avgr{color:var(--dov); font-weight:400; padding:0 1px}
.felkod .tomcell{color:var(--dov); font-style:italic}
/* Den felande cellen. Understrykningen bär informationen även för den som
   inte skiljer färgerna åt. */
.felcell{
  background:var(--atgard-bg); color:var(--atgard); font-weight:600;
  border-bottom:2px solid var(--atgard); border-radius:3px 3px 0 0;
  padding:1px 3px; cursor:help;
}

/* ── Komponent: steglista ──────────────────────────────────────────────
   Numrerade steg med en egen bild till varje. Siffran är stor och bär
   räkningen: den som tappat tråden ska hitta tillbaka utan att läsa om.
   Antalet steg måste vara detsamma som i påminnelsebreven — annars räknar
   ledaren fel och letar efter ett steg som inte finns. */
.steglista{display:grid; gap:var(--s5); counter-reset:steg; max-width:860px}
.steg-kort{
  display:grid; grid-template-columns:auto 1fr auto; gap:var(--s4) var(--s5);
  align-items:start; background:var(--yta); border:1px solid var(--linje);
  border-radius:var(--r-kort); padding:var(--s5) var(--s6);
}
.steg-nr{
  display:grid; place-items:center; width:38px; height:38px; flex:none;
  border-radius:999px; background:var(--petrol-700); color:var(--pa-morkt);
  font-weight:700; font-size:1.02rem; line-height:1;
}
/* Svenska sammansättningar blir långa. Ett rutnätsbarn vägrar bli smalare än
   sitt längsta ord, och "personuppgiftshanteringen" sköt ut steg-kortet vid
   320 px. anywhere krymper ordets min-content och släpper därmed spärren —
   break-word hade brutit raden men inte minskat måttet, och min-width:0 hade
   låtit ordet hänga utanför kortet i stället för att brytas. */
.steg-kort h3,.steg-kort p{overflow-wrap:anywhere}
.steg-kort h3{font-size:1.06rem; margin:0 0 6px}
.steg-kort p{margin:0; font-size:.96rem}
.steg-kort p + p{margin-top:8px}
.steg-bild{width:88px; height:88px; flex:none; color:var(--petrol-600); opacity:.9}
.steg-bild svg{width:100%; height:100%}
.mork .steg-kort{background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.12)}
.mork .steg-bild{color:#7FC2C9}
@media (max-width:720px){
  .steg-kort{grid-template-columns:auto 1fr; padding:var(--s5)}
  .steg-bild{display:none}
}

/* ── Komponent: adminnavigering ────────────────────────────────────────
   Tre sidor och en utgång. Låg tyngd med flit: navigeringen ska tala om var
   man är, inte konkurrera med det som kräver en handling. */
.appnav{
  display:flex; align-items:center; gap:2px; flex-wrap:wrap;
  border-bottom:1px solid var(--linje); margin-bottom:var(--s6);
}
.appnav a{
  display:inline-flex; align-items:center; gap:7px;
  padding:12px 14px; margin-bottom:-1px;
  font-size:.92rem; font-weight:500; color:var(--dov);
  text-decoration:none; border-bottom:2px solid transparent;
  white-space:nowrap;
}
.appnav a:hover{color:var(--ink); text-decoration:none}
.appnav a[aria-current="page"]{color:var(--petrol-700); border-bottom-color:var(--petrol-700); font-weight:600}
.appnav svg{width:16px; height:16px; flex:none}
/* Kontot uppe till höger: vem som är inloggad, och utgången direkt under.
   Utgången låg förut sist i flikraden och bröt på telefonen ut på en egen
   rad mitt i sidan. */
.apphuvud .konto{display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  text-align:right; min-width:0}
.apphuvud .konto .vem{overflow-wrap:anywhere}
.apphuvud .konto .ut{display:inline-flex; align-items:center; gap:6px;
  font-size:.86rem; color:var(--dov); text-decoration:none; padding:6px 0}
.apphuvud .konto .ut svg{width:16px; height:16px; flex:none}
.apphuvud .konto .ut:hover{color:var(--ink); text-decoration:underline}
@media (max-width:520px){
  /* Huvudet och flikraden blir ett block: märket till vänster, kontot till
     höger, flikarna direkt under som jämnbreda flikar. */
  .appram .apphuvud{flex-wrap:nowrap; align-items:flex-start;
    padding:var(--s2) 0 var(--s4); margin-bottom:0; border-bottom:0}
  .appram .apphuvud > div:first-child{min-width:0}
  .appram .markesrad img.foreningsmarke{height:40px; max-width:min(200px, 52vw)}
  .appnav{flex-wrap:nowrap; gap:0}
  .appnav a{flex:1 1 0; justify-content:center; padding:11px 4px; font-size:.86rem}
}

/* ── Komponent: åtgärdsgrupp ───────────────────────────────────────────
   Rubriken över en hög rader som kräver samma sak. Pillen säger vad,
   meningen under säger vad man gör åt det. */
.atgardhuvud{
  display:grid; grid-template-columns:auto 1fr; gap:6px var(--s3);
  align-items:center; padding:var(--s4) var(--s5) 12px;
  border-top:1px solid var(--linje);
}
.atgardhuvud:first-child{border-top:none}
.atgardhuvud .liten.dov:not(p){justify-self:start}
.atgardhuvud p{grid-column:1 / -1; margin:0; line-height:1.5}

/* ── Komponent: valkort ────────────────────────────────────────────────
   Ett alternativ med sin egen förklaring och sin egen knapp. Används där
   ledaren väljer väg — texten bär beslutet, knappen bekräftar det. */
.valkort{
  display:flex; align-items:center; gap:var(--s4);
  background:var(--yta); border:1px solid var(--linje);
  border-radius:var(--r-liten); padding:var(--s4) var(--s4);
  margin-bottom:12px;
}
.valkort:hover{border-color:var(--linje-2)}
.valkort > div{flex:1; min-width:0}
.valkort .knapp{flex:none; padding:11px 18px; min-height:42px; font-size:.9rem}
.valrubrik{font-size:.96rem; font-weight:600; color:var(--ink); margin:0}
.mork .valkort{background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.12)}
@media (max-width:460px){
  .valkort{flex-direction:column; align-items:stretch}
  .valkort .knapp{width:100%}
}

/* ── Komponent: statuspill ─────────────────────────────────────────────
   Symbol + text + färg. Aldrig färgen ensam. Samma system på sajten,
   i produkten, i mejl och i rapporter. */
.pill{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.8rem; font-weight:600; line-height:1;
  padding:6px 12px 6px 9px; border-radius:var(--r-pill);
  border:1px solid transparent; white-space:nowrap;
}
.pill svg{width:14px; height:14px; flex:none}
.p-ok{background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line)}
.p-vantar{background:var(--vantar-bg); color:var(--vantar); border-color:var(--vantar-line)}
.p-atgard{background:var(--atgard-bg); color:var(--atgard); border-color:var(--atgard-line)}
.p-neutral{background:var(--neutral-bg); color:var(--neutral); border-color:var(--neutral-line)}

/* ── Komponent: verifieringsmärke ──────────────────────────────────── */
.verifierad{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.84rem; font-weight:600; color:var(--petrol-700);
}
.verifierad svg{width:19px; height:19px; flex:none}

/* ── Komponent: klickbart statuskort ───────────────────────────────── */
.stat.klickbar{
  cursor:pointer; text-align:left; width:100%; font:inherit; color:inherit;
  transition:border-color .12s ease, transform .12s ease;
}
.stat.klickbar:hover{border-color:var(--linje-2); transform:translateY(-1px)}
.stat.klickbar:active{transform:none}

/* ── Komponent: lägesmodal ─────────────────────────────────────────────
   Listan filtrerad på ett läge, öppnad från ett statuskort. Egen scroll i
   kroppen så huvud och fot står stilla vid hundra rader. */
.lagemodal{
  width:min(560px, calc(100vw - 2 * var(--s5)));
  max-height:min(680px, calc(100vh - 2 * var(--s6)));
  /* margin:auto centrerar en dialog — men resetten överst i filen nollar
     margin på ALLA element, så dialogen fastnade i övre vänstra hörnet.
     Den måste därför sättas tillbaka uttryckligen här. */
  margin:auto;
  padding:0; border:1px solid var(--linje); border-radius:var(--r-kort);
  background:var(--yta); color:var(--ink); box-shadow:var(--skugga-lyft);
  overflow:hidden;
}
.lagemodal::backdrop{background:rgba(8,42,50,.42)}
.lagemodal .modalhuvud{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s5) var(--s5) var(--s4); border-bottom:1px solid var(--linje); background:var(--yta-2);
}
/* Sökrutan i modalen. Egen rad under rubriken — med tjugo rader i en status
   är listan inte längre överblickbar, och man kommer ändå för att hitta en. */
.lagemodal .modalsok{padding:var(--s4) var(--s5); border-bottom:1px solid var(--linje)}
.lagemodal .modalsok input{
  width:100%; font:inherit; font-size:.94rem; padding:11px 14px; min-height:44px;
  border:1px solid var(--linje-2); border-radius:var(--r-liten);
  background:var(--yta); color:var(--ink);
}
/* Luftigare rader än i den täta listan — här finns gott om plats. */
.lagemodal .lrad{padding:16px var(--s5)}
.lagemodal .tomt{padding:var(--s6) var(--s5); text-align:center}
.lagemodal .modalhuvud h2{font-size:1.05rem}
.lagemodal .modalhuvud .knapp{min-height:0; padding:8px 14px; font-size:.82rem}
.lagemodal .modalkropp{overflow-y:auto; max-height:min(520px, calc(100vh - 2 * var(--s6) - 120px))}
.lagemodal .modalfot{padding:var(--s4) var(--s5) var(--s5); border-top:1px solid var(--linje)}

/* ── Komponent: filterrad ──────────────────────────────────────────────
   Sitter överst i en lång lista. Med hundratals rader är listan ett
   uppslagsverk — man kommer för att hitta EN person, inte för att läsa. */
.filterrad{
  display:flex; gap:var(--s3); flex-wrap:wrap; align-items:center;
  padding:var(--s4) var(--s5); border-bottom:1px solid var(--linje);
  background:var(--yta-2);
}
.filterrad input[type=search], .filterrad select{
  font:inherit; font-size:.92rem; padding:10px 13px; min-height:42px;
  border:1px solid var(--linje-2); border-radius:var(--r-liten);
  background:var(--yta); color:var(--ink);
}
.filterrad input[type=search]{flex:1 1 240px; min-width:0}
.filterrad select{flex:0 1 auto; cursor:pointer}
.filterrad .knapp{min-height:42px; padding:10px 16px; font-size:.88rem}
@media(max-width:520px){
  .filterrad{padding:var(--s3) var(--s4)}
  .filterrad select, .filterrad input[type=search]{flex:1 1 100%}
}

/* ── Komponent: synktabell ─────────────────────────────────────────────
   Historiken under Inställningar. Ligger i en rullbar behållare — tabellen
   får aldrig tvinga sidan att rulla i sidled. */
.synktabell{width:100%; border-collapse:collapse; font-size:.88rem}
.synktabell th{
  text-align:left; font-size:.7rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; color:var(--dov); padding:10px 16px;
  border-bottom:1px solid var(--linje); white-space:nowrap;
}
.synktabell td{padding:11px 16px; border-bottom:1px solid var(--linje); white-space:nowrap}
.synktabell tbody tr:last-child td{border-bottom:0}
.synktabell .num{font-variant-numeric:tabular-nums}
.synktabell .tom{color:var(--dov)}

/* ── Komponent: telefon ────────────────────────────────────────────────
   Produktvyn i en telefonram i stället för ett webbläsarfönster. Det är i
   telefonen kansliet läser den — och ramen gör dessutom en poäng av att hela
   översikten ryms på en liten skärm. */
/* Perspektivet ligger på föräldern och inte på telefonen själv. Sätts det på
   elementet som roteras får varje barn sin egen flyktpunkt och ramen vrider sig
   inte som en kropp. */
/* --skala krymper hela attrappen utan att röra dess inre. Skärmen fortsätter
   ritas som 400 px bred, så innehållet radbryts och tonar sig exakt som förut
   — minskades bredden i stället blev det en trång skärm, inte en liten
   telefon. 0,62 är mätt: textspalten är 544 px hög och telefonen 867. */
.telefonram{
  /* 3400 och inte 1700: ryggplanet ligger längre bort och krymper av
     perspektivet ungefär lika mycket som förskjutningen flyttar det, så
     springan åt sig själv. En längre lins gör projektionen planare och
     låter tjockleken synas — det är också så produktbilder fotas. */
  perspective:3400px; perspective-origin:60% 40%; --skala:.62;
  /* Skalan sitter på HELA scenen, inte på telefonen. Ögonpunkten anges i
     procent av perspektivbehållaren, så skalas bara telefonen krymper
     föremålet medan ögat står kvar på 60 % av spalten och tittar på den lilla
     rutan från fel håll. Med en plan sidoyta räckte det för att kanten skulle
     försvinna helt; ryggplanet tål det, men perspektivet och marginalerna
     nedan hör ihop med scenen och ska följas åt. */
  transform:scale(var(--skala)); transform-origin:center center;
  /* transform ändrar inte hur mycket plats elementet tar: utan det här står
     en tom pelare kvar i rutnätet där telefonen var. */
  margin-block:calc(400px * 19.5 / 9 * (var(--skala) - 1) / 2);
}

.telefon{
  /* 9:19.5 är en riktig telefon. Utan det växer ramen med sitt innehåll —
     den var 2.68:1 mot en iPhones 2.17:1, alltså en dryg fjärdedel för hög,
     och såg ut som ingen telefon någon äger. */
  width:min(400px,100%); aspect-ratio:9/19.5;
  min-width:0; margin-inline:auto;
  /* Metallkanten. Ett jämnt mörkt fält läser ögat som tryckt papper; en
     riktig telefonkant har smala, ljusa speglingar där fasen vänder. Därför
     de tvära stoppen vid 4 och 95 procent — de är fasen, inte en toning. */
  background:linear-gradient(112deg,
    #46595f 0%, #b3c5cc 3.5%, #7c9199 6%, #28383e 11%,
    #17262c 30%, #0e1a1f 62%,
    #263640 86%, #93a7ae 94.5%, #5e7178 97%, #2b3c44 100%);
  border-radius:11.5%/5.4%;            /* följer bredden, inte en fast radie */
  padding:1.45%;
  /* rotateX 5 och inte 2: med bottenkanten nästan rakt emot syntes ingen
     tjocklek där, och bandet tog slut mitt i hörnet i stället för att gå
     runt det. */
  transform:rotateY(19deg) rotateZ(-2.6deg) rotateX(5deg);
  transform-style:preserve-3d;
  box-shadow:
    -30px 38px 62px -32px rgba(8,42,50,.42),
    -10px 14px 24px -16px rgba(8,42,50,.28),
    0 0 0 .5px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.16) inset,
    0 1px 1px rgba(255,255,255,.10) inset;
}
/* Telefonens sida. Ligger i samma 3D-rymd som framsidan och står vinkelrätt
   mot den, så perspektivet förkortar den av sig självt — det är skillnaden
   mot en toning målad längs kanten, som stannar lika bred oavsett vinkel.
   --tjocklek är telefonens djup. En iPhone är 71 mm bred och 7,8 mm tjock,
   alltså 11 procent av bredden — 42 px på en 400 px bred attrapp. */
/* 56 och inte 42: 42 px är en iPhones verkliga tjocklek i den här skalan,
   men vid 19 graders vridning blir springan bara några bildpunkter bred och
   försvinner mot den mörka ramen. Attrappen får vara en aning tjockare än
   verkligheten för att tjockleken ska gå att se. */
.telefon{--tjocklek:56px}
/* Telefonens RYGG, inte en målad kant. Samma form som framsidan, skjuten en
   kroppstjocklek bakåt i samma 3D-rymd. Springan som syns mellan fram- och
   baksida ÄR tjockleken — och eftersom ryggen ärver samma hörnradie följer
   den varje rundning av sig själv. En plan yta kunde bara täcka den raka
   biten och slutade tvärt före hörnet.
   Tonen: mörkast längs vänsterkanten som ligger i skugga, ljusare ner mot
   hörnet där ljuset tar i, men aldrig vitt — det är borstad metall och inte
   en spegel. */
.telefon-sida{
  position:absolute; inset:0;
  border-radius:inherit;
  transform:translateZ(calc(-1 * var(--tjocklek)));
  /* Lodrätt: vänsterkanten uppe ligger i skugga, nere vid hörnet tar ljuset
     i. Aldrig vitt — det är borstad metall och inte en spegel. */
  background:linear-gradient(178deg,
    #14222833 0%, #1a2a31 10%, #26383f 42%,
    #52666e 70%, #8fa4ac 88%, #A9BCC3 96%, #6b7e86 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.5);
}

/* Den svarta ramen mellan metallen och skärmen. Utan den går kanten rakt
   från metall till vitt, och det är den övergången som avslöjar attrappen. */
.telefon-insida{
  height:100%; padding:1.15%;
  background:#050c0f; border-radius:10.2%/4.8%;
  box-shadow:0 0 0 1px rgba(0,0,0,.9), 0 2px 6px rgba(0,0,0,.45) inset;
}
/* Sidoknapparna. Rena former på ramens vänsterkant — den sida perspektivet
   vänder mot oss. Utan dem läser ögat formen som en svart platta. */
/* Knapparna sitter PÅ sidan, inte ovanpå den. Som barn till sidoytan ligger
   de i samma plan och förkortas med den — låg de på stommen blev de liggande
   streck framför en kant, vilket är just det en attrapp ser ut som.
   Strömknappen finns inte: den sitter på den bortvända kanten och skulle
   inte synas härifrån. */
.telefon-sida::before,.telefon-sida::after{
  content:""; position:absolute; left:-2px; width:7px;
  border-radius:1px;
  background:linear-gradient(90deg,#16262c 0%,#40535b 50%,#7e939b 86%,#33454c 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.45), 0 -1px 1px rgba(255,255,255,.12);
}
.telefon-sida::before{top:20.5%; height:4.2%}                 /* ljud av */
.telefon-sida::after{top:28%;   height:13.5%}                 /* volym */
.telefon{position:relative}
.telefon-insida{position:relative}

/* Kontaktskuggan. Ligger utanför 3D-rymden: en skugga som lutar med
   föremålet läses som ännu ett föremål. */
.telefon-skugga{
  position:absolute; z-index:0; pointer-events:none;
  /* Håller sig innanför behållaren i sidled. Negativa värden här sköt ut
     sidan 10-20 px på alla breddar — en skugga får inte ge sidan rullning. */
  left:0; right:0; bottom:-7%; height:30%;
  background:radial-gradient(52% 46% at 47% 54%,
    rgba(8,42,50,.30) 0%, rgba(8,42,50,.15) 44%, rgba(8,42,50,0) 74%);
  filter:blur(17px);
}
.telefonram{position:relative}
.telefonram .telefon{position:relative; z-index:1}

.telefon-skarm{
  position:relative; background:var(--yta); height:100%;
  border-radius:9.2%/4.3%; overflow:hidden;
}
/* Reflexen i glaset. Kall och svag — en vit toning syns inte mot en vit
   skärm, och allt över några procent äter läsbarheten i innehållet under. */
.telefon-glans{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(109deg,
    rgba(206,228,236,.5) 0%, rgba(206,228,236,.16) 13%,
    rgba(206,228,236,0) 27%);
}
/* På en telefon ska bilden inte vara större än telefonen som håller den.
   I full bredd kapade lutningen dessutom vänsterkanten mot skärmkanten — en
   attrapp som ser sönder ut är sämre än ingen attrapp. Rakt framifrån och
   mindre; perspektivet är en effekt för de breda skärmarna. */
@media(max-width:640px){
  /* Bredden hålls FAST och hela attrappen skalas i stället för att krympas.
     Krymps ramen radbryts innehållet annorlunda, blir högre och klipps — vid
     640 px saknades 420 px. Med fast inre bredd ser bilden likadan ut på alla
     skärmar, bara mindre. Den negativa marginalen tar bort luften som scale
     lämnar efter sig: transform ändrar inte hur mycket plats elementet tar. */
  /* Centreringen flyttas hit: .telefon har negativa sidmarginaler som
     kompenserar skalningen, och de slår ut dess egen margin-inline:auto. */
  /* Den smala skärmen har sin egen skalning sedan tidigare; nollställ
     desktopvariabeln så att marginalerna ovan inte räknas två gånger. */
  .telefonram{
    perspective:none; display:flex; justify-content:center;
    --skala:1; transform:none; margin-block:0;
  }
  .telefon{
    width:420px; flex:none;
    transform:scale(.76); transform-origin:top center;
    /* Både höjd och BREDD måste kompenseras: transform ändrar inte hur mycket
       plats elementet tar, så de 420 px låg kvar och sköt ut sidan i sidled
       på 320 px-skärmar även när telefonen syntes som 231 px. */
    margin-bottom:calc(420px * 19.5 / 9 * -0.24);
    margin-inline:calc(420px * -0.12);
    box-shadow:0 20px 44px -22px rgba(8,42,50,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
  }
  .telefon-sida{display:none}
}
@media(max-width:400px){
  .telefon{transform:scale(.64); margin-bottom:calc(420px * 19.5 / 9 * -0.36);
    margin-inline:calc(420px * -0.18)}
}
@media(max-width:340px){
  .telefon{transform:scale(.55); margin-bottom:calc(420px * 19.5 / 9 * -0.45);
    margin-inline:calc(420px * -0.225)}
}

/* Den dynamiska ön och statusraden.
   Tiden är STATISK med flit och sätts aldrig från klockan. En attrapp som
   visar besökarens egen tid ser ut att vara live, och då börjar man undra
   varför siffrorna i listan inte rör sig. 19:24 är dessutom sant för den här
   produkten: föreningsarbete görs på kvällen, efter träningen.
   Batteriet är av samma skäl en fast nivå — en tom symbol läser som ett fel. */
.telefon-o{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:84px; height:23px; border-radius:999px; background:#0b1a1e; z-index:2;
}
.telefon-status{
  position:absolute; top:0; left:0; right:0; height:43px; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 26px 0 30px; color:var(--ink); pointer-events:none;
}
.telefon-status .tid{
  font-size:.82rem; font-weight:600; letter-spacing:.2px;
  font-variant-numeric:tabular-nums;
}
.telefon-status .tel-ikoner{display:flex; align-items:center; gap:5px}
.telefon-status svg{display:block; fill:currentColor}
/* Flikraden och avslutningen. Speglar den inloggade översikten: samma tre
   flikar i samma ordning, och samma mening sist på sidan. Attrappen visar
   produkten, så den ska visa hela den — inte bara det som säljer bäst. */
.pv-nav{
  display:flex; align-items:center; gap:2px;
  margin:10px 12px 0; padding-bottom:1px;
  border-bottom:1px solid var(--linje);
}
.pv-flik{
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 9px; margin-bottom:-2px;
  font-size:.7rem; font-weight:500; color:var(--dov);
  border-bottom:2px solid transparent; white-space:nowrap;
}
.pv-flik svg{width:13px; height:13px; flex:none}
.pv-har{color:var(--petrol-700); border-bottom-color:var(--petrol-600); font-weight:600}
.pv-slut{
  margin:14px 16px 0; font-size:.68rem; line-height:1.55; color:var(--dov);
}

.telefon-adress{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin:44px 12px 0; padding:8px 14px;
  background:var(--yta-2); border:1px solid var(--linje); border-radius:var(--r-pill);
  font-family:var(--mono); font-size:.72rem; color:var(--dov);
}
.telefon .pv-kropp{padding:var(--s4)}
/* Skärmen blev smalare av den svarta ramen, och 108:an tryckte ut
   84 %-pillret på egen rad. Talet är det som ska läsas först, men
   inte på bekostnad av raden. */
.telefon .pv-total{font-size:1.9rem}
.telefon .pv-rubrik{gap:var(--s3)}
.telefon .statrad{grid-template-columns:1fr 1fr}

/* ── Komponent: produktvy ──────────────────────────────────────────────
   Produkten är bildspråket. Inga stockbilder. */
.produktvy{
  background:var(--yta); border:1px solid var(--linje);
  border-radius:var(--r-kort); box-shadow:var(--skugga-lyft); overflow:hidden;
}
.pv-topp{
  display:flex; align-items:center; gap:9px;
  padding:12px 16px; background:var(--yta-2); border-bottom:1px solid var(--linje);
}
.pv-prick{width:9px; height:9px; border-radius:50%; background:var(--linje-2); flex:none}
/* Adressen är det längsta i webbläsarraden och den enda delen som får
   krympa. Utan min-width:0 vägrar ett flex-barn bli smalare än sitt
   innehåll: en adress på 37 tecken sköt ut hela sidan 5 px vid 320 px. */
.pv-adress{
  font-family:var(--mono); font-size:.74rem; color:var(--dov);
  background:var(--yta); border:1px solid var(--linje); border-radius:var(--r-pill);
  padding:4px 13px; margin-left:6px;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pv-kropp{padding:var(--s5)}
.pv-rubrik{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s5)}
.pv-total{font-size:2.4rem; font-weight:700; color:var(--ink); line-height:1; letter-spacing:-.03em}
.pv-total span{font-size:.95rem; font-weight:500; color:var(--dov); letter-spacing:0; margin-left:9px}

.statrad{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:var(--s3); margin-bottom:var(--s5)}
.stat{border:1px solid var(--linje); border-radius:var(--r-liten); padding:13px 15px; background:var(--yta)}
.stat b{display:block; font-size:1.7rem; font-weight:700; line-height:1.05; letter-spacing:-.025em}
.stat span{display:flex; align-items:center; gap:6px; font-size:.79rem; font-weight:600; margin-top:5px}
.stat svg{width:13px; height:13px; flex:none}
.s-ok b,.s-ok span{color:var(--ok)}          .s-ok{background:var(--ok-bg); border-color:var(--ok-line)}
.s-vantar b,.s-vantar span{color:var(--vantar)} .s-vantar{background:var(--vantar-bg); border-color:var(--vantar-line)}
.s-atgard b,.s-atgard span{color:var(--atgard)} .s-atgard{background:var(--atgard-bg); border-color:var(--atgard-line)}
.s-neutral b,.s-neutral span{color:var(--neutral)} .s-neutral{background:var(--neutral-bg); border-color:var(--neutral-line)}

/* Framstegsmätare */
.matare{height:9px; border-radius:var(--r-pill); background:var(--yta-2); overflow:hidden; display:flex; margin-bottom:var(--s5)}
.matare i{display:block; height:100%}

/* Personlista i produktvyn */
.pvlista{border:1px solid var(--linje); border-radius:var(--r-liten); overflow:hidden}
.pvrad{display:flex; align-items:center; gap:var(--s3); padding:11px 15px; border-bottom:1px solid var(--linje)}
.pvrad:last-child{border-bottom:0}
.pvnamn{flex:1; min-width:0}
.pvnamn b{display:block; font-size:.9rem; color:var(--ink); font-weight:600}
.pvnamn span{font-size:.78rem; color:var(--dov)}
.pvdatum{font-family:var(--mono); font-size:.76rem; color:var(--dov); white-space:nowrap}
/* På de smalaste telefonerna tar det nowrap-satta datumet så mycket av raden
   att namnet bryts mitt itu — och ett brutet namn läser som två personer.
   Under 360 px får datumet i stället lägga sig under namnet. */
@media (max-width:360px){
  .pvrad{flex-wrap:wrap; row-gap:2px}
  .pvnamn{flex:1 0 100%}
}

/* ── Komponent: flödesdiagram ─────────────────────────────────────────
   Automationen som återkommande visuellt element. */
.flode{display:grid; gap:var(--s2); counter-reset:fl}
.fl{
  display:flex; align-items:center; gap:var(--s4);
  background:var(--yta); border:1px solid var(--linje);
  border-radius:var(--r-liten); padding:15px 18px;
}
.fl-ikon{
  width:38px; height:38px; border-radius:var(--r-liten); flex:none;
  display:grid; place-items:center; background:var(--petrol-100); color:var(--petrol-700);
}
.fl-ikon svg{width:19px; height:19px}
.fl-txt{flex:1; min-width:0}
.fl-txt b,.fl-txt span{overflow-wrap:anywhere}
.fl-txt b{display:block; font-size:.96rem; color:var(--ink); font-weight:600}
.fl-txt span{font-size:.85rem; color:var(--dov)}
.fl-vem{
  font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:var(--r-pill); white-space:nowrap; flex:none;
}
.v-ni{background:var(--petrol-800); color:#fff}
.v-oss{background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-line)}
.fl-pil{display:grid; place-items:center; color:var(--linje-2); height:14px}
.fl-pil svg{width:15px; height:15px}
.fl.slut{border-color:var(--ok-line); background:var(--ok-bg)}
.fl.slut .fl-ikon{background:#fff; color:var(--ok)}
.fl.slut .fl-txt b{color:var(--ok)}

/* ── Komponent: integritetsspalter ─────────────────────────────────── */
.spalt{background:var(--yta); border:1px solid var(--linje); border-radius:var(--r-kort); padding:var(--s5)}
.mork .spalt{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.13)}
.spalt h3{display:flex; align-items:center; gap:10px; margin-bottom:var(--s4)}
.spalt h3 svg{width:19px; height:19px; flex:none}
.lista{list-style:none; display:grid; gap:11px}
.lista li{display:flex; gap:11px; align-items:flex-start; font-size:.94rem}
.lista .m{flex:none; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:.72rem; font-weight:700; margin-top:1px}
.ja .m{background:var(--ok-bg); color:var(--ok)}
.nej .m{background:var(--atgard-bg); color:var(--atgard)}
.mork .ja .m{background:rgba(30,160,110,.2); color:#7FD8B4}
.mork .nej .m{background:rgba(200,80,60,.2); color:#F0A08C}

/* ── Header ────────────────────────────────────────────────────────── */
.topp{
  position:sticky; top:0; z-index:50;
  background:rgba(247,249,250,.88); backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--linje);
}
.toppinne{display:flex; align-items:center; justify-content:space-between; gap:var(--s5); padding:14px 0}
.topp img{height:29px; width:auto; display:block}
/* Symbolen ensam säger inte vad tjänsten heter. Namnet står som HTML-text
   och inte som bild: logotyp.svg bär visserligen ordmärket, men stackat
   under symbolen och med Arial som reservsnitt — en SVG med text renderas
   med betraktarens typsnitt. Som text här ärver den sajtens eget snitt och
   blir skarp i alla storlekar. Punkt-se är grön som i märket fast i --ok:s
   mörkare ton: toppen är halvgenomskinlig med backdrop-filter, så
   underlaget är det som råkar rulla förbi och inte ett känt vitt. */
.topp .mark{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:700; font-size:1.05rem; letter-spacing:-.02em;
  color:var(--ink); white-space:nowrap;
}
.topp .mark:hover{text-decoration:none}
.topp .mark .se{color:var(--ok)}
.toppnav{display:flex; align-items:center; gap:var(--s5)}
/* :not(.knapp) är bärande. Utan den vinner `.toppnav a` (klass + element) över
   `.k-primar` (bara klass), och knappens vita text blir brödtextgrå på
   petrolbakgrund — praktiskt taget osynlig. Regeln gäller textlänkarna. */
.toppnav a:not(.knapp){font-size:.9rem; font-weight:500; color:var(--ink-2)}
.toppnav a:not(.knapp):hover{color:var(--petrol-700); text-decoration:none}
.toppnav .knapp{padding:11px 19px; min-height:44px; font-size:.88rem}
@media(max-width:760px){ .toppnav a:not(.knapp){display:none} }

/* ── Hero ──────────────────────────────────────────────────────────── */
/* En svag ljusgård bakom telefonen. Platt bakgrund gör att ett föremål med
   djup ändå ser uppklistrat ut — det finns inget rum omkring det. Tonen är
   sajtens egen petrol, inte en främmande färg: den ska märkas som ljus och
   inte som en fläck. Ligger på ::before så innehållet står över den. */
.hero{padding:var(--s9) 0 var(--s8); position:relative; isolation:isolate}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46% 58% at 76% 46%, rgba(18,80,92,.09) 0%, rgba(18,80,92,0) 68%),
    radial-gradient(30% 34% at 84% 76%, rgba(22,112,79,.055) 0%, rgba(22,112,79,0) 70%);
}
.heroinne{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:var(--s8); align-items:center}
/* minmax(0,1fr), inte 1fr: spårets automatiska min-bredd är innehållets,
   och telefonens 340 px tryckte annars ut sidan i sidled på en 320-skärm. */
@media(max-width:980px){ .heroinne{grid-template-columns:minmax(0,1fr); gap:var(--s7)} }
.hero h1 em{font-style:normal; color:var(--petrol-700)}
.hero .lede{margin-top:var(--s5)}
.trygghetsrad{display:flex; flex-wrap:wrap; gap:var(--s5); margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--linje)}

/* ── Pris ──────────────────────────────────────────────────────────── */
.pris{background:var(--yta); border:1px solid var(--linje); border-radius:var(--r-kort); padding:var(--s7); text-align:center; box-shadow:var(--skugga)}
.pris .siffra{display:block; font-size:1.7rem; font-weight:700; color:var(--ink); letter-spacing:-.025em}
/* Prisstege. Nivåerna ska gå att skanna på en rad var — inga kolumnkort som
   inbjuder till att jämföra funktioner, för alla funktioner ingår. */
.erbjudande{
  max-width:620px; margin:0 auto var(--s6); text-align:center;
  background:var(--petrol-800); color:#CFE3E6;
  border-radius:var(--r-kort); padding:var(--s6) var(--s5);
}
.erbjudande h3{color:#fff; font-size:1.32rem; margin:var(--s4) 0 var(--s3)}
.erbjudande p{color:#B7D0D4; font-size:.95rem; margin-inline:auto; max-width:46ch}
.erbjudande .pill{background:rgba(255,255,255,.13); color:#fff; border-color:rgba(255,255,255,.22)}

.stege{display:grid; gap:8px; max-width:560px; margin:var(--s6) auto 0}
.sniva{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);
  padding:14px 18px; border:1px solid var(--linje); border-radius:var(--r-liten);
  background:var(--yta); text-align:left; flex-wrap:wrap;
}
/* Två priser bredvid varandra ryms inte på en smal telefon. Nivån får en rad,
   priserna nästa — hellre det än att sidan scrollar i sidled. */
@media(max-width:420px){
  .sniva{padding:12px 14px}
  .sniva b{flex:1 0 100%}
  .sniva .pr{font-size:.94rem; gap:8px}
}
.sniva b{font-size:.98rem; color:var(--ink); font-weight:600}
.sniva .pr{font-family:var(--mono); font-size:1.02rem; font-weight:500; color:var(--ink); white-space:nowrap;
  display:inline-flex; align-items:baseline; gap:10px}
/* Fullpriset stryks men står kvar — rabatten betyder ingenting utan det man
   jämför med. Röd på det halva, som på en prislapp. */
.sniva .pr s{color:var(--dov); text-decoration-thickness:1.5px; font-size:.92rem}
.sniva .pr em{font-style:normal; color:var(--atgard); font-weight:600}
.rabattflagg{
  display:inline-flex; align-items:center; gap:7px; margin:0 auto var(--s4);
  background:var(--atgard-bg); color:var(--atgard); border:1px solid var(--atgard-line);
  border-radius:var(--r-pill); padding:7px 15px; font-size:.82rem; font-weight:600;
}
.rabattflagg svg{width:14px; height:14px}
/* Ingen rad framhävs. Den första var markerad förut och läste som "vald" —
   men det finns inget val att göra i en prislista, och en förening med 300
   ledare ska inte tro att 50-nivån är den rekommenderade. */
.sniva.offert .pr{color:var(--dov)}

.pris ul{list-style:none; display:grid; gap:11px; max-width:430px; margin:var(--s6) auto 0; text-align:left}
.pris li{display:flex; gap:11px; font-size:.94rem}
.pris li svg{width:17px; height:17px; color:var(--ok); flex:none; margin-top:3px}

/* ── FAQ ───────────────────────────────────────────────────────────── */
.f{border-bottom:1px solid var(--linje)}
.f summary{
  cursor:pointer; list-style:none; padding:20px 0; font-weight:600; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4); font-size:1.02rem;
}
.f summary::-webkit-details-marker{display:none}
.f summary::after{content:"+"; font-size:1.35rem; color:var(--dov); font-weight:400; line-height:1}
.f[open] summary::after{content:"–"}
.f .svar{padding:0 0 22px; font-size:.96rem; max-width:70ch}

/* ── Formulär ──────────────────────────────────────────────────────── */
.falt{margin-bottom:var(--s4)}
.falt label{display:block; font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:7px}
.falt input{
  width:100%; font-family:inherit; font-size:1rem; color:var(--ink);
  padding:14px 15px; min-height:48px;
  border:1px solid var(--linje-2); border-radius:var(--r-liten); background:var(--yta);
}
.falt input:focus{outline:2px solid var(--petrol-600); outline-offset:1px; border-color:transparent}
.kolista{background:var(--yta); border:1px solid var(--linje); border-radius:var(--r-kort); padding:var(--s6); box-shadow:var(--skugga)}
/* Turnstiles widget har fast bredd (~300 px). I ett smalt formulär sprängde
   den sidan i sidled — låt behållaren scrolla i stället för sidan. */
.cf-turnstile{max-width:100%; overflow-x:auto}

/* ── Footer ────────────────────────────────────────────────────────── */
footer{background:var(--petrol-900); color:#9DB6BB; padding:var(--s8) 0 var(--s6); font-size:.9rem}
footer img{height:27px; width:auto; filter:brightness(0) invert(1); opacity:.94}
/* Märket i foten är redan ljust ritat och ska INTE inverteras — filtret ovan
   gäller ansvarig utgivares ordmärke, som bara finns i mörkt. Inverterat hade
   märkets enda färg, den gröna bocken, blivit vit. */
footer img.marke{filter:none; opacity:1}
/* Undersidornas smala fot: märket före namnet, hela raden en länk hem. */
.footmarke{display:inline-flex; align-items:center; gap:10px; text-decoration:none}
.footmarke:hover{text-decoration:none}
.footmarke img{height:24px}
footer a{color:#C6D8DB}
footer b{display:block; color:#fff; font-size:.86rem; margin-bottom:13px; font-weight:600}
/* Ansvarig utgivare i fotens nedersta rad. Ordmärket inverteras till vitt av
   footer img-regeln ovan; raden får inte brytas mitt i logga-och-namn. */
.footjakvab{display:inline-flex; align-items:center; gap:4px; flex-wrap:wrap}
footer ul{list-style:none; display:grid; gap:9px}
.footgrid{display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:var(--s5)}
@media(max-width:820px){ .footgrid{grid-template-columns:1fr 1fr} }
.footbotten{
  display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between;
  margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid rgba(255,255,255,.11); font-size:.83rem;
}

/* ── Mobil ─────────────────────────────────────────────────────────── */
@media(max-width:640px){
  body{font-size:16px}
  section{padding:var(--s8) 0}
  .wrap{width:calc(100% - 32px)}
  .knappar .knapp{width:100%}
  .pv-total{font-size:2rem}
  .kolista{padding:var(--s4)}
  .kort{padding:var(--s4)}
  /* På riktigt smala skärmar får ansvarsmärket lägga sig under raden.
     min-width på texten är det som FAKTISKT knuffar ned märket. Utan den
     räcker flex-wrap inte: .fl-txt har min-width:0 och krymper i stället,
     och eftersom .fl-txt b tillåter brytning var som helst bryts rubriken
     mitt i ordet — "Påminnelse|r skickas". Raden ser ut att rymmas, men
     bara för att orden gått sönder. */
  .fl{flex-wrap:wrap}
  .fl-txt{min-width:calc(100% - 38px - var(--s4))}
  .fl-vem{margin-left:54px}
}


/* ── Komponent: uppgiftslista ──────────────────────────────────────────
   Etikett och värde måste gå att skilja åt på en halv sekund. Innan den
   här fanns stod "E-post" och "bo@example.se" i samma vikt och storlek,
   staplade — listan lästes som en enda rad text.

   Etiketten är mindre, dämpad och versal; värdet bär tyngden. På smala
   skärmar staplas de, men hierarkin håller eftersom den ligger i typografin
   och inte i kolumnerna. */
.dl{display:grid; grid-template-columns:minmax(120px,auto) 1fr; gap:10px var(--s5); align-items:baseline}
.dl dt{
  font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--dov); line-height:1.5;
}
.dl dd{font-size:.95rem; color:var(--ink); font-weight:500; line-height:1.5; min-width:0; overflow-wrap:anywhere}
.dl dd .mono{font-size:.88rem}
.dl dd.tom{color:var(--dov); font-weight:400}
@media(max-width:520px){
  .dl{grid-template-columns:1fr; gap:2px}
  .dl dt{margin-top:var(--s3)}
  .dl dt:first-child{margin-top:0}
}

/* ── Komponent: wizardsteg ───────────────────────────────────────────── */
.wizsteg{display:flex; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s5)}
.wizsteg .steg{
  display:inline-flex; align-items:center; gap:8px; font-size:.82rem; font-weight:600;
  padding:7px 14px 7px 9px; border-radius:var(--r-pill);
  background:var(--yta-2); color:var(--dov); border:1px solid var(--linje);
}
.wizsteg .steg .nr{
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  background:var(--linje); color:var(--dov); font-size:.72rem; flex:none;
}
.wizsteg .steg.nu{background:var(--petrol-100); color:var(--petrol-800); border-color:var(--petrol-600)}
.wizsteg .steg.nu .nr{background:var(--petrol-700); color:#fff}
.wizsteg .steg.klar{background:var(--ok-bg); color:var(--ok); border-color:var(--ok-line)}
.wizsteg .steg.klar .nr{background:var(--ok); color:#fff}

/* ── Komponent: sektionsrubrik i appvyerna ───────────────────────────── */
.etikett{
  display:block; font-size:.72rem; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--dov); margin-bottom:6px;
}


/* ── Komponent: teknisk dokumentation ──────────────────────────────────
   Bara /for-utvecklare använder det här. Egna klasser och inte bara <pre>,
   eftersom ett kodblock som svämmar över horisontellt sabbar hela sidans
   bredd på mobil — därför overflow-x på blocket självt. */
.kodblock{
  background:var(--petrol-900, #12262C); color:#D6E4E7;
  border-radius:var(--r-liten); padding:15px 17px; margin:var(--s3) 0;
  font-family:var(--mono); font-size:.79rem; line-height:1.72;
  overflow-x:auto; white-space:pre;
}
.kodblock .kb-met{color:#7FD8B4; font-weight:500}   /* HTTP-metod */
.kodblock .kb-kom{color:#8AA3A9}                     /* kommentar */
.kodblock .kb-nyk{color:#9FC7F0}                     /* JSON-nyckel */
.kodblock .kb-str{color:#F0C08C}                     /* strängvärde */
/* Löpande dokumentation. .dov är byggd för kort där ett stycke räcker och
   sätter därför ingen marginal — flera stycken efter varandra klistras ihop
   till en vägg. Luften läggs här och inte på .dov, så korten står orörda. */
.dokument p{margin-bottom:var(--s4)}
.dokument h2{margin-top:var(--s7)}
.dokument h3{margin-top:var(--s5)}
code.i-text{
  font-family:var(--mono); font-size:.86em; background:var(--petrol-100);
  color:var(--petrol-800); padding:1px 5px; border-radius:4px;
  overflow-wrap:anywhere;
}
/* Fälttabell. Tabeller är rätt form här: läsaren jämför fält mot fält. */
.falttabell{width:100%; border-collapse:collapse; margin:var(--s3) 0}
.falttabell th,.falttabell td{
  text-align:left; padding:9px 12px 9px 0; border-bottom:1px solid var(--linje);
  vertical-align:top; font-size:.88rem;
}
.falttabell th{
  font-size:.72rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--dov); font-weight:600; border-bottom:1px solid var(--linje-2);
}
.falttabell td:first-child{font-family:var(--mono); font-size:.8rem;
  color:var(--petrol-800); white-space:nowrap; padding-right:var(--s4)}
.falttabell .kravs{color:var(--atgard); font-weight:600}
/* Första kolumnen är monospace för att den brukar bära fältnamn. Bär den i
   stället ett skärmnamn i löptext ser namnet ut som en identifierare. */
.falttabell.namnkol td:first-child{font-family:inherit; font-size:.88rem;
  font-weight:600; color:var(--text); white-space:normal}
/* Och när BÄGGE kolumnerna bär löptext. `nowrap` på förstakolumnen gjorde en
   mening oändligt bred: tabellen sprängde sitt svep och andra kolumnen hamnade
   utanför bild, oläsbar. Halvfet som i .namnkol är för tungt för en hel
   mening — det här är vanlig brödtext. */
.falttabell.lopande td:first-child{font-family:inherit; font-size:.88rem;
  font-weight:400; color:var(--text); white-space:normal; padding-right:var(--s5)}
/* Prisbandet på partnersidan. Priset är en startpunkt, inte en prislista:
   "från" bär hela skillnaden, och det ska synas i typografin också. */
.prisband{
  display:flex; flex-wrap:wrap; gap:var(--s5) var(--s7); align-items:center;
  justify-content:space-between; margin:var(--s6) 0 var(--s7);
  padding:var(--s5) var(--s6); border:1px solid var(--linje);
  border-radius:var(--r-liten); background:var(--yta-2, #fff);
}
/* Egna namn, inte .pris — den klassen är startsidans prislista och bär en
   kortram med skugga. Ärvde bandet den hamnade siffran i en vit ruta. */
.pb-del{flex:1 1 260px; min-width:0}
.pb-tal{margin:0 0 4px; font-size:1.15rem; line-height:1.3}
.pb-tal b{font-size:1.7rem; letter-spacing:-.02em; color:var(--ink)}
.pb-lista{flex:1 1 320px; margin:0; padding:0; list-style:none; font-size:.88rem; color:var(--dov)}
.pb-lista li{position:relative; padding-left:22px; margin-bottom:5px}
.pb-lista li::before{
  content:''; position:absolute; left:4px; top:.52em; width:7px; height:7px;
  border-radius:50%; background:var(--ok, #1f7a5a);
}
@media(max-width:640px){
  .prisband{padding:var(--s5)}
  .pb-tal b{font-size:1.5rem}
}
.tabellsvep{overflow-x:auto}
/* Förhandsbeskedet. Sidan beskriver ett kontrakt som ännu inte svarar, och
   det får aldrig gå att missa — därför överst, inte i en fotnot. */
.forhandsruta{
  border:1px solid var(--atgard-line, #E6C4B8); background:var(--atgard-bg);
  border-radius:var(--r-liten); padding:var(--s4) var(--s5); margin:var(--s5) 0;
}
.forhandsruta b{color:var(--atgard)}


/* Adressen i ett guidesteg. Skrivs ut i klartext och inte bara som en knapp:
   guiden läses ofta på en annan skärm än den man beställer på, och ibland på
   papper. overflow-wrap gör att en lång adress bryts i stället för att skjuta
   ut kortet i sidled på en telefon. */
.steg-adress{margin-top:9px}
.steg-adress a{
  font-family:var(--mono); font-size:.8rem; color:var(--petrol-700);
  overflow-wrap:anywhere; text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
}
.steg-adress a:hover{color:var(--petrol-800)}


/* ── Komponent: kodflikar ──────────────────────────────────────────────
   Samma sak i tre språk. Utan flikar blir sidan tre gånger längre för en
   läsare som bara bryr sig om ett av dem.

   Panelerna är SYNLIGA som standard och göms av skriptet först när det
   körts. Faller skriptet, eller läser någon sidan i en utskrift, får de allt
   innehåll i stället för en rad knappar som inte gör något. */
.flikar{margin:var(--s4) 0}
.flikknappar{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:-1px}
.flikknappar button{
  font:inherit; font-size:.82rem; font-weight:600; cursor:pointer;
  padding:8px 15px; border-radius:var(--r-liten) var(--r-liten) 0 0;
  border:1px solid transparent; background:none; color:var(--dov);
}
.flikknappar button:hover{color:var(--ink)}
.flikknappar button[aria-selected="true"]{
  background:var(--petrol-900,#12262C); color:#fff;
}
.flikar .kodblock{margin-top:0; border-radius:0 var(--r-liten) var(--r-liten)}
.flik-rubrik{
  font-size:.74rem; letter-spacing:.07em; text-transform:uppercase;
  color:var(--dov); font-weight:600; margin:var(--s4) 0 6px;
}
/* Skriptet har tagit över: då bär knapparna informationen i stället. */
.flikar[data-redo] .flik-rubrik{display:none}
.flikar[data-redo] .flik[hidden]{display:none}


/* ── Komponent: skärmförhandsvisning ───────────────────────────────────
   Ramen visar DEMOT, inte ett riktigt ram-API — det finns inte byggt. Därför
   står det i klartext under rutan; en förhandsvisning som ser ut som en
   fungerande integration vore ett löfte vi inte kan hålla. */
.skarmval{display:flex; gap:6px; flex-wrap:wrap; margin:var(--s4) 0 var(--s3)}
.skarmval button{
  font:inherit; font-size:.82rem; font-weight:600; cursor:pointer;
  padding:7px 14px; border-radius:var(--r-pill);
  border:1px solid var(--linje); background:var(--yta); color:var(--dov);
}
.skarmval button:hover{border-color:var(--linje-2); color:var(--ink)}
.skarmval button[aria-pressed="true"]{
  background:var(--petrol-800); border-color:var(--petrol-800); color:#fff;
}
.skarmruta{
  background:var(--yta-2); border:1px solid var(--linje);
  border-radius:var(--r-liten); padding:var(--s5);
  display:flex; justify-content:center;
}
/* Egen ram här och inte .telefon: den bär perspektiv, skalning per brytpunkt
   och sidoknappar som hör hemma i hjältebilden, inte i en dokumentationsruta
   där man faktiskt ska kunna läsa och klicka. */
.skarmtelefon{
  width:min(360px,100%); aspect-ratio:9/19.5;
  background:#0b1a1e; border-radius:11.5%/5.4%; padding:1.7%;
  box-shadow:0 18px 40px -22px rgba(8,42,50,.45);
}
.skarmtelefon iframe{
  width:100%; height:100%; border:0; display:block;
  border-radius:9.6%/4.5%; background:var(--yta);
}
.skarmnot{margin-top:var(--s3); font-size:.84rem}

/* ── Modal ────────────────────────────────────────────────────────────
 *
 * <dialog> med showModal(), inte en egen div med overlay. Webbläsaren ger
 * fokusfälla, Esc, inert bakgrund och rätt roll åt en skärmläsare — allt
 * sådant man annars bygger fel. Det enda som behöver skrivas är utseendet.
 */
.modal{
  border:0; padding:0; background:transparent; max-width:none; max-height:none;
  width:100%; height:100%; overflow:auto;
}
.modal::backdrop{background:rgba(11,31,38,.55)}
.modal .modalkort{
  background:var(--yta-2, #fff); border-radius:var(--r); max-width:520px;
  margin:var(--s7) auto; padding:var(--s6);
  /* Säkerhetsmarginalerna: en modal på en telefon får inte hamna under
     kameran eller hemknappen. */
  margin-top:calc(var(--s7) + env(safe-area-inset-top, 0px));
  margin-bottom:calc(var(--s7) + env(safe-area-inset-bottom, 0px));
  box-shadow:0 18px 50px rgba(11,31,38,.22);
}
.modal .modalhuvud{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s4); margin-bottom:var(--s4);
}
.modal .modalhuvud h2{margin:0; font-size:1.35rem}
/* Stängkrysset är en riktig knapp med tillgängligt namn, inte ett tecken. */
.modal .stang{
  flex:0 0 auto; border:0; background:transparent; cursor:pointer;
  color:var(--dov); font-size:1.5rem; line-height:1; padding:2px 6px;
  border-radius:var(--r-liten);
}
.modal .stang:hover{color:var(--text); background:var(--yta-3, #eef2f3)}
.modal .stang:focus-visible{outline:2px solid var(--petrol-500); outline-offset:2px}
@media (max-width:560px){
  .modal .modalkort{margin-inline:var(--s3); padding:var(--s5)}
}

/* Bara för skärmläsare: texten finns, men syns inte. Låg förut bara i
   utvecklarsidans egen stil — partnersidans tabellrubrik använde klassen
   och syntes därför för alla. */
.blott-upplast{position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap}