/* Gemensam stil för de fristående sidorna (köpvillkor, integritetspolicy, 404).
   Samma värld som startsidan: svart topp och fot, sval silver bakom texten,
   Unbounded bara i rubriken, Manrope för allt som ska läsas. */
@font-face{font-family:Unbounded;font-weight:900;font-display:swap;src:url(/fonts/unbounded-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:Manrope;font-weight:400;font-display:swap;src:url(/fonts/manrope-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Manrope;font-weight:500;font-display:swap;src:url(/fonts/manrope-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:Manrope;font-weight:700;font-display:swap;src:url(/fonts/manrope-latin-700-normal.woff2) format('woff2')}
:root{
  --svart:#000; --glas:#0d0c11; --glas2:#17151d; --silver:#e7e9ed; --blak:#15131a;
  --dov-mork:#a29db0; --dov-ljus:#5e5b69; --rod:#e5172c;
  --linje-ljus:#d3d6dc; --linje-mork:rgba(255,255,255,.1);
  --display:'Unbounded','Arial Black',system-ui,sans-serif;
  --body:'Manrope','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-padding-top:24px}
body{margin:0;background:var(--silver);color:var(--blak);font:500 16px/1.65 var(--body);
  -webkit-font-smoothing:antialiased;
  /* svenska sammansättningar blir långa – låt dem brytas hellre än
     att trycka ut sidan i sidled */
  overflow-wrap:break-word}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

.topp{background:var(--svart);color:#fff;border-bottom:1px solid var(--linje-mork)}
.topp .wrap{display:flex;justify-content:space-between;align-items:center;height:64px}
.topp img{height:22px;width:auto}
.topp .hem{font-size:.9rem;font-weight:700;color:#d9d5e0;text-decoration:none}
.topp .hem:hover{color:#fff}

.sid{padding-block:64px 100px}
.sid .wrap{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:40px 72px;align-items:start}
h1{font:900 clamp(2.2rem,5vw,3.6rem)/.95 var(--display);letter-spacing:-.05em;margin:0;grid-column:1/-1;text-wrap:balance}
.datum{grid-column:1/-1;color:var(--dov-ljus);margin:-24px 0 0}
.toc{position:sticky;top:24px;display:grid;gap:2px;font-size:.92rem}
.toc a{text-decoration:none;color:var(--dov-ljus);padding:6px 0 6px 14px;border-left:2px solid var(--linje-ljus)}
.toc a:hover{color:var(--blak);border-left-color:var(--blak)}
.text{background:#fff;border-radius:22px;padding:clamp(24px,4vw,48px);max-width:760px}
.text h2{font:700 1.2rem/1.3 var(--body);letter-spacing:-.01em;margin:26px 0 10px;padding-top:24px;border-top:1px solid var(--linje-ljus)}
.text p,.text li{color:#3a3843;max-width:66ch}
.text p{margin:0 0 10px}
.text strong{color:var(--blak)}
.text ul{margin:10px 0 12px;padding-left:20px}
.text li{margin-bottom:6px}
.text a{color:var(--blak);text-decoration-color:var(--rod);text-underline-offset:3px;text-decoration-thickness:2px}
.ruta{background:var(--silver);border-radius:12px;padding:16px 18px;margin:14px 0}
.ruta p:last-child{margin-bottom:0}
table{width:100%;border-collapse:collapse;margin:12px 0 16px;font-size:.95rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linje-ljus);vertical-align:top}
th{color:var(--dov-ljus);font-size:.85rem;font-weight:700}
td:first-child{font-weight:700;color:var(--blak)}

.fot{background:var(--svart);color:var(--dov-mork);font-size:.88rem}
.fot .wrap{padding-block:28px;display:flex;gap:10px 24px;flex-wrap:wrap;justify-content:space-between;align-items:center}
.fot nav{display:flex;gap:6px 20px;flex-wrap:wrap}
.fot a{text-decoration:none}
.fot a:hover{color:#fff}

@media(max-width:860px){
  .sid{padding-block:44px 72px}
  .sid .wrap{grid-template-columns:minmax(0,1fr);gap:28px}
  .datum{margin-top:-16px}
  .toc{display:none}
}
@media(max-width:520px){
  table,tbody,tr,td{display:block}
  /* raderna läser sig som uppgift + villkor, så kolumnrubrikerna
     blir bara en lös etikett när tabellen staplas */
  thead{display:none}
  td{border-bottom:none;padding:0 0 2px}
  td:last-child{color:var(--dov-ljus)}
  tr{border-bottom:1px solid var(--linje-ljus);padding:12px 0}
}

/* ===== 404 ===== */
body.fel404{background:var(--svart);color:#fff}
.fel{min-height:calc(100vh - 64px);min-height:calc(100svh - 64px);display:grid;place-items:center;padding-block:60px;
  background:radial-gradient(60% 60% at 50% 40%,#1b1a21,#000 70%)}
.fel .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px 72px;align-items:center;width:100%}
.fel .ord{display:grid;gap:22px;align-content:start}
.fel h1{font-size:clamp(2.4rem,6vw,4.6rem);line-height:.92}
.fel p{color:var(--dov-mork);max-width:38ch;font-size:1.1rem;margin:0}
.fel .rad{display:flex;gap:12px;flex-wrap:wrap}
.knapp{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border-radius:999px;font:700 1rem var(--body);text-decoration:none;white-space:nowrap}
.knapp.rod{background:var(--rod);color:#fff}
.knapp.ram{color:#fff;box-shadow:inset 0 0 0 1.5px currentColor}
.glas{background:linear-gradient(165deg,var(--glas2),var(--glas) 55%);border-radius:28px;padding:18px;position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 80px rgba(0,0,0,.5)}
.glas::after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,rgba(255,255,255,.08),transparent 34%);pointer-events:none}
.fack4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fack{border-radius:14px;background:rgba(255,255,255,.035);padding:24px 12px 14px;display:grid;justify-items:center;align-content:end;gap:12px;min-height:220px}
.fack img{width:52%;filter:drop-shadow(0 10px 12px rgba(0,0,0,.6))}
.fack span{font-weight:700;font-size:.9rem;border-top:2px solid var(--c);padding-top:5px;width:100%;text-align:center}
.fack.tom{border:2px dashed rgba(255,255,255,.22);background:transparent;align-content:center}
.fack.tom b{font:900 3rem/1 var(--display);color:rgba(255,255,255,.35);letter-spacing:-.05em}
.fack.tom span{border-top-color:rgba(255,255,255,.22);color:var(--dov-mork)}
@media(max-width:860px){
  .fel{padding-block:44px}
  .fel .wrap{grid-template-columns:minmax(0,1fr)}
  .fack{min-height:170px}
}