/* Startsidans topp (docs/konstnarlig-riktning.md, docs/designsystem.md, docs/research-osr.md):
   hero med människor under stjärnorna och den inramade tavlan, en rad med fakta som går att kontrollera,
   paketen direkt efter heron (med tillfällen och "så går det till"), omdömen när det finns riktiga,
   och himlen där namnet landar på en riktig stjärna. Bygger på designsystemets tokens i style.css. */

:is(.hem-hero, .hem-fakta, .hem-paket, .hem-omdomen, .hem-himmel) :is(h1, h2, h3) { text-wrap: balance; }
:is(.hem-paket, .hem-himmel, .hem-omdomen)[id] { scroll-margin-top: var(--gh); }
#sa-gar-det-till { scroll-margin-top: calc(var(--gh) + var(--s5)); }

/* ==== Hero: människorna under stjärnorna, och deras stjärna inramad på himlen de tittar mot ==========
   Fotot (static/img/folk/hero.webp, personerna nere till höger) fyller heron; texten står på himlen till vänster.
   Tavlan svävar där de tittar. Saknas fotot visas den renderade bilden av tavlan bland stjärnorna (.utan-foto)
   och den lösa tavlan döljs. */
.hem-hero {
  --hh-h: clamp(600px, min(100svh, 860px), 860px); --hp: 0;
  position: relative; background: var(--yta); color: var(--text);
}
.hh-scen {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: var(--hh-h);
}
.hh-foto { position: absolute; inset: 0; z-index: -1; }
.hh-foto picture, .hh-foto img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hh-foto img { object-fit: cover; object-position: 70% 100%; }
/* Mörkare bakom texten så att den alltid läses, ingen färgad glöd */
.hh-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(11 16 32 / .82) 0, rgb(11 16 32 / .55) 30%, rgb(11 16 32 / 0) 55%),
              linear-gradient(180deg, rgb(11 16 32 / .6) 0, rgb(11 16 32 / 0) 18%); }

