/* ── Offentliga guider (/guide) ─────────────────────────────────────────────
   Läsning utan inloggning, och det som drar folk hit från sök. Indexet och guiderna ska kännas som en
   tidning: färgytor per kategori, stor rubrik, en läsbar spalt. Ytorna är de mjuka (-soft) och bär
   --on-soft, aldrig --on-color, som blev 1,3:1 i mörkt läge. Färgad text direkt på papper eller kort är
   --*-ink. Färgen är dekor: kategorin står alltid utskriven. Ramen (sidhuvud, fot, .guide-wrap) delas
   med startsidan, priserna och Nytt. */

/* ── Ramen: sidhuvudet ──────────────────────────────────────────────────────
   Märket till vänster, menyn, och längst till höger språket, inloggningen och den primära knappen.
   Under 960 px får inte allt plats, och raden blir märket och en menyknapp (ett <details>, utan skript).
   Vald sida har både yta och understrykning: ytan ensam hade varit färg som bär mening. */
.guide-top {
  position: relative; display: flex; align-items: center; gap: var(--space-6);
  max-width: 1180px; margin: 0 auto; padding: var(--space-3) var(--space-4);
}
.guide-brand {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; flex: none;
  color: var(--ink); text-decoration: none; font: 650 24px/1 var(--f-display); letter-spacing: -0.02em;
}
.guide-nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.guide-nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--r-s);
  color: var(--ink); font-weight: 600; text-decoration: none; text-underline-offset: 7px;
}
.guide-nav a:hover { background: var(--paper-2); text-decoration: underline; text-decoration-thickness: 1.5px; }
.guide-nav a[aria-current] { background: var(--paper-2); text-decoration: underline; text-decoration-thickness: 2.5px; }

.pub-handling { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; }
.pub-logga-in {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  color: var(--ink); font-weight: 600; text-underline-offset: 4px;
}
.pub-start { white-space: nowrap; }

/* Menyknappen. Markören som webbläsaren ritar i en <summary> tas bort; ikonen byts mot ett kryss när
   menyn är öppen, och knappens text står kvar så att namnet inte ändras för röststyrning. */
.pub-meny { display: none; margin-left: auto; }
.pub-meny-knapp {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; list-style: none;
  background: var(--card); color: var(--ink); border: var(--bw-thin) solid var(--line-strong); border-radius: var(--r-s);
  font-weight: 600; cursor: pointer; user-select: none;
}
.pub-meny-knapp::-webkit-details-marker { display: none; }
.pub-meny-knapp .pub-ikon-stang { display: none; }
.pub-meny[open] .pub-meny-knapp { background: var(--paper-2); }
.pub-meny[open] .pub-meny-knapp .pub-ikon-oppna { display: none; }
.pub-meny[open] .pub-meny-knapp .pub-ikon-stang { display: inline; }
.pub-meny-ark {
  position: absolute; top: calc(100% - 4px); left: var(--space-4); right: var(--space-4); z-index: 60;
  display: grid; gap: var(--space-3); padding: var(--space-3);
  background: var(--card); color: var(--ink); border: var(--bw-thin) solid var(--line); border-radius: var(--r-l);
  box-shadow: 0 16px 40px var(--shadow-c);
}
.pub-meny-ark .guide-nav ul { flex-direction: column; }
.pub-meny-ark .guide-nav a { display: flex; min-height: 48px; font-size: 17px; }
.pub-meny-handling {
  display: grid; gap: var(--space-2); padding-top: var(--space-3); border-top: var(--bw-thin) solid var(--line-soft);
}
.pub-meny-handling .btn { display: flex; justify-content: center; min-height: 48px; }
.pub-meny-handling .pub-logga-in { justify-content: center; }
.pub-meny-sprak { justify-content: center; }

@media (max-width: 1100px) {
  /* Språket står kvar i foten och i menyn; i raden tog det platsen från menyn själv. */
  .pub-handling .guide-sprak-topp { display: none; }
  .guide-top { gap: var(--space-4); }
}
@media (max-width: 960px) {
  .pub-bred { display: none; }
  .pub-meny { display: block; }
}

.guide { display: block; padding: var(--space-6) var(--space-4) var(--space-8); outline: none; }
.guide-wrap { max-width: 720px; margin: 0 auto; }
.guide-wrap > * + * { margin-top: var(--space-6); }

