/* ==========================================================================
   Reko Assistans — Design System
   Warm, human, organic. Trust over spectacle.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* Brand — klientens egna två färger, marinblått och gult.
     Avlästa ur ordbilden public/img/reko-logo.png (#143D59 på 1344 pixlar,
     #F5B41A på 701) och exakt samma par som gamla WordPress-sajten körde:
     Astras --ast-global-color-8 = #143d59 och --ast-global-color-0 = #f5b41a.
     Gissa inte fram nyanser här — läs av logotypen.

     Klientens två filer är inte överens om gulan: ordbilden och gamla sajten
     säger #F5B41A, medan ikonfilen public/img/logo-512.png är #F0B020 (och
     favikonerna, som genereras ur den, alltså också). Det är avgjort och
     accepterat av klienten 2026-08-15: sajten följer ordbilden, favikonerna får
     behålla sin ton. Regenerera alltså INTE ikonerna för att jämna ut det. */
  --color-primary: #143D59;        /* logotypens marinblå — trygghet, myndighet */
  --color-primary-dark: #0E2C41;
  --color-primary-light: #E7EDF3;
  --color-accent: #F5B41A;         /* logotypens gula — bara som YTA, se nedan */
  --color-accent-strong: #DC9A0C;  /* mörkare gul för hover på gula ytor */
  /* Gult SKA INTE vara text på ljus botten. Den rena gulan ligger på 1,84:1 mot
     vitt och 1,67:1 mot gräddvitt, mot kravet 4,5:1 — oläsbar. Fram till
     2026-08-16 löstes det genom att mörka gulan till #8A6200 (småtext) och
     #A87908 (stora siffror). De är läsbara, men de är också bruna: klienten
     påpekade två gånger att sajten hade "bruna inslag", och det bruna VAR just
     de mörkade gulorna. Lös alltså inte om problemet på samma sätt igen.
     Textrollerna ligger nu i marinblått/grått, och gult används bara som yta:
     knappar, ikonplattor, det gula panelblocket, hover på gula ytor. */

  /* Etiketter, inline-länkar, små ikoner och hovertillstånd — allt som förut
     var #8A6200. Mellanblå: ljusare än rubrikernas --color-primary-dark, så
     hierarkin rubrik → etikett → brödtext finns kvar, fast inom blåfamiljen.
     8,61:1 mot vitt, 7,81:1 mot --color-cream, 7,04:1 mot --color-cream-deep,
     alltså godkänd även på 13px-etiketterna. */
  --color-link: #2F4F68;
  /* Samma gula som --color-accent. ANVÄNDS ALDRIG SOM TEXT PÅ LJUS BAKGRUND.
     Den fungerar som yta med mörk text ovanpå (8,8:1 mot bläck, 6,2:1 mot
     marinblått) och som text på det mörka marinblå (6,2:1). Inget annat. */
  --color-brand-amber: #F5B41A;
  --color-cream: #FAF3E8;          /* soft sand background */
  --color-cream-deep: #F2E7D5;
  --color-ink: #22201D;
  /* Kall grå, inte varm. Den gamla #55524B drog åt brunt och förstärkte precis
     det klienten reagerade på. 7,01:1 mot vitt, 6,36:1 mot --color-cream. */
  --color-ink-soft: #525A61;
  --color-white: #FFFFFF;
  /* Ramarna var beige (#E4DACB) och bidrog till det bruna intrycket. Kall
     ljusgrå i stället — gräddytorna får stå för värmen, inte linjerna. */
  --color-border: #E3E7EB;

  /* Type */
  --font-base: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-soft: 0 12px 32px rgba(30, 30, 20, 0.08);
  --shadow-lift: 0 20px 45px rgba(30, 30, 20, 0.14);

  /* Layout */
  --container-w: 1200px;
  /* Sänkt 2026-09-06 från clamp(64px, 9vw, 128px). Uppmätt på temp-domänen i 1280px:
     115px per sektion gav 218–269px luft mellan två sektioners innehåll, och
     samma-bakgrund-grannar (vit+vit, cream+cream) såg ut som tomma hål. Nu 83px i
     1280px → ~166px vid färgbyte; grannar med samma bakgrund får dessutom bara en
     kvarts topp-padding (regeln vid .section nedan). */
  --section-pad: clamp(52px, 6.5vw, 92px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-ink);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

img, svg { display: block; max-width: 100%; }
/* height:auto är inte valfritt tillsammans med max-width:100%. En <img> med
   width/height-attribut i en behållare smalare än attributbredden får annars
   bredden krympt men höjden kvar från attributet, och bilden sträcks lodrätt.
   Logotyperna och UC-sigillet klarade sig bara för att de har egna klassregler
   som sätter måtten. Gäller img, inte svg: flera inline-svg:er sätter sina mått
   via attribut och ska fortsätta göra det. */
img { height: auto; }
svg { stroke: currentColor; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.12;
  color: var(--color-primary-dark);
  /* Svenska är fullt av långa sammansatta ord, och ett ord utan brytpunkt
     svämmar rakt ut ur sin spalt: "Assistansersättning" mätte 334px i en
     271px-spalt på 375px-skärm och kapades mitt i. hyphens:auto ger en riktig
     avstavning (dokumentet har lang="sv", så ordlistan är svensk); break-word
     är skyddsnätet om avstavning inte finns att tillgå. */
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}
/* Clampens MINIMUM är det som gäller på mobil, inte vw-ledet. Det låg på 2.2rem
   (35px) och 1.9rem (30px), vilket är för stort för en ~270px spalt: sajtens
   längsta ord, "Assistansersättning", mätte 334px vid 35px och svämmade ut ur
   heron. Minimibeloppen är satta så att just det ordet får plats på en rad ner
   till 360px skärmbredd — det är med god marginal längst, näst längst är
   "Integritetspolicy". h2 följer med ned så rubriknivåerna inte byter plats.
   Förlita dig INTE på hyphens:auto här: avstavningsordlistan saknas i flera
   webbläsare (verifierat 2026-08-16), så ordet måste rymmas av egen kraft. */
h1 { font-size: clamp(1.7rem, 3.4vw, 3.05rem); text-wrap: balance; }
/* text-wrap:balance även på h2 — utan den fick "Ett litet bolag som ser hela dig" på
   startsidan en ensam "dig" på rad två, och det är ingen egenhet hos just den rubriken
   utan gällde varje h2 som råkade hamna strax över radbrytningen. Balance jämnar ut
   raderna i stället för att fylla den första maximalt. Webbläsare som saknar stöd
   ignorerar den, så inget går sönder. */
h2 { font-size: clamp(1.5rem, 3vw, 2.6rem); text-wrap: balance; }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-link);
  margin-bottom: 14px;
}

.lede {
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  color: var(--color-ink-soft);
  max-width: 60ch;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 24px;
}
.section { padding: var(--section-pad) 0; }
/* Två sektioner i rad med SAMMA bakgrund har ingen synlig gräns mellan sig, så full
   padding på båda sidor blir bara ett tomt hål (uppmätt 237px på /personlig-assistans-barn/
   mellan tvåspaltstexten och FAQ:n). Den nedre sektionen får en kvarts topp-padding;
   den övres botten-padding står för resten. Vid färgbyte gäller full padding på båda. */
