/* =========================================================================
   Webbpuls – tema för undersidorna (samma tema som startsidan)
   Tokens, typsnitt, header, footer, knappar, kort och grain/glow kommer från
   css/start.css. Rörelsen är lättare än på startsidan: ingen canvas, bara
   subtila reveals som animerar transform och opacity.

   Avsnittet mellan tema:kritisk:start och tema:kritisk:slut kopieras inline i
   varje undersidas <head> av scripts/tema-undersidor.py (första skärmen).
   Ordningen i filen är densamma som i den inlinade delen, så kaskaden blir
   likadan. Redigera hellre här än i sidorna.
   ========================================================================= */

/* tema:kritisk:start */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ytor */
  --ink-0: #05060a;
  --ink-1: #0a0c12;
  --ink-2: #101319;
  --ink-3: #161a23;

  /* text */
  --fg: #f5f6fa;
  --fg-2: #bcbfcd;
  --fg-3: #949aac;

  /* linjer */
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.2);

  /* accenter */
  --brand: #7b88ff;
  --brand-soft: rgba(123, 136, 255, 0.16);
  --mint: #a6f2d8;
  --mint-dim: rgba(166, 242, 216, 0.22);

  /* typografi */
  --font: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --serif: "Instrument Serif", ui-serif, Georgia, serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
  --text-8xl: 6rem;

  /* spacing */
  --sp-0: 0;
  --sp-25: 2px;
  --sp-50: 4px;
  --sp-75: 8px;
  --sp-100: 12px;
  --sp-200: 16px;
  --sp-300: 24px;
  --sp-400: 32px;
  --sp-500: 40px;
  --sp-600: 48px;
  --sp-700: 64px;
  --sp-800: 80px;
  --sp-900: 96px;

  /* radier */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-3xl: 32px;
  --r-round: 9999px;

  /* rörelse */
  --e: cubic-bezier(0.22, 1, 0.36, 1);
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-hover: 240ms;
  --t-state: 500ms;

  --gut: clamp(1.25rem, 5vw, 4rem);
  --col: 1200px;
  --led: 66ch;

  color-scheme: dark;
  accent-color: var(--mint);
}

/* ---------------------------------------------------------------- reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
  background: var(--ink-0);
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.65;
  font-weight: 400;
  color: var(--fg);
  background: var(--ink-0);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}
ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}
img, svg, canvas, video {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
button, input, textarea, select {
  font: inherit;
  color: inherit;
}
p {
  text-wrap: pretty;
}
h1, h2, h3 {
  text-wrap: balance;
  font-weight: 700;
}
::selection {
  background: var(--mint);
  color: #04120c;
}
.sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.skip {
  position: absolute;
  top: -100px;
  left: var(--sp-200);
  z-index: 200;
  padding: var(--sp-100) var(--sp-200);
  background: var(--mint);
  color: #04120c;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-md);
  transition: transform var(--t-hover) var(--e);
}
.skip:focus-visible {
  transform: translateY(110px);
}
/* Utan JS: header-CTA:n behåller sin sidopadding (vinner över .no-js .nav-links a) */
.no-js .nav-links .nav-cta {
  padding: var(--sp-75) var(--sp-200);
}

/* ================================================================ NAV */
.nav {
  position: sticky;
  top: 0;
  z-index: 70;
  display: flex;
  justify-content: center;
  padding: var(--sp-200) var(--gut) 0;
  pointer-events: none;
}
.nav-pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-500);
  width: 100%;
  max-width: var(--col);
  padding: var(--sp-75) var(--sp-75) var(--sp-75) var(--sp-300);
  border: 1px solid var(--line);
  border-radius: var(--r-round);
  background: rgba(10, 12, 18, 0.62);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 18px 50px -30px #000, inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform var(--t-state) var(--e), opacity var(--t-state) var(--e);
}
@supports not (backdrop-filter: blur(4px)) {
  .nav-pill {
    background: #0b0e15;
  }
}
.nav-scrolled .nav-pill {
  background: rgba(8, 10, 15, 0.86);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-75);
  color: var(--fg);
  text-decoration: none;
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.logo-bild {
  display: block;
  width: auto;
  height: 28px;
}
.footer .logo-bild {
  height: 32px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-200), 2.2vw, var(--sp-400));
  margin-left: auto;
}
.nav-links a {
  position: relative;
  padding: var(--sp-75) 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
  transition: opacity var(--t-hover) var(--e), transform var(--t-hover) var(--e);
}
.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: var(--mint);
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: left;
  transition: opacity var(--t-hover) var(--e), transform var(--t-hover) var(--e);
}
.nav-links a:hover {
  color: var(--fg);
}
.nav-links a:hover::after {
  opacity: 1;
  transform: scaleX(1);
}
/* Menyvalet för sidan man är på. Samma understrykning som vid hover, men
   alltid tänd, och aria-current sätts av scripts/tema-undersidor.py. */
