/* =========================================================
   Statly: juridik- och efterlevnadssidorna.

   Fyra långa texter som ska gå att läsa, inte bara att ha.

   FRISTÅENDE MED FLIT. Sidorna laddade tidigare style.css (byråns ljusa
   system) och hämtade dessutom Onest från fonts.googleapis.com. Det andra
   går inte ihop med vad de här sidorna lovar: integritetssidan skickade
   varje besökares IP-adress till Google innan första bokstaven ritats.
   Nu ligger allt här, och typsnitten kommer från /assets/fonts.

   TONEN ÄR STARTSIDANS. Samma svarta botten, samma tokens, samma
   typsnitt, samma piller. Radlängden är den enda regel som spelar roll
   på en sida som den här: 38rem, aldrig mer.

   VIKTER SOM FINNS PÅ DISK. Inter 300/400/500, Space Grotesk 500/700,
   JetBrains Mono 400/500. Inget annat — 600 hade blivit syntetiskt fett.
   ========================================================= */

:root{
  --font-sans:"Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display:"Space Grotesk", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --bg:#000000;
  --ink:#ffffff;             /* rubriker och betonad text            */
  --body:#c9ccd1;            /* brödtext: inte ren vit, den skär      */
  --soft:#9aa0a8;            /* sekundär text                         */
  --subtle:#6b7078;          /* tersiär: metadata, räknare            */
  --line:rgba(255,255,255,.10);
  --accent:#3473f2;          /* halots mellanblå, samma som startsidan */
  --accent-soft:rgba(52,115,242,.16);
  --radius-pill:9999px;
  --measure:38rem;
  --container-shell:88rem;
  --ease-expo:cubic-bezier(0.16,1,0.3,1);
}

