/* ==========================================================================
   TEKNOLOGISTEN — designsystem
   Tema: "Spektrum" — nästan svart botten, en violett signal, hårfina avdelare.
   ========================================================================== */

/* ── 1. Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, li, dl, dd, dt, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ── 2. Tokens ────────────────────────────────────────────────────────── */
:root {
  /* Ytor */
  --void:      #08070D;
  --panel:     #12101D;
  --panel-2:   #191527;
  --panel-3:   #221D36;

  /* Linjer */
  --line:      rgba(166, 158, 205, 0.15);
  --line-soft: rgba(166, 158, 205, 0.07);
  --line-lit:  rgba(145, 132, 255, 0.45);

  /* Text */
  --ink:   #EDEBF7;
  --ink-2: #AEA7C6;
  --muted: #867FA0;

  /* Signal */
  --signal:        #9184FF;
  --signal-bright: #AC9FFF;
  --signal-glow:   rgba(145, 132, 255, 0.32);
  --signal-wash:   rgba(145, 132, 255, 0.08);

  /* Lägesfärger — används för betyg och varningar */
  --amber: #FFB347;
  --bad:   #FF6B81;

  /* Datavisualisering. Serie 1–5 är kategoriska och valda för att hålla sig
     åtskilda även mot varandra, inte bara mot bakgrunden. */
  --viz-1:    #9184FF;
  --viz-2:    #4FB6FF;
  --viz-3:    #34D9BE;
  --viz-4:    #FFB347;
  --viz-5:    #FF6B9D;
  --viz-grid: rgba(166, 158, 205, 0.10);
  --viz-axis: rgba(166, 158, 205, 0.28);

  /* Typografi */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", monospace;

  /* Rytm */
  --wrap: 1200px;
  --pad: 28px;
  --radius: 3px;

  /* Rörelse */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── 3. Grund ─────────────────────────────────────────────────────────── */
body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  /* Svenska sammansatta ord är långa ("recensionsexemplar"). Avstavning gör
     att de bryts snyggt i smala kolumner i stället för att spränga dem. */
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Rubriker, etiketter och siffror avstavas aldrig — det ser trasigt ut. */
h1, h2, h3, h4, .mono, .eyebrow, .brand__word, .btn, .nav, .pill { hyphens: none; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -0.025em; }

::selection { background: var(--signal); color: var(--void); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; top: -60px; left: var(--pad); z-index: 200;
  background: var(--signal); color: var(--void);
  padding: 10px 16px; font-size: 0.85rem; font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ── 4. Bakgrundslager ────────────────────────────────────────────────── */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.bg__grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 0%, transparent 75%);
  opacity: 0.85;
}

.bg__glow { position: absolute; border-radius: 50%; filter: blur(120px); }
.bg__glow--a {
  width: 780px; height: 620px; top: -300px; left: -160px;
  background: radial-gradient(circle, rgba(110, 91, 242, 0.20), transparent 70%);
}
.bg__glow--b {
  width: 620px; height: 520px; top: 34%; right: -240px;
  background: radial-gradient(circle, rgba(79, 182, 255, 0.09), transparent 70%);
}

.bg__scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.022) 0px,
    rgba(255, 255, 255, 0.022) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity: 0.6;
}

.bg__grain {
  position: absolute; inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: overlay;
  animation: grain 8s steps(6) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 1%); }
}

/* Innehållet ovanpå bakgrunden */
.header, main, .footer { position: relative; z-index: 1; }

/* ── 5. Byggstenar ────────────────────────────────────────────────────── */
/* Punkten var förr en blinkande statusindikator i den översta raden. Rådet
   är borta, och en pulsande punkt bredvid ett publiceringsdatum läses som en
   live-flagga för något som inte är live. Den är stilla nu. */
.dot {
  display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-wash), 0 0 10px var(--signal-glow);
}

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 18px;
}
.eyebrow__line { display: block; width: 26px; height: 1px; background: var(--signal); opacity: 0.55; }

.meta-sep { display: inline-block; width: 1px; height: 12px; background: var(--line); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.pill--sm { padding: 3px 9px; font-size: 0.63rem; }
.pill--live { color: var(--signal); border-color: var(--line-lit); background: var(--signal-wash); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px;
  font-family: var(--font-display);
  font-size: 0.87rem; font-weight: 500; letter-spacing: 0.01em;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer; white-space: nowrap;
  transition: all 0.22s var(--ease);
}
.btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.22s var(--ease); }

