/* ===== SIDORNA UNDER swintel.se (startsidan + lagesbild, swintel-gps, barn, for-lag, appen, priser, fragor) – 2026-09-23 =====
   Laddas EFTER assets/landning.css, som bär grunden (body, .wrap, knappar, sektionerna ur startsidan). Här: det gemensamma
   sidhuvudet med hela menyn, foten, och produktsidornas delar (sd-*). Ägarens ord om huvudet: "Jag gillade header-designen
   här … Men hela menyn borde väl visas där också". Huvudet och foten skrivs av scripts/bygg-sidor.js – aldrig för hand.
   Färgerna är husets tema-tokens (swtheme.css) – mörkt och ljust följer med. */
:root{--sd-max:1120px}
.sd-wrap{max-width:var(--sd-max);margin:0 auto;padding:0 20px}
.sd-sida main p a,.sd-sida main li a,.sd-detaljer a{color:var(--sw-accent)}

/* ── sidhuvudet (omgjort 2026-09-23 efter ägarens "headern … borde vi göra snyggare och mer modern"): en svävande ö av glas
   med loggan, menyn som en segmenterad rad och kontoknapparna. Dator ≥ 1180: en rad. Smalare: menyn på en egen rad i ön,
   rullbar i sidled. Menyn har ingen hovringsruta och ingen title – ordet säger redan vad fliken är (ägarens "onödigt"). ── */
html{scroll-padding-top:5.6rem}
.sd-head{position:sticky;top:10px;z-index:50;width:calc(100% - 24px);max-width:1180px;margin:10px auto 0;border-radius:18px;
  background:var(--sw-glass,rgba(11,17,32,.78));backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--sw-line);box-shadow:0 8px 28px rgba(2,6,16,.22);overflow:hidden}
.sd-head-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand meny konto";align-items:center;gap:12px;min-height:60px;padding:0 10px 0 16px}
.sd-brand{grid-area:brand;display:block}
.sd-brand img{height:36px;width:auto;display:block}
.sd-meny{grid-area:meny;justify-self:center;display:flex;gap:2px;padding:4px;max-width:100%;border-radius:var(--sw-rpill,999px);
  background:var(--sw-deep,rgba(2,6,16,.25));border:1px solid var(--sw-line);overflow-x:auto;scrollbar-width:none}
.sd-meny::-webkit-scrollbar{display:none}
.sd-meny a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:var(--sw-rpill,999px);
  color:var(--sw-mut);text-decoration:none;font-weight:700;font-size:14px;white-space:nowrap;transition:color .2s ease,background .2s ease}
