/* Myravia, myravia.com. Alla värden kommer från myravia-handoff/design/design-system/tokens.json.
   Webben lägger till, medvetet och bara här:
   - en större avståndsskala (space-10 och uppåt) och flytande rubrikstorlekar (.display, .title, .lead);
   - webbtextstorlekar 14, 15 och 22 px (etiketten över rubriker, bildtexter, menyn, sidfoten, den lilla
     knappen och undersidornas mellanrubriker);
   - telefonramens radie 36 px, de stora visningskortens 28 px och den lilla knappens radie 12 px, som följer tokens regel "radie efter
     storlek" för mått som appen inte har;
   - band-tokens för det mörka bandet bakom bilen, som i ljust tema använder mörka temats ink-värden;
   - en tredje färg, signal (solnedgångsorange), för det som händer mellan adapter och app: Bluetooth och
     skanning (Andreas 9 nov 2026). Den ligger mellan stop (rött) och warn
     (bärnsten) i kulör och används aldrig för besked, så att orange aldrig läses som Boka verkstad. Kontrast
     mot surface och surface-sunken minst 4,6:1 i ljust och 6,4:1 i mörkt.
   - night, köpkontrollens kort: bandets mörka i ljust tema och ett mörkare svart i mörkt tema, så att kortet
     skiljer sig från sidan i båda;
   - prickfältet i avslutet (assets/img/prickfalt.svg): markens prickar som växer mot en mittpunkt, som en sol.
   Appens typstilar används oförändrade i utsnitten ur appen (.app-*). */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/SchibstedGrotesk-Variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ground: #f3f5f7; --ground-dot: #d3dbe3; --surface: #ffffff; --surface-sunken: #f1f4f7;
  --line: #eef1f4; --line-control: #d8dfe6; --line-strong: #7f8a97;
  --ink: #14191f; --ink-body: #3f4955; --ink-muted: #586270; --ink-subtle: #8a94a1;
  --accent: #0a6fb8; --accent-soft: #e7f1fa; --action: #0a6fb8; --on-action: #ffffff; --focus: #0a6fb8;
  --ok: #127a55; --ok-soft: #e2f4ec; --ok-ink: #0b4d36;
  --warn: #8f5600; --warn-soft: #fff1d9; --warn-ink: #5e3b00; --warn-mark: #c27a00;
  --stop: #b42318; --stop-soft: #fdedeb; --stop-ink: #7a1a12;
  --ring-track: #d9e1e8; --dot-car: #1c8fd6; --tyre: #24303c;
  --inverse: #14191f; --on-inverse: #ffffff; --on-inverse-muted: #b4bcc6;
  --band: #15171b; --band-dot: #23272e; --band-ink: #f4f6f8; --band-ink-muted: #a0a8b4; --band-signal: #ff8a4c; --band-line: #2a2f37;
  --signal: #c2410c; --signal-soft: #fdeee6; --night: #15171b;
  --radius-panel: 28px;
  /* Fint brus över glöden i köpkontrollens kort, så att 8-bitarssteg i övergången inte syns som ringar (dithering) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  --shadow-control: 0 0 0 1px rgba(20,25,31,0.06), 0 1px 1px rgba(20,25,31,0.04), 0 2px 4px -1px rgba(20,25,31,0.06), 0 6px 12px -6px rgba(20,25,31,0.10);
  --shadow-card: 0 0 0 1px rgba(20,25,31,0.04), 0 1px 2px rgba(20,25,31,0.04), 0 4px 8px -2px rgba(20,25,31,0.05), 0 12px 24px -8px rgba(20,25,31,0.08), 0 28px 48px -20px rgba(20,25,31,0.12);
  --shadow-float: 0 0 0 1px rgba(20,25,31,0.05), 0 2px 4px rgba(20,25,31,0.04), 0 8px 16px -4px rgba(20,25,31,0.08), 0 20px 40px -10px rgba(20,25,31,0.14), 0 40px 72px -28px rgba(20,25,31,0.20);
  --shadow-action: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 2px rgba(10,111,184,0.30), 0 4px 10px -2px rgba(10,111,184,0.28), 0 14px 28px -10px rgba(10,111,184,0.45);
  --shadow-action-hover: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 3px rgba(10,111,184,0.30), 0 6px 14px -2px rgba(10,111,184,0.30), 0 18px 32px -10px rgba(10,111,184,0.48);
  --shadow-control-hover: 0 0 0 1px rgba(20,25,31,0.07), 0 2px 2px rgba(20,25,31,0.04), 0 4px 8px -2px rgba(20,25,31,0.07), 0 10px 18px -8px rgba(20,25,31,0.12);

  --font-sans: "Schibsted Grotesk", -apple-system, system-ui, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px;
  --radius-sm: 8px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px;
  --size-hit: 44px; --size-button: 52px; --size-row: 52px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --press: 160ms;
  --reveal: 480ms;

  --content: 1120px;
  --gutter: var(--space-5);
  --section: var(--space-16);
}

@media (min-width: 720px) { :root { --gutter: var(--space-8); --section: var(--space-24); } }
/* På datorn får varje sektion mer luft över och under: 120 px upp till cirka 1330 px, sedan växer den med fönstret
   till 173 px vid 1920. Då får en sektion i taget skärmen och nästa tränger sig inte på nedifrån. Samma luft gäller
   under avslutet och under undersidornas text */
@media (min-width: 1000px) { :root { --section: clamp(120px, 9vw, 176px); } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #15171b; --ground-dot: #23272e; --surface: #1e2126; --surface-sunken: #23262c;
    --line: #262a31; --line-control: #343a43; --line-strong: #7a8492;
    --ink: #f4f6f8; --ink-body: #b9c0ca; --ink-muted: #a0a8b4; --ink-subtle: #6b7380;
    --accent: #3d9bff; --accent-soft: #1a2b40; --action: #1f6fd1; --on-action: #ffffff; --focus: #3d9bff;
    --ok: #4ed39a; --ok-soft: #16302a; --ok-ink: #cdeedf;
    --warn: #f2b544; --warn-soft: #2b2416; --warn-ink: #e8dcc4; --warn-mark: #f2b544;
    --stop: #ff7a6e; --stop-soft: #3a1d1b; --stop-ink: #f3d2ce;
    --ring-track: #343a43; --dot-car: #3d9bff; --tyre: #5a6370;
    --inverse: #f4f6f8; --on-inverse: #14191f; --on-inverse-muted: #4a5562;
    --band: #1e2126; --band-dot: #262a31; --band-line: #30353d;
    --signal: #ff8a4c; --signal-soft: #33221a; --night: #0c0e11;
    --shadow-control: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(255,255,255,0.04), 0 2px 6px -2px rgba(0,0,0,0.5);
    --shadow-control-hover: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(255,255,255,0.06), 0 4px 10px -2px rgba(0,0,0,0.55);
    --shadow-card: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 1px rgba(255,255,255,0.05), 0 8px 24px -10px rgba(0,0,0,0.55), 0 24px 48px -24px rgba(0,0,0,0.5);
    --shadow-float: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 0 1px rgba(255,255,255,0.06), 0 16px 40px -12px rgba(0,0,0,0.7), 0 36px 72px -28px rgba(0,0,0,0.6);
    --shadow-action: inset 0 1px 0 rgba(255,255,255,0.16), 0 1px 2px rgba(0,0,0,0.4), 0 10px 24px -10px rgba(31,111,209,0.55);
    --shadow-action-hover: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 3px rgba(0,0,0,0.4), 0 14px 28px -10px rgba(31,111,209,0.65);
  }
}