.nav-links a[aria-current="page"] {
  color: var(--fg);
}
.nav-links a[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}
.nav-cta {
  margin-left: var(--sp-75);
  color: #06070b !important;
}
.nav-links .nav-cta {
  padding: var(--sp-75) var(--sp-200);
}
.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--sp-75);
  min-height: 40px;
  padding: var(--sp-75) var(--sp-200);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--fg);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: var(--r-round);
  cursor: pointer;
}
.nav-toggle-lines {
  display: grid;
  gap: 5px;
  width: 16px;
}
.nav-toggle-lines i {
  display: block;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--t-hover) var(--e);
}
.nav-open .nav-toggle-lines i:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
.nav-open .nav-toggle-lines i:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* ============================================================== SIDA */
.sida {
  position: relative;
  isolation: isolate;
  padding: clamp(var(--sp-600), 7vh, var(--sp-800)) var(--gut) clamp(var(--sp-800), 12vh, 9rem);
  background: var(--ink-0);
  overflow-x: clip;
}
/* glöden bakom sidhuvudet, samma ton som hero på startsidan */
.sida::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -34%;
  width: min(1500px, 150vw);
  height: 760px;
  margin-left: calc(min(1500px, 150vw) / -2);
  background:
    radial-gradient(46% 46% at 50% 44%, rgba(86, 100, 255, 0.22), transparent 70%),
    radial-gradient(30% 34% at 26% 22%, rgba(166, 242, 216, 0.08), transparent 70%),
    radial-gradient(36% 32% at 78% 12%, rgba(120, 96, 255, 0.11), transparent 70%);
  pointer-events: none;
}
/* tunn pulslinje överst, som ett signaturstreck under huvudmenyn */
.sida::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0,
    rgba(166, 242, 216, 0.28) 22%,
    rgba(166, 242, 216, 0.06) 55%,
    transparent 100%
  );
  pointer-events: none;
}
.sida-inner {
  max-width: var(--led);
  margin: 0 auto;
}
.sida-inner > h1 {
  max-width: 20ch;
  font-size: clamp(var(--text-4xl), 6vw, var(--text-7xl));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--fg);
}
.sida p,
.sida ul,
.sida ol {
  margin-top: var(--sp-200);
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--fg-2);
}
/* Rubrik- och listmåtten ligger också här: de bestämmer hur högt allt under
   dem hamnar. Låg de bara i tema.css flyttades hela innehållet när filen kom,
   vilket gav layouthopp på mobil (QA m2). Samma regler står kvar längre ner
   för den som läser hela CSS:en; de är identiska. */
