/* ==========================================================================
   Scalelab — publik webbplats. Samma formspråk som plattformens inloggnings-
   sida: mörk neutral svartskala, punktraster med tryckvågor, Chillax för
   varumärket, STIX Two Text för stora rubriker.
   ========================================================================== */

/* Typsnitt (samma filer som plattformen) */
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Variable.woff2') format('woff2-variations'),
       url('fonts/Satoshi-Variable.woff') format('woff');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Chillax';
  src: url('fonts/Chillax-Variable.woff2') format('woff2-variations'),
       url('fonts/Chillax-Variable.woff') format('woff');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'STIX Two Text';
  src: url('fonts/STIXTwoText-Variable.ttf') format('truetype-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Variable.ttf') format('truetype-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Samma neutrala svartskala som inloggningssidan */
  --bg: #0d0d0d;
  --card: #161616;
  --field: #1c1c1c;
  --hover: #242424;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text-1: #ffffff;
  --text-2: rgba(255, 255, 255, 0.55);
  --text-3: rgba(255, 255, 255, 0.38);
  --green: #3fb968;

  /* Vänds av temaväxlaren */
  --ink: #ffffff;                     /* ren förgrund: hovertext, stark text */
  --ink-soft: rgba(255, 255, 255, 0.06);
  --accent: #ffffff;                  /* primärknapp */
  --on-accent: #141414;
  --dot: rgba(255, 255, 255, 0.078);          /* punktrastret */
  --dot-glow: rgba(255, 255, 255, 0.26);
  --dot-ripple: rgba(255, 255, 255, 0.55);
  --wire: rgba(255, 255, 255, 0.09);          /* node-grafens ledningar */
  --pulse: rgba(255, 255, 255, 0.8);
  --nav-pill: rgba(20, 20, 20, 0.72);         /* plattan bakom navet vid scroll */
  --mark-src: url('logos/mark-light-100.png');
  /* Fortnox-ikonens F: vitt mot svart, mörkgrönt mot ljust */
  --fortnox-src: url('business-logos/fortnox.svg');
  --word-filter: brightness(0) invert(1);     /* logotexten i logotypväggen */

  --font: "Satoshi", "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-brand: "Chillax", "Satoshi", -apple-system, sans-serif;
  --font-heading: "STIX Two Text", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --r-md: 8px; --r-lg: 12px; --r-pill: 999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ljust tema. Samma skala speglad: rastret och logotexten blir svarta i
   stället för vita, primärknappen svart med vit text. */
:root[data-theme="light"] {
  --bg: #f6f6f5;
  --card: #ffffff;
  --field: #f0f0ee;
  --hover: #e8e8e5;
  --line: rgba(0, 0, 0, 0.09);
  --line-strong: rgba(0, 0, 0, 0.18);
  --text-1: #141414;
  --text-2: rgba(0, 0, 0, 0.58);
  --text-3: rgba(0, 0, 0, 0.42);
  --green: #1f8a45;

  --ink: #141414;
  --ink-soft: rgba(0, 0, 0, 0.05);
  --accent: #141414;
  --on-accent: #ffffff;
  --dot: rgba(0, 0, 0, 0.115);
  --dot-glow: rgba(0, 0, 0, 0.42);
  --dot-ripple: rgba(0, 0, 0, 0.55);
  --wire: rgba(0, 0, 0, 0.12);
  --pulse: rgba(0, 0, 0, 0.55);
  --nav-pill: rgba(255, 255, 255, 0.74);
  --mark-src: url('logos/mark-dark-100.png');
  --fortnox-src: url('business-logos/fortnox-mark.svg');
  --word-filter: brightness(0);
}

/* Färgvariablerna registreras som färger. En oregistrerad variabel byter
   värde i ett hopp, och då hoppar också det den sitter i — rastret klippte
   om medan allt annat tonade. Registrerade kan interpoleras, och eftersom
   de ärver får varje element den mellanliggande färgen direkt från roten. */
@property --bg          { syntax: "<color>"; inherits: true; initial-value: #0d0d0d; }
@property --card        { syntax: "<color>"; inherits: true; initial-value: #161616; }
@property --field       { syntax: "<color>"; inherits: true; initial-value: #1c1c1c; }
@property --hover       { syntax: "<color>"; inherits: true; initial-value: #242424; }
@property --line        { syntax: "<color>"; inherits: true; initial-value: rgba(255,255,255,0.08); }
@property --line-strong { syntax: "<color>"; inherits: true; initial-value: rgba(255,255,255,0.16); }
@property --text-1      { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --text-2      { syntax: "<color>"; inherits: true; initial-value: rgba(255,255,255,0.55); }
@property --text-3      { syntax: "<color>"; inherits: true; initial-value: rgba(255,255,255,0.38); }
@property --green       { syntax: "<color>"; inherits: true; initial-value: #3fb968; }
@property --ink         { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --ink-soft    { syntax: "<color>"; inherits: true; initial-value: rgba(255,255,255,0.06); }
@property --accent      { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --on-accent   { syntax: "<color>"; inherits: true; initial-value: #141414; }
@property --dot       { syntax: "<color>"; inherits: true; initial-value: rgba(255,255,255,0.078); }
@property --dot-glow  { syntax: "<color>"; inherits: true; initial-value: rgba(255,255,255,0.26); }
@property --dot-ripple{ syntax: "<color>"; inherits: true; initial-value: rgba(255,255,255,0.55); }
@property --wire      { syntax: "<color>"; inherits: true; initial-value: rgba(255,255,255,0.09); }
@property --pulse     { syntax: "<color>"; inherits: true; initial-value: rgba(255,255,255,0.8); }
@property --nav-pill  { syntax: "<color>"; inherits: true; initial-value: rgba(20,20,20,0.72); }

/* ---------- Temabytet tonar ----------
   Hela bytet drivs härifrån: roten tonar variablerna, och varje element som
   läser dem får den mellanliggande färgen samma bildruta. Ett enda förlopp,
   ingen som ligger efter. */
:root.byter-tema {
  transition:
    --bg 0.45s ease, --card 0.45s ease, --field 0.45s ease, --hover 0.45s ease,
    --line 0.45s ease, --line-strong 0.45s ease,
    --text-1 0.45s ease, --text-2 0.45s ease, --text-3 0.45s ease, --green 0.45s ease,
    --ink 0.45s ease, --ink-soft 0.45s ease, --accent 0.45s ease, --on-accent 0.45s ease,
    --dot 0.45s ease, --dot-glow 0.45s ease, --dot-ripple 0.45s ease,
    --wire 0.45s ease, --pulse 0.45s ease, --nav-pill 0.45s ease !important;
}

/* Elementens egna övergångar stängs av under bytet. Annars startar de en
   halv sekund till på en färg som redan rör sig, och rubrikerna kommer fram
   långt efter bakgrunden. Roten sköter tonandet — de ska bara följa med. */
:root.byter-tema *,
:root.byter-tema *::before,
:root.byter-tema *::after {
  transition: none !important;
}
/* Ikonerna i temaknappen har sin egen rörelse och ska inte bromsas här */
:root.byter-tema .theme-toggle svg { transition: rotate 0.42s var(--ease), scale 0.42s var(--ease), opacity 0.24s ease !important; }

@media (prefers-reduced-motion: reduce) {
  :root.byter-tema, :root.byter-tema * { transition: none !important; }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overscroll-behavior: none; }
body {
  position: relative;   /* fäste för rasterlagren, som spänner hela sidan */
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Inget på sidan går att markera, dra eller kopiera. Sidan har inga fält att
   skriva i, så ingenting går förlorat. */
body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;   /* ingen långtrycksmeny på iOS */
}
img, a, .crop, .brand-mark, .eyebrow-mark {
  -webkit-user-drag: none;
  user-drag: none;
}
p { margin: 0; }
/* Textbitar som bara hör till den ena vyn */
.bara-smal { display: none; }
/* Rubriker får högst två rader, och raderna vägs mot varandra så att det aldrig
   blir ett ensamt ord längst ned. */
h1, h2, h3 { text-wrap: balance; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
img { max-width: 100%; }

/* ==========================================================================
   Punktraster + tryckvågor — identiskt med inloggningssidan
   ========================================================================== */

/* Rastret sitter i sidan och rullar med den. Att låta lagret följa scrollen
   via JS gav en bildrutas eftersläpning — här flyttas ingenting, lagret *är*
   en del av dokumentet och följer med av sig självt.

   Höjden sätts däremot i steg om 2 000 px (se site.js) i stället för att följa
   dokumentet exakt. Ett lager som spänner hela sidan måste nämligen målas om
   varje gång sidan ändrar höjd, och en FAQ som fälls ut ändrar höjd varje
   bildruta — då ritas en 23-pixlars upprepad gradient om över 5 500 px, 60
   gånger i sekunden. Med kvantiserad höjd ändras lagret helt enkelt inte. */
/* Ramen följer dokumentet och klipper. Den målar ingenting, så att den ändrar
   storlek kostar inget — och den får inte vara högre än sidan, för ett
   absolutpositionerat lager räknas in i sidans rullhöjd. */
/* Håller båda temanas bildvarianter i webbläsarens cache. Märket i navet och
   Fortnox byter fil när temat vänds, och utan det här hämtas den nya filen
   först vid klicket — live blinkar de då bort under hämtningen. En ruta på
   1 px med opacity 0 målas fortfarande, så bilderna laddas på riktigt. */
.grid-wrap::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  background-image:
    url('logos/mark-light-100.png'), url('logos/mark-dark-100.png'),
    url('business-logos/fortnox.svg'), url('business-logos/fortnox-mark.svg');
}

.grid-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Rastret på iOS. Två saker, båda bara på mobil — datorvyn rörs inte.

   1. Safari målar inte rastret under det klistrade navet förrän sidan rullats
      en gång. Navet har backdrop-filter och får ett eget lager, och det stör
      målningen bakom. Att lyfta rastret till ett eget lager gör att det målas
      för sig, direkt vid laddning.
   2. Lagret dras 230 px ovanför dokumentets topp, så gummibandet när man drar
      nedåt inte visar tom bakgrund. 230 = 10 rutor, så prickarna hamnar på
      exakt samma ställe mot innehållet som förut. */
@media (max-width: 1100px) {
  .grid-wrap { top: -230px; }
  .grid-dots { transform: translateZ(0); }
}

/* Det målade lagret är det som får den kvantiserade höjden */
.grid-dots {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--gh, 100%);
  pointer-events: none;
  background-image: radial-gradient(circle, var(--dot) 0.8px, transparent 1.4px);
  background-size: 23px 23px;
}
.grid-glow {
  background-image: radial-gradient(circle, var(--dot-glow) 0.8px, transparent 1.4px);
  opacity: 0;
  transition: opacity 0.3s ease;
  -webkit-mask-image: radial-gradient(circle 235px at var(--mx, 50%) var(--my, 40%), #000 0%, transparent 72%);
  mask-image: radial-gradient(circle 235px at var(--mx, 50%) var(--my, 40%), #000 0%, transparent 72%);
}
body.is-grid-lit .grid-glow { opacity: 1; }

/* Vågorna hör till samma raster och rullar alltså också med sidan. Lagret
   målar ingenting i sig, så det får följa dokumentet. */
.grid-ripples { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* Ringens radie animeras — måste registreras för att kunna interpoleras */
@property --ripple-r {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

/* Vid klick tänds varumärkesmarken ur punktrastret, avtäckt av en våg som
   går utåt från klickpunkten.

   Märket är uppritat i hela rasterrutor — rutan 6 × 9 rutor, staplarna
   2 rutor breda och 6 höga, den vänstra 3 rutor lägre. Det ger samma
   proportion som logofilen (0,667 mot 0,668) men gör att varje kant hamnar
   mellan två punkter i stället för tvärs igenom en. JS lägger dessutom
   elementet på närmaste rasterlinje, så inga halva punkter kan uppstå.

   Formen ligger i clip-path och vågen i masken — inte tvärtom. En mask med
   kompositlager målas nämligen inte om medan en animerad variabel ändras, så
   formen måste ligga utanför masken. clip-path: path() klarar två åtskilda
   rektanglar; polygon() kan bara beskriva en sammanhängande form.

   Ingen transform på elementet: en transform flyttar referensramen och
   förskjuter punkterna mot grundrastret. */
.grid-ripple {
  --ripple-r: 0px;
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  width: 138px;    /* 6 rutor */
  height: 207px;   /* 9 rutor */
  pointer-events: none;

  /* Fetare prickar än i grundrastret — en silhuett av glesa 1 px-prickar
     läses inte som en form, till skillnad från den svepande ringen. */
  background-image: radial-gradient(circle, var(--dot-ripple) 1.4px, transparent 2px);
  background-size: 23px 23px;
  /* Rutan läggs på jämn rasterlinje i sidans koordinater (se site.js), så
     punkterna hamnar i samma lattice som grundrastret utan fixed-låsning. */

  /* Märket: vänster stapel 3 rutor ned, höger uppdragen mot högerkanten */
  clip-path: path("M0,69 H46 V207 H0 Z M92,0 H138 V138 H92 Z");

  /* Ringen som sveper — tänder framför sig och slocknar bakom sig */
  -webkit-mask-image: radial-gradient(circle at 50% 50%,
    transparent calc(var(--ripple-r) - 34px), #000 var(--ripple-r),
    transparent calc(var(--ripple-r) + 34px));
  mask-image: radial-gradient(circle at 50% 50%,
    transparent calc(var(--ripple-r) - 34px), #000 var(--ripple-r),
    transparent calc(var(--ripple-r) + 34px));

  animation: grid-ripple-tap 2400ms cubic-bezier(0.22, 0.62, 0.3, 1) forwards;
}
/* Ringen växer från klickpunkten. Innerkanten följer efter, så mitten slocknar
   medan fronten går utåt. Slutradien passerar hela rutan (halva diagonalen är
   124 px), så inget blir kvar tänt. */
@keyframes grid-ripple-tap {
  0%   { --ripple-r: 0px;   opacity: 1; }
  88%  {                    opacity: 1; }   /* ringen lyser nästan hela svepet */
  100% { --ripple-r: 175px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .grid-ripple { animation: none; opacity: 0; }
  /* Inget ska behöva rullas fram för den som valt bort rörelse */
  .flow-canvas .acard { opacity: 1; translate: none; transition: none; }
  .wires-smal .wire-lines path { stroke-dashoffset: 0; transition: none; }
  .wires-smal .wire-pulses path { opacity: 1; transition: none; }
}

/* Allt innehåll ovanpå rastret */
.site { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }

/* ==========================================================================
   Toppnav
   ========================================================================== */

/* Varumärket till vänster, sektionerna exakt i mitten, knapparna längst till
   höger — därav rutnätet med lika breda ytterspalter. Navet följer med vid
   scroll, så logotyp, sektioner och Boka möte alltid finns kvar på skärmen. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 18px clamp(22px, 5vw, 64px);
}
/* position: relative så markören kan mätas mot den här rutan, precis som i
   sektionsplattan */
.nav-actions { position: relative; justify-self: end; display: flex; align-items: center; gap: 4px; }


/* Plattan sitter bara bakom sektionslänkarna. Formen finns hela tiden så inget
   hoppar; bara bakgrunden tänds när sidan har rullat. Logotypen och knapparna
   till höger står fritt — slöjan nedan håller dem läsbara. */
.nav-links {
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition: background 0.22s ease, border-color 0.22s ease;
}
.nav.is-stuck .nav-links {
  background: var(--nav-pill);
  border-color: var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}

.nav-brand { display: flex; align-items: center; gap: 7px; justify-self: start; }
.brand-mark {
  flex: none;
  display: block;
  height: 29px;
  aspect-ratio: 66 / 98;
  background: var(--mark-src) center / contain no-repeat;
  translate: 0 -0.02em;
}
.nav-brand-name {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.nav-links { position: relative; display: flex; align-items: center; gap: 2px; padding: 5px 6px; }

/* En enda markör glider mellan länkarna i stället för att varje länk tänder
   och släcker sin egen platta. Kurvan skjuter förbi målet och studsar tillbaka.
   Bredden når fram något snabbare än läget, så den sträcker ut sig i
   rörelseriktningen i stället för att glida som en styv kloss. */
.nav-marker {
  position: absolute;
  z-index: 0;
  left: 0;
  top: var(--y, 0);
  height: var(--h, 0);
  width: var(--w, 0);
  translate: var(--x, 0) 0;
  border-radius: var(--r-pill);
  background: var(--ink-soft);
  opacity: 0;
  pointer-events: none;
  transition:
    translate 0.44s cubic-bezier(0.34, 1.46, 0.5, 1),
    width 0.36s cubic-bezier(0.34, 1.5, 0.5, 1),
    height 0.2s ease,
    top 0.2s ease,
    opacity 0.16s ease;
}
.has-marker .nav-marker { opacity: 1; }
/* Första placeringen ska inte glida in från vänsterkanten */
.nav-marker.is-placing { transition: opacity 0.16s ease; }

.nav-link {
  position: relative;
  z-index: 1;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 550;
  color: var(--text-2);
  transition: color 0.16s ease;
}
.nav-link:hover { color: var(--ink); }
.nav-link.is-active { color: var(--ink); }
/* Logga in och temaknappen delar en egen markör — se .nav-actions ovan. Ingen
   av dem tänder alltså någon egen platta vid hover. */

@media (prefers-reduced-motion: reduce) {
  .nav-marker { transition: opacity 0.16s ease; }
}

/* Sign in — vit primärknapp som på inloggningssidan */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 20px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.13s ease, border-color 0.13s ease, opacity 0.13s ease;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { opacity: 0.88; }
.btn-ghost {
  background: var(--field);
  border: 1px solid var(--line);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--hover); border-color: var(--line-strong); }
.nav .btn { height: 34px; padding: 0 16px; }
.nav-actions .btn { margin-left: 4px; }

/* Temaväxlaren: sol i mörkt läge (klicka för ljust), måne i ljust läge.
   Plattan bakom den tänds först vid scroll, i takt med sektionsplattan —
   längst upp står ikonen bar. */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-2);
  transition: color 0.13s ease, background 0.22s ease, border-color 0.22s ease;
}
.nav.is-stuck .theme-toggle {
  background: var(--nav-pill);
  border-color: var(--line);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
}
/* Markören sköter plattan vid hover, så knappen byter bara textfärg. Plattan
   vid scroll släcks under tiden, annars ligger den ogenomskinligt över
   markören som glider in bakom. */
.theme-toggle:hover { color: var(--ink); }
.nav-actions.has-marker .theme-toggle { background: transparent; border-color: transparent; }
.theme-toggle:active { scale: 0.93; }

/* Ikonerna ligger ovanpå varandra och byter plats genom att rotera ut och in,
   så bytet blir en rörelse i stället för ett klipp. Båda finns hela tiden i
   layouten — display kan inte animeras. */
.theme-toggle svg {
  grid-area: 1 / 1;
  width: 17px;
  height: 17px;
  transition: rotate 0.42s var(--ease), scale 0.42s var(--ease), opacity 0.24s ease;
}
.theme-toggle .i-moon { rotate: -70deg; scale: 0.4; opacity: 0; }
:root[data-theme="light"] .theme-toggle .i-sun  { rotate: 70deg; scale: 0.4; opacity: 0; }
:root[data-theme="light"] .theme-toggle .i-moon { rotate: 0deg; scale: 1; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle svg { transition: opacity 0.15s ease; }
  .theme-toggle .i-moon,
  :root[data-theme="light"] .theme-toggle .i-sun { rotate: none; scale: 1; }
}

/* ==========================================================================
   Sidyta + hero
   ========================================================================== */

.page {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(22px, 5vw, 64px);
}
main { flex: 1; }

/* Ankarlänkarna hoppar till sektionerna — lite luft så rubriken inte
   hamnar tätt mot skärmkanten. */
[id] { scroll-margin-top: 90px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.hero { text-align: center; padding-top: clamp(30px, 8vh, 92px); padding-bottom: clamp(40px, 8vh, 96px); }

/* Statusraden över rubriken: märket till vänster om texten som rullar mellan
   AI-stegen. Märket svävar långsamt upp och ner så raden lever. */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  font-size: 12.5px;
  color: var(--text-3);
}
/* Märket är ritat i CSS här i stället för som bild, så staplarna kan röra sig
   var för sig. Måtten är hämtade ur logofilen: ruta 185 × 277, vänster stapel
   x 0–64 och y 91–276, höger stapel x 121–185 och y 0–185. Märket står stilla;
   staplarna dras in och ut från var sitt håll. */
.eyebrow-mark {
  position: relative;
  flex: none;
  width: 12px;
  aspect-ratio: 185 / 277;
}
.eyebrow-mark i {
  position: absolute;
  width: 34.6%;
  height: 66.8%;
  /* Ljusare än texten runt omkring — märket ska läsa sig som märke */
  background: var(--text-1);
  opacity: 0.82;
}
/* Staplarna står stilla. Rörelsen i raden är att hela märket glider i sidled
   när texten byter längd — den sköts i site.js. */
.eyebrow-mark i:first-child { left: 0;  bottom: 0; }
.eyebrow-mark i:last-child  { right: 0; top: 0; }
.eyebrow-text { transition: opacity 0.25s ease; }
.hero-eyebrow.is-fading .eyebrow-text { opacity: 0; }


/* Bevisraden under underrubriken */
.trust {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  font-size: 12.5px;
  color: var(--text-3);
}
.trust li { display: flex; align-items: center; gap: 8px; }
.trust li + li::before {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--line-strong);
  margin-right: 14px;
}
.hero h1 {
  margin: 0 auto;
  max-width: 26ch;          /* rymmer rubriken på två rader i stället för tre */
  font-family: var(--font-heading);
  font-weight: 555;
  font-size: clamp(44px, 6.6vw, 76px);
  line-height: 1.1;
  letter-spacing: -0.006em;
}
.hero-sub {
  margin: 18px auto 0;
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-2);
}
.hero-cta { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; }

/* ---------- Node-grafen (samma som inloggningssidan) ---------- */

/* Grafen föreställer en app och ritas mörk i båda temana — som ett kodfönster.
   Korten hämtar sina färger ur tokens, så de dras tillbaka lokalt här. */
.flow-wrap {
  margin: 0 auto;
  max-width: 880px;
  --card: #161616;
  --line: rgba(255, 255, 255, 0.08);
  --green: #3fb968;
}
.flow-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 880 / 520;
  pointer-events: none;
}
.auth-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Den smala dragningen hör till mobilen och tänds i media queryn */
.wires-smal { display: none; }
.wire-lines path { stroke: var(--wire); stroke-width: 1.5; }
.wire-pulses path {
  stroke: var(--pulse);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 12 88;
  stroke-dashoffset: 12;
  animation: flow-move 4.6s linear infinite;
  animation-delay: var(--fd, 0s);
}
@keyframes flow-move {
  from { stroke-dashoffset: 12; }
  to   { stroke-dashoffset: -88; }
}

.acard {
  position: absolute;
  left: var(--x);
  top: var(--y, auto);
  bottom: var(--yb, auto);
  width: var(--w);
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-lg);
  z-index: 1;
  animation: node-breathe 5.5s ease-in-out infinite;
  animation-delay: var(--bd, 0s);
}
@keyframes node-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0), 0 10px 30px rgba(0, 0, 0, 0.35); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 12px 38px rgba(0, 0, 0, 0.5); }
}
.acard-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.acard-title {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acard-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

.acard-ico-ai { position: relative; display: block; width: 13px; height: 13px; flex: none; }
.acard-ico-ai > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  filter: brightness(0) invert(1);
  animation: acard-ico-cycle 7.5s linear infinite;
  animation-delay: calc(var(--i) * 2.5s);
}
.acard-ico-ai > svg { filter: none; color: rgba(255, 255, 255, 0.85); }
@keyframes acard-ico-cycle {
  0%          { opacity: 0; }
  2%,   33.3% { opacity: 0.85; }
  37%,  100%  { opacity: 0; }
}

.acard-mailmeta { padding: 8px 12px 0; display: flex; flex-direction: column; gap: 2px; }
.acard-from { font-size: 10.5px; color: rgba(255, 255, 255, 0.55); }
.acard-sub { font-size: 10.5px; color: rgba(255, 255, 255, 0.38); }
.acard-mailbody {
  position: relative;
  overflow: hidden;
  margin: 8px 10px 10px;
  padding: 8px 9px;
  background: #101010;
  border-radius: 8px;
  font-size: 10.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}
.acard-mailbody .dim { color: rgba(255, 255, 255, 0.32); margin-top: 4px; }
.acard-scan {
  position: absolute;
  left: 0; right: 0;
  top: -20%;
  height: 26px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  animation: scan 3s linear infinite;
}
@keyframes scan { from { top: -20%; } to { top: 110%; } }

.acard-ailines { padding: 12px; display: grid; gap: 7px; }
.acard-ailines span {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.14);
  animation: ai-line 2.4s ease-in-out infinite;
}
.acard-ailines span:nth-child(1) { width: 86%; }
.acard-ailines span:nth-child(2) { width: 68%; animation-delay: 0.3s; }
.acard-ailines span:nth-child(3) { width: 78%; animation-delay: 0.6s; }
.acard-ailines span:nth-child(4) { width: 52%; animation-delay: 0.9s; }
@keyframes ai-line {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.9; }
}

.acard-head--editor .acard-dots { display: flex; gap: 4px; }
.acard-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.acard-editor {
  margin: 0;
  padding: 9px 11px 11px;
  background: #1e1e1e;
  border-radius: 0 0 calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px);
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.6;
  white-space: pre;
  overflow: hidden;
  min-height: 158px;
}
.tok-key   { color: #9cdcfe; }
.tok-str   { color: #ce9178; }
.tok-num   { color: #b5cea8; }
.tok-punct { color: #d4d4d4; }
.acard-caret {
  display: inline-block;
  width: 5px;
  height: 11px;
  margin-left: 1px;
  vertical-align: -1px;
  background: rgba(255, 255, 255, 0.75);
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

.acard-bc-logo { flex: none; }
.acard-bc-body {
  padding: 10px 12px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.acard-order { font-size: 11px; color: rgba(255, 255, 255, 0.6); white-space: nowrap; }
.acard-order b { color: #fff; font-weight: 600; }
.acard-ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--green);
  background: rgba(63, 185, 104, 0.12);
  padding: 3px 8px;
  border-radius: var(--r-pill);
  animation: ok-pulse 4.6s ease-in-out infinite;
  white-space: nowrap;
}
@keyframes ok-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .wire-pulses path { animation: none; opacity: 0; }
  .acard, .acard-scan, .acard-ailines span, .acard-ok { animation: none; }
  .acard-caret { animation: none; opacity: 1; }
  .acard-ico-ai > * { animation: none; }
  .acard-ico-ai > *:first-child { opacity: 0.85; }
}

/* ==========================================================================
   Kortsektioner (verktyg m.m.)
   ========================================================================== */

.section { padding-block: clamp(56px, 10vh, 110px); }
.section + .section { border-top: 1px solid var(--line); }

/* Sektionsrubriker centreras som på hero — det håller ihop den långa sidan */
.section-head { text-align: center; max-width: 62ch; margin: 0 auto 34px; }
.section-title {
  font-family: var(--font-heading);
  font-weight: 555;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.18;
  letter-spacing: -0.004em;
  margin: 0 0 10px;
}
.section-sub { color: var(--text-2); margin: 0 auto; }
/* Rubrik utan underrubrik — texten står i stället under innehållet */
.section-head--bare { margin-bottom: 0; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin-top: 26px;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  transition: border-color 0.13s ease;
}
.card:hover { border-color: var(--line-strong); }
.card h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.card p { font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.card-tag {
  display: inline-block;
  margin-top: 14px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--field);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 550;
  color: var(--text-2);
}
.card-grid--wide { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ---------- Problemet: fyra kolumner på en streckad linje ----------
   Pillren sitter ovanpå linjen — det första ifyllt, resten dämpade — och
   varje kolumn slutar i en tunn illustration i en platta. Illustrationen
   ligger med margin-top: auto så alla fyra bottnar jämnt oavsett textlängd. */
.prob-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 28px;
  margin-top: 44px;
}
/* Linjen är två lager: den streckade basen, och ovanpå en fylld del som dras
   fram till det valda pillret när man klickar på en kolumn. */
.prob-grid::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  /* Linjen slutar i sista pillret — den ska inte fortsätta ut till kanten */
  width: var(--linjeslut, 100%);
  border-top: 1px dashed var(--line-strong);
}
.prob-grid::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 0;
  width: var(--fyll, 0px);
  /* Samma streckning som basen — bara färgen byts. Båda lagren börjar på
     left: 0, så strecken hamnar kant i kant och linjen ser hel ut. */
  border-top: 1px dashed var(--accent);
  transition: width 0.6s var(--ease);
}
.prob-col {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 30px;
  cursor: pointer;
}
.prob-pill {
  position: absolute;
  top: -12px;                       /* halva pillerhöjden — mitt på linjen */
  left: 0;
  z-index: 1;                       /* över fyllnadslinjen, som annars ritas
                                       tvärs igenom de passerade pillren */
  padding: 3px 11px;
  border-radius: var(--r-pill);
  background: var(--field);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 550;
  letter-spacing: 0.08em;
  color: var(--text-2);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
@media (hover: hover) {
  .prob-col:hover .prob-pill { border-color: var(--line-strong); color: var(--text-1); }
}
.prob-col.is-active .prob-pill {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.prob-col h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.prob-col p { margin: 0 0 20px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.prob-fig {
  margin-top: auto;
  height: 150px;
  display: grid;
  place-items: center;
  background: var(--field);
  border-radius: var(--r-lg);
}
.prob-fig svg { width: 76%; max-width: 205px; color: var(--text-3); }

/* Två kolumner när fyra inte får plats. Den genomgående linjen funkar bara på
   en rad, så vid radbrytet flyttar strecket in på varje kolumn i stället —
   och fyllnadslinjen försvinner med den. Klicket byter fortfarande piller. */
@media (max-width: 980px) {
  .prob-grid { grid-template-columns: 1fr 1fr; row-gap: 44px; }
  .prob-grid::before, .prob-grid::after { display: none; }
  .prob-col { border-top: 1px dashed var(--line-strong); }
}
/* En kolumn: linjen viks till lodrät och löper längs vänsterkanten, genom
   pillren, förbi text och bild. Fyllda delen dras nedåt till valt piller. */
@media (max-width: 560px) {
  .prob-grid { grid-template-columns: 1fr; row-gap: 46px; }
  .prob-grid::before, .prob-grid::after { display: block; border-top: 0; }
  .prob-grid::before {
    top: 0; bottom: auto; left: 18px; right: auto;   /* 18px = pillrets mitt */
    /* Samma tanke som på datorn, fast på höjden: linjen slutar i sista
       pillret i stället för att fortsätta ner längs sista bilden. */
    width: 0;
    height: var(--linjeslutv, 100%);
    border-left: 1px dashed var(--line-strong);
  }
  .prob-grid::after {
    top: 0; left: 18px;
    width: 0;
    height: var(--fyllv, 0px);
    border-left: 1px dashed var(--accent);
    transition: height 0.6s var(--ease);
  }
  .prob-col { border-top: 0; padding-top: 0; padding-left: 48px; }
  .prob-pill { top: -2px; }
}

/* ---------- Systemen vi kopplar mot ----------
   Ingen ram och ingen platta: logotyperna står fritt på rastret och radbryter
   av sig själva. Marken kombineras med namnet i text, eftersom de flesta
   filerna är rena symboler utan ordbild. */

/* En jämn rad med bara märken. Varje ruta är lika stor, och märket centreras i
   sin ruta — då blir mellanrummen lika breda även om märkena har olika form. */
.logo-wall {
  list-style: none;
  margin: clamp(40px, 7vh, 72px) auto 0;
  padding: 0;
  max-width: 940px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px clamp(52px, 8.5vw, 108px);
}
.logo-wall li {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  opacity: 0.92;
  /* Märket ritas i sin största storlek (se .crop nedan) och hålls nedskalat i
     viloläge. Hovern skalar upp till 1 — alltså ritas bilden aldrig om i en
     högre upplösning mitt i rörelsen, den skalas bara ned. Att skala ned ett
     färdigt raster är gratis; att skala upp tvingar fram en ny ritning, och
     det är det som hackar när pekaren dras snabbt över raden. */
  transform: scale(0.8475);          /* 1 / 1.18 — visuellt samma som förut */
  /* Kort kurva utan lång svans: var(--ease) är gjord för längre förflyttningar
     och kryper de sista tiondelarna, vilket känns tungt på en hover. */
  transition: opacity 0.15s ease, transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Bara på pekare — på touch fastnar :hover efter tryck och märket blir
   stående i förstorat läge. */
@media (hover: hover) {
  /* Eget kompositlager, så skalningen sker på grafikkortet */
  .logo-wall li { will-change: transform; }
  .logo-wall li:hover { opacity: 1; transform: scale(1); }
}

/* Fönsterurklipp: rutan är lika stor som urklippet, och källbilden skalas och
   skjuts så att just den biten hamnar i rutan. Det låter mark och ordbild
   plockas ur samma fil utan att bilderna behöver klippas om.

   Mark och ordbild har var sin skala, satt så att alla märken blir 48 px höga
   och all logotext får samma versalhöjd, 26 px. Filhöjden duger inte som mått:
   Google Workspace har stapel under baslinjen och Business Central två rader,
   så lika filhöjd hade gett olika stora bokstäver. */
.crop {
  display: block;
  flex: none;
  background-image: var(--img);
  background-repeat: no-repeat;
  background-size: calc(var(--iw) * var(--k) * var(--z, 1) * 1px) auto;
  background-position: calc(var(--ix) * var(--k) * var(--z, 1) * -1px)
                       calc(var(--iy) * var(--k) * var(--z, 1) * -1px);
  width: calc(var(--cw) * var(--k) * var(--z, 1) * 1px);
  height: calc(var(--ch) * var(--k) * var(--z, 1) * 1px);
}

/* Loggväggens märken ritas 18 % större än de visas, så hovern aldrig behöver
   en ny upplösning. Rutan runt dem står kvar på sin layoutstorlek — det är
   bara bilden som ritas större och skalas ned igen. */
.logo-wall .crop { --z: 1.18; }

.systems-note {
  margin: clamp(40px, 6vh, 62px) auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-3);
}

/* ---------- Stegen under node-grafen ---------- */

.steps {
  list-style: none;
  margin: clamp(34px, 6vh, 62px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 26px 30px;
}
.steps li { border-top: 1px solid var(--line); padding-top: 16px; }
.step-no {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 10px;
}
.steps h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.steps p { font-size: 13.5px; line-height: 1.6; color: var(--text-2); }

/* ---------- FAQ ---------- */

.faq { max-width: 760px; margin: 0 auto; }
.faq details {
  border-top: 1px solid var(--line);
  /* Håller omräkningen lokal när svaret fälls ut — utan den får hela sidan
     räkna om layouten för varje bildruta i animationen. */
  contain: layout;
}
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 2px;
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  transition: color 0.12s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--text-2); }
/* Plustecken som vrids till kryss när svaret öppnas. Vridningen hänger på en
   klass, inte på [open] — JS håller kvar open under hopfällningen, så [open]
   släpper först när animationen är klar och ikonen hade vänt för sent. */
.faq summary::after {
  content: "";
  flex: none;
  width: 12px; height: 12px;
  background:
    linear-gradient(var(--text-3), var(--text-3)) center/12px 1.5px no-repeat,
    linear-gradient(var(--text-3), var(--text-3)) center/1.5px 12px no-repeat;
  transition: rotate 0.85s var(--ease), background-size 0.4s var(--ease);
}
/* Ett kvarts varv åt höger — plustecknet blir ett kryss, inget helt varv */
.faq details.is-open summary::after { rotate: 45deg; }
.faq summary:hover::after {
  background:
    linear-gradient(var(--ink), var(--ink)) center/12px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center/1.5px 12px no-repeat;
}

/* Svaret fälls ut och ihop i stället för att klippas fram. Höjden animeras av
   JS med Web Animations API — <details> kan inte animera sin egen höjd. */
.faq-body { overflow: hidden; }
.faq details p {
  padding: 0 2px 22px;
  max-width: 68ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-2);
}

/* ---------- Avslutande CTA ---------- */

.cta {
  text-align: center;
  padding-block: clamp(64px, 12vh, 130px);
  border-top: 1px solid var(--line);
}
.cta h2 {
  font-family: var(--font-heading);
  font-weight: 555;
  font-size: clamp(30px, 4.2vw, 50px);
  line-height: 1.15;
  letter-spacing: -0.004em;
  margin: 0 auto;
  max-width: 20ch;
}
.cta p { margin: 14px auto 28px; max-width: 46ch; color: var(--text-2); }

/* ---------- Promptrutan i avslutet ----------
   Rund ruta med rund skickaknapp — samma gest som att skicka till en AI. */
.ask {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 7px 7px 7px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: border-color 0.16s ease, background 0.16s ease;
}
.ask:focus-within { border-color: var(--line-strong); background: var(--field); }
.ask-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: none;
  background: none;
  color: var(--text-1);
  font: inherit;
  font-size: 15px;
  outline: none;
}
.ask-input::placeholder { color: var(--text-3); }
.ask-send {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  transition: opacity 0.13s ease, scale 0.13s ease;
}
.ask-send svg { width: 17px; height: 17px; }
.ask-send:hover { opacity: 0.88; }
.ask-send:active { scale: 0.93; }

/* ---------- Språkvalet ----------
   Rutan är mörk i båda temana, så de mörka värdena sätts lokalt i stället för
   att ärvas. Samma form som kontaktformuläret. */

.lang { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; }
.lang[hidden] { display: none; }
.lang-veil {
  position: fixed;
  inset: 0;
  background: rgba(8, 8, 8, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  animation: modal-in 0.28s ease both;
}
.lang-card {
  --card: #161616;
  --field: #1c1c1c;
  --hover: #242424;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text-1: #ffffff;
  --text-2: rgba(255, 255, 255, 0.55);
  --text-3: rgba(255, 255, 255, 0.38);
  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.07);

  position: relative;
  width: min(100%, 480px);
  padding: 38px 34px 34px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--text-1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  text-align: center;
  animation: modal-rise 0.42s var(--ease) both;
}
.lang-title {
  margin: 0 0 6px;
  font-family: var(--font-heading);
  font-weight: 555;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.004em;
}
.lang-sub { color: var(--text-3); font-size: 13.5px; margin-bottom: 26px; }

/* Två rutor sida vid sida med en markör som snappar mellan dem — samma
   kurva som i navet, den skjuter förbi och studsar tillbaka. */
.lang-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lang-marker {
  position: absolute;
  z-index: 0;
  left: 0;
  top: var(--y, 0);
  width: var(--w, 0);
  height: var(--h, 0);
  translate: var(--x, 0) 0;
  border-radius: 14px;
  background: var(--ink-soft);
  border: 1px solid var(--line-strong);
  opacity: 0;
  pointer-events: none;
  transition:
    translate 0.44s cubic-bezier(0.34, 1.46, 0.5, 1),
    width 0.36s cubic-bezier(0.34, 1.5, 0.5, 1),
    height 0.2s ease,
    top 0.2s ease,
    opacity 0.18s ease;
}
.lang-grid.has-marker .lang-marker { opacity: 1; }
.lang-marker.is-placing { transition: opacity 0.18s ease; }

.lang-opt {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  place-items: center;
  padding: 26px 12px 22px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--text-2);
  transition: color 0.16s ease, border-color 0.16s ease;
}
.lang-opt:hover { color: var(--text-1); border-color: transparent; }
.lang-code {
  font-family: var(--font-heading);
  font-weight: 555;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--text-1);
}
.lang-name { font-size: 13px; font-weight: 550; }

@media (prefers-reduced-motion: reduce) {
  .lang-veil, .lang-card { animation: none; }
  .lang-marker { transition: opacity 0.18s ease; }
}
@media (max-width: 420px) {
  .lang-card { padding: 30px 20px 26px; }
  .lang-code { font-size: 30px; }
}

/* ---------- Kontaktformuläret ---------- */

/* Rullningen ligger på överlägget, inte på kortet — ett kort som rullar klipper
   rullgardinerna som fälls ut ur det. safe center hindrar att toppen kapas när
   kortet är högre än fönstret. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  justify-items: center;
  align-items: center;
  align-items: safe center;
  padding: 24px;
  overflow-y: auto;
}
.modal[hidden] { display: none; }
.modal-veil {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  animation: modal-in 0.24s ease both;
}
.modal-card {
  position: relative;
  width: min(100%, 520px);
  padding: 34px 34px 30px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  animation: modal-rise 0.34s var(--ease) both;
}
@keyframes modal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-rise {
  from { opacity: 0; translate: 0 14px; scale: 0.98; }
  to   { opacity: 1; translate: 0 0;    scale: 1; }
}
.modal-close {
  position: absolute;
  top: 16px; right: 16px;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: var(--text-3);
  transition: color 0.13s ease, background 0.13s ease;
}
.modal-close svg { width: 16px; height: 16px; }
.modal-close:hover { color: var(--ink); background: var(--ink-soft); }

.modal-card h2 {
  margin: 0 0 10px;
  padding-right: 34px;
  font-family: var(--font-heading);
  font-weight: 555;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.004em;
}
.modal-sub { color: var(--text-2); font-size: 14.5px; line-height: 1.6; margin-bottom: 22px; }

.modal-form { display: grid; gap: 10px; }
.modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Fälten: fylld platta utan tung ram, som i förlagan */
.fld {
  width: 100%;
  min-width: 0;
  padding: 14px 16px;
  background: var(--field);
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--text-1);
  font: inherit;
  font-size: 14.5px;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.fld::placeholder { color: var(--text-3); }
.fld:hover { border-color: var(--line); }
.fld:focus { outline: none; border-color: var(--line-strong); background: var(--hover); }
/* Rött markeras bara av JS vid inskick. :invalid duger inte — en tom required
   select är ogiltig från början och hade lyst rött innan man rört formuläret. */
.fld.is-fel { border-color: #e05252; }
textarea.fld { resize: vertical; min-height: 84px; line-height: 1.55; }

/* ---------- Egen rullgardin ----------
   Systemets <select> öppnar operativsystemets meny, som varken följer temat
   eller går att forma. Därför en egen knapp och lista. */
.field { min-width: 0; }
.fld-fel { margin-top: 6px; font-size: 12.5px; color: #e05252; }

.pick { position: relative; }
.pick-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}
.pick-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-value.is-tom { color: var(--text-3); }
.pick-arrow {
  flex: none;
  width: 15px; height: 15px;
  color: var(--text-3);
  transition: rotate 0.24s var(--ease);
}
.pick.is-oppen .pick-arrow { rotate: 180deg; }
.pick.is-oppen .pick-btn { border-color: var(--line-strong); background: var(--hover); }

.pick-list {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 300px;   /* rymmer sex val utan att sista raden halveras */
  overflow-y: auto;
  background: var(--hover);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  animation: pick-in 0.16s var(--ease) both;
}
.pick-list[hidden] { display: none; }
/* Fälls uppåt när det inte får plats nedåt */
.pick-list.is-upp { top: auto; bottom: calc(100% + 6px); animation-name: pick-in-upp; }
@keyframes pick-in {
  from { opacity: 0; translate: 0 -5px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes pick-in-upp {
  from { opacity: 0; translate: 0 5px; }
  to   { opacity: 1; translate: 0 0; }
}
.pick-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14.5px;
  color: var(--text-2);
  cursor: pointer;
}
.pick-list li:hover,
.pick-list li.is-markerad { background: var(--ink-soft); color: var(--text-1); }
/* Bock på det valda, som i förlagan */
.pick-list li[aria-selected="true"] { color: var(--text-1); }
.pick-list li[aria-selected="true"]::after {
  content: "";
  flex: none;
  width: 13px; height: 8px;
  border-left: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  rotate: -45deg;
  translate: 0 -2px;
}

.modal-submit { width: 100%; height: 48px; border-radius: var(--r-pill); margin-top: 8px; }
.modal-note { margin-top: 12px; font-size: 13.5px; text-align: center; color: var(--text-2); }
.modal-note.is-fel { color: #e05252; }
.modal-note.is-ok { color: var(--green); }

/* ---------- Kaksamtycke ----------
   Liten platta nere till vänster i stället för ett band över hela skärmen.
   Den ska gå att ignorera medan man läser, inte blockera sidan. */
.cookie {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 60;
  width: 340px;
  max-width: calc(100vw - 32px);
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.45);
}
:root[data-theme="light"] .cookie { box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.16); }
@media (prefers-reduced-motion: no-preference) {
  .cookie { animation: cookie-in 0.4s var(--ease) both; }
  @keyframes cookie-in {
    from { opacity: 0; translate: 0 12px; }
    to   { opacity: 1; translate: 0 0; }
  }
}
.cookie-text {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}
.cookie-actions { display: flex; gap: 8px; }
/* Knapparna delar bredden lika — ingen av dem ska se ut som förvalet */
.cookie-btn { flex: 1; height: 36px; padding-inline: 12px; font-size: 13px; justify-content: center; }

@media (max-width: 560px) {
  .cookie { left: 16px; right: 16px; bottom: 16px; width: auto; }
}

/* Spamfällan. Dold för människor men inte för bottar, som fyller i allt de
   hittar — är den ifylld kastas inskicket. Ligger utanför skärmen i stället
   för display:none, eftersom en del bottar hoppar över gömda fält. */
.fallucka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Fälten måste gå att markera i, till skillnad från resten av sidan */
input, textarea, select {
  -webkit-user-select: text;
  user-select: text;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .modal-veil, .modal-card { animation: none; }
}
@media (max-width: 520px) {
  .modal-card { padding: 26px 20px 24px; }
  .modal-row { grid-template-columns: 1fr; }
}

/* Prosa (about, blogg) */
.prose { max-width: 62ch; }
.prose h1 {
  font-family: var(--font-heading);
  font-weight: 555;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.004em;
  margin: 0 0 18px;
}
.prose p { color: var(--text-2); font-size: 16px; line-height: 1.7; margin-bottom: 16px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.prose a:hover { border-color: var(--ink); }

/* Tomt läge (bloggen) */
.empty {
  margin-top: 34px;
  padding: 40px 26px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
}

/* ==========================================================================
   Sidfot — samma uppställning som inloggningssidans nedre vänsterhörn
   ========================================================================== */

.footer {
  border-top: 1px solid var(--line);
  padding: 40px clamp(22px, 5vw, 64px) 46px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
  justify-content: space-between;
}
.footer-brand { display: flex; align-items: center; gap: 7px; }
.footer-desc { max-width: 46ch; margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.footer-links { display: flex; gap: 22px; font-size: 13.5px; }
.footer-links a { color: var(--text-2); transition: color 0.12s ease; }
.footer-links a:hover { color: var(--ink); }
.footer-copy { width: 100%; margin-top: 4px; font-size: 12px; color: var(--text-3); text-align: right; }

/* ==========================================================================
   Smala skärmar
   ========================================================================== */

/* Pekskärmar målar en egen platta bakom det man trycker på — en fyrkant i
   webbläsarens egen färg, som varken följer våra hörn eller vårt tema. Den
   släcks här. Regeln gäller bara enheter utan pekare, så datorvyn kan inte
   påverkas; egenskapen har ändå ingen effekt med mus. */
@media (hover: none) {
  html { -webkit-tap-highlight-color: transparent; }
}

/* Hamburgaren finns bara på mobil */
.nav-burger { display: none; }

@media (max-width: 1100px) {
  /* Navet krymper till logotyp, temaknapp och hamburgare. Sektionerna,
     Logga in och Boka möte flyttar in i panelen i stället — allt annat fick
     inte plats: "Logga in" och "Boka möte" bröts till två rader var och navet
     åt 180 px av skärmhöjden. */
  .nav {
    grid-template-columns: 1fr auto;
    gap: 12px;
    top: 8px;
    margin: 8px 24px 0;
    padding: 6px 6px 6px 15px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    transition: background 0.22s ease, border-color 0.22s ease;
  }
  /* Vid scroll blir hela navet en kapsel — samma gest som plattan på dator */
  .nav.is-stuck {
    background: var(--nav-pill);
    border-color: var(--line);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    backdrop-filter: blur(16px) saturate(1.4);
  }
  .nav-links,
  .nav-actions .nav-link,
  .nav-actions .btn { display: none; }
  /* Markören hör till hovern och har inget att göra på en pekskärm */
  .nav-actions .nav-marker { display: none; }
  .nav-actions { gap: 2px; }
  /* Kapseln bär redan sin egen bakgrund — knapparna i den ska stå fria */
  .nav.is-stuck .theme-toggle {
    background: transparent;
    border-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Navet ligger över panelen så logotypen och krysset syns och går att nå.
     Kapseln släcks under tiden — den hör till sidan, inte till menyn. */
  .nav { z-index: 95; }
  .nav.is-meny {
    background: transparent;
    border-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav-burger {
    display: grid;
    align-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 11px;
    border-radius: 50%;
    color: var(--text-1);
  }
  .nav-burger span {
    display: block;
    height: 1.3px;
    border-radius: 2px;
    background: currentColor;
    transition: translate 0.3s var(--ease), rotate 0.3s var(--ease);
  }
  /* Strecken möts och korsas när menyn är öppen */
  .nav-burger[aria-expanded="true"] span:first-child { translate: 0 3.15px; rotate: 45deg; }
  .nav-burger[aria-expanded="true"] span:last-child  { translate: 0 -3.15px; rotate: -45deg; }

  /* Hamburgaren får ingen platta alls vid tryck — varken webbläsarens eller
     vår egen. Återkopplingen är att strecken går ihop till ett kryss. */
  .menu-links a:active { color: var(--text-2); }
  .menu-login:active { background: var(--hover); }
}

/* ---------- Mobilmenyn ----------
   Ligger utanför navet och finns bara på mobil. */
.menu { display: none; }

@media (max-width: 1100px) {
  .menu { position: fixed; inset: 0; z-index: 90; display: block; }
  .menu[hidden] { display: none; }

  .menu-veil {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.32s var(--ease);
  }
  .menu.is-oppen .menu-veil { opacity: 1; }

  /* Glider in från höger och täcker skärmen */
  .menu-panel {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(100%, 460px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 104px 26px calc(30px + env(safe-area-inset-bottom));
    background: var(--bg);
    border-left: 1px solid var(--line);
    translate: 100% 0;
    transition: translate 0.42s var(--ease);
    overflow-y: auto;
  }
  .menu.is-oppen .menu-panel { translate: 0 0; }

  .menu-links { list-style: none; margin: 0; padding: 0; }
  .menu-links a {
    display: block;
    padding: 14px 0;
    font-family: var(--font-heading);
    font-weight: 555;
    font-size: clamp(30px, 8.6vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.004em;
    color: var(--text-1);
    /* Raderna kommer in en efter en när panelen öppnas */
    opacity: 0;
    translate: 22px 0;
    transition: opacity 0.34s ease, translate 0.44s var(--ease);
    transition-delay: calc(var(--i, 0) * 42ms);
  }
  .menu.is-oppen .menu-links a { opacity: 1; translate: 0 0; }
  .menu-links li + li { border-top: 1px solid var(--line); }

  .menu-bottom { display: grid; gap: 12px; }
  .menu-login {
    display: grid;
    place-items: center;
    height: 52px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: var(--field);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-1);
  }
  .menu-cta { height: 52px; border-radius: var(--r-pill); font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-panel, .menu-veil, .menu-links a { transition: none; }
}

/* Grafen växlar till staplat läge vid 980 px, inte 720. Korten har fasta
   bredder — kodkortet 300 px, BC 208 px — och den breda uppställningen kräver
   att duken är hela 880 px. Duken når dit först runt 980 px fönsterbredd, när
   sidans egen ytterkantsmarginal räknats bort. Under det hamnade kort utanför
   och vid 768 px gav det sidledsscroll på surfplatta. */
@media (max-width: 980px) {
  /* ---------- Node-grafen på smal skärm ----------
     Korten har exakt samma storlek som på dator — samma bredder, samma text.
     Skillnaden är bara att de står staplade i sicksack med luft emellan, så
     man rullar igenom flödet i stället för att läsa det i bredd.

     Grafen ritas i en fast ruta, 320 x 740, och skalas ned som en enhet om
     skärmen är smalare än så. Samma grepp som på inloggningssidan: låter man
     i stället rutan krympa skalar korten men inte texten i dem, och då växer
     de på höjden och krockar. Faktorn sätts av site.js i --fs. */
  .flow-wrap {
    display: block;
    width: 100%;
    max-width: 320px;
    margin-inline: auto;
    height: calc(905px * var(--fs, 1));
  }
  .flow-canvas {
    width: 320px;
    height: 905px;
    aspect-ratio: auto;
    transform-origin: top left;
    transform: scale(var(--fs, 1));
  }
  .wires-bred { display: none; }
  .wires-smal { display: block; }

  /* Bredderna är datorvyns i pixlar, uttryckta mot rutans 320:
     250, 230, 300 och 208 px. Lägena växlar höger–vänster, och glappen är
     55 px så tråden mellan korten syns. --yb nollas: korten står med
     bottenläge i sin inline-stil, och sätts både topp och botten spänns de
     ut mellan dem i stället för att växa efter innehållet. */
  .flow-canvas .acard:nth-of-type(1) { --x: 22%   !important; --y: 0%     !important; --w: 78.1% !important; }
  .flow-canvas .acard:nth-of-type(2) { --x: 0%    !important; --y: 32.8%  !important; --yb: auto !important; --w: 71.9% !important; }
  .flow-canvas .acard:nth-of-type(3) { --x: 6.3%  !important; --y: 56.5%  !important; --yb: auto !important; --w: 93.8% !important; }
  .flow-canvas .acard:nth-of-type(4) { --x: 0%    !important; --y: 90.4%  !important; --yb: auto !important; --w: 65%   !important; }

  /* ---------- Flödet ritas fram medan man rullar ----------
     Inget syns från början. När ett kort kommer in i bild dras först tråden
     dit, sedan kliver kortet fram. Trådarna har pathLength="100" i markupen,
     så en streckad linje på 100 kan dras genom att förskjutningen går till
     noll — samma längd oavsett hur lång banan faktiskt är. */
  .flow-canvas .acard {
    opacity: 0;
    translate: 0 20px;
    transition: opacity 0.55s ease, translate 0.7s var(--ease);
  }
  .flow-canvas .acard.is-in { opacity: 1; translate: 0 0; }

  .wires-smal .wire-lines path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 0.75s ease;
  }
  .wires-smal .wire-lines path.is-in { stroke-dashoffset: 0; }
  /* Ljuspulsen får inte löpa på en tråd som ännu inte finns */
  .wires-smal .wire-pulses path { opacity: 0; transition: opacity 0.4s ease 0.5s; }
  .wires-smal .wire-pulses path.is-in { opacity: 1; }

}

@media (max-width: 720px) {
  /* Rubriker, logotyper och avslut står centrerade på mobil. Brödtext inuti
     kort och steg är kvar vänsterställd — den läses radvis och blir orolig
     om varje rad börjar på ny plats. */
  .hero, .section-head, .cta, .systems-note { text-align: center; }
  .hero-cta, .trust, .logo-wall { justify-content: center; }
  /* På smal skärm blir förskjutningarna bara stökiga — raden rätas upp */
  .logo-wall { gap: 30px 36px; }
  .logo-wall li { translate: none; }

  /* Underrubriken: mindre, och slutet av meningen stryks */
  .hero-sub { font-size: 14.5px; }
  .bara-bred { display: none; }
  .bara-smal { display: inline; }
  /* Raderna vägs mot varandra så sista raden inte blir ett ensamt ord */
  .cta p, .hero-sub, .section-sub, .systems-note { text-wrap: balance; }

  /* Bevisen står kvar på en rad med prick emellan, som på dator — bara tätare */
  .trust { gap: 8px 12px; font-size: 11.5px; }
  .trust li + li::before { margin-right: 8px; }

  /* Veckan centreras, men rubriken och texten under den står kvar till vänster */
  .step-no { text-align: center; }

  /* Sidfoten följer med in i mitten så sidan slutar som den börjar */
  .footer { justify-content: center; text-align: center; }
  /* Varumärket får ta plats här — det är sidans sista intryck, och på mobil
     finns inget nav bredvid som konkurrerar om uppmärksamheten. */
  .footer-brand { justify-content: center; gap: 11px; margin-bottom: 4px; }
  .footer-brand .brand-mark { height: 46px; }
  .footer-brand .nav-brand-name { font-size: 34px; }
  .footer-desc { margin-inline: auto; }
  .footer-links { justify-content: center; }
  .footer-copy { text-align: center; }

  /* Sidfotens länkrad var enda orsaken till att sidan gick att dra i sidled:
     sex länkar på en rad blev 491 px bred i en 375 px skärm. */
  .footer-links { flex-wrap: wrap; row-gap: 14px; }
  /* Träffytorna var 22 px höga — för små för en tumme */
  .footer-links a { padding: 6px 0; }

  /* Rubriken får aldrig gå till tre rader. Uppmätt största storlek för två
     rader: 25 px vid 320, 30 px vid 375, 35 px vid 430, 41 px vid 500 — kurvan
     följer 8,9 % av skärmbredden minus sidmarginalen. Taket på 47 px möter
     datorvyns värde vid brytpunkten så det inte hoppar. */
  .hero h1 { font-size: clamp(23px, calc(8.9vw - 4px), 47px); }
  /* Engelska rubriken har längre ord — "computer" tvingar en tidigare
     brytning — så den behöver en snävare kurva för att hålla två rader.
     Uppmätt största storlek: 23 px vid 320, 28 vid 375, 33 vid 430, 46 vid 600. */
  html[lang="en"] .hero h1 { font-size: clamp(22px, calc(8.2vw - 4px), 47px); }}

/* ==========================================================================
   Siffersektionerna: Varför just nu, Vad det kostar, Säkerhet.
   Samma formspråk som resten — kort på var(--card), linjer på var(--line),
   och staplarna fylls av skrollen precis som trådarna och pillren.
   ========================================================================== */
.stat-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 44px;
  align-items: start;
  max-width: 940px;
  margin: 0 auto;
}
.stat-copy p { margin: 0 0 16px; font-size: 15px; line-height: 1.7; color: var(--text-2); }
.stat-copy p:last-child { margin-bottom: 0; }
.stat-copy strong { color: var(--text-1); }
.stat-card {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
}
.stat-cap {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 20px;
}
.stat-row { margin-bottom: 18px; }
.stat-row:last-of-type { margin-bottom: 0; }
.stat-label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  margin-bottom: 7px;
  color: var(--text-2);
}
.stat-pct { font-family: var(--font-mono); color: var(--text-1); }
.stat-track { height: 7px; background: var(--field); border-radius: var(--r-pill); overflow: hidden; }
.stat-fyll {
  height: 100%;
  width: 0;                          /* fylls till --mal när raden kommer i bild */
  background: var(--accent);
  border-radius: var(--r-pill);
  transition: width 1.1s var(--ease);
}
.stat-fyll.is-in { width: var(--mal); }
@media (prefers-reduced-motion: reduce) {
  .stat-fyll { transition: none; width: var(--mal); }
}
.stat-kalla { margin: 20px 0 0; font-size: 12px; color: var(--text-3); }
.stat-kalla a, .kost-kalla a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Jämförelsen: bockar och kryss ----------
   Rader med ett plus bär siffrorna bakom och fälls ut på klick, med samma
   0fr->1fr-rörelse som hindren. Kryssens röda ton är satt lokalt eftersom
   paletten i övrigt är enfärgad. */
.jmf { max-width: 940px; margin: 0 auto; --ok: var(--green); --nej: #e05252; }
:root[data-theme="light"] .jmf { --nej: #c04437; }
.jmf-huvud, .jmf-topp {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 12px;
  align-items: center;
}
.jmf-huvud { padding: 0 18px 12px; border-bottom: 1px solid var(--line-strong); }
.jmf-huvud span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
}
.jmf-huvud span:first-child { text-align: left; }
.jmf-huvud .jmf-vi { color: var(--text-1); }
.jmf-rad { border-bottom: 1px solid var(--line); }
.jmf-topp {
  width: 100%;
  padding: 16px 18px;
  text-align: left;
  border-radius: var(--r-md);
  transition: background-color 0.3s ease;
}
div.jmf-topp { cursor: default; }
.jmf-namn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 550;
  color: var(--text-2);
  transition: color 0.3s ease;
}
.jmf-plus { width: 14px; height: 14px; flex: none; color: var(--text-3); transition: rotate 0.3s var(--ease); }
.jmf-rad.is-oppen .jmf-plus { rotate: 45deg; }
.jmf-mark { display: flex; justify-content: center; }
.jmf-mark svg { width: 16px; height: 16px; transition: scale 0.3s var(--ease); }
.jmf-ja { color: var(--ok); }
.jmf-nej { color: var(--nej); }
@media (hover: hover) {
  .jmf-topp:hover { background: var(--ink-soft); }
  .jmf-topp:hover .jmf-namn { color: var(--text-1); }
  .jmf-topp:hover .jmf-mark svg { scale: 1.2; }
}
.jmf-mer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.jmf-rad.is-oppen .jmf-mer { grid-template-rows: 1fr; }
.jmf-mer-inner { overflow: hidden; visibility: hidden; transition: visibility 0.45s; }
.jmf-rad.is-oppen .jmf-mer-inner { visibility: visible; }
.jmf-mer-text { margin: 0; padding: 2px 18px 18px; font-size: 13.5px; line-height: 1.65; color: var(--text-2); max-width: 72ch; }
.jmf-mer-text a { text-decoration: underline; text-underline-offset: 3px; }
.jmf-not { margin: 16px 0 0; padding: 0 18px; font-size: 12.5px; color: var(--text-3); }

@media (max-width: 720px) {
  .jmf-huvud, .jmf-topp { grid-template-columns: 1.4fr 46px 46px 52px; gap: 6px; padding-inline: 10px; }
  .jmf-huvud span { font-size: 9px; letter-spacing: 0.03em; }
  .jmf-namn { font-size: 12.5px; }
  .jmf-mer-text { padding-inline: 10px; }
  .jmf-not { padding-inline: 10px; }
}

.sak-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 940px;
  margin: 0 auto;
}
.sak-ruta {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  transition: border-color 0.13s ease;
}
.sak-ruta:hover { border-color: var(--line-strong); }
.sak-ruta h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.sak-ruta p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
/* Ärliga raden: streckad ram, spänner hela bredden */
.sak-arlig { grid-column: 1 / -1; border-style: dashed; }

.systems-note strong { color: var(--text-1); font-weight: 600; }

@media (max-width: 980px) {
  .stat-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 720px) {
  .sak-grid { grid-template-columns: 1fr; }
  .stat-card { padding: 20px; }
}
.ihop { white-space: nowrap; }

/* ---------- Hinder-utfällaren ----------
   Höjden animeras med grid-template-rows 0fr -> 1fr: mjukt, utan att någon
   behöver mäta innehållet. Staplarna där inne fylls av samma observatör som
   de stora — de har storlek noll tills panelen öppnas, så fyllningen startar
   exakt när utfällningen gör plats. */
.stat-mer-rail { max-width: 940px; margin: 14px auto 0; }
.stat-mer {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  /* Stängd står rutan under statistikkortet, i exakt dess bredd:
     vänsterspalten (1.05 av 2.05) plus mellanrummet på 44 px.
     Öppnas den växer den först ut över hela bredden, sedan nedåt —
     stängs den går den ihop uppåt först och glider sedan tillbaka.
     Ordningen styrs av fördröjningarna här och på panelen nedan. */
  margin-left: calc((100% - 44px) * 0.5122 + 44px);
  /* Bredd och höjd rör sig samtidigt — en enda rörelse snett nedåt vänster */
  transition: margin-left 0.45s var(--ease), border-color 0.13s ease;
}
.stat-mer.is-oppen { margin-left: 0; }
.stat-mer:hover { border-color: var(--line-strong); }
.stat-mer-knapp {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-1);
  text-align: left;
}
.stat-mer-plus {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--text-2);
  transition: rotate 0.3s var(--ease);
}
.stat-mer.is-oppen .stat-mer-plus { rotate: 45deg; }
.stat-mer-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.stat-mer.is-oppen .stat-mer-panel { grid-template-rows: 1fr; }
.stat-mer-inner {
  overflow: hidden;
  visibility: hidden;                /* länken där inne ska inte gå att tabba
                                        till medan panelen är stängd */
  transition: visibility 0.5s;
  padding: 0 22px;
}
.stat-mer.is-oppen .stat-mer-inner { visibility: visible; padding-bottom: 20px; }
.stat-mer-ingress { margin: 2px 0 16px; font-size: 13.5px; color: var(--text-2); }
.hinder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
}
.stat-mer-slut { margin: 20px 0 0; font-size: 14px; color: var(--text-2); }
.stat-mer-slut strong { color: var(--text-1); }
.stat-mer .stat-kalla { margin-top: 12px; }

@media (max-width: 980px) {
  .stat-mer, .stat-mer.is-oppen { margin-left: 0; transition: border-color 0.13s ease; }
}
@media (max-width: 720px) {
  .hinder-grid { grid-template-columns: 1fr; gap: 14px; }
}