.section:not(.section--cream):not(.section--primary) + .section:not(.section--cream):not(.section--primary),
.section--cream + .section--cream {
  padding-top: calc(var(--section-pad) * 0.25);
}
.section--cream { background: var(--color-cream); }
.section--primary { background: var(--color-primary); color: var(--color-white); }
.section--primary h2, .section--primary h3 { color: var(--color-white); }
.section-head { max-width: 680px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.grid {
  display: grid;
  gap: 28px;
}
/* Grid-items har min-width:auto och kan därför inte krympa under sitt innehålls
   minsta bredd — en `1fr`-kolumn spiller i stället över sin behållare. Regeln
   fanns tidigare bara som minmax() på .grid--4; formulärkortet visade 2026-08-30
   att den behövs överallt. Uppmätt på 375px: formulärets `<select>` har
   min-content 297px (längsta alternativet "Jag har ett beslut och ska välja
   assistansbolag"), vilket sköt kortet till 445px i en 327px-spalt och gav
   95px sidoscroll på hela startsidan. Med min-width:0 landar kortet på 327px
   och sidoscrollen på 0. Ta inte bort den här raden. */
.grid > * { min-width: 0; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 56px; align-items: flex-start; }
@media (max-width: 1040px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid--3, .grid--2, .grid--form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .grid--4 { grid-template-columns: 1fr; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.98rem;
  border: 2px solid transparent;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, border-color .25s ease;
}
.btn:active { transform: scale(0.96); }
.btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.btn-arrow svg { width: 14px; height: 14px; }

/* Vit text gick bra på terrakottan (3,1:1) men är omöjlig på den gula (1,8:1).
   Marinblå text på gult ger 6,2:1 — samma lösning som CTA-banden redan använde. */
.btn--primary { background: var(--color-accent); color: var(--color-primary-dark); }
.btn--primary .btn-arrow { background: var(--color-primary-dark); color: var(--color-white); }
.btn--primary .btn-arrow svg { stroke: var(--color-white); }
.btn--primary:hover { background: var(--color-accent-strong); }

.btn--light { background: var(--color-white); color: var(--color-primary-dark); }
.btn--light .btn-arrow { background: var(--color-primary); color: var(--color-white); }
.btn--light .btn-arrow svg { stroke: var(--color-white); }
.btn--light:hover { background: var(--color-cream); }

.btn--outline { background: transparent; border-color: var(--color-primary); color: var(--color-primary-dark); }
.btn--outline .btn-arrow { background: var(--color-primary); color: var(--color-white); }
.btn--outline .btn-arrow svg { stroke: var(--color-white); }

/* Wide marketing CTAs: arrow pinned to the trailing edge, not glued to the text */
.btn--primary,
.btn--light {
  justify-content: space-between;
  min-width: 240px;
}
.btn--outline:hover { background: var(--color-primary); color: var(--color-white); }

/* Mobil: knappen fick inte plats på en rad. "Sök personlig assistans" — sajtens
   längsta etikett — behövde 276px i en 271px-spalt på 375px-skärm och bröts mitt
   itu inuti pillerformen. Måtten dras ned tills den går på en rad med marginal.
   `min-width: 0` är dessutom en riktig buggfix och inte bara kosmetik: 240px är
   bredare än den tillgängliga ytan på riktigt smala skärmar, där knappen annars
   spränger panelen den ligger i. */
@media (max-width: 560px) {
  .btn { padding: 13px 20px; gap: 8px; font-size: 0.92rem; }
  .btn-arrow { width: 26px; height: 26px; }
  .btn-arrow svg { width: 13px; height: 13px; }
  .btn--primary, .btn--light { min-width: 0; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--color-border);
}
.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Separata egenskaper, INTE kortformen `padding: 16px 0`. Elementet är också
     .container, och kortformen nollade dess vågräta padding — på mobil hamnade
     logotypen på left:0, hårt mot skärmkanten. */
  padding-top: 16px;
  padding-bottom: 16px;
  gap: 24px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-primary-dark);
  flex-shrink: 0;
}
/* Klientens egen ordbild, inte en satt text. Den finns på tryckt material och
   ska matcha exakt. Källfilen är 527×70 px, så 28 px visningshöjd ger 2,5×
   täthet — skarpt på retina. Gå inte högre än ~32 px, då tar upplösningen slut.
   Ljusversionen i footern är samma fil med den marinblå texten omfärgad. */
.logo__img {
  height: 28px;
  width: auto;
  display: block;
}
@media (max-width: 480px) {
  .logo__img { height: 24px; }
}

.main-nav { display: flex; }
.main-nav__list { display: flex; align-items: center; gap: 4px; }
.main-nav__list > li { position: relative; }
.main-nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--color-ink);
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.main-nav__link:hover, .main-nav__link.is-active { background: var(--color-primary-light); color: var(--color-primary-dark); }
.main-nav__link svg { width: 14px; height: 14px; transition: transform .2s ease; }

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.has-dropdown:hover .main-nav__link svg { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 240px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.22s ease;
}
.dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}
/* Markerad menypunkt i logotypens gula. Klientens önskemål 2026-08-16.
   Gult som YTA med marinblå text är tillåtet och ger 6,2:1 — det är gult som
   TEXT på ljus botten som är förbjudet (1,7:1). Se paletten under Status.
   Hovern är den markering han pekade på; .is-active nedan får samma yta men
   fetare text, annars går "sidan du står på" inte att skilja från "musen är
   här just nu". */
.dropdown a:hover { background: var(--color-accent); color: var(--color-primary-dark); }
/* Knappen i megamenyns promo-ruta är också en <a> och fick därför .dropdown a:s
   dova textfärg — på gult blir det 4,24:1, strax under kravet. (På terrakottan
   låg den på 2,6:1, så den var fel redan innan färgbytet.) */
.dropdown .btn--primary { color: var(--color-primary-dark); }
/* Markera sidan man står på — klassen sattes redan i Header.astro men var ostylad,
   både här och i megamenyn. Samma behandling som aktiv länk i huvudmenyn. */
.dropdown a.is-active { background: var(--color-accent); color: var(--color-primary-dark); font-weight: 800; }

/* Grupperad variant — rubriker delar in en lång lista. Återanvänder
   .dropdown__heading från megamenyn, som redan har samma indrag som länkarna. */
.dropdown--grouped { min-width: 268px; padding: 14px 10px; }
/* Sista menypunkten (Resurser) ligger längst till höger, så en vänsterställd
   panel stack ut utanför fönstret och gav 10 px sidoscroll på smala laptops —
   dolda paneler räknas ändå in i sidans bredd. Högerställ den i stället. */
.main-nav__list > li:last-child > .dropdown:not(.dropdown--mega) { left: auto; right: 0; }
.dropdown__group + .dropdown__group {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.dropdown--mega {
  position: fixed;
  left: 0;
  right: 0;
  /* Samma hårdkodade 73px som mobilpanelen hade: headern är 78 px bred skärm
     och 86 px runt 1000 px, så megamenyn låg antingen 5 px under headern med
     sidan synlig i springan, eller delvis bakom den. */
  top: var(--header-h, 77px);
  min-width: 0;
  width: auto;
  border-radius: 0;
  border-top: 1px solid var(--color-border);
  padding: 0;
}
.dropdown--mega__inner {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 36px 24px;
  display: grid;
  grid-template-columns: 320px repeat(3, 1fr);
  gap: 48px;
}
.dropdown__promo {
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  padding: 24px;
}
.dropdown__promo strong {
  display: block;
  color: var(--color-primary-dark);
  font-size: 0.92rem;
  line-height: 1.3;
  margin-bottom: 6px;
}
.dropdown__promo p { font-size: 0.82rem; color: var(--color-ink-soft); margin: 0; }
.dropdown__promo .btn { display: inline-flex; margin-top: 14px; padding: 10px 16px; font-size: 0.8rem; width: 100%; min-width: 0; }
.dropdown__col { display: flex; flex-direction: column; min-width: 0; }
.dropdown__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Marinblå, inte den mörka textgulan. Klientens önskemål 2026-08-16: rubriken
     ska vara "samma mörka blå". Det är rätt väg ut ur brunet på just den här
     texten — den är 11px och kräver 4,5:1, så en gulare ton är inte möjlig
     (se paletten under Status). Marinblått ger 11,4:1 mot vitt i stället för
     4,98:1. Den gula finns kvar som strecket i ::before nedan. */
  color: var(--color-primary);
  margin-bottom: 10px;
  padding: 0 14px;
}
.dropdown__heading::before {
  content: '';
  display: block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-accent);
  flex-shrink: 0;
}

