/* STARTSIDANS STIL – lyft ur landing.html 2026-09-23 så att sidorna under swintel.se (scripts/bygg-sidor.js) delar den.
   Sidhuvudet och foten bor i assets/sidor.css. */
  :root{--bg:var(--sw-bg, #0b1120);--bg2:var(--sw-deep, #0d1628);--card:var(--sw-card, #111c33);--card2:var(--sw-card, #13213a);--line:rgba(148,163,184,.18);--txt:var(--sw-ink, #e7eefb);--muted:var(--sw-mut, #a9bad6);--accent:#38bdf8;--accent2:#22d3ee;--gold:#fbbf24;--green:#34d399}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:86px}   /* sticky header 65 px + luft – annars hamnar ankarmålet under den */
  body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--sw-f-ui);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1120px;margin:0 auto;padding:0 22px}
  .btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:13px 22px;font-weight:800;font-size:15px;cursor:pointer;border:1px solid transparent;transition:transform .12s ease,box-shadow .2s ease,background .2s}
  .btn:active{transform:translateY(1px)}
  /* Inken på en accentfylld knapp är --on-accent (mörk i mörkt tema, VIT i ljust). --sw-deep är
     en YTA och blev ljusblå text på ljusblå knapp i ljust läge: 2,2:1. */
  .btn-primary{background:linear-gradient(180deg,var(--accent),var(--sw-acc));color:var(--on-accent);box-shadow:0 8px 24px rgba(56,189,248,.35)}
  .btn-primary:hover{background:color-mix(in srgb,var(--sw-acc) 88%, #fff);box-shadow:0 12px 34px rgba(56,189,248,.5)}
  button.btn,button.login-link{font:inherit;cursor:pointer}
  button.login-link{background:none;border:0}   /* länk-look, ingen default-knappruta */
  .linklike{background:none;border:0;padding:0;color:var(--accent);font-weight:700;font-size:14.5px;cursor:pointer;font-family:inherit}
  /* TRYCKYTAN VÄXER, LAYOUTEN STÅR STILL. De tre länkliknande kontrollerna var 15–21 px höga;
     WCAG 2.5.8 vill ha minst 24. Lika stor negativ marginal som paddingen gör att elementets
     YTTRE mått är oförändrat – ingen rad flyttar sig, men fingret får 12 px mer att träffa på. */
  .linklike,.linkbtn:not(.chip):not(.btn),.mp-mer{display:inline-block;padding:6px 8px;margin:-6px -8px;min-height:24px}
  /* UNDANTAGET ÄR INTE KOSMETIK: knep med padding + negativ marginal flyttar inte layouten, men
     BAKGRUNDEN målas över paddingen. På en naken textlänk syns det inte alls; på ett chip eller en
     knapp som redan har en egen pill blir pillen 12 px högre än sina grannar. De är dessutom redan
     över 24 px och behöver ingenting. Mätt på landningen 2026-09-20: chipet gick 40 → 52 px. */
  /* Paddingen står kvar här (23/9): med padding:0 och den negativa marginalen ovan ritades knappen 8 px in över
     texten före – "batterivarning. Läs mer" blev "batterivarningLäs mer" på Tre lager-korten. */
  button.linkbtn:not(.btn):not(.chip){background:none;border:0;font:inherit;color:inherit;cursor:pointer;text-align:inherit}
  button.chip.linkbtn{cursor:pointer;font:inherit}
  .btn-ghost{background:rgba(148,163,184,.1);color:var(--txt);border-color:var(--line)}
  .btn-ghost:hover{background:rgba(148,163,184,.18)}
  /* Header */
  .brand img{height:44px;width:auto;display:block;margin-left:-4.1%}   /* -4.1% = SVG:ns egen luft (14.75/360) så märket linjerar med texten */
  .nav-cta{display:flex;gap:10px;align-items:center}
  #trelager,#funktioner,#skillnad,#barnlaget,#appen,#priser,#fragor,#forvem{scroll-margin-top:118px}
  .nav-cta .btn{padding:9px 16px;font-size:14px}
  .nav-cta > *{white-space:nowrap}
  @media(max-width:380px){ .nav-cta{gap:6px} .nav-cta .btn{padding:9px 12px;font-size:13.5px} }
  .login-link{color:var(--muted);font-weight:700;font-size:14px;padding:8px 6px}
  .login-link:hover{color:var(--txt)}
  /* Hero */
  .hero{position:relative;padding:44px 0 60px;text-align:center;overflow:hidden}
  /* HERON FORTSÄTTER UNDER SIDHUVUDET (ägarfynd 2026-09-23: "en blå rand vid/bakom headern"). Sidhuvudet är en svävande ö
     som tar plats i flödet, så heron – och dess färgljus, som klipps av overflow:hidden – började under ön och lämnade en
     mörk remsa med en hård kant ovanför. Heron dras upp under ön med samma höjd som ön tar (72 px dator, 130/128 px med
     menyn på egen rad) och får tillbaka luften som padding. Bara när inbjudningsbeskedet är dolt – det ligger annars där. */
  #invBanner[hidden] + .hero{margin-top:-72px;padding-top:calc(44px + 72px)}
  @media(max-width:1179px){ #invBanner[hidden] + .hero{margin-top:-130px;padding-top:calc(44px + 130px)} }
  @media(max-width:760px){ #invBanner[hidden] + .hero{margin-top:-128px;padding-top:calc(44px + 128px)} }
  .hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 460px at 50% -8%,rgba(56,189,248,.20),transparent 70%),radial-gradient(700px 400px at 85% 20%,rgba(34,211,238,.10),transparent 70%);pointer-events:none}
  .hero-bild{border-radius:20px;overflow:hidden;border:1px solid rgba(148,163,184,.16);
    box-shadow:0 30px 80px -20px rgba(2,6,23,.85),0 0 0 1px rgba(56,189,248,.06) inset;position:relative;z-index:1}
  .hero-bild img{display:block;width:100%;height:auto}
  :root[data-theme="light"] .hero-bild{border-color:rgba(30,58,95,.14);box-shadow:0 26px 64px -22px rgba(15,30,60,.35)}
  /* H1:ans gradient går accent → accent2, och accent2 var naken cyan (#22d3ee) som inte vänder
     med temat: halva rubriken mätte 1,27:1 mot den ljusa bakgrunden. Tokenet --sw-accink är
     husets blå TEXT-färg och är mörk i ljust läge. Mörkt tema rörs inte. */
  :root[data-theme="light"]{--accent2:var(--sw-accink)}
  /* Inget bakgrundsmönster i hero – .aurora (mjuka, långsamt drivande färgbubblor) är
     bakgrunden, och hero-bilden bär det visuella. Rutnät/radarringar togs bort 2026-08-24.
     En ensam } stod kvar här efter den borttagna regeln. En vilsen klammer på stilmallens
     toppnivå blir prelude till NÄSTA regel, så .hero .in kastades tyst av parsern – bevisat:
     regeln saknades helt i produktionens CSSOM (2026-09-04). */
  .hero .in{position:relative;z-index:1}
  .hero-logo{height:92px;width:auto;display:block;margin:0 auto 28px;filter:drop-shadow(0 8px 28px rgba(56,189,248,.5))}
  @media(max-width:560px){.hero-logo{height:68px;margin-bottom:22px}}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.4);color:var(--sw-accink, #bfe6ff);font-weight:800;font-size:13px;padding:6px 14px;border-radius:var(--sw-rpill);margin-bottom:22px}
  /* RUBRIKEN BRYTER ALDRIG MED ETT ENSAMT ORD (ägarbild 2026-09-12: "händer" ensamt på rad 2 – mätt på VARJE bredd 600–1440,
     och "världen." ensamt på 390). Meningen "Med Swintel vet du vad som händer" är 18,2 × teckenstorleken bred: med 6vw/60 px
     rymdes den aldrig i .wrap (1060 px) – den bröt alltid. 5.2vw/56 px ryms på en rad från ~900 px; smalare balanserar
     text-wrap raderna jämnt ("Med Swintel vet du / vad som händer"). Accentraden är ett eget block. */
  h1{font-size:clamp(34px,5.2vw,56px);line-height:1.08;font-weight:900;margin:0 0 18px;letter-spacing:-.02em;text-wrap:balance}
  h1 .h1a,h1 .grad{display:block}
  h1 .grad{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
  .lead{font-size:clamp(16px,2.3vw,20px);color:var(--muted);max-width:680px;margin:0 auto 24px;text-wrap:balance}   /* jämna rader – aldrig "i en app." ensamt sist */
  .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .trust{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:22px;color:var(--muted);font-size:14px;font-weight:600}
  .trust span{display:inline-flex;align-items:center;gap:7px}
  .trust b{color:var(--txt)}
  /* Inbjudningsbesked */
  #invBanner{background:var(--accent-soft,rgba(56,189,248,.14));border-bottom:1px solid var(--accent,#38bdf8)}
  #invBanner[hidden]{display:none}
  .inv-in{max-width:980px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .inv-ic{font-size:20px;line-height:1}
  .inv-tx{flex:1 1 240px;font-size:15px;line-height:1.45;color:var(--sw-ink,#d6e2f5)}
  .inv-cta{flex:0 0 auto}
  @media(max-width:520px){ .inv-in{padding:11px 13px;gap:9px} .inv-cta{width:100%} }
  /* Missing People – samarbetsband */
  .mp-band{border-top:1px solid var(--line);padding:36px 0}
  .mp-in{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;text-align:left}
  .mp-logo{flex:0 0 auto;display:block;background:#101a2e;border-radius:12px;padding:12px 16px;opacity:.95;transition:opacity .15s}
  .mp-logo:hover{opacity:1}
  .mp-logo img{display:block;width:110px;height:auto}
  .mp-tx{flex:1 1 380px;max-width:560px}
  .mp-tx h2{font-size:20px;margin:0 0 7px}
  .mp-tx p{font-size:15px;line-height:1.55;margin:0 0 9px;color:var(--sw-soft,#d3deea)}
  .mp-mer{font-size:14px;font-weight:700;color:var(--accent);text-decoration:none}
  .mp-mer:hover{text-decoration:underline}
  @media(max-width:620px){ .mp-in{flex-direction:column;gap:16px;text-align:center} .mp-tx{flex:1 1 auto} }
  /* Källchips */
  .sources{margin-top:46px}
  .sources .lbl{text-align:center;color:var(--sw-accink, #7d93b3);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
  .chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:820px;margin:0 auto}
  .chip{background:var(--card);border:1px solid var(--line);border-radius:var(--sw-rpill);padding:8px 15px;font-size:14px;font-weight:600;color:var(--sw-ink, #d6e2f5)}
.chip-more{background:var(--accent-soft, rgba(56,189,248,.14));border-color:var(--accent);color:var(--accent);text-decoration:none;cursor:pointer;transition:filter .15s}
.chip-more:hover{filter:brightness(1.12)}
/* I LJUST LÄGE är accentfärgen en LJUS blå – som text på sin egen tonade bakgrund gav den 3,96:1
   (kravet är 4,5). Husets ljusa accenttext är --sw-accink, samma grepp som redan används på
   .vrange.active, .frbtn.act och attribueringsrutan. Mörkt läge rörs inte. */
:root[data-theme="light"] .chip-more{color:var(--sw-accink,#0a5280)}
  /* Sektioner */
  section{padding:64px 0}
  /* ═══ INGA ENSAMMA ORD PÅ SISTA RADEN (ägardirektiv 2026-09-14: "tänk på detta överallt") ═══
     Ägaren fann två med bild: kortrubriken "Samverkanscentralen – ert lag" bröt av med **lag**
     ensamt på rad två, och sektionsingressen slutade med ordet **den.** på egen rad. h1 och .lead
     bar redan text-wrap:balance sedan tidigare – resten av sidan gjorde det inte.
       · balance = webbläsaren jämnar ut radlängderna i KORTA block: rubriker, ingresser,
         kortrubriker, prisetiketter. Den flyttar brytpunkten så ingen rad blir nästan tom.
       · pretty  = samma mål för längre brödtext, men billigare: den rör bara de sista raderna
         så att den sista aldrig blir ett ensamt ord.
     Firefox saknar ännu pretty och faller tillbaka på normal – ofarligt, ingen layout ändras.
     DET HÄR ÄR DEN CENTRALA LÖSNINGEN. Lägg aldrig in   för hand i en enskild rubrik igen;
     det håller bara tills någon skriver om texten, och det gäller bara den rubriken. */
  h2,h3,h4,.sec-h p,.who-card h3,.feat h3,.tier .tt,.faq summary,.lo-txt b,.rb-b h3{text-wrap:balance}
  p,li,.whofot,.price-note,.foot-tag{text-wrap:pretty}
  .sec-h{text-align:center;max-width:640px;margin:0 auto 40px}
  .sec-h h2{font-size:clamp(26px,4vw,38px);font-weight:900;margin:0 0 12px;letter-spacing:-.01em}
  .sec-h p{color:var(--muted);font-size:17px;margin:0}
  /* Vanliga frågor (texterna speglas i FAQPage-JSON-LD i <head> – håll dem identiska) */
  .faqwrap{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
  .faq{background:var(--card);border:1px solid var(--line);border-radius:14px}
  .faq summary{list-style:none;cursor:pointer;padding:15px 18px;font-weight:800;font-size:16px;display:flex;align-items:center;gap:12px;min-height:40px;border-radius:14px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::before{content:"+";font-weight:900;color:var(--accent);width:24px;height:24px;border-radius:8px;background:rgba(56,189,248,.12);display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:16px;line-height:1}
  .faq[open] summary::before{content:"\2013"}
  .faq summary:hover{background:rgba(56,189,248,.06)}
  /* FAQ-SVAREN VAR TEXTVAGGAR (agarfynd 2026-09-16: "det blir bara en vagg med text utan
     radbrytning, stycken osv"). Svaren ar nu flera <p> - inte ett enda ord andrat, bara
     delat vid meningsgranser - och texten har radavstand och en radlangd som gar att lasa. */
  .faq p{margin:0;padding:0 18px 11px 54px;color:var(--muted);font-size:15px;line-height:1.62;max-width:74ch}
  .faq p:first-of-type{padding-top:2px}
  .faq p:last-of-type{padding-bottom:16px}
  /* Feature-grid */
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .feat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;transition:transform .15s ease,border-color .2s}
  /* KORTEN ÖPPNAS (2026-09-20, ägarens förslag): korta och lika långa på ytan, hela beskrivningen bakom ett klick. */
  .feat.klick{cursor:pointer}
  .feat.klick:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
  .feat .mer{display:block;margin-top:10px;color:var(--accent);font-weight:700;font-size:13.5px}
  .feat.klick:hover .mer{text-decoration:underline}
  .kortdjup{margin-top:10px}
  .feat .kortdjup h3{display:none}   /* kortet har redan sin rubrik – djupets rubrik behövs först i modalen */
  .kortdjup h3{font-size:21px;margin:0 0 4px}
  .feat:hover{transform:translateY(-3px);border-color:rgba(56,189,248,.45)}
  /* IKONEN LIGGER PA SAMMA RAD SOM RUBRIKEN (agarbegaran 2026-09-16: "gor dessa kort mer
     kompakta ... tank smart"). Ren CSS, ingen markup andrad - och eftersom BADA rutnaten
     anvander .feat racker en andring for alla korten. Sparar ~48 px per kort. */
  .feat{display:grid;grid-template-columns:auto 1fr;gap:0 13px;align-content:start}
  .feat .ic{font-size:21px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(56,189,248,.1);border-radius:11px;grid-row:1;grid-column:1}
  .feat h3{font-size:17px;font-weight:800;margin:0;grid-row:1;grid-column:2;align-self:center}
  .feat p{color:var(--muted);font-size:14.5px;margin:13px 0 0;grid-row:2;grid-column:1 / -1}
  /* För vem */
  .who{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:1040px){.who{grid-template-columns:1fr 1fr}}
  .who-card{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:18px;padding:28px}
  .who-card .ic{font-size:30px;margin-bottom:10px}
  .who-card h3{font-size:21px;font-weight:850;margin:0 0 10px}
  .who-card ul{margin:0;padding:0;list-style:none}
  .who-card{display:flex;flex-direction:column}
  .who-card ul{flex:1}
  .whofot{margin:14px 0 10px;font-size:13.5px;color:var(--txt);opacity:.9;display:flex;align-items:center;gap:8px}
  .whobtn{width:100%;justify-content:center;min-height:48px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .who-card li{padding:6px 0 6px 28px;position:relative;color:var(--sw-ink, #d3deef);font-size:15px}
  .who-card li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:900}
  /* Säkerhet & integritet */
  .secgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  .seccard{background:linear-gradient(180deg,rgba(56,189,248,.07),var(--card));border:1px solid rgba(56,189,248,.22);border-radius:16px;padding:22px;text-align:center}
  .seccard .ic{font-size:30px;margin-bottom:12px}
  .seccard h3{font-size:16px;font-weight:800;margin:0 0 6px}
  .seccard p{color:var(--muted);font-size:14px;margin:0;line-height:1.5}
  /* Korten bär EN mening var – hela sanningen om kryptering och lagringstider bor i policyn. */
  .secmer{text-align:center;margin:20px 0 0;font-size:14.5px}
  .secmer a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px}
  .secmer a:hover{border-bottom-color:currentColor}
  @media(max-width:820px){.secgrid{grid-template-columns:1fr 1fr}}
  @media(max-width:480px){.secgrid{grid-template-columns:1fr}}
  /* Gratis-VMA banner */
  .vma{background:linear-gradient(120deg,rgba(52,211,153,.14),rgba(56,189,248,.10));border:1px solid rgba(52,211,153,.35);border-radius:18px;padding:26px 28px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center;text-align:center}
  .vma .ic{font-size:34px}
  .vma h3{margin:0 0 4px;font-size:20px;font-weight:850}
  .vma p{margin:0;color:var(--muted);font-size:15px}
  /* Trygghetsradar-bandet – den unika funktionen (varm ton; severity-rött är reserverat för akut fara) */
  .radarband{margin-top:16px;background:linear-gradient(120deg,rgba(245,158,11,.13),rgba(56,189,248,.07));border:1px solid rgba(245,158,11,.38);border-radius:18px;padding:22px 26px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
  .radarband .ic{font-size:32px;flex:0 0 auto}
  .radarband .rb-b{flex:1;min-width:260px}
  .radarband h3{margin:0 0 5px;font-size:19px;font-weight:850}
  .radarband p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
  /* Pris */
  .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
  .tier{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 20px;display:flex;flex-direction:column}
  .tier.pop{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 14px 40px rgba(56,189,248,.18);position:relative}
  .tier .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--on-accent);font-weight:800;font-size:12px;padding:4px 12px;border-radius:var(--sw-rpill)}
  .tier .tn{font-size:15px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
  .tier .tp{font-size:31px;font-weight:900;margin:5px 0 2px;line-height:1.1}
  .tier .tp small{font-size:14px;font-weight:700;color:var(--muted)}
  .tier ul{margin:13px 0 16px;padding:0;list-style:none;flex:1;display:flex;flex-direction:column;gap:2px}
  .tt{font-size:12.5px;color:var(--sw-accink, #9fb3cc);margin:5px 0 9px;line-height:1.4;min-height:32px}
  .tn-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
  .tn-sub{font-size:12.5px;color:var(--sw-soft,#c7d4e6);margin-top:3px;line-height:1.4}
  .tn-row .tn{margin:0}
  .orgband{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px;align-items:stretch;max-width:560px;margin-left:auto;margin-right:auto}
  .orgband .tier{background:linear-gradient(135deg,rgba(56,189,248,.07),rgba(129,140,248,.06));border-color:rgba(56,189,248,.30)}
  .price-note{color:var(--sw-accink, #9fb3cc);font-size:12.5px;text-align:center;margin-top:16px}
  /* Lanseringserbjudande – g åller-banner + tier-tagg (guld; fungerar i mörkt & ljust) */
  .launch-offer{display:flex;align-items:center;gap:16px;max-width:740px;margin:0 auto 28px;padding:15px 22px;border-radius:16px;background:linear-gradient(135deg,rgba(251,191,36,.18),rgba(56,189,248,.12));border:1px solid rgba(251,191,36,.5);box-shadow:0 8px 30px rgba(251,191,36,.14)}
  .launch-offer .lo-ic{font-size:32px;flex:0 0 auto;line-height:1}
  .launch-offer .lo-txt{display:flex;flex-direction:column;gap:3px}
  .launch-offer .lo-txt b{font-size:16.5px;color:var(--sw-ink, #fff)}
  .launch-offer .lo-txt span{font-size:13.5px;color:var(--sw-soft, #cbd5e1);line-height:1.5}
  .lo-tag{display:inline-block;margin:0;padding:3px 10px;border-radius:var(--sw-rpill);font-size:11px;font-weight:800;letter-spacing:.01em;text-transform:none;white-space:nowrap;background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#3a2606}
  @media(max-width:600px){ .launch-offer{padding:13px 16px;gap:12px} .launch-offer .lo-ic{font-size:26px} .launch-offer .lo-txt b{font-size:15px} }
  .vat-toggle{display:flex;justify-content:center;gap:4px;margin:0 auto 20px;width:max-content;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--sw-rpill);padding:4px}
  .vat-toggle button{background:transparent;border:0;color:var(--sw-accink, #9fb3cc);font:inherit;font-size:13px;font-weight:700;padding:7px 17px;border-radius:var(--sw-rpill);cursor:pointer;transition:background .15s,color .15s}
  .vat-toggle button.on{background:var(--accent);color:var(--on-accent)}
  .tier li{padding:6px 0 6px 24px;position:relative;color:var(--sw-ink, #d3deef);font-size:14.5px}
  .tier li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}
  .tier .btn{width:100%;justify-content:center}
  /* LADDA NER APPEN (2026-09-23) – två kort sida vid sida, samma kortform som nivåerna; ett kort (smalare) så länge
     appen inte finns på Google Play. */
  .barnsteg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1100px;margin:0 auto}
  .bsteg{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px 20px;position:relative}
  .bsteg-nr{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:900;font-size:17px;margin-bottom:10px}
  .bsteg h3{margin:0 0 6px;font-size:19px} .bsteg p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5}
  .barnlistor{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:1100px;margin:16px auto 0}
  .blista{background:var(--card2);border:1px solid var(--line);border-radius:18px;padding:20px}
  .blista h3{margin:0 0 8px;font-size:17px} .blista ul{margin:0;padding:0;list-style:none}
  .blista li{padding:6px 0 6px 22px;position:relative;font-size:14.5px;color:var(--sw-ink,#d3deef)}
  .blista li::before{content:"•";position:absolute;left:6px;color:var(--accent);font-weight:900}
  @media(max-width:760px){.barnsteg,.barnlistor{grid-template-columns:minmax(0,1fr)}}
  .gps-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:22px}
  .appval3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch;max-width:1100px;margin:0 auto}
  @media(max-width:760px){.appval3{grid-template-columns:minmax(0,1fr);gap:22px}}
  .ak-plattform{display:inline-flex;align-items:center;gap:4px;margin-top:5px;padding:3px 10px;border-radius:var(--sw-rpill);font-size:12.5px;font-weight:800;border:1px solid var(--line)}
  .ak-plattform.android{background:rgba(61,220,132,.14);color:var(--green)} .ak-plattform.ios{background:rgba(148,163,184,.16);color:var(--txt)}
  .ak-snart{width:100%;justify-content:center;opacity:.55;cursor:not-allowed;pointer-events:none;box-shadow:none}
  .ak-lansering{text-align:center;color:var(--muted);font-size:14px;margin:18px auto 0;max-width:640px}
  .appval{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch;max-width:880px;margin:0 auto}
  .appval.en{grid-template-columns:minmax(0,1fr);max-width:470px}
  .appkort{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px 20px 20px;display:flex;flex-direction:column;position:relative}
  /* DOLD FÖR DEN SOM INTE ÄR INLOGGAD (ägarbeslut 2026-09-23: "vi låter nedladdning av appen vara dold för icke inloggade på
     landing page just nu") – visas av skriptet när wi_li-kakan finns. */
  .appkort[hidden]{display:none}   /* klassens egen display slår annars ut hidden (kanon 2026-09-20) */
  .appkort.rek{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 14px 40px rgba(56,189,248,.18)}
  .appkort .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--on-accent);font-weight:800;font-size:12px;padding:4px 12px;border-radius:var(--sw-rpill);white-space:nowrap}
  .appkort .badge.mjuk{background:var(--card2);color:var(--txt);border:1px solid var(--line)}
  .ak-h{display:flex;align-items:center;gap:12px}
  .ak-ic{font-size:30px;line-height:1}
  .ak-h h3{margin:0;font-size:19px}
  .ak-h small{display:block;color:var(--muted);font-size:13px;font-weight:600;margin-top:2px}
  .appkort ul{margin:14px 0 18px;padding:0;list-style:none;flex:1;display:flex;flex-direction:column;gap:2px}
  .appkort li{padding:6px 0 6px 24px;position:relative;color:var(--sw-ink, #d3deef);font-size:14.5px}
  .appkort li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}
  .appkort .btn{width:100%;justify-content:center}
  .ak-not{margin:10px 0 0;color:var(--muted);font-size:13px;text-align:center;line-height:1.45}
  .app-ios{text-align:center;color:var(--muted);font-size:14px;margin:20px 0 0}
  .hero-app{display:inline-block;margin-top:16px;color:var(--accent);font-weight:700;font-size:14.5px;text-decoration:none}
  .hero-app:hover,.hero-app:focus-visible{text-decoration:underline}
  @media(max-width:760px){.appval{grid-template-columns:minmax(0,1fr)}}
  /* Slut-CTA */
  .cta-band{background:linear-gradient(120deg,rgba(56,189,248,.16),rgba(34,211,238,.08));border:1px solid rgba(56,189,248,.3);border-radius:22px;padding:48px 28px;text-align:center}
  .cta-band h2{font-size:clamp(24px,4vw,34px);font-weight:900;margin:0 0 12px}
  .cta-band p{color:var(--muted);font-size:17px;margin:0 0 24px}
  /* Footer */
  footer{border-top:1px solid var(--line);padding:36px 0;margin-top:30px}
  .foot-in{display:flex;justify-content:space-between;align-items:center;gap:18px 28px;flex-wrap:wrap;color:var(--muted);font-size:14px}
  /* TRYCKYTAN VAR 22 px (matt pa 390, agarfynd om att lankarna inte fungerar korrekt).
     Husets kanon ar >= 40 px tryckyta men VISUELLT kompakt - darfor inline-flex med
     min-height i stallet for padding: texten ser exakt likadan ut, ytan blir traffbar. */
  .foot-links{display:flex;gap:2px 18px;flex-wrap:wrap;align-items:center}
  .foot-links > a,.foot-links > button{display:inline-flex;align-items:center;min-height:40px}
  .foot-links > .linkbtn:not(.chip):not(.btn){padding:0;margin:0;min-height:40px}   /* foten har redan sin 40 px-yta; .linkbtn-knepet gav raderna olika höjd (23/9) */
  .foot-links a:hover{color:var(--txt)}
  .foot-bot{display:flex;justify-content:space-between;align-items:flex-end;gap:14px 28px;flex-wrap:wrap;
    margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
  .foot-tag{max-width:660px;margin:0;color:var(--muted);font-size:13px;line-height:1.6;text-wrap:balance}
  .foot-cop{color:var(--muted);font-size:13px;white-space:nowrap}
  @media(max-width:640px){ .foot-in{justify-content:flex-start} .foot-in .brand{margin:0} .foot-bot{align-items:flex-start} }
  /* Auth-modal */
  .ovl{position:fixed;inset:0;background:rgba(4,8,18,.86);z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
  .ovl.open{display:flex}
  .auth{background:var(--card2);border:1px solid var(--line);border-radius:18px;padding:26px;width:min(400px,100%);box-shadow:0 24px 70px rgba(0,0,0,.6)}
  .kop-card{background:var(--card2);border:1px solid var(--line);border-radius:18px;width:min(720px,100%);max-height:88vh;display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(0,0,0,.6);position:relative}
  .kop-card>h3{margin:0;padding:22px 24px 14px;font-size:20px;font-weight:850;border-bottom:1px solid var(--line)}
  .kop-body{padding:6px 24px 22px;overflow-y:auto}
  .kop-body::-webkit-scrollbar-track{margin:12px 0}
  .kop-body .vers{margin:0 0 14px;font-size:12.5px;color:var(--sw-mut);letter-spacing:.02em}   /* versionsraden följer med från sidan */
  .kop-body h4{margin:18px 0 4px;font-size:14.5px;font-weight:800;color:var(--sw-ink, #e2e8f0)}
  .kop-body p,.kop-body li{font-size:14px;line-height:1.6;color:var(--sw-ink, #c4d2e3)}
  .kop-body ul{margin:4px 0 0;padding-left:20px}
  .kop-body b{color:var(--sw-ink, #fff)}   /* naken vit hex gav 1,20:1 i ljust lage (matt 2026-08-30) */
  /* Kontaktformulär (footer Kontakt + Begär offert) */
  .cform label{display:block;font-size:13px;font-weight:700;color:var(--sw-soft, #cbd5e1);margin:12px 0 5px}
  .cform label .opt{color:var(--muted);font-weight:600}
  .cform input,.cform textarea{width:100%;background:var(--sw-deep, #0a1426);border:1px solid var(--line);border-radius:10px;padding:11px 12px;color:var(--sw-ink, #eaf2ff);font-size:14.5px;font-family:inherit}
  .cform input:focus,.cform textarea:focus{outline:none;border-color:var(--sw-accink, #38bdf8)}
  .cform textarea{resize:vertical;min-height:96px}
  .cform .cf-msg{margin-top:12px;font-size:14px;display:none;border-radius:10px;padding:10px 12px}
  .cform .cf-msg.err{display:block;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.4);color:var(--sw-badink, #fca5a5)}
  .cform .cf-msg.ok{display:block;background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.4);color:var(--sw-okink, #86efac)}
  .cform .btn-primary{margin-top:14px}
  .auth h3{margin:0 0 4px;font-size:20px;font-weight:850}
  .auth .sub{color:var(--muted);font-size:14px;margin:0 0 18px}
  .auth label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin:12px 0 5px}
  .auth input{width:100%;background:var(--sw-deep, #0b1424);border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--txt);font-size:15px;outline:none}
  .auth input:focus{border-color:var(--accent)}
  .auth .btn{width:100%;justify-content:center;margin-top:18px}
  .auth .switch{text-align:center;margin-top:14px;font-size:14px;color:var(--muted)}
  .auth .switch a{color:var(--accent);font-weight:700;cursor:pointer}
  /* ÖGAT SITTER I FÄLTET (ägarval 2026-08-26). Fältet får extra högerplats så texten aldrig hamnar
     under ikonen, och Edges egen inbyggda avslöja-knapp döljs så den inte dubbleras. Krockar en
     lösenordshanterares ikon ändå lägger den sig UTANFÖR vår – texten är skyddad oavsett. */
  .auth .pwwrap{position:relative}
  .auth .pwwrap input{padding-right:46px}
  .auth input[type="password"]::-ms-reveal,.auth input[type="password"]::-ms-clear{display:none}
  .auth .oga{position:absolute;top:50%;transform:translateY(-50%);right:7px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
    background:none;border:0;border-radius:9px;padding:0;cursor:pointer;color:var(--muted);transition:color .12s,background .12s}
  .auth .oga svg{width:19px;height:19px;display:block;pointer-events:none}
  .auth .oga::before{content:"";position:absolute;top:-6px;right:-5px;bottom:-6px;left:-6px}   /* träffyta 44px – visuellt kompakt (kanon) */
  @media (hover:hover){ .auth .oga:hover{color:var(--sw-accink,#7dd3fc);background:rgba(56,189,248,.12)} }
  .auth .oga:active{background:rgba(56,189,248,.18)}
  .auth .oga[aria-pressed="true"]{color:var(--sw-accink,#7dd3fc)}
  .auth .oga:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  .auth input.fel{border-color:var(--sw-badink,#fca5a5)}
  .auth .pwkrav{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);margin-top:7px}
  .auth .pwkrav[hidden],.auth .villkor[hidden]{display:none!important}
  .auth .pwkrav.ok{color:var(--sw-okink,#86efac)}
  .auth .villkor{font-size:12.5px;line-height:1.5;color:var(--muted);margin:14px 0 0;text-align:center}
  .auth .villkor a{color:var(--sw-accink,#7dd3fc);text-decoration:underline;cursor:pointer}
  .auth .msg{min-height:18px;color:var(--sw-badink, #fca5a5);font-size:13.5px;margin-top:8px;text-align:center}
  .auth .msg.ok{color:var(--sw-okink, #86efac)}   /* lyckad signup = GRÖN (annars ärvs .msg:s röda --sw-badink). 2026-06-14 */
  .auth .x{position:absolute;top:14px;right:16px;font-size:20px;color:var(--muted);cursor:pointer;background:0;border:0}
  /* Funktions-modal (allt som ingår) */
  /* ═══ HELA KORTET SCROLLAR – INGEN FAST RUBRIK, INGEN FAST FOT (ägarfynd 2026-09-16, två bilder) ═══
     Kortet var en flex-kolumn där BARA mittdelen (.djup / .featscroll) hade overflow: rubriken,
     ingressen med priset, prisraden och knappen var flexbarn som aldrig rörde sig. På en stor skärm
     märks det knappt; på en telefon åt de upp halva rutan.
     MÄTT före, 390 px: GPS-modalen 760 px hög varav 402 px FAST – 47 % scrollade, och texten är
     6 114 px lång, så man läste 6 % av den åt gången. Samverkan: 456 px fast, 40 %, 5 % synligt.
     Nu scrollar kortet som ett dokument. Det enda som stannar är ✕:et – det är en stängknapp, inte
     en rubrik, och husets kanon kräver att den alltid går att nå. */
  .featm{position:relative;background:var(--card2);border:1px solid var(--line);border-radius:18px;padding:26px 26px 22px;width:min(900px,100%);max-height:90vh;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;box-shadow:0 24px 70px rgba(0,0,0,.6)}
  .featm::-webkit-scrollbar-track{margin:14px 0}   /* = kortets radie: scrollbaren pokar aldrig de rundade hörnen (husets kanon) */
  /* STICKY, INTE ABSOLUTE: i en scrollande behallare akare ett absolut kryss bort med innehallet.
     `align-self` + negativ botten-marginal gor att det inte tar nagon hojd – rubriken star kvar
     exakt dar den stod.
     INGET `right:0` (mätt 2026-09-16, tyst fälla): på ett sticky-element är `right` en KLÄMNING mot
     scrollytans högerkant, inte en placering – och den klämningen åt upp `margin-right:-10px` helt
     tyst. Knappen låg då kant i kant med texten (uppmätt lucka 1 px i stället för 10). Ett flexbarn
     med `align-self:flex-end` placeras redan av flexboxen; sticky behöver bara `top`. */
  .featm .x{position:sticky;align-self:flex-end;margin-bottom:-36px;margin-right:-10px;top:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1;color:var(--sw-soft, #cbd5e1);cursor:pointer;background:var(--card2);border:1px solid var(--line);border-radius:10px;z-index:3;box-shadow:0 0 0 6px var(--card2);transition:background .15s,color .15s,border-color .15s}
  /* TEXTEN FÅR INTE LÖPA IGENOM KRYSSET (eget fynd i bilden 2026-09-16, i TVÅ steg).
     Steg 1 var att göra knappen solid: den bar en halvgenomskinlig ton, vilket var ofarligt när
     den satt över kortets fasta topp – men nu scrollar texten under den, och då lyste den igenom.
     Steg 2, efter att jag läst bilden igen: solid räcker inte. Knappen DÖLJDE i stället orden
     ("…att besl" och sedan ny rad), och en text som kapas mitt i ett ord läses som ett renderingsfel.
     Modalens hela poäng är att man ska kunna LÄSA den – att gömma ord bakom en knapp är fel sorts
     lösning på fel problem.
     Därför får krysset en EGEN SPALT: 36 px som ingen text går in i. Knappen är 36 px bred och dras
     10 px in i kortets egen padding (`margin-right:-10px`), så dess vänsterkant hamnar 26 px in och
     spalten ger 10 px luft – utan indraget hade den behövt 46. Knappen hamnar dessutom närmare
     hörnet, som husets övriga kryss. TALET ÄR INTE VALT FRITT: 36 px finns redan i filen, och
     `scripts/test-ui.js` kontroll G fäller ett nytt distinkt padding-tal (den tog 34 px direkt).
     Spalten läggs på de FYRA textbärarna, inte på `.featm` självt: kortets padding och scrollbar
     ska stå kvar där de står, och hårlinjerna i listorna ska sluta på samma x-läge allihop
     (`.featfoot` är med just därför – den ligger aldrig under krysset, men dess överlinje måste
     följa samma kant som listornas underlinjer).
     Ringen (`box-shadow`) står kvar som skyddsnät: ett framtida element som ignorerar spalten
     ska glida in under knappen, inte krypa fram i springan runt den. */
  .featm h3,.featm .sub,.featm .featscroll,.featm .djup,.featm .featfoot{padding-right:36px}
  .featm .x:hover{background:rgba(239,68,68,.16);color:var(--sw-badink, #fca5a5);border-color:rgba(239,68,68,.42)}
  .featm h3{margin:0 2px 4px;font-size:23px;font-weight:850}   /* höger-spalten sätts i regeln ovan – ett mått för hela kortet */
  .featscroll{contain:content;-webkit-overflow-scrolling:touch}
  .featm .sub{color:var(--txt);opacity:.85;font-size:14.5px;margin:0 2px 18px;line-height:1.5}
  /* Scrollbaren ska ligga LÄNGST TILL HÖGER i modalen med luft mot texten – aldrig klistrad mot
     innehållet, aldrig utanför de rundade hörnen (ägarregel 2026-08-08, gäller ALLA modaler):
     negativ höger-margin skjuter ut scrollern mot kortkanten, padding ger texten samma avstånd som förr. */
  /* INGEN INRE SCROLLYTA LANGRE – kortet ar scrollytan (se .featm). Dubbel scroll ar dessutom
     nagot husets modalkanon uttryckligen forbjuder. */
  .featscroll{overflow:visible;padding:0;margin-right:0}
  .featcols{columns:2;column-gap:30px}
  .featcat{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;margin:0 0 20px}
  .featcat h4{margin:0 0 8px;font-size:15px;font-weight:850;color:var(--accent);letter-spacing:.01em}
  .featcat ul{list-style:none;margin:0;padding:0}
  .featcat li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:14px;color:var(--txt)}
  .featcat li:last-child{border-bottom:0}
  .tag{font-size:11px;font-weight:800;padding:2px 8px;border-radius:var(--sw-rpill);white-space:nowrap;flex:none}
  .tag.free{background:rgba(52,211,153,.16);color:var(--sw-okink, #6ee7b7);border:1px solid rgba(52,211,153,.42)}
  .tag.plus{background:rgba(56,189,248,.16);color:var(--sw-accink, #7dd3fc);border:1px solid rgba(56,189,248,.42)}
  .tag.pro{background:rgba(250,204,21,.13);color:var(--sw-warnink, #fde047);border:1px solid rgba(250,204,21,.42)}
  .featfoot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .featfoot .note{color:var(--txt);opacity:.8;font-size:13.5px}
  /* Djupdykning: Swintel GPS & Samverkanscentralen – berättar hur det faktiskt fungerar. */
  .djup{padding:0;margin-right:0;overflow:visible}   /* kortet scrollar, inte den har (se .featm) */
  .djup::-webkit-scrollbar-track{margin:10px 0}
  .djup h4{margin:22px 0 6px;font-size:16px;font-weight:850;color:var(--accent)}
  .djup h4:first-child{margin-top:4px}
  .djup p{margin:0 0 10px;font-size:14.5px;line-height:1.62;color:var(--txt)}
  .djup .lead{font-size:16px;line-height:1.6;color:#fff}
  .djup ul{list-style:none;margin:0 0 12px;padding:0}
  .djup li{position:relative;padding:6px 0 6px 26px;font-size:14.5px;line-height:1.55;color:var(--txt);border-bottom:1px solid rgba(255,255,255,.055)}
  .djup li:last-child{border-bottom:0}
  .djup li::before{content:"›";position:absolute;left:8px;top:6px;color:var(--accent);font-weight:900}
  .djup li b{color:#fff}
  .steg{counter-reset:s;margin:0 0 14px;padding:0;list-style:none}
  .steg li{counter-increment:s;position:relative;padding:9px 0 9px 42px;border-bottom:1px solid rgba(255,255,255,.055);font-size:14.5px;line-height:1.55;color:var(--txt)}
  .steg li::before{content:counter(s);position:absolute;left:0;top:8px;width:26px;height:26px;border-radius:50%;background:rgba(56,189,248,.16);border:1px solid rgba(56,189,248,.45);color:var(--sw-accink,#7dd3fc);font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center}
  .djupbox{background:rgba(56,189,248,.07);border:1px solid rgba(56,189,248,.28);border-radius:14px;padding:14px 16px;margin:6px 0 16px}
  .djupbox b{color:#fff}
  .djupbox.varm{background:rgba(250,204,21,.07);border-color:rgba(250,204,21,.3)}
  .mg{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:4px 0 16px}
  .mg div{background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13.8px;line-height:1.5;color:var(--txt)}
  .mg div b{display:block;color:#fff;font-size:14.5px;margin-bottom:3px}
  /* Ljust tema: modalernas texter var skrivna för mörk botten (vit text, ljusblå rubriker)
     och blev nästan oläsbara när sidan är ljus. Här får de mörk text och tydligare avgränsare. */
  :root[data-theme="light"] .djup .lead,
  :root[data-theme="light"] .djup li b,
  :root[data-theme="light"] .djupbox b,
  :root[data-theme="light"] .mg div b,
  :root[data-theme="light"] .steg li b{color:var(--sw-ink,#111d31)}
  :root[data-theme="light"] .djup h4{color:#0e6ea8}
  :root[data-theme="light"] .djup li,
  :root[data-theme="light"] .steg li{border-bottom-color:rgba(15,30,55,.09)}
  :root[data-theme="light"] .mg div{background:rgba(15,30,55,.035)}
  :root[data-theme="light"] .featm .sub,
  :root[data-theme="light"] .featfoot .note{color:var(--sw-mut,#3e5374);opacity:1}
  #forvem .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .forvem-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
  .forvem-cta .btn{width:auto;max-width:100%}
  @media(max-width:520px){ .forvem-cta{flex-direction:column} .forvem-cta .btn{width:100%;font-size:14px} }
  @media(max-width:760px){ #forvem .grid2{grid-template-columns:1fr} }
  @media(max-width:680px){ .djup h4{font-size:15px} .djup p,.djup li,.steg li{font-size:14px} }
  @media(max-width:720px){ .featcols{columns:1} .featcat{margin-bottom:16px} .featm{padding:22px 18px 18px} .featm h3{font-size:20px} }
/* SURFPLATTAN ÄR INTE EN STOR TELEFON. Vid 820 px föll priskorten och "Tre sätt" ihop till EN
     kolumn – en 776 px bred yta som ritade mobilvyn. Nu förtätas korten i det trånga bandet och
     faller ihop först vid husets mobilgräns (761). Allt under 761 px är oförändrat. */
  @media(max-width:900px) and (min-width:761px){
    .tier{padding:18px 14px} .tier .tp{font-size:26px}
    .grid{grid-template-columns:1fr 1fr}
  }
  @media(max-width:760px){.grid{grid-template-columns:1fr 1fr}.tiers{grid-template-columns:1fr}.who{grid-template-columns:1fr}}
  @media(max-width:560px){.grid{grid-template-columns:1fr}.nav-cta .login-link{padding:10px 4px;font-size:14px;min-height:40px}}   /* 23/9: dold på telefon sedan starten – den som redan har konto fick leta i foten */
  /* ============ LEVANDE LANDING (2026-07-26): animerad logga + radar-bakgrund + reveals ============ */
  /* Animerad Swintel-logga (inline-SVG i hero): radarsvepet roterar, blippen pingar när svepet passerar */
  .hero-logo-svg{height:82px;width:auto;display:block;margin:0 auto 20px;filter:drop-shadow(0 8px 28px rgba(56,189,248,.5));overflow:visible;color:#fff}
  :root[data-theme="light"] .hero-logo-svg{color:#12233c;filter:drop-shadow(0 8px 22px rgba(56,189,248,.35))}
  @media(max-width:560px){.hero-logo-svg{height:60px;margin-bottom:14px}}
  .lg-rot{transform-box:view-box;transform-origin:60px 60px;animation:lgRot 4.5s linear infinite}
  @keyframes lgRot{to{transform:rotate(360deg)}}
  .lg-blip{animation:lgBlip 4.5s linear infinite}
  @keyframes lgBlip{0%,6%{opacity:1}45%{opacity:.28}88%{opacity:.22}100%{opacity:.95}}
  .lg-ping{transform-box:view-box;transform-origin:74.5px 34.9px;fill:none;stroke:#36C5E0;stroke-width:2;animation:lgPing 4.5s ease-out infinite}
  @keyframes lgPing{0%{transform:scale(.35);opacity:.95}30%{transform:scale(3.1);opacity:0}100%{transform:scale(3.1);opacity:0}}
  /* Aurora-drift i hero (2026-07-26, ersatte radar-svepet – ägaren ville ha lugnare bakgrund):
     tre stora mjuka ljusfält i Swintels färger som driver mycket långsamt. Bara transform = helt jämnt. */
  .aurora{position:absolute;inset:-20% -10%;pointer-events:none;overflow:hidden}
  .ab{position:absolute;width:60vw;height:60vw;max-width:980px;max-height:980px;border-radius:50%;will-change:transform}
  .ab1{left:-8%;top:-14%;background:radial-gradient(circle, rgba(56,189,248,.16), transparent 62%);animation:abD1 46s ease-in-out infinite alternate}
  .ab2{right:-12%;top:4%;background:radial-gradient(circle, rgba(34,211,238,.12), transparent 60%);animation:abD2 58s ease-in-out infinite alternate;animation-delay:-19s}
  .ab3{left:26%;top:26%;background:radial-gradient(circle, rgba(99,102,241,.10), transparent 60%);animation:abD3 70s ease-in-out infinite alternate;animation-delay:-33s}
  @keyframes abD1{from{transform:translate(0,0) scale(1)}to{transform:translate(9%,6%) scale(1.14)}}
  @keyframes abD2{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-8%,9%) scale(.96)}}
  @keyframes abD3{from{transform:translate(0,0) scale(.94)}to{transform:translate(6%,-8%) scale(1.12)}}
  :root[data-theme="light"] .ab1{background:radial-gradient(circle, rgba(56,189,248,.14), transparent 62%)}
  :root[data-theme="light"] .ab3{background:radial-gradient(circle, rgba(99,102,241,.08), transparent 60%)}
  @keyframes rblipPing{0%{transform:scale(.4);opacity:.9}55%{transform:scale(4);opacity:0}100%{transform:scale(4);opacity:0}}
  /* Scroll-reveal (klassen sätts av JS → utan JS är allt synligt) */
  .rv{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s cubic-bezier(.16,1,.3,1);transition-delay:var(--rvd,0ms)}
  .rv.on{opacity:1;transform:none}
  /* Avslutande affisch: ramar in sidan med samma löfte som hero – och är sidans
     bildkandidat för Google (en bild måste VISAS för att kunna hamna i bildsöket;
     samma URL som i den strukturerade datan → tydlig koppling). */
  .affisch{max-width:880px;margin:0 auto;border-radius:20px;overflow:hidden;line-height:0;
    border:1px solid rgba(148,178,214,.16);box-shadow:0 24px 70px rgba(0,0,0,.45);background:var(--sw-bg,#0b1120)}
  :root[data-theme="light"] .affisch{border-color:rgba(30,50,90,.14);box-shadow:0 20px 56px rgba(20,40,80,.18)}
  .affisch img{display:block;width:100%;height:auto}
  /* Mobil: kant i kant (kompenserar .wrap-paddingen) – bilden får hela bredden
     i stället för att bli en liten ruta med oläslig text. */
  @media(max-width:640px){
    .affisch{max-width:none;margin-left:-22px;margin-right:-22px;border-radius:0;border-left:0;border-right:0}
  }
  /* LIVE-puls i mockup-listen + mjukt svävande skärmbild */
  .livedot{width:8px;height:8px;border-radius:50%;background:#34d399;display:inline-block;position:relative;flex:none}
  .livedot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid rgba(52,211,153,.8);animation:rblipPing 2.2s ease-out infinite}
  .hero-shot{animation:none}
  /* Reklamfilm i hero: 16:9 på dator, 9:16 på mobil + ljud-/helskärmsknappar */
  .mk-long{display:inline}
  @media(max-width:640px){ .mk-long{display:none} }
  .vid-wrap{position:relative;line-height:0;background:var(--sw-bg,#0b1120);overflow:hidden}
  .vid-wrap img{display:block;width:100%;height:auto;background:var(--sw-bg,#0b1120)}
  /* TELEFONEN VISAR EN TELEFON (ägarfynd 2026-09-23: "själva storleken … är för stor … i mobilens webbläsare"). Mobilbilden är
     en hel telefonskärm, och i full bredd blev den högre än skärmen man läser på. Under 700 px står den som en telefon i
     mitten – smal, rundad, utan datorns fönsterlist (den hör till datorbilden) – så att man ser bilden OCH texten runt. */
  @media(max-width:700px){
    .hero-shot{max-width:260px!important;border-radius:22px!important}
    .hero-shot > div:first-child{display:none!important}
  }
  /* Karusellen: slides i stack med mjuk korstoning; första ger höjden */
  .hk-slide{opacity:0;transition:opacity .55s ease;pointer-events:none}
  .hk-slide.on{opacity:1;pointer-events:auto}
  .hk-slide:not(:first-child){position:absolute;inset:0}
  /* Bläddringen HELT utanför fönsterramen – fristående kontroller på sidan (ägarfynd 2026-08-23 rev 2) */
  .hk-bar{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px auto 0;flex-wrap:wrap}
  .hk-pil{width:36px;height:36px;border-radius:50%;border:1px solid rgba(148,163,184,.28);background:rgba(148,163,184,.07);
    color:#cfe0f5;font-size:19px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .18s,border-color .18s,color .18s,transform .18s}
  .hk-pil:hover{background:rgba(56,189,248,.22);border-color:rgba(56,189,248,.55);color:#fff;transform:translateY(-1px)}
  .hk-flikar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center}
  .hk-flik{border:0;background:transparent;color:var(--muted);font-size:13px;font-weight:800;letter-spacing:.01em;
    padding:8px 14px;border-radius:11px;cursor:pointer;transition:background .2s,color .2s;white-space:nowrap}
  .hk-flik:hover{background:rgba(148,163,184,.10);color:#dbe8f8}
  .hk-flik.on{background:rgba(56,189,248,.15);color:#eaf4ff}
  :root[data-theme="light"] .hk-flik.on{background:rgba(56,189,248,.20);color:#0c1830}
  :root[data-theme="light"] .hk-pil{border-color:rgba(30,58,95,.2);color:#28425f}
  @media(max-width:700px){ .hk-flik{font-size:12px;padding:7px 10px} .hk-bar{gap:6px} .hk-pil{width:38px;height:38px} }
  @media(max-width:640px){ .hero .in > .trust{gap:10px 16px;font-size:13px;margin-top:16px} }
  
  /* Videospelaren: en kontrollrad längst ned – spela/pausa, tidslinje, tid, ljud, helskärm.
     Alltid nåbar (inte dold bakom hover), men diskret tills man för musen dit. */

    .vp-btn.vp-hela{width:auto;padding:0 9px;font-size:11.5px}
  @media(max-width:460px){ .vp-time{display:none} }
  @media(max-width:340px){ .vp-vol{display:none} }
  @keyframes shotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  .bevakband{margin-top:40px}
  .bevakband .bevakfot{max-width:660px;margin:16px auto 0;text-align:center;color:var(--sw-mut,#94a3b8);font-size:14.5px;line-height:1.55}
  .chip{transition:transform .15s ease,border-color .2s}
  .chip:hover{transform:translateY(-2px);border-color:rgba(56,189,248,.45)}
  /* Ljust tema: header-/footer-loggan (vit text) byts till ljus variant */
  :root[data-theme="light"] .brand img{content:url(/assets/swintel-logo-dag-anim.svg?v=dag1)}
  @media (prefers-reduced-motion:reduce){
    .ab,.lg-rot,.lg-blip,.lg-ping,.hero-shot,.livedot::after{animation:none!important}
    .lg-ping{opacity:0}
    .rv{opacity:1;transform:none;transition:none}
  }