/* Geist Mono för text och etiketter, Space Grotesk för rubriker. Space Grotesk
   är samma som i rapporten och Word-filen (Linus 2026-10-18), så att webb och
   rapport hör ihop. Rubriker i ett typsnitt med lika breda tecken såg ut som
   två typsnitt. Båda ligger på webbplatsen under SIL Open Font License, se
   typsnitt/. Inga anrop till Google. */
@font-face { font-family: "Geist Mono"; src: url("typsnitt/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("typsnitt/space-grotesk-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("typsnitt/space-grotesk-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* AVENOR av LUMRA. Ett instrument, inte en broschyr: monospace, raka kanter,
   hårfina linjer och numrerade delar. Svart natthimmel med måne. Färgerna
   är dämpade mot grått och silver, med lila, mint och orange bara som små
   signaler. Avstånd på ett rutnät om 8 px. */
:root {
  --bg: #040406;
  --yta: rgba(12, 12, 16, 0.78);
  --yta-stark: rgba(12, 12, 16, 0.92);
  --krom: #16161c;
  --linje: rgba(220, 220, 235, 0.1);
  --linje-stark: rgba(220, 220, 235, 0.2);
  --text: #f1f0f4;
  --text-mjuk: #bcbac6;
  --text-dov: #8f8d9a;
  --lila: #a397c9;
  --magenta: #d63cff;
  --accent: #9fd9cd;
  --mint: #9fd9cd;
  --cyan: #3ad0ff;
  --gul: #ffcf4a;
  --grad: linear-gradient(90deg, #f6f5fa, #b9b6c6);
  --orange: #d6ad85;
  --honung: #e1b866;
  --risk: #ff7a8a;
  --kant: 10px;
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s12: 96px; --s16: 128px;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --rubrik: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 15px/1.7 var(--mono); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--rubrik); font-weight: 700; text-wrap: balance; }

/* Himlen bakom allt */
/* Himlen har den största höjden i mobilen (lvh), så att den inte ändrar storlek
   när adressfältet döljs. */
.himmel { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: -1; overflow: hidden; background: var(--bg); }
@media print { .mane-lager { display: none; } }
#rymd { position: absolute; inset: 0; width: 100%; height: 100%; }
.natt { position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 40%, rgba(2, 2, 6, .78) 100%); }

.inre { max-width: 1200px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
@media (max-width: 600px) { .inre { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); } }

/* Logotypen: bocken, AVENOR och AV LUMRA i vitt under, som PIANOLA (Linus 2026-10-18). */
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo img { width: 28px; height: 28px; display: block; }
.ordbild { display: grid; line-height: 1; }
.namn { font: 600 16px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; }
.av { font: 500 9px/1 var(--mono); letter-spacing: .32em; text-transform: uppercase; color: var(--text); opacity: .82; margin-top: 6px; }

/* Toppen */
.topp { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: rgba(4, 4, 10, .93); border-bottom: 1px solid var(--linje); }
.topp .inre { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); height: 64px; }
.topp-logo { text-decoration: none; }
.topp nav { display: flex; align-items: center; gap: var(--s4); font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.topp nav a { text-decoration: none; color: var(--text-mjuk); display: inline-flex; gap: 8px; }
.topp nav a:not(.knapp) span { color: var(--text-dov); }
.topp nav a:hover { color: var(--text); }
/* Språkväxlaren: SV och EN sida vid sida, det aktiva ifyllt i lila. */
.sprakval { display: inline-flex; align-items: center; border: 1px solid rgba(220, 220, 235, .28); background: rgba(8, 8, 12, .6); }
.sprakval-glob { margin: 0 6px 0 10px; color: var(--text-dov); flex-shrink: 0; }
.topp nav .sprakval-val { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 36px; padding: 0 10px; font: 600 12px var(--mono); letter-spacing: .12em; color: var(--text-mjuk); text-decoration: none; }
.topp nav a.sprakval-val:hover { color: var(--text); background: rgba(180, 92, 255, .14); }
.topp nav a.sprakval-val:focus-visible { outline: 2px solid var(--lila-ljus); outline-offset: -2px; }
.sprakval-val[aria-current="true"] { background: var(--lila, #b45cff); color: #0a0a0f !important; box-shadow: 0 0 16px rgba(180, 92, 255, .45); }
@media (max-width: 820px) { .topp nav > a:not(.knapp) { display: none; } .topp nav { gap: var(--s2); } .sprakval-glob { display: none; } .topp nav .sprakval-val { min-height: 40px; min-width: 38px; } }

/* Knapparna: mörka och halvgenomskinliga, med färgövergången som text och
   kant. Ingen fylld färgyta. */
.knapp { display: inline-flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; cursor: pointer;
  font: 600 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 17px 24px;
  color: var(--mint); background: rgba(6, 5, 12, .84);
  border: 1px solid transparent; border-image: var(--grad) 1;
  transition: background .18s, box-shadow .18s, transform .18s cubic-bezier(.22,1,.36,1); }
/* Raden måste vara högre än 1, annars klipps prickarna på Å, Ä och Ö i texten med gradient. */
.knapp > span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.5; padding: 2px 0; margin: -2px 0; }
.knapp::after { content: "→"; color: var(--orange); }
.knapp:hover { background: rgba(14, 11, 24, .82); box-shadow: 0 0 28px rgba(159, 217, 205, .16); transform: translateY(-1px); }
.knapp:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--lila-ljus); outline-offset: 3px; }
.knapp:disabled { opacity: .5; cursor: progress; }
.knapp-sekundar { border: 1px solid var(--linje-stark); border-image: none; }
.knapp-sekundar > span { background: none; color: var(--text); }
.knapp-sekundar::after { content: none; }
.knapp-sekundar:hover { border-color: var(--lila); box-shadow: none; }
.topp .knapp { padding: 11px 16px; font-size: 11px; min-height: 44px; display: inline-flex; align-items: center; }
.topp .knapp { white-space: nowrap; }
@media (max-width: 480px) { .topp .knapp { padding: 11px 12px; letter-spacing: .06em; } .topp nav { gap: 10px; } .logo { gap: 8px; } }
.topp .knapp::after { content: none; }
.eyebrow { font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s3); }

/* Rubrikraden: nummer, namn och en linje ut till kanten. */
.rubrikrad { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s5); font: 500 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; }
.rubrikrad .nr { color: var(--accent); padding: 6px 8px; box-shadow: 0 0 0 1px rgba(159, 217, 205, .4) inset; }
.rubrikrad .rubrik-namn { color: var(--text-mjuk); }
.rubrikrad .linje { flex: 1; height: 1px; background: linear-gradient(90deg, var(--linje-stark), transparent); }