.btn--primary {
  background: var(--signal); color: #14102B;
  box-shadow: 0 0 0 1px rgba(145, 132, 255, 0.5), 0 8px 30px -10px var(--signal-glow);
}
.btn--primary:hover { background: var(--signal-bright); box-shadow: 0 0 0 1px var(--signal), 0 12px 40px -8px var(--signal-glow); transform: translateY(-1px); }
.btn--primary:hover svg { transform: translateX(3px); }

.btn--ghost {
  background: transparent; color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--line-lit); color: var(--signal); background: var(--signal-wash); }
.btn--sm { padding: 9px 16px; font-size: 0.8rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 0.86rem; font-weight: 500;
  color: var(--ink-2);
  transition: color 0.2s var(--ease);
}
.link-arrow span { transition: transform 0.24s var(--ease); }
.link-arrow:hover { color: var(--signal); }
.link-arrow:hover span { transform: translateX(4px); }

/* ── 6. Header ────────────────────────────────────────────────────────── */
.header {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), backdrop-filter 0.3s var(--ease);
}
.header.is-scrolled {
  background: rgba(10, 9, 16, 0.82);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--line);
}
.header__inner {
  display: flex; align-items: center; gap: 32px;
  height: 74px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; }
/* Märket: "Mätaren" — fem segment som tonar upp mot en accentfärgad stapel.
   Samma språk som signalmätaren i betygsskalan. Fyra fasta tonlägen i stället
   för en gradient, eftersom en gradient bara blir grumlig när märket krymper. */
.brand__mark { width: 24px; height: 24px; flex: none; }
.brand__bar { fill: var(--ink); }
.brand__bar--1 { opacity: 0.3; }
.brand__bar--2 { opacity: 0.46; }
.brand__bar--3 { opacity: 0.62; }
.brand__bar--4 { opacity: 0.8; }
.brand__bar--5 {
  fill: var(--signal);
  filter: drop-shadow(0 0 3px var(--signal-glow));
}
.brand__word {
  font-family: var(--font-display);
  font-size: 1.02rem; font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ink);
}
/* Menyn ligger i en rad på breda skärmar och fälls ihop under 1000 px, där de
   tre flikarna inte längre får plats utan att trängas. Knappen finns i markupen
   hela tiden och döljs här, se regeln längre ned. */
.nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* Knappen som fäller menyn. Dold så länge menyn får plats i sidhuvudet. */
.nav__toggle {
  display: none;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  min-height: 44px;
  min-width: 44px;
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background-color: transparent;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

/* Tre streck, ritade med en stapel och två skuggor, så att knappen inte
   behöver någon ikonfil. */
.nav__bars {
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.nav__toggle:hover { border-color: var(--line-lit); color: var(--ink); }
.nav__toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.nav__toggle[aria-expanded="true"] { border-color: var(--signal); color: var(--ink); }
.nav > a {
  position: relative;
  padding: 9px 14px;
  font-size: 0.9rem; color: var(--ink-2);
  transition: color 0.2s var(--ease);
}
.nav > a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 1px; background: var(--signal);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav > a:hover { color: var(--ink); }
.nav > a:hover::after { transform: scaleX(1); }
/* Markerar vilken sida man står på. */
.nav > a[aria-current="page"] { color: var(--signal); }
.nav > a[aria-current="page"]::after { transform: scaleX(1); }

/* ── 7. Hero ──────────────────────────────────────────────────────────── */
.hero { padding: 104px 0 84px; }
.hero__inner { max-width: 1000px; }

.hero__title {
  font-size: clamp(2.5rem, 7vw, 5.1rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin-bottom: 30px;
}
.hero__accent {
  color: var(--signal);
  text-shadow: 0 0 34px var(--signal-glow);
}

.hero__lead {
  max-width: 620px;
  font-size: 1.075rem; line-height: 1.72;
  color: var(--ink-2);
  margin-bottom: 40px;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 76px; }

.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--line-soft);
}
/* Siffrorna ankras i botten så de linjerar även om en etikett radbryts. */
.stats__item {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px 22px 22px;
  background: var(--void);
}
.stats__item dt {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 10px;
}
.stats__item dd {
  margin-top: auto;
  font-size: 2rem; font-weight: 500; line-height: 1; color: var(--ink);
  letter-spacing: -0.02em;
}
/* Extra specificitet krävs: ".stats__item dd" sätter annars färgen. */
.stats .stats__item--zero { color: var(--signal); text-shadow: 0 0 22px var(--signal-glow); }

/* ── 8. Tickare ───────────────────────────────────────────────────────── */
.ticker {
  position: relative;
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(18, 16, 29, 0.7), transparent);
  padding: 11px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track {
  display: flex; align-items: center;
  width: max-content;
  font-family: var(--font-mono); font-size: 0.7rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  animation: ticker 46s linear infinite;
}
/* Två identiska grupper → -50% är exakt en gruppbredd, alltså sömlös loop. */
.ticker__group {
  display: flex; align-items: center; gap: 26px;
  flex: none;
  padding-right: 26px;
}
.ticker__v { color: var(--signal); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── 9. Sektioner ─────────────────────────────────────────────────────── */
.section { padding: 100px 0; }
.section--alt {
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(13, 11, 20, 0.9), rgba(8, 7, 13, 0.4));
}

.section__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 48px;
  padding-bottom: 26px; margin-bottom: 46px;
  border-bottom: 1px solid var(--line);
}
.section__head--tight { margin-bottom: 30px; }
.section__title { font-size: clamp(1.6rem, 3.4vw, 2.35rem); }
.section__note {
  max-width: 400px; font-size: 0.9rem; color: var(--muted); line-height: 1.6;
}