.sida h2 {
  margin-top: var(--sp-700);
  font-size: clamp(var(--text-2xl), 2.8vw, var(--text-3xl));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.sida h3 {
  margin-top: var(--sp-500);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.sida ul {
  padding-left: 0;
  list-style: none;
}
.sida ul > li {
  position: relative;
  padding-left: var(--sp-300);
}
.sida ul > li + li {
  margin-top: var(--sp-75);
}
.sida ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 3px rgba(166, 242, 216, 0.12);
}
.sida ul ul,
.sida ol ol {
  margin-top: var(--sp-75);
}
.sida ol {
  padding-left: 1.4em;
}
.sida-inner > .ingress {
  margin-top: var(--sp-300);
  max-width: 56ch;
  font-size: clamp(var(--text-lg), 1.6vw, var(--text-xl));
  line-height: 1.55;
  color: var(--fg-2);
}
.sida-inner > h1 + p {
  max-width: 56ch;
  margin-top: var(--sp-300);
  font-size: clamp(var(--text-lg), 1.6vw, var(--text-xl));
  line-height: 1.55;
  color: var(--fg-2);
}
/* brödsmulorna är sidhuvudets eyebrow */
.smula {
  margin-bottom: var(--sp-300);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--fg-3);
}
.smula ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-75);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: inherit;
  color: inherit;
}
.smula li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-75);
}
.smula li + li::before {
  content: "";
  width: 12px;
  height: 1px;
  background: var(--line-strong);
}
.smula a {
  color: var(--fg-3);
  text-decoration: none;
}
.smula a:hover {
  color: var(--fg);
}
.smula [aria-current] {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1em;
  letter-spacing: -0.01em;
  color: var(--mint);
  text-shadow: 0 0 26px rgba(166, 242, 216, 0.25);
}

/* Första skärmen på smala skärmar. Ligger medvetet i den kritiska delen:
   utan mobilreglerna för navet hinner sidan ritas med skrivbordsmåtten och
   både navet och main hoppar när tema.css kommer, vilket gav CLS 0,11 på
   mobil (QA m2). Reglerna nedanför (mobilblocket längre ner) bygger vidare
   på samma grunder och är identiska där de överlappar. */