/* Hjälten */
.hjalte { padding: var(--s16) 0 var(--s12); overflow-x: clip; }
.hjalte .inre { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); align-items: center; }
.hjalte h1 { font: 700 clamp(38px, 5.6vw, 72px)/1.04 var(--rubrik); letter-spacing: -.035em; margin: 0; }
.hjalte h1 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: none; }
.ingress { font-size: clamp(17px, 1.6vw, 19px); color: var(--text-mjuk); margin: var(--s4) 0 var(--s5); max-width: 38ch; }
.knappar { display: flex; flex-wrap: wrap; gap: var(--s2); }
.loften { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: var(--s5) 0 0; padding: 0; list-style: none; color: var(--text-dov); font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.loften li { display: inline-flex; align-items: center; gap: 10px; }
.loften li::before { content: ""; width: 6px; height: 6px; background: var(--orange); }
.loften.lodrat { flex-direction: column; gap: var(--s2); }
@media (max-width: 960px) {
  .hjalte { padding: var(--s12) 0 var(--s8); }
  .hjalte .eyebrow { margin-bottom: var(--s4); }
  .hjalte .ingress { margin: var(--s4) 0 var(--s6); }
  .hjalte .inre { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
}

/* Panelen: en granskningslogg som slutar i rådet. */
.panel-yta { position: relative; }
.panel-yta::before { content: none; position: absolute; z-index: -1; inset: -18% -12%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(163, 151, 201, .38), rgba(255, 154, 60, .14) 55%, transparent 75%);
  filter: blur(30px); animation: kula 9s ease-in-out infinite alternate; }
@keyframes kula { to { transform: scale(1.08) translate(3%, -2%); opacity: .8; } }
.panel { position: relative; font-family: var(--mono);
  background: linear-gradient(var(--yta-stark), var(--yta-stark)) padding-box, linear-gradient(135deg, rgba(230,230,240,.35), rgba(230,230,240,.08) 50%, rgba(230,230,240,.25)) border-box;
  border: 1px solid transparent; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.panel::before, .panel::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid var(--accent); pointer-events: none; }
.panel::before { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.panel::after { bottom: -3px; right: -3px; border-left: 0; border-top: 0; border-color: var(--orange); }
/* Fönsterlisten med tre prickar, som på ett skrivbord. */
.panel-topp, .fonster-topp { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s2); padding: 12px 16px; background: var(--krom); border-bottom: 1px solid var(--linje); font-size: 12px; color: var(--text-dov); }
.panel-topp > :nth-child(2), .fonster-topp > :nth-child(2) { font-weight: 600; color: var(--text-mjuk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prickar { display: inline-flex; gap: 8px; }
.prickar i { width: 12px; height: 12px; border-radius: 50%; background: #ff4d6d; }
.prickar i:nth-child(2) { background: var(--lila); }
.prickar i:nth-child(3) { background: var(--gul); }
.panel-topp .lampa, .fonster-topp .lampa { justify-self: end; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.lampa { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); }
.lampa::before { content: ""; width: 6px; height: 6px; background: var(--accent); animation: blink 2.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: .3; } }
/* Terminalen: Siktet-loggan till vänster, granskningen som nyckel och värde. */
.fetch { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 20px; border-bottom: 1px dashed var(--linje); }
.fetch-logo img { display: block; width: 112px; height: 112px; filter: drop-shadow(0 0 18px rgba(159, 217, 205, .35)); }
.fetch-text { min-width: 0; }
.fetch dl { margin: 0; display: grid; gap: 2px; font-size: 12.5px; min-width: 0; }
.fetch .vem { color: var(--accent); font-weight: 600; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--linje-stark); }
.fetch .vem b { color: var(--text); }
.fetch dl div { display: flex; gap: 8px; min-width: 0; }
.fetch dt { color: var(--accent); font-weight: 600; flex: none; }
.fetch dt::after { content: ":"; color: var(--text-dov); }
.fetch dd { margin: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fetch dd.varn { color: var(--orange); }
.fetch dd.rad { color: var(--accent); }
@media (max-width: 600px) { .fetch { grid-template-columns: 1fr; } .fetch-logo img { width: 88px; height: 88px; } }
.js .fetch dl div { opacity: 0; animation: rad .3s steps(3) forwards; }
.js .fetch dl div:nth-child(2) { animation-delay: .25s; } .js .fetch dl div:nth-child(3) { animation-delay: .45s; } .js .fetch dl div:nth-child(4) { animation-delay: .65s; }
.js .fetch dl div:nth-child(5) { animation-delay: .85s; } .js .fetch dl div:nth-child(6) { animation-delay: 1.05s; } .js .fetch dl div:nth-child(7) { animation-delay: 1.25s; } .js .fetch dl div:nth-child(8) { animation-delay: 1.5s; }
@media (prefers-reduced-motion: reduce) { .js .fetch dl div { opacity: 1; animation: none; } }
.logg { list-style: none; margin: 0; padding: 16px 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; font-size: 12.5px; border-bottom: 1px dashed var(--linje); }
.logg li { display: flex; gap: 12px; min-width: 0; color: var(--text-dov); }
.logg li::before { content: "›"; color: var(--lila); }
.logg li span { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; }
.logg li span::after { content: " ........................................"; color: rgba(220, 220, 235, .25); }
.logg b { font-weight: 500; color: var(--text); white-space: nowrap; }
.logg b.varn { color: var(--orange); }
.js .logg li { opacity: 0; animation: rad .35s steps(4) forwards; }
.js .logg li:nth-child(1) { animation-delay: .2s; } .js .logg li:nth-child(2) { animation-delay: .5s; } .js .logg li:nth-child(3) { animation-delay: .8s; }
.js .logg li:nth-child(4) { animation-delay: 1.1s; } .js .logg li:nth-child(5) { animation-delay: 1.4s; }
@keyframes rad { to { opacity: 1; } }
.panel-svar { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 20px var(--s1); }
.panel-svar img { width: 72px; height: 72px; display: block; filter: drop-shadow(0 0 16px rgba(159, 217, 205, .25)); }
.panel-svar p { margin: 0; font: 600 19px/1.3 var(--mono); letter-spacing: -.03em; }
.panel-svar em { font-style: normal; color: var(--accent); text-shadow: 0 0 18px rgba(159, 217, 205, .45); }
.skal { list-style: none; margin: 0; padding: var(--s2) 20px 0; display: grid; gap: 10px; color: var(--text-mjuk); font: 14px/1.5 var(--mono); }
.skal li { display: grid; grid-template-columns: 32px 1fr; }
.skal span { font: 500 12px/1.75 var(--mono); color: var(--lila); }
.matare { display: grid; gap: 10px; margin: var(--s2) 20px 0; padding-top: var(--s2); border-top: 1px dashed var(--linje); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dov); }
.matare div { display: grid; grid-template-columns: 120px 1fr 56px; align-items: center; gap: 12px; }
.matare i { height: 4px; background: rgba(255, 255, 255, .06); position: relative; }
.matare i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); background: var(--orange); }
.matare div + div i::after { background: var(--mint); }
.matare b { font-weight: 500; color: var(--text); text-align: right; }
.ruta-not { margin: 0; padding: var(--s2) 20px; font-size: 11px; color: var(--text-dov); letter-spacing: .06em; }
@media (max-width: 600px) { .matare div { grid-template-columns: 96px 1fr auto; } .panel-svar img { width: 56px; height: 56px; } .panel-svar p { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .panel-yta::before, .lampa::before { animation: none; } .js .logg li { opacity: 1; animation: none; } }

/* Talen och löpbandet */
.tal .inre { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linje); border-bottom: 1px solid var(--linje); }
.tal div { padding: var(--s4) var(--s3); border-left: 1px solid var(--linje); }
.tal div:first-child { border-left: 0; }
.tal b { display: block; font: 600 clamp(32px, 3.6vw, 44px)/1 var(--mono); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.tal span { display: block; margin-top: 12px; font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-dov); }
@media (max-width: 760px) { .tal .inre { grid-template-columns: 1fr 1fr; } .tal div { padding: var(--s3) var(--s3) var(--s4); } .tal div:nth-child(3) { border-left: 0; } .tal div:nth-child(n+3) { border-top: 1px solid var(--linje); } }
.band { overflow: hidden; border-bottom: 1px solid var(--linje); padding: 18px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.band ul { display: flex; gap: 40px; width: max-content; margin: 0; padding: 0; list-style: none; animation: lopa 50s linear infinite; font: 500 12px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--text-mjuk); }
.band li { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; }
.band li::before { content: ""; width: 5px; height: 5px; background: var(--accent); }
.band li:nth-child(3n+2)::before { background: var(--lila); }
.band li:nth-child(3n)::before { background: var(--orange); }
@keyframes lopa { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .band ul { animation: none; } }