.header-cta { display: flex; align-items: center; gap: 10px; }
.header-cta .btn { padding: 13px 30px; font-size: 0.92rem; }
.header-phone {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.92rem; color: var(--color-primary-dark);
  padding: 10px 6px;
  white-space: nowrap;
}
/* Mellan mobilbrytpunkten och 1160px ryms inte logotyp + meny + telefon +
   knapp på samma rad: numret radbröts, headern blev 121 px hög och sköt ut
   sidan 1004 px bred i ett 985 px fönster. Menyn och Kontakt-knappen väger
   tyngre än numret i det spannet — det kommer tillbaka så fort det får plats. */
@media (min-width: 981px) and (max-width: 1160px) {
  .site-header__bar { gap: 16px; }
  .header-phone { display: none; }
}
/* Ikoner som ligger på vitt eller gräddvitt måste ta den mörka gulan — den rena
   gulan blir 1,8:1 och försvinner. Gäller telefon, FAQ, badges och artikelmeta. */
/* Logotypens gula, inte den mörka textgulan. Ikonen är dekorativ — telefonnumret
   står direkt bredvid i marinblått på 14,4:1 — så den bär ingen egen information
   och omfattas inte av något kontrastkrav. Klientens önskemål 2026-08-16.
   Stroken är höjd till 2,4 eftersom en tunn linje i den ljusa gulan annars
   nästan försvinner mot den vita headern. */
.header-phone svg { width: 16px; height: 16px; stroke: var(--color-accent); stroke-width: 2.4; }

/* Kontaktblocket i mobilmenyn — dolt på desktop, där headern har både nummer
   och Kontakt-knapp. Se mediafrågan för mobil längre ner. */
.nav-contact { display: none; }
.nav-contact__phone {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 1rem; color: var(--color-primary-dark);
  padding: 12px;
  white-space: nowrap;
}
/* Samma ikon som .header-phone, fast i mobilmenyn — håll dem i synk. */
.nav-contact__phone svg { width: 18px; height: 18px; stroke: var(--color-accent); stroke-width: 2.4; }

/* Hamburgaren är en KOLUMN. Knappen är flex och saknade flex-direction, så de tre
   strecken (::before, span, ::after) lades ut på rad bredvid varandra i stället för
   ovanpå varandra. 3 × 18px ryms inte i en 44px-knapp, så de krympte till 10,7px var,
   och translateY(-6/0/+4) lyfte dem till olika höjd — resultatet var tre korta streck
   i trappa, inte en hamburgare. Uppmätt live 2026-08-20.
   Med column + gap 4px ligger strecken på -6, 0 och +6 från mitten, vilket är exakt
   det avstånd krysset nedan translatear tillbaka. Ändras gap:et måste 6px följa med. */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary-light);
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  flex-shrink: 0;
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after {
  content: '';
  display: block;
  width: 18px; height: 2px;
  flex: none;
  border-radius: 2px;
  background: var(--color-primary-dark);
  transition: transform .25s ease, opacity .2s ease;
}
/* Öppet läge: översta och nedersta strecket flyttas till mitten och korsas, det
   mittersta tonas bort. translateY FÖRE rotate — omvänd ordning roterar först och
   förskjuter sedan längs den roterade axeln, vilket gör krysset snett. */
body.nav-open .nav-toggle::before { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle::after { transform: translateY(-6px) rotate(-45deg); }
body.nav-open .nav-toggle span { opacity: 0; }

@media (max-width: 980px) {
  /* Panelen började på hårdkodade 73px medan headern i själva verket var 99px
     hög (telefonnumret radbröts), så översta menyraden låg bakom headern.
     --header-h sätts av main.js utifrån verklig höjd; 77px är fallbacken
     (16+44+16 + 1px kantlinje) om skriptet inte hunnit köra. */
  .main-nav {
    position: fixed;
    /* .main-nav är flex (rad) på desktop. Med kontaktblocket som andra barn
       hamnade det bredvid menylistan i stället för under — kolumn på mobil. */
    flex-direction: column;
    align-items: stretch;
    inset: var(--header-h, 77px) 0 0 0;
    z-index: 99;
    background: var(--color-white);
    padding: 20px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .3s ease;
  }
  body.nav-open .main-nav { transform: translateX(0); }
  /* Utan detta scrollade sidan bakom den öppna menyn. */
  body.nav-open { overflow: hidden; }
  .main-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .main-nav__link { padding: 14px 16px; }
  .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; padding-left: 10px; }
  .has-dropdown.is-open .dropdown { display: block; }
  .dropdown--mega { position: static; border-top: none; }
  .dropdown--mega__inner { grid-template-columns: none; max-width: none; gap: 0; padding: 10px 0; }
  .dropdown--mega .dropdown__promo { display: none; }
  .dropdown--mega .dropdown__col { margin-bottom: 12px; }
  /* Mobilheadern ska bara vara logotyp + hamburgare. Telefonnumret trängde ihop
     raden och konkurrerade med hamburgaren; kontaktvägarna finns i menyn. */
  .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav-contact {
    display: grid;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
  }
  .nav-contact .btn { justify-content: center; }
}

.breadcrumbs {
  padding: 16px 0;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}
.breadcrumbs a:hover { color: var(--color-primary); }
.breadcrumbs span { margin: 0 6px; opacity: .5; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 560px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 24px 0 0;
}
.hero__panel {
  background: var(--color-primary);
  color: var(--color-white);
  flex: 0 0 54%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 5vw, 64px);
  position: relative;
  z-index: 2;
}
.hero__panel h1 { color: var(--color-white); }
/* .hero__panel är en kolumn-flexbox, så en .btn som ligger direkt i den blir
   utsträckt till full bredd av align-items:stretch — och då wrappade texten
   till två rader innanför knappen. Startsidans knappar slapp det bara för att
   de ligger i en egen flex-div. Knappen ska alltid vara innehållsbred. */
.hero__panel > .btn { align-self: flex-start; }
.hero__panel .lede { color: rgba(255,255,255,0.85); margin: 18px 0 30px; }
/* Eyebrown i heron satt med inline-färg #F2C9A8 på 16 sidor — en ljus
   terrakottaton från den gamla paletten, som blev smutsbeige mot marinblått.
   Inline-stilarna är borttagna; på mörk botten är det den rena gulan som
   gäller (6,2:1), inte den mörka textgulan. */
