/* Anbudskollen: ovanpå Labs stilmall (/assets/tokens.css, återställning och --wl-*-tokens).
   Riktning "granskarens protokoll": ljus pappersyta som kontrolllistan själv, svart text och Labs crimson
   som granskarens rödpenna (beställ och det som saknas). Ljust med flit: tjänsten används i dagsljus på
   kontoret, med förfrågningsunderlaget öppet bredvid. Labs tokens.css har ljusa tokens för just tryck och PDF.
   Typsnitt (självhostade, inga externa resurser): Familjen Grotesk för all text, Noto Serif bara för
   underlagets egna ord (samma uppdelning som i rapporten). Inter och Space Grotesk används inte här. */

@font-face {
  font-family: "Familjen Grotesk";
  src: url("fonts/familjen-grotesk-latin.woff2?v=20261013") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  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: "Noto Serif";
  src: url("fonts/noto-serif-latin.woff2?v=20261013") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  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;
}

:root {
  --ak-canvas: #f6f6f3;
  --ak-surface: #ffffff;
  --ak-sunk: #eeeeea;
  --ak-ink: #18181b;
  --ak-ink-2: #3f3f46;
  --ak-muted: #52525b;
  --ak-dim: #63636b;
  --ak-line: rgba(24, 24, 27, 0.14);
  --ak-line-soft: rgba(24, 24, 27, 0.08);
  --ak-accent: var(--wl-color-crimson, #dc2626);
  --ak-accent-deep: var(--wl-color-crimson-deep, #b91c1c);
  --ak-accent-ink: #b91c1c;
  --ak-focus: #18181b;
  --ak-saknas: #b91c1c; --ak-saknas-ink: #991b1b; --ak-saknas-ton: #fcebeb;
  --ak-oklart: #b45309; --ak-oklart-ink: #8a3a0a; --ak-oklart-ton: #fcf1dc;
  --ak-uppfyllt: #15803d; --ak-uppfyllt-ink: #166534; --ak-uppfyllt-ton: #e6f4ea;
  --ak-fel-bg: #fcebeb; --ak-fel-text: #7f1d1d; --ak-fel-line: rgba(185, 28, 28, 0.35);
  --ak-ok-bg: #e6f4ea; --ak-ok-text: #14532d; --ak-ok-line: rgba(21, 128, 61, 0.35);
  --ak-font: "Familjen Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ak-serif: "Noto Serif", Georgia, "Times New Roman", serif;
  --ak-ease: var(--wl-ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
  --ak-ease-ut: var(--wl-ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
  --ak-skugga: 0 1px 2px rgba(24, 24, 27, 0.04), 0 4px 8px rgba(24, 24, 27, 0.04), 0 16px 32px rgba(24, 24, 27, 0.05);
  --ak-skugga-stor: 0 1px 2px rgba(24, 24, 27, 0.05), 0 8px 16px rgba(24, 24, 27, 0.05), 0 32px 64px rgba(24, 24, 27, 0.08);
  --ak-wrap: 72rem;
  --ak-measure: 44rem;
  --ak-gutter: 1rem;
}

/* Egen minimal återställning: avregistreringens bekräftelsesida (src/server.mjs) laddar bara den här filen. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
html { scroll-behavior: auto; scroll-padding-top: 5rem; }
body {
  background: var(--ak-canvas);
  color: var(--ak-ink);
  font-family: var(--ak-font);
  font-size: 1.0625rem;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(220, 38, 38, 0.16); color: var(--ak-ink); }
h1, h2, h3, h4 { font-family: var(--ak-font); color: var(--ak-ink); letter-spacing: -0.015em; }
p { color: var(--ak-ink-2); text-wrap: pretty; }
a { color: var(--ak-accent-ink); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: color 150ms var(--ak-ease), text-decoration-color 150ms var(--ak-ease); }
a:hover { color: var(--ak-ink); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ak-focus); outline-offset: 3px; }
a:focus-visible, summary:focus-visible { border-radius: 4px; }
strong { color: var(--ak-ink); font-weight: 600; }
.nowrap { white-space: nowrap; }
.sr-bara {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.symboler { position: absolute; width: 0; height: 0; overflow: hidden; }
.marke { width: 1rem; height: 1rem; flex: none; }

.skip {
  position: absolute; left: var(--ak-gutter); top: -4rem; z-index: 20;
  background: var(--ak-ink); color: var(--ak-surface); padding: 0.75rem 1rem; border-radius: 8px;
  text-decoration: none; font-weight: 500;
}
.skip:focus { top: 0.75rem; color: var(--ak-surface); }

.wrap { width: 100%; max-width: var(--ak-wrap); margin: 0 auto; padding: 0 var(--ak-gutter); }

/* ---- Sidhuvud ---- */
.topp {
  position: sticky; top: 0; z-index: 10;
  background: rgba(246, 246, 243, 0.94);
  border-bottom: 1px solid var(--ak-line-soft);
}
.topp .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.25rem 1.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; min-height: 4rem;
}
.marke-rad { display: flex; align-items: center; }
.logo {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--wl-font-display, var(--ak-font)); font-size: 1.1875rem; font-weight: 500; letter-spacing: -0.02em;
  color: var(--ak-ink); text-decoration: none;
}
.logo b { font-weight: 500; color: var(--ak-accent-ink); }
.logo:hover { color: var(--ak-ink); }
.produkt {
  font-size: 0.9375rem; font-weight: 500; color: var(--ak-muted);
  margin-left: 0.75rem; padding-left: 0.75rem; border-left: 1px solid var(--ak-line);
}
.meny { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.25rem; list-style: none; padding: 0; margin: 0; }
.meny a:not(.knapp) {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.625rem;
  color: var(--ak-muted); text-decoration: none; font-size: 0.9375rem; font-weight: 500;
  transition: color 150ms var(--ak-ease);
}
.meny a:not(.knapp):hover, .meny a[aria-current="page"] { color: var(--ak-ink); }
.meny a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.35em; text-decoration-color: var(--ak-accent); text-decoration-thickness: 2px; }
.meny .knapp { margin-left: 0.5rem; }

/* ---- Knappar ---- */
button, .knapp {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 52px; padding: 0 1.75rem; border: 1px solid transparent; border-radius: 10px;
  background: var(--ak-accent); color: #fff; font: 600 1.0625rem/1 var(--ak-font); letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(127, 29, 29, 0.18), 0 4px 12px rgba(220, 38, 38, 0.16);
  transition: background-color 200ms var(--ak-ease), transform 200ms var(--ak-ease-ut), box-shadow 200ms var(--ak-ease);
}
button:hover, .knapp:hover { background: var(--ak-accent-deep); color: #fff; transform: translateY(-1px); box-shadow: 0 1px 2px rgba(127, 29, 29, 0.2), 0 8px 20px rgba(220, 38, 38, 0.2); }
button:active, .knapp:active { transform: translateY(0); }
button[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; background: var(--ak-accent-deep); }
.knapp-liten { min-height: 44px; padding: 0 1.125rem; font-size: 0.9375rem; box-shadow: none; }
button.sekundar {
  background: transparent; border-color: var(--ak-line); color: var(--ak-ink); min-height: 44px; padding: 0 1.25rem;
  font-size: 0.9375rem; font-weight: 500; box-shadow: none;
}
button.sekundar:hover { border-color: var(--ak-ink-2); background: var(--ak-surface); color: var(--ak-ink); }
.lank-pil {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 52px; padding: 0 0.25rem;
  color: var(--ak-ink); font-weight: 600; text-decoration: none;
}
.lank-pil svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--ak-ease-ut); }
.lank-pil:hover { color: var(--ak-accent-ink); }
.lank-pil:hover svg { transform: translateX(3px); }