/* ── 10. Utvalt test ──────────────────────────────────────────────────── */
.feature {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(25, 21, 39, 0.85), rgba(13, 11, 20, 0.6)),
    var(--panel);
  transition: border-color 0.3s var(--ease);
}
.feature::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--signal), transparent 55%);
  opacity: 0.75;
}
.feature:hover { border-color: var(--line-lit); }

.feature__body { padding: 42px 44px 34px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.feature__title {
  font-size: clamp(1.45rem, 2.9vw, 2.1rem);
  margin-bottom: 18px;
  letter-spacing: -0.03em;
}
.feature__text { max-width: 560px; font-size: 1rem; color: var(--ink-2); margin-bottom: 28px; }

.verdict { display: grid; gap: 9px; margin-bottom: 34px; }
.verdict li {
  display: flex; align-items: baseline; gap: 11px;
  font-size: 0.94rem; color: var(--ink-2);
}
.verdict__k {
  font-family: var(--font-mono); font-size: 0.8rem;
  color: var(--signal); flex: none; width: 10px;
}
.verdict__k--neg { color: var(--amber); }

.feature__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8rem; color: var(--muted);
}
.byline { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-2); }
.byline__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--panel-3); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.6rem; color: var(--signal);
  letter-spacing: 0.04em;
}

.feature__score {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 42px 30px;
  border-left: 1px solid var(--line);
  background: linear-gradient(180deg, var(--signal-wash), transparent 70%);
  text-align: center;
}

.ring { position: relative; width: 168px; height: 168px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: rgba(166, 158, 205, 0.14); stroke-width: 1.5; }
/* Omkrets = 2π·52 ≈ 326,73. Utan JavaScript ritas ringen direkt i rätt läge;
   siffran kommer från --score, så det finns bara en källa att uppdatera. */
.ring__value {
  fill: none; stroke: var(--signal); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: calc(326.73px * (1 - var(--score, 0) / 10));
  filter: drop-shadow(0 0 8px var(--signal-glow));
}
.js .ring__value {
  stroke-dashoffset: 326.73px;
  animation: ringDraw 1.8s var(--ease) 0.25s forwards;
}
@keyframes ringDraw {
  to { stroke-dashoffset: calc(326.73px * (1 - var(--score, 0) / 10)); }
}
.ring__label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
}
.ring__num {
  font-family: var(--font-display);
  font-size: 3rem; font-weight: 500; line-height: 1;
  letter-spacing: -0.04em;
  text-shadow: 0 0 30px var(--signal-glow);
}
.ring__max {
  font-family: var(--font-mono); font-size: 0.63rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.feature__grade {
  margin-top: 18px;
  font-family: var(--font-display); font-size: 0.95rem; color: var(--signal);
  letter-spacing: 0.01em;
}
.feature__gradenote { max-width: 200px; font-size: 0.74rem; color: var(--muted); line-height: 1.5; }
.feature__gradenote a { color: var(--ink-2); border-bottom: 1px solid var(--line); }
.feature__gradenote a:hover { color: var(--signal); border-color: var(--line-lit); }

/* ── 11. Testkort ─────────────────────────────────────────────────────── */
.cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-top: 0;
}

.card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px 26px 22px;
  background: var(--void);
  transition: background 0.3s var(--ease);
}
.card::before,
.card::after {
  content: ""; position: absolute;
  width: 0; height: 0; opacity: 0;
  border: 1px solid var(--signal);
  transition: width 0.32s var(--ease), height 0.32s var(--ease), opacity 0.32s var(--ease);
  pointer-events: none;
}
.card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.card::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.card:hover { background: var(--panel); }
.card:hover::before,
.card:hover::after { width: 16px; height: 16px; opacity: 1; }