.hh-text {
  grid-column: 1; grid-row: 1; align-self: center; z-index: 2;
  padding: calc(var(--gh) + var(--s7)) var(--s6) var(--s9) max(var(--s7), calc((100vw - 1260px) / 2));
}
.hem-hero h1 { margin: 0; max-width: 11ch; font-size: clamp(46px, 5.2vw, 76px); line-height: 1.02; letter-spacing: -.03em; color: var(--text); }
.hh-under { margin: var(--s5) 0 0; max-width: 30em; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: #c9cfdd; text-wrap: pretty; }
.hh-handling { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); margin-top: var(--s8); }
.hh-handling .knapp { min-height: 54px; padding-inline: 28px; font-size: 17px; }
.hh-pris { display: grid; gap: 2px; margin: 0; font-size: var(--fs-liten); line-height: 1.35; color: var(--text-2); }
.hh-pris b { font-family: var(--font-rubrik); font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.hh-pris span { color: var(--guld); }
.hh-trygg { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: var(--s8) 0 0; padding: var(--s5) 0 0; list-style: none;
  border-top: 1px solid rgb(241 243 248 / .16); font-size: var(--fs-liten); color: #c9cfdd; max-width: 34em; }
.hh-trygg li { display: flex; align-items: center; gap: 8px; }
.hh-trygg li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #c9cfdd; box-shadow: inset 0 0 0 1.5px #0b1020, inset 0 0 0 4px var(--guld); }

/* Tavlan: det inramade certifikatet svävar på himlen ovanför paret. hero3d.js lutar den efter musen. */
.hh-tavla {
  --rx: 0deg; --ry: -10deg;
  grid-column: 2; grid-row: 1; z-index: 1; align-self: start; justify-self: start;
  width: clamp(180px, 15.5vw, 250px); margin: calc(var(--gh) + clamp(40px, 8vh, 90px)) 0 0 clamp(0px, 6vw, 110px);
  perspective: 1200px; pointer-events: none;
}
.hh-ram {
  display: block; padding: 7%; border: clamp(8px, .8vw, 12px) solid #17140f; background: #f7f5f0;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) rotateZ(-2deg); transform-style: preserve-3d; transition: transform .9s var(--e-ut, ease-out);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08), 0 2px 4px rgb(0 0 0 / .3), 0 30px 60px -18px rgb(0 0 0 / .75);
}
.hh-ram img { display: block; width: 100%; height: auto; }
.hem-hero.utan-foto .hh-tavla { display: none; }

/* --- 3D (hero3d.js): duken ligger genomskinlig över fotot och under texten. När den är klar tonar
   CSS-tavlan bort (den står kvar osynligt som mått för 3D-tavlan). --hp 0..1 är flygningens förlopp. */
.hh-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none;
  opacity: 0; transition: opacity .8s var(--e-ut, ease-out);
  /* Stjärnorna tonar ut mot scenens nederkant i stället för att klippas, så att det inte blir en kant mot himlen */
  -webkit-mask-image: linear-gradient(#000 0 80%, transparent); mask-image: linear-gradient(#000 0 80%, transparent); }
.hh-3d-klar .hh-canvas { opacity: 1; }
.hh-3d-klar .hh-tavla { opacity: 0; transition: opacity .8s var(--e-ut, ease-out); }
.hh-3d-klar .hh-foto { opacity: calc(1 - min(1, max(0, (var(--hp) - .08) * 2.4))); }
.hh-3d-klar .hh-text { opacity: calc(1 - min(1, var(--hp) * 4)); transform: translateY(calc(var(--hp) * -60px)); }
/* Scenen står still medan man scrollar 45 % av en skärmhöjd (telefon: se nedan), sedan kommer himlen.
   (Var 80 %: en hel skärm utan text eller knapp, användartest P1-2. hero3d.js räknar förloppet från höjden.) */
.hem-hero.hh-flyg { height: calc(var(--hh-h) + 45svh); }
.hem-hero.hh-flyg .hh-scen { position: sticky; top: 0; height: var(--hh-h); }
.hem-hero.utan-foto .hh-foto img { object-position: 62% 50%; }

@media (max-width: 1068px) {
  .hh-scen { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .hh-text { padding-left: var(--s7); }
}
/* Mobil: fotot överst med tavlan på himlen, texten under. Knappen syns utan att man scrollar långt. */
@media (max-width: 734px) {
  .hh-scen { grid-template-columns: 1fr; grid-template-rows: min(52svh, 420px) auto; min-height: 0; }
  .hh-foto { position: relative; inset: auto; z-index: 0; grid-column: 1; grid-row: 1; }
  .hh-foto img { object-position: 60% 100%; }
  .hh-foto::after { background: linear-gradient(0deg, var(--yta) 0, rgb(11 16 32 / 0) 30%), linear-gradient(180deg, rgb(11 16 32 / .6) 0, rgb(11 16 32 / 0) 30%); }
  .hh-tavla { grid-column: 1; grid-row: 1; justify-self: end; align-self: start; width: 30vw; margin: calc(var(--gh) + var(--s5)) var(--s6) 0 0; --ry: 0deg; }
  .hh-text { grid-column: 1; grid-row: 2; padding: 0 var(--s5) var(--s8); }
  /* Texten ligger under fotot på mobil och ska förbli läsbar under kameraflygningen. */
  .hh-3d-klar .hh-text { opacity: 1; transform: none; }
  /* Fotot börjar tona direkt när man scrollar, så att himlen tar över medan den är i bild. */
  .hh-3d-klar .hh-foto { opacity: calc(1 - min(1, var(--hp) * 1.7)); }
  /* Telefon: scenen (foto + text) är lägre än skärmen och står still medan man scrollar en halv skärm */
  /* (Sträckan är ett tomt block efter scenen, inte padding: en sticky ruta får bara röra sig inom förälderns innehåll.) */
  .hem-hero.hh-flyg { height: auto; }
  .hem-hero.hh-flyg::after { content: ""; display: block; height: 50svh; }
  .hem-hero.hh-flyg .hh-scen { height: auto; }
  .hem-hero h1 { font-size: clamp(38px, 11vw, 48px); max-width: 9ch; }
  .hh-under { font-size: 16px; margin-top: var(--s3); max-width: 24em; }
  .hh-handling { margin-top: var(--s6); gap: var(--s3) var(--s5); }
  .hh-handling .knapp { flex: 1 1 100%; }
  .hh-trygg { margin-top: var(--s6); }
}

/* ==== Fakta: fyra tal som går att kontrollera ======================================================== */
.hem-fakta { background: var(--yta); border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje); }
.hf-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(1260px, calc(100% - 48px)); margin: 0 auto; }
.hf-lista > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: var(--s6) var(--s6); }
.hf-lista > div + div { border-left: 1px solid var(--linje); }
.hf-lista dd { margin: 0; font-family: var(--font-rubrik); font-size: clamp(30px, 3vw, 40px); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hf-lista dt { font-size: var(--fs-liten); line-height: 1.4; color: var(--text-2); max-width: 20em; }
@media (max-width: 834px) {
  .hf-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .hf-lista > div { padding: var(--s4) var(--s4); }
  .hf-lista dd { font-size: 28px; }
  .hf-lista dt { font-size: 13px; }
  .hf-lista > div:nth-child(3) { border-left: 0; }
  .hf-lista > div:nth-child(n+3) { border-top: 1px solid var(--linje); }
}

/* ==== Paketen: direkt efter heron. Tillfällen som bildlänkar, tre kolumner, stegen ===================== */
.hem-paket { background: var(--yta-2); color: var(--text); padding: clamp(56px, 6vw, 88px) 0 clamp(48px, 5vw, 72px); }
.hem-paket > * { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.hp-huvud { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s6) var(--s9); margin-bottom: var(--s8); }
.hp-huvud h2 { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.hp-huvud > div > p { margin: var(--s3) 0 0; max-width: 34em; color: var(--text-2); }
.hp-tf-rubrik { margin: 0 0 var(--s2); font-size: var(--fs-liten); color: var(--text-2); }
.hp-tillfallen > ul { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
/* Tillfällena: små bildflikar. Bara listans länkar, inte länkarna i exemplet under (de har egna stilar). */
.hp-tillfallen > ul a {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 5px 18px 5px 5px;
  border: 1px solid var(--linje); border-radius: var(--r-falt); background: var(--yta);
  color: var(--text-2); font-weight: 600; font-size: 15px; letter-spacing: -.01em; text-decoration: none;
  transition: border-color var(--r-kort) var(--e-ui), color var(--r-kort) var(--e-ui), box-shadow var(--r-kort) var(--e-ui), background-color var(--r-kort) var(--e-ui);
}
.hp-tillfallen > ul a:hover { border-color: var(--linje-stark); color: var(--text); text-decoration: none; }
.hp-tillfallen > ul a:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.hp-tillfallen > ul img { width: 44px; height: 44px; border-radius: var(--r-liten); object-fit: cover; object-position: 50% 30%; background: var(--yta-3);
  filter: saturate(.75) brightness(.92); transition: filter var(--r-mellan) var(--e-ut), transform var(--r-mellan) var(--e-ut); }
.hp-tillfallen > ul a:hover img { filter: none; transform: scale(1.04); }

/* Paketkorten. Underlag: docs/research-paketskillnad.md.
   Varje kort: produktbild (vad som kommer hem), namn + "Passar när …", pris, och skillnaderna i tre rader
   som ligger i samma höjd i alla tre korten (subgrid), så att de går att läsa tvärs över. */
.hp-kort { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); gap: 0 var(--s5); }
.pk { position: relative; grid-row: span 7; display: grid; grid-template-rows: subgrid; overflow: hidden;
  border-radius: var(--r-bricka); background: var(--yta); border: 1px solid var(--linje); }
.pk > :not(.pk-bild) { margin-inline: var(--s6); }
.pk-forslag { border: 2px solid var(--bla); }
.pk-bild { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--yta-3); }
.pk-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pk-tagg { position: absolute; top: var(--s4); left: var(--s4); margin: 0; }
.pk-tagg .marke { background: var(--yta); }
.pk-huvud { padding-top: var(--s6); }
.pk h3 { margin: 0; font-size: var(--fs-bricka); line-height: var(--lh-bricka); letter-spacing: var(--ls-bricka); }
.pk-for { margin: var(--s2) 0 0; font-size: var(--fs-liten); line-height: var(--lh-liten); color: var(--text-2); }
.pk-pris { margin-top: var(--s4); margin-bottom: var(--s5); font-family: var(--font-rubrik); font-size: 32px; font-weight: 600; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pk-ordinarie { margin-right: .2em; font-size: .6em; font-weight: 500; color: var(--text-2); text-decoration-thickness: 1.5px; }
.pk-forsta { display: block; margin-top: var(--s2); font-family: var(--font); font-size: var(--fs-fot); font-weight: 500;
  line-height: var(--lh-fot); letter-spacing: 0; color: var(--text-2); }
/* Skillnaderna: samma tre rubriker i alla kort */
.pk-skillnad { grid-row: span 3; display: grid; grid-template-rows: subgrid; margin-block: 0; }
.pk-skillnad > div { padding: var(--s3) 0; border-top: 1px solid var(--linje); }
.pk-skillnad dt { font-size: var(--fs-fot); line-height: var(--lh-fot); color: var(--text-2); }
.pk-skillnad dd { margin: 2px 0 0; font-size: var(--fs-liten); line-height: var(--lh-liten); }
.pk-skillnad dd b { font-weight: 600; }
.pk-skillnad dd span { display: block; color: var(--text-2); }
/* Det som bara Inramad har: stjärnringen framför */
.pk-uppgradering dd b { position: relative; display: block; padding-left: 20px; }
.pk-uppgradering dd b::before { content: ""; position: absolute; left: 0; top: .3em; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--text); background: radial-gradient(circle, var(--guld) 0 28%, transparent 32%); }
.pk .knapp { width: auto; align-self: end; margin-top: var(--s3); margin-bottom: var(--s6); }
.pk-prickar { display: none; }                  /* bara på mobil, se nedan */
.pk-plats { display: contents; }
/* Länken "Se alla paket" flyttar fokus hit (tabindex −1). Raden är ingen kontroll, så ingen fokusram över hela bredden. */
.hp-kort[tabindex="-1"]:focus { outline: none; }

/* Ingår i alla tre: en gång, under korten */
.hp-alla { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--s2) var(--s5); margin-top: var(--s6); }
.hp-alla-rubrik { margin: 0; font-size: var(--fs-liten); font-weight: 600; }
.hp-alla ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5); margin: 0; padding: 0; list-style: none; font-size: var(--fs-liten); color: var(--text-2); }
.hp-alla li { position: relative; padding-left: 18px; }
.hp-alla li::before { content: ""; position: absolute; left: 0; top: .42em; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--text-2); background: radial-gradient(circle, var(--guld) 0 28%, transparent 32%); }