/* Grund */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px; line-height: 1.6;
  color: var(--ink);
  background-color: var(--ground);
  background-image: radial-gradient(var(--ground-dot) 1px, transparent 1.2px);
  background-size: var(--space-4) var(--space-4);
  background-position: 4px 4px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.14em; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: var(--gutter); top: -100px; background: var(--surface); padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); box-shadow: var(--shadow-control); z-index: 100; }
.skip:focus { top: var(--space-2); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
::selection { background: color-mix(in srgb, var(--accent) 26%, transparent); }

/* Typografi på webben */
.eyebrow { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); letter-spacing: 0; }
.display { font-size: clamp(36px, 2.1rem + 2.2vw, 60px); line-height: 1.04; font-weight: 700; letter-spacing: -0.04em; text-wrap: balance; }
/* På datorn står frågan och svaret på var sin rad, så att de inte krockar mitt i en rad */
@media (min-width: 880px) { .display span { display: block; text-wrap: balance; } }
.title { font-size: clamp(28px, 1.5rem + 1.3vw, 42px); line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.subhead { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
.lead { font-size: clamp(18px, 1rem + 0.4vw, 20px); line-height: 1.55; color: var(--ink-body); text-wrap: pretty; }
.body { font-size: 17px; line-height: 1.6; color: var(--ink-body); text-wrap: pretty; }
.caption { font-size: 14px; line-height: 20px; color: var(--ink-muted); }

.wrap { width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }
.section { padding-block: var(--section); scroll-margin-top: 72px; }
/* Sidans slut hålls ihop: frågorna och avslutet står närmare varandra och närmare det som kommer före än
   sektionerna i övrigt, eftersom de är korta och centrerade och annars drunknar i luft. Från 720 px har frågorna
   64 px över och under sig, och avslutet 64 px över sig: 128 px mellan frågorna och avslutet, och sektionens
   vanliga luft plus 64 px mellan sektionen före och frågorna. */
@media (min-width: 720px) { .section--end { padding-block: var(--space-16); } }
.section-head { max-width: 640px; display: grid; gap: var(--space-3); margin-bottom: var(--space-10); }
@media (min-width: 1000px) { .section-head { margin-bottom: var(--space-12); } }

/* Knappar */
.btn {
  height: var(--size-button); padding: 0 var(--space-6); border: 0; border-radius: var(--radius-lg);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; cursor: pointer;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: transform var(--press) var(--ease-out), box-shadow var(--press) var(--ease-out), background-color var(--press) var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--action); color: var(--on-action); box-shadow: var(--shadow-action); }
.btn--secondary { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-control); }
.btn--small { height: var(--size-hit); padding: 0 var(--space-4); font-size: 15px; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { box-shadow: var(--shadow-action-hover); transform: translateY(-1px); }
  .btn--secondary:hover { box-shadow: var(--shadow-control-hover); transform: translateY(-1px); }
  .btn:hover:active { transform: scale(0.97); }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: box-shadow var(--press) var(--ease-out); } .btn:active, .btn:hover, .btn:hover:active { transform: none; } }

/* Sidhuvud */
.header { position: sticky; top: 0; z-index: 20; backdrop-filter: saturate(1.2) blur(12px); -webkit-backdrop-filter: saturate(1.2) blur(12px); background: color-mix(in srgb, var(--ground) 82%, transparent); border-bottom: 1px solid transparent; transition: border-color 200ms var(--ease-out); }
.header.is-scrolled { border-bottom-color: var(--line); }
.header .wrap { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.brand { display: inline-flex; align-items: center; gap: 9px; min-height: var(--size-hit); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 22px; letter-spacing: -0.035em; line-height: 1; }
.brand svg { width: 26px; height: 26px; color: var(--accent); }
.nav { display: none; gap: var(--space-6); }
.nav a { color: var(--ink-muted); text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; padding: var(--space-2) 0; transition: color var(--press) var(--ease-out); }
.nav a:hover { color: var(--ink); }
@media (min-width: 880px) { .nav { display: flex; } }
.header .btn { flex: none; }

/* Hero */
/* Avståndet ned till faktabandet är kortare än mellan sektioner: bandet hör till heron. */
.hero { padding-block: var(--space-10) var(--space-12); }
@media (min-width: 720px) { .hero { padding-block: var(--space-16) var(--space-16); } }
.hero .wrap { display: grid; gap: var(--space-12); align-items: center; }
@media (min-width: 880px) { .hero .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-16); } }
/* Texten står i två grupper: statusraden och rubriken överst, ingressen, knapparna och bildtexten nederst. I två
   kolumner (från 880 px) är textkolumnen lika hög som telefonen (620 px), så att den övre gruppen börjar vid
   telefonens överkant och den nedre slutar vid dess underkant. Höjden är ett golv: med dagens text är luckan
   mellan grupperna 55 px vid 880 px och drygt 100 px från 1000 px. Blir texten högre än telefonen
   (fler knappar, längre bildtext) växer kolumnen nedåt och underkanterna möts inte längre. */
.hero-copy { display: grid; gap: var(--space-6); max-width: 560px; }
.hero-top, .hero-bottom { display: grid; gap: var(--space-6); }
@media (min-width: 880px) { .hero .wrap { align-items: start; } .hero-copy { min-height: 620px; align-content: space-between; } }
.hero-copy .display { margin-top: var(--space-1); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 479px) { .hero-actions .btn { flex: 1 1 100%; } }
.hero-copy .caption { margin-top: calc(-1 * var(--space-2)); }
.hero-visual { position: relative; display: flex; justify-content: center; }
@media (min-width: 880px) { .hero-visual { justify-content: flex-end; } }