.hero__panel .eyebrow { color: var(--color-accent); }
.hero__media {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.hero__blob {
  position: absolute;
  left: -2px; top: 0;
  height: 100%;
  width: 70px;
  color: var(--color-primary);
  z-index: 2;
}
.hero__blob svg { height: 100%; width: 100%; }

/* MOBILHERON: bild överst, textpanel under — på ALLA heroer.

   Klientens synpunkt 2026-08-20: en bild som hänger UNDER textblocket läses som ett
   efterslängt tillägg, inte som en hero, och branschen (Särnmark, Humana) lägger
   genomgående bilden först på mobil.

   Reglerna var först scopade med `:has(.hero__photo)`, eftersom 14 av de 16 heroerna
   visar en .img-placeholder och en grå bildbrief överst såg sämre ut. Det är avgjort
   åt andra hållet 2026-08-20: **platshållarna ÄR bilder**, bara inte påfyllda än, och
   ska ligga där bilden ska ligga. Lägg alltså inte tillbaka scopingen — sidorna ska se
   likadana ut nu som när briefarna är avbetade.

   Radien: inga rundade hörn på det blå på mobil, den hör till desktop där panelen är en
   egen spalt. Den måste rätas ut på `.hero`, inte på `.hero__panel` — `.hero` klipper med
   `overflow: hidden`, så en radie där rundar panelen hur fyrkantig den än är gjord.
   Panelen ligger nederst, alltså är det underhörnen som nollas; mediarutan överst
   behåller sina. */
@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    min-height: unset;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .hero__panel { flex: none; padding: 40px 28px; }
  .hero__media { min-height: 320px; order: -1; }
  .hero__blob { display: none; }
  /* Platshållaren måste fylla mediarutan, exakt samma fälla som `.hero__photo` hade:
     dess `height: 100%` resolverar INTE mot `.hero__media`:s `min-height`, så den föll
     tillbaka på sin egen `min-height: 220px` och lämnade 100px vitt glapp i botten av
     rutan. Det är samma 100px som mättes upp på startsidan 2026-08-16 — glappet har
     funnits hela tiden, men låg då längst ner i heron där det passerade som luft. Med
     bilden överst hamnar det mitt emellan bild och panel och syns direkt. */
  .hero__media > .img-placeholder { position: absolute; inset: 0; }
}
/* På telefon är 28px sidopadding dyr: den äter 56px av ~330px, och det är just
   den bredden de långa rubrikorden behöver. */
@media (max-width: 560px) {
  .hero__panel { padding: 36px 22px; }
}

/* ---------- Image placeholder ---------- */
.img-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
  /* Var en grönton (#DCE7E4) från den gamla paletten — nu en blågrå som hör
     ihop med marinblått. */
  background: linear-gradient(145deg, #DCE4EC 0%, #EFE6D8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.img-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(30,92,85,0.06) 0, rgba(30,92,85,0.06) 2px, transparent 2px, transparent 14px);
}
.img-placeholder__inner {
  position: relative;
  z-index: 1;
  max-width: 320px;
  text-align: center;
  padding: 24px;
  color: var(--color-primary-dark);
}
.img-placeholder__icon {
  width: 44px; height: 44px;
  margin: 0 auto 14px;
  opacity: 0.55;
}
.img-placeholder__label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 8px;
  display: block;
}
.img-placeholder__desc {
  font-size: 0.86rem;
  font-style: italic;
  opacity: 0.75;
  line-height: 1.45;
}
.img-placeholder.is-round { border-radius: 50%; }
.img-placeholder.ratio-square { aspect-ratio: 1/1; }
/* Riktig bild i en hero, där en .img-placeholder annars suttit. Platshållaren
   är width/height 100% och sträcks av .hero:s align-items:stretch, så bilden
   måste göra samma sak. height:100% här övertrumfar globala img{height:auto}. */
/* position:absolute + inset:0, inte height:100%. Under 900px får .hero__media sin höjd
   från `min-height: 320px`, och procenthöjder resolverar INTE mot min-height — bilden föll
   då tillbaka på sin egen bildhöjd och lämnade ett tomt glapp under sig i heron: 100px på
   startsidan, 54px på /assistansersattning/. Uppmätt på 375px 2026-08-16. Absolut
   positionering mäter mot förälderns faktiska box och fyller den oavsett var höjden kom
   ifrån. .hero__media är redan position:relative + overflow:hidden, och .hero__blob ligger
   på z-index 2, så den fortsätter ligga ovanpå bilden.
   object-position 55%: heroslotten är ~530×560 på desktop, alltså nästan kvadratisk, medan
   bilden är 16:9 — cover visar bara ~53 % av bredden. Med default 50 % hamnar den gående
   personens högra kant precis i kanten av utsnittet. 55 % flyttar fönstret så hela paret ryms. */
.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% center;
}
/* Beskärningen hör till BILDEN, inte till klassen. 55 % ovan tunades för startsidans
   parkbild och ärvdes sedan av kontorsbilden på /assistansersattning/ av en slump —
   ändrar du basvärdet flyttar du alltså båda. Nya motiv får en egen modifierare här.

   --park: paret ligger på 42–75 % av bildbredden, tyngdpunkt ~58 %. Vid 55 % hamnade
   utsnittets mitt på 52 % och mannens rygg gick i högerkanten (klientens synpunkt
   2026-08-20). 65 % lägger utsnittets mitt på ~57 %: paret centrerat med luft på båda
   sidor, med avdrag för att .hero__blob täcker ~35px i vänsterkanten på desktop. */
.hero__photo--park { object-position: 65% center; }

.img-placeholder.ratio-wide { aspect-ratio: 16/10; }
.img-placeholder.ratio-portrait { aspect-ratio: 3/4; }

/* ---------- Cards ---------- */
.card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-soft);
  transition: transform .35s ease, box-shadow .35s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
/* ...men INTE kort som innehåller ett formulär. Lyftet är en affordans för kort man
   klickar på som helhet; ett formulärkort klickar man i, och då flyttade sig hela
   kortet 6px uppåt så fort muspekaren nådde det — fälten gled undan under pekaren
   medan man siktade på dem. På pekskärm är det värre: :hover fastnar efter en
   tryckning, så kortet blev kvar i lyft läge. Klientens synpunkt 2026-08-20 gällde
   /juridisk-radgivning-lss/, men regeln träffade alla 14 formulärsidor, inklusive de
   tre som funnits sedan starten.
   `:has(form)` och inte en egen klass, så att nästa formulärkort som läggs in är
   fredat utan att någon behöver komma ihåg det här. Saknas :has()-stöd faller det
   tillbaka på lyftet ovan, alltså dagens beteende. */
.card:has(form):hover { transform: none; box-shadow: var(--shadow-soft); }
.card__icon {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.card__icon svg { width: 24px; height: 24px; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--color-ink-soft); font-size: 0.96rem; }
/* En länk i ett korts brödtext ärvde .card p:s färg rakt av och fick varken
   avvikande färg, understrykning eller fetstil — den gick alltså inte att se att
   den var en länk (uppmätt 2026-08-20: exakt samma rgb som omgivande text).
   Prosalänkar i löptext på sajten sätts med inline-stil, men kort skrivs på så
   många ställen att det är en glömska som väntar på att hända; regeln här gäller
   alla kort, även framtida. `a.card` är kortet självt och träffas inte. */
.card p a { color: var(--color-link); font-weight: 700; }
.card p a:hover { text-decoration: underline; }
.card--media { padding: 0; overflow: hidden; }
.card--media .card__body { padding: 26px; }

/* Centrerat förtroendekort på startsidan. Ikonchipet är samma som .card__icon
   överallt annars — Keivan bad uttryckligen om en och samma ikontyp på sidan. */
.card--trust { text-align: center; padding: 34px 24px; }
.card--trust .card__icon { margin-left: auto; margin-right: auto; }
.card--trust h3 { margin-bottom: 0; }
.card__rule {
  width: 38px; height: 2px; border: 0;
  background: var(--color-cream-deep);
  margin: 14px auto;
}
.card--media .img-placeholder { border-radius: 0; height: auto; }

.card--link {
  display: block;
  color: inherit;
}
.card--link .card__arrow {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--color-link);
  font-size: 0.9rem;
}
.card--link .card__arrow svg { width: 14px; height: 14px; transition: transform .25s ease; }
.card--link:hover .card__arrow svg { transform: translateX(4px); }

/* ---------- Stats ---------- */
.stat-row { display: flex; flex-wrap: wrap; gap: 40px; }
/* Klientens begäran 2026-08-30: alla tre siffrorna på samma rad även på mobil.
   Uppmätt på 375px: etiketterna är 94–96px breda, alltså 285px innehåll plus
   2×40px gap = 365px mot 327px tillgängligt, och "jour vid behov" bröt till en
   egen rad. Grid med minmax(0,1fr) kan inte spilla över — kolumnerna landar på
   98px och etiketterna ryms på en rad. Höjden gick från 189px till 74px. */