/* ---- Startsidan: hjälte ---- */
main { flex: 1 0 auto; width: 100%; }
.hjalte { padding: 3rem 0 0; }
.hjalte-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: center; }
.kicker { font-size: 0.9375rem; font-weight: 600; color: var(--ak-accent-ink); margin: 0 0 1rem; }
.hjalte h1 {
  font-size: clamp(2.5rem, 7.4vw, 4.5rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.035em;
  margin: 0 0 1.5rem; text-wrap: balance; padding-top: 0.05em;
}
.ingress { font-size: 1.1875rem; line-height: 1.6; color: var(--ak-ink-2); max-width: 36rem; margin: 0 0 2rem; }
.cta-rad { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 0 0 1.5rem; }
.pris-rad { font-size: 0.9375rem; color: var(--ak-muted); max-width: 32rem; margin: 0; }
.pris-rad strong { font-weight: 600; }

/* Provbiten: kontrolllistan själv, som produktbild */
.prov { margin: 0; }
.prov-papper {
  background: var(--ak-surface); border: 1px solid var(--ak-line-soft); border-radius: 16px;
  box-shadow: var(--ak-skugga-stor); padding: 1.5rem;
}
.prov-topp { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.prov-titel { font-size: 1.0625rem; font-weight: 600; color: var(--ak-ink); margin: 0; line-height: 1.35; }
.prov-titel span { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--ak-muted); }
.exempel-tagg {
  margin: 0; font-size: 0.8125rem; font-weight: 600; color: var(--ak-ink-2);
  border: 1px dashed var(--ak-line); border-radius: 999px; padding: 0.125rem 0.625rem;
}
.prov-tal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 1rem; border: 1px solid var(--ak-line-soft); border-radius: 10px; }
.prov-tal div { padding: 0.625rem 0.75rem; min-width: 0; }
.prov-tal div + div { border-left: 1px solid var(--ak-line-soft); }
.prov-tal dt { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8125rem; color: var(--ak-muted); line-height: 1.35; }
.prov-tal dd { margin: 0.125rem 0 0; font-size: 1.5rem; font-weight: 500; line-height: 1.25; font-variant-numeric: tabular-nums; }
.prov-tal .marke { width: 0.8125rem; height: 0.8125rem; }
.prov-rader { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.rad { border: 1px solid var(--ak-line-soft); border-radius: 10px; padding: 0.875rem 1rem; }
.rad blockquote { margin: 0.5rem 0 0.375rem; font-family: var(--ak-serif); font-size: 0.9375rem; line-height: 1.55; color: var(--ak-ink); }
.ref { margin: 0; font-size: 0.8125rem; color: var(--ak-dim); font-variant-numeric: tabular-nums; }
.prov figcaption, .anatomi-kort figcaption { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--ak-dim); text-align: center; }