@media (max-width: 59.99em) {
  .nav {
    padding-top: var(--sp-100);
  }
  /* backdrop-filter skapar en containing block för fixed-barn, så
     menyoverlägget skulle hamna inuti pillen. Fast bakgrund i mobilen. */
  .nav-pill {
    gap: var(--sp-200);
    padding: var(--sp-50) var(--sp-50) var(--sp-50) var(--sp-200);
    background: rgba(8, 10, 16, 0.94);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-scrolled .nav-pill {
    background: rgba(6, 7, 11, 0.97);
  }
  /* Menyn kollapsar till menyknappen. Utan det här ligger länkar och CTA kvar
     i flödet och pillen blir 107 px hög i stället för 63 px. */
  .js .nav-toggle {
    display: inline-flex;
    margin-left: auto;
    position: relative;
    z-index: 65;
  }
  .js .nav-links {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: var(--sp-900) var(--gut) var(--sp-600);
    background:
      radial-gradient(90% 50% at 80% 0%, rgba(86, 100, 255, 0.14), transparent 70%),
      radial-gradient(70% 40% at 10% 100%, rgba(166, 242, 216, 0.08), transparent 70%),
      rgba(6, 7, 11, 0.985);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity 320ms var(--e),
      transform 420ms var(--e),
      visibility 0s linear 420ms;
  }
  /* Utan JavaScript: länkarna radbryts synligt i stället för att gömmas. */
  .no-js .nav-pill {
    flex-wrap: wrap;
    border-radius: var(--r-2xl);
    padding: var(--sp-100) var(--sp-200);
  }
  .no-js .nav-links {
    flex-wrap: wrap;
    width: 100%;
    margin-left: 0;
    gap: var(--sp-50) var(--sp-200);
  }
  .no-js .nav-links a {
    padding: var(--sp-100) 0;
  }
  /* Utan JS behåller header-CTA:n sin sidopadding (vinner över .no-js .nav-links a) */
  .no-js .nav-links .nav-cta {
    padding: var(--sp-75) var(--sp-200);
  }
  .sida {
    padding-top: var(--sp-600);
    padding-bottom: var(--sp-700);
  }
  .sida-inner > h1 {
    max-width: 18ch;
    font-size: clamp(var(--text-3xl), 8.4vw, var(--text-5xl));
  }
  .sida p,
  .sida ul,
  .sida ol {
    font-size: var(--text-base);
  }
  .sida-inner > .ingress,
  .sida-inner > h1 + p {
    font-size: var(--text-base);
  }
}
/* tema:kritisk:slut */

/* ---------------------------------------------------------------- knappar */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-75);
  min-height: 44px;
  padding: var(--sp-75) var(--sp-300);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-round);
  cursor: pointer;
  transition: transform var(--t-hover) var(--e), opacity var(--t-hover) var(--e);
}
.btn svg {
  flex: none;
  transition: transform var(--t-hover) var(--e);
}
.btn:hover svg {
  transform: translateX(2px);
}
.btn-primary {
  color: #f7f8ff;
  background:
    radial-gradient(120% 160% at 15% 0%, rgba(160, 170, 255, 0.55), transparent 60%),
    linear-gradient(180deg, #4f5df5 0%, #2c37d4 100%);
  border-color: rgba(180, 190, 255, 0.4);
  box-shadow:
    0 0 0 1px rgba(10, 12, 20, 0.6),
    0 10px 30px -10px rgba(70, 84, 255, 0.65),
    0 0 42px -6px rgba(90, 104, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-primary:hover {
  color: #fff;
  background:
    radial-gradient(120% 160% at 15% 0%, rgba(190, 198, 255, 0.7), transparent 60%),
    linear-gradient(180deg, #5c69ff 0%, #3540e0 100%);
}
.btn-light {
  color: #06070b;
  background: #fff;
  border-color: transparent;
}
.btn-light:hover {
  background: #e6e8ef;
}
.btn-sm {
  min-height: 36px;
  padding: var(--sp-75) var(--sp-200);
  font-size: var(--text-sm);
}

/* ========================================================== INNEHÅLL */
.sida h2 {
  margin-top: var(--sp-700);
  font-size: clamp(var(--text-2xl), 2.8vw, var(--text-3xl));
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--fg);
}
.sida h3 {
  margin-top: var(--sp-500);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.sida strong {
  font-weight: 600;
  color: var(--fg);
}
.sida a {
  color: var(--fg);
  text-decoration-color: rgba(166, 242, 216, 0.5);
  text-underline-offset: 0.22em;
  transition: opacity var(--t-hover) var(--e);
}
.sida a:hover {
  color: #d9fff3;
  text-decoration-color: var(--mint);
}
.sida ul {
  padding-left: 0;
  list-style: none;
}
.sida ul > li {
  position: relative;
  padding-left: var(--sp-300);
}
.sida ul > li + li {
  margin-top: var(--sp-75);
}
.sida ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 3px rgba(166, 242, 216, 0.12);
}
.sida ul ul,
.sida ol ol {
  margin-top: var(--sp-75);
}
.sida ol {
  padding-left: 1.4em;
}

/* knapp i innehållet: samma utseende som startsidans primärknapp */
.sida a.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: var(--sp-300);
  padding: var(--sp-100) var(--sp-400);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: #f7f8ff;
  background:
    radial-gradient(120% 160% at 15% 0%, rgba(160, 170, 255, 0.55), transparent 60%),
    linear-gradient(180deg, #4f5df5 0%, #2c37d4 100%);
  border: 1px solid rgba(180, 190, 255, 0.4);
  border-radius: var(--r-round);
  box-shadow:
    0 0 0 1px rgba(10, 12, 20, 0.6),
    0 10px 30px -10px rgba(70, 84, 255, 0.65),
    0 0 42px -6px rgba(90, 104, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform var(--t-hover) var(--e), opacity var(--t-hover) var(--e);
}
.sida a.knapp:hover {
  color: #fff;
  background:
    radial-gradient(120% 160% at 15% 0%, rgba(190, 198, 255, 0.7), transparent 60%),
    linear-gradient(180deg, #5c69ff 0%, #3540e0 100%);
  transform: translateY(-1px);
}
.sida a.knapp:active {
  transform: scale(0.985);
}

/* steg-listan */
.sida ol.steg-sida {
  margin-top: var(--sp-300);
  padding: 0;
  list-style: none;
  counter-reset: steg;
  border-top: 1px solid var(--line);
}
.sida ol.steg-sida li {
  position: relative;
  counter-increment: steg;
  padding: var(--sp-300) 0 var(--sp-300) var(--sp-700);
  border-bottom: 1px solid var(--line-2);
}
.sida ol.steg-sida li + li {
  margin-top: 0;
}
.sida ol.steg-sida li::before {
  content: counter(steg, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: calc(var(--sp-300) + 0.15em);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--mint);
}

/* vanliga frågor som kort */
.sida .faq {
  margin-top: var(--sp-700);
  padding: clamp(var(--sp-300), 3.5vw, var(--sp-500));
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(86, 100, 255, 0.1), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 80px -60px #000;
}
.sida .faq h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-100);
  margin-top: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--mint);
}
.sida .faq h2::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 3px rgba(166, 242, 216, 0.12), 0 0 12px 2px rgba(166, 242, 216, 0.5);
}
.sida .faq h3 {
  margin-top: var(--sp-400);
  padding-top: var(--sp-300);
  border-top: 1px solid var(--line-2);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--fg);
}
.sida .faq p {
  margin-top: var(--sp-100);
  font-size: var(--text-base);
}