/* Prickfältet: avslutets dekor är markens prickar som växer mot en mittpunkt, som en sol. Masken (en SVG som
   ritas vid bygget, 896 px, rutnät 16 px) ger prickarnas storlek och bakgrunden deras färg, så att fältet följer
   temat. site.js flyttar fältet högst 8 px (--dot-x, --dot-y) så att dess rutnät ligger exakt på markens; utan
   JavaScript ligger det bara nära. */
.dotfield { position: absolute; z-index: -1; pointer-events: none; width: 896px; height: 896px; translate: var(--dot-x, 0px) var(--dot-y, 0px); -webkit-mask: url("../img/prickfalt.svg") center / 896px 896px no-repeat; mask: url("../img/prickfalt.svg") center / 896px 896px no-repeat; }

/* Telefonram: 390 pt bred som appens skärmar, aldrig omskalad */
.phone {
  width: min(100%, 390px); background: var(--ground); border-radius: 36px; box-shadow: var(--shadow-float);
  padding: var(--space-5); overflow: hidden; position: relative; color: var(--ink);
  background-image: radial-gradient(var(--ground-dot) 1px, transparent 1.2px); background-size: var(--space-4) var(--space-4); background-position: 4px 4px;
}
.phone--cut { border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 0; }
.phone--cut::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(to bottom, rgba(243,245,247,0) 0%, rgba(243,245,247,0.12) 12%, rgba(243,245,247,0.38) 26%, rgba(243,245,247,0.68) 40%, rgba(243,245,247,0.9) 54%, var(--ground) 68%); pointer-events: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .phone--cut::after { background: linear-gradient(to bottom, rgba(21,23,27,0) 0%, rgba(21,23,27,0.12) 12%, rgba(21,23,27,0.38) 26%, rgba(21,23,27,0.68) 40%, rgba(21,23,27,0.9) 54%, var(--ground) 68%); } }
.phone > * + * { margin-top: var(--space-3); }

/* Appens typstilar, oförändrade från tokens.json */
.app-display { font-size: 32px; line-height: 34px; font-weight: 700; letter-spacing: -0.04em; }
.app-title { font-size: 27px; line-height: 31px; font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; }
.app-headline { font-size: 20px; line-height: 25px; font-weight: 700; letter-spacing: -0.02em; }
.app-subhead { font-size: 18px; line-height: 23px; font-weight: 600; letter-spacing: -0.015em; }
.app-section { font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: -0.015em; }
.app-label { font-size: 16px; line-height: 21px; font-weight: 600; letter-spacing: -0.01em; }
.app-body { font-size: 15px; line-height: 21px; font-weight: 400; }
.app-caption { font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ink-muted); }
.app-score { font-size: 36px; line-height: 38px; font-weight: 700; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }

/* Appens komponenter i utsnitten */
.code { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.02em; height: 26px; padding: 0 9px; border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink); display: inline-flex; align-items: center; }
.pill { height: 26px; padding: 0 10px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 4px; background: currentColor; }
.pill--ok { background: var(--ok-soft); color: var(--ok); }
.pill--warn { background: var(--warn-soft); color: var(--warn); }
.verdict { border-radius: var(--radius-xl); padding: var(--space-4); display: flex; align-items: flex-start; gap: var(--space-3); }
.verdict--warn { background: var(--warn-soft); }
.verdict--warn .verdict-body { color: var(--warn-ink); }
.verdict-icon { width: 36px; height: 36px; border-radius: 18px; background: var(--surface); display: grid; place-items: center; flex: none; color: var(--warn); }
.verdict-icon svg { width: 20px; height: 20px; }
.verdict-text { display: grid; gap: 3px; min-width: 0; }
.card { background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: var(--space-4); display: grid; gap: var(--space-2); }
.list { background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: 4px 0; }
/* Raderna har luft över och under, så att text på två rader aldrig rör avdelaren */
.row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--size-row); padding: var(--space-2) 14px; }
.row + .row { border-top: 1px solid var(--line); }
.row--sub { min-height: 62px; }
.row-icon { width: 32px; height: 32px; border-radius: var(--radius-md); background: var(--surface-sunken); display: grid; place-items: center; flex: none; }
.row-icon svg { width: 18px; height: 18px; }
.row-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row-sub { font-size: 13px; line-height: 17px; color: var(--ink-muted); text-wrap: pretty; }
.row-value { font-size: 15px; font-weight: 600; white-space: nowrap; font-variant-numeric: normal; }
.row-value--ok { color: var(--ok); }
.row-value--warn { color: var(--warn); }
.row-value--accent { color: var(--accent); }
.split { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.inverse { background: var(--inverse); color: var(--on-inverse); border-radius: var(--radius-xl); padding: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.inverse-muted { color: var(--on-inverse-muted); font-size: 13px; line-height: 18px; }
.inverse .amount { font-size: 26px; line-height: 30px; font-weight: 700; letter-spacing: -0.04em; white-space: nowrap; }
.band { background: var(--band); color: var(--band-ink); padding: var(--space-4) var(--space-4) 0; margin-inline: calc(-1 * var(--space-5)); margin-top: calc(-1 * var(--space-5)); border-radius: 36px 36px 0 0; background-image: radial-gradient(var(--band-dot) 1px, transparent 1.2px); background-size: var(--space-4) var(--space-4); background-position: 4px 4px; overflow: hidden; }
.band .app-caption { color: var(--band-ink-muted); }
/* Prickbilen visas i appens storlek, 390 pt ur 2x-filen, och skalas aldrig om; på smalare skärmar klipps kanterna.
   Bilden har bandets mörka färg från ljust tema inbakad. Med lighten tar bandets egen färg över där den är
   ljusare (mörkt tema), så att bilden aldrig syns som en mörkare ruta. */
.band img { display: block; width: 390px; max-width: none; height: 156px; margin: var(--space-2) 0 0 calc(-1 * var(--space-4)); mix-blend-mode: lighten; }

/* Poängringen: 36 prickar, r 30 i en 72-ruta, skalad till 112 px */
.ring { position: relative; width: 112px; height: 112px; flex: none; }
.ring--sm { width: 68px; height: 68px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 4.8; stroke-linecap: round; stroke-dasharray: 0 5.236; }
.ring .track { stroke: var(--ring-track); }
.ring .fill { stroke: var(--accent); }
.ring--warn .fill { stroke: var(--warn-mark); }
.ring .mask-arc { stroke: #fff; stroke-width: 8; stroke-linecap: butt; stroke-dasharray: 0 188.5; stroke-dashoffset: 2.618; transition: stroke-dasharray 1200ms var(--ease-out); }
.ring.is-filled .mask-arc { stroke-dasharray: var(--arc) 188.5; }
.ring-num { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); }
.ring--sm .ring-num { font-size: 23px; line-height: 28px; letter-spacing: -0.04em; }
@media (prefers-reduced-motion: reduce) { .ring .mask-arc { transition: none; } }
.score-head { display: flex; align-items: center; gap: var(--space-4); }
.score-text { display: grid; gap: 2px; }

/* Hero-exemplet: tre skärmar (skanning, felkoder, besked) som spelas upp en gång när telefonen syns, på drygt
   4 s, och sedan står beskedet kvar. Knapparna under telefonen visar en skärm i taget, och "Spela upp igen" kör
   om. Utan JavaScript visas bara beskedet; med "minska rörelse" spelas inget upp, men knapparna byter skärm
   direkt. Uppspelningen är CSS-animationer på transform, opacity och ringens båge. site.js sätter demo--play
   (spelar), demo--wait (står på första bilden tills telefonen syns) och data-show (en vald skärm). Som i appen
   fylls ringen först när skanningen är klar. Telefonens höjd rymmer beskedsskärmen ovanför toningen: 620 px i
   full bredd och 700 px på smala skärmar, där raderna bryts och raden om uppskattningen annars tonas bort. */
.demo { display: grid; gap: var(--space-3); justify-items: center; width: min(100%, 390px); }
.demo-phone { width: 100%; height: 620px; padding: 0; margin: 0; }
@media (max-width: 429px) { .demo-phone { height: 700px; } }
.demo-phone > * + * { margin-top: 0; }
.demo-screen { position: absolute; inset: 0; padding: var(--space-5); display: grid; align-content: start; gap: var(--space-3); }
.demo-screen--scan, .demo-screen--list { opacity: 0; visibility: hidden; }
.demo-screen .card, .demo-screen .list, .demo-screen .verdict { margin: 0; }
.demo-screen > .code { justify-self: start; }
.demo-ring .mask-arc { stroke-dasharray: 141.372 188.5; transition: none; }
.demo-swap { display: grid; }
.demo-swap > * { grid-area: 1 / 1; align-self: center; }
.demo-status { opacity: 0; }

/* En skärm i taget, vald med knapparna */
.demo[data-show] .demo-screen { opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms; }
.demo[data-show="scan"] .demo-screen--scan, .demo[data-show="list"] .demo-screen--list, .demo[data-show="detail"] .demo-screen--detail { opacity: 1; visibility: visible; transition: opacity 200ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .demo[data-show] .demo-screen, .demo[data-show="scan"] .demo-screen--scan, .demo[data-show="list"] .demo-screen--list, .demo[data-show="detail"] .demo-screen--detail { transition: none; } }

/* Knapparna finns bara med JavaScript, eftersom det är skriptet som byter skärm */
.demo-steps { display: none; padding: 2px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-control); }
.js .demo-steps { display: inline-flex; }
.demo-step { height: var(--size-hit); padding: 0 var(--space-4); border: 0; border-radius: 12px; background-color: transparent; color: var(--ink-muted); font-size: 13px; line-height: 18px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--press) var(--ease-out), background-color var(--press) var(--ease-out); }
.demo:not([data-show]) .demo-step--3, .demo[data-show="scan"] .demo-step--1, .demo[data-show="list"] .demo-step--2, .demo[data-show="detail"] .demo-step--3 { color: var(--ink); background-color: var(--surface); }
@media (hover: hover) and (pointer: fine) { .demo-step:hover { color: var(--ink); } }
.demo-replay { height: var(--size-hit); padding: 0 var(--space-3); border: 0; background: transparent; color: var(--accent); font-size: 15px; font-weight: 600; cursor: pointer; border-radius: var(--radius-sm); -webkit-tap-highlight-color: transparent; transition: transform var(--press) var(--ease-out), background-color var(--press) var(--ease-out); }
.demo-replay:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .demo-replay:hover { background: var(--accent-soft); } }
@media (prefers-reduced-motion: reduce) { .demo-replay { transition: background-color var(--press) var(--ease-out); } .demo-replay:active { transform: none; } }
.demo-replay[hidden] { display: none; }

@keyframes demo-in { from { opacity: 0; visibility: hidden; transform: translateX(var(--space-8)); } to { opacity: 1; visibility: visible; transform: none; } }
@keyframes demo-out { from { opacity: 1; visibility: visible; transform: none; } to { opacity: 0; visibility: hidden; transform: translateX(calc(-1 * var(--space-6))); } }
@keyframes demo-rise { from { opacity: 0; transform: translateY(var(--space-3)); } to { opacity: 1; transform: none; } }
@keyframes demo-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes demo-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes demo-ring { from { stroke-dasharray: 0 188.5; } to { stroke-dasharray: 141.372 188.5; } }
@keyframes demo-step-on { from { color: var(--ink-muted); background-color: transparent; } to { color: var(--ink); background-color: var(--surface); } }
@keyframes demo-step-off { from { color: var(--ink); background-color: var(--surface); } to { color: var(--ink-muted); background-color: transparent; } }

/* Skanningen 0–2,0 s, felkoderna 2,0–3,3 s, beskedet från 3,3 s; sista raden landar 4,3 s */
.demo--play .demo-screen--scan { animation: demo-out 360ms var(--ease-out) 2s both; }
.demo--play .demo-screen--list { animation: demo-in 360ms var(--ease-out) 2s both, demo-out 360ms var(--ease-out) 3.3s forwards; }
.demo--play .demo-screen--detail { animation: demo-in 360ms var(--ease-out) 3.3s both; }
.demo--play .demo-ring .mask-arc { animation: demo-ring 1s var(--ease-out) 0.6s both; }
.demo--play .demo-status { animation: demo-fade-out 220ms var(--ease-out) 0.55s both; }
.demo--play .demo-result { animation: demo-fade-in 360ms var(--ease-out) 0.8s both; }
/* Korten och raderna kommer i en kaskad med 70–80 ms mellanrum, så att inget står still och väntar */
.demo--play .demo-card:nth-child(3) { animation: demo-rise 360ms var(--ease-out) 2.3s both; }
.demo--play .demo-card:nth-child(4) { animation: demo-rise 360ms var(--ease-out) 2.38s both; }
.demo--play .demo-screen--detail .demo-rise:nth-child(1) { animation: demo-rise 360ms var(--ease-out) 3.55s both; }
.demo--play .demo-screen--detail .demo-rise:nth-child(2) { animation: demo-rise 360ms var(--ease-out) 3.62s both; }
.demo--play .demo-screen--detail .demo-rise:nth-child(3) { animation: demo-rise 360ms var(--ease-out) 3.69s both; }
.demo--play .demo-screen--detail .demo-rise:nth-child(4) { animation: demo-rise 360ms var(--ease-out) 3.76s both; }
.demo--play .demo-screen--detail .demo-rise:nth-child(5) { animation: demo-rise 360ms var(--ease-out) 3.83s both; }
.demo--play .demo-screen--detail .demo-rise:nth-child(6) { animation: demo-rise 360ms var(--ease-out) 3.9s both; }
.demo--play .demo-step--1 { animation: demo-step-off 300ms var(--ease-out) 2.1s both; }
.demo--play .demo-step--2 { animation: demo-step-on 300ms var(--ease-out) 2.1s both, demo-step-off 300ms var(--ease-out) 3.4s forwards; }
.demo--play .demo-step--3 { animation: demo-step-on 300ms var(--ease-out) 3.4s both; }
/* Tills telefonen syns står uppspelningen på sin första bild */
.demo--wait, .demo--wait * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .demo--play * { animation: none !important; } }