/* Jämför i detalj: en liten tabell som fälls ut */
.hp-jamfor { margin-top: var(--s5); text-align: center; }
.hp-jamfor summary { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; cursor: pointer; list-style: none;
  font-size: var(--fs-liten); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.hp-jamfor summary::-webkit-details-marker { display: none; }
.hp-jamfor summary::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
  transition: transform .25s var(--e-ut, ease-out), margin .25s; }
.hp-jamfor[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.hp-jamfor summary:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: var(--r-liten); }
.hp-jamfor-yta { max-width: 820px; margin: var(--s3) auto 0; padding: var(--s3) var(--s6) var(--s4); border-radius: var(--r-bricka); background: var(--yta); text-align: left; overflow-x: auto; }
.hp-jamfor .tabell td, .hp-jamfor .tabell thead th { width: 22%; }
.hp-jamfor .tabell thead > tr > *, .hp-jamfor .tabell tbody tr:first-child > * { border-top: 0; }
.hp-jamfor .tabell b { font-weight: 600; }
.hp-not { margin-top: var(--s5); font-size: var(--fs-fot); line-height: var(--lh-fot); color: var(--text-2); text-align: center; }
.hp-not b { color: var(--text); font-weight: 600; }

/* Så går det till: fyra korta steg på en rad */
.hp-steg { margin-top: clamp(48px, 5vw, 72px); }
.hp-steg-rubrik { margin: 0 0 var(--s5); font-size: var(--fs-titel); line-height: var(--lh-titel); letter-spacing: var(--ls-titel); }
.hp-steg ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); margin: 0; padding: 0; list-style: none; counter-reset: steg; }
.hp-steg li { counter-increment: steg; padding-top: var(--s4); border-top: 2px solid var(--linje); font-size: var(--fs-liten); line-height: var(--lh-liten); color: var(--text-2); }
.hp-steg li:first-child { border-top-color: var(--text); }
.hp-steg b { display: block; margin-bottom: 4px; color: var(--text); font-size: 17px; font-weight: 600; }
.hp-steg b::before { content: counter(steg) ". "; color: var(--guld-text); }

