/* Startsidan (index.html). Typsnitt, färger, header, knappar och footer
   ligger i gemensam.css (laddas före den här filen); här finns bara
   startsidans egna sektioner. */

/* ---------- typografi ---------- */
.rubrikblock { max-width: 660px; }
.rubrikblock h2 {
  font-family: var(--rubrik-typsnitt);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--svart-färg);
  text-wrap: balance;
}
.rubrikblock > p {
  margin-top: 16px;
  color: var(--dämpad-färg);
  font-size: var(--fs-ingress);
  line-height: 1.65;
}
.rubrikblock a { color: var(--accent-färg); text-underline-offset: 3px; }
.rubrikblock-centrerat { margin-inline: auto; text-align: center; }

/* ---------- hero ---------- */
/* Ljus hero: vit bakom texten, som långsamt tonar mot ljust blågrått
   nertill, med en svag dragning åt accentfärgen bakom jämförelsen. Det
   lyfter fram fönstret och sifferkortet (och mellanrummet mellan dem).
   En tunn linje nertill, som på .band-ljusgrå, skiljer heron från den
   vita sektionen under. Ordningen är rubrik, jämförelse, underrubrik och
   knappar, allt centrerat. */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  background:
    radial-gradient(70% 55% at 50% 85%, rgba(26, 55, 98, 0.1), transparent 70%),
    linear-gradient(180deg, var(--vit-färg) 0%, var(--vit-färg) 35%, #f3f5f8 100%);
  border-bottom: 1px solid var(--linje-färg);
  color: var(--text-färg);
}
/* Pixelrutnät bakom heron, en nick åt namnet: ett fint punktrutnät (24 px)
   och glesa, ifyllda "pixlar" i accentblått (assets/pixlar.svg, ritad på
   samma rutnät, 1440 px = 60 rutor). Rutorna räknas från mitten i båda
   lagren, så att de alltid ligger kant i kant. Allt tonar bort under
   headern, bakom rubriken och mot nederkanten. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, transparent 30%, #000 80%), linear-gradient(transparent var(--header-h), #000 calc(var(--header-h) + 80px), #000 60%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 60% 55% at 50% 30%, transparent 30%, #000 80%), linear-gradient(transparent var(--header-h), #000 calc(var(--header-h) + 80px), #000 60%, transparent);
  mask-composite: intersect;
}
.hero::before {
  background: radial-gradient(circle, rgba(26, 55, 98, 0.22) 1.2px, transparent 1.7px) calc(50% + 12px) 0 / 24px 24px;
}
.hero::after {
  opacity: 0.7;
  background: url('../assets/pixlar.svg') 50% 0 / 1440px 900px no-repeat;
}
.hero-inner {
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--header-h) + clamp(32px, 7vh, 80px));
  padding-bottom: clamp(32px, 6vh, 64px);
}
.hero-topp {
  display: grid;
  justify-items: center;
  text-align: center;
}
.hero h1 {
  max-width: 900px;
  color: var(--svart-färg);
  font-family: var(--rubrik-typsnitt);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hero-underrubrik {
  max-width: 720px;
  margin-top: clamp(20px, 3vh, 32px);
  text-wrap: balance;
  color: #3d434c;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
}
.knappar { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.hero .knapp-glas { border-color: var(--kant-färg); background: rgba(255, 255, 255, 0.6); color: var(--svart-färg); }
@media (hover: hover) { .hero .knapp-glas:hover { background: var(--vit-färg); } }
@media (max-width: 767px) {
  .knappar .knapp { flex: 1 1 auto; }
}

/* Före/efter: varje lager är ett webbläsarfönster med skärmdump (16:10)
   och, efter ett genomskinligt mellanrum, ett sifferkort. "Efter"-lagret
   ligger ovanpå och klipps vid --pos (sätts av scripts/jamfor.js), så att
   både bilden och siffrorna byts i samma takt som handtaget, kolumn för
   kolumn. Före-lagret ligger i flödet och bestämmer höjden. Reglaget ligger osynligt ovanpå hela ytan, så att det
   går att dra var som helst och fungerar med tangentbord. */