@media (max-width: 640px) {
  .stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .stat span { font-size: 0.8rem; }
}
.stat b {
  display: block;
  font-size: clamp(2rem, 3vw, 2.6rem);
  /* Siffrorna var gula-mörkade till #A87908 och läste som brunt. Marinblått i
     stället — samma vikt i blicken, ingen brun ton. Gult hör inte hemma här:
     även 41px-siffror kräver 3:1 och ren gul ger 1,67:1 mot gräddvitt. */
  color: var(--color-primary);
  font-weight: 800;
}
.stat span { color: var(--color-ink-soft); font-size: 0.9rem; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display: flex; flex-direction: column; gap: 0; }
.step {
  display: flex;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-border);
}
.step:last-child { border-bottom: none; }
.step__num {
  counter-increment: step;
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--color-brand-amber);
  color: var(--color-ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}
.step__num::before { content: counter(step, decimal-leading-zero); }
/* Samma min-width:auto-fälla som i .grid, fast i en flexbox. Textspalten kunde
   inte krympa under sitt längsta ord: "Försäkringskassan/kommunen" krävde 297px
   där 255px fanns, vilket gav 18px sidoscroll på /byta-assistansbolag/ vid 375px.
   Buggen stod noterad i CLAUDE.md sedan 2026-08-20 som ett eget ärende; den
   städades 2026-08-30 tillsammans med formulärets överbredd, eftersom det är
   samma orsak. */
.step > div { min-width: 0; }
.step > div > h3 { margin-bottom: 8px; }
.step > div > p.lede { margin-bottom: 4px; }
.step > div > a { display: inline-block; margin-top: 10px; }

/* ---------- FAQ ---------- */
.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--color-primary-dark);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}
.faq-q svg { width: 20px; height: 20px; flex-shrink: 0; transition: transform .25s ease; stroke: var(--color-link); }
.faq-item.is-open .faq-q svg { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-a p { padding-bottom: 22px; color: var(--color-ink-soft); max-width: 65ch; }

/* ---------- Quote ---------- */
.quote-block {
  background: var(--color-cream-deep);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 56px);
  display: flex;
  gap: 32px;
  align-items: center;
}
/* --color-primary, inte --color-link: identisk med .reviews__mark på startsidan,
   och de två ska inte glida isär igen. */
.quote-block__mark { font-size: 3rem; color: var(--color-primary); font-weight: 800; line-height: 1; flex-shrink: 0; }
.quote-block p { font-size: 1.15rem; color: var(--color-primary-dark); font-weight: 600; }
.quote-block cite { display: block; margin-top: 14px; font-style: normal; font-size: 0.88rem; color: var(--color-ink-soft); }

/* ---------- Googleomdömen ----------
   Betyget står som SIFFRA bredvid stjärnorna, och antalet som text. Gult klarar
   inte 3:1 mot ljus botten, så innebörden får aldrig hänga på stjärnornas färg
   ensam — de är redundanta, inte informationsbärande. Se palettkommentaren. */
.reviews {
  display: grid;
  /* Jämna spalter, inte 0.9/1.1. Rubriken "Omdömen från människor som känner oss
     bäst" bröts på tre rader i den smalare vänsterspalten. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px; align-items: center;
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: 48px;
}
/* Riktigt porträtt i ett .card--media, i stället för .img-placeholder.
   aspect-ratio + object-fit gör beskärningen vid rendering; höjden måste sättas
   explicit eftersom globala img{height:auto} annars tar över och kortet blir
   ojämnt högt mot platshållarkorten bredvid. */
.card__photo { width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; display: block; }
/* Teamkortet är numera en länk — ärv textfärgen så det inte blir blått. */
a.card { color: inherit; display: block; }
a.card:hover .card__body h3 { color: var(--color-link); }

/* ---------- Författarsida (/om-oss/keivan-iravani/) ---------- */
/* Smalare spalt för löptext. minmax-fällan gäller inte här, det är ingen grid,
   men max-width måste ligga på .container--narrow och inte på .container —
   .container är delad av hela sajten. */
.container--narrow { max-width: 760px; }

/* Enkolumnad sedan porträttet togs bort 2026-08-16 — var tidigare
   `260px minmax(0, 1fr)` med bilden i första spalten. Sätt inte tillbaka två
   spalter utan att det finns något att fylla den första med; en tom 260px-spalt
   klämmer ihop texten i stället för att bara försvinna. */
.profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
  padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 4vw, 40px);
}
/* Reseten nollar h1/p, så avstånden måste sättas här. */
.profile-hero__body h1 { margin: 6px 0 0; }
.profile-hero__body .lede { margin: 16px 0 0; }
.profile-contact {
  list-style: none; padding: 0;
  margin: 22px 0 0;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  font-size: 0.94rem;
}
.profile-contact a { color: var(--color-primary); font-weight: 600; text-underline-offset: 3px; }
.profile-contact a:hover { color: var(--color-link); text-decoration: underline; }

/* ---------- Advokatprofil ----------
   Porträtt plus presentationstext, för en namngiven extern samarbetspartner.
   Egen klass i stället för .profile-hero: den är enkolumnad sedan Keivans
   porträtt togs bort, och att sätta tillbaka en bildspalt där skulle bryta
   anteckningen ovan. Här FINNS en bild att fylla spalten med.
   Bilden är 3:4 och sätts med aspect-ratio i stället för fasta mått, så den
   inte sträcks — se `img { height: auto }` under Code conventions i CLAUDE.md.
   minmax(0,1fr) på textspalten av samma skäl som alla andra grids på sajten. */
/* 300px och 4:5, inte 260px och 3:4. Uppmätt 2026-09-01: med 260px tog fotot
   bara 37 % av blockets bredd och läste som litet bredvid textspalten.
   Höjderna var däremot redan i linje — knappen slutade 6–18px innanför fotots
   underkant på varje bredd mellan 900 och 1440px — så att korta texten hade
   gjort obalansen värre, inte bättre. Bredare foto plus en mindre hög
   bildproportion håller ihop det: 300×375 mot textblockets ~336px. */
.advokat-profil {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}
/* `assistans/assistansersättning/LSS` bryter inte av sig själv vid snedstrecken
   och är bred nog att knuffa ordet före sig till en egen rad — "personlig" blev
   ensamt mitt i stycket. `<wbr />` efter varje snedstreck i markupen ger
   brytpunkterna; den här raden är skyddsnätet om strängen dyker upp någon
   annanstans. Ordagrann text, bara andra radbrytningar. */