@media (max-width: 1068px) {
  .hp-kort { column-gap: var(--s4); }
  .pk > :not(.pk-bild) { margin-inline: var(--s5); }
  .pk h3 { font-size: var(--fs-titel); }
  .hp-steg ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Mobil: förslaget först, korten staplade och kompakta (bilden bredvid namnet) */
@media (max-width: 734px) {
  .hem-paket > * { width: calc(100% - 32px); }
  .hp-huvud { margin-bottom: var(--s6); }
  .hp-tillfallen { width: 100%; }
  .hp-tillfallen > ul { display: grid; grid-template-columns: 1fr 1fr; }
  /* Korten som en hand kort: förslaget i mitten, de andra två sticker fram snett på var sin sida.
     Svep (scroll-snap) eller tryck på ett sidokort; hem-paket.js sätter lutningen (--d) efter läget. */
  .hp-kort { position: relative; display: flex; align-items: stretch; width: 100vw; margin-inline: calc(50% - 50vw); --kb: min(76vw, 340px);
    padding: var(--s5) calc((100vw - var(--kb)) / 2) var(--s7); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .hp-kort::-webkit-scrollbar { display: none; }
  /* Rutan snäpper, kortet i den lutar. (Lutade kort som snäpptes själva hamnade snett: Chrome räknar med transformen.) */
  .pk-plats { --d: 0; --a: 0; position: relative; display: flex; flex: 0 0 var(--kb); margin-inline: -4vw;
    scroll-snap-align: center; scroll-snap-stop: always; }
  .pk { flex: 1; display: flex; flex-direction: column; grid-row: auto; padding: 0 0 var(--s5);
    /* Sidokorten dras in mot mitten, lutar utåt och sjunker lite, som kort man håller i handen */
    transform-origin: 50% 60%;
    transform: translateX(calc(var(--d) * -16%)) translateY(calc(var(--a) * 26px)) rotate(calc(var(--d) * 8deg)) scale(calc(1 - var(--a) * .08));
    box-shadow: 0 1px 2px rgb(18 23 38 / .06), 0 14px 34px -14px rgb(18 23 38 / .28); }
  /* Sidokorten tonas mot bakgrunden, så att bara det översta kortet går att läsa */
  .pk::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
    background: var(--yta-2); opacity: calc(var(--a) * .6); }
  .pk-plats:first-child { margin-left: 0; }
  .pk-plats:last-child { margin-right: 0; }
  .pk > :not(.pk-bild) { margin-inline: var(--s5); }
  /* Kompakt kort: lägre bild, namn och pris på samma rad, skillnaderna med rubriken bredvid texten */
  .pk { display: grid; grid-template-columns: minmax(0, 1fr) max-content; grid-template-rows: auto auto auto 1fr; }
  .pk-bild, .pk-skillnad, .pk .knapp { grid-column: 1 / -1; }
  .pk-bild { aspect-ratio: 16 / 9; }
  .pk-bild img { transform: scale(1.06); }
  .pk-tagg { top: var(--s3); left: var(--s3); }
  .pk-huvud { grid-column: 1; padding-top: var(--s4); margin-right: var(--s3); }
  .pk h3 { font-size: 22px; line-height: 1.15; }
  .pk-for { margin-top: 2px; font-size: 13.5px; line-height: 1.35; }
  .pk-pris { grid-column: 2; align-self: start; margin: 0 var(--s5) 0 0; padding-top: calc(var(--s4) + 1px); font-size: 22px; }
  .pk-pris-forsta { text-align: right; }
  .pk-pris-forsta .pk-ordinarie { display: block; margin: 0 0 2px; font-size: 13px; }
  .pk-forsta { max-width: 8.5em; margin-left: auto; font-size: 12px; }
  .pk-skillnad { margin-top: var(--s3); margin-bottom: var(--s3); }
  .pk-skillnad > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: var(--s3); padding: 7px 0; }
  .pk-skillnad dt { padding-top: 1px; }
  .pk-skillnad dd { margin: 0; font-size: 13.5px; line-height: 1.35; }
  .pk-skillnad .leverans-land { font-size: 12.5px; }
  .pk .knapp { align-self: end; margin-top: 0; margin-bottom: 0; }
  /* Prickarna under handen: vilket kort som ligger överst, och genväg till de andra */
  .pk-prickar { display: flex; justify-content: center; gap: 4px; margin-top: calc(-1 * var(--s3)); }
  .pk-prickar button { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
  .pk-prickar button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--linje-stark); opacity: .5;
    transition: width var(--r-mellan) var(--e-ut), opacity var(--r-mellan) var(--e-ut), background var(--r-mellan) var(--e-ut); }
  .pk-prickar button[aria-current="true"]::before { width: 20px; border-radius: 4px; background: var(--bla); opacity: 1; }
  .pk-prickar button:focus-visible { outline: 2px solid var(--fokus); outline-offset: -4px; border-radius: var(--r-liten); }
  .hp-alla { justify-content: flex-start; flex-direction: column; align-items: flex-start; padding: var(--s4); border-radius: var(--r-bricka); background: var(--yta); }
  .hp-alla ul { flex-direction: column; gap: var(--s1); }
  .hp-jamfor-yta { padding: var(--s2) var(--s3) var(--s3); }
  .hp-jamfor .tabell th, .hp-jamfor .tabell td { padding: 10px 6px 10px 0; }
  .hp-jamfor .tabell thead th { font-size: 13px; }
  .hp-steg ol { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s4); }
  .hp-steg b { font-size: 16px; }
}