/* tabell */
.tabell {
  margin-top: var(--sp-300);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.02);
}
.tabell table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
  line-height: 1.5;
}
.tabell th,
.tabell td {
  padding: var(--sp-100) var(--sp-200);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-2);
}
.tabell thead th {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--fg-3);
  border-bottom: 1px solid var(--line);
}
.tabell tbody th {
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
}
.tabell tbody tr:last-child th,
.tabell tbody tr:last-child td {
  border-bottom: 0;
}
.tabell td {
  color: var(--fg-2);
}
/* Smal skärm: tabellen staplas i stället för att skrolla sidledes, så att
   inget innehåll hamnar utanför eller kräver en egen skrollränna. */
@media (max-width: 40em) {
  .tabell {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .tabell thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .tabell table,
  .tabell tbody,
  .tabell tr,
  .tabell th,
  .tabell td {
    display: block;
    width: auto;
  }
  .tabell tr {
    padding: var(--sp-200) 0;
    border-bottom: 1px solid var(--line);
  }
  .tabell tr:first-child {
    border-top: 1px solid var(--line);
  }
  .tabell th,
  .tabell td {
    padding: var(--sp-25) 0;
    border-bottom: 0;
  }
  .tabell tbody th {
    margin-bottom: var(--sp-50);
    font-size: var(--text-lg);
    white-space: normal;
    color: var(--mint);
  }
  .tabell td::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--fg);
  }
}

/* "Läs också" som kort */
.sida .andra {
  margin-top: var(--sp-800);
  padding: var(--sp-300);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.02);
}
.sida .andra h2 {
  margin-top: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--fg-3);
}
.sida .andra ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-75);
  margin-top: var(--sp-200);
  padding: 0;
  font-size: var(--text-sm);
  list-style: none;
}
.sida .andra li {
  margin: 0;
  padding: 0;
}
.sida .andra li::before {
  display: none;
}
.sida .andra a {
  display: inline-block;
  padding: var(--sp-50) var(--sp-100);
  font-size: var(--text-sm);
  color: var(--fg-2);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--r-round);
  transition: transform var(--t-hover) var(--e), opacity var(--t-hover) var(--e);
}
.sida .andra a:hover {
  color: var(--fg);
  transform: translateY(-2px);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
}

/* direkt mejladress */
.sida .k-direkt {
  margin-top: var(--sp-300);
  font-size: var(--text-base);
  color: var(--fg-3);
}
.sida .k-direkt a {
  margin-left: var(--sp-50);
  font-weight: 600;
  color: var(--fg);
}

/* ====================================================== ARBETEN (sida) */
/* /arbeten: tre konceptkort med skärmdump, namn, bransch och idén bakom.
   Samma tema som resten av undersidorna, bara egna mått för bild och text. */