.card__top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 20px;
}
.card__price { font-size: 0.78rem; color: var(--ink-2); }
.card__title { font-size: 1.16rem; line-height: 1.3; margin-bottom: 12px; }
.card__title a { transition: color 0.2s var(--ease); }
.card:hover .card__title a { color: var(--signal); }
.card__text { font-size: 0.875rem; color: var(--muted); margin-bottom: 24px; }

.score { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.score__num {
  font-size: 0.95rem; font-weight: 500; color: var(--signal);
  letter-spacing: -0.01em; flex: none;
}
.score__track {
  position: relative; flex: 1; height: 7px;
  background: rgba(166, 158, 205, 0.10);
  overflow: hidden;
}
/* Fylld som standard — töms bara när JS kan animera den på plats. */
.score__fill {
  position: absolute; inset: 0 auto 0 0;
  width: var(--pct, 0%);
  background: var(--signal);
  box-shadow: 0 0 12px var(--signal-glow);
}
.js .score__fill { width: 0; transition: width 1.2s var(--ease); }
.score__track::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    to right,
    transparent 0 calc(10% - 2px),
    var(--void) calc(10% - 2px) 10%
  );
}
.score__word {
  flex: none; width: 104px;
  font-family: var(--font-mono); font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  text-align: right;
}
.score--warn .score__num { color: var(--amber); }
.score--warn .score__fill { background: var(--amber); box-shadow: 0 0 12px rgba(255, 179, 71, 0.3); }

.card__meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}

/* ── 12. Metodik ──────────────────────────────────────────────────────── */
.methods {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px;
  background: var(--line-soft);
}
.method {
  position: relative;
  padding: 30px 24px 32px;
  background: var(--void);
  transition: background 0.3s var(--ease);
}
.method:hover { background: var(--panel); }
.method__num {
  display: block; margin-bottom: 16px;
  font-size: 0.7rem; letter-spacing: 0.14em; color: var(--signal);
}
.method h3 { font-size: 1rem; margin-bottom: 10px; }
.method p { font-size: 0.845rem; color: var(--muted); line-height: 1.62; }
.method::after {
  content: ""; position: absolute; top: 0; left: 0; width: 0; height: 1px;
  background: var(--signal);
  transition: width 0.5s var(--ease);
}
.method:hover::after { width: 100%; }

/* ── 13. Nyheter + betygsskala ────────────────────────────────────────── */
.news { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 72px; }

.feed { border-top: 1px solid var(--line); }
.feed__item {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 22px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line-soft);
  transition: border-color 0.3s var(--ease);
}
.feed__item:hover { border-bottom-color: var(--line-lit); }
.feed__time {
  font-size: 0.7rem; letter-spacing: 0.08em; color: var(--muted);
  padding-top: 6px;
}
.feed__title { font-size: 1.09rem; line-height: 1.32; margin-bottom: 7px; transition: color 0.2s var(--ease); }
.feed__item:hover .feed__title { color: var(--signal); }
.feed__text { font-size: 0.88rem; color: var(--muted); }

.scale {
  align-self: start;
  padding: 32px 30px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(25, 21, 39, 0.6), rgba(13, 11, 20, 0.3));
}
.scale__title { font-size: 1.5rem; margin-bottom: 26px; }
.scale__list { display: grid; gap: 20px; margin-bottom: 26px; }
.scale__row { display: flex; align-items: center; gap: 14px; font-size: 0.84rem; }
.scale__range { flex: none; width: 62px; font-size: 0.7rem; color: var(--muted); }
.scale__bar {
  position: relative; flex: 1; height: 5px;
  background: rgba(166, 158, 205, 0.1); overflow: hidden;
}
.scale__bar i {
  position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%);
  background: var(--signal);
}
.js .scale__bar i { width: 0; transition: width 1.2s var(--ease); }
.scale__bar--warn i { background: var(--amber); }
.scale__bar--bad i { background: var(--bad); }
.scale__label { flex: none; width: 122px; color: var(--ink-2); text-align: right; }
.scale__note {
  font-size: 0.8rem; color: var(--muted);
  padding-top: 22px; margin-bottom: 20px;
  border-top: 1px solid var(--line-soft);
  line-height: 1.6;
}

/* Reveal: animera mätare när föräldern syns */
.js .reveal.in .score__fill,
.js .reveal.in .scale__bar i { width: var(--pct, 0%); }