.guide h1 { margin: 0; font-size: var(--fs-h1); line-height: 1.1; color: var(--ink); overflow-wrap: break-word; }
.guide h2 { margin: var(--space-6) 0 0; font-size: var(--fs-h3); line-height: 1.2; color: var(--ink); }
.guide-lead { margin: 0; font-size: 19px; line-height: 1.55; color: var(--ink); }
.guide-lead a { color: var(--ink); text-decoration-thickness: 1.5px; }
.guide-crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-small); color: var(--ink-2); }
.guide-crumbs a { color: var(--ink-2); }

/* ── Ramen: foten ───────────────────────────────────────────────────────────
   Märket och figurens rad till vänster, länkarna i kolumner till höger, och en rad längst ner med
   årtalet, språket och versionen. Kolumnerna radbryts själva (auto-fit), så foten behöver ingen egen
   regel för varje bredd. */
.guide-foot {
  max-width: 1180px; margin: var(--space-8) auto 0; padding: var(--space-8) var(--space-4) var(--space-6);
  border-top: var(--bw-thin) solid var(--line-soft); color: var(--ink-2); font-size: var(--fs-small);
}
.pub-fot-inre { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr); gap: var(--space-8) var(--space-6); }
.pub-fot-marke { display: grid; gap: var(--space-3); align-content: start; justify-items: start; }
.pub-fot-rad { margin: 0; max-width: 30ch; color: var(--ink); font-size: 15.5px; line-height: 1.5; }
.pub-fot-kolumner { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-6) var(--space-4); }
.pub-fot-rubrik {
  margin: 0 0 var(--space-2); color: var(--ink-2);
  font: 650 var(--fs-eyebrow)/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase;
}
.pub-fot-kolumn ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pub-fot-kolumn a {
  display: inline-flex; align-items: center; min-height: 32px;
  color: var(--ink); text-decoration: none; text-underline-offset: 4px;
}
.pub-fot-kolumn a:hover { text-decoration: underline; }
.pub-fot-kolumn a[aria-current] { font-weight: 700; text-decoration: underline; }
.pub-fot-botten {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2) var(--space-6); padding-top: var(--space-4); border-top: var(--bw-thin) solid var(--line-soft);
}
.pub-fot-botten p { margin: 0; }

/* Svenska / English. Valt språk står i fetstil utan understrykning, och aria-current säger det till en
   skärmläsare; det andra är en vanlig länk. I huvudet skiljer ett streck väljaren från knapparna. */
.guide-sprak { display: inline-flex; gap: var(--space-3); align-items: center; }
.guide-sprak a { color: var(--ink); text-underline-offset: 4px; font-weight: 500; }
.guide-sprak a[aria-current] { font-weight: 700; text-decoration: none; }
.guide-sprak-topp { padding-right: var(--space-4); border-right: var(--bw-thin) solid var(--line-soft); }
.guide-sprak a { min-height: 32px; display: inline-flex; align-items: center; }

@media (max-width: 760px) {
  .guide-foot { padding-top: var(--space-6); }
  .pub-fot-inre { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .pub-fot-kolumner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Tummen behöver 44 px; i foten står länkarna tätt. */
  .pub-fot-kolumn a, .guide-sprak a { min-height: 44px; }
  .pub-fot-botten { flex-direction: column; align-items: flex-start; }
}

/* Indexet och guiden är breda; sidhuvudet och foten följer med. */
body:has(.gp) .guide-top, body:has(.gp) .guide-foot { max-width: 1280px; }

/* ── Kategoriernas färg ─────────────────────────────────────────────────── */
.gx-tomato { --tone: var(--tomato-soft); --tone-ink: var(--tomato-ink); --tone-strong: var(--tomato); }
.gx-sun    { --tone: var(--sun-soft);    --tone-ink: var(--sun-ink);    --tone-strong: var(--sun); }
.gx-sky    { --tone: var(--sky-soft);    --tone-ink: var(--sky-ink);    --tone-strong: var(--sky); }
.gx-mint   { --tone: var(--mint-soft);   --tone-ink: var(--mint-ink);   --tone-strong: var(--mint); }
.gx-lilac  { --tone: var(--lilac-soft);  --tone-ink: var(--lilac-ink);  --tone-strong: var(--lilac); }
/* Solens mjuka yta blir lerbrun i mörkt läge. Där tar de gula kategorierna himlen, som startsidans
   hjälte och översikten; texten på ytan är --on-soft som förut. */
:root[data-theme="dark"] .gx-sun { --tone: var(--sky-soft); --tone-ink: var(--sky-ink); --tone-strong: var(--sky); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gx-sun { --tone: var(--sky-soft); --tone-ink: var(--sky-ink); --tone-strong: var(--sky); }
}
/* Rosa har ingen -ink; ikonen tar bläcket i stället. */
.gx-pink   { --tone: var(--pink-soft);   --tone-ink: var(--on-soft);    --tone-strong: var(--pink); }

.gx-ikon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ── Indexet ─────────────────────────────────────────────────────────────── */
.gi { max-width: 1180px; margin: 0 auto; display: grid; gap: clamp(36px, 5vw, 64px); }

.gi-hero {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: end;
  padding: clamp(24px, 5vw, 64px); border-radius: var(--r-xl); background: var(--mint-soft); color: var(--on-soft);
}
.gi-hero-text { display: grid; gap: var(--space-4); min-width: 0; }
.gi-hero-text > * { margin: 0; }
.gi-hero .eyebrow { color: var(--on-soft); }
.guide .gi-hero h1 {
  font: 650 clamp(40px, 6.2vw, 80px)/1 var(--f-display); letter-spacing: -0.035em; color: var(--on-soft);
  text-wrap: balance; max-width: 16ch;
}
.gi-lead { font-size: 19px; line-height: 1.55; max-width: 48ch; }
.gi-fakta { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); font-size: var(--fs-small); }
.gi-fakta li { display: grid; }
.gi-fakta b { font: 650 clamp(32px, 3.6vw, 44px)/1.05 var(--f-display); letter-spacing: -0.03em; }