/* Status: text och form (kryss, frågetecken, bock), färgen är bara förstärkning */
.status {
  display: inline-flex; align-items: center; gap: 0.375rem; margin: 0;
  font-size: 0.8125rem; font-weight: 600; line-height: 1.25; padding: 0.25rem 0.625rem 0.25rem 0.375rem; border-radius: 999px;
}
.saknas .status { background: var(--ak-saknas-ton); color: var(--ak-saknas-ink); }
.oklart .status { background: var(--ak-oklart-ton); color: var(--ak-oklart-ink); }
.uppfyllt .status { background: var(--ak-uppfyllt-ton); color: var(--ak-uppfyllt-ink); }
.saknas .marke { color: var(--ak-saknas); }
.oklart .marke { color: var(--ak-oklart); }
.uppfyllt .marke { color: var(--ak-uppfyllt); }

/* Tre fakta under hjälten */
.lofte {
  list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem;
  margin-top: 3rem; padding-top: 1.5rem; padding-bottom: 3rem; position: relative;
}
.lofte::before { content: ""; position: absolute; top: 0; left: var(--ak-gutter); right: var(--ak-gutter); height: 1px; background: var(--ak-line-soft); }
.lofte li { display: flex; gap: 0.875rem; align-items: flex-start; }
.lofte svg { width: 1.5rem; height: 1.5rem; flex: none; margin-top: 0.125rem; fill: none; stroke: var(--ak-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lofte strong { display: block; font-weight: 600; line-height: 1.4; }
.lofte span { display: block; color: var(--ak-muted); font-size: 0.9375rem; line-height: 1.5; }

/* ---- Sektioner ---- */
.sektion { padding: 4rem 0; }
.sektion-ton { background: var(--ak-sunk); }
.sektion-huvud { max-width: 40rem; margin-bottom: 2.5rem; }
.sektion h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.025em; margin: 0 0 0.75rem; text-wrap: balance; }
.sektion-huvud p { font-size: 1.125rem; color: var(--ak-muted); margin: 0; }
.sektion h3 { font-size: 1.1875rem; font-weight: 600; line-height: 1.35; margin: 0 0 0.5rem; letter-spacing: -0.01em; }

/* Så fungerar det */
.steg { list-style: none; padding: 0; margin: 0; display: grid; gap: 2rem; counter-reset: steg; }
.steg li { counter-increment: steg; position: relative; padding-top: 3.5rem; }
.steg li::before {
  content: counter(steg); position: absolute; top: 0; left: 0;
  font-size: 2.5rem; font-weight: 400; line-height: 1.25; color: var(--ak-accent-ink); font-variant-numeric: tabular-nums;
}
.steg li::after { content: ""; position: absolute; top: 1.625rem; left: 2.5rem; right: 0; height: 1px; background: var(--ak-line); }
.steg p { margin: 0; color: var(--ak-ink-2); }

/* Exemplet: en rad i listan, med förklaringar */
.anatomi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.anatomi-kort { margin: 0; }
.krav-kort {
  background: var(--ak-surface); border-radius: 16px; padding: 1.5rem; box-shadow: var(--ak-skugga);
  border: 1px solid var(--ak-line-soft);
}
.krav-topp { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.status-rad { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.krav-id { margin: 0; font-size: 0.875rem; color: var(--ak-muted); }
.krav-id span { font-weight: 700; color: var(--ak-ink); margin-right: 0.375rem; }
.falt { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.375rem; font-size: 0.875rem; font-weight: 600; color: var(--ak-muted); }
.krav-kort blockquote { margin: 0 0 0.625rem; font-family: var(--ak-serif); font-size: 1.125rem; line-height: 1.55; color: var(--ak-ink); }
.krav-kort blockquote.utkast { background: var(--ak-sunk); border-radius: 10px; padding: 0.75rem 1rem; font-size: 1.0625rem; margin-bottom: 0; }
.krav-kort .ref { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; margin-bottom: 1rem; }
.krav-kort .ai-sammanfattning { font-size: 0.9375rem; color: var(--ak-muted); margin: 0 0 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px dashed var(--ak-line); }
.nr {
  display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; flex: none;
  border-radius: 50%; background: var(--ak-ink); color: var(--ak-surface); font-size: 0.75rem; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.forklaring { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.75rem; counter-reset: fk; }
.forklaring > li { counter-increment: fk; position: relative; padding-left: 2.25rem; }
.forklaring > li::before {
  content: counter(fk); position: absolute; left: 0; top: 0.125rem;
  display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem;
  border-radius: 50%; background: var(--ak-ink); color: var(--ak-surface); font-size: 0.75rem; font-weight: 600;
}
.forklaring p { margin: 0; color: var(--ak-ink-2); }
.statuslista { margin: 0.5rem 0 0; display: grid; gap: 0.75rem; }
.statuslista dt { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; font-size: 0.9375rem; color: var(--ak-ink); }
.statuslista dd { margin: 0.125rem 0 0; color: var(--ak-ink-2); font-size: 0.9375rem; }

/* Pris och kassa */
.pris-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.pris-stor { font-size: 1.125rem; color: var(--ak-muted); margin: 0.5rem 0 0.25rem; }
.pris-stor span { font-size: clamp(2.75rem, 6vw, 3.75rem); font-weight: 500; letter-spacing: -0.03em; color: var(--ak-ink); line-height: 1.25; margin-right: 0.375rem; font-variant-numeric: tabular-nums; }
.pris-not { font-size: 0.9375rem; color: var(--ak-muted); margin: 0 0 1.5rem; }
.ingar { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; max-width: 30rem; }
.ingar li {
  position: relative; padding-left: 2rem; color: var(--ak-ink-2);
}
.ingar li::before {
  content: ""; position: absolute; left: 0; top: 0.3em; width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: var(--ak-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.6-4.9'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.kassa {
  background: var(--ak-surface); border: 1px solid var(--ak-line-soft); border-radius: 20px;
  padding: 1.5rem; box-shadow: var(--ak-skugga-stor);
}
.kassa h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 1rem; }
.sammanfattning { margin: 0 0 1.25rem; }
.sammanfattning div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.625rem 0; border-top: 1px solid var(--ak-line-soft); }
.sammanfattning div:first-child { border-top: 0; padding-top: 0; }
.sammanfattning dt { color: var(--ak-muted); font-size: 0.9375rem; }
.sammanfattning dd { color: var(--ak-ink); text-align: right; font-variant-numeric: tabular-nums; margin: 0; }
.sammanfattning .tjanst { display: block; }
.sammanfattning .tjanst dd { text-align: left; margin-top: 0.25rem; font-weight: 500; }
.sammanfattning .summa { border-top: 1px solid var(--ak-ink); padding-top: 0.875rem; margin-top: 0.25rem; align-items: baseline; }
.sammanfattning .summa dt { color: var(--ak-ink); font-size: 1rem; font-weight: 600; }
.sammanfattning .summa dd { font-size: 1.75rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25; }
.kassa button[type="submit"] { width: 100%; margin-top: 1rem; }
.kassa-not { display: flex; gap: 0.5rem; align-items: flex-start; margin: 1rem 0 0; }
.kassa-not svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.2em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Formulär */
.kryss {
  display: flex; align-items: flex-start; gap: 0.875rem; min-height: 44px; padding: 0.75rem;
  margin: 0 -0.75rem; border-radius: 10px;
  color: var(--ak-ink); cursor: pointer; line-height: 1.5; font-size: 0.9375rem;
  transition: background-color 150ms var(--ak-ease);
}
.kryss:hover { background: var(--ak-canvas); }
.kryss input {
  flex: none; appearance: none; -webkit-appearance: none; width: 1.5rem; height: 1.5rem; margin: 0;
  border: 2px solid var(--ak-ink-2); border-radius: 6px; background: var(--ak-surface); cursor: pointer;
  transition: background-color 150ms var(--ak-ease), border-color 150ms var(--ak-ease);
}
.kryss input:checked {
  background: var(--ak-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 80% no-repeat;
  border-color: var(--ak-ink);
}
.kryss input[aria-invalid="true"] { border-color: var(--ak-saknas); box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.15); }

.ruta { padding: 0.875rem 1rem; border-radius: 12px; border: 1px solid var(--ak-line); margin: 1rem 0; color: var(--ak-ink); }
.ruta:empty { display: none; }
.ruta-fel { background: var(--ak-fel-bg); border-color: var(--ak-fel-line); color: var(--ak-fel-text); }
.ruta-fel a { color: var(--ak-fel-text); }
.ruta-ok { background: var(--ak-ok-bg); border-color: var(--ak-ok-line); color: var(--ak-ok-text); }
.ruta-ok p, .ruta-ok h2, .ruta-ok strong { color: var(--ak-ok-text); }
.ruta-info { background: var(--ak-surface); }
.ruta ul { margin: 0.5rem 0 0 1.25rem; padding: 0; }
.ruta li { margin-bottom: 0.25rem; }
[hidden] { display: none !important; }

/* Vad det inte är */
.inte-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; border-top: 1px solid var(--ak-line); }
.inte-lista div { padding: 1.25rem 0; border-bottom: 1px solid var(--ak-line); display: grid; gap: 0.25rem; }
.inte-lista dt { font-size: 1.125rem; font-weight: 600; color: var(--ak-ink); }
.inte-lista dd { margin: 0; color: var(--ak-ink-2); max-width: 40rem; }

/* Pengar och dokument */
.trygg-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.trygg { background: var(--ak-surface); border: 1px solid var(--ak-line-soft); border-radius: 16px; padding: 1.5rem; }
.trygg p { margin: 0 0 0.75rem; }
.trygg p:last-child { margin-bottom: 0; }
.punkter { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.punkter li { position: relative; padding: 0 0 0.5rem 1.5rem; color: var(--ak-ink-2); }
.punkter li::before { content: ""; position: absolute; left: 0.125rem; top: 0.75em; width: 0.625rem; height: 2px; background: var(--ak-accent); }

/* Frågor */
.fragor-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.fragor { border-top: 1px solid var(--ak-line); }
.fragor details { border-bottom: 1px solid var(--ak-line); }
.fragor summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; padding: 1.125rem 0;
  font-size: 1.0625rem; font-weight: 600; color: var(--ak-ink); cursor: pointer; list-style: none;
  transition: color 150ms var(--ak-ease);
}
.fragor summary::-webkit-details-marker { display: none; }
.fragor summary::after {
  content: ""; flex: none; width: 0.625rem; height: 0.625rem; margin-right: 0.25rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg);
  transition: transform 250ms var(--ak-ease-ut);
}
.fragor details[open] summary::after { transform: translateY(25%) rotate(-135deg); }
.fragor summary:hover { color: var(--ak-accent-ink); }
.fragor details p { margin: 0 0 1.25rem; max-width: 42rem; color: var(--ak-ink-2); }

/* Avtalet i korthet */
.sektion-liten { padding: 3rem 0; }
.sektion-liten h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.avtal-rader { margin: 0 0 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 52rem; }
.avtal-rader div { padding: 0.75rem 0; border-top: 1px solid var(--ak-line-soft); }
.avtal-rader dt { color: var(--ak-ink); font-weight: 600; font-size: 0.9375rem; }
.avtal-rader dd { margin: 0.125rem 0 0; color: var(--ak-ink-2); font-size: 0.9375rem; }

/* Avslut */
.avslut { background: var(--ak-ink); padding: 4rem 0; }
.avslut-inre { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.avslut h2 { color: #fafafa; font-size: clamp(1.75rem, 3.6vw, 2.5rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.025em; margin: 0; max-width: 34rem; text-wrap: balance; }
.avslut .knapp:focus-visible { outline-color: #fecaca; }

/* ---- Undersidor (uppladdning, tack, villkor, personuppgifter, avregistrering) ---- */
.sida { max-width: var(--ak-measure); margin: 0 auto; padding: 3rem var(--ak-gutter) 4rem; }
.sida-bred { max-width: var(--ak-wrap); margin: 0 auto; padding: 3rem var(--ak-gutter) 4rem; }
.sida h1 { font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.03em; margin: 0 0 1.25rem; text-wrap: balance; }
.sida h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; margin: 2.75rem 0 0.75rem; }
.sida h3 { font-size: 1.125rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
.sida p { margin: 0 0 1rem; }
.sida .ingress { margin-bottom: 1.5rem; }
.sida form { margin: 0 0 1.5rem; }
.meta { font-size: 0.9375rem; color: var(--ak-dim); }
.liten { font-size: 0.875rem; color: var(--ak-dim); }
.liten a { color: var(--ak-ink-2); }
.sida .steg { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-bottom: 1.5rem; }
.sida .steg li { padding-top: 0; padding-left: 3rem; }
.sida .steg li::before { font-size: 1.75rem; top: -0.25rem; }
.sida .steg li::after { display: none; }

/* Uppladdning */
fieldset { border: 0; padding: 0; margin: 0 0 2rem; min-width: 0; }
legend { font-size: 1.25rem; font-weight: 600; color: var(--ak-ink); padding: 0; margin-bottom: 0.25rem; }
.fil-hjalp { font-size: 0.9375rem; color: var(--ak-muted); margin-bottom: 0.75rem; }
.slapp {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem;
  min-height: 8rem; padding: 1.5rem; text-align: center; color: var(--ak-ink);
  border: 1.5px dashed rgba(24, 24, 27, 0.32); border-radius: 16px; background: var(--ak-surface);
  transition: border-color 150ms var(--ak-ease), background-color 150ms var(--ak-ease);
}
.slapp:hover, .slapp.over { border-color: var(--ak-accent); background: #fffafa; }
.slapp:focus-within { outline: 3px solid var(--ak-focus); outline-offset: 3px; }
.slapp::before {
  content: ""; width: 2.5rem; height: 2.5rem; margin-bottom: 0.5rem; border-radius: 50%;
  background: var(--ak-sunk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318181b' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V5M7.5 9.5 12 5l4.5 4.5M5 19h14'/%3E%3C/svg%3E") center / 55% no-repeat;
  transition: transform 200ms var(--ak-ease-ut);
}
.slapp:hover::before, .slapp.over::before { transform: translateY(-2px); }
.slapp strong { font-weight: 600; font-size: 1.0625rem; }
.slapp span { color: var(--ak-muted); font-size: 0.9375rem; }
.slapp input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.filer { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.filer li {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--ak-line-soft);
  flex-wrap: wrap;
}
.filer .namn { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; color: var(--ak-ink); }
.filer .storlek { color: var(--ak-muted); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.filer .filfel { flex-basis: 100%; color: var(--ak-fel-text); font-size: 0.9375rem; }
.filer button {
  min-height: 44px; padding: 0 0.875rem; font-size: 0.9375rem; font-weight: 500; background: transparent;
  border: 1px solid var(--ak-line); color: var(--ak-ink); box-shadow: none;
}
.filer button:hover { background: var(--ak-surface); border-color: var(--ak-ink-2); color: var(--ak-ink); transform: none; }
.summa-rad { font-size: 0.9375rem; color: var(--ak-muted); margin-top: 0.5rem; }
#uppladdning > button[type="submit"] { min-width: 12rem; }
progress { display: block; width: 100%; height: 0.5rem; margin: 0.75rem 0 0.25rem; border: 0; border-radius: 100px; overflow: hidden; background: var(--ak-sunk); appearance: none; -webkit-appearance: none; }
progress::-webkit-progress-bar { background: var(--ak-sunk); }
progress::-webkit-progress-value { background: var(--ak-accent); border-radius: 100px; }
progress::-moz-progress-bar { background: var(--ak-accent); border-radius: 100px; }
.klart h2 { margin-top: 0; }

/* Exempelsidan: en hel påhittad kontrolllista i samma radformat som hjältens prov och rapporten */
.exempel-sida { max-width: 52rem; margin: 0 auto; padding: 3rem var(--ak-gutter) 4rem; }
.exempel-sida h1 { font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.03em; margin: 0 0 1rem; text-wrap: balance; }
.exempel-sida h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; margin: 0 0 0.75rem; }
.exempel-sida p { margin: 0 0 1rem; }
.exempel-not {
  margin: 0 0 1.5rem; padding: 0.75rem 1rem; border: 1.5px dashed var(--ak-ink-2); border-radius: 12px;
  background: var(--ak-surface); color: var(--ak-ink);
}
.exempel-fakta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin: 0 0 2.5rem; }
.exempel-fakta dt { font-size: 0.8125rem; font-weight: 600; color: var(--ak-muted); }
.exempel-fakta dd { margin: 0.125rem 0 0; color: var(--ak-ink); overflow-wrap: anywhere; }
.sammanfattning-ruta { margin: 0 0 1rem; }
.exempel-tal { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0.75rem; }
.exempel-tal div:nth-child(odd) { border-left: 0; }
.exempel-tal div:nth-child(n+3) { border-top: 1px solid var(--ak-line-soft); }
.grupp { margin-top: 2.5rem; }
.grupp-rubrik {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1rem;
  padding-bottom: 0.625rem; border-bottom: 1px solid var(--ak-ink);
}
.grupp-rubrik .marke { width: 1.125rem; height: 1.125rem; }
.grupp-antal { margin-left: auto; font-size: 0.9375rem; font-weight: 400; color: var(--ak-muted); }
.krav-lista { display: grid; gap: 0.75rem; }
.krav-id { font-weight: 400; letter-spacing: 0; }
.krav-kort .kommentar { margin: 0; font-size: 0.9375rem; color: var(--ak-ink-2); }
.krav-kort blockquote.utkast + .kommentar { margin-top: 0.75rem; }
.krav-kort .ref { overflow-wrap: anywhere; }
.exempel-slut { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--ak-line); }
.exempel-slut .cta-rad { margin: 1.5rem 0 0; }

/* Startsidan: diskret rad under hjältens knapp, länk till exempellistan, "Vem som står bakom" */
.mobil-rad { font-size: 0.875rem; color: var(--ak-dim); max-width: 32rem; margin: -0.75rem 0 1.25rem; }
.exempel-lank { margin: 2.5rem 0 0; }
.sektion-bakom { padding-top: 0; }
.bakom { max-width: 44rem; padding-top: 2rem; border-top: 1px solid var(--ak-line); }
.bakom p { margin: 0 0 1rem; }
.bakom p:last-child { margin-bottom: 0; }

/* Uppladdningssidan: det viktigaste direkt, resten i en utfällbar ruta */
.viktigt-fil { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.viktigt-fil li { position: relative; padding-left: 1.5rem; color: var(--ak-ink); }
.viktigt-fil li::before { content: ""; position: absolute; left: 0.125rem; top: 0.75em; width: 0.625rem; height: 2px; background: var(--ak-accent); }
.mer-om-filer { margin: 0 0 1rem; border-top: 1px solid var(--ak-line); border-bottom: 1px solid var(--ak-line); }
.mer-om-filer summary { display: flex; align-items: center; min-height: 44px; padding: 0.625rem 0; font-weight: 600; color: var(--ak-ink); cursor: pointer; }
.mer-om-filer summary:hover { color: var(--ak-accent-ink); }
.mer-om-filer p { margin: 0 0 1rem; font-size: 0.9375rem; color: var(--ak-ink-2); }

/* Personuppgiftssidan */
.hopp { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.hopp a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--ak-line);
  border-radius: 100px; color: var(--ak-ink); background: var(--ak-surface); text-decoration: none; font-size: 0.9375rem;
  transition: border-color 150ms var(--ak-ease), background-color 150ms var(--ak-ease);
}
.hopp a:hover { border-color: var(--ak-ink-2); }
.rader { margin: 0 0 1rem; }
.rader div { padding: 0.875rem 0; border-top: 1px solid var(--ak-line-soft); }
.rader dt { color: var(--ak-ink); font-weight: 600; margin-bottom: 0.125rem; }
.rader dd { margin: 0; color: var(--ak-ink-2); }
.invand {
  margin: 1.5rem 0; padding: 1.25rem 1.5rem; border: 1px solid var(--ak-fel-line);
  border-radius: 16px; background: var(--ak-surface); box-shadow: 0 0 0 4px var(--ak-saknas-ton);
}
.invand h3 { margin-top: 0; font-size: 1.25rem; }
.invand p:last-child { margin-bottom: 0; }
.tabell-rulle { overflow-x: auto; margin: 0 0 1rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { text-align: left; padding: 0.625rem 0.5rem; border-bottom: 1px solid var(--ak-line-soft); vertical-align: top; }
th { color: var(--ak-ink); font-weight: 600; border-bottom-color: var(--ak-line); }
td { color: var(--ak-ink-2); }

/* Villkorssidan */
.villkor h2 { font-size: 1.1875rem; margin-top: 2.25rem; }
.villkor ol.inre { margin: 0 0 1rem 1.25rem; padding: 0; color: var(--ak-ink-2); }
.villkor ol.bokstav { list-style: lower-alpha; }
.villkor ol.inre li { margin-bottom: 0.5rem; padding-left: 0.25rem; }
.verktyg { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 0 0 1rem; }

/* ---- Sidfot ---- */
.fot { border-top: 1px solid var(--ak-line-soft); background: var(--ak-surface); }
.fot .wrap { padding-top: 2rem; padding-bottom: 2rem; display: grid; gap: 1.5rem; }
.fot p { color: var(--ak-muted); font-size: 0.9375rem; margin: 0 0 0.25rem; }
.fot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0 1rem; }
.fot li a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem; color: var(--ak-ink-2); }
.fot li a:hover { color: var(--ak-ink); }
.fot .firma { color: var(--ak-ink); font-weight: 600; }

/* ---- Rörelse: provbiten läggs fram en gång vid sidladdning, inget annat rör sig av sig självt ---- */
@media (prefers-reduced-motion: no-preference) {
  .prov-papper { animation: ak-fram 900ms var(--ak-ease-ut) both 120ms; }
  .prov-rader .rad { animation: ak-fram 700ms var(--ak-ease-ut) both; }
  .prov-rader .rad:nth-child(1) { animation-delay: 360ms; }
  .prov-rader .rad:nth-child(2) { animation-delay: 460ms; }
  .prov-rader .rad:nth-child(3) { animation-delay: 560ms; }
}
@keyframes ak-fram { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---- Brytpunkter (mobil först) ---- */
@media (max-width: 47.99rem) {
  .meny .ankare { display: none; }
}
@media (max-width: 30rem) {
  .produkt { display: none; }
  .filer .namn { flex-basis: 100%; }
  .filer button { margin-left: auto; }
  .sida, .sida-bred { padding-top: 2rem; }
  .prov-papper, .kassa, .krav-kort { padding: 1.25rem; }
  .kassa { border-radius: 16px; }
}
@media (min-width: 30rem) {
  .exempel-tal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .exempel-tal div:nth-child(odd) { border-left: 1px solid var(--ak-line-soft); }
  .exempel-tal div:first-child { border-left: 0; }
  .exempel-tal div:nth-child(n+3) { border-top: 0; }
}
@media (min-width: 40rem) {
  .exempel-fakta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (min-width: 48rem) {
  :root { --ak-gutter: 2rem; }
  .hjalte { padding-top: 4.5rem; }
  .lofte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .steg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
  .sektion { padding: 6rem 0; }
  .trygg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trygg-bred { grid-row: span 2; }
  .inte-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; border-top: 0; }
  .inte-lista div:nth-child(-n+2) { border-top: 1px solid var(--ak-line); }
  .avslut-inre { flex-direction: row; align-items: center; justify-content: space-between; }
  .fot .wrap { grid-template-columns: 1fr auto; align-items: start; }
  .fot ul { justify-content: flex-end; max-width: 30rem; }
}
@media (min-width: 64rem) {
  .hjalte-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 4rem; }
  .anatomi { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 4rem; }
  .anatomi-kort { position: sticky; top: 6rem; }
  .pris-grid { grid-template-columns: minmax(0, 1fr) 26rem; gap: 4rem; }
  .fragor-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 4rem; align-items: start; }
  .fragor-grid .sektion-huvud { position: sticky; top: 6rem; }
  .kassa { position: sticky; top: 5.5rem; padding: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-delay: 0ms !important; }
}

/* Utskrift och spara som PDF: ingen navigering, svart på vitt */
@page { margin: 18mm; }
@media print {
  .meta, .liten { color: #444; }
  body { background: #fff; color: #111; display: block; }
  .topp, .fot, .skip, .verktyg, button, .avslut, .cta-rad { display: none !important; }
  p, li, dd, td { color: #222; }
  h1, h2, h3, strong, dt, th { color: #000; }
  a { color: #000; text-decoration: underline; }
  .sida, .sida-bred { max-width: none; padding: 0; }
  .villkor h2 { break-after: avoid; }
  .sektion-ton { background: #fff; }
}