/* ── 14. Nyhetsbrev ───────────────────────────────────────────────────── */
.letter {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; align-items: center;
  padding: 54px 52px;
  border: 1px solid var(--line);
  background:
    radial-gradient(ellipse 70% 130% at 100% 0%, rgba(110, 91, 242, 0.14), transparent 60%),
    linear-gradient(135deg, rgba(25, 21, 39, 0.8), rgba(13, 11, 20, 0.5));
}
.letter__title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 16px; }
.letter__text { font-size: 0.95rem; color: var(--ink-2); max-width: 420px; }

.field { display: flex; gap: 10px; }
.field input {
  flex: 1; min-width: 0;
  padding: 13px 16px;
  background: rgba(8, 7, 13, 0.7);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.92rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input::placeholder { color: rgba(134, 127, 160, 0.7); }
.field input:focus {
  outline: none;
  border-color: var(--line-lit);
  box-shadow: 0 0 0 3px var(--signal-wash);
}
.letter__fine {
  margin-top: 14px;
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.04em; color: var(--muted);
}
.letter__fine.is-ok { color: var(--signal); }
.letter__fine.is-err { color: var(--bad); }

/* ── 15. Footer ───────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(13, 11, 20, 0.75), var(--void));
  padding-top: 72px;
}
.footer__inner { padding-bottom: 56px; }
.brand--footer { margin-bottom: 22px; }
.footer__pitch { max-width: 460px; font-size: 0.9rem; color: var(--muted); margin-bottom: 26px; }
.footer__org { font-size: 0.7rem; line-height: 1.9; color: rgba(134, 127, 160, 0.75); letter-spacing: 0.03em; }

.footer__nav { display: flex; flex-wrap: wrap; gap: 24px; }
.footer__nav a {
  font-size: 0.88rem; color: var(--ink-2);
  transition: color 0.2s var(--ease), padding-left 0.2s var(--ease);
}
.footer__nav a:hover { color: var(--signal); padding-left: 5px; }

.footer__base {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
  padding-block: 24px;
  border-top: 1px solid var(--line-soft);
}
.footer__copy { font-size: 0.68rem; letter-spacing: 0.08em; color: var(--muted); }

/* Policystatementet i sidfoten. Det står som en egen centrerad rad i stället
   för längst ut till höger: det är en princip, inte en fotnot. Meningen skrivs
   som en mening (gemener, punkt) och har ingen blinkande punkt framför sig —
   den lästes som en statusindikator och gjorde raden billig. */
.footer__badge {
  display: flex; justify-content: center;
  width: 100%;
  font-size: 0.72rem; letter-spacing: 0.03em; color: var(--muted);
}

/* ── 16. Innehållssidor ───────────────────────────────────────────────── */
.page-head {
  padding: 88px 0 52px;
  border-bottom: 1px solid var(--line);
}
.page-head__title {
  font-size: clamp(2.1rem, 5.4vw, 3.5rem);
  letter-spacing: -0.035em;
  margin-bottom: 24px;
}
.page-head__lead { max-width: 640px; font-size: 1.045rem; line-height: 1.7; color: var(--ink-2); }

/* Tomt läge. Streckad ram säger "här ska innehåll in" utan att se trasigt ut. */
.empty {
  padding: 52px 44px;
  border: 1px dashed var(--line);
  background: linear-gradient(180deg, var(--signal-wash), transparent 65%), var(--panel);
}
.empty__title { font-size: 1.35rem; margin-bottom: 12px; }
.empty__text { max-width: 560px; font-size: 0.95rem; line-height: 1.7; color: var(--muted); }

/* Planerade områden — taxonomi, inte publicerat innehåll. */
.roadmap {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
}
.roadmap__item {
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px 24px 28px;
  background: var(--void);
  transition: background 0.3s var(--ease);
}
.roadmap__item:hover { background: var(--panel); }
.roadmap__item h3 { font-size: 1.02rem; }
.roadmap__item p { font-size: 0.86rem; line-height: 1.6; color: var(--muted); }
.pill--planned { align-self: flex-start; color: var(--muted); background: transparent; border-style: dashed; }

.prose { max-width: 680px; }
.prose h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin-bottom: 16px; }
.prose h3 { font-size: 1.08rem; margin: 32px 0 10px; }
.prose p { font-size: 0.98rem; line-height: 1.75; color: var(--ink-2); margin-bottom: 16px; }
.prose p:last-child { margin-bottom: 0; }
.prose a { color: var(--signal); border-bottom: 1px solid var(--line-lit); }
.prose a:hover { border-bottom-color: var(--signal); }
.prose ul { display: grid; gap: 10px; margin-bottom: 16px; }
.prose ul li { position: relative; padding-left: 20px; font-size: 0.98rem; line-height: 1.7; color: var(--ink-2); }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: 0.68em;
  width: 6px; height: 1px; background: var(--signal);
}