/* Delarna */
section.del { padding: var(--s16) 0 0; }
.del h2 { font: 700 clamp(28px, 3.4vw, 44px)/1.12 var(--rubrik); letter-spacing: -.025em; margin: 0 0 var(--s2); }
.del .under { color: var(--text-mjuk); max-width: 56ch; margin: 0; font-size: 17px; }
.del-huvud { margin-bottom: var(--s8); }
.delad { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); min-width: 0; gap: var(--s8); align-items: start; }
.delad-vanster { position: sticky; top: 104px; }
.delad-vanster .under { margin-bottom: var(--s4); }
@media (max-width: 960px) { section.del { padding-top: var(--s12); } .delad { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } .delad-vanster { position: static; } .del-huvud { margin-bottom: var(--s6); } }

/* 01. Tidslinjen: tre steg på en linje. */
.tidslinje { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); counter-reset: steg; }
.tidslinje li { position: relative; padding: var(--s5) var(--s4) 0 0; border-top: 1px solid var(--linje-stark); counter-increment: steg; }
.tidslinje li::before { content: "0" counter(steg); position: absolute; top: -13px; left: 0; padding: 4px 8px; font: 600 12px/1 var(--mono); color: #0b0610; background: linear-gradient(135deg, var(--lila), var(--mint)); }
.tidslinje li:nth-child(2)::before { background: linear-gradient(135deg, var(--mint), var(--orange)); }
.tidslinje li:nth-child(3)::before { background: linear-gradient(135deg, var(--orange), var(--lila)); }
.tidslinje h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; margin: var(--s2) 0 var(--s1); }
.tidslinje p { margin: 0; color: var(--text-mjuk); max-width: 32ch; }
.tid { display: block; font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-dov); }
@media (max-width: 760px) { .tidslinje { grid-template-columns: 1fr; gap: var(--s5); } .tidslinje li { padding-right: 0; } }

/* 02. Principerna som en lista med hårfina linjer, inte kort. */
.principer { margin: 0; border-top: 1px solid var(--linje); }
.principer div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--linje); transition: background .2s; }
.principer div:hover { background: linear-gradient(90deg, rgba(163, 151, 201, .06), transparent); }
.principer dt { font: 600 15px/1.4 var(--mono); letter-spacing: -.02em; }
.principer dd { margin: 0; color: var(--text-mjuk); }
@media (max-width: 600px) { .principer div { grid-template-columns: 1fr; gap: var(--s1); } }