/* Faktabandet under heron: tre fakta på öppen yta, från 720 px i tre kolumner (från 1000 px samma som stegkorten
   under). Först vad siffran är, sedan siffran, sedan en mening. Raderna delas mellan kolumnerna (subgrid), så att
   siffrorna står på samma linje även när en etikett bryts. Siffrorna är proportionella (inte jämnbreda), med
   tusentalets mellanrum något ihopdraget, så att de läses som ett tal. På mobilen står siffran till höger om
   texten, så att bandet blir tre låga rader. */
.facts { padding-block: 0 var(--space-6); }
.facts-list { display: grid; margin: 0; }
.fact { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-5); align-items: center; padding-block: var(--space-4); border-top: 1px solid var(--line-control); }
.fact:last-child { border-bottom: 1px solid var(--line-control); }
.fact-num, .fact-note { margin: 0; }
.fact-label { grid-column: 1; grid-row: 1; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }
.fact-num { grid-column: 2; grid-row: 1 / span 2; font-size: 36px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; word-spacing: -0.08em; white-space: nowrap; color: var(--ink); }
.fact-note { grid-column: 1; grid-row: 2; margin-top: 2px; font-size: 15px; line-height: 22px; color: var(--ink-body); text-wrap: pretty; }
@media (min-width: 720px) {
  .facts-list { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); column-gap: var(--space-5); }
  .fact { grid-row: span 3; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; row-gap: 0; align-items: start; padding-block: var(--space-5) 0; }
  .fact:last-child { border-bottom: 0; }
  .fact-label, .fact-num, .fact-note { grid-column: auto; grid-row: auto; }
  .fact-num { margin-top: var(--space-3); font-size: clamp(44px, 1.9rem + 1.5vw, 56px); }
  .fact-note { margin-top: var(--space-3); max-width: 32ch; }
}

/* Köpkontrollen: sidans enda mörka kort och den enda mjuka glöden på sidan, blå uppe till vänster och solnedgång
   nere vid telefonen. Rubriken går över hela kortet; under den står köparens tre fördelar som rader bredvid
   telefonen, så att telefonens överkant möter radernas. Telefonen stiger upp och berättar kontrollen i ordning när
   kortet syns: poängen, koden som finns kvar, att koderna raderats (3 av 8 självtester), prutbudet. Under 960 px
   står telefonen direkt under rubriken och reser sig ur radernas översta linje, så att bilden kommer före texten. */
.buy-card { position: relative; overflow: hidden; display: grid; gap: var(--space-8); padding: var(--space-8) var(--space-5) 0; border-radius: var(--radius-panel); color: var(--band-ink); background-color: var(--night); background-image: var(--grain), radial-gradient(55% 60% at 0% 0%, color-mix(in srgb, var(--accent) 32%, transparent) 0%, color-mix(in srgb, var(--accent) 24.7%, transparent) 10%, color-mix(in srgb, var(--accent) 18.41%, transparent) 20%, color-mix(in srgb, var(--accent) 13.11%, transparent) 30%, color-mix(in srgb, var(--accent) 8.78%, transparent) 40%, color-mix(in srgb, var(--accent) 5.37%, transparent) 50%, color-mix(in srgb, var(--accent) 2.85%, transparent) 60%, color-mix(in srgb, var(--accent) 1.17%, transparent) 70%, color-mix(in srgb, var(--accent) 0.25%, transparent) 80%, transparent 90%), radial-gradient(65% 75% at 85% 100%, color-mix(in srgb, var(--band-signal) 42%, transparent) 0%, color-mix(in srgb, var(--band-signal) 32.41%, transparent) 10%, color-mix(in srgb, var(--band-signal) 24.16%, transparent) 20%, color-mix(in srgb, var(--band-signal) 17.21%, transparent) 30%, color-mix(in srgb, var(--band-signal) 11.53%, transparent) 40%, color-mix(in srgb, var(--band-signal) 7.05%, transparent) 50%, color-mix(in srgb, var(--band-signal) 3.75%, transparent) 60%, color-mix(in srgb, var(--band-signal) 1.54%, transparent) 70%, color-mix(in srgb, var(--band-signal) 0.33%, transparent) 80%, transparent 90%); box-shadow: var(--shadow-card); }
@media (min-width: 720px) { .buy-card { padding: var(--space-12) var(--space-12) 0; } }
@media (min-width: 960px) { .buy-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-16); row-gap: var(--space-10); align-items: end; } .buy-head { grid-column: 1 / -1; } }
.buy-head { display: grid; gap: var(--space-4); max-width: 680px; }
.buy-head .lead { margin-top: var(--space-1); color: var(--band-ink-muted); }
.buy-list { display: grid; align-self: start; }
@media (min-width: 960px) { .buy-list { padding-bottom: var(--space-12); } }
.buy-item { display: grid; row-gap: var(--space-1); padding-block: var(--space-4); border-top: 1px solid var(--band-line); }
.buy-item:last-child { border-bottom: 1px solid var(--band-line); }
.buy-item .body { max-width: 46ch; color: var(--band-ink-muted); }
.buy-visual { display: flex; justify-content: center; }
@media (min-width: 960px) { .buy-visual { justify-content: flex-end; } }
.buy-phone { width: min(100%, 390px); border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: var(--space-8); }
/* På smala skärmar går telefonen ut till kortets kanter, så att den får samma bredd som utan kort */
@media (max-width: 719px) { .buy-phone { width: calc(100% + 2 * var(--space-5)); max-width: none; margin-inline: calc(-1 * var(--space-5)); } }
@media (max-width: 959px) {
  .buy-card { padding-bottom: var(--space-6); }
  .buy-visual { order: 2; margin-bottom: calc(-1 * var(--space-8)); clip-path: inset(-120px -120px 0 -120px); }
  .buy-list { order: 3; }
  .buy-phone { padding-bottom: var(--space-6); }
}
.kop-tests { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; margin-top: 6px; max-width: 200px; }
.kop-tests i { display: block; height: 5px; border-radius: 3px; background: var(--signal); transform-origin: left center; }
.kop-tests i.is-off { background: var(--ring-track); }