/* ==== Omdömen: bara riktiga (config.RECENSIONER). Inga stjärnor eller citat utan källa ============== */
.hem-omdomen { background: var(--yta); padding: clamp(56px, 6vw, 88px) 0; }
.hem-omdomen > * { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.hem-omdomen h2 { margin: 0 auto var(--s7); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.ho-lista { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: var(--s5); padding: 0 0 var(--s2); list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ho-lista::-webkit-scrollbar { display: none; }
.ho-lista li { scroll-snap-align: start; }
.ho-lista figure { height: 100%; margin: 0; padding: var(--s6); border-radius: var(--r-bricka); background: var(--yta-2); display: flex; flex-direction: column; gap: var(--s4); }
.ho-betyg { display: flex; gap: 4px; margin: 0; }
.ho-betyg span { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--linje-stark); }
.ho-betyg span.pa { border-color: var(--guld-text); background: var(--guld); }
.ho-lista blockquote { margin: 0; font-size: 17px; line-height: 1.5; }
.ho-lista blockquote p { margin: 0; }
.ho-lista figcaption { margin-top: auto; font-size: var(--fs-liten); color: var(--text-2); }

/* ==== Himlen: namnet i fältet landar på en riktig stjärna (skapa.js, sky3d.js) ====================== */
.hem-himmel {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(480px, 58svh, 560px);
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center;
  padding: clamp(56px, 6vw, 80px) 0 clamp(40px, 5vw, 64px);
  background: #0b1020; color: #f5f5f7; text-align: center;   /* samma natt som heron slutar i: ingen kant när flygningen landar här */
}
.hem-himmel canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.hem-himmel .himmel-etiketter { z-index: 1; }
.hem-himmel::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(#0b1020 0, rgb(11 16 32 / .5) 22%, rgb(11 16 32 / 0) 40%, rgb(11 16 32 / 0) 66%, rgb(11 16 32 / .8) 90%); }
.hm-text, .hm-form { position: relative; z-index: 2; width: min(980px, calc(100% - 48px)); }
.hem-himmel h2 { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); color: #f5f5f7; }
.hm-text p { margin: var(--s3) auto 0; max-width: 36ch; font-size: 17px; line-height: 1.47; color: #a3abc0; text-wrap: balance; }
.hm-text, .hm-form { opacity: var(--syns, 1); transform: translateY(calc((1 - var(--syns, 1)) * 24px)); }

.hm-form { grid-row: 3; max-width: 620px; margin: 0; animation: none; }
.hm-falt { display: flex; gap: 8px; padding: 6px; border-radius: calc(var(--r-falt) + 6px);
  background: #141a2e; box-shadow: inset 0 0 0 1px #2a3352; transition: box-shadow .2s var(--e-ut, ease-out); }
.hm-falt:focus-within { box-shadow: inset 0 0 0 1px var(--guld), 0 0 0 3px rgb(227 176 75 / .45); }
.hm-falt input { flex: 1; min-width: 0; min-height: 48px; padding: 0 16px; border: 0; border-radius: var(--r-falt);
  background: transparent; color: #f5f5f7; font: 400 19px/1.2 var(--font); letter-spacing: -.012em; box-shadow: none; }
.hm-falt input::placeholder { color: #8a92a8; }
.hm-falt input:focus, .hm-falt input:hover { outline: none; border: 0; background: transparent; box-shadow: none; }
.hm-falt .knapp { min-height: 48px; flex: none; }
.hm-not { margin: 14px 0 0; font-size: 14px; line-height: 1.43; color: #a3abc0; animation: none; }
.hm-not a { color: #a9bdf0; margin-left: .3em; }

@media (max-width: 734px) {
  .hem-himmel { min-height: 540px; padding-top: 48px; }
  .hm-falt { flex-direction: column; }
  .hm-falt input { min-height: 52px; text-align: center; }
  .hm-falt .knapp { width: 100%; }
  .hm-not a { display: block; margin: 6px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-text, .hm-form { transform: none !important; opacity: 1 !important; }
  .hh-ram { transition: none; }
}

/* ==== Val av tillfälle: visar direkt hur certifikatet blir (hem-tillfalle.js) ====================
   Bytet ska kännas som att ljuset flyttar sig, inte som en ny sida: bilden tonar fram ur en lätt oskärpa
   ovanpå den gamla, texten tonar ut kort och in i tur och ordning. Allt står still vid "minska rörelse". */
.hp-tillfallen > ul a.vald { border-color: var(--bla); color: var(--text); box-shadow: inset 0 0 0 1px var(--bla), 0 10px 22px -16px rgb(22 36 74 / .55); }
.hp-tillfallen > ul a.vald img { filter: none; }
/* Stjärnringen (vald) i bildens hörn, som i valbrickorna */
.hp-tillfallen > ul a.vald::after { content: ""; position: absolute; left: 39px; top: 1px; width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid var(--yta); background: radial-gradient(circle, var(--guld) 0 30%, var(--bla) 36%);
  animation: tona-in var(--r-kort) var(--e-ut) both; }

.tf-visning { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); margin-top: 16px; overflow: hidden;
  border: 1px solid var(--linje); border-radius: var(--r-bricka); background: var(--yta); }

/* Bilden: fyller vänstra halvan. Varje byte lägger ett nytt lager överst som tonar fram. */
.tf-bild { position: relative; margin: 0; min-height: 100%; background: #0b1020; overflow: hidden; isolation: isolate; }
.tf-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tf-bild img.tf-lager { opacity: 0; filter: blur(14px); transform: scale(1.06);
  transition: opacity var(--r-lang) var(--e-ut), filter var(--r-lang) var(--e-ut), transform 1.6s var(--e-ut); }
.tf-bild img.tf-lager.syns { opacity: 1; filter: blur(0); transform: scale(1); }
.tf-bild::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgb(11 16 32 / 0) 52%, rgb(11 16 32 / .78)), linear-gradient(90deg, rgb(11 16 32 / 0) 80%, rgb(11 16 32 / .18)); }
.tf-bild figcaption { position: absolute; z-index: 2; left: 24px; bottom: 20px; color: #f5f5f7;
  font: 600 clamp(20px, 1.8vw, 26px)/1.1 var(--font-rubrik); letter-spacing: -.02em; }
.tf-bild figcaption span { display: block; animation: tf-in var(--r-mellan) var(--e-ut) both; }

.tf-innehall { padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 0;
  transition: opacity var(--r-kort) var(--e-in), filter var(--r-kort) var(--e-in), transform var(--r-kort) var(--e-in); }
.tf-innehall.ut { opacity: 0; filter: blur(4px); transform: translateY(-4px); }
.tf-innehall.in > * { animation: tf-in var(--r-mellan) var(--e-ut) both; }
.tf-innehall.in > :nth-child(2) { animation-delay: calc(var(--stagg) * 1); }
.tf-innehall.in > :nth-child(3) { animation-delay: calc(var(--stagg) * 2); animation-name: tf-ark-in; animation-duration: var(--r-lang); }
.tf-innehall.in > :nth-child(4), .tf-innehall.in > :nth-child(5) { animation-delay: calc(var(--stagg) * 3); }
.tf-innehall.in > :nth-child(n+6) { animation-delay: calc(var(--stagg) * 4); }
@keyframes tf-in { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } }
@keyframes tf-ark-in { from { opacity: 0; transform: translateY(10px) scale(.985); filter: blur(4px); } }
.tf-innehall h3 { margin: 0 0 6px; font: 600 clamp(21px, 1.8vw, 26px)/1.15 var(--font-rubrik); letter-spacing: -.025em; color: var(--text); }
.tf-innehall h3:focus { outline: none; }
.tf-ingress { margin: 0 0 18px; font-size: var(--fs-liten); color: var(--text-2); max-width: 54ch; }

/* Utdrag ur certifikatet i Natt-designen, som en liten inramad tavla: tunn mörk list, vitt passepartout,
   nattsvart papper med lite stjärnstoft och en tunn ljus innerlinje. Skuggan som på en vägg. */
.tf-ark-ram { position: relative; margin: 0 0 20px; padding: 10px; border-radius: 2px;
  background: linear-gradient(135deg, #fdfdfb 0%, #f4f3ef 100%);
  box-shadow:
    0 0 0 1px rgb(18 23 38 / .14),                 /* listen */
    inset 0 0 0 1px rgb(255 255 255 / .9),
    0 1px 1px rgb(11 16 32 / .06),
    0 6px 12px -6px rgb(11 16 32 / .16),
    0 26px 44px -22px rgb(11 16 32 / .42); }
/* Passepartoutens fasade kant mot papperet */
.tf-ark-ram::after { content: ""; position: absolute; inset: 13px; pointer-events: none;
  box-shadow: inset 1px 1px 0 rgb(11 16 32 / .1), inset -1px -1px 0 rgb(255 255 255 / .9); }
.tf-ark { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 2px; padding: 22px 24px 20px;
  text-align: center; font-family: "Schibsted Cert", var(--cert-sans, system-ui), sans-serif; color: #e9e8e4;
  background:
    radial-gradient(1px 1px at 12% 22%, rgb(255 255 255 / .7) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 16%, rgb(255 255 255 / .55) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 64% 70%, rgb(255 255 255 / .5) 50%, transparent 51%),
    radial-gradient(1px 1px at 30% 82%, rgb(255 255 255 / .45) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 58%, rgb(255 255 255 / .4) 50%, transparent 51%),
    radial-gradient(80% 70% at 50% 0%, rgb(60 78 130 / .28) 0, rgb(10 12 19 / 0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    #0a0c13; }
/* Dubbel guldlinje innanför kanten, som på trycket */
.tf-ark::before { content: ""; position: absolute; inset: 6px; pointer-events: none;
  border: 1px solid rgb(233 232 228 / .14); }
.tf-ring { width: 18px; height: 18px; margin-bottom: 6px; fill: none; stroke: #e3b04b; stroke-width: 1.3; }
.tf-ring circle:last-child { fill: var(--guld, #e3b04b); stroke: none; }
.tf-ark-fore, .tf-ark-efter { font-size: 13px; color: #b1b6c2; text-wrap: balance; }
.tf-ark-namn { font-size: clamp(22px, 2vw, 28px); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; color: #f3f1ec; margin: 2px 0; text-wrap: balance; }
.tf-linje { width: 44px; height: 1px; margin: 6px 0 4px; background: linear-gradient(90deg, rgb(227 176 75 / 0), rgb(227 176 75 / .8), rgb(227 176 75 / 0)); }

/* Förslag: paket och design som brukar passa, båda klickbara */
.tf-rubrik-liten { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.tf-forslag { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.tf-val { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px 8px 8px;
  min-height: 76px; border: 1px solid var(--linje); border-radius: var(--r-falt); background: var(--yta); color: var(--text); text-decoration: none;
  transition: border-color var(--r-kort) var(--e-ui), background-color var(--r-kort) var(--e-ui); }
.tf-val:hover { border-color: var(--linje-stark); background: var(--yta-2); text-decoration: none; }
.tf-val:focus-visible { outline: 2px solid var(--bla); outline-offset: 2px; }
.tf-val img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--r-liten); background: var(--yta-3); }
.tf-val b { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; }
.tf-val small { display: block; font-size: 13px; color: var(--text-2); line-height: 1.35; margin-top: 2px; }
.tf-val em { font-style: normal; font-family: var(--font-rubrik); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Handlingen: en tydlig primärknapp, en textlänk, och fakta om köpet direkt under */
.tf-cta { display: flex; align-items: center; gap: var(--s4) var(--s6); flex-wrap: wrap; margin-top: auto; }
.tf-cta .knapp { min-width: 200px; min-height: 46px; padding-inline: 24px; font-size: 16px; }
.tf-alla { font-size: 15px; }
.tf-trygg { display: flex; flex-wrap: wrap; gap: 4px var(--s5); margin: var(--s3) 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.4; color: var(--text-2); }
.tf-trygg li { display: flex; align-items: center; gap: 7px; }
.tf-trygg li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--text-2);
  background: radial-gradient(circle, var(--guld) 0 26%, transparent 32%); }
.pk { transition: border-color var(--r-mellan) var(--e-ut), box-shadow var(--r-mellan) var(--e-ut); }
.pk.pk-passar { border-color: var(--bla); box-shadow: 0 0 0 1px var(--bla); }

@media (max-width: 1068px) { .tf-forslag { grid-template-columns: 1fr; } }
@media (max-width: 734px) {
  .tf-visning { grid-template-columns: 1fr; }
  .tf-bild { min-height: 0; aspect-ratio: 16 / 10; }
  .tf-bild img { object-position: 50% 78%; }
  .tf-innehall { padding: 20px; }
  .tf-ark-ram { padding: 10px; }
  .tf-ark-ram::after { inset: 9px; }
  .tf-ark { padding: 26px 18px 22px; }
  .tf-cta { gap: var(--s4); }
  .tf-cta .knapp { width: 100%; min-width: 0; }
  .tf-alla { margin: 0 auto; }
  .tf-trygg { flex-direction: column; flex-wrap: nowrap; flex-shrink: 0; }
  .hp-tillfallen > ul a { padding-right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .tf-innehall, .tf-bild img.tf-lager, .hp-tillfallen > ul a, .hp-tillfallen > ul img, .pk { transition: none; }
  .tf-innehall.ut { opacity: 1; filter: none; transform: none; }
  .tf-innehall.in > *, .tf-bild figcaption span, .hp-tillfallen > ul a.vald::after { animation: none; }
  .tf-bild img.tf-lager { filter: none; transform: none; }
  .hp-tillfallen > ul a:hover img { transform: none; }
}

/* ==== UX-genomgång 3 (2026-11-02) ==================================================================== */
/* Jämförelsetabellen slutar med Välj-knappar, så att man inte behöver skrolla tillbaka till korten */
.hp-jamfor-val td { padding-top: var(--s4); border-bottom: 0; vertical-align: top; }
.hp-jamfor-val .knapp { width: 100%; min-height: 44px; }
/* Mobil: "Priser" i menyn ska landa på priserna. Korten kommer direkt under rubriken och
   tillfällesvalet ("Vem är den till?" med exemplet) flyttas ner efter jämförelsen. Samma ordning för skärmläsare
   spelar mindre roll här: tillfällena är en genväg, inte en förutsättning för korten. */
@media (max-width: 734px) {
  .hem-paket { display: flex; flex-direction: column; }
  .hp-huvud { display: contents; }
  .hp-huvud > div, .hp-tillfallen { width: calc(100% - 32px); margin-inline: auto; }
  .hp-huvud > div { margin-bottom: var(--s6); }
  .hp-tillfallen { order: 1; margin-top: var(--s9); }
  .hp-steg { order: 2; }
}