/* 03. Priset som en tabell. */
.pristabell { border-top: 1px solid var(--linje-stark); }
.paket { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 6fr); gap: var(--s4); padding: var(--s4) var(--s3); border-bottom: 1px solid var(--linje); position: relative; transition: background .2s; }
.paket:hover { background: rgba(163, 151, 201, .04); }
.paket-namn { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); }
.paket h3 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.belopp { margin: 0; font: 600 28px/1.1 var(--mono); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.belopp small { display: block; margin-top: 6px; font: 400 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-dov); }
.paket ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s1); color: var(--text-mjuk); font-size: 15px; }
.paket li { padding-left: 20px; position: relative; }
.paket li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 2px; background: var(--accent); }
.etikett { font: 500 10px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #05040c; background: var(--accent); padding: 6px 8px; }
.moms { color: var(--text-dov); font: 12px var(--mono); letter-spacing: .06em; margin: var(--s3) 0 0; }
@media (max-width: 760px) { .paket { grid-template-columns: 1fr; gap: var(--s2); padding: var(--s3) var(--s2); } }

/* 04. Formuläret */
.fonster { border: 1px solid var(--linje-stark); background: var(--yta-stark); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); }
form { position: relative; display: grid; gap: var(--s3); padding: var(--s5); }
.falt { display: grid; gap: var(--s1); }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
@media (max-width: 600px) { .par { grid-template-columns: 1fr; } form { padding: var(--s3) var(--s2); } }
label, legend { font: 600 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.hjalp { font-size: 13px; color: var(--text-dov); margin: -4px 0 0; }
legend + .hjalp { margin-top: var(--s1); }
input, select, textarea { font: 400 16px var(--mono); color: var(--text); background: rgba(2, 2, 8, .7); border: 1px solid var(--linje-stark); border-radius: 0; padding: 14px 16px; width: 100%; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(159, 217, 205, .12); outline: none; }
textarea { min-height: 96px; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-dov) 50%), linear-gradient(135deg, var(--text-dov) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s1); }
.val { display: flex; flex-wrap: wrap; gap: var(--s1); }
.val label { font: 400 15px var(--mono); letter-spacing: 0; text-transform: none; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--linje-stark); cursor: pointer; background: rgba(2, 2, 8, .5); }
.val input { width: auto; accent-color: var(--lila); }
.val label:has(input:checked) { border-color: var(--accent); background: rgba(159, 217, 205, .1); }
details.mer { border-top: 1px dashed var(--linje); padding-top: var(--s2); }
details.mer summary { cursor: pointer; color: var(--text-mjuk); font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; min-height: 44px; display: flex; align-items: center; }
details.mer[open] summary { margin-bottom: var(--s2); }
.falla { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.status { margin: 0; min-height: 1.4em; font: 14px var(--mono); }
.status:empty { display: none; }
[aria-invalid="true"] { border-color: var(--lila) !important; box-shadow: 0 0 0 3px rgba(180, 92, 255, .25) !important; }
.status[data-ton="fel"] { color: var(--risk); }
.status[data-ton="ok"] { color: var(--accent); }
/* Tackrutan efter beställningen: rak ram, en etikett, rubrik och nästa steg. */
.tack { position: relative; display: grid; gap: var(--s3); padding: var(--s6) var(--s5); background: rgba(6, 5, 12, .9); border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .04); }
.tack::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--lila), transparent); }
.tack-etikett { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 600 12px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--lila-ljus); }
.tack-etikett::before { content: ""; width: 8px; height: 8px; background: var(--lila); box-shadow: 0 0 12px var(--lila); }
.tack h3 { margin: 0; font: 700 clamp(24px, 2.6vw, 32px)/1.15 var(--rubrik); letter-spacing: -.02em; }
.tack-text { margin: 0; color: var(--text-mjuk); }
.tack-steg { margin: 0; padding: var(--s3) 0 0; border-top: 1px solid var(--linje); list-style: none; counter-reset: tack; display: grid; gap: var(--s2); }
.tack-steg li { counter-increment: tack; display: grid; grid-template-columns: 36px 1fr; align-items: baseline; color: var(--text); }
.tack-steg li::before { content: "0" counter(tack); font: 600 12px var(--mono); letter-spacing: .1em; color: var(--lila-ljus); }
.tack-nummer { margin: 0; font: 500 13px var(--mono); letter-spacing: .1em; color: var(--text-dov); }
.tack .knapp { justify-self: start; }

/* 05. Frågor och svar */
.fragor { display: grid; border-top: 1px solid var(--linje); }
.fragor details { padding: 0; border-bottom: 1px solid var(--linje); }
.fragor summary { cursor: pointer; font: 600 15px/1.4 var(--mono); letter-spacing: -.02em; list-style: none; display: flex; justify-content: space-between; gap: var(--s2); padding: var(--s3) 0; }
.fragor summary::-webkit-details-marker { display: none; }
.fragor summary::after { content: "+"; color: var(--accent); }
.fragor details[open] summary::after { content: "−"; }
.fragor p { margin: 0 0 var(--s3); color: var(--text-mjuk); max-width: 64ch; }

/* Foten */
.fot { margin-top: var(--s16); padding: var(--s6) 0 var(--s8); border-top: 1px solid var(--linje); color: var(--text-dov); font: 12px var(--mono); letter-spacing: .04em; }
.fot .inre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3); align-items: center; }

/* Inflygning när en del syns. Utan JS eller med minska rörelse syns allt direkt. */
.js .tona { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.js .tona.syns { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .tona { opacity: 1; transform: none; transition: none; } }

/* Mer luft och lila inslag (Linus 2026-10-18, "lite mer premium spacing och
   lite mera lila"). Lila bär det man rör vid: punkter, fokus, val och
   fönstret. Mint står kvar för status. */
:root { --lila-ljus: #bdb2e6; --lila-glod: rgba(163, 151, 201, .22); }

.loften li::before { background: var(--lila); box-shadow: 0 0 10px var(--lila-glod); }
.loften.lodrat { gap: var(--s3); margin: var(--s5) 0 0; line-height: 1.6; }
.loften.lodrat li { align-items: flex-start; }
.loften.lodrat li::before { flex: none; margin-top: .55em; }

.delad-vanster .under.for-it { margin: var(--s8) 0 0; padding: var(--s1) 0 var(--s1) var(--s3); max-width: 40ch;
  font-size: 15px; line-height: 1.8; color: var(--text-mjuk); border-left: 2px solid var(--lila); }

.rubrikrad .nr { color: var(--lila-ljus); box-shadow: 0 0 0 1px rgba(163, 151, 201, .5) inset; }
.eyebrow { color: var(--lila-ljus); }

.fonster { position: relative; box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 120px rgba(163, 151, 201, .1); }
.fonster::before { content: ""; position: absolute; inset: -1px -1px auto; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--lila) 30%, var(--mint) 70%, transparent); }
form { gap: var(--s4); padding: var(--s6) var(--s5); }
.falt { gap: 12px; }
input:focus, select:focus, textarea:focus { border-color: var(--lila); box-shadow: 0 0 0 3px rgba(163, 151, 201, .16); }
.val label:has(input:checked) { border-color: var(--lila); background: rgba(163, 151, 201, .12); }
.knapp:hover { box-shadow: 0 0 32px rgba(163, 151, 201, .2); }
.fragor summary::after { color: var(--lila-ljus); }

@media (max-width: 960px) { .delad { gap: var(--s8); } .delad-vanster .under.for-it { margin-top: var(--s6); } }
@media (max-width: 600px) { form { gap: var(--s4); padding: var(--s4) var(--s3); } }

/* Lila nebulosor (Linus 2026-10-18, "mest svart bara med inslag av såna
   lila"). Tre svaga moln i violett och magenta ovanpå stjärnhimlen. Resten
   är svart. De driver långsamt, och står still med minska rörelse. */
.natt::before { content: ""; position: absolute; inset: -10%; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(44% 30% at 90% 10%, rgba(150, 70, 230, .34), transparent 70%),
    radial-gradient(36% 24% at 4% 56%, rgba(196, 60, 255, .2), transparent 70%),
    radial-gradient(48% 32% at 72% 98%, rgba(120, 60, 210, .26), transparent 72%);
  filter: blur(8px); animation: nebulosa 60s ease-in-out infinite alternate; }