@keyframes kop-phone { from { transform: translateY(var(--space-8)); } to { transform: none; } }
@keyframes kop-amount { from { opacity: 0; transform: translateY(var(--space-2)) scale(0.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .buy-card.is-in .buy-phone { animation: kop-phone 800ms var(--ease-out) 150ms both; }
  .js .buy-card.is-in .kop-rise { animation: step-rise 420ms var(--ease-out) both; }
  .js .buy-card.is-in .kop-rise:nth-of-type(1) { animation-delay: 450ms; }
  .js .buy-card.is-in .list.kop-rise { animation: none; }
  .js .buy-card.is-in .kop-row { animation: step-land 420ms var(--ease-out) both; }
  .js .buy-card.is-in .kop-row:nth-child(1) { animation-delay: 900ms; }
  .js .buy-card.is-in .kop-row:nth-child(2) { animation-delay: 1250ms; }
  .js .buy-card.is-in .kop-tests i:not(.is-off) { animation: step-fill 320ms var(--ease-out) both; }
  .js .buy-card.is-in .kop-tests i:nth-child(1) { animation-delay: 1550ms; }
  .js .buy-card.is-in .kop-tests i:nth-child(2) { animation-delay: 1620ms; }
  .js .buy-card.is-in .kop-tests i:nth-child(3) { animation-delay: 1690ms; }
  .js .buy-card.is-in .inverse.kop-rise { animation-delay: 1900ms; }
  .js .buy-card.is-in .kop-amount { animation: kop-amount 460ms var(--ease-out) 2250ms both; }
}

/* Hur det fungerar */
/* Tre kort med var sin bild: adaptern ansluter, skanningen läser, beskedet landar. Bilden står överst på en
   nedsänkt yta (radie 12 px: kortets 20 minus kanten på 8), så att den syns när kortet kommer i bild och
   animationen spelas, också på mobilen; under den stegets nummer, rubrik och text. Numret är litet och i
   signalfärgen, så att sidans enda stora siffror är faktabandets. Slutläget är grundläget;
   bara med JS, när kortet kommer i bild och utan "minska rörelse" spelas vägen dit upp, en gång. */
.steps { display: grid; gap: var(--space-4); }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
.step { background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: var(--space-2); display: flex; flex-direction: column; }
/* Bilden hålls högst 360 px bred mitt på ytan; ytorna är lika höga, så att de står i linje bredvid varandra */
.step-visual { min-height: 216px; padding: var(--space-6) max(var(--space-5), calc((100% - 360px) / 2)); border-radius: 12px; background: var(--surface-sunken); display: grid; align-content: center; gap: var(--space-2); }
.step-copy { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5) var(--space-4) var(--space-4); }
.step-num { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.04em; color: var(--signal); }
.step .body { max-width: 40ch; hyphens: auto; }
/* På surfplatta står bilden till vänster och texten till höger */
@media (min-width: 720px) and (max-width: 999px) {
  .step { flex-direction: row; }
  .step-visual { flex: 0 0 44%; min-width: 0; padding-inline: var(--space-5); }
  .step-copy { align-content: center; padding: var(--space-5) var(--space-6); }
}

/* 01: adaptern i uttaget, prickarna till telefonen */
.plug-scene { display: flex; align-items: center; gap: var(--space-3); }
.plug-port { flex: 0 1 120px; min-width: 88px; height: auto; overflow: visible; }
.plug-adapter { fill: var(--tyre); }
.plug-led { fill: var(--signal); }
.plug-socket { fill: var(--surface); stroke: var(--line-control); stroke-width: 1.5; stroke-linejoin: round; }
.plug-pin { fill: var(--line-strong); }
.plug-link { flex: 1; min-width: var(--space-12); position: relative; display: flex; align-items: center; justify-content: space-between; }
.plug-dot { width: 6px; height: 6px; border-radius: 3px; background: var(--signal); }
/* Pricken som bär frågan och svaret; syns bara medan de pratar. Spåret är lika brett som sträckan, så att pricken
   kan flyttas med transform */
.plug-packet { position: absolute; inset: 50% 0 auto 0; height: 10px; margin-top: -5px; opacity: 0; }
.plug-packet::before { content: ""; display: block; width: 10px; height: 10px; border-radius: 5px; background: var(--signal); box-shadow: 0 0 0 4px var(--signal-soft); }
.plug-phone { width: 34px; height: 60px; flex: none; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 2px var(--line-strong); display: grid; place-items: end center; padding-bottom: 6px; }
.plug-phone span { width: 10px; height: 2px; border-radius: 1px; background: var(--line-strong); }
.plug-pill { justify-self: start; margin-top: var(--space-3); }

/* 02: det skanningen läser, med demobilens värden. En bock per sak som är läst; självtesterna som fem delar,
   där fyra fylls, så att bilden aldrig säger mer än värdet */
.viz-scan { gap: 0; }
.scan-row { display: flex; align-items: center; gap: var(--space-3); min-height: 36px; font-size: 14px; line-height: 20px; color: var(--ink-body); }
.scan-row + .scan-row { border-top: 1px solid var(--line-control); }
.scan-check { width: 20px; height: 20px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--signal-soft); color: var(--signal); }
.scan-check svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scan-label { flex: 1; min-width: 0; }
.scan-value { font-weight: 600; color: var(--ink); white-space: nowrap; }
.scan-tests { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-1); padding-left: calc(20px + var(--space-3)); margin-top: var(--space-1); }
.scan-tests i { display: block; height: 6px; border-radius: 3px; background: var(--signal); transform-origin: left center; }
.scan-tests i.is-off { background: var(--ring-track); }
.scan-note { font-size: 13px; line-height: 18px; color: var(--ink-muted); margin-top: var(--space-3); }