.sd-meny a:hover{color:var(--sw-ink)}
.sd-meny a[aria-current="page"]{color:var(--sw-ink);background:var(--sw-card);box-shadow:0 1px 4px rgba(2,6,16,.28)}
.sd-konto{grid-area:konto;display:flex;align-items:center;gap:6px}
.sd-lank{white-space:nowrap;color:var(--sw-mut);text-decoration:none;font-weight:700;font-size:15px;padding:9px 12px;border-radius:var(--sw-rpill,999px);min-height:40px;display:inline-flex;align-items:center}
.sd-lank:hover{color:var(--sw-ink)}
@media(max-width:1179px){
  html{scroll-padding-top:8.75rem}
  .sd-head-in{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"brand konto" "meny meny";gap:8px 12px;min-height:0;padding:8px 8px 8px 14px}
  .sd-konto{justify-self:end}
}
@media(max-width:760px){
  .sd-head{top:8px;margin-top:8px;width:calc(100% - 16px);border-radius:16px}
  .sd-meny{justify-self:stretch}
  .sd-meny a{padding:0 12px}
  .sd-brand img{height:32px}
  /* raden rullar i sidled – den tonar ut mot högerkanten så att man ser att det finns mer */
  .sd-meny{-webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);mask-image:linear-gradient(90deg,#000 84%,transparent)}
}
@media(max-width:360px){ .sd-lank{padding:9px 8px} }
/* Villkorssidorna (köpvillkor, integritet) bär samma ö men ingen meny: de öppnas mitt i Stripes kassa och får inte leda bort. */
.sd-dok-etikett{grid-area:konto;font-weight:800;font-size:14px;color:var(--sw-accent);padding:6px 12px;border:1px solid var(--sw-line);border-radius:var(--sw-rpill,999px);background:var(--sw-card)}
.sd-dok .sd-head-in{grid-template-areas:"brand meny konto";grid-template-columns:auto minmax(0,1fr) auto;padding:8px 10px 8px 16px}

/* ── bakgrunden: ett mjukt ljus överst på sidan, i startsidans färger. Det tonar ut långt innan lagret tar slut, så ingen
   kant syns (förra versionen satt i heron och klipptes mitt i – ägarens bild). ── */
body.sd-sida{position:relative}
body.sd-sida::before{content:"";position:absolute;left:0;right:0;top:0;height:1100px;pointer-events:none;z-index:-1;
  background:radial-gradient(640px 460px at 80% 200px,rgba(56,189,248,.15),transparent 70%),radial-gradient(560px 420px at 10% 380px,rgba(34,211,238,.08),transparent 70%)}

.sd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 20px;border-radius:12px;font-weight:800;font-size:15px;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.sd-btn.pri{background:var(--sw-accent);color:var(--sw-cyanbg,#06212e)}
.sd-btn.pri:hover{filter:brightness(1.08)}
.sd-btn.sek{background:var(--sw-card);color:var(--sw-ink);border-color:var(--sw-line)}
.sd-btn.sek:hover{border-color:var(--sw-accent)}
.sd-konto .sd-btn{min-height:40px;padding:9px 18px;border-radius:var(--sw-rpill,999px)}

/* hero */
.sd-hero{padding:56px 0 40px}
.sd-hero .sd-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center}
.sd-hero .sd-wrap.sd-en{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center}
.sd-en .sd-lead{margin-left:auto;margin-right:auto}
.sd-en .sd-cta{justify-content:center}
.sd-kort-hero{padding-bottom:10px}
.sd-eyebrow{display:inline-block;font-weight:800;font-size:14px;color:var(--sw-accent);background:var(--sw-card);border:1px solid var(--sw-line);border-radius:var(--sw-rpill,999px);padding:5px 12px;margin-bottom:14px}
.sd-hero h1{font-size:44px;line-height:1.1;margin:0 0 16px;letter-spacing:-.01em}
.sd-hero h1 span{color:var(--sw-accent)}
.sd-lead{font-size:19px;color:var(--sw-mut);margin:0 0 24px;max-width:600px}
.sd-cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.sd-cta:empty{display:none}
.sd-not{font-size:14px;color:var(--sw-mut);margin:0}
.sd-bild{justify-self:center;max-width:320px;width:100%;margin:0}
.sd-bild img{width:100%;height:auto;display:block;border-radius:28px;border:1px solid var(--sw-line);box-shadow:0 24px 60px rgba(0,0,0,.35)}
/* en bild som redan bär sina egna telefoner (appen): ingen ram runt, lite större */
.sd-bild.sd-fri{max-width:400px}
.sd-bild.sd-fri img{border:0;border-radius:0;box-shadow:none}
/* delar */
.sd-del{padding:44px 0}
.sd-del h2{font-size:30px;line-height:1.2;margin:0 0 10px;text-align:center}
.sd-del .sd-under{text-align:center;color:var(--sw-mut);font-size:17px;max-width:680px;margin:0 auto 26px}
.sd-kort3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sd-kort{background:var(--sw-card);border:1px solid var(--sw-line);border-radius:18px;padding:22px 20px;color:inherit;text-decoration:none}
a.sd-kort:hover{border-color:var(--sw-accent)}
.sd-kort .ik{font-size:30px;line-height:1;margin-bottom:10px}
.sd-kort h3{font-size:19px;margin:0 0 6px}
.sd-kort p{margin:0;color:var(--sw-mut);font-size:15px}
.sd-kort .sd-mer{display:inline-block;margin-top:10px;color:var(--sw-accent);font-weight:800;font-size:15px}
.sd-nr{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--sw-accent);color:var(--sw-cyanbg,#06212e);font-weight:900;margin-bottom:10px}
.sd-unik{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sd-unik div{background:var(--sw-card);border:1px solid var(--sw-line);border-radius:16px;padding:16px 16px;font-size:15px}
.sd-unik b{display:block;font-size:16px;margin-bottom:4px}
.sd-band{background:var(--sw-card);border:1px solid var(--sw-line);border-radius:20px;padding:26px 24px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.sd-band h3{margin:0 0 6px;font-size:21px} .sd-band p{margin:0;color:var(--sw-mut)}
.sd-pris{font-size:34px;font-weight:900} .sd-pris small{font-size:15px;color:var(--sw-mut);font-weight:700}
.sd-snart{display:inline-block;font-size:13px;font-weight:800;padding:4px 10px;border-radius:var(--sw-rpill,999px);background:rgba(250,204,21,.16);color:var(--sw-warnink,#facc15);border:1px solid rgba(250,204,21,.35);margin-left:6px;vertical-align:middle}
/* detaljerna */
.sd-detaljer{max-width:860px;margin:0 auto}
.sd-detaljer details{background:var(--sw-card);border:1px solid var(--sw-line);border-radius:16px;margin:0 0 10px;padding:0 18px}
.sd-detaljer summary{cursor:pointer;list-style:none;font-weight:800;font-size:17px;padding:16px 28px 16px 0;position:relative;min-height:44px}
.sd-detaljer summary::-webkit-details-marker{display:none}
.sd-detaljer summary::after{content:"+";position:absolute;right:0;top:12px;font-size:22px;color:var(--sw-accent);font-weight:900}
.sd-detaljer details[open] summary::after{content:"–"}
.sd-detaljer .inne{padding:0 0 16px}
.sd-detaljer p{margin:0 0 10px;font-size:15.5px;line-height:1.62}
.sd-detaljer ul,.sd-detaljer ol{margin:0 0 12px;padding-left:22px}
.sd-detaljer li{margin:6px 0;font-size:15.5px;line-height:1.55}
.sd-detaljer .djupbox{background:var(--sw-bg);border:1px solid var(--sw-line);border-radius:12px;padding:12px 14px;margin:0 0 12px;font-size:15px}
.sd-detaljer .lead{font-size:17px}
/* "Allt som ingår" på /lagesbild – samma kolumner som rutan på startsidan hade, i sidans flöde */
.featm-sida{background:none;border:0;box-shadow:none;padding:0;max-height:none;overflow:visible;margin:0 auto}

/* startsidans dörrar vidare: ett helt kort är länken */
a.feat-lank{grid-template-rows:auto 1fr auto;color:inherit;text-decoration:none;cursor:pointer}
a.feat-lank:hover{border-color:var(--sw-accent)}
.feat-mer{grid-row:3;grid-column:1 / -1;padding-top:12px;color:var(--sw-accent);font-weight:800;font-size:15px}

/* ── foten ── */
.sd-fot{border-top:1px solid var(--sw-line);padding:30px 0 40px;color:var(--sw-mut);font-size:14px;margin-top:20px}
.sd-fot-topp{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;margin-bottom:14px}
.sd-fot-lankar{display:flex;flex-wrap:wrap;gap:0 4px}
.sd-fot-lankar a{color:var(--sw-mut);text-decoration:none;display:inline-flex;align-items:center;min-height:40px;padding:0 8px;border-radius:8px}
.sd-fot-lankar a:hover{color:var(--sw-ink);background:var(--sw-card)}
.sd-fot-tag{max-width:760px;margin:0 0 8px;line-height:1.6}
.sd-fot-cop{font-size:13px}

@media(max-width:860px){
  .sd-hero .sd-wrap{grid-template-columns:minmax(0,1fr)}
  .sd-bild{max-width:260px}
  .sd-kort3,.sd-unik{grid-template-columns:minmax(0,1fr)}
  .sd-hero h1{font-size:34px}
  .sd-lead{font-size:17px}
  .sd-del h2{font-size:25px}
}
@media(max-width:480px){ .sd-hero{padding-top:32px} .sd-fot-lankar{margin:0 -8px} }
:root[data-theme="light"] .sd-brand img{content:url(/assets/swintel-logo-dag-anim.svg?v=dag1)}


/* ═══ EFFEKTERNA (2026-09-23, ägarens "gör allting riktigt toppmodernt och stilrent … lite snygga effekter") ═══
   Allt här är lugnt och billigt: bara opacity/transform (GPU), inget som flyttar layouten, och ALLT stängs av med
   prefers-reduced-motion. Klasserna sd-rv/sd-glow sätts av assets/sidor.js – utan JS syns allt som vanligt. */
.sd-head{transition:box-shadow .25s ease,background .25s ease}
.sd-head.skrollad{box-shadow:0 14px 36px rgba(2,6,16,.34)}
.sd-head::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--sd-prog,0));background:linear-gradient(90deg,var(--accent,#38bdf8),var(--accent2,#22d3ee));pointer-events:none}
/* heron: accentorden i samma toning som startsidans rubrik, och bilden glider in en gång när sidan öppnas – inget som
   rör sig hela tiden (ägaren: svävandet "ser lite hackigt ut"). */
.sd-hero h1 span{background:linear-gradient(90deg,var(--accent,#38bdf8),var(--accent2,#22d3ee));-webkit-background-clip:text;background-clip:text;color:transparent}
.sd-bild img{animation:sdFram .9s cubic-bezier(.16,1,.3,1) .15s both}
@keyframes sdFram{from{opacity:0;transform:translateY(24px) scale(.97)}}
/* primärknappen får ett glansdrag när man pekar på den */
.sd-btn.pri{position:relative;overflow:hidden}
.sd-btn.pri::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.38) 50%,transparent 58%) no-repeat;background-size:250% 100%;background-position:130% 0;transition:background-position .7s ease;pointer-events:none}
.sd-btn.pri:hover::after{background-position:-30% 0}
/* korten: lyft och ett ljus som följer pekaren */
.sd-glow{position:relative;isolation:isolate}
.sd-glow::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .3s ease;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(56,189,248,.13),transparent 65%)}
@media(hover:hover){
  .sd-glow{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
  .sd-glow:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(2,6,16,.24)}
  .sd-glow:hover::after{opacity:1}
}
/* det som rullar in tonar fram, kort för kort */
.sd-rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1);transition-delay:var(--rvd,0ms)}
.sd-rv.on{opacity:1;transform:none}
/* frågorna öppnar sig mjukt */
details[open]>:not(summary){animation:sdIn .35s ease}
@keyframes sdIn{from{opacity:0;transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){
  .sd-rv{opacity:1;transform:none;transition:none}
  .sd-bild img,details[open]>:not(summary){animation:none}
  .sd-glow,.sd-glow:hover{transition:none;transform:none}
  .sd-btn.pri::after{display:none}
}