/* Upp till 1080 px bred, men helst inte större än att rubriken (~260 px
   på desktop) och hela jämförelsen (fönster, sifferkort och bildtext,
   ~150 px utöver skärmdumpen) ryms på skärmen under headern. Skärmdumpen
   är 16:10, därav * 1.6. Aldrig smalare än 560 px (eller hela bredden),
   så att skärmdumparna går att läsa och sifferkortet får plats: på låga
   skärmar (laptop, mobil på tvären) får jämförelsen hellre gå under
   vecket än krympa. På mobil fyller den bredden. */
.jämför {
  --jämför-skugga: 0 2px 6px rgba(8, 9, 10, 0.06), 0 30px 60px -30px rgba(60, 40, 20, 0.3);
  width: clamp(min(100%, 560px), (100svh - var(--header-h) - 410px) * 1.6, min(100%, 1080px));
  margin: clamp(28px, 4vh, 44px) 0 0;
}
@media (max-width: 767px) {
  .jämför { width: 100%; }
}
.jämför .webbläsarram { position: relative; box-shadow: var(--jämför-skugga); }
.jämför-yta {
  --pos: 50%;
  position: relative;
  user-select: none;
}
.jämför-lager { position: relative; }
.jämför-efter { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
/* Skärmdumparna är 1600 x 1000 px; den gråa bakgrunden syns bara medan
   de laddas. */
.jämför-lager img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #d6d8dc; }
/* Etiketterna har samma röda och gröna som siffrorna i kortet, så att
   man direkt ser vilken sida som är vilken. Grönt är mörkare än --bra,
   så att den vita texten får tillräcklig kontrast. */
.jämför-etikett {
  position: absolute;
  top: 50px;
  padding: 5px 14px;
  border-radius: 999px;
  color: var(--vit-färg);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.jämför-före .jämför-etikett { left: 14px; background: var(--dålig); }
.jämför-efter .jämför-etikett { right: 14px; background: #0a7d46; }

/* Sifferkortet: tre lika breda kolumner på samma plats i båda lagren,
   med samma ram, hörn och skugga som fönstret ovanför. */
.jämför-fot {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 12px 0 0;
  padding: 10px 0;
  border: 1px solid var(--linje-färg);
  border-radius: 16px;
  background: var(--vit-färg);
  box-shadow: var(--jämför-skugga);
  text-align: center;
}
.jämför-fot dt { color: var(--dämpad-färg); font-size: 12px; font-weight: 500; }
.jämför-fot dd { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Kortet har samma bakgrund som sin sidas skärmdump, så att delningen
   syns även i kortet. */
.jämför-före .jämför-fot { background: #f5f5f5; }
.jämför-efter .jämför-fot { background: #f4f0e7; }
.mått-dålig { color: var(--dålig); }
.mått-bra { color: var(--bra); }
@media (max-width: 559px) {
  .jämför-etikett { top: 32px; padding: 3px 10px; font-size: 12px; }
  .jämför-före .jämför-etikett { left: 8px; }
  .jämför-efter .jämför-etikett { right: 8px; }
  .jämför-fot { margin-top: 8px; padding: 8px 0; border-radius: 8px; }
  .jämför-fot dt { font-size: 11px; }
  .jämför-fot dd { font-size: 14px; }
}

.jämför-handtag {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--accent-färg);
  pointer-events: none;
}
.jämför-handtag::after {
  content: "‹ ›";
  position: absolute;
  top: 44%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-färg);
  color: var(--vit-färg);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.jämför-reglage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.jämför-yta:has(.jämför-reglage:focus-visible) .jämför-handtag::after { outline: 2px solid var(--links-färg); outline-offset: 2px; }
.jämför-text { margin-top: 12px; color: #3d434c; font-size: 14px; text-align: center; }

/* ---------- sektioner ---------- */
.band { padding-block: var(--sektion-luft); }
.band-vit { background: var(--vit-färg); }
/* Ljusgrått band med tunna linjer upptill och nedtill, för att bryta av
   de vita sektionerna. */
.band-ljusgrå { background: var(--bakgrund-färg); border-block: 1px solid var(--linje-färg); }
/* Två kolumner: text + media. -omvänd lägger mediet till vänster. */
.delad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.delad-topp { align-items: start; }
.delad-omvänd > :first-child { order: 2; }
.delad-media { display: flex; justify-content: center; }
@media (max-width: 899px) {
  .delad { grid-template-columns: minmax(0, 1fr); }
  .delad-omvänd > :first-child { order: 0; }
}

/* Hopfällbar finstilt (källor, förbehåll). */
.finstilt-details { margin-top: 20px; color: var(--dämpad-färg); font-size: 14px; line-height: 1.55; }
.finstilt-details summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
}
.finstilt-details summary::-webkit-details-marker { display: none; }
.finstilt-details summary::after { content: "+"; font-size: 16px; line-height: 1; }
.finstilt-details[open] summary::after { content: "–"; }
.finstilt-details > p, .finstilt-details > ol, .finstilt-details > div { margin-top: 12px; }
.finstilt-details a { color: var(--accent-färg); }

/* ---------- steg ---------- */
/* Tidslinje utan kort: beloppet ovanför linjen är vad kunden betalat
   hittills. Linjen är streckad fram till fakturan, som är heldragen. */
.steg {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 56px;
  padding: 0;
  list-style: none;
}
.steg-belopp {
  padding-right: 24px;
  color: #a3a9b3;
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.steg-text {
  position: relative;
  margin-top: 20px;
  padding: 28px 24px 0 0;
  border-top: 2px dashed var(--kant-färg);
}
/* Prick på linjen vid varje steg. */
.steg-text::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 12px;
  height: 12px;
  border: 2px solid var(--kant-färg);
  border-radius: 50%;
  background: var(--vit-färg);
}
.steg h3 { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--svart-färg); }
.steg-text p { margin-top: 8px; color: var(--dämpad-färg); font-size: 16px; line-height: 1.55; }
.steg-faktura .steg-belopp { color: var(--accent-färg); font-weight: 600; }
.steg-faktura .steg-text { border-top-style: solid; border-color: var(--accent-färg); }
.steg-faktura .steg-text::before { border-color: var(--accent-färg); background: var(--accent-färg); }
/* Smalare skärmar: lodrät tidslinje med beloppet till vänster. */
@media (max-width: 1099px) {
  .steg { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; margin-top: 40px; }
  .steg li { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: 20px; }
  .steg-belopp { padding: 0; font-size: 22px; line-height: 1.3; text-align: right; }
  .steg-text { margin-top: 0; padding: 0 0 32px 24px; border-top: 0; border-left: 2px dashed var(--kant-färg); }
  .steg-text::before { top: 6px; left: -7px; }
  .steg-faktura .steg-text { padding-bottom: 0; border-left-style: solid; }
}

/* ---------- priskalkyl ---------- */
/* Brett diagram direkt på sektionens bakgrund, inget kort. */
.kalkyl-huvud {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 64px;
}
.kalkyl-summa { display: grid; text-align: right; }
/* Summan hamnar under texten när de inte får plats bredvid varandra. */
@media (max-width: 1149px) { .kalkyl-summa { text-align: left; } }
.kalkyl-rubrik { color: var(--dämpad-färg); font-size: 16px; }
.kalkyl-summa strong {
  color: var(--accent-färg);
  font-size: clamp(44px, 5.5vw, 72px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.kalkyl-ar { color: var(--dämpad-färg); font-size: 17px; }
#pris-ar-varde { color: var(--svart-färg); font-weight: 700; }

.kalkyl { margin-top: 48px; }
.pris-tabell { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pris-tabell th, .pris-tabell td {
  padding: 18px 0;
  border-top: 1px solid var(--linje-färg);
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  vertical-align: middle;
}
.pris-tabell tbody tr:last-child > * { border-bottom: 1px solid var(--linje-färg); }
.pris-tabell th { padding-right: 24px; color: var(--svart-färg); white-space: nowrap; }
.paket-namn { color: var(--dämpad-färg); font-size: 14px; }
/* Stapeln visar kostnaden relativt den dyraste raden (--andel) och delas
   i ett block per år (--ar). Båda sätts av scripts/pris-tabell.js;
   utan JS syns inga staplar. */
.stapel {
  --block: calc(100% / var(--ar, 1));
  display: block;
  height: 22px;
  width: calc(var(--andel, 0) * 100%);
  background: repeating-linear-gradient(90deg, var(--stapel-färg) 0 calc(var(--block) - 3px), transparent 0 var(--block));
  transition: width 0.25s ease;
}
.pris-tabell .pris-kostnad {
  padding-left: 24px;
  color: var(--svart-färg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
/* Samma kolumnbredder i tabellen och under den, så att reglaget ligger
   exakt under staplarna. */
.kalkyl { --namn-bredd: 220px; --pris-bredd: 140px; }
.kol-namn { width: var(--namn-bredd); }
.kol-pris { width: var(--pris-bredd); }
.pris-kostnad::after { content: " kr"; color: var(--dämpad-färg); font-weight: 400; }
.pris-vår th { color: var(--accent-färg); font-weight: 600; }
.pris-vår .stapel { background: var(--accent-färg); min-width: 8px; }
.pris-vår .pris-kostnad { color: var(--accent-färg); }

.kalkyl-fot {
  display: grid;
  grid-template-columns: var(--namn-bredd) minmax(0, 1fr) var(--pris-bredd);
  align-items: center;
  margin-top: 24px;
}
.kalkyl-etikett { color: var(--dämpad-färg); font-size: 15px; font-weight: 500; }
.kalkyl-förklaring { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-left: 24px; color: var(--dämpad-färg); font-size: 14px; white-space: nowrap; }
.kalkyl-block { width: 18px; height: 12px; background: var(--stapel-färg); }
.kalkyl-reglage {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  margin: 0;
  border-radius: 999px;
  background: var(--linje-färg);
  cursor: pointer;
}
.kalkyl-reglage::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border: 4px solid var(--vit-färg);
  border-radius: 50%;
  background: var(--accent-färg);
  box-shadow: 0 0 0 1px var(--accent-färg), 0 2px 6px rgba(0, 0, 0, 0.2);
}
.kalkyl-reglage::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 4px solid var(--vit-färg);
  border-radius: 50%;
  background: var(--accent-färg);
  box-shadow: 0 0 0 1px var(--accent-färg), 0 2px 6px rgba(0, 0, 0, 0.2);
}
/* Mobil: namn och belopp på en rad, stapeln under. */
@media (max-width: 699px) {
  .kalkyl { margin-top: 32px; }
  .pris-tabell, .pris-tabell tbody { display: block; }
  .pris-tabell colgroup { display: none; }
  .pris-tabell tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-top: 1px solid var(--linje-färg); padding-block: 14px; }
  .pris-tabell tbody tr:last-child { border-bottom: 1px solid var(--linje-färg); }
  .pris-tabell th, .pris-tabell td, .pris-tabell tbody tr:last-child > * { padding: 0; border: 0; }
  .pris-tabell .stapel-cell { grid-column: 1 / -1; grid-row: 2; padding-top: 10px; }
  .stapel { height: 16px; }
  .kalkyl-fot { grid-template-columns: auto minmax(0, 1fr); gap: 12px 16px; }
  .kalkyl-förklaring { grid-column: 1 / -1; justify-content: flex-start; padding-left: 0; }
}

/* ---------- portalvideo ---------- */
.skrivbord {
  position: relative;
  margin-top: 48px;
  padding: clamp(12px, 3vw, 40px) clamp(12px, 4vw, 56px);
  overflow: hidden;
  border-radius: 24px;
  isolation: isolate;
}
.skrivbord-bild {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.webbläsarram {
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--linje-färg);
  border-radius: 16px;
  background: var(--vit-färg);
  box-shadow: 0 2px 6px rgba(8, 9, 10, 0.08), 0 40px 80px -24px rgba(8, 20, 40, 0.45);
}
.webbläsarram-list {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid var(--linje-färg);
  background: #f3f4f6;
}
.webbläsarram-list span { width: 10px; height: 10px; border-radius: 50%; background: #d4d7dc; }
.webbläsarram-list p {
  flex: 0 1 280px;
  margin: 0 auto;
  padding: 2px 12px;
  border-radius: 6px;
  background: var(--vit-färg);
  color: var(--dämpad-färg);
  font-size: 12px;
  text-align: center;
}
/* 1920 x 1032: inspelningen är 1080 hög, minus Windows aktivitetsfält. */
.portal-video { width: 100%; aspect-ratio: 1920 / 1032; }
@media (max-width: 559px) {
  .skrivbord { margin-top: 32px; border-radius: 14px; }
  .webbläsarram { border-radius: 8px; }
  .webbläsarram-list { height: 24px; }
  .webbläsarram-list p { font-size: 10px; }
}

/* ---------- prestanda ---------- */
.prestanda {
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--linje-färg);
  border-radius: 20px;
  background: var(--bakgrund-färg);
}
.prestanda-rubrik { font-weight: 600; color: var(--svart-färg); }
.prestanda-rubrik span { color: var(--dämpad-färg); font-weight: 400; }
.prestanda-lista { display: grid; gap: 14px; margin-top: 20px; padding: 0; list-style: none; }
.prestanda-lista li {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}
.prestanda-spår { height: 10px; border-radius: 999px; background: var(--linje-färg); overflow: hidden; }
.prestanda-stapel { display: block; height: 100%; border-radius: inherit; }
.prestanda-stapel.prestanda-bra { background: var(--bra); }
.prestanda-stapel.prestanda-medel { background: var(--medel); }
.prestanda-stapel.prestanda-dålig { background: var(--dålig); }
.v95 { width: 95%; } .v61 { width: 61%; } .v56 { width: 56%; }
.v54 { width: 54%; } .v43 { width: 43%; } .v28 { width: 28%; }
.prestanda-värde { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.prestanda-vår { font-weight: 700; color: var(--svart-färg); }
.prestanda-vår .prestanda-spår { height: 14px; }
.prestanda-förklaring {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 20px;
  color: var(--dämpad-färg);
  font-size: 13px;
}
.prestanda-förklaring > span { display: inline-flex; align-items: center; gap: 6px; }
.prick { width: 8px; height: 8px; border-radius: 50%; }
.prick.prestanda-bra { background: var(--bra); }
.prick.prestanda-medel { background: var(--medel); }
.prick.prestanda-dålig { background: var(--dålig); }
.skärmdumpar { display: grid; gap: 12px; }
.skärmdumpar img { border-radius: 8px; border: 1px solid var(--linje-färg); }

/* ---------- info4: grått band med klistrad P-animation ----------
   Mekaniken är densamma som i main.css (se kommentarerna där):
   sektionen är högre än innehållet, texten + vänsterbilden klistrar i
   överkant och P-animationen i nederkant. Skillnaden är att överkanten
   ligger under den fasta headern (--header-h). */
/* Paddingen ligger på den yttre wrappern, inte på .info4-sektion - så
   påverkas inte den klistrade P-animationen (den klistrar inom sektionen
   och vilar mot dess underkant, med luften här nedanför). */
.band-grå {
  padding-block: var(--sektion-luft);
  position: relative;
  isolation: isolate;
  background: linear-gradient(170deg, #f6f6f7 0%, #e7e9ec 55%, #d8dbe0 100%);
}

/* Test: fast blå bakgrund istället för det gråa bandet med himmel-lagret.
   Ljusare accentblått kring P:t, mörkare mot kanterna. */
.info4-blå {
  /* clip (inte hidden) klipper ljusfläckarna utan att göra bandet till en
     scrollcontainer, vilket hade förstört de klistrade elementen inuti. */
  overflow: clip;
  background: linear-gradient(170deg, var(--accent-hover-färg) 0%, var(--accent-färg) 50%, #0f2343 100%);
}
/* Två ljusfläckar som långsamt driver omkring. Gradienterna ritas en gång
   i egna lager; bara transform animeras, så det sköts av kompositorn utan
   ommålning. Olika längd på de två animationerna gör att mönstret inte
   upprepas synligt. */
.info4-blå::before,
.info4-blå::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 80vmax;
  height: 80vmax;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.info4-blå::before {
  top: 35%;
  left: 40%;
  background: radial-gradient(closest-side, rgba(95, 145, 220, 0.55), transparent);
  animation: info4-drift-a 26s ease-in-out infinite alternate;
}
.info4-blå::after {
  top: 10%;
  left: -20%;
  background: radial-gradient(closest-side, rgba(8, 20, 45, 0.6), transparent);
  animation: info4-drift-b 34s ease-in-out infinite alternate;
}
@keyframes info4-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-30vw, -25vh, 0) scale(1.2); }
}
@keyframes info4-drift-b {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(35vw, 30vh, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .info4-blå::before, .info4-blå::after { animation: none; }
}
.info4-blå .rubrikblock h2 { color: var(--vit-färg); }
.info4-blå .rubrikblock > p { color: rgba(255, 255, 255, 0.75); }

.info4-sektion {
  width: 100%;
  max-width: var(--max-bredd);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  min-height: calc(var(--info4-topp-höjd, 100vh) * 1.5);
  --info4-proportion: calc(1869 / 1199);
  --info4-maxhöjd: calc(100dvh - var(--header-h) - var(--info4-text-höjd, 200px));
  --info4-bredd: min(50%, calc(var(--info4-maxhöjd) / var(--info4-proportion)));
}
.info4-innehåll { display: contents; }
.info4-topp { position: sticky; top: var(--header-h); padding-top: 16px; }
.info4-topp .rubrikblock { max-width: 720px; }
.info4-vänster { padding-top: 32px; }
.info4-vänster img { width: var(--info4-bredd); border-radius: 12px; }
@media (min-width: 768px) {
  .info4-vänster img { margin-left: calc((50% - var(--info4-bredd)) / 2); }
  .info4-höger .scroll-anim { margin-left: calc(50% + (50% - var(--info4-bredd)) / 2); }
}
.info4-spår {
  flex: 1 0 auto;
  margin-top: calc(-1 * var(--info4-bredd) * var(--info4-proportion));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}
.info4-höger { position: sticky; bottom: 0; }
.info4-höger .scroll-anim { width: var(--info4-bredd); }

.scroll-anim { position: relative; }
.scroll-anim img + img { position: absolute; inset: 0; width: 100%; height: 100%; }
.scroll-anim.aktiv img { opacity: 0; }

@media (max-width: 767px) {
  .info4-sektion { min-height: 0; }
  .info4-sektion::before { content: ""; flex: none; height: 60vh; }
  .info4-innehåll { display: block; position: sticky; bottom: 0; }
  .info4-topp { position: static; padding-top: 0; }
  .info4-vänster img { width: 100%; }
  .info4-spår { margin-top: 0; }
  .info4-höger { position: static; }
  .info4-höger .scroll-anim { width: 100%; margin-left: 0; }
}

/* ---------- inlåsning & säkerhet ---------- */
/* Mappvy i ägandesektionen: en färdig kundsajt som vanliga filer. */
.filer {
  width: 100%;
  max-width: 440px;
  border: 1px solid var(--linje-färg);
  border-radius: var(--radie);
  background: var(--vit-färg);
  box-shadow: var(--skugga);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 15px;
}
.filer-huvud {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--linje-färg);
  color: var(--svart-färg);
  font-weight: 600;
}
.filer-lista { padding: 10px 0; list-style: none; }
.filer-lista li { display: flex; align-items: center; gap: 10px; padding: 7px 20px 7px 44px; color: var(--text-färg); }
.filer-not { margin-left: auto; padding-left: 16px; color: var(--dämpad-färg); font-family: 'Inter', system-ui, sans-serif; font-size: 13px; text-align: right; }
.filer-ikon { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; opacity: 0.7; }
.filer-mapp .filer-ikon, .filer-huvud .filer-ikon { fill: var(--accent-ljus); }
.filer-fot {
  padding: 14px 20px;
  border-top: 1px solid var(--linje-färg);
  color: var(--dämpad-färg);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}
@media (max-width: 459px) {
  .filer-lista li { padding-left: 36px; }
  .filer-not { display: none; }
}
.artiklar { width: 100%; max-width: 420px; }
.källor { display: grid; gap: 8px; padding-left: 20px; }

/* ---------- priser ---------- */
.priser-sektion {
  position: relative;
  padding-block: var(--sektion-luft);
  isolation: isolate;
  background: linear-gradient(160deg, #eef1f5 0%, #dde4ee 55%, #c9d4e4 100%);
}
.priser-sektion::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../assets/komprimerad/1600w/priser-bg.avif') center / cover no-repeat;
  opacity: 0.12;
}
.paket {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 20px;
  margin-top: 48px;
}
.paket-kort {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 40px);
  border-radius: 20px;
  background: var(--vit-färg);
  box-shadow: var(--skugga);
}
.paket-kort h3, .tillval-kort h4 {
  color: var(--dämpad-färg);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.paket-pris {
  margin-top: 8px;
  color: var(--svart-färg);
  font-size: clamp(38px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.paket-pris small, .tillval-pris small { color: var(--dämpad-färg); font-size: 16px; font-weight: 400; letter-spacing: 0; }
.paket-finstilt { margin-top: 6px; color: var(--dämpad-färg); font-size: 14px; line-height: 1.5; }
.ingen-brytning { white-space: nowrap; }
.paket-beskrivning { margin-top: 20px; font-size: 17px; line-height: 1.6; }
.arbetsprocess { margin: 24px 0 32px; padding-top: 24px; border-top: 1px solid var(--linje-färg); }
.arbetsprocess > p { color: var(--svart-färg); font-size: 15px; font-weight: 600; }
.bocklista { display: grid; gap: 10px; margin-top: 12px; padding: 0; list-style: none; font-size: 16px; line-height: 1.45; }
.bocklista li { position: relative; padding-left: 28px; }
.bocklista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-ljus);
}
/* Bocken ritas med två kanter - en data:-URI skulle blockeras av
   img-src 'self' i _headers. */
.bocklista li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 6px;
  width: 6px;
  height: 9px;
  border: solid var(--accent-färg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.paket-knapp { margin-top: auto; }
@media (min-width: 1000px) {
  .paket-kort-bred .bocklista { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .paket-kort-bred .paket-knapp { align-self: flex-start; min-width: 260px; }
}
@media (max-width: 999px) {
  .paket { grid-template-columns: minmax(0, 1fr); }
}

.tillval-rubrik {
  margin-top: 64px;
  color: var(--svart-färg);
  font-size: 22px;
  font-weight: 600;
  text-align: center;
}
.tillval {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.tillval-kort {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75);
}
.tillval-pris { margin-top: 6px; color: var(--svart-färg); font-size: 30px; font-weight: 700; letter-spacing: -0.01em; }
.tillval-beskrivning { margin-top: 12px; color: var(--dämpad-färg); font-size: 15px; line-height: 1.55; }
.tillval-kort .bocklista { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--linje-färg); font-size: 15px; }
@media (max-width: 999px) { .tillval { grid-template-columns: minmax(0, 1fr); } }

.priser-moms { margin-top: 40px; color: var(--dämpad-färg); font-size: 14px; text-align: center; }

/* ---------- FAQ ---------- */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.faq .rubrikblock { position: sticky; top: calc(var(--header-h) + 32px); }
@media (max-width: 899px) {
  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq .rubrikblock { position: static; }
}
.faq-lista { border-top: 1px solid var(--linje-färg); }
.qa { border-bottom: 1px solid var(--linje-färg); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { color: var(--svart-färg); font-size: 18px; font-weight: 600; line-height: 1.35; }
/* Plus som vrids till ett kryss när frågan är öppen. */
.qa summary::after {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background:
    linear-gradient(var(--accent-färg), var(--accent-färg)) center / 12px 2px no-repeat,
    linear-gradient(var(--accent-färg), var(--accent-färg)) center / 2px 12px no-repeat,
    var(--accent-ljus);
  transition: transform 0.2s ease;
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa > p { max-width: 640px; padding-bottom: 24px; color: var(--dämpad-färg); font-size: 17px; line-height: 1.65; }
.qa > ul { max-width: 640px; margin-top: -12px; padding: 0 0 24px 22px; color: var(--dämpad-färg); font-size: 17px; line-height: 1.65; }
.qa > ul li + li { margin-top: 4px; }

/* ---------- kontakt ---------- */
/* Fågelns sittplats ovanpå formuläret: underkanten ligger på formulärets
   övre ram, 5 px nedsänkt så att fötterna ser ut att greppa kanten.
   Själva fågeln är .bird-sprite, som bird-sprite.js placerar så att
   fötterna hamnar på platshållarens underkant. */
.bird-sprite-placeholder {
  position: absolute;
  bottom: calc(100% - 4px);
  right: clamp(24px, 6%, 56px);
  width: 114px;
  height: 53px;
  pointer-events: none;
}
.bird-lager {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: clip;
  pointer-events: none;
}
.bird-sprite {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 114px;
  height: 114px;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
}
.bird-sprite img { width: 100%; height: 100%; }
.kontakt-lista { margin-top: 28px; }

.kontakt-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--linje-färg);
  border-radius: 20px;
  background: var(--bakgrund-färg);
}
.form-rad { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 559px) { .form-rad { grid-template-columns: minmax(0, 1fr); } }
.form-fält { display: flex; flex-direction: column; gap: 6px; }
.form-fält label { color: var(--svart-färg); font-size: 15px; font-weight: 500; }
.krävs { color: var(--fel); }
.valfritt { color: var(--dämpad-färg); font-weight: 400; }
.form-fält input,
.form-fält textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--kant-färg);
  border-radius: 10px;
  background: var(--vit-färg);
  color: var(--svart-färg);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-fält input::placeholder,
.form-fält textarea::placeholder { color: #9aa0a8; opacity: 1; }
.form-fält input:focus,
.form-fält textarea:focus {
  outline: none;
  border-color: var(--accent-färg);
  box-shadow: 0 0 0 3px rgba(26, 55, 98, 0.15);
}
.form-fält textarea { min-height: 160px; resize: vertical; }
.form-fält [aria-invalid="true"] { border-color: var(--fel); }
.form-fält [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.15); }
.fält-fel { color: var(--fel); font-size: 14px; }
.fält-fel:empty { display: none; }
.hp-fält { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-fot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.form-integritet { color: var(--dämpad-färg); font-size: 14px; }
.form-integritet a { color: inherit; }
.form-knapp { min-width: 160px; }
@media (max-width: 559px) { .form-knapp { width: 100%; } }
.form-status { font-size: 15px; }
.form-status:empty { display: none; }
.form-status[data-state="ok"] { color: #1a6b2c; }
.form-status[data-state="error"] { color: var(--fel); }