@keyframes nebulosa { to { transform: translate3d(-2%, 1.5%, 0) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .natt::before { animation: none; } }
.paket { border-color: rgba(163, 151, 201, .18); }
.rubrikrad .linje { background: linear-gradient(90deg, rgba(163, 151, 201, .45), transparent); }
.paket li::before { background: var(--lila); }
.rubrikrad .nr.nr-pianola { color: var(--lila-ljus); box-shadow: 0 0 0 1px rgba(163, 151, 201, .5) inset, 0 0 14px var(--lila-glod); }

/* ===================================================================
   Struktur 2 (Linus 2026-10-18, "mer motion, mindre likt tidigare
   sajter"). En typografisk hjälte, en scen där granskningen spelas upp
   medan man scrollar, och principer som glider in. Inga numrerade
   avsnitt: bara stegen i scenen är en verklig ordning.
   Rörelsen följer scrollen med CSS-tidslinjer. Utan stöd, eller med
   minska rörelse, visas allt i färdigt läge.
   =================================================================== */
:root { --stamp: #c9b8ff; }

.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 var(--s3); font: 500 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--text-mjuk); }
.kicker::before { content: ""; width: 6px; height: 6px; background: var(--lila); box-shadow: 0 0 12px var(--lila-glod); }

/* Hjälten */
.hjalte { padding: var(--s16) 0 var(--s8); }
.hjalte .inre { display: block; }
.hjalte h1 { font: 700 clamp(44px, 8.4vw, 112px)/.98 var(--rubrik); letter-spacing: -.04em; margin: 0; max-width: 13ch; }
.hjalte-rad { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s8); align-items: end; margin-top: var(--s8); }
.hjalte .ingress { margin: 0; max-width: 34ch; font-size: clamp(17px, 1.6vw, 20px); }
.hjalte-handling { display: grid; gap: var(--s4); justify-items: start; }
.hjalte-handling .loften { margin: 0; }
.siffror { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin: var(--s12) 0 0; padding-top: var(--s4); border-top: 1px solid var(--linje); }
.siffror div { display: flex; flex-direction: column; gap: 8px; }
.siffror dt { order: 2; font: 600 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
.siffror dd { margin: 0; }
.siffror .siffra { order: 1; font: 700 clamp(30px, 3.4vw, 44px)/1 var(--rubrik); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.siffror .not { order: 3; font: 400 12px/1.55 var(--mono); color: var(--text-dov); max-width: 30ch; }
.pris-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s6); }
.pris-cta p { margin: 0; font: 400 13px/1.55 var(--mono); color: var(--text-dov); }
.granskade { margin: var(--s4) 0 0; font: 400 12px/1.55 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-dov); }
.granskade b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.siffror div:first-child .siffra { color: var(--lila-ljus); text-shadow: 0 0 24px var(--lila-glod); }
@media (max-width: 960px) {
  .hjalte { padding: var(--s12) 0 var(--s6); }
  .hjalte-rad { grid-template-columns: minmax(0, 1fr); gap: var(--s5); margin-top: var(--s6); }
  .siffror { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s4); margin-top: var(--s8); }
  .siffror dt { min-height: 2.8em; }
}

/* Rubriken ord för ord (rymd.js delar upp den). */
.ordvis .ord { display: inline-block; white-space: pre; }
.js .ordvis .ord { animation: ordIn .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 90ms + 120ms); }
@keyframes ordIn { from { opacity: 0; transform: translateY(.42em); filter: blur(10px); } }
.js .hjalte-rad, .js .siffror { animation: lyft .9s cubic-bezier(.2, .8, .2, 1) .75s both; }
.js .siffror { animation-delay: .95s; }
@keyframes lyft { from { opacity: 0; transform: translateY(14px); } }

/* Scenen */
.scen { padding-top: var(--s16); }
.scen-huvud { margin-bottom: var(--s8); }
.scen h2, .del h2 { font: 700 clamp(30px, 4vw, 52px)/1.06 var(--rubrik); letter-spacing: -.03em; margin: 0 0 var(--s2); max-width: 20ch; }
.scen .under { color: var(--text-mjuk); max-width: 52ch; margin: 0; font-size: 17px; }
.scen-yta { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s8); align-items: center; }
.scen-steg { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); counter-reset: steg; }
.scen-steg li { position: relative; padding-left: var(--s5); }
.scen-steg li::before { counter-increment: steg; content: counter(steg); position: absolute; left: 0; top: 2px; font: 600 12px/1 var(--mono); color: var(--lila-ljus); }
.scen-steg li::after { content: ""; position: absolute; left: 3px; top: 24px; bottom: calc(var(--s5) * -1 + 6px); width: 1px; background: linear-gradient(var(--lila), transparent); opacity: .5; }
.scen-steg li:last-child::after { content: none; }
.scen-steg .tid { font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-dov); }
.scen-steg h3 { font: 700 22px/1.25 var(--rubrik); letter-spacing: -.02em; margin: 6px 0 8px; }
.scen-steg p { margin: 0; color: var(--text-mjuk); max-width: 40ch; }

/* Akten: granskningen som ett dokument, inte ett terminalfönster. */
.akt { position: relative; padding: var(--s4); background: linear-gradient(160deg, rgba(22, 18, 34, .9), rgba(8, 8, 12, .92)); border: 1px solid rgba(163, 151, 201, .22); box-shadow: 0 40px 100px rgba(0, 0, 0, .55), 0 0 140px rgba(150, 70, 230, .12); }
.akt-topp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s2); align-items: center; padding-bottom: var(--s3); border-bottom: 1px solid var(--linje); }
.akt-topp img { width: 40px; height: 40px; display: block; }
.akt-etikett { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--text-dov); }
.akt-namn { margin: 6px 0 0; font: 600 20px/1 var(--mono); letter-spacing: -.04em; }
.akt-status { display: inline-flex; align-items: center; gap: 8px; font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-mjuk); }
.akt-status::before { content: ""; width: 6px; height: 6px; background: var(--lila-ljus); box-shadow: 0 0 10px var(--lila); }
.akt-rader { margin: 0; padding: var(--s3) 0; display: grid; gap: 10px; border-bottom: 1px dashed var(--linje); }
.akt-rader div { display: flex; justify-content: space-between; gap: var(--s2); font-size: 14px; min-width: 0; }
.akt-rader dt { color: var(--text-dov); }
.akt-rader dd { margin: 0; color: var(--text); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.akt-rader dd.varn { color: var(--orange); }
.akt-skal { list-style: none; margin: 0; padding: var(--s3) 0 0; display: grid; gap: 10px; color: var(--text-mjuk); font-size: 14px; }
.akt-skal li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; }
.akt-skal li::before { content: "›"; color: var(--lila); }
.akt .matare { margin: var(--s3) 0 0; }
.akt .matare i::after { transform-origin: left; }
.akt-rad { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); margin: var(--s3) 0 0; padding: var(--s3) 0 0; border-top: 1px solid var(--linje); }
.akt-rad span { font: 500 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-dov); }
.akt-rad strong { display: inline-block; font: 600 clamp(20px, 2.2vw, 26px)/1 var(--mono); letter-spacing: -.04em; color: var(--stamp); padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 0 30px rgba(255, 255, 255, .08) inset, 0 0 24px rgba(255, 255, 255, .08); }
.akt .ruta-not { padding: var(--s2) 0 0; }
@media (max-width: 960px) { .scen-yta { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } .scen { padding-top: var(--s12); } }
@media (max-width: 600px) { .akt { padding: var(--s3) var(--s2); } }

