@import url("fonts/fonts.css");

/* ── kalMO ──
   Paletten är hämtad rakt ur appen: ljusa temat med smaragd som accent, samma
   värden som CSS-variablerna i www/index.html. Den varma greigen, den nästan
   vita ytan, den gröntonade gråskalan och smaragdgradienten på knapparna.
   Mintskimret uppe till höger är appens egen radialgradient (#8be0b6).

   Space Grotesk och IBM Plex Mono ligger självhostade i fonts/ — samma filer
   som appen använder, inget hämtas utifrån. */
:root{
  /* Vit botten för läsbarhetens skull. Den varma greigen ur appen finns kvar,
     men som kortyta i stället för sidbakgrund — så texten alltid vilar mot
     vitt och skimret aldrig ligger bakom en textrad. */
  --sand:#FFFFFF;
  --yta:#F7F6F1;
  --sank:#EFEDE6;
  --black:#14161A;
  --dov:#454E48;
  --linje:rgba(20,22,26,.14);
  --accent:#236B50;
  --accent-ljus:#2F8262;
  --skimmer:rgba(139,224,182,.42);
  --gron:#236B50;
  /* Mot vit botten klarar appens egen smaragd kravet med marginal (6,4:1),
     så länktexten kan använda exakt samma färg som knapparna. */
  --lank:#236B50;
  --knapp-text:#FFFFFF;

  /* Mörka ytor ur appens kort och ring — telefonramarna vilar på samma två. */
  --mork-1:#47474F;
  --mork-2:#2B2B31;

  --sans:'Space Grotesk',ui-sans-serif,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --matt:1140px;
  --text-matt:66ch;
}

@media (prefers-color-scheme:dark){
  :root{
    --sand:#0E0C16;
    --yta:#1C1930;
    --sank:#242038;
    --black:#EAFAEF;
    --dov:#93ADA0;
    --linje:rgba(207,207,224,.24);
    --accent:#63D19E;
    --accent-ljus:#8BE0B6;
    --skimmer:rgba(139,224,182,.20);
    --gron:#63D19E;
    --lank:#63D19E;
    /* Mint är för ljust för vit text — 1,6:1. Mörk text på knappen i stället. */
    --knapp-text:#0E0C16;
    --mork-1:#2A2740;
    --mork-2:#161327;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

body{
  margin:0;
  background:var(--sand);
  color:var(--black);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

.matt{max-width:var(--matt);margin:0 auto;padding:0 24px}

/* ── Typografi ── */
h1,h2,h3{margin:0;letter-spacing:-.028em;text-wrap:balance;font-weight:700}
h1{font-size:clamp(38px,6.4vw,68px);line-height:1.03}
h2{font-size:clamp(27px,3.6vw,40px);line-height:1.12;margin-bottom:14px}
h3{font-size:19px;line-height:1.28;letter-spacing:-.012em;margin-bottom:7px}
p{margin:0 0 16px;max-width:var(--text-matt)}
a{color:var(--lank);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Ringen är appens signatur — en nedräkningscirkel. Den återkommer som liten
   markör före varje avsnittsetikett och som stor kontur bakom hero-telefonen,
   så sajten känns som samma sak som appen utan att härma den. */
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--dov);margin:0 0 14px;font-weight:500;
  display:flex;align-items:center;gap:9px;
}
.eyebrow::before{
  content:"";width:9px;height:9px;border-radius:50%;flex:none;
  border:2px solid var(--accent);
}
.pris .eyebrow::before{width:7px;height:7px;border-width:1.5px}
.lead{font-size:clamp(18px,2.1vw,21px);color:var(--dov);max-width:56ch}

/* ── Topp ── */
.topp{
  position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--sand) 90%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--linje);
}
.topp .matt{display:flex;align-items:center;gap:22px;min-height:64px;padding-block:8px}
.logga{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-.02em;text-decoration:none;color:var(--black)}
.logga .ring{width:19px;height:19px;border-radius:50%;border:2.5px solid var(--accent);flex:none}
/* Utan JavaScript syns alla sex språks navlänkar samtidigt. Raden måste kunna
   vika sig, annars skjuter den ut sidan i sidled — den enda platsen där
   fallbacken faktiskt gick sönder. */