.advokat-profil__body .lede { overflow-wrap: break-word; text-wrap: pretty; }
.advokat-profil__foto {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.advokat-profil__body > * + * { margin-top: 16px; }
/* Brytpunkten ligger på 620px och inte 760px: tvåspaltsläget bär ända dit
   (300px foto + 24px gap lämnar ~296px åt texten), och med 760 blev fotot bara
   32 % av en fortfarande bred spalt så fort det staplade — uppmätt, det såg
   förlorat ut. */
@media (max-width: 620px) {
  .advokat-profil { grid-template-columns: minmax(0, 1fr); }
  /* Porträttet får inte fylla hela mobilbredden — då dominerar det sidan och
     trycker ner texten under vikningen. */
  .advokat-profil__foto { max-width: 240px; }
}

/* Frågor och svar i en intervju. Frågan bär vikten, svaret är brödtext.
   Egen klass och inte h3 + p: rubriknivåerna på sidan används redan av
   avsnitten, och en fråga är ingen avsnittsrubrik. */
.intervju > * + * { margin-top: 30px; }
.intervju__fraga {
  display: block;
  font-weight: 800;
  color: var(--color-primary-dark);
  font-size: 1.06rem;
  line-height: 1.45;
}
.intervju__svar { margin-top: 10px; }
.intervju__svar + .intervju__svar { margin-top: 14px; }


/* Reseten nollar p, så biografin behöver egna avstånd. */
.profile-bio p { color: var(--color-ink-soft); line-height: 1.75; margin: 0 0 18px; }
.profile-bio p:last-child { margin-bottom: 0; }

/* Textplatshållare. Samma visuella språk som .img-placeholder, så det syns för
   klienten att rutan väntar på innehåll och inte är färdig design. */
.content-placeholder {
  background: linear-gradient(145deg, #DCE4EC 0%, #EFE6D8 100%);
  border-radius: var(--radius-md);
  padding: clamp(28px, 4vw, 40px);
  text-align: center;
  color: var(--color-primary-dark);
}
.content-placeholder__label {
  display: block;
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  opacity: 0.6; margin-bottom: 10px;
}
.content-placeholder__desc { font-size: 0.95rem; line-height: 1.65; font-style: italic; margin: 0; }

.review-list { list-style: none; padding: 0; margin: 28px 0 0; }
.review-list li {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 8px 20px;
  padding: 18px 0;
  border-top: 1px solid var(--color-border);
}
.review-list li:first-child { border-top: 0; }
.review-list a { color: var(--color-primary-dark); font-weight: 700; text-underline-offset: 3px; }
.review-list a:hover { color: var(--color-link); text-decoration: underline; }
.review-list span { font-size: 0.85rem; color: var(--color-ink-soft); }

@media (max-width: 720px) {
  .profile-hero { text-align: center; }
  .profile-contact { justify-content: center; }
}

/* Namnet är numera en länk till författarsidan. */
.author-card a { color: inherit; text-underline-offset: 3px; }
.author-card a:hover { color: var(--color-link); text-decoration: underline; }

/* Eget tak på rubriken, 2.4rem mot globala h2:ns 2.6rem.
   Bredare spalt räcker INTE ensamt: h2 är clamp(1.5rem, 3vw, 2.6rem) medan
   containern slutar växa vid 1200px. Över ~1387px vw fortsätter alltså texten
   till 41,6px medan spalten står kvar på 504px, och då bröts rubriken på tre
   rader igen — mätt på 1500px. Med taket blir längsta raden
   "Omdömen från människor" 488px mot spaltens 504, alltså 16px marginal.
   Byts rubriktexten ut måste den här marginalen räknas om. */
.reviews h2 { font-size: clamp(1.5rem, 3vw, 2.4rem); }

.reviews__rating { display: flex; align-items: center; gap: 14px; margin: 24px 0 24px; }
/* Samma fälla som stjärnorna, fast värre: G:et är Googles varumärke och hade en
   1px mörk kontur runt alla fyra färgfält, som Googles egen logotyp inte har.
   Färgerna i markupen är Googles officiella och ska inte målas om. */
.reviews__g { stroke: none; }
.reviews__g { width: 36px; height: 36px; flex-shrink: 0; }
.reviews__score { font-size: 2.1rem; font-weight: 800; color: var(--color-primary-dark); line-height: 1.05; }
.reviews__stars { display: flex; gap: 3px; margin: 3px 0 4px; }
/* stroke: none är INTE valfritt. Den globala reseten `svg { stroke: currentColor }`
   finns för sajtens linjeikoner, men gäller även fyllda ikoner — stjärnorna fick
   därför 1px kontur i --color-ink, vilket på en 17px stjärna är en enorm andel av
   ytan. Klienten reagerade 2026-08-16 på att stjärnorna "såg skumma ut" jämfört
   med Googles egna. Färgen är Googles varumärkesgula #FBBC04. Den skrivs som
   literal och inte som token: det här är Googles färg på Googles betyg, inte
   sajtens palett, och ska inte följa med om paletten ändras. */
.reviews__stars svg { width: 17px; height: 17px; fill: #FBBC04; stroke: none; }
.reviews__count { font-size: 0.85rem; color: var(--color-ink-soft); }

/* Alla citat ligger i samma grid-cell och staplas ovanpå varandra. Kortet får
   därmed det längsta citatets höjd och hoppar inte när det roterar. */
.reviews__card {
  display: grid;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 42px 42px 34px;
  box-shadow: var(--shadow-soft);
}
.reviews__item {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity .4s ease;
}
.reviews__item.is-active { opacity: 1; visibility: visible; }
.reviews__mark { display: block; font-size: 3rem; line-height: .8; color: var(--color-primary); font-weight: 800; margin-bottom: 14px; }
/* margin:0 — resetten nollar h1-h4/p/figure men inte blockquote, som annars
   får webbläsarens 1em 40px och hamnar indraget i kortet. */
.reviews__quote { margin: 0; font-size: 1.1rem; line-height: 1.65; font-style: italic; color: var(--color-primary-dark); font-weight: 500; }
.reviews__cite { display: block; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: 0.89rem; color: var(--color-ink-soft); }
.reviews__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 24px; }
.reviews__arrow {
  width: 42px; height: 42px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s ease, color .25s ease;
}
.reviews__arrow svg { width: 18px; height: 18px; }
.reviews__arrow:hover { background: var(--color-primary); color: var(--color-white); }
/* Punkten ritas med ::before, inte av knappen själv.
   WCAG 2.5.8 kräver 24×24 px träffyta. Knappen var 9×9 med 9px gap, och att
   bara lägga på padding räcker inte: kravet mäts som en 24px-cirkel runt
   träffytans mitt, och två sådana med 18px mellan centrum överlappar varandra —
   då faller båda ändå. Avståndet måste alltså komma från knappens EGEN yta,
   därför gap: 0 och 24px breda knappar. Punkten är kvar på 9px, så det enda
   som ändras visuellt är att mellanrummet växer från 9 till 15px. */
.reviews__dots { display: flex; gap: 0; }
.reviews__dot {
  width: 24px; height: 24px;
  border: 0; padding: 0; cursor: pointer;
  background: none;
  display: flex; align-items: center; justify-content: center;
}
.reviews__dot::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-cream-deep);
  transition: background .25s ease;
}
.reviews__dot.is-active::before { background: var(--color-accent-strong); }
.reviews__arrow:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
/* Fokusringen sitter på punkten och inte på knappen — annars ritas en 24px stor
   ring runt en 9px stor punkt, vilket ser ut som ett fel snarare än en markör. */
.reviews__dot:focus-visible { outline: none; }
.reviews__dot:focus-visible::before { outline: 3px solid var(--color-primary); outline-offset: 3px; }
@media (max-width: 900px) {
  .reviews { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px 20px; }
  .reviews__card { padding: 30px 24px 26px; }
}
@media (max-width: 700px) { .quote-block { flex-direction: column; align-items: flex-start; } }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--color-primary);
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 72px);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-band h2 { color: var(--color-white); margin-bottom: 10px; }
/* Knappen i CTA-banden bär logotypens bärnsten. Scopad till .cta-band med flit —
   samma knappklasser sitter på ljusare underlag på andra håll, där bärnstenen
   inte håller. Texten är mörk teal (6,6:1) och ytan mot bandet 4,0:1, över
   kravet 3:1 för komponentkanter.
   Båda knappvarianterna listas: de flesta band använder .btn--light, men de tre
   artiklarna och /synpunkter-och-klagomal/ använder .btn--primary. Utan den
   andra selektorn blev de kvar i terrakotta — och därmed på 3,12:1. */
.cta-band .btn--light,
.cta-band .btn--primary { background: var(--color-brand-amber); color: var(--color-primary-dark); }
.cta-band .btn--light:hover,
.cta-band .btn--primary:hover { background: var(--color-accent-strong); }
.cta-band .btn--light .btn-arrow,
.cta-band .btn--primary .btn-arrow { background: var(--color-primary-dark); color: var(--color-white); }
.cta-band .btn--light .btn-arrow svg,
.cta-band .btn--primary .btn-arrow svg { stroke: var(--color-white); }
.cta-band p { color: rgba(255,255,255,0.82); max-width: 46ch; }