/* Principerna: stor rubrik till vänster, förklaringen till höger. */
.del-huvud { margin-bottom: var(--s6); }
.principer div { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: baseline; padding: var(--s4) 0; }
.principer dt { font: 600 clamp(20px, 2.4vw, 30px)/1.15 var(--mono); letter-spacing: -.045em; }
.principer dd { color: var(--text-mjuk); }
#i-er-miljo .principer div { grid-template-columns: minmax(0, 1fr); gap: var(--s1); padding: var(--s3) 0; }
#i-er-miljo .principer dt { font-size: 18px; }
@media (max-width: 760px) { .principer div { grid-template-columns: minmax(0, 1fr); gap: var(--s1); } }

/* Formuläret: ett rent dokument utan fönsterlist. */
.fonster::before { height: 2px; }

/* Rörelsen som följer scrollen. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Linus 2026-10-19: scenen låste skärmen i tre skärmhöjder, och besökare
       slutade scrolla för att de trodde att sidan var slut. Nu scrollar den
       som resten av sidan: varje steg och rad glider in när den kommer i bild,
       mätarna fylls och rådet stämplas när de syns. */
    .scen-steg li, .akt-rader > div, .akt-skal li { animation: radIn linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    .akt .matare i::after { animation: fyll linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    .akt-rad strong { animation: stampel linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    .akt-status { animation: tand linear both; animation-timeline: view(); animation-range: entry 30% cover 50%; }
    .principer > div { animation: glid linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
  }
}
@keyframes stegLjus { 0% { opacity: .28; } 25%, 75% { opacity: 1; } 100% { opacity: .45; } }
@keyframes stegSist { from { opacity: .28; } to { opacity: 1; } }
@keyframes radIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fyll { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Stämpeln: kommer uppifrån, slår i, studsar lite och lämnar en ring. */
@keyframes stampel {
  0% { opacity: 0; transform: scale(1.9) rotate(-11deg); filter: blur(8px); }
  55% { opacity: 1; transform: scale(.9) rotate(-1deg); filter: none; box-shadow: 0 0 0 0 rgba(255, 255, 255, .6), 0 4px 10px rgba(255, 255, 255, .25); }
  72% { transform: scale(1.05) rotate(-2.5deg); }
  100% { opacity: 1; transform: rotate(-2deg); box-shadow: 0 0 18px rgba(255, 255, 255, .18), 0 0 14px rgba(255, 255, 255, .08) inset; }
}
@keyframes tand { from { opacity: .2; } to { opacity: 1; } }
@keyframes glid { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .ordvis .ord, .js .hjalte-rad, .js .siffror { animation: none; } }
.scen { overflow-x: clip; }
@media (max-width: 960px) { @keyframes stampelLiten { 0% { opacity: 0; transform: scale(1.4) rotate(-8deg); filter: blur(4px); } 60% { opacity: 1; transform: scale(.94) rotate(-1deg); filter: none; } 100% { opacity: 1; transform: rotate(-2deg); } } }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) and (max-width: 960px) { .akt-rad strong { animation-name: stampelLiten; } } }

/* Neonlila (Linus 2026-10-18, "mer neon så det bryter av mot det annars
   rätt monokroma"). Samma tokens, starkare värden. Neon bärs av få ställen:
   ordet i rubriken, punkterna, stegens nummer, stämpeln och fokus. Resten
   är svart, vitt och grått. */
:root {
  --lila: #b45cff;
  --lila-ljus: #d29bff;
  --lila-glod: rgba(180, 92, 255, .55);
  --stamp: #dcaaff;
}
.hjalte h1 em { background: none; color: var(--lila-ljus); -webkit-text-fill-color: currentColor;
  text-shadow: 0 0 18px rgba(180, 92, 255, .75), 0 0 48px rgba(180, 92, 255, .4); }
.kicker::before, .loften li::before { background: var(--lila); box-shadow: 0 0 8px var(--lila), 0 0 18px var(--lila-glod); }
.scen-steg li::before { color: var(--lila-ljus); text-shadow: 0 0 10px var(--lila-glod); }
.scen-steg li::after { background: linear-gradient(var(--lila), transparent); opacity: .8; }
.akt { border-color: rgba(180, 92, 255, .35); box-shadow: 0 40px 100px rgba(0, 0, 0, .55), 0 0 120px rgba(180, 92, 255, .14); }
/* Rådet som en stämpel (Linus 2026-10-18): en lila ram med vit text och
   ett grönt "Ja", genomskinlig inuti. Den står lite snett, som stansad. */
.akt-rad strong { color: #fff; background: transparent; border: 2px solid var(--lila);
  box-shadow: 0 0 18px rgba(180, 92, 255, .45), 0 0 14px rgba(180, 92, 255, .2) inset;
  text-shadow: none; transform: rotate(-2deg); }
.akt-rad strong em { font-style: normal; color: #2fe07f; text-shadow: 0 0 12px rgba(47, 224, 127, .45); }
/* Utan scrolltidslinjer (äldre Safari) stansas stämpeln när den kommer i bild,
   via skriptet efter rutan i index.html. */
.akt-rad strong.vantar { opacity: 0; }
.akt-rad strong.stansa { animation: stampel .75s cubic-bezier(.2, .8, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { .akt-rad strong.vantar { opacity: 1; } .akt-rad strong.stansa { animation: none; } }
.siffror div:first-child .siffra { color: var(--lila-ljus); text-shadow: 0 0 22px var(--lila-glod); }
input:focus, select:focus, textarea:focus { border-color: var(--lila); box-shadow: 0 0 0 3px rgba(180, 92, 255, .22), 0 0 18px rgba(180, 92, 255, .25); }
.knapp:hover { box-shadow: 0 0 28px rgba(180, 92, 255, .35); }
.natt::before {
  background:
    radial-gradient(44% 30% at 90% 10%, rgba(160, 60, 255, .32), transparent 70%),
    radial-gradient(36% 24% at 4% 56%, rgba(200, 70, 255, .2), transparent 70%),
    radial-gradient(48% 32% at 72% 98%, rgba(130, 50, 230, .26), transparent 72%);
}

/* Ikoner i stället för kantiga prickar (Linus 2026-10-18, "roligare
   symboler, typ favicons"). Ritade som masker, så att färg och sken styrs
   här. Klocka, prislapp och paket för löftena, en gnista som stjärnorna för
   etiketter och bandet, och en bock i listorna. */
:root {
  --ikon-klocka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --ikon-pris: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5' fill='%23000'/%3E%3C/svg%3E");
  --ikon-gava: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7M7.5 8a2.5 2.5 0 0 1 0-5C10 3 12 8 12 8s2-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E");
  --ikon-gnista: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c.6 5.6 4.9 9.9 10.5 10.5-5.6.6-9.9 4.9-10.5 10.5C11.4 16.9 7.1 12.6 1.5 12 7.1 11.4 11.4 7.1 12 1.5Z' fill='%23000'/%3E%3C/svg%3E");
  --ikon-bock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.loften li::before,
.kicker::before,
.band li::before {
  -webkit-mask: var(--ikon, var(--ikon-gnista)) center / contain no-repeat;
  mask: var(--ikon, var(--ikon-gnista)) center / contain no-repeat;
  box-shadow: none;
  flex: none;
}
.loften { gap: var(--s2) var(--s5); margin-top: var(--s6); }
.loften li { gap: 10px; }
.loften li::before { width: 17px; height: 17px; background: var(--lila-ljus); filter: drop-shadow(0 0 6px var(--lila-glod)); }
.loften li:nth-child(1) { --ikon: var(--ikon-klocka); }
.loften li:nth-child(2) { --ikon: var(--ikon-pris); }
.loften li:nth-child(3) { --ikon: var(--ikon-gava); }
.loften.lodrat li { --ikon: var(--ikon-bock); }
.loften.lodrat li::before { width: 15px; height: 15px; margin-top: .3em; }
.kicker::before { width: 12px; height: 12px; background: var(--lila-ljus); filter: drop-shadow(0 0 6px var(--lila-glod)); }
.band li::before { width: 10px; height: 10px; }
@media (max-width: 600px) { .loften { gap: var(--s3) var(--s4); } }
.paket ul { gap: 12px; }
.paket li { padding-left: 28px; }
.paket li::before { top: .3em; width: 16px; height: 16px; background: var(--lila-ljus);
  -webkit-mask: var(--ikon-bock) center / contain no-repeat; mask: var(--ikon-bock) center / contain no-repeat; }

/* Villkor och integritetspolicy: lugn läsyta, en spalt. */
.juridik .inre { max-width: 760px; padding-top: var(--s12); }
.juridik .kicker a { color: inherit; text-decoration: none; }
.juridik h1 { font: 700 clamp(32px, 4.4vw, 52px)/1.08 var(--rubrik); letter-spacing: -.03em; margin: 0; }
.juridik .ingress { max-width: 56ch; margin-top: var(--s3); }
.juridik h2 { font: 700 20px/1.3 var(--rubrik); letter-spacing: -.01em; margin: var(--s6) 0 var(--s2); padding-top: var(--s3); border-top: 1px solid var(--linje); }
.juridik p, .juridik li { color: var(--text-mjuk); max-width: 64ch; line-height: 1.65; }
.juridik p { margin: 0 0 var(--s2); }
.juridik ul { margin: 0 0 var(--s2); padding-left: 20px; }
.juridik li { margin-bottom: 6px; }
.juridik li::marker { color: var(--lila); }
.juridik a { color: var(--text); }
.juridik-datum { margin-top: var(--s8) !important; font: 500 12px var(--mono); letter-spacing: .08em; color: var(--text-dov) !important; }
.villkorsrad { margin: 0 0 var(--s2); font-size: 13px; color: var(--text-dov); }
.villkorsrad a { color: var(--text-mjuk); }

/* Filmen: en reva som öppnas, sedan växer filmen fram ur skärmen i 3D. */
.film-del { padding: var(--s16) 0 0; }
.film-huvud { max-width: 760px; margin-bottom: var(--s6); }
.film-huvud h2 { font: 700 clamp(28px, 3.4vw, 44px)/1.12 var(--rubrik); letter-spacing: -.025em; margin: 0 0 var(--s2); }
.film-huvud .under { color: var(--text-mjuk); margin: 0; font-size: 17px; max-width: 56ch; }
.film-scen { position: relative; perspective: 1600px; }
.film-reva { position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: scaleX(0); opacity: 0;
  background: linear-gradient(90deg, transparent, var(--lila) 15%, #fff 50%, var(--lila) 85%, transparent);
  box-shadow: 0 0 24px var(--lila), 0 0 60px rgba(180, 92, 255, .6); pointer-events: none; z-index: 2; }
.film-ram { position: relative; --rx: 0deg; --ry: 0deg; transform-style: preserve-3d;
  transform: rotateX(calc(26deg + var(--rx))) rotateY(var(--ry)) scale(.86) translateY(40px);
  clip-path: inset(50% 0 50% 0); opacity: .2;
  box-shadow: 0 60px 140px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(210, 155, 255, .25), 0 0 80px rgba(180, 92, 255, .25); }
.film-scen.oppen .film-reva { animation: reva 1.9s cubic-bezier(.2, .8, .2, 1) forwards; }
.film-scen.oppen .film-ram { transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(1) translateY(0); clip-path: inset(0 0 0 0); opacity: 1;
  transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1) .55s, opacity .8s ease .55s, transform 1.8s cubic-bezier(.2, .8, .2, 1) .6s; }
.film-scen.klar .film-ram { transition: transform .4s ease-out; }
@keyframes reva { 0% { transform: scaleX(0); opacity: 0; } 30% { transform: scaleX(1); opacity: 1; } 60% { opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.film-spela, .film-ram video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; background: #000; cursor: pointer; position: relative; }
.film-spela img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Knappen nere till vänster, så att den inte täcker posterns text. */
.film-knapp { position: absolute; left: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px 14px 18px; color: #fff;
  background: rgba(180, 92, 255, .92); box-shadow: 0 0 0 8px rgba(180, 92, 255, .18), 0 0 50px rgba(180, 92, 255, .6); transition: transform .3s; transform-origin: left bottom; }
.film-knapp-text { font: 600 13px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.film-spela:hover .film-knapp, .film-spela:focus-visible .film-knapp { transform: scale(1.08); }
.film-spela:focus-visible { outline: 2px solid var(--lila-ljus); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .film-ram, .film-scen.oppen .film-ram { transform: none; clip-path: none; opacity: 1; transition: none; }
  .film-reva { display: none; }
}
html:not(.js) .film-ram { transform: none; clip-path: none; opacity: 1; }
@media (max-width: 760px) { .film-del { padding-top: var(--s12); } .film-knapp { left: 12px; bottom: 12px; padding: 10px 14px 10px 12px; } .film-knapp-text { font-size: 11px; } }

/* Priserna fasas in i takt med scrollen (Linus 2026-10-19: det kändes som att
   sidan fastnade). Varje rad glider upp, priset och listan en aning efter.
   Utan scrolltidslinjer sköter bestall.js samma sak med .tona. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js #pris .tona { opacity: 1; transform: none; transition: none; }
    #pris .del-huvud, #pris .paket { animation: prisIn linear both; animation-timeline: view(); animation-range: entry 0% cover 32%; }
    #pris .paket li { animation: prisRad linear both; animation-timeline: view(); animation-range: entry 15% cover 42%; }
  }
}
/* Bara toning och rörelse: oskärpa och förminskning lämnade texten grumlig
   när kortet stannade mitt i scrollningen (Linus 2026-10-19). */
@keyframes prisIn { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }
@keyframes prisRad { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
/* Beställningen: rubriken följer med i stället för att sitta fast bredvid det långa formuläret. */
#granska .delad-vanster { position: static; }
/* Sidfotens länkar: grå versaler, lila när man pekar (Linus 2026-10-19). */
.fot a { color: var(--text-mjuk); text-decoration: none; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; transition: color .2s; }
.fot a:hover, .fot a:focus-visible { color: var(--lila); }

/* Kvalitetspasset 2026-10-19: mobilmeny, loggan på smala skärmar och sidfoten. */
.topp .mobilmeny { display: none; }
@media (max-width: 820px) {
  .topp .mobilmeny { display: block; border-top: 1px solid var(--linje); }
  .mobilmeny .inre { display: flex; gap: var(--s3); overflow-x: auto; scrollbar-width: none; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
  .mobilmeny .inre::-webkit-scrollbar { display: none; }
  .mobilmeny a { flex: none; display: inline-flex; align-items: center; min-height: 44px; color: var(--text-mjuk); text-decoration: none; }
  .mobilmeny a:hover, .mobilmeny a:focus-visible { color: var(--text); }
}
@media (max-width: 400px) { .topp .ordbild .av { display: none; } .topp .namn { letter-spacing: .14em; } }
@media (max-width: 600px) {
  .fot p { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .fot a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 400px) {
  .topp .namn { font-size: 14px; letter-spacing: .1em; }
  .topp .logo img { width: 24px; height: 24px; }
  .topp nav { gap: 6px; }
  .topp .knapp { padding: 0 10px; font-size: 10px; letter-spacing: .04em; }
  .topp nav .sprakval-val { min-width: 34px; padding: 0 8px; }
}
.mobilmeny .inre { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }

/* Introt har stannat: en mörk ruta över filmen med "Se hela filmen". */
.film-ram { position: relative; }
.film-fortsatt { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s3); padding: var(--s3);
  text-align: center; background: rgba(4, 4, 10, .78); backdrop-filter: blur(2px); }
.film-fortsatt p { margin: 0; max-width: 40ch; color: var(--text); font-size: 17px; }
/* Stämpeln i exemplet: vit text och vit ram, så att lila aldrig står bredvid grönt. */
.akt-rad strong { color: var(--text); }

/* Lanseringsgenomgången 2026-10-19: lila är den enda accenten, grönt bara
   i mätare och i husets mätarfärger. Inga mintrester från PIANOLA. */
:root { --accent: var(--lila-ljus); --mint: var(--lila-ljus); --gul: #f2c94c; --orange: #ff9a3c; --risk: #ff5a5a; }
.rubrikrad .nr { box-shadow: 0 0 0 1px rgba(180, 92, 255, .4) inset; }
.panel-svar em { text-shadow: 0 0 18px rgba(180, 92, 255, .45); }
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(180, 92, 255, .15); }
.val label:has(input:checked) { background: rgba(180, 92, 255, .1); }
.akt-rad strong { border-color: var(--text); box-shadow: none; }
.akt-rad strong em { color: #3ddc84; text-shadow: none; }
.fonster::before { background: linear-gradient(90deg, transparent, var(--lila) 50%, transparent); }
.band li::before, .band li:nth-child(3n+2)::before, .band li:nth-child(3n)::before { background: var(--lila-ljus); }
.matare div + div i::after { background: #3ddc84; }
/* Ankarlänkarna landar under den fasta menyn. */
html { scroll-padding-top: 80px; }
@media (max-width: 820px) { html { scroll-padding-top: 146px; } }
/* Felbeskedet vid fältet. */
.falt-fel { margin: 8px 0 0; font: 400 13px/1.5 var(--mono); color: #ff5a5a; }

/* Filmen i helskärm: hela ramen, så att rutan "Se hela filmen" följer med. */
.film-scen .film-ram:fullscreen { opacity: 1; display: grid; place-items: center; width: 100vw; height: 100vh; background: #000; transform: none; clip-path: none; }
.film-scen .film-ram:fullscreen video { width: 100%; height: 100%; max-height: 100vh; object-fit: contain; }
.film-helskarm { position: absolute; top: 12px; right: 12px; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(4, 4, 10, .6); color: #fff; cursor: pointer; opacity: .7; transition: opacity .15s; }
.film-helskarm:hover, .film-helskarm:focus-visible { opacity: 1; }
.film-helskarm::before { content: ""; width: 16px; height: 16px;
  background: linear-gradient(currentColor, currentColor) left top / 6px 2px, linear-gradient(currentColor, currentColor) left top / 2px 6px,
    linear-gradient(currentColor, currentColor) right top / 6px 2px, linear-gradient(currentColor, currentColor) right top / 2px 6px,
    linear-gradient(currentColor, currentColor) left bottom / 6px 2px, linear-gradient(currentColor, currentColor) left bottom / 2px 6px,
    linear-gradient(currentColor, currentColor) right bottom / 6px 2px, linear-gradient(currentColor, currentColor) right bottom / 2px 6px;
  background-repeat: no-repeat; }
.film-scen .film-ram:fullscreen .film-fortsatt { position: absolute; inset: 0; }