.arbeten-inner {
  max-width: var(--col);
}
.sida .arbeten-lista {
  display: grid;
  gap: var(--sp-800);
  margin-top: var(--sp-700);
}
.sida .arbete {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--sp-400) var(--sp-600);
}
.arbete-bild {
  position: relative;
  padding: var(--sp-75);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: rgba(255, 255, 255, 0.028);
  box-shadow: 0 40px 90px -60px #000;
  transition: border-color var(--t-hover) var(--e);
}
.sida .arbete-bild:hover {
  border-color: var(--line-strong);
}
.arbete-bild img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  background: var(--ink-2);
  border-radius: calc(var(--r-2xl) - var(--sp-75));
}
/* Varannan rad spegelvänd, så att listan får rytm utan dekor. */
.sida .arbete:nth-child(even) .arbete-bild {
  order: 2;
}
.sida .arbete-text {
  margin-top: 0;
}
.sida .arbete-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-75);
  margin-top: 0;
  font-size: var(--text-xs);
  line-height: 1.5;
}
.arbete-tagg {
  padding: 0 var(--sp-75);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
}
.arbete-bransch {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.sida .arbete-namn {
  margin-top: var(--sp-200);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
}
.sida .arbete-namn a {
  color: var(--fg);
  text-decoration: none;
}
.sida .arbete-namn a:hover {
  text-decoration: underline;
  text-decoration-color: rgba(166, 242, 216, 0.55);
  text-underline-offset: 0.18em;
}
.sida .arbete-text > p {
  margin-top: var(--sp-200);
  max-width: 52ch;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--fg-2);
}
.arbeten-fot {
  margin-top: var(--sp-800);
  padding-top: var(--sp-400);
  border-top: 1px solid var(--line);
}

/* ============================================================ FOOTER */
.footer {
  border-top: 1px solid var(--line);
  background: #040509;
  padding: var(--sp-800) var(--gut) var(--sp-600);
}
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: var(--sp-600) var(--sp-400);
  max-width: var(--col);
  margin: 0 auto;
}
.footer-tag {
  margin-top: var(--sp-200);
  max-width: 26ch;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--fg-3);
}
/* Länken till arbetena i sidfoten, på alla sidor. */
.footer-arbeten {
  margin-top: var(--sp-200);
  font-size: var(--text-sm);
}
.footer-arbeten a {
  color: var(--fg-2);
  text-underline-offset: 0.2em;
}
.footer-arbeten a:hover {
  color: var(--fg);
}
.footer-arbeten a[aria-current="page"] {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: rgba(166, 242, 216, 0.5);
}

.footer-facts {
  display: grid;
  align-content: start;
  gap: var(--sp-200);
}
.footer-facts dt {
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.footer-facts dd {
  margin: var(--sp-25) 0 0;
  font-size: var(--text-sm);
  color: var(--fg-2);
}
.footer-facts a {
  color: var(--fg);
  text-underline-offset: 0.2em;
}
.footer-label {
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.footer-nav ul {
  display: grid;
  gap: var(--sp-50);
  margin-top: var(--sp-100);
  padding: 0;
  font-size: var(--text-sm);
  list-style: none;
}
.footer-nav a {
  font-size: var(--text-sm);
  color: var(--fg-2);
  text-decoration: none;
  transition: transform var(--t-hover) var(--e), opacity var(--t-hover) var(--e);
}
.footer-nav a:hover {
  color: var(--fg);
  transform: translateX(2px);
}
.footer-legal {
  display: grid;
  align-content: start;
  gap: var(--sp-100);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--fg-3);
}
.footer-legal a {
  color: var(--fg);
  text-underline-offset: 0.2em;
}

/* ============================================================== FILMKORN */
/* Kornet ligger som ett eget lager över hela sidan, mycket svagt. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ================================================== REVEAL / INTRÄDE */
/* Klasserna sätts av tema.js. Utan JS (eller om skriptet inte körs) syns
   allt direkt, eftersom ingen regel döljer något förrän tema-motion finns. */
.tema-motion .tema-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 620ms var(--e-out) var(--d, 0ms),
    transform 760ms var(--e-out) var(--d, 0ms);
}
.tema-motion .tema-reveal.is-in,
.tema-motion .tema-reveal:focus-within {
  opacity: 1;
  transform: none;
}

/* ======================================================= REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .tema-motion .tema-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ================================================================ UTSKRIFT */
/* Papper är alltid stilla: inga reveals får lämna blocken osynliga, ingen
   dekor som slukar färg, och inget som klipps bort i sidled. */