.topp nav{margin-left:auto;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px 24px;align-items:center}
.topp .matt{flex-wrap:wrap}
.topp nav a{color:var(--dov);text-decoration:none;font-size:15px}
.topp nav a:hover{color:var(--black)}
@media (max-width:820px){.topp nav a.gomsmal{display:none}}

/* Flaggväxlaren. Flaggor är en grov genväg för språk — engelska talas inte
   bara i Storbritannien och arabiska inte bara i Saudiarabien — så koden står
   alltid bredvid flaggan och aria-label bär det riktiga språknamnet. */
.sprakval{display:flex;gap:2px;border:1px solid var(--linje);border-radius:999px;padding:2px;flex:none}
.sprakval button{
  display:flex;align-items:center;gap:5px;border-radius:999px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:4px 8px;
  background:none;border:none;color:var(--dov);cursor:pointer;line-height:1;
  transition:background .18s,color .18s;
}
.sprakval button .flagga{font-size:14px;line-height:1}
.sprakval button:hover{color:var(--black)}
.sprakval button[aria-pressed="true"]{background:var(--accent);color:var(--knapp-text)}
/* På smala skärmar räcker flaggorna — koderna tar plats som navigationen
   behöver bättre. Under 460 px ryms inte sex flaggor på en rad heller, så
   växlaren får skrolla i sidled inuti sig själv i stället för att skjuta ut
   hela sidan. */
@media (max-width:700px){
  .sprakval button .kod{display:none}
  .sprakval button{padding:5px 5px}
  .sprakval{gap:0}
}
@media (max-width:460px){
  .topp .matt{gap:12px}
  .sprakval{
    overflow-x:auto;max-width:min(58vw,214px);
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
  }
  .sprakval::-webkit-scrollbar{display:none}
  .sprakval button{flex:none}
}

/* ── Höger till vänster ── */
[dir="rtl"] .topp nav{margin-left:0;margin-right:auto}
[dir="rtl"] .steg,[dir="rtl"] .kort,[dir="rtl"] .pris,[dir="rtl"] .uppgifter dd{text-align:right}
[dir="rtl"] .notis{border-left:none;border-right:3px solid var(--accent);border-radius:10px 0 0 10px}
[dir="rtl"] .dokument .kort-svar{border-left:none;border-right:3px solid var(--accent);border-radius:10px 0 0 10px}
[dir="rtl"] .fraga summary{flex-direction:row-reverse}
[dir="rtl"] .pris .marke{right:auto;left:18px}
[dir="rtl"] ul.plain,[dir="rtl"] .dokument ul{padding-left:0;padding-right:22px}

/* ── Sektioner ── */
section{padding:86px 0;background:var(--sand)}
section.tonad{background:var(--sank)}
section.tat{padding:60px 0}
section + section{border-top:1px solid var(--linje)}
/* Appens mintskimmer ligger bara här uppe, som en hälsning från startskärmen.
   Resten av sidan är ren vit så inget kommer mellan ögat och texten. */
.hero{
  padding:88px 0 80px;border-top:none;position:relative;isolation:isolate;overflow:hidden;
  background:
    radial-gradient(760px 520px at 86% -12%, var(--skimmer), transparent 64%),
    radial-gradient(600px 420px at 2% 4%, var(--skimmer), transparent 60%);
}
.hero::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:min(620px,54vw);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--linje);
  right:min(4vw,90px);top:50%;transform:translateY(-50%);
}
.hero::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:min(430px,38vw);aspect-ratio:1;border-radius:50%;
  border:1px dashed var(--linje);opacity:.7;
  right:calc(min(4vw,90px) + min(95px,8vw));top:50%;transform:translateY(-50%);
}
@media (max-width:900px){.hero::before,.hero::after{display:none}}