/* ---------- Forms ---------- */
/* minmax(0,1fr) av samma skäl som .grid ovan — en `<select>` är det värsta
   fallet, den tar sitt längsta alternativs bredd som min-content. */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field label { font-size: 0.85rem; font-weight: 700; color: var(--color-primary-dark); }
.field input, .field select, .field textarea {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--color-white);
  transition: border-color .2s ease;
  /* Formulärkontroller har en egen intrinsisk bredd (en select tar sitt längsta
     alternativs). Utan de här två raderna växer de ur sin spalt i stället för
     att fylla den. */
  width: 100%;
  max-width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 0.82rem; color: var(--color-ink-soft); margin-top: 14px; }
/* Fel vid inskickning (main.js, 2026-09-12). Mörkröd på det vita kortet: 7,9:1.
   Sajten har ingen annan felfärg — gul/blå hade inte lästs som ett fel. */
.form-error { margin-top: 18px; padding: 12px 14px; border-left: 3px solid #9B1C1C; background: #FDF2F2; color: #9B1C1C; font-size: 0.92rem; }
.form-error a { color: inherit; font-weight: 700; }
.form-success {
  display: none;
  background: var(--color-primary-light);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  color: var(--color-primary-dark);
  font-weight: 700;
  margin-top: 18px;
}
.form-success.is-visible { display: block; }

/* ---------- Contact info list ---------- */
.info-list { display: flex; flex-direction: column; gap: 22px; }
.info-list li { display: flex; gap: 16px; align-items: flex-start; }
.info-list .ic {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.info-list .ic svg { width: 19px; height: 19px; }
.info-list strong { display: block; color: var(--color-primary-dark); margin-bottom: 2px; }
.info-list span, .info-list a { color: var(--color-ink-soft); font-size: 0.94rem; }
.info-list a:hover { color: var(--color-link); }

/* Variant med avdelare mellan punkterna, för "Varför Reko" på startsidan. */
.info-list--why { gap: 0; }
.info-list--why li { padding: 20px 0; border-top: 1px solid var(--color-border); }
.info-list--why li:first-child { border-top: 0; padding-top: 0; }
.info-list--why strong { font-size: 1.04rem; margin-bottom: 5px; }
.info-list--why span { font-size: 0.96rem; line-height: 1.6; }

.media-caption { margin-top: 12px; font-size: 0.85rem; color: var(--color-ink-soft); text-align: center; }

/* ---------- Language pills ---------- */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary-dark);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-primary-dark);
  color: rgba(255,255,255,0.72);
  padding: 72px 0 28px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 1fr 1fr 0.8fr;
  gap: 32px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
}
.footer-brand .logo { color: var(--color-white); margin-bottom: 14px; }
.footer-brand .logo__mark { background: var(--color-accent); }
.footer-brand p { font-size: 0.92rem; max-width: 32ch; }
.footer-col h4 {
  color: var(--color-white);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
/* Storleken sitter på listan, inte på <a>. Kontaktkolumnen innehåller både länkar
   och en adress utan länk — låg den på <a> ärvde adressen 1rem och blev synligt
   större än telefon och mejl bredvid. */
.footer-col ul { display: flex; flex-direction: column; gap: 12px; font-size: 0.92rem; }
.footer-col a:hover { color: var(--color-white); }
.footer-col address { font-style: normal; }
.footer-brand .social-row { margin-top: 20px; }
.footer-uc { display: inline-block; margin-top: 24px; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 28px;
  font-size: 0.82rem;
}
.footer-bottom ul { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom a:hover { color: var(--color-white); }
/* Tre spalter på bred skärm (2026-09-12): copyright | länkarna | byråkrediten.
   Grid med 1fr auto 1fr, inte flex + space-between — annars hamnar länkarna mitt
   mellan två olika breda grannar i stället för mitt på sidan. minmax(max-content)
   hindrar copyrightraden (314px) från att radbrytas där sidospalterna inte räcker
   (uppmätt: exakt mitt kräver 1126px footer, dvs. ~1190px fönster) — mellan 1100
   och 1190 hamnar länkarna därför några tiotal px höger om mitten. Under 1100 staplas. */
@media (min-width: 1100px) {
  .footer-bottom { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
  .footer-bottom ul { justify-content: center; }
  .footer-credit { justify-self: end; }
}
.social-row { display: flex; gap: 10px; }
.social-row a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
}
/* Ikonen ärver color via svg { stroke: currentColor } — utan färgbytet blev den
   vit på gult (1,8:1) vid hover. */
.social-row a:hover { background: var(--color-accent); color: var(--color-primary-dark); }
.social-row svg { width: 16px; height: 16px; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); }
.reveal.is-visible { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }

/* ---------- Hoppa till innehåll ---------- */
/* Osynlig tills den får tangentbordsfokus. Ligger först i <body> så att Tab
   når den innan menyn. */
.skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 200;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: var(--shadow-lift);
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; }
main { scroll-margin-top: 85px; }

/* ---------- Reducerad rörelse ---------- */
/* Respekterar operativsystemets inställning för den som blir yr eller
   illamående av rörelse.
   VIKTIGT: .reveal ligger på opacity 0 tills GSAP lägger till .is-visible.
   Utan första regeln nedan skulle innehållet bli permanent osynligt för
   just de användare vi försöker ta hänsyn till. main.js sätter dessutom
   .is-visible direkt när inställningen är på, så detta är dubbel säkring. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Misc ---------- */
.section-media-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) {
  .section-media-split { grid-template-columns: 1fr; gap: 32px; }
  .section-media-split.media-first { display: flex; flex-direction: column-reverse; }
}
.section-media-split .img-placeholder,
.section-media-split img { border-radius: var(--radius-lg); }