@media print {
  .tema-motion .tema-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html,
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .nav {
    position: static;
    padding: 0;
  }
  .nav-pill {
    position: static;
    border: 0;
    background: none !important;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-toggle {
    display: none !important;
  }
  /* Utskriften ska rymma innehållet, inte menyns mörka överlägg. */
  .js .nav-links {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--sp-200);
    opacity: 1;
    visibility: visible;
    transform: none;
    padding: 0 0 var(--sp-200);
    background: none;
    overflow: visible;
  }
  .js .nav-links a,
  .js .nav-open .nav-links a {
    padding: 0;
    font-size: var(--text-sm);
    color: #000;
    border: 0;
    opacity: 1;
    transform: none;
  }
  .js .nav-links .nav-cta {
    margin: 0;
    padding: 0;
    background: none;
    color: #000 !important;
  }
  /* Dekor som bara finns för skärmen. */
  body::after,
  .sida::before,
  .sida::after {
    display: none !important;
  }
  .sida {
    padding: 0;
    background: none !important;
    color: #000;
  }
  .sida-inner,
  .footer-inner {
    max-width: none;
  }
  .sida-inner > h1,
  .sida h2,
  .sida h3,
  .sida strong,
  .footer,
  .footer-facts a,
  .footer-legal a {
    color: #000 !important;
  }
  .sida p,
  .sida ul,
  .sida ol,
  .sida a,
  .sida .k-direkt,
  .footer-tag,
  .footer-legal {
    color: #1a1a1a !important;
  }
  .sida a {
    text-decoration: underline;
  }
  .sida a.knapp {
    color: #000 !important;
    background: none;
    border: 1px solid #000;
    box-shadow: none;
  }
  .sida ul > li::before,
  .sida .faq h2::before {
    background: #000;
    box-shadow: none;
  }
  .sida .faq,
  .sida .andra,
  .tabell {
    border-color: #999;
    background: none;
    box-shadow: none;
  }
  .sida .faq h2 {
    color: #000;
  }
  .tabell thead th,
  .tabell tbody th,
  .tabell td {
    color: #000;
    border-color: #999;
  }
  .footer {
    padding: 0;
    border-top: 1px solid #999;
    background: none;
  }
  .footer-facts dt,
  .footer-label {
    color: #444;
  }
  .footer-nav a {
    color: #1a1a1a;
  }
  /* Svart text på papper: brödsmulans aktuella sida, sidfotens fakta och loggan. */
  .smula [aria-current],
  .footer-facts dd {
    color: #000 !important;
    text-shadow: none;
  }
  .logo-bild {
    filter: brightness(0);
  }
  /* Länkar på papper: visa vart de går, utom rena ankarlänkar. */
  .sida-inner a[href^="http"]::after,
  .footer a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: var(--text-xs);
    word-break: break-all;
  }
  h1,
  h2,
  h3 {
    break-after: avoid;
  }
  li,
  p,
  .sida .faq h3 {
    break-inside: avoid;
  }
  .sida .faq,
  .tabell {
    break-inside: auto;
  }
  .tabell tr {
    break-inside: avoid;
  }
  /* "Läs också" och footern ska hamna i dokumentets ordning, inte flyttas
     om av en sidbrytning. */
  .sida .andra,
  .sida .andra li,
  .footer,
  .footer-inner,
  .footer-brand,
  .footer-nav,
  .footer-legal {
    break-inside: avoid;
  }
  .footer {
    break-before: auto;
  }
}