.tvakol{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
@media (max-width:900px){.tvakol{grid-template-columns:1fr;gap:44px}}

/* ── Telefonram ── */
.telefon{
  width:100%;max-width:310px;margin:0 auto;border-radius:42px;padding:9px;
  background:linear-gradient(145deg,var(--mork-1),var(--mork-2));
  box-shadow:0 34px 70px -22px rgba(20,45,35,.42),0 6px 18px -6px rgba(20,45,35,.18),
             0 0 0 1px rgba(255,255,255,.07) inset;
}
/* height:auto krävs — utan den vinner höjdattributet i markupen (1688 px) över
   bredden och telefonen blir metervis hög. */
.telefon img{display:block;width:100%;height:auto;border-radius:34px}
.telefoner{display:flex;gap:26px;justify-content:center;flex-wrap:wrap}
.telefoner .telefon{max-width:250px}

/* ── Knappar ── */
.knapp{
  display:inline-flex;align-items:center;gap:9px;padding:15px 27px;border-radius:999px;
  background:linear-gradient(118deg,var(--accent),var(--accent-ljus));
  color:var(--knapp-text);text-decoration:none;font-weight:600;font-size:16px;
  border:1px solid transparent;transition:transform .18s,filter .18s;
}
.knapp:hover{filter:brightness(1.11)}
.knapp:active{transform:scale(.98)}
.knapp.tom{background:none;color:var(--black);border-color:var(--linje)}
.knappar{display:flex;gap:13px;flex-wrap:wrap;align-items:center;margin-top:30px}
.snart{font-family:var(--mono);font-size:12.5px;color:var(--dov);letter-spacing:.05em}

/* ── Steg ── */
.steg{list-style:none;padding:0;margin:38px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--linje);border:1px solid var(--linje);border-radius:16px;overflow:hidden}
.steg li{background:var(--sand);padding:26px 24px}
.steg .nr{font-family:var(--mono);font-size:12px;color:var(--lank);letter-spacing:.14em;display:block;margin-bottom:13px}
.steg p{margin:0;font-size:15.5px;color:var(--dov)}