/* ── grund ──────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box }
*{ margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  background:var(--bg); color:var(--body);
  font-family:var(--font-sans); font-size:16px; font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
img,svg{ display:block; max-width:100% }
table{ border-collapse:collapse }
::selection{ background:var(--accent-soft); color:#fff }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:.25rem }

.shell{ width:100%; max-width:var(--container-shell); margin-inline:auto; padding-inline:1.25rem }
@media (min-width:640px){ .shell{ padding-inline:2rem } }
.mono{ font-family:var(--mono); font-size:.9em; letter-spacing:-.01em }

.skip{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip:focus{
  position:fixed; left:1rem; top:1rem; z-index:60; width:auto; height:auto;
  border-radius:var(--radius-pill); background:#fff; padding:.5rem 1.125rem;
  font-size:.875rem; color:#000;
}

/* ── knappar: samma piller som startsidans .btn-frame ───────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  border-radius:var(--radius-pill); padding:.6875rem 1.375rem;
  font-size:.8125rem; font-weight:500; white-space:nowrap;
  text-transform:uppercase; letter-spacing:.1em;
  transition:background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
.btn--solid{ background:#fff; color:#000; border:1px solid #fff }
.btn--solid:hover{ background:rgba(255,255,255,.86); border-color:rgba(255,255,255,.86) }
.btn--ghost{ border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.6); color:#fff }
.btn--ghost:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.55) }

/* ── toppbaren ──────────────────────────────────────────────────────────── */
.nav{
  display:block; position:sticky; top:0; z-index:50;
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:saturate(1.2) blur(16px); backdrop-filter:saturate(1.2) blur(16px);
  border-bottom:1px solid var(--line);
}
.nav__in{ display:flex; align-items:center; gap:2rem; padding-block:1rem }
.nav__brand{ display:flex; align-items:center; gap:.625rem; flex-shrink:0; color:#fff }
.nav__brand svg{ height:20px; width:auto }
@media (min-width:768px){ .nav__brand svg{ height:23px } }
.nav__sub{
  font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.2em;
  text-transform:uppercase; color:var(--subtle);
  border-left:1px solid var(--line); padding-left:.625rem; line-height:1;
}
.nav__links{
  display:none; gap:1.75rem; margin-left:auto;
  font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--subtle);
}
.nav__links a{ display:inline-flex; transition:color .15s ease }
.nav__links a:hover{ color:#fff }
.nav__links a[aria-current]{ color:#fff }
@media (min-width:900px){ .nav__links{ display:flex } }
.nav__cta{ display:flex; align-items:center; gap:.5rem; margin-left:auto }
@media (min-width:900px){ .nav__cta{ margin-left:0 } }
.nav__cta .btn{ padding:.5rem 1.125rem; font-size:11px }
.nav__cta .btn--ghost{ display:none }
@media (min-width:520px){ .nav__cta .btn--ghost{ display:inline-flex } }

/* ── sidhuvudet på dokumentet ───────────────────────────────────────────── */
/* Startsidan bygger allt på svart botten och hårstreck. Här låg tidigare
   en blå radialtoning över hjälten; den sa ingenting och drog uppmärksamhet
   från rubriken. Bakgrunden är nu bara svart. */
.doc-hero{
  position:relative;
  border-bottom:1px solid var(--line);
  padding:3.5rem 0 3rem; background:#000;
}
@media (min-width:640px){ .doc-hero{ padding:5.5rem 0 4rem } }

.crumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--subtle); margin-bottom:1.75rem;
}
.crumb a{ transition:color .15s ease }
.crumb a:hover{ color:#fff }
.crumb span{ opacity:.5 }

.eyebrow{
  display:block; font-family:var(--mono); font-size:10px; font-weight:400;
  letter-spacing:.3em; text-transform:uppercase; color:var(--soft);
  margin-bottom:1.25rem;
}
.eyebrow::before{ content:"[ " }
.eyebrow::after{ content:" ]" }

.doc-hero__h{
  max-width:22ch; font-family:var(--font-display);
  font-size:clamp(2rem, 5vw, 3.25rem); font-weight:500;
  line-height:1.08; letter-spacing:-.03em; color:var(--ink);
}
.doc-hero__lead{
  margin-top:1.5rem; max-width:var(--measure);
  font-size:1.0625rem; font-weight:300; line-height:1.7; color:var(--soft);
}
.doc-hero__lead em{ font-style:normal; color:#fff; font-weight:400 }
.doc-hero__meta{
  margin-top:2rem; display:flex; flex-wrap:wrap; gap:.5rem 1.25rem;
  font-family:var(--mono); font-size:11px; color:var(--subtle);
}
.doc-hero__meta strong{ color:var(--body); font-weight:500 }

/* ── dokumentets kropp: innehållsförteckning + text ─────────────────────── */
.doc{ padding:3rem 0 5rem }
@media (min-width:640px){ .doc{ padding:4rem 0 7rem } }
.doc__in{ display:grid; gap:3rem }
@media (min-width:1000px){
  /* Texten först, förteckningen som sidokolumn till höger. Ordningen i
     markupen är tvärtom (förteckningen står först, vilket är rätt för
     skärmläsare och mobil), så spalterna pekas ut explicit.

     Poängen är vänsterkanten: hjälten ligger i skalets kant, och tidigare
     centrerades det här rutnätet, så brödtexten hamnade 560px in från
     rubriken. Nu börjar rubrik och brödtext på samma linje. */
  .doc__in{
    grid-template-columns:minmax(0, var(--measure)) 15rem;
    gap:4rem; justify-content:start;
  }
  .doc__in > .toc{ grid-column:2; grid-row:1 }
  .doc__in > .prose{ grid-column:1; grid-row:1 }
}

.toc{ font-size:.8125rem }
@media (min-width:1000px){
  .toc{ position:sticky; top:6rem; align-self:start; max-height:calc(100vh - 8rem); overflow:auto;
        padding-left:2rem; border-left:1px solid var(--line) }
}
.toc__h{
  font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.2em;
  text-transform:uppercase; color:var(--soft); margin-bottom:1rem;
}
.toc ol{ list-style:none; counter-reset:toc }
.toc li{ counter-increment:toc; border-top:1px solid var(--line) }
.toc li:first-child{ border-top:0 }
.toc a{
  display:flex; gap:.625rem; padding:.5rem 0;
  color:var(--soft); line-height:1.45; transition:color .18s ease;
}
.toc a::before{
  content:counter(toc, decimal-leading-zero);
  font-family:var(--mono); font-size:.6875rem; color:var(--subtle);
  padding-top:.15rem; flex:none;
}
.toc a:hover,.toc a:hover::before{ color:#fff }

/* ── brödtexten ─────────────────────────────────────────────────────────── */
.prose{ max-width:var(--measure); color:var(--body); font-size:1rem; line-height:1.75 }
.prose > section{ scroll-margin-top:6rem; padding-top:.5rem }
.prose > section + section{ margin-top:3.5rem }

.prose h1,.prose h2,.prose h3{ font-family:var(--font-display); color:var(--ink) }
.prose h2{
  font-size:1.5rem; font-weight:500; letter-spacing:-.025em; line-height:1.2;
  margin-bottom:1rem;
}
.prose h2 .num{
  display:block; font-family:var(--mono); font-size:10px; font-weight:400;
  letter-spacing:.2em; color:var(--accent); margin-bottom:.625rem;
}
.prose h3{
  font-size:1.0625rem; font-weight:500; letter-spacing:-.01em;
  margin:2rem 0 .625rem;
}
.prose p{ margin-bottom:1.125rem }
.prose p:last-child{ margin-bottom:0 }
.prose strong{ color:var(--ink); font-weight:500 }
.prose em{ font-style:italic }
.prose a{
  color:#fff; text-decoration:underline; text-underline-offset:.2em;
  text-decoration-thickness:1px; text-decoration-color:rgba(52,115,242,.7);
  transition:text-decoration-color .15s ease;
}
.prose a:hover{ text-decoration-color:#fff }
.prose code{
  font-family:var(--mono); font-size:.875em; color:#fff;
  background:transparent; border:1px solid var(--line);
  border-radius:.375rem; padding:.1em .35em;
}

.prose ul, .prose ol{ margin:0 0 1.125rem; padding-left:0; list-style:none }
.prose li{ position:relative; padding-left:1.25rem; margin-bottom:.625rem }
.prose ul > li::before{
  content:""; position:absolute; left:.125rem; top:.7em;
  width:.3125rem; height:.3125rem; border-radius:50%; background:var(--accent);
}
.prose ol{ counter-reset:step }
.prose ol > li{ counter-increment:step; padding-left:2rem }
.prose ol > li::before{
  content:counter(step); position:absolute; left:0; top:0;
  font-family:var(--mono); font-size:.75rem; color:var(--accent); padding-top:.35em;
}
.prose dl{ margin-bottom:1.125rem }
.prose dt{ font-weight:500; color:var(--ink); margin-top:1rem }
.prose dd{ margin:.25rem 0 0 }

/* ── stegen i mätvägen ──────────────────────────────────────────────────── */
.steps{ margin:0 0 1.125rem; list-style:none; counter-reset:fa-step; padding:0 }
.steps li{
  position:relative; counter-increment:fa-step; padding:0 0 1.5rem 2.75rem; margin:0;
  border-left:1px solid var(--line); margin-left:.75rem;
}
.steps li::before{
  content:counter(fa-step); position:absolute; left:-.8125rem; top:0;
  display:grid; place-items:center; width:1.625rem; height:1.625rem;
  border-radius:50%; background:#000; border:1px solid var(--line);
  font-family:var(--mono); font-size:.6875rem; color:var(--accent);
}
.steps li:last-child{ border-left-color:transparent; padding-bottom:0 }
.steps h3{ margin:0 0 .375rem; font-size:1rem; font-weight:500; color:var(--ink) }
.steps p{ margin:0; font-size:.9375rem; line-height:1.7 }
.steps .t{
  font-family:var(--mono); font-size:.6875rem; color:var(--subtle);
  text-transform:uppercase; letter-spacing:.14em; display:block; margin-bottom:.25rem;
}

/* ── tabeller ───────────────────────────────────────────────────────────── */
.tbl-wrap{ margin:0 0 1.125rem; overflow-x:auto; border:1px solid var(--line); border-radius:.75rem }
.tbl{ width:100%; min-width:30rem; border-collapse:collapse; font-size:.875rem; line-height:1.55 }
.tbl caption{
  caption-side:top; text-align:left; padding:1rem 1.125rem .25rem;
  font-family:var(--mono); font-size:11px; color:var(--subtle);
}
.tbl th, .tbl td{ padding:.75rem 1.125rem; text-align:left; vertical-align:top; border-top:1px solid var(--line) }
.tbl thead th{
  border-top:0;
  font-family:var(--mono); font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em; color:var(--soft); white-space:nowrap;
}
.tbl tbody th{ font-weight:500; color:var(--ink); white-space:nowrap }
.tbl tbody th code{ background:none; border:0; padding:0 }
.tbl td{ color:var(--soft) }
.tbl .yes{ color:#4ade80; font-weight:500 }
.tbl .no{ color:#f87171; font-weight:500 }
.tbl tr.is-gone th, .tbl tr.is-gone td{ color:var(--subtle) }
.tbl tr.is-gone th code{ text-decoration:line-through; text-decoration-color:#f87171 }
.tbl .num-col{ text-align:right; font-family:var(--mono); white-space:nowrap }

/* ── rutor ──────────────────────────────────────────────────────────────── */
.note{
  margin:0 0 1.125rem; padding:1.25rem 1.375rem;
  background:transparent; border:1px solid var(--line); border-radius:.75rem;
  font-size:.9375rem; line-height:1.7;
}
.note h3{ margin:0 0 .5rem; font-size:.9375rem; font-weight:500; color:var(--ink) }
.note p:last-child{ margin-bottom:0 }
.note--edge{ background:transparent }  /* kvar som alias: alla rutor är kantade nu */
/* Accenten bärs av en linje i kanten, inte av en färgad yta. */
.note--accent{
  background:transparent; border-left:2px solid var(--accent);
  border-radius:0 .75rem .75rem 0;
}

/* Kort sagt-rutan högst upp i varje dokument. Tidigare en mörk ruta på ljus
   sida; här är sidan redan mörk, så den vänds till en ljus kant i stället. */
.tldr{
  margin:0 0 2.5rem; padding:1.5rem 1.625rem;
  background:transparent; border:1px solid var(--line); border-radius:.75rem;
  font-size:.9375rem; line-height:1.75; color:var(--body);
}
.tldr h2{
  margin:0 0 .75rem; font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--soft);
}
.tldr p{ margin:0 0 .75rem }
.tldr p:last-child{ margin:0 }
.tldr strong{ color:#fff; font-weight:500 }
.tldr ul{ margin:0; padding:0; list-style:none }
.tldr li{ position:relative; padding-left:1.25rem; margin-bottom:.5rem }
.tldr li:last-child{ margin-bottom:0 }
.tldr li::before{
  content:""; position:absolute; left:.125rem; top:.7em;
  width:.3125rem; height:.3125rem; border-radius:50%; background:var(--accent);
}

/* ── kopieringsbar textruta (färdig policytext till kunden) ─────────────── */
.copy{ margin:0 0 1.125rem; border:1px solid var(--line); border-radius:.75rem; overflow:hidden }
.copy__bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.625rem .875rem .625rem 1.125rem;
  border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:11px; color:var(--subtle);
}
.copy__btn{
  border:1px solid rgba(255,255,255,.25); background:transparent;
  border-radius:var(--radius-pill); padding:.375rem .875rem;
  font-family:var(--font-sans); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.1em; color:#fff;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.copy__btn:hover{ background:#fff; color:#000; border-color:#fff }
.copy__body{ padding:1.25rem 1.375rem; font-size:.9375rem; line-height:1.75; color:var(--body) }
.copy__body p{ margin:0 0 .875rem }
.copy__body p:last-child{ margin:0 }
.copy__body strong{ color:var(--ink); font-weight:500 }

/* ── kod ────────────────────────────────────────────────────────────────── */
.prose pre{
  margin:0 0 1.125rem; padding:1.125rem 1.25rem; overflow-x:auto;
  background:transparent; border:1px solid var(--line); color:var(--body);
  border-radius:.75rem; font-family:var(--mono); font-size:.8125rem; line-height:1.7;
}
.prose pre code{ background:none; border:0; padding:0; color:inherit; font-size:inherit }

/* ── kontaktkort i slutet ───────────────────────────────────────────────── */
.contact{
  margin-top:3.5rem; padding-top:2rem; border-top:1px solid var(--line);
  font-size:.9375rem; line-height:1.8;
}
.contact h2{ font-size:1.125rem; margin-bottom:.75rem }

/* ── nästa dokument ─────────────────────────────────────────────────────── */
.more{ margin-top:2.5rem; display:grid; gap:.75rem }
@media (min-width:560px){ .more{ grid-template-columns:1fr 1fr } }
/* Korten ligger inuti .prose, så .prose a hade strukit under hela kortet. */
.more a{
  display:block; padding:1rem 1.125rem; border:1px solid var(--line);
  border-radius:.75rem; text-decoration:none;
  transition:border-color .18s ease, background .18s ease;
}
.more a:hover{ border-color:rgba(255,255,255,.35) }
.more b{ display:block; font-size:.9375rem; font-weight:500; color:var(--ink) }
.more span{ display:block; margin-top:.125rem; font-size:.8125rem; color:var(--subtle) }

/* ── sidfoten ───────────────────────────────────────────────────────────── */
.foot{ padding:4rem 0 2rem; border-top:1px solid var(--line) }
.foot__in{ display:grid; gap:3rem }
@media (min-width:768px){ .foot__in{ grid-template-columns:1fr 1.4fr } }
.foot__brand{ color:#fff }
.foot__brand svg{ height:20px; width:auto }
.foot__brand p{ margin-top:1rem; font-size:.875rem; line-height:1.7; color:var(--subtle) }
.foot__nav{ display:grid; gap:2.5rem; grid-template-columns:repeat(2,1fr) }
@media (min-width:560px){ .foot__nav{ grid-template-columns:repeat(3,1fr) } }
.foot__nav h2{
  font-family:var(--mono); font-size:10px; font-weight:400; letter-spacing:.2em;
  text-transform:uppercase; color:var(--soft); margin-bottom:1rem;
}
.foot__nav a{ display:block; font-size:.875rem; color:var(--subtle); padding:.3125rem 0; transition:color .15s ease }
.foot__nav a:hover{ color:#fff }
.foot__legal{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  margin-top:3.5rem; padding-top:1.5rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--subtle);
}
.foot__meta{ opacity:.6 }

@media print{
  body{ background:#fff; color:#111 }
  .nav, .foot, .toc, .more, .copy__btn{ display:none }
  .doc__in{ display:block }
  .prose{ max-width:none; color:#111 }
  .doc-hero{ background:#fff }
  .doc-hero__h,.prose h2,.prose h3,.prose strong{ color:#000 }
}