/* 03: varje kod får sitt besked; demobilen har inget som säger Kör inte */
.verdict-row { display: flex; align-items: center; gap: var(--space-3); height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-md); font-size: 15px; font-weight: 600; }
.verdict-row--ok { background: var(--ok-soft); color: var(--ok-ink); }
.verdict-row--warn { background: var(--warn-soft); color: var(--warn-ink); }
.verdict-row--stop { box-shadow: inset 0 0 0 1px var(--line-control); color: var(--ink-muted); }
.verdict-dot { width: 8px; height: 8px; border-radius: 4px; flex: none; }
.verdict-row--ok .verdict-dot { background: var(--ok); }
.verdict-row--warn .verdict-dot { background: var(--warn-mark); }
.verdict-row--stop .verdict-dot { background: var(--stop); }
.verdict-code { margin-left: auto; height: 24px; background: var(--surface); }

/* Kedjan: på datorn står korten bredvid varandra och lämnar över till varandra, så att det blir en berättelse
   (adaptern pratar, koderna kommer, beskedet landar). På mobilen spelas varje kort när det syns. */
.step { --chain: 0ms; }
@media (min-width: 1000px) { .step:nth-child(2) { --chain: 2100ms; } .step:nth-child(3) { --chain: 3000ms; } }

@keyframes step-plug { from { transform: translateY(-16px); } to { transform: none; } }
@keyframes step-led { from { fill: var(--ink-subtle); } to { fill: var(--signal); } }
@keyframes step-dim { from { opacity: 0; } to { opacity: 0.3; } }
@keyframes step-lit { from { opacity: 0.3; transform: scale(0.8); } to { opacity: 1; transform: none; } }
/* Frågan till telefonen och svaret tillbaka, med en kort vila när den är framme */
@keyframes step-talk {
  0% { transform: none; opacity: 0; }
  8% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  44% { transform: translateX(calc(100% - 10px)); }
  54% { transform: translateX(calc(100% - 10px)); animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
  92% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 0; }
}
/* Telefonen tänds kort när pricken kommer fram */
@keyframes step-phone {
  0%, 40% { box-shadow: inset 0 0 0 2px var(--line-strong); }
  46%, 54% { box-shadow: inset 0 0 0 2px var(--signal); }
  62%, 100% { box-shadow: inset 0 0 0 2px var(--line-strong); }
}
@keyframes step-rise { from { opacity: 0; transform: translateY(var(--space-2)); } to { opacity: 1; transform: none; } }
@keyframes step-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes step-fill { from { transform: scaleX(0); } to { transform: none; } }
@keyframes step-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes step-land { from { opacity: 0; transform: translateX(var(--space-4)); } to { opacity: 1; transform: none; } }
@keyframes step-verdict-ok { from { background-color: var(--surface); color: var(--ink-muted); } to { background-color: var(--ok-soft); color: var(--ok-ink); } }
@keyframes step-verdict-warn { from { background-color: var(--surface); color: var(--ink-muted); } to { background-color: var(--warn-soft); color: var(--warn-ink); } }

@media (prefers-reduced-motion: no-preference) {
  /* 01: adaptern glider in, lampan tänds, de pratar (1 s), raden tänds från adaptern och ut, Ansluten */
  .js .step.is-in .plug-adapter { transform-box: fill-box; animation: step-plug 560ms var(--ease-out) 250ms both; }
  .js .step.is-in .plug-led { animation: step-led 240ms var(--ease-out) 700ms both; }
  .js .step.is-in .plug-dot { animation: step-dim 300ms var(--ease-out) 750ms both, step-lit 320ms var(--ease-out) forwards; }
  .js .step.is-in .plug-dot:nth-child(1) { animation-delay: 750ms, 1750ms; }
  .js .step.is-in .plug-dot:nth-child(2) { animation-delay: 750ms, 1795ms; }
  .js .step.is-in .plug-dot:nth-child(3) { animation-delay: 750ms, 1840ms; }
  .js .step.is-in .plug-dot:nth-child(4) { animation-delay: 750ms, 1885ms; }
  .js .step.is-in .plug-dot:nth-child(5) { animation-delay: 750ms, 1930ms; }
  .js .step.is-in .plug-dot:nth-child(6) { animation-delay: 750ms, 1975ms; }
  .js .step.is-in .plug-dot:nth-child(7) { animation-delay: 750ms, 2020ms; }
  .js .step.is-in .plug-packet { animation: step-talk 1000ms linear 700ms both; }
  .js .step.is-in .plug-phone { animation: step-phone 1000ms linear 700ms both; }
  .js .step.is-in .plug-pill { animation: step-rise 400ms var(--ease-out) 2050ms both; }

  /* 02: koderna kommer, en rad i taget, och självtesterna fylls */
  .js .step.is-in .scan-check { animation: step-in 320ms var(--ease-out) both; }
  .js .step.is-in .scan-value { animation: step-fade 280ms var(--ease-out) both; }
  .js .step.is-in .scan-row:nth-child(1) .scan-check { animation-delay: calc(var(--chain) + 200ms); }
  .js .step.is-in .scan-row:nth-child(2) .scan-check { animation-delay: calc(var(--chain) + 520ms); }
  .js .step.is-in .scan-row:nth-child(3) .scan-check { animation-delay: calc(var(--chain) + 840ms); }
  .js .step.is-in .scan-row:nth-child(1) .scan-value { animation-delay: calc(var(--chain) + 340ms); }
  .js .step.is-in .scan-row:nth-child(2) .scan-value { animation-delay: calc(var(--chain) + 660ms); }
  .js .step.is-in .scan-row:nth-child(3) .scan-value { animation-delay: calc(var(--chain) + 980ms); }
  .js .step.is-in .scan-tests i:not(.is-off) { animation: step-fill 360ms var(--ease-out) both; }
  .js .step.is-in .scan-tests i:nth-child(1) { animation-delay: calc(var(--chain) + 1000ms); }
  .js .step.is-in .scan-tests i:nth-child(2) { animation-delay: calc(var(--chain) + 1070ms); }
  .js .step.is-in .scan-tests i:nth-child(3) { animation-delay: calc(var(--chain) + 1140ms); }
  .js .step.is-in .scan-tests i:nth-child(4) { animation-delay: calc(var(--chain) + 1210ms); }

  /* 03: de tre beskeden står gråa; varje kod landar i sitt besked, och raden får sin färg när koden är där */
  .js .step.is-in .verdict-code { animation: step-land 420ms var(--ease-out) both; }
  .js .step.is-in .verdict-row--ok { animation: step-verdict-ok 360ms var(--ease-out) both; }
  .js .step.is-in .verdict-row--warn { animation: step-verdict-warn 360ms var(--ease-out) both; }
  .js .step.is-in .verdict-row--ok .verdict-code { animation-delay: calc(var(--chain) + 200ms); }
  .js .step.is-in .verdict-row--ok { animation-delay: calc(var(--chain) + 420ms); }
  .js .step.is-in .verdict-row--warn .verdict-code { animation-delay: calc(var(--chain) + 700ms); }
  .js .step.is-in .verdict-row--warn { animation-delay: calc(var(--chain) + 920ms); }
}


