/* Undersidorna (integritetspolicy, användarvillkor, support) i förslag K:s utseende.
   Samma två lägen som startsidan. Märkningen i sidorna är oförändrad från dagens sajt, bara stilen är ny:
   läsbredd på 760 px, lugn bakgrund utan rörelse, och rutor som följer läget. */
@font-face{font-family:IN;font-weight:600;src:url(/assets/fonts/inter-latin.woff2) format("woff2")}
:root{--natt:#01040f;--orange:#f0a51a;--dis:#c3ccef;--linje:rgba(150,170,255,.12);--text:#e9edfb;
  --p-bg:#0a1130;--p-rad:#121b45;--p-text:#eef2ff;--p-gra:#98a5d6;--p-kant:rgba(150,170,255,.16);--p-lank:#f0a51a;--sken1:#17349a;--sken2:#0c1b5c;--s1:.42;--s2:.45}
:root[data-tema="ljust"]{--natt:#030820;--linje:rgba(160,180,255,.14);
  --p-bg:#f4f6fd;--p-rad:#fff;--p-text:#0b1437;--p-gra:#5b668c;--p-kant:#dfe5f5;--p-lank:#8a5a00;--sken1:#2a55e0;--sken2:#17309a;--s1:.55;--s2:.55}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{position:relative;background:var(--natt);color:var(--text);font-family:'Inter',sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background-color .5s ease}
/* Skenet står still: en undersida är till för att läsas. */
body::before,body::after{content:"";position:fixed;z-index:0;border-radius:50%;filter:blur(90px);pointer-events:none;transition:background-color .6s,opacity .6s}
body::before{width:60vmax;height:60vmax;left:46%;top:-26%;background:var(--sken1);opacity:var(--s1)}
body::after{width:44vmax;height:44vmax;left:-18%;top:46%;background:var(--sken2);opacity:var(--s2)}
a{color:var(--orange);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(240,165,26,.45)}
a:hover{text-decoration-color:var(--orange)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}
::view-transition-old(root),::view-transition-new(root){animation-duration:.7s}
.nav,.wrap,footer{position:relative;z-index:1}

.nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--natt) 62%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--linje)}
.nav-in{max-width:1240px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:16px;height:70px}
.brand{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.02em;color:#fff;text-decoration:none;margin-right:auto}
.brand img{height:32px;width:auto;display:block}
.brand b{font-weight:700}
.brand span{color:var(--orange)}
.back{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:11px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.07);color:#fff;font-weight:600;font-size:14.5px;text-decoration:none}
.tema{width:42px;height:42px;border-radius:11px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.07);color:#fff;display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.tema svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tema .mane{display:none}
:root[data-tema="ljust"] .tema .sol{display:none}
:root[data-tema="ljust"] .tema .mane{display:block}

.wrap{max-width:760px;margin:0 auto;padding:0 22px}
.hero{padding:64px 0 34px}
.eyebrow{font-size:15px;font-weight:600;color:var(--orange)}
h1{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(38px,6vw,64px);letter-spacing:-.035em;line-height:1.03;color:#fff;margin-top:10px}
.intro{margin-top:20px;font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--dis)}
.updated{margin-top:18px;font-size:14.5px;font-weight:600;color:var(--dis)}
main{padding-bottom:90px}
h2{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:clamp(23px,3vw,29px);letter-spacing:-.025em;line-height:1.15;color:#fff;margin-top:44px;padding-top:30px;border-top:1px solid var(--linje)}
h3{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:20px;letter-spacing:-.02em;line-height:1.2}
main p,main li{margin-top:14px}
main ul{padding-left:22px}
main strong{color:#fff;font-weight:600}

/* rutorna följer läget, som panelerna på startsidan */
.callout,.ccard,details{background:var(--p-bg);color:var(--p-text);border:1px solid var(--p-kant);border-radius:20px;transition:background-color .5s ease,color .5s ease,border-color .5s ease}
.callout{padding:20px 22px;margin-top:8px}
.callout + .callout{margin-top:12px}
.callout p{margin:0}
.callout strong,.ccard strong,details strong{color:inherit}
.cards{display:grid;gap:12px;margin-top:20px}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}}
.ccard{padding:20px 22px}
.ccard .lbl{font-size:13.5px;font-weight:600;color:var(--p-gra)}
.ccard h3{margin-top:6px;overflow-wrap:anywhere}
.ccard p{margin-top:8px;font-size:16px;color:var(--p-gra)}
.cards + .callout{margin-top:12px}
.faq{display:grid;gap:10px;margin-top:22px}
details summary{list-style:none;cursor:pointer;padding:18px 54px 18px 22px;font-weight:600;font-size:17px;position:relative;min-height:44px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"";position:absolute;right:24px;top:50%;width:9px;height:9px;margin-top:-7px;border-right:2px solid var(--p-gra);border-bottom:2px solid var(--p-gra);transform:rotate(45deg);transition:transform .3s ease,margin .3s ease}
details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.ans{padding:0 22px 20px;color:var(--p-gra);font-size:16px}
.ans p:first-child{margin-top:0}

footer{border-top:1px solid var(--linje);padding:32px 0 46px;font-size:14.5px;color:#8f9bc8}
.flinks{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px}
.flinks a{color:var(--dis);min-height:44px;display:inline-flex;align-items:center}

/* efter genomgången 2026-10-13 */
/* länkar inne i rutorna: orange på ljus botten gav kontrast 1,9. I ljust läge är de mörkt guld (6,0). */
.callout a,.ccard a,details a{color:var(--p-lank);text-decoration-color:currentColor}
.brand{min-height:44px}
@media(max-width:360px){.nav-in{gap:10px;padding:0 16px}.back{padding:0 12px;font-size:14px}.brand{font-size:20px}.brand img{height:28px}}