/* ── Kort ── */
.kort-rutnat{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px;margin-top:38px}
.kort-rutnat .kort{
  background:var(--sand);border:1px solid var(--linje);border-radius:16px;padding:26px 24px;
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.kort-rutnat .kort:hover{
  border-color:var(--accent);transform:translateY(-3px);
  box-shadow:0 14px 30px -16px rgba(20,45,35,.28);
}
.kort .ikon{font-size:23px;line-height:1;display:block;margin-bottom:14px}
.kort p{margin:0;font-size:15.5px;color:var(--dov)}

/* ── Pris ── */
.prisrad{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:560px;margin-top:8px}
@media (max-width:620px){.prisrad{grid-template-columns:1fr}}
.pris{position:relative;background:var(--sand);border:1px solid var(--linje);border-radius:20px;padding:30px 28px;max-width:520px}
.pris.vald{border-color:var(--accent);border-width:2px;padding:29px 27px}
.pris .marke{
  position:absolute;top:-13px;right:20px;z-index:2;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;padding:5px 13px;border-radius:999px;
  background:linear-gradient(118deg,var(--accent),var(--accent-ljus));color:var(--knapp-text);
  white-space:nowrap;box-shadow:0 6px 16px -8px rgba(20,60,45,.55);
}
.pris .jamfor{margin:14px 0 0;font-size:14px;color:var(--dov)}
.pris-punkter{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:11px;max-width:520px}
.pris-punkter li{display:flex;gap:11px;font-size:15.5px;align-items:flex-start}
.pris-punkter li::before{content:"";flex:none;width:17px;height:17px;margin-top:4px;border-radius:50%;background:var(--gron);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.pris .belopp{font-family:var(--mono);font-size:46px;font-weight:600;letter-spacing:-.03em;line-height:1;margin:6px 0 4px}
.pris .per{font-family:var(--mono);font-size:15px;color:var(--dov)}
.pris ul{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:11px}
.pris li{display:flex;gap:11px;font-size:15.5px;align-items:flex-start}
.pris li::before{content:"";flex:none;width:17px;height:17px;margin-top:4px;border-radius:50%;background:var(--gron);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}

/* ── Vanliga frågor ── */
.fraga{border-bottom:1px solid var(--linje)}
.fraga summary{
  cursor:pointer;padding:19px 0;font-weight:600;font-size:17px;list-style:none;
  display:flex;justify-content:space-between;gap:18px;align-items:baseline;
}
.fraga summary::-webkit-details-marker{display:none}
.fraga summary::after{
  content:"+";font-family:var(--mono);color:var(--accent);font-size:20px;flex:none;
  transition:transform .25s;
}
.fraga[open] summary::after{content:"–";transform:rotate(180deg)}
.fraga summary:hover{color:var(--accent)}
.fraga[open]{background:linear-gradient(var(--sank),var(--sank)) padding-box;border-radius:12px}
.fraga[open] summary{padding-left:14px;padding-right:14px}
.fraga[open] p{padding:0 14px}
.fraga p{margin:0 0 19px;color:var(--dov);font-size:15.5px}

/* ── Notis ── */
.notis{border-left:3px solid var(--accent);background:var(--sank);padding:18px 20px;border-radius:0 10px 10px 0;margin:26px 0}
.notis p{margin:0;font-size:15.5px}
.notis p + p{margin-top:10px}

/* ── Uppgiftsblock ──
   Etikett till vänster, värde till höger. Definitionslista för att det är vad
   det är: en uppgift och dess värde, inte en tabell och inte en punktlista. */
.uppgifter{
  display:grid;grid-template-columns:minmax(140px,auto) 1fr;gap:1px;
  background:var(--linje);border:1px solid var(--linje);border-radius:14px;overflow:hidden;
  margin:24px 0;
}
.uppgifter dt,.uppgifter dd{background:var(--sand);padding:14px 18px;margin:0;font-size:15.5px}
.uppgifter dt{
  font-family:var(--mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dov);display:flex;align-items:center;
}
.uppgifter dd a{font-weight:600}
.uppgifter dd small{display:block;color:var(--dov);font-size:13.5px;line-height:1.5;margin-top:3px}
@media (max-width:560px){
  .uppgifter{grid-template-columns:1fr}
  .uppgifter dt{padding-bottom:0;background:var(--sand)}
  .uppgifter dd{padding-top:6px}
}

/* ── Checklista inför ett supportärende ── */
.checklista{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:9px}
.checklista li{display:flex;gap:11px;font-size:15.5px;align-items:flex-start;color:var(--dov)}
.checklista li::before{
  content:"";flex:none;width:7px;height:7px;margin-top:9px;border-radius:50%;background:var(--accent);
}

/* ── Fot ── */
footer{border-top:1px solid var(--linje);padding:52px 0 60px;color:var(--dov);font-size:14.5px}
footer .rader{display:flex;flex-wrap:wrap;gap:28px 44px;margin-bottom:30px}
footer h4{margin:0 0 11px;font-size:12px;font-family:var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--dov);font-weight:500}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
footer a{color:var(--black);text-decoration:none}
footer a:hover{text-decoration:underline}
footer .fin{border-top:1px solid var(--linje);padding-top:24px;font-size:13.5px}

/* ── Juridiska sidor ── */
.dokument{max-width:760px;margin:0 auto;padding:56px 24px 90px}
.dokument h1{font-size:clamp(30px,4.4vw,44px);margin-bottom:12px}
.dokument h2{font-size:21px;margin:38px 0 10px}
.dokument p,.dokument li{font-size:16px;color:var(--black);max-width:none}
.dokument ul{padding-left:22px}
.dokument li{margin-bottom:7px}
.dokument .datum{font-family:var(--mono);font-size:13px;color:var(--dov);margin-bottom:30px}
.dokument .kort-svar{background:var(--sank);border-left:3px solid var(--accent);padding:18px 20px;border-radius:0 10px 10px 0;margin:0 0 34px}
.dokument .kort-svar p{margin:0;font-size:15.5px}

/* ── Språk ──
   Båda språken ligger i sidan. Utan JavaScript syns de under varandra, vilket
   är rätt fallback: en granskare som inte kör skript hittar ändå engelskan.

   :where() håller språkreglerna på låg specificitet med flit. Utan det vinner
   de över layoutregler som gömmer saker på små skärmar — navigationen låg kvar
   och sköt ut sidan i sidled, eftersom "visa engelska" slog "göm på mobil". */
html.js[data-visar="sv"] :where([data-sprak]:not([data-sprak="sv"])){display:none}
html.js[data-visar="en"] :where([data-sprak]:not([data-sprak="en"])){display:none}
html.js[data-visar="fr"] :where([data-sprak]:not([data-sprak="fr"])){display:none}
html.js[data-visar="es"] :where([data-sprak]:not([data-sprak="es"])){display:none}
html.js[data-visar="de"] :where([data-sprak]:not([data-sprak="de"])){display:none}
html.js[data-visar="ar"] :where([data-sprak]:not([data-sprak="ar"])){display:none}
.sprak-skiljare{border:none;border-top:1px solid var(--linje);margin:56px 0}
html.js .sprak-skiljare{display:none}

/* ── Entré ──
   Avsnitten tonar upp när de kommer in i vyn. Klassen sätts av JavaScript, så
   utan skript ligger allt synligt från början — sidan får aldrig vara tom för
   den som stängt av något. */
.js .avsnitt-in{opacity:0;transform:translateY(14px)}
.js .avsnitt-in.syns{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .rorelse .avsnitt-in{opacity:1;transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   RÖRELSE
   Ett orkestrerat ögonblick vid laddning, och sedan tystnad. Sidor som rör
   sig hela tiden blir tröttsamma; det som ska märkas är hero-sekvensen.
   Allt nedan tystnar helt vid prefers-reduced-motion, längst ned.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero-ringen ──
   Appen är en nedräkningscirkel, så sajtens ring räknar också. Den ritas upp
   en gång när sidan laddas och stannar — inte en snurra som aldrig tar slut. */
.telefonhall{position:relative;display:grid;place-items:center;isolation:isolate}
.hero-ring{
  position:absolute;z-index:-1;width:min(560px,50vw);aspect-ratio:1;
  transform:rotate(-90deg);pointer-events:none;overflow:visible;
}
/* non-scaling-stroke räknar bredden i skärmpixlar, inte i viewBox-enheter —
   0.35 blev en tredjedels pixel och ringen syntes knappt. */
.hero-ring circle{fill:none;vector-effect:non-scaling-stroke}
.hero-ring-spar{stroke:var(--linje);stroke-width:1.2}
.hero-ring-fyll{
  stroke:var(--accent);stroke-linecap:round;stroke-width:2.2;opacity:.55;
  stroke-dasharray:295.3;stroke-dashoffset:295.3;
  animation:ringRitas 2.4s cubic-bezier(.32,.72,.28,1) .35s forwards;
}
@keyframes ringRitas{to{stroke-dashoffset:66}}
@media (max-width:900px){.hero-ring{display:none}}

/* Den yttre statiska konturen ersätts av den ritade ringen */
.hero::before,.hero::after{display:none}

/* ── Hero-sekvensen ──
   Etikett, rubrik, text, knapp och telefon kommer in i tur och ordning. Stegen
   styrs av --steg så ordningen syns i markupen i stället för i sex regler. */
.rorelse .hero [data-sprak] > *,
.rorelse .hero .telefonhall{
  opacity:0;animation:stigIn .8s cubic-bezier(.22,.75,.3,1) forwards;
}
.rorelse .hero [data-sprak] > .eyebrow{animation-delay:.05s}
.rorelse .hero [data-sprak] > h1{animation-delay:.14s}
.rorelse .hero [data-sprak] > .lead{animation-delay:.26s}
.rorelse .hero [data-sprak] > .knappar{animation-delay:.36s}
.rorelse .hero .telefonhall{animation-delay:.2s;animation-duration:1.1s}
@keyframes stigIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Rubriken reser sig ord för ord. Orden delas av JavaScript; utan skript står
   rubriken kvar som vanlig text och animeras som en helhet ovan. */
.rubrik-in .ord{display:inline-block;overflow:hidden;vertical-align:top}
.rubrik-in .ord > span{
  display:inline-block;transform:translateY(105%);
  animation:ordUpp .78s cubic-bezier(.2,.8,.25,1) forwards;
  animation-delay:calc(.16s + var(--i,0) * .045s);
}
@keyframes ordUpp{to{transform:none}}

/* ── Telefonens lutning ──
   Följer pekaren mycket lätt. Vinklarna sätts av JavaScript som CSS-variabler
   så själva rörelsen sköts av kompositorn. */
.telefon{
  transform:perspective(1400px) rotateX(var(--lutX,0deg)) rotateY(var(--lutY,0deg));
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}
.telefonhall:hover .telefon{transition-duration:.16s}

/* ── Knappen ──
   Ett mjukt sken som följer pekaren över ytan. Ingen rörelse i vila. */
.knapp{position:relative;overflow:hidden;isolation:isolate}
.knapp::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:radial-gradient(180px circle at var(--px,50%) var(--py,50%),
             rgba(255,255,255,.28),transparent 62%);
  transition:opacity .28s;
}
.knapp:hover::after{opacity:1}

/* ── Avsnitt som rullas in ──
   Modern väg först: animeringen drivs av rullningen utan JavaScript. Där
   animation-timeline saknas tar IntersectionObserver över, se liv.js. */
@supports (animation-timeline: view()){
  .js .avsnitt-in{
    opacity:0;
    animation:avsnittIn linear both;
    animation-timeline:view();
    animation-range:entry 8% cover 26%;
  }
  .rorelse .avsnitt-in.syns{opacity:1}
}
@keyframes avsnittIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* Kort och steg kommer in en efter en inom sitt avsnitt */
.rorelse .kort-rutnat .kort,.rorelse .steg li,.rorelse .prisrad > .pris{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.75,.3,1);
  transition-delay:calc(var(--i,0) * 70ms);
}
.rorelse .syns .kort-rutnat .kort,.rorelse .syns .steg li,.rorelse .syns .prisrad > .pris{opacity:1;transform:none}

/* ── Läsindikator ──
   En hårfin linje högst upp som visar hur långt man kommit. Drivs av
   rullningen, inte av JavaScript. */
.laslinje{
  position:fixed;inset:0 0 auto 0;height:2px;z-index:60;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent),var(--accent-ljus));
  transform:scaleX(var(--las,0));
}
@supports (animation-timeline: scroll()){
  .laslinje{
    transform:scaleX(0);
    animation:lasFram linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes lasFram{to{transform:scaleX(1)}}
}

/* ── Språkbyte ──
   View Transitions ger en kort övertoning i stället för ett hopp. Saknas API:t
   byts språket precis som förut. */
@view-transition{navigation:none}
::view-transition-old(root){animation:tonaUt .22s ease both}
::view-transition-new(root){animation:tonaIn .3s ease both}
@keyframes tonaUt{to{opacity:0}}
@keyframes tonaIn{from{opacity:0}}

/* ── Detaljer ── */
/* Bara korten. content-visibility medför contain: paint, vilket klipper allt
   utanför elementets ruta — på .pris åt det upp "Spara 32 %"-märket som sitter
   ovanför kanten. Och på berättelsens steg, som är 58vh höga, hade gissningen
   på 200px gett hopp i rullningen. */
.kort-rutnat .kort{content-visibility:auto;contain-intrinsic-size:auto 220px}
.telefoner .telefon{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.telefoner .telefon:hover{transform:translateY(-8px)}
.topp{transition:box-shadow .3s,border-color .3s}
.topp.skrollad{box-shadow:0 6px 24px -18px rgba(20,45,35,.5)}

/* ── Stillhet ──
   Ett enda ställe som stänger av allt rörligt. */
@media (prefers-reduced-motion:reduce){
  .js .hero [data-sprak] > *,.js .hero .telefonhall,
  .rubrik-in .ord > span,.hero-ring-fyll{animation:none!important;opacity:1!important;transform:none!important}
  .hero-ring-fyll{stroke-dashoffset:66}
  .js .avsnitt-in,.js .kort,.js .steg li,.js .prisrad > .pris{
    opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  .telefon{transition:none}
  .laslinje{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   BERÄTTELSEN
   Stegen rullar förbi medan telefonen står kvar och byter skärm. Det är den
   enda platsen på sajten där rörelsen bär innehåll i stället för att pryda
   det — man ser vad varje steg gör medan man läser om det.
   ══════════════════════════════════════════════════════════════════════════ */
.berattelse-rutnat{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.berattelse-text{padding:8px 0 0}
.berattelse-telefon{
  position:sticky;top:calc(50vh - 320px);
  display:grid;place-items:center;
}
.telefon-stack{position:relative;max-width:290px;aspect-ratio:390/844}
.telefon-stack .steg-bild{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:34px;opacity:0;transform:scale(.985);
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.75,.3,1);
}
.telefon-stack .steg-bild.ar{opacity:1;transform:none}

/* Stegen: det aktiva lyfts fram, de andra vilar tillbaka */
.berattelse .steg{
  display:block;background:none;border:none;border-radius:0;margin:0;overflow:visible;
}
.berattelse .steg li{
  background:none;padding:0 0 0 26px;position:relative;
  min-height:58vh;display:flex;flex-direction:column;justify-content:center;
  opacity:.35;transition:opacity .45s ease;
}
.berattelse .steg li::before{
  content:"";position:absolute;left:0;top:calc(50% - 26px);
  width:2px;height:52px;border-radius:2px;background:var(--linje);
  transition:background .45s ease,transform .45s cubic-bezier(.2,.8,.3,1);
  transform:scaleY(.4);transform-origin:50% 50%;
}
.berattelse .steg li.aktiv{opacity:1}
.berattelse .steg li.aktiv::before{background:var(--accent);transform:scaleY(1)}
.berattelse .steg .nr{color:var(--accent)}

@media (max-width:900px){
  .berattelse-rutnat{grid-template-columns:1fr;gap:30px}
  .berattelse-telefon{position:static;margin-bottom:8px}
  .telefon-stack{max-width:240px}
  .berattelse .steg li{min-height:0;padding:22px 0 22px 26px;opacity:1}
  .berattelse .steg li::before{top:26px;height:34px;transform:scaleY(1);background:var(--accent)}
}

/* ══════════════════════════════════════════════════════════════════════════
   LEVANDE BAKGRUND
   Ett canvas-fält bakom hero: några få mjuka fläckar som driver långsamt i
   appens mintgröna. Ritas i låg upplösning och skalas upp — fläckarna är
   suddiga ändå, och då kostar det nästan ingenting.
   ══════════════════════════════════════════════════════════════════════════ */
.falt{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  pointer-events:none;opacity:.85;
}
.hero{position:relative}

/* ══════════════════════════════════════════════════════════════════════════
   DETALJER
   ══════════════════════════════════════════════════════════════════════════ */

/* Siffror som räknas upp när priset kommer fram */
.belopp{font-variant-numeric:tabular-nums}

/* Korten lutar mot pekaren. Vinklarna sätts som variabler av liv.js. */
.kort-rutnat .kort{
  transform:perspective(900px) rotateX(var(--kx,0deg)) rotateY(var(--ky,0deg)) translateY(var(--kz,0));
  transform-style:preserve-3d;
}
.kort-rutnat .kort:hover{--kz:-3px}

/* Knappen dras svagt mot pekaren när man närmar sig */
.knapp{transform:translate(var(--mx,0),var(--my,0));transition:transform .35s cubic-bezier(.2,.8,.3,1),filter .18s}
.knapp:active{transform:translate(var(--mx,0),var(--my,0)) scale(.98)}

/* Bilderna i galleriet skjuts fram en efter en */
.rorelse .telefoner .telefon{
  opacity:0;transform:translateY(26px) scale(.97);
  transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.28,1);
  transition-delay:calc(var(--i,0) * 110ms);
}
.rorelse .syns .telefoner .telefon{opacity:1;transform:none}
.rorelse .syns .telefoner .telefon:hover{transform:translateY(-8px)}

@media (prefers-reduced-motion:reduce){
  .telefon-stack .steg-bild{transition:none}
  .berattelse .steg li{opacity:1}
  .berattelse .steg li::before{transform:scaleY(1);background:var(--accent)}
  .falt{display:none}
  .kort-rutnat .kort,.knapp{transform:none!important}
  .telefoner .telefon{opacity:1!important;transform:none!important;transition:none}
}

/* Priset tonar in i stället för att räknas upp. En prenumerationskostnad ska
   aldrig visa ett tal användaren inte debiteras, inte ens i en tiondels
   sekund — och uppräkningen hann synas som "14 kr" innan den landade på 20. */
.rorelse .belopp{opacity:0;transform:translateY(8px)}
.rorelse .syns .belopp{opacity:1;transform:none;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.3,1);transition-delay:.1s}
@media (prefers-reduced-motion:reduce){
  .belopp{opacity:1!important;transform:none!important;transition:none}
}