/* Faktaruta med mono-etiketter. */
.facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
}
.facts > div { padding: 22px 24px; background: var(--void); }
.facts dt {
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 8px;
}
.facts dd { font-size: 0.95rem; color: var(--ink); }
.facts dd .tbd { color: var(--muted); font-style: italic; }

.stack { display: grid; gap: 22px; }

/* Sifferpanel — sajtens egna guider som staplar.
   Måttet byts med knapparna och raderna sorteras om, så samma tio guider går
   att läsa på tre sätt. Bredden för standardmåttet ligger i markupen, så
   panelen går att läsa även utan skript. */
.sifferpanel {
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(25, 21, 39, 0.6), rgba(13, 11, 20, 0.3));
}
.sifferpanel__head {
  display: flex; flex-wrap: wrap; gap: 16px 24px;
  align-items: center; justify-content: space-between;
  padding: 22px 26px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.sifferpanel__title { font-size: 1.05rem; font-weight: 600; }
.sifferpanel__tabs { display: flex; background: var(--line-soft); border: 1px solid var(--line); gap: 1px; }
.sifferpanel__tab {
  padding: 10px 16px;
  background: var(--void); border: 0;
  font: inherit; font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.sifferpanel__tab:hover { color: var(--ink-2); background: var(--panel); }
.sifferpanel__tab[aria-pressed="true"] { color: var(--signal-bright); background: var(--signal-wash); }
.sifferpanel__tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.sifferpanel__list { display: grid; }
.sifferpanel__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px; align-items: center;
  padding: 14px 26px 16px;
  border-bottom: 1px solid var(--line-soft);
  color: inherit;
  transition: background-color 0.2s var(--ease);
}
.sifferpanel__row:hover { background: var(--panel); }
.sifferpanel__row:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.sifferpanel__name { font-size: 0.92rem; line-height: 1.4; color: var(--ink-2); transition: color 0.2s var(--ease); }
.sifferpanel__row:hover .sifferpanel__name { color: var(--ink); }
.sifferpanel__value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 0.8rem; color: var(--muted); text-align: right; white-space: nowrap;
}
.sifferpanel__track {
  grid-column: 1 / -1;
  position: relative; height: 6px;
  background: rgba(166, 158, 205, 0.1);
  overflow: hidden;
}
.sifferpanel__fill {
  position: absolute; inset: 0 auto 0 0;
  width: var(--pct, 0%);
  background: var(--viz-1);
  transition: width 0.7s var(--ease), background-color 0.3s var(--ease);
}
.sifferpanel[data-matt="ord"] .sifferpanel__fill { background: var(--viz-2); }
.sifferpanel__foot {
  padding: 18px 26px 20px;
  font-size: 0.82rem; line-height: 1.7; color: var(--muted);
}
.sifferpanel__foot strong { font-family: var(--font-mono); font-weight: 500; color: var(--ink-2); }

/* ── 17. Reveal-animation ─────────────────────────────────────────────── */
/* Innehållet göms bara om JavaScript verkligen kör (.js sätts av ett inline-
   script). Skulle skriptet fallera visas sidan i sin helhet i stället för tom. */
.reveal { opacity: 1; }
.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal.in { opacity: 1; transform: none; }

.cards .reveal:nth-child(1) { transition-delay: 0.05s; }
.cards .reveal:nth-child(2) { transition-delay: 0.12s; }
.cards .reveal:nth-child(3) { transition-delay: 0.19s; }
.methods .reveal:nth-child(1) { transition-delay: 0s; }
.methods .reveal:nth-child(2) { transition-delay: 0.07s; }
.methods .reveal:nth-child(3) { transition-delay: 0.14s; }
.methods .reveal:nth-child(4) { transition-delay: 0.21s; }
.methods .reveal:nth-child(5) { transition-delay: 0.28s; }
.stats.reveal { transition-delay: 0.1s; }
/* Om oss har tre siffror. En fjärde kolumn blir en tom ruta som
   avdelarbakgrunden läcker igenom, samma problem som .methods löser. */
.stats--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Om oss visar även produkt- och verktygsregistren. De kommer ur SQLite och
   får fem lika breda kort på stora skärmar. */