/* ============================================================= MOBIL */
@media (max-width: 59.99em) {
  .nav {
    padding-top: var(--sp-100);
  }
  /* backdrop-filter skapar en containing block för fixed-barn, så
     menyoverlägget skulle hamna inuti pillen. Fast bakgrund i mobilen. */
  .nav-pill {
    gap: var(--sp-200);
    padding: var(--sp-50) var(--sp-50) var(--sp-50) var(--sp-200);
    background: rgba(8, 10, 16, 0.94);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav-scrolled .nav-pill {
    background: rgba(6, 7, 11, 0.97);
  }
  .js .nav-toggle {
    display: inline-flex;
    margin-left: auto;
    position: relative;
    z-index: 65;
  }
  .js .nav-links {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: var(--sp-900) var(--gut) var(--sp-600);
    background:
      radial-gradient(90% 50% at 80% 0%, rgba(86, 100, 255, 0.14), transparent 70%),
      radial-gradient(70% 40% at 10% 100%, rgba(166, 242, 216, 0.08), transparent 70%),
      rgba(6, 7, 11, 0.985);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity 320ms var(--e),
      transform 420ms var(--e),
      visibility 0s linear 420ms;
  }
  .js .nav-links::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
  }
  .js .nav-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .js .nav-links a {
    padding: var(--sp-200) 0;
    font-size: var(--text-3xl);
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--fg);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 340ms var(--e),
      transform 480ms var(--e);
  }
  .js .nav-open .nav-links a {
    opacity: 1;
    transform: none;
  }
  .nav-open .nav-links a:nth-child(1) { transition-delay: 60ms; }
  .nav-open .nav-links a:nth-child(2) { transition-delay: 120ms; }
  .nav-open .nav-links a:nth-child(3) { transition-delay: 180ms; }
  .nav-open .nav-links a:nth-child(4) { transition-delay: 240ms; }
  .nav-open .nav-links a:nth-child(5) { transition-delay: 300ms; }
  .nav-open .nav-links a:nth-child(6) { transition-delay: 360ms; }
  .js .nav-links .nav-cta {
    align-self: flex-start;
    margin: var(--sp-300) 0 0;
    padding: var(--sp-100) var(--sp-300);
    font-size: var(--text-base);
    border-bottom: 0;
    background: var(--mint);
    color: #04120c !important;
  }
  .nav-links a::after {
    display: none;
  }

  /* Utan JavaScript: länkarna radbryts synligt i stället för att gömmas */
  .no-js .nav-pill {
    flex-wrap: wrap;
    border-radius: var(--r-2xl);
    padding: var(--sp-100) var(--sp-200);
  }
  .no-js .nav-links {
    flex-wrap: wrap;
    width: 100%;
    margin-left: 0;
    gap: var(--sp-50) var(--sp-200);
  }
  .no-js .nav-links a {
    padding: var(--sp-100) 0;
  }
  /* Utan JS behåller header-CTA:n sin sidopadding (vinner över .no-js .nav-links a) */
  .no-js .nav-links .nav-cta {
    padding: var(--sp-75) var(--sp-200);
  }

  .sida {
    padding-top: var(--sp-600);
    padding-bottom: var(--sp-700);
  }
  .sida-inner > h1 {
    max-width: 18ch;
    font-size: clamp(var(--text-3xl), 8.4vw, var(--text-5xl));
  }
  .sida p,
  .sida ul,
  .sida ol {
    font-size: var(--text-base);
  }
  .sida-inner > .ingress,
  .sida-inner > h1 + p {
    font-size: var(--text-base);
  }
  .sida h2 {
    margin-top: var(--sp-600);
  }
  .sida .faq {
    margin-top: var(--sp-600);
    padding: var(--sp-300);
  }
  .sida ol.steg-sida li {
    padding-left: var(--sp-600);
  }
  .sida .andra {
    margin-top: var(--sp-600);
    padding: var(--sp-300) var(--sp-200);
  }

  .sida .arbeten-lista {
    gap: var(--sp-700);
    margin-top: var(--sp-600);
  }
  .sida .arbete {
    grid-template-columns: 1fr;
    gap: var(--sp-300);
  }
  .sida .arbete:nth-child(even) .arbete-bild {
    order: 0;
  }
  .sida .arbete-namn {
    font-size: clamp(var(--text-2xl), 6.4vw, var(--text-3xl));
  }
  .arbeten-fot {
    margin-top: var(--sp-700);
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-500) var(--sp-300);
  }
  .footer-brand,
  .footer-legal {
    grid-column: 1 / -1;
  }
  .footer {
    padding-top: var(--sp-700);
  }
}

@media (max-width: 27em) {
  .footer-inner {
    grid-template-columns: 1fr;
  }
  .tabell table {
    font-size: var(--text-sm);
  }
  .tabell th,
  .tabell td {
    padding: var(--sp-75) var(--sp-100);
  }
}

/* tunn skärm eller hög zoom: inga sidledsskroll */
@media (max-width: 22.5em) {
  :root {
    --gut: 1rem;
  }
}

@media (forced-colors: active) {
  .btn,
  .sida a.knapp,
  .sida .faq,
  .sida .andra,
  .sida .andra a,
  .tabell {
    border: 1px solid CanvasText;
  }
  .sida ul > li::before,
  .sida .faq h2::before {
    background: CanvasText;
  }
}