.list-check { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
/* li:et var flex. I en flexbox blir varje textnod ett eget flex-item, så
   "<strong>Bevaka rätt</strong> — ansöka om …" delades i två kolumner: rubriken
   bröts på två rader och strecket började i en egen spalt. Blockvisning med
   ikonen absolut placerad låter texten flyta som vanlig löptext. Indraget är
   ikonens 26px + 14px mellanrum. */
.list-check li {
  display: block;
  position: relative;
  padding-left: 40px;
  font-size: 0.98rem;
  color: var(--color-ink-soft);
  line-height: 1.6;
}
.list-check li strong { color: var(--color-ink); }
.list-check .ic {
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-accent);
  /* Bocken var vit på terrakotta. På gult syns den inte (1,8:1) — marinblå
     bock på gult ger 6,2:1. */
  color: var(--color-primary-dark);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.list-check svg { width: 13px; height: 13px; }

.badge-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
/* Trygghetsbandet (TrustBar.astro) — avslutar innehållssektionen i stället för
   att ligga i en egen sektion. Låg tidigare som ett gräddband mellan två vita
   sektioner och läste därför som ett eget stycke innehåll. Ligger efter
   `.badge-row` med samma specificitet, så källordningen avgör margin-top —
   flytta den inte uppåt. */
.trust-bar { margin-top: 56px; justify-content: center; }
.badge {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-white);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  box-shadow: var(--shadow-soft);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.badge svg { width: 16px; height: 16px; stroke: var(--color-link); }

/* ==========================================================================
   Page head — title beside a lead image. Used by articles and by content
   pages that want the same opening (see .page-hero for the image itself).
   ========================================================================== */

.page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 0.85fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
@media (max-width: 980px) {
  .page-head { grid-template-columns: 1fr; gap: 32px; }
}
/* The title block inside .page-head fills its column — kill any max-width
   that the standalone version of the block carries. */
.page-head > .section-head { max-width: none; margin-bottom: 0; }

.page-hero {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}
.page-hero img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.page-hero .img-placeholder {
  aspect-ratio: 4/3;
  height: auto;
  min-height: 0;
}
/* Flatter crop for pages with a short title, so the image does not tower
   over the text column next to it. */
.page-hero--flat img,
.page-hero--flat .img-placeholder { aspect-ratio: 3/2; }
/* Stacked: full width, so a flatter crop keeps it from dominating */
@media (max-width: 980px) {
  .page-hero img,
  .page-hero .img-placeholder { aspect-ratio: 16/10; }
}

/* ==========================================================================
   Article / Insight pages
   ========================================================================== */

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 980px) {
  /* minmax(0, 1fr), inte 1fr: ett grid-item har min-width:auto och kan därför
     inte krympa under sitt innehålls minsta bredd. Jämförelsetabellen har
     min-width:540px, så kolumnen sprängdes till 540 px och hela sidan blev
     564 px bred på en 375 px-skärm — texten krympte och sidan gick att dra i
     sidled. Med minmax(0, …) stannar kolumnen i skärmbredd och tabellen
     scrollar inuti .table-wrap som det var tänkt. */
  .article-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Prose ---------- */
.article-body { max-width: 760px; }
.article-body > * + * { margin-top: 20px; }
.article-body h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.25;
  color: var(--color-primary-dark);
  margin-top: 56px;
  scroll-margin-top: 100px;
}
.article-body h3 {
  font-size: 1.15rem;
  color: var(--color-primary-dark);
  margin-top: 32px;
  scroll-margin-top: 100px;
}
.article-body p { color: var(--color-ink-soft); line-height: 1.75; }
.article-body a:not(.btn) {
  color: var(--color-link);
  font-weight: 600;
  text-underline-offset: 3px;
}
.article-body ul, .article-body ol { color: var(--color-ink-soft); line-height: 1.75; padding-left: 22px; }
.article-body li + li { margin-top: 10px; }
.article-body strong { color: var(--color-ink); font-weight: 700; }
/* Inline tokens — cookie names and similar literals */
.article-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--color-primary-dark);
  white-space: nowrap;
}

/* ---------- Meta line ---------- */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin-top: 18px;
}
.article-meta span { display: inline-flex; align-items: center; gap: 7px; }
.article-meta svg { width: 15px; height: 15px; stroke: var(--color-link); fill: none; stroke-width: 2.2; }

/* ---------- Author / reviewer card ---------- */
/* Hela sidokolumnen var tidigare sticky, så granskarkortet följde med hela vägen
   ner och åt upp höjden för innehållsförteckningen på laptopskärmar. Nu sträcks
   kolumnen till artikelns höjd och bara .toc är sticky — granskarkortet scrollar
   bort som vanligt innehåll. */
.article-aside { align-self: stretch; display: flex; flex-direction: column; gap: 20px; }

.author-card {
  background: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  text-align: center;
}
/* Ingen .author-card__photo längre — porträttet togs bort 2026-08-16, se
   src/lib/person.ts. Kortet börjar direkt på "Granskad av". */
.author-card__role { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-link); font-weight: 700; }
.author-card strong { display: block; margin-top: 8px; font-size: 1rem; color: var(--color-primary-dark); line-height: 1.4; }
.author-card__title { display: block; margin-top: 4px; font-size: 0.85rem; color: var(--color-ink-soft); }
.author-card__dates {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  line-height: 1.7;
}

/* ---------- Table of contents ---------- */
.toc {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
}
/* Sticky innanför sidokolumnen. max-height gör att en lång lista (t.ex. GDPR:s
   15 punkter) får egen scroll i stället för att kapas nertill på låga skärmar. */
.article-aside > .toc {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 980px) {
  .article-aside > .toc { position: static; max-height: none; overflow-y: visible; }
}
.toc > strong { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 14px; }
.toc ol { margin: 0; padding-left: 18px; font-size: 0.9rem; line-height: 1.55; }
.toc li + li { margin-top: 10px; }
.toc a { color: var(--color-ink-soft); text-decoration: none; }
/* På mobil är listan bara läsbara rader på 18 px — under WCAG:s 24 px för
   klickytor. Lite padding räcker, radavståndet finns redan. */
@media (max-width: 980px) {
  .toc a { display: inline-block; padding: 4px 0; }
  /* Inflyttad i texten av main.js — se "Innehållsförteckningen på mobil".
     Länkarna måste återta sin egen färg: inuti .article-body vinner
     `.article-body a:not(.btn)` annars och gör listan accentorange. */
  .toc--inline { margin-top: 24px; background: var(--color-cream); border-color: transparent; }
  .article-body .toc--inline a { color: var(--color-ink-soft); font-weight: 500; }
  .article-body .toc--inline a:hover { color: var(--color-link); }
}
.toc a:hover { color: var(--color-link); text-decoration: underline; }

/* ---------- Key takeaways ---------- */
.takeaways {
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  padding: 28px 32px;
  margin-top: 32px;
}
.takeaways > strong { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 14px; }
.takeaways ul { margin: 0; padding-left: 20px; }
.takeaways li { color: var(--color-primary-dark); font-weight: 500; line-height: 1.65; }
.takeaways li strong { color: var(--color-primary-dark); font-weight: 800; }

/* ---------- Comparison table ----------
   Stylingen satt tidigare på .article-body table och gällde alltså bara inuti
   artiklar. Jämförelsetabellen på /god-man/ ligger i en vanlig section och blev
   därför helt ostylad — ingen cellpadding, inga linjer, ingen rubrikrad, så
   texterna gick i varandra. Samma sak som hände .sources tidigare. Nu hänger
   den på .table-wrap, som varenda tabell på sajten redan ligger i. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.table-wrap table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.table-wrap th, .table-wrap td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.table-wrap th { background: var(--color-cream); color: var(--color-primary-dark); font-weight: 700; }
.table-wrap td { color: var(--color-ink-soft); line-height: 1.6; }
.table-wrap td strong { color: var(--color-ink); font-weight: 700; }
/* Rad där värdet gäller båda kolumnerna (colspan). Hela raden tonas, så att
   den läses som en gemensam rad och inte som att vänsterspaltens text rinner
   över i högerspalten. Taggen säger samma sak i ord. */
.table-wrap .row-both > td { background: var(--color-cream); }
.table-wrap .row-both > td:first-child { border-right: 1px solid var(--color-border); }
.cell-tag {
  display: inline-block;
  margin-right: 10px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Sources & disclaimer ---------- */
.sources {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--color-border);
}
.sources > strong { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 14px; }
/* Blocket hämtade tidigare länkfärg och radavstånd från .article-body och såg
   därför fel ut så fort det användes utanför en artikel. Nu står det för sin
   egen styling och ser likadant ut var det än placeras. */
.sources ul { margin: 0; padding-left: 20px; font-size: 0.9rem; color: var(--color-ink-soft); line-height: 1.75; }
.sources li + li { margin-top: 10px; }
.sources a { color: var(--color-link); font-weight: 600; text-underline-offset: 3px; }
.disclaimer {
  margin-top: 24px;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-ink-soft);
  line-height: 1.7;
}

/* ==========================================================================
   Tredjepartswidgetar
   ========================================================================== */
/* Vår reset `svg { stroke: currentColor }` (rad 73) gäller ALLA svg:er på sidan,
   även dem Cookiebot injicerar. Deras ikon ärvde därför vit stroke och fick en
   vit kontur runt sig — den syntes tydligast som en ring runt kakknappen mot
   ljus bakgrund. Deras grafik är byggd med enbart fill och ska inte ha stroke. */
#CookiebotWidget svg, #CookiebotWidget svg *,
#CybotCookiebotDialog svg, #CybotCookiebotDialog svg * { stroke: none; }