.stats--fem { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ── 18. Responsivt ───────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  /* 5 kort i 3 kolumner → sista kortet spänner två, annars syns en tom ruta
     som avdelarbakgrunden läcker igenom. */
  .methods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats--fem { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats--fem .stats__item:nth-child(4),
  .stats--fem .stats__item:nth-child(5) { grid-column: span 1; }
  .method:nth-child(5) { grid-column: span 2; }
  .news { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .letter { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 44px 36px; }
  .roadmap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature__score {
    border-left: 0; border-top: 1px solid var(--line);
    flex-direction: row; gap: 30px; text-align: left; padding: 34px 44px;
  }
  .feature__score .feature__gradenote { max-width: 240px; }
  .feature__grade { margin-top: 0; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card:nth-child(3) { grid-column: 1 / -1; }
  .methods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .method:nth-child(5) { grid-column: span 2; }
  .hero { padding: 76px 0 64px; }
  .section { padding: 76px 0; }
}

/* Menyn fälls ihop. Under 1000 px visas knappen och länkarna ligger i en panel
   under sidhuvudet i stället för i raden. `.header` är sticky och därmed ett
   positionerat element, så panelen mäter sig mot sidhuvudet och följer med när
   det klistrar. */
/* Menyn fälls ihop. Under 1000 px visas knappen och länkarna ligger i en panel
   under sidhuvudet i stället för i raden. `.header` är sticky och därmed ett
   positionerat element, så panelen mäter sig mot sidhuvudet och följer med när
   det klistrar.

   Allt som hör till panelen ligger under `.js`, som sätts av ett inline-skript i
   sidhuvudet. Kör skriptet inte finns det ingen knapp som kan fälla ut något,
   och då vore en ihopfälld meny samma sak som en meny utan länkar: raden står
   kvar precis som förut och knappen ritas aldrig. */
@media (max-width: 1000px) {
  .js .nav__toggle { display: inline-flex; }

  .js .nav {
    position: absolute;
    top: 100%;
    right: var(--pad);
    left: var(--pad);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin-left: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background-color: rgba(8, 7, 13, 0.97);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  }

  .js .nav.is-open { display: flex; }

  /* Länkarna blir rader i panelen. Understrykningen hör till radmenyn och
     byts mot en tonad rad för den sida man står på. */
  .js .nav > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 11px 13px;
    border-radius: var(--radius);
    font-size: 0.95rem;
  }
  .js .nav > a::after { display: none; }
  .js .nav > a[aria-current="page"] { background-color: rgba(145, 132, 255, 0.12); }
}

@media (max-width: 760px) {
  :root { --pad: 20px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats__item { padding: 20px 18px; }
  .stats__item dd { font-size: 1.6rem; }
  /* Tredje siffran spänner båda kolumnerna i stället för att lämna en tom. */
  .stats--tre .stats__item:nth-child(3) { grid-column: 1 / -1; }
  .stats--fem .stats__item:nth-child(5) { grid-column: 1 / -1; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .card:nth-child(3) { grid-column: auto; }
  .section__head { flex-direction: column; align-items: flex-start; gap: 18px; }
  .feature__body { padding: 32px 24px 26px; }
  .feature__score { flex-direction: column; text-align: center; padding: 32px 24px; }
  .feature__score .feature__gradenote { max-width: 230px; }
  .feature__grade { margin-top: 14px; }
  .hero__actions { margin-bottom: 54px; }
  .letter { padding: 34px 24px; }
  .field { flex-direction: column; }
  .scale { padding: 26px 22px; }
  .scale__row { flex-wrap: wrap; gap: 8px 12px; }
  .scale__bar { min-width: 100px; }
  .feed__item { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .feed__time { padding-top: 0; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .ring { width: 148px; height: 148px; }
  .footer__base { flex-direction: column; align-items: flex-start; }
  .score__word { display: none; }
  .ticker__track { animation-duration: 34s; }
  .page-head { padding: 58px 0 38px; }
  .empty { padding: 38px 24px; }
  .roadmap { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .sifferpanel__head { padding: 20px 18px; }
  .sifferpanel__title { flex: 1 1 100%; }
  .sifferpanel__tabs { flex: 1 1 100%; }
  .sifferpanel__tab { flex: 1; padding: 11px 8px; text-align: center; }
  .sifferpanel__row { padding: 13px 18px 15px; }
  .sifferpanel__foot { padding: 16px 18px 18px; }
}

@media (max-width: 520px) {
  .header__inner { gap: 12px; height: 64px; }
  .brand { gap: 9px; }
  .brand__mark { width: 20px; height: 20px; }
  .brand__word { font-size: 0.86rem; letter-spacing: 0.08em; }
  .js .nav > a { font-size: 0.9rem; }
  /* Knappen tappar ordet och behåller strecken, så att märket och menyn får
     plats sida vid sida på de smalaste telefonerna. Träffytan står kvar. */
  .js .nav__text { display: none; }
  .js .nav__toggle { padding: 9px 11px; }
}

@media (max-width: 380px) {
  .brand__word { font-size: 0.78rem; letter-spacing: 0.04em; }
  .js .nav > a { padding: 11px 6px; font-size: 0.8rem; }
}

/* ── 19. Mobil: samma utseende, mindre att måla ───────────────────────── */
/* Tre saker låg stilla i bakgrunden medan man scrollade, och alla tre kostade
   mer än de såg ut att göra:

     1. Kornet ligger i 200 % av skärmen, alltså fyra gånger ytan, med
        mix-blend-mode: overlay och en oändlig animation. Det tvingar fram en
        ny blandning av hela vyn var 1,3:e sekund.
     2. De två glödlamporna hade blur(120px), vilket betyder att telefonen
        rastrerade 96 miljoner pixelradier en gång innan första texten syntes.
     3. Sidhuvudet fick backdrop-filter i samma stund man scrollade, vilket
        tvingar fram en ny oskärpa av allt bakom huvudet i varje bildruta.

   Här behålls formen men arbetet tas bort: kornet blir stilla textur utan
   blandning, glödlamporna blir gradienter med samma färg och falloff, och
   huvudet blir nästan ogenomskinligt i stället för oskärpt. Skrivbordet rörs
   inte av det här — det har råd med allt tre. */
@media (max-width: 760px), (pointer: coarse) {
  .bg__grain {
    animation: none;
    mix-blend-mode: normal;
    opacity: 0.03;
  }
  .bg__glow { filter: none; }
  .bg__glow--a {
    background: radial-gradient(circle,
      rgba(110, 91, 242, 0.22), rgba(110, 91, 242, 0.09) 42%, transparent 78%);
  }
  .bg__glow--b {
    background: radial-gradient(circle,
      rgba(79, 182, 255, 0.11), rgba(79, 182, 255, 0.04) 42%, transparent 78%);
  }
  .header.is-scrolled {
    background: rgba(10, 9, 16, 0.97);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ── 20. Samtyckesbanderollen ─────────────────────────────────────────── */
/* Ligger sist i sidfoten, en per sida, ritad av `bygg.mjs` och dold med
   `hidden` tills besökaren har fått frågan. Alternativet till den här är
   ingen GA4 alls: lagen kräver ett ja innan kakorna, så banderollen är
   priset för mätningen. */
/* Bannern bär `wrap`, precis som sidfotens nedre rad. Indragningen kommer
   alltså ur samma två mått som resten av sidan (`--wrap` och `--pad`) i stället
   för ur en egen siffra, och bannern står i samma kolumn som innehållet både på
   telefon och på skrivbord.

   Innan dess låg den utanför kolumnen: texten och knapparna stod kant i kant
   med skärmen, och knapparna slutade exakt i sidans botten — ingen luft nedåt
   alls. På en bred skärm syntes felet värst, för då hamnade texten långt till
   vänster om allt annat på samma sida. */
.samtycke {
  border-top: 1px solid var(--line);
  margin-top: 46px;
  padding-top: 32px;
  padding-bottom: 48px;
}

.samtycke__rad {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}

.samtycke__text {
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 0.86rem;
  line-height: 1.55;
  margin: 0;
}

.samtycke__text a { color: var(--signal-bright); text-decoration: underline; }

.samtycke__knappar { display: flex; gap: 10px; flex-shrink: 0; }

.samtycke__knapp {
  min-height: 38px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.samtycke__knapp:hover { border-color: var(--line-lit); background: var(--panel-2); }

.samtycke__knapp--alla {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--void);
}

.samtycke__knapp--alla:hover { background: var(--signal-bright); border-color: var(--signal-bright); }

/* Telefon: kortare luft upptill men träffytan växer till 44 px, och
   mellanrummen håller isär texten från valet.

   Blocket står här och inte uppe vid 760 px, för samma väljare med samma vikt
   vinner på ordning: låg de före basreglerna ovan hade de aldrig träffat en
   enda telefon, utan sett ut som en regel och varit död kod. */
@media (max-width: 760px) {
  .samtycke { margin-top: 34px; padding-top: 26px; padding-bottom: 36px; }
  .samtycke__rad { gap: 18px; }
  .samtycke__knappar { gap: 12px; }
  .samtycke__knapp { min-height: 44px; padding: 11px 18px; }
}

/* Raden med knappen på kaksidan. Valet ska gå att ta tillbaka utan att
   besökaren letar i webbläsarens inställningar, och det ska synas vilket val
   som gäller just nu. */
.kakval {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 26px 0;
}

.kakval__status {
  color: var(--ink-2);
  font-size: 0.84rem;
}

/* ── 21. Tillgänglighet ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .ticker__track { animation: none; }
}