.gi-hero-husse { display: grid; justify-items: end; gap: var(--space-3); }
.gi-hero-husse .bubble { margin: 0; max-width: 28ch; font-size: 16px; line-height: 1.4; }
.gi-husse .husse { transform-origin: 50% 100%; animation: start-hej 1.6s var(--ease) .5s 1 both; }

/* Sökningen på /guide?q=: formuläret och träfflistan är hjälpens (hj-sok, hj-lista i sida-hjalp.css). */
.gi-sok { margin-top: var(--space-2); }
.gi-traffar { display: grid; gap: var(--space-4); max-width: 820px; }
.gi-traffar > * { margin: 0; }
.guide .gi-traffar h2 { font: 650 clamp(24px, 2.6vw, 30px)/1.15 var(--f-display); letter-spacing: -0.02em; }

.gi-delar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: calc(-1 * var(--space-4)); }
.gi-del {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 8px 6px 14px;
  border: var(--bw-thin) solid var(--line); border-radius: var(--r-pill); background: var(--card);
  color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.gi-del .gx-ikon { color: var(--tone-ink); }
.gi-del-n { min-width: 26px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--tone); color: var(--on-soft); font-size: 13px; text-align: center; }
.gi-del:hover { background: var(--tone); color: var(--on-soft); transform: translateY(-2px); }
.gi-del:hover .gx-ikon { color: var(--on-soft); }
.gi-del:hover .gi-del-n { background: var(--card); color: var(--ink); }

.gi-grupp { display: grid; gap: var(--space-4); scroll-margin-top: var(--space-4); }
.gi-grupp-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.gi-grupp-ikon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--tone); color: var(--tone-ink); }
.guide .gi-grupp h2 { margin: 0; font: 650 clamp(26px, 3vw, 34px)/1.1 var(--f-display); letter-spacing: -0.02em; scroll-margin-top: var(--space-6); }
.gi-grupp-n { color: var(--ink-2); font-size: var(--fs-small); }