/* Varför lita på det */
.trust { display: grid; }
@media (min-width: 720px) { .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-16); } }
.trust-item { display: grid; grid-template-columns: var(--space-6) minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-2); align-content: start; padding-block: var(--space-6); border-top: 1px solid var(--line-control); }
.trust-item:last-child { border-bottom: 1px solid var(--line-control); }
@media (min-width: 720px) { .trust-item:nth-last-child(2) { border-bottom: 1px solid var(--line-control); } }
.trust-item .body { grid-column: 2; max-width: 46ch; }
.trust-icon { width: var(--space-6); height: 26px; display: grid; place-items: center; color: var(--accent); }
.trust-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Följ oss (här kommer väntelistan när den läggs till) */
.follow { background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: var(--space-6); display: grid; gap: var(--space-6); }
@media (min-width: 880px) { .follow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); padding: var(--space-10); align-items: center; } }
.follow-copy { display: grid; gap: var(--space-3); }
.follow-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 479px) { .follow-actions .btn { flex: 1 1 100%; } }

/* Vanliga frågor, centrerat på sidan */
.section--center .section-head { margin-inline: auto; text-align: center; justify-items: center; }
.faq { max-width: 720px; display: grid; }
.section--center .faq { margin-inline: auto; }
.faq details { border-top: 1px solid var(--line-control); }
.faq details:last-child { border-bottom: 1px solid var(--line-control); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 10px; height: 10px; border: solid var(--ink-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); flex: none; margin-right: 4px; transition: transform 200ms var(--ease-out), border-color var(--press) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(225deg); }
@media (hover: hover) and (pointer: fine) { .faq summary:hover::after { border-color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .faq summary::after { transition: border-color var(--press) var(--ease-out); } }
.faq .body { padding: 0 0 var(--space-5); max-width: 56ch; }
@media (prefers-reduced-motion: no-preference) {
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow-y: clip; transition: block-size 260ms var(--ease-out), content-visibility 260ms allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
}
.faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Avslutet: märket i stort över en solnedgång av prickar. Prickfältets mitt ligger 180 px under sektionens
   underkant, så att solen är nästan nere bakom sidfotens linje och det som syns (knappt 200 px) ryms i luften
   under knapparna (216 px, lika på alla bredder). Märkets prickar tonar in längs stigen, i märkets
   egen ordning, när sektionen syns. */
.closing { position: relative; isolation: isolate; overflow: clip; padding-bottom: 216px; }
@media (min-width: 720px) { .closing { padding-top: var(--space-16); } }
.dotfield--sun { left: 50%; bottom: -628px; margin-left: -448px; background: var(--signal); opacity: 0.5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dotfield--sun { opacity: 0.6; } }
.closing-inner { display: grid; justify-items: center; gap: var(--space-4); max-width: 640px; text-align: center; }
.closing-mark { width: 88px; height: 88px; margin-bottom: var(--space-4); overflow: visible; }
.closing-mark circle { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.closing-inner .lead { max-width: 52ch; }
.closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }
@keyframes closing-dot { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .closing-inner.is-in .closing-mark circle { animation: closing-dot 420ms var(--ease-out) both; }
  .js .closing-inner.is-in .closing-mark circle:nth-child(1) { animation-delay: 200ms; }
  .js .closing-inner.is-in .closing-mark circle:nth-child(2) { animation-delay: 290ms; }
  .js .closing-inner.is-in .closing-mark circle:nth-child(3) { animation-delay: 380ms; }
  .js .closing-inner.is-in .closing-mark circle:nth-child(4) { animation-delay: 470ms; }
  .js .closing-inner.is-in .closing-mark circle:nth-child(5) { animation-delay: 560ms; }
  .js .closing-inner.is-in .closing-mark circle:nth-child(6) { animation-delay: 650ms; }
  .js .closing-inner.is-in .closing-mark circle:nth-child(7) { animation-delay: 740ms; }
  .js .closing-inner.is-in .closing-mark circle:nth-child(8) { animation-delay: 830ms; }
  .js .closing-inner.is-in .closing-mark circle:nth-child(9) { animation-delay: 920ms; }
}

/* Sidfot */
.footer { border-top: 1px solid var(--line-control); padding-block: var(--space-10) var(--space-12); }
.footer .wrap { display: grid; gap: var(--space-6); }
@media (min-width: 720px) { .footer .wrap { grid-template-columns: 1fr auto; align-items: start; } }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); font-size: 15px; }
.footer-links a { display: inline-flex; align-items: center; min-height: var(--size-hit); color: var(--ink-muted); text-decoration: none; transition: color var(--press) var(--ease-out); }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }
.footer .caption { max-width: 46ch; }

/* Undersidor med text */
.page { padding-block: var(--space-12) var(--section); }
.prose { max-width: 640px; display: grid; gap: var(--space-4); }
.prose h1 { margin-bottom: var(--space-2); }
.prose h2 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; margin-top: var(--space-6); }
.prose p { color: var(--ink-body); }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

/* Inträde vid scroll: en gång, 12 px upp och toning, bara med JS och utan "minska rörelse" */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--reveal) var(--ease-out), transform var(--reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
[data-i="1"] { --i: 1; } [data-i="2"] { --i: 2; } [data-i="3"] { --i: 3; }
/* Rubrikerna kommer inte uppifrån marken som korten: rubriken skjuts upp ur sin egen underkant, så att text och
   kort rör sig på olika sätt */
.js .section-head.reveal { opacity: 1; transform: none; }
.js .section-head.reveal > * { opacity: 0; transform: translateY(0.4em); clip-path: inset(0 0 60% 0); transition: opacity var(--reveal) var(--ease-out), transform 640ms var(--ease-out), clip-path 640ms var(--ease-out); }
.js .section-head.reveal.is-in > * { opacity: 1; transform: none; clip-path: inset(-0.4em -1em); }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { transform: none; transition: opacity 200ms var(--ease-out); }
  .js .section-head.reveal > * { transform: none; clip-path: none; transition: opacity 200ms var(--ease-out); }
}