/* ── Korten (indexet och Läs vidare) ────────────────────────────────────── */
.guide-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.guide-cards > li { display: flex; }
.guide .guide-card {
  display: flex; flex-direction: column; gap: 0; width: 100%; padding: 0; overflow: hidden;
  text-decoration: none; color: var(--ink); border-radius: var(--r-l);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.guide-card-yta {
  position: relative; display: flex; align-items: center; height: 104px; padding: 0 22px; overflow: hidden;
  background: var(--tone); color: var(--tone-ink);
}
/* Två cirklar i kategorins starka färg ger ytan djup utan bild; delningsbilderna bär hela rubriken och blev dubbla. */
.guide-card-yta::before, .guide-card-yta::after {
  content: ""; position: absolute; border-radius: 50%; background: var(--tone-strong); opacity: .32;
}
.guide-card-yta::before { width: 150px; height: 150px; right: -40px; top: -58px; }
.guide-card-yta::after { width: 70px; height: 70px; right: 86px; bottom: -40px; opacity: .2; }
.guide-card-yta .gx-ikon { position: relative; transition: transform .35s var(--spring, var(--ease)); }
.guide-card-kropp { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; padding: 18px 22px 20px; }
.guide-card .eyebrow { color: var(--ink-2); }
.guide-card-title { font: 650 20px/1.2 var(--f-display); letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; }
.guide-card-text { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.guide-card-meta { margin-top: auto; padding-top: var(--space-2); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.guide .guide-card:hover {
  color: var(--ink); border-color: var(--line-strong); transform: translateY(-4px);
  box-shadow: 0 22px 40px -24px color-mix(in srgb, var(--ink) 45%, transparent);
}
.guide-card:hover .guide-card-yta .gx-ikon { transform: scale(1.08) rotate(-4deg); }
.guide-card:hover .guide-card-title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* Tre spalter i indexet på bred skärm. Går en grupp inte jämnt ut blir första kortet (och vid behov det
   sista) dubbelt så brett, så att ingen grupp slutar med ett ensamt kort och ett hål bredvid. */
@media (min-width: 1000px) {
  .gi .guide-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gi .guide-cards > li:first-child:nth-last-child(3n+2),
  .gi .guide-cards > li:first-child:nth-last-child(3n+4),
  .gi .guide-cards > li:last-child:nth-child(3n+4) { grid-column: span 2; }
  .gi .guide-cards > li:first-child:nth-last-child(3n+2) .guide-card-yta,
  .gi .guide-cards > li:first-child:nth-last-child(3n+4) .guide-card-yta { height: 140px; }
  .gi .guide-cards > li:first-child:nth-last-child(3n+2) .guide-card-title,
  .gi .guide-cards > li:first-child:nth-last-child(3n+4) .guide-card-title { font-size: 26px; max-width: 26ch; }
}

/* ── Rutan som säger vad Husvo gör (indexet och guiden) ─────────────────── */
.gx-cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: end;
  padding: clamp(24px, 4vw, 48px); border-radius: var(--r-xl); background: var(--lilac-soft); color: var(--on-soft);
}
.gx-cta-text { display: grid; gap: var(--space-3); justify-items: start; min-width: 0; }
.gx-cta-text > * { margin: 0; }
.guide .gx-cta h2 { margin: 0; font: 650 clamp(26px, 3vw, 36px)/1.1 var(--f-display); letter-spacing: -0.02em; color: var(--on-soft); }
.gx-cta p { max-width: 54ch; line-height: 1.55; color: var(--on-soft); }
.gx-cta-lista { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gx-cta-lista li {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--card); color: var(--ink); font-size: 14.5px; font-weight: 600;
}
.gx-cta-lista svg { fill: none; stroke: var(--mint-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gx-cta .btn { margin-top: var(--space-2); }

/* ── Guiden ──────────────────────────────────────────────────────────────── */
.gp { max-width: 1280px; margin: 0 auto; display: grid; gap: var(--space-4); }
.gp-artikel { display: grid; gap: clamp(28px, 4vw, 48px); }

.gp-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: center;
  padding: clamp(24px, 5vw, 60px); border-radius: var(--r-xl); background: var(--tone); color: var(--on-soft);
}
.gp-hero-text { display: grid; gap: var(--space-4); min-width: 0; }
.gp-hero-text > * { margin: 0; }
.gp-kategori { display: inline-flex; align-items: center; gap: 8px; color: var(--on-soft); }
.guide .gp-hero h1 {
  font: 650 clamp(34px, 5.2vw, 66px)/1.02 var(--f-display); letter-spacing: -0.035em; color: var(--on-soft);
  max-width: 22ch; text-wrap: balance;
}
.gp-lead { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; max-width: 60ch; }
.gp-lead a { color: inherit; }
.gp-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 14px; }
.gp-meta span { padding: 5px 12px; border-radius: var(--r-pill); background: var(--card); color: var(--ink); font-weight: 600; }
/* Rutnätet sträckte knappen över hela hjälteytan; den ska vara lika liten som de andra. */
.gp-hero-text .skriv-ut { justify-self: start; }
.gp-hero-ikon {
  display: grid; place-items: center; width: clamp(150px, 16vw, 200px); aspect-ratio: 1; border-radius: 50%;
  background: var(--card); color: var(--tone-ink); box-shadow: inset 0 0 0 10px var(--tone-strong);
  animation: gp-in .8s var(--ease) .1s both;
}
@keyframes gp-in { from { transform: scale(.85) rotate(-8deg); } to { transform: none; } }

/* Tre spalter på bred skärm: innehållet till vänster, texten i mitten och intervallen till höger, så att
   spalten står mitt på sidan och faktarutan följer med medan man läser. */
.gp-kropp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 680px) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 56px); }
.gp-text { grid-column: 2; grid-row: 1; min-width: 0; }

.gp-toc { grid-column: 1; grid-row: 1; justify-self: end; align-self: start; position: sticky; top: var(--space-6); width: min(100%, 240px); padding-top: 6px; }
.gp-toc-rubrik { margin: 0 0 var(--space-2); font-size: var(--fs-eyebrow, 12px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.gp-toc ol, .gp-toc-smal ol { list-style: none; margin: 0; padding: 0; display: grid; }
.gp-toc a {
  display: block; padding: 7px 12px; border-left: 3px solid var(--line-soft);
  color: var(--ink-2); font-size: 14.5px; line-height: 1.35; text-decoration: none;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.gp-toc a:hover { color: var(--ink); border-left-color: var(--line-strong); }
.gp-toc a[aria-current] { color: var(--ink); border-left-color: var(--tone-strong); font-weight: 650; }

.gp-toc-smal { display: none; grid-column: 1 / -1; margin-bottom: var(--space-6); border: var(--bw-thin) solid var(--line); border-radius: var(--r-m); background: var(--card); }
.gp-toc-smal summary { min-height: 48px; display: flex; align-items: center; padding: 0 var(--space-4); font-weight: 650; cursor: pointer; color: var(--ink); }
.gp-toc-smal ol { padding: 0 var(--space-4) var(--space-3); }
.gp-toc-smal a { display: flex; align-items: center; min-height: 44px; color: var(--ink); border-top: var(--bw-thin) solid var(--line-soft); }

.gp-fakta {
  grid-column: 3; grid-row: 1; align-self: start; position: sticky; top: var(--space-6); width: min(100%, 260px);
  margin: 0; padding: 20px 22px; border-radius: var(--r-l);
  background: var(--card); border: var(--bw-thin) solid var(--line); border-left: 6px solid var(--tone-strong); color: var(--ink);
}
.guide .gp-fakta-rubrik { margin: 0 0 var(--space-3); font: 650 19px/1.2 var(--f-display); }
.gp-fakta ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.gp-fakta li { display: grid; gap: 2px; }
.gp-fakta-namn { font-weight: 650; }
.gp-fakta-int { color: var(--ink-2); font-size: 15px; }
.gp-fakta-not { margin: var(--space-3) 0 0; color: var(--ink-2); font-size: 13.5px; }

.gp-avsnitt { scroll-margin-top: var(--space-4); }
.gp-avsnitt > * { margin: 0; }
.gp-avsnitt > * + * { margin-top: var(--space-4); }
.gp-avsnitt + .gp-avsnitt { margin-top: clamp(36px, 4vw, 48px); }
.guide .gp-avsnitt h2 { font: 650 clamp(24px, 2.6vw, 30px)/1.15 var(--f-display); letter-spacing: -0.02em; color: var(--ink); scroll-margin-top: var(--space-6); }
.gp-avsnitt h2::before { content: ""; display: block; width: 36px; height: 5px; margin-bottom: 14px; border-radius: 3px; background: var(--tone-strong); }
.gp-avsnitt p, .gp-avsnitt li { font-size: 17.5px; line-height: 1.75; color: var(--ink); }
.gp-avsnitt a { color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.gp-avsnitt strong { font-weight: 700; }

.gp-steg { list-style: none; padding: 0; counter-reset: steg; display: grid; gap: var(--space-4); }
.gp-steg li { counter-increment: steg; position: relative; padding-left: 52px; }
.gp-steg li::before {
  content: counter(steg); position: absolute; left: 0; top: 2px; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--tone); color: var(--on-soft);
  font: 650 17px/1 var(--f-display);
}
.gp-punkter { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.gp-punkter li { position: relative; padding-left: 28px; }
.gp-punkter li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 10px; height: 10px; border-radius: 3px; background: var(--tone-strong); transform: rotate(45deg); }

/* Skriv ner det: det Husvo gör åt er, så det får en egen ruta. */
.gp-avsnitt.gp-not { position: relative; padding: clamp(22px, 3vw, 32px); padding-top: clamp(26px, 3vw, 34px); border-radius: var(--r-l); background: var(--sun-soft); color: var(--on-soft); }
.gp-avsnitt.gp-not h2, .gp-avsnitt.gp-not p, .gp-avsnitt.gp-not li, .gp-avsnitt.gp-not a { color: var(--on-soft); }
.gp-avsnitt.gp-not h2::before { display: none; }
.gp-avsnitt.gp-not .gp-not-ikon + h2 { margin-top: var(--space-3); }
/* Solytan blir lerbrun i mörkt läge; där tar rutan papperet med en solkant i stället. */
:root[data-theme="dark"] .gp-avsnitt.gp-not { background: var(--paper-2); box-shadow: inset 5px 0 0 var(--sun); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .gp-avsnitt.gp-not { background: var(--paper-2); box-shadow: inset 5px 0 0 var(--sun); }
}
.gp-not-ikon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--card); color: var(--ink); }
.gp-not-ikon svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.gp-text > .gx-cta { margin-top: clamp(40px, 5vw, 64px); }

.gp-mer { display: grid; gap: var(--space-4); margin-top: clamp(32px, 5vw, 56px); padding-top: clamp(32px, 4vw, 48px); border-top: var(--bw-thin) solid var(--line-soft); }
.guide .gp-mer h2 { margin: 0; font: 650 clamp(26px, 3vw, 34px)/1.1 var(--f-display); letter-spacing: -0.02em; }

/* Läsframsteget: en tunn list upptill som följer rullningen, helt i CSS. Utan stöd för scroll-driven
   animation, och på smal skärm där webbläsarens egna list redan syns, finns den inte. */
.gp-framsteg { display: none; }
@supports (animation-timeline: scroll()) {
  @media (min-width: 761px) {
    .gp-framsteg {
      display: block; position: fixed; inset: 0 0 auto; z-index: 60; height: 4px; pointer-events: none;
      background: var(--tone-strong); transform-origin: 0 50%; transform: scaleX(0);
      animation: gp-las auto linear both; animation-timeline: scroll(root block);
    }
  }
}
@keyframes gp-las { to { transform: scaleX(1); } }

/* ── Smalare skärmar ─────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .gp-kropp { grid-template-columns: minmax(0, 1fr); }
  .gp-text { grid-column: 1; grid-row: auto; max-width: 700px; width: 100%; justify-self: center; }
  .gp-fakta { grid-column: 1; grid-row: auto; position: static; width: 100%; max-width: 700px; justify-self: center; margin-bottom: var(--space-6); }
  .gp-toc { display: none; }
  .gp-toc-smal { display: block; max-width: 700px; width: 100%; justify-self: center; }
}

@media (max-width: 760px) {
  .gi-hero { grid-template-columns: minmax(0, 1fr); }
  .gi-hero-husse { grid-auto-flow: column; justify-content: start; align-items: end; justify-items: start; }
  .gi-hero-husse .husse { width: 96px; height: auto; }
  .gi-hero-husse .bubble { order: 2; border-radius: 22px 22px 22px 6px; }
  /* Nio kategorier tog fem rader på telefonen. En rad som rullar i sidled håller hjälten och korten nära varandra. */
  .gi-delar {
    margin: 0 calc(-1 * var(--space-4)); padding: 4px var(--space-4) 8px; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; scroll-padding-inline: var(--space-4);
  }
  .gi-del { flex: none; }
  .gp-hero { grid-template-columns: minmax(0, 1fr); }
  .gp-hero-ikon { display: none; }
  .gx-cta { grid-template-columns: minmax(0, 1fr); }
  .gx-cta-husse { display: none; }
  .gp-avsnitt p, .gp-avsnitt li { font-size: 17px; }
}

@media (max-width: 600px) {
  .guide-lead, .gi-lead { font-size: 17.5px; }
  .guide { padding-top: var(--space-4); }
}

/* Smala rubriker och tätare fakta vid 360 px, så att hjältarna inte tar hela första skärmen. */
@media (max-width: 480px) {
  .guide .gi-hero h1 { font-size: 38px; }
  .guide .gp-hero h1 { font-size: 33px; letter-spacing: -0.03em; }
  .gi-fakta { gap: var(--space-2) var(--space-6); }
  .gp-steg li { padding-left: 46px; }
  .gp-steg li::before { width: 32px; height: 32px; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .gi-del, .guide .guide-card, .guide-card-yta .gx-ikon, .gp-toc a { transition: none; }
  .gi-del:hover, .guide .guide-card:hover, .guide-card:hover .guide-card-yta .gx-ikon { transform: none; }
  .gp-hero-ikon, .gi-husse .husse { animation: none; }
}