/*
 * Våra tillägg. theme.css redigeras aldrig — allt eget hamnar här.
 *
 * Nedan: de överstyrningar som ligger i WordPress "Ytterligare CSS" och därför inte
 * finns i theme.css, men som är aktiva på den publicerade sajten.
 * Källa: custom_css i exporten 2026-08-26.
 */

.module-alt-hero__image img { min-height: 350px; }
.module-alt-hero__content { width: 100%; }
button.menu-toggle { background-color: transparent; }

/*
 * Geist. Nytt typsnitt för brödtext, tillagt av Fedza 2026-08-28. Ersätter
 * IsidoraSans-Medium ($copy-family i designsystemet) som kroppstextens
 * typsnitt. Detta är en medveten avvikelse från live-sajtens WordPress-tema,
 * som fortfarande kör Isidora Sans rakt igenom — se .claude/design-system.md.
 * Filerna ligger i out/assets/fonts/.
 */
@font-face {
  font-family: "Geist-Medium";
  src: url("fonts/Geist-Medium.woff2") format("woff2"),
       url("fonts/Geist-Medium.woff") format("woff"),
       url("fonts/Geist-Medium.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Geist-MediumItalic";
  src: url("fonts/Geist-MediumItalic.woff2") format("woff2"),
       url("fonts/Geist-MediumItalic.woff") format("woff"),
       url("fonts/Geist-MediumItalic.otf") format("opentype");
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist-SemiBold";
  src: url("fonts/Geist-SemiBold.woff2") format("woff2"),
       url("fonts/Geist-SemiBold.woff") format("woff"),
       url("fonts/Geist-SemiBold.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Geist-SemiBoldItalic";
  src: url("fonts/Geist-SemiBoldItalic.woff2") format("woff2"),
       url("fonts/Geist-SemiBoldItalic.woff") format("woff"),
       url("fonts/Geist-SemiBoldItalic.otf") format("opentype");
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist-Bold";
  src: url("fonts/Geist-Bold.woff2") format("woff2"),
       url("fonts/Geist-Bold.woff") format("woff"),
       url("fonts/Geist-Bold.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "Geist-BoldItalic";
  src: url("fonts/Geist-BoldItalic.woff2") format("woff2"),
       url("fonts/Geist-BoldItalic.woff") format("woff"),
       url("fonts/Geist-BoldItalic.otf") format("opentype");
  font-style: italic;
  font-display: swap;
}

/*
 * Byt ut IsidoraSans-Medium mot Geist-Medium överallt där temat använder den
 * som brödtext — samma selektorer som theme.css, i samma ordning, så filen
 * går att stämma av mot källan om typsnittet någonsin byts tillbaka.
 */
body { font-family: "Geist-Medium", sans-serif; }

/*
 * ── Luftigare typografi och layout (Fedza, 2026-09-03) ────────────────────
 * Uppdaterat utseende utifrån designsystemet i Figma ("Blodtrycksdoktorn —
 * Design System"). Designsystemet sätter brödtext i radhöjd 1.66 med generöst
 * styckesavstånd och gott om luft mellan sektioner. Det tar tillbaka den
 * tidigare hoptryckningen (radhöjd 1.5, styckesmarginal 0.5rem) till förmån för
 * en luftigare läsupplevelse. Endast värden ur designsystemet används — inga
 * nya färger, typsnitt eller radier. Se .claude/design-system.md.
 */

/* Radhöjd 1.66 = designsystemets body-värde (temat satte samma, ingenstans
   annat än på body). Luftigare än den tidigare 1.5. */
body { line-height: 1.66; }
/* .module-alt-hero__text sätter egen line-height (22px/28px) i stället för att
   ärva body — samma 1.66 här, en rad räcker för båda brytpunkterna. */
.module-alt-hero__text { line-height: 1.66; }

/* Styckesavstånd tillbaka till temats generösa 1rem för mer luft mellan
   stycken. Sifferrubriker (".module-content h3", "1. Medicinsk bedömning"-typen)
   får ännu mer luft ovanför och en aning under. */
p { margin: 1rem 0; }
.module-content h3 { margin: 2em 0 0.5em; }

/* Mer luft runt varje sektion. Temat: 3rem → 5rem (48rem) → 4rem (87.5rem).
   Höjt genomgående så sektionerna andas, med samma nedtrappning på riktigt
   breda skärmar som temat själv gör. */
.module-content__content { padding: 4rem 0; }
@media screen and (min-width: 48rem) {
  .module-content__content { padding: 7rem 0; }
}
@media screen and (min-width: 87.5rem) {
  .module-content__content { padding: 6rem 0; }
}

/* Sektionsrubriken får något mer luft till brödtexten under sig. Temat:
   margin 0 0 2rem → 0 0 4rem (87.5rem). */
.module-content__title { margin: 0 0 2.5rem; }
@media screen and (min-width: 87.5rem) {
  .module-content__title { margin: 0 0 4rem; }
}
.off-canvas-menu .menu-item .sub-menu .menu-item a { font-family: "Geist-Medium", sans-serif; }
.off-canvas-menu .current-menu-item a { font-family: "Geist-Medium", sans-serif; }
.module-quotes__quote { font-family: "Geist-Medium", sans-serif; }
.module-prices__preamble { font-family: "Geist-Medium", sans-serif; }
.module-prices .column-two h3 { font-family: "Geist-Medium", sans-serif !important; }
.module-prices__box p,
.module-prices__fine-print { font-family: "Geist-Medium", sans-serif; }
.get-started .get-started-text .text { font-family: "Geist-Medium", sans-serif; }
#soft-conversion .get-started-text p { font-family: "Geist-Medium", sans-serif; }
.page-intro__main p { font-family: "Geist-Medium", sans-serif; }
.article-module-column-content p { font-family: "Geist-Medium", sans-serif; }
.article-list .article li,
.article-list .article p { font-family: "Geist-Medium", sans-serif; }
.main-article-intro__left-column p { font-family: "Geist-Medium", sans-serif; }
.article li,
.article p { font-family: "Geist-Medium", sans-serif; }

/*
 * Knapparnas färg. Temat fyller .button med brand-dark (#72053a); här är den #a61154,
 * färgen ur Figma (Fedza 2026-09-10, beslutat för hela projektet). Gäller varje fylld
 * knapp på sidorna vi bygger — den är den enda knappklass de använder.
 *
 * Det här är en medveten avvikelse från WordPress-sajten, av samma slag som Geist-Medium
 * för brödtexten: live-sajten har fortfarande #72053a på sina knappar. Se "Colours" i
 * .claude/design-system.md.
 *
 * Bannerns knapp (.site-footer-banner--brand a.button) är den omvända — ljusrosa platta
 * på vinrött — och rörs inte av det här; temats egen regel väger tyngre. Länkar,
 * textknappar, ikonringar och allt annat som bär brand-dark står också kvar.
 */
.button { background-color: #a61154; }
.site-footer-banner--yellow a.button { background-color: #a61154; }

/*
 * Optisk centrering av knapptexten (Fedza 2026-09-10).
 *
 * Webbläsaren centrerar textraden, inte bokstäverna, och en textrad är inte symmetrisk
 * kring sina versaler. Mätt vid 16px: Isidora Sans har 2,6px mellan versalhöjd och radens
 * överkant men 2,9px under baslinjen, Geist 3,1px och 3,7px. Luften under baslinjen blir
 * alltså större än luften över versalerna, och texten ser hög ut.
 *
 * Till det kommer att våra etiketter är svenska. Å, Ä och Ö sticker upp ungefär 0,6px
 * ovanför versalhöjden vid den här storleken, och det är prickarna ögat läser som
 * textens överkant — inte versalen. "Räkna ut BMI", "Kom igång", "Fortsätt till
 * kostnadsfri konsultation": nästan varenda knapp på sajten har en. Räknat till bläcket i
 * stället för till versalhöjden är skevheten ungefär en pixel.
 *
 * Rättningen är en halv pixel neråt — mitt emellan de två sätten att mäta, och den
 * lägger de faktiska etiketterna inom en tiondels pixel från mitten. Pixeln flyttas från
 * knappens underkant till dess överkant, så höjden är oförändrad. Skevheten är
 * typsnittets, inte radhöjdens, så samma halva pixel gäller varje knapp oavsett storlek —
 * därför får de som sätter egen padding den där de står (.guide-bar .button,
 * .hub-btn--white, kalkylatorns knapp).
 */
.button { padding-top: 12.5px; padding-bottom: 11.5px; }

/*
 * Tabeller. Temat sätter bara border-collapse och har ingen tabellklass, men
 * flera specifikationer kräver riktiga HTML-tabeller. Bara tokens från
 * designsystemet används här — inga nya färger, typsnitt eller radier.
 */
.table-scroll {
  overflow-x: auto;
  margin: 1.5rem 0;
  -webkit-overflow-scrolling: touch;
}

/* Temat drar in h1-h6, p och ul med 15% inuti .module-content från 64rem.
   Tabellen ska följa samma indrag, annars ligger den bredvid brödtexten. */
@media screen and (min-width: 64rem) {
  .module-content .table-scroll {
    padding: 0 15%;
  }
}

.data-table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: 16px;
  text-align: left;
}

.data-table th,
.data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e6e6e6;
  vertical-align: top;
}

.data-table thead th {
  font-family: "IsidoraSans-Bold", sans-serif;
  color: #72053a;
  border-bottom: 2px solid #72053a;
}

.data-table tbody th {
  font-family: "IsidoraSans-SemiBold", sans-serif;
  color: #101011;
  white-space: nowrap;
}

.data-table tbody td {
  font-family: "Geist-Medium", sans-serif;
  color: #343434;
}

/*
 * BMI-kalkylatorn — kortet med längd och vikt, och svaret som ersätter det.
 * Formen kommer från Figma (Simple BMI Calculator, Fedza 2026-09-10). Temat har en egen
 * kalkylator (.shortcode-bmi-calculator) men bara för att visa siffran, och ingen form
 * som liknar det här kortet — så allt står här. Beteendet ligger i site.js.
 *
 * Värden utöver designsystemets lista, och de gäller bara i den här widgeten: kortets
 * radie 28px och ram #f2f2f2, fältens ram #bcbcbc och radie 12px, svarsrutans radie 16px
 * och det finstilta i #5c5c60. Svarsrutan är grå med svart text oavsett vilket svar det
 * blev (Friska Webb, Easy BMI, 2026-09-21) — inga klassfärger. Se "BMI-kalkylatorn" i
 * .claude/design-system.md.
 */
.bmi-widget {
  box-sizing: border-box;
  width: 100%;
  max-width: 480px;
  padding: 28px;
  background: #fff;
  border: 2px solid #f2f2f2;
  border-radius: 28px;
  /* Heron är centrerad på mobil (.module-alt-hero__content) — kortet är det aldrig. */
  text-align: left;
}

.bmi-widget *,
.bmi-widget *::before,
.bmi-widget *::after {
  box-sizing: border-box;
}

/* Widgeten visar och döljer sina delar med hidden. En display-regel skulle vinna över
   det, så knappen nedan sätter display bara när den inte är dold. */
.bmi-widget [hidden] {
  display: none;
}

.bmi-widget__title {
  margin: 0;
  font-family: "IsidoraSans-Bold", sans-serif;
  font-size: 26px;
  line-height: 30px;
  letter-spacing: -0.26px;
  color: #101011;
}

.bmi-widget__lead {
  margin: 12px 0 0;
  font-family: "Geist-Medium", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.16px;
  color: #343434;
}

/* Längd och vikt bredvid varandra — de är korta och hör ihop. */
.bmi-widget__fields {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.bmi-field {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.bmi-widget .bmi-field__label {
  font-family: "Geist-SemiBold", sans-serif;
  font-size: 16px;
  letter-spacing: -0.16px;
  color: #101011;
}

.bmi-widget .bmi-field__input {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  font-family: "Geist-Medium", sans-serif;
  font-size: 18px;
  letter-spacing: -0.18px;
  color: #343434;
  background: #fff;
  border: 1.5px solid #bcbcbc;
  border-radius: 12px;
  -webkit-appearance: none;
  appearance: none;
}

.bmi-widget .bmi-field__input::placeholder {
  color: rgba(36, 36, 36, 0.5);
}

.bmi-widget .bmi-field__input:focus-visible {
  /* Samma fokusmarkering som temat ger sina egna textfält. */
  outline: 2px solid #a61154;
  outline-offset: 1px;
}

/* Temats .button är rätt knapp; den är bara inte i full bredd och inte 52px hög. */
.bmi-widget .bmi-widget__button:not([hidden]) {
  display: flex;
}

.bmi-widget .bmi-widget__button {
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  margin: 20px 0 0;
  /* Halva pixeln, se "Optisk centrering av knapptexten" ovan. Höjden är låst till 52px,
     så en pixel padding uppe flyttar texten en halv neråt. */
  padding: 1px 24px 0;
  font-family: "Geist-SemiBold", sans-serif;
  font-size: 16px;
  line-height: 16px;
  text-decoration: none;
}

.bmi-widget__error {
  margin: 12px 0 0;
  font-family: "Geist-SemiBold", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #72053a;
}

/* Svaret: siffran och klassen på samma rad, texten under, länken till BMI-klasserna sist.
   Rutan är grå och texten svart vare sig svaret är undervikt eller obesitas — färgen ska
   inte döma. */
.bmi-result {
  margin-top: 20px;
  padding: 20px;
  border-radius: 16px;
  background: #f5f5f5;
}

.bmi-widget .bmi-result__head {
  /* Talet och klassen står på var sin rad: klassen bär numera hela intervallet
     ("BMI på 18,5–24,9 kg/m² – normalvikt") och blir för lång att stå bredvid. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: #101011;
}

.bmi-widget .bmi-result__number {
  /* Temat färgar spanar i heron brand-dark — här ska de vara svarta som rubriken. */
  color: inherit;
  font-family: "IsidoraSans-Bold", sans-serif;
  font-size: 46px;
  /* 1,1 i stället för 40px: talet står nu på egen rad och behöver sin egen höjd. */
  line-height: 1.1;
  letter-spacing: -0.92px;
}

.bmi-widget .bmi-result__class {
  /* Brödtextens vikt, inte rubrikens: intervallet är en upplysning, talet är svaret. */
  color: inherit;
  font-family: "Geist-Medium", sans-serif;
  font-size: 16px;
  letter-spacing: -0.16px;
}

.bmi-result__text {
  padding-top: 16px;
  font-family: "Geist-Medium", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.16px;
  color: #343434;
}

.bmi-result__text p {
  margin: 0 0 0.9rem;
}

.bmi-result__text p:last-child {
  margin-bottom: 0;
}

/* Länken till BMI-klasserna står i rutan, under texten. Samma färg som texten runt den
   och understruken, som i Figma — inte länkarnas #72053a. Undantaget från regeln om
   länkfärgen, som "Räkna om" nedan. Tre klasser för att väga tyngre än artikelsidans
   .art a:not(.button), som annars färgar länken vinröd. */
.bmi-widget .bmi-result .bmi-result__link {
  display: inline-block;
  margin-top: 16px;
  font-family: "Geist-Medium", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.16px;
  color: #343434;
  text-decoration: underline;
}

.bmi-widget .bmi-result .bmi-result__link:hover,
.bmi-widget .bmi-result .bmi-result__link:focus-visible {
  color: #101011;
}

/* Rubriken till vänster, vägen tillbaka till formuläret i övre högra hörnet. baseline
   lägger knappen på rubrikens första rad även om rubriken bryts på smala skärmar. */
.bmi-widget__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

/* Formuläret försvinner när svaret kommer — det här är vägen tillbaka. Knappfärgen
   #a61154 och inte länkarnas #72053a: så står den i Figma, och så matchar den kortets
   CTA-knapp. Det är undantaget från regeln att bara fyllda knappar bär den färgen — se
   "Knappfärgen" i .claude/design-system.md. */
.bmi-widget__again {
  flex: 0 0 auto;
  padding: 0;
  font-family: "Geist-SemiBold", sans-serif;
  font-size: 14px;
  color: #a61154;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}

.bmi-widget__fine {
  margin: 12px 0 0;
  font-family: "Geist-Medium", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: -0.13px;
  color: #5c5c60;
  text-align: center;
}

/* Smala skärmar: mindre luft i kortet. Fälten står kvar bredvid varandra som i designen
   — de rymmer tre siffror var ner till ungefär 340px skärm. */
@media (max-width: 25rem) {
  .bmi-widget {
    padding: 20px;
  }
}

/* Under det blir rutorna för trånga, och då står de på höjden i stället. */
@media (max-width: 20rem) {
  .bmi-widget__fields {
    display: block;
  }

  .bmi-field + .bmi-field {
    margin-top: 16px;
  }
}

/* I heron: texten till vänster, kortet till höger från 64rem. Under det står kortet
   under texten, som allt annat i heron. Se partials/breadcrumbs-hero.njk. */
.module-alt-hero__body--aside {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.module-alt-hero__body--aside .module-alt-hero__aside {
  display: flex;
  justify-content: center;
}

@media (min-width: 64rem) {
  .module-alt-hero__body--aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 480px;
    align-items: start;
    gap: 3rem;
  }

  .module-alt-hero__body--aside .module-alt-hero__aside {
    justify-content: flex-end;
  }
}

/*
 * Vårdteamets fyra ledare som porträttkort, på /overvikt-obesitas/behandling/vardteam/.
 * Sidmallen har inget bildfält för sektioner än (se "Bilder i sidmallen" under Open items
 * i design-system.md), så det här är råmarkup i sektionens egen brödtext: ett vitt kort
 * på det rosa bandet med en rund porträttskiva på ett rosa fotofält, en vinröd rollbricka,
 * namnet och kompetensraden. Fyra i bredd, två på tablet, ett på mobil. Kortet tar hela
 * prosabredden — det står i .art-prose-regeln längre ner. Färger, radier och skuggor är
 * temats kortspråk (#fff på #fff3f9, 20px, 0 14px 36px rgba(114,5,58,.10), vinrött #72053a).
 */
.team-leads {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Listan är ett rutnät, inte en punktlista: prosans indrag, radbredd och avstånd
   mellan punkterna (.art-prose > ul längre ner) gäller inte här. */
.art-prose > .team-leads { padding-left: 0; max-width: none; }
.art-prose .team-leads > li + li { margin-top: 0; }

/* Utan ett inledande stycke står inget till höger om rubriken, så den får hela bredden
   och slipper radbrytas i den smala vänsterspalten. Marginalen plus rutnätets 18px ger
   designens 44px ner till korten. */
@media screen and (min-width: 48rem) {
  .art-prose > .art-h2:has(+ .team-leads) { grid-column: 1 / -1; margin-bottom: 26px; }
}

@media screen and (max-width: 63.99rem) {
  .team-leads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media screen and (max-width: 37.49rem) {
  .team-leads { grid-template-columns: minmax(0, 1fr); }
}

.team-leads__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 14px 36px rgba(114, 5, 58, 0.10);
  overflow: hidden;
}

/* Rosa fotofält med det runda porträttet centrerat. */
.team-leads__photo {
  height: 200px;
  background: linear-gradient(180deg, #fbdcea 0%, #f6cade 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Porträtten är 400×400 vita brickor med genomskinliga hörn. Bilden visas som den är,
   nedskalad och rundad direkt på bildelementet — brickans vita bakgrund blir cirkelns insida. */
.team-leads__photo img {
  display: block;
  width: 162px;
  height: 162px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 26px rgba(114, 5, 58, 0.16);
}

.team-leads__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 22px 26px;
}

.team-leads__role {
  align-self: flex-start;
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 999px;
  background: #72053a;
  color: #fff;
  font-family: "IsidoraSans-SemiBold", sans-serif;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.04em;
}

.team-leads__name {
  margin: 0;
  font-family: "IsidoraSans-Black", sans-serif;
  font-size: 21px;
  line-height: 1.2;
  color: #101011;
  hyphens: auto;
}

.team-leads__meta {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #4a4a4c;
}

/*
 * Dämpade källhänvisningar. Parentetiska referenseringar i löptexten — "(STEP 1,
 * produktresumé avsnitt 5.1, tabell 4)" — tonas ner visuellt så de inte stör
 * läsningen, utan att tappa SEO-värdet: Google ser texten, men läsarens öga glider
 * förbi den. Klassen sätts av transformen cite-muted i eleventy.config.js.
 */
.cite-muted {
  color: #999999;
  font-size: 0.88em;
}
.cite-muted a {
  color: #999999;
}
.cite-muted a:hover {
  color: #72053a;
}

/* .faq-item__arrow roteras av site.js när svaret är öppet. */
.faq-item__arrow.rotate-90 {
  transform: rotate(90deg);
}

/*
 * Heron börjar överst, inte i mitten. Temat gör .module-alt-hero__wrapper till en rad
 * med align-items: center och ger den min-height: 35vh (--height-small), så rubriken
 * hamnade olika långt ner på olika sidor: en kort ingress centrerades i en hög hero,
 * en lång fyllde den. Avståndet hängde därmed på ingressens längd och på skärmens
 * höjd i stället för att vara sidhuvudets. Med flex-start står rubriken lika långt
 * under sidhuvudet på varje sida, och temats minsta höjd och bottenmått får vara kvar:
 * luften hamnar under ingressen i stället för runt den.
 *
 * Först från 48rem: under den är wrappern en kolumn, och align-items styr då
 * sidled — inte höjdled — på en hero som redan står överst.
 */
@media screen and (min-width: 48rem) {
  .module-alt-hero__wrapper { align-items: flex-start; }
}

/*
 * Sidrubriken i heron. Temat sätter 40px på mobil (50px från 48rem, 70px från
 * 64rem) utan att tillåta radbrytning inuti ord, och .module-alt-hero har
 * overflow:hidden. Ett långt sammansatt ord — "Överviktsbehandling",
 * "viktminskningsmedicin" — blir därför bredare än rubrikens spalt och klipps av.
 * Avstavning delar ordet där svenskan tillåter det (base.njk sätter lang="sv"),
 * och break-word är sista utvägen för ord som inte kan avstavas. Rubriker som
 * redan får plats renderas exakt som förut.
 */
.module-alt-hero__title {
  margin-bottom: 2rem;
  letter-spacing: -.1rem;
  -webkit-hyphens: auto;
  hyphens: auto;
  /* Bara riktigt långa sammansättningar avstavas: minst 14 tecken i ordet och
     minst 6 tecken på var sida om bindestrecket. "Överviktsbehandling" och
     "viktminskningsmedicin" delas, "viktnedgång" och "läkarbesök" lämnas i fred
     så att rubriker som redan fick plats bryter raderna precis som förut. */
  -webkit-hyphenate-limit-before: 6;
  -webkit-hyphenate-limit-after: 6;
  hyphenate-limit-chars: 14 6 6;
  overflow-wrap: break-word;
}

/* Temat sätter 70px/70px (font-size/line-height) från 64rem — sänkt till
   65px/65px här. line-height sänks i samma steg för att hålla samma täta
   1:1-förhållande som temat själv använder på den här rubriken. */
@media screen and (min-width: 64rem) {
  .module-alt-hero__title {
    font-size: 65px;
    line-height: 65px;
  }
}

/*
 * Frågeflöden (sf-)
 * ─────────────────
 * Stilarna för StandaloneFlow — den React-komponent som renderar de anonyma
 * frågeflödena från backendens /standalone-API. Källkoden ligger i
 * tools/standalone-flow/; bygget paketerar den till out/assets/frageflode.js.
 * En skribent lägger in ett flöde med `frageflode: <Program>` i en sektion, och
 * partials/frageflode.njk sätter sektionsmodulen runt monteringspunkten.
 * * Bara det temat inte redan har. Färger, radier och typsnitt är hämtade ur
 * .claude/design-system.md — inget nytt införs här.
 *
 * En avvikelse värd att veta om: inuti .module-content padd:ar temat h1–h6, p och ul
 * 0 15% från 64rem. Det är rätt för en textsektion men fel för ett formulär, där rubrik,
 * brödtext och fält måste ligga i samma vänsterkant. Därför nollas den paddningen inuti
 * .sf och kortet får i stället ett eget textmått.
 */

/*
 * Temat drar in text inuti .module-content med `padding: 0 15%` från 64rem, element för
 * element. Ett formulär måste ha rubrik, brödtext och fält i samma vänsterkant, så
 * indraget flyttas från de enskilda elementen till kortet — då hamnar flödet på samma
 * linje som sektionens egen text i stället för utanför den.
 */
.sf h2,
.sf h3,
.sf h4,
.sf h5,
.sf h6,
.sf p,
.sf ul,
.sf ol,
.sf dl {
  padding-left: 0;
  padding-right: 0;
}

@media screen and (min-width: 64rem) {
  .sf {
    padding: 0 15%;
  }
}

/*
 * Svarsalternativ, val och slutsatsens inmatningar är divar, inte ul/li. Temat sätter
 * list-style: inside på varje ul inuti .module-content genom en :not-kedja som inte går att
 * överrösta med rimlig specificitet — och de här listorna är formulär, inte löpande text.
 */

.sf-card__title {
  margin: 0 0 1rem;
}

/* ── Kort ─────────────────────────────────────────────────────────────── */

.sf-card__body {
  color: #343434;
}

.sf-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

/* Startknappen står för sig, med samma luft som ett kortsteg får till sina knappar. */
.sf__start {
  margin-top: 1.5rem;
}

.sf__eyebrow {
  font-family: "IsidoraSans-SemiBold", sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #72053a;
  margin: 0 0 0.5rem;
}

.sf__notice,
.sf__muted {
  color: #343434;
  font-size: 15px;
}

/* Två klasser, för att slå .sf p-nollställningen ovan — annars tappar rutan sin padding. */
.sf .sf__notice {
  background: #fff3f9;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}

.sf__problem {
  color: #72053a;
  font-family: "IsidoraSans-Bold", sans-serif;
  margin-top: 1rem;
}

/* ── Svarsalternativ ──────────────────────────────────────────────────── */

.sf-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
}

.sf-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  background: #f5f6f7;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.sf-option:hover {
  background: #fff3f9;
}

.sf-option--checked {
  background: #fff3f9;
  border-color: #72053a;
  font-family: "IsidoraSans-Bold", sans-serif;
}

.sf-option label {
  flex: 1;
  cursor: pointer;
}

/* Temat lämnar radioknappen som webbläsarens egen; brand-dark matchar kryssrutans ruta. */
.sf-option input[type='radio'] {
  accent-color: #72053a;
  flex: none;
}

/* ── Tal och text ─────────────────────────────────────────────────────── */

.sf-number {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.sf-number input {
  max-width: 8rem;
  font-size: 24px;
  font-family: "IsidoraSans-Bold", sans-serif;
}

.sf-number__range {
  color: #999999;
  font-size: 15px;
}

.sf-text {
  width: 100%;
}

.sf-multitext {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sf-multitext__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sf-multitext__field span {
  font-family: "IsidoraSans-SemiBold", sans-serif;
  font-size: 15px;
}

/* ── Slutsats ─────────────────────────────────────────────────────────── */

.sf-findings {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.sf-findings__item dt {
  font-family: "IsidoraSans-SemiBold", sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #999999;
}

.sf-findings__item dd {
  margin: 0;
  font-family: "IsidoraSans-Black", sans-serif;
  font-size: 40px;
  line-height: 1;
  color: #72053a;
}

.sf-inputs {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #d6d6d6;
}

.sf-inputs__title,
.sf-section__title {
  font-family: "IsidoraSans-Bold", sans-serif;
  font-size: 18px;
  margin-bottom: 1rem;
}

.sf-inputs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  padding: 0;
}

.sf-inputs__item label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sf-inputs__label {
  font-family: "IsidoraSans-SemiBold", sans-serif;
  font-size: 15px;
}

.sf-inputs__item input,
.sf-inputs__item select {
  max-width: 12rem;
}

/* ── Avslutet ─────────────────────────────────────────────────────────── */

/* Rubriken är temats centrerade sektionsrubrik, så knappen under den centreras med. */
.sf-done {
  text-align: center;
}

.sf-done .sf-card__actions {
  justify-content: center;
  margin-top: 0;
}

/* ── BankID ───────────────────────────────────────────────────────────── */

.sf-bankid {
  margin-top: 1.5rem;
}

.sf-bankid__status {
  font-family: "IsidoraSans-SemiBold", sans-serif;
}

/*
 * QR:n är en SVG från BankID och ska inte skalas upp till oskärpa — 200px är vad appen
 * behöver för att läsa den på armlängds avstånd. Vit botten och en ram i temats grå, så den
 * står ut mot både vit och rosa sektionsbakgrund.
 */
.sf-bankid__qr {
  display: block;
  width: 200px;
  height: 200px;
  margin-top: 1rem;
  padding: 8px;
  background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 6px;
}

/* ── Testinloggning ───────────────────────────────────────────────────── */

/*
 * Genvägen förbi BankID, som bara finns medan sidorna granskas (flows.testLogin). Den ska
 * se ut som det den är: en utvecklarväg, inte ett andra sätt att logga in. Därför en
 * avskiljande linje och en dämpad förklaring — inget som konkurrerar med BankID-knappen.
 */

.sf-testlogin__open {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px dashed #d6d6d6;
}

.sf-testlogin {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px dashed #d6d6d6;
}

.sf .sf-testlogin__note {
  color: #999999;
  font-size: 15px;
  margin: 0 0 1rem;
}

.sf-testlogin__label {
  display: block;
  font-family: "IsidoraSans-SemiBold", sans-serif;
  margin-bottom: 0.5rem;
}

.sf-testlogin .sf-text {
  max-width: 16rem;
}

/* ── Val mellan parallella aktiviteter ────────────────────────────────── */

.sf-choices {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
}

.sf-choice {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: #f5f6f7;
  border-radius: 6px;
}

.sf-choice--ongoing {
  background: #fff3f9;
}

.sf-choice__name {
  flex: 1;
  font-family: "IsidoraSans-Bold", sans-serif;
}

.sf-choice__state {
  color: #999999;
  font-size: 15px;
}

/* ── Innehållssektioner ───────────────────────────────────────────────── */

.sf-section + .sf-section {
  margin-top: 1.5rem;
}

.sf-section__image {
  max-width: 100%;
  border-radius: 6px;
  margin-top: 1rem;
}

.sf-list__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #d6d6d6;
}

/* ── Markdown i brödtexten ────────────────────────────────────────────── */

/*
 * Contentfuls långa textfält är markdown, och tools/standalone-flow/markdown.jsx gör dem
 * till riktiga element. Rubrikerna får .sf-section__title och stycken temats egna p, så
 * här står bara det temat inte redan säger.
 */

.sf-md > :first-child {
  margin-top: 0;
}

.sf-md > :last-child {
  margin-bottom: 0;
}

/*
 * Listorna är de enda som behöver !important, av skälet som står längre upp: temat sätter
 * både list-style och 15%-indraget på varje ul i .module-content genom en :not-kedja med
 * fyra klasser. Till skillnad från svarsalternativen är det här löpande text och ska vara
 * en riktig lista — och punkten hamnar utanför texten, så en punkt som går över två rader
 * håller vänsterkanten.
 */
.sf-md__list {
  margin: 1rem 0;
  padding: 0 0 0 1.25rem !important;
  list-style-position: outside !important;
}

ul.sf-md__list {
  list-style-type: disc !important;
}

ol.sf-md__list {
  list-style-type: decimal !important;
}

.sf-md__list li + li {
  margin-top: 0.5rem;
}

.sf-md__quote {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 3px solid #d6d6d6;
}

/* Temat döljer hr från 64rem — där är den mobilmenyns avdelare, inte textens. */
.sf-md__rule {
  display: block;
  border: none;
  border-top: 1px solid #d6d6d6;
  width: auto;
  opacity: 1;
  margin: 1.5rem 0;
}

.sf-md__code {
  background: #f5f6f7;
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.95em;
}

/* ── Fel ──────────────────────────────────────────────────────────────── */

.sf-error {
  background: #fff3f9;
  border-radius: 6px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.sf-error__title {
  font-family: "IsidoraSans-Bold", sans-serif;
  font-size: 20px;
  margin-bottom: 0.5rem;
}

.sf-error .button {
  margin-top: 1rem;
}

/*
 * ── Guidesidan (layouts/guide.njk) ──────────────────────────────────────
 * En lässpalt med en spalt bredvid: klustret sidan tillhör, sidans egna avsnitt och ett
 * CTA-kort. Temat har ingen sådan sidform, så allt nedan är vårt — men bara med temats
 * tokens: färgerna, typsnitten, knappen, radien 12px från .article img och brytpunkterna
 * 48rem/64rem/87.5rem. Sidhuvudet är 60px högt under 64rem och 85px från 64rem; det
 * styr var spalten och kapslarna fastnar. Se "Guidesidan" i .claude/design-system.md.
 */

/* Hero. Temats .module-alt-hero ger avståndet till det fasta sidhuvudet; rutnätet är vårt. */
.guide-hero .module-alt-hero__wrapper { min-height: 0; }
/* Temat ger heron 6rem under sig från 64rem; spalten börjar direkt under, så mindre räcker. */
.module-alt-hero.guide-hero { padding-bottom: 2rem; }
.guide-hero__grid { width: 100%; display: grid; gap: 2rem; align-items: start; }
@media screen and (min-width: 64rem) {
  .guide-hero__grid--image { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; }
}
.guide-hero__text { max-width: 44rem; }
.guide-hero__intro p:last-child { margin-bottom: 0; }
.guide-hero__figure {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #fff3f9;
}
.guide-hero__figure img { display: block; width: 100%; height: auto; }

/* Stigen i standardsidans hero ligger i ett <p> och fick därmed styckesmarginalen
   ovanför (1rem). Samma mått som listan nedan i stället, så rubriken står lika långt
   under sidhuvudet oavsett vilken av de tre layouterna sidan använder. */
.article-breadcrumbs p { margin: 0 0 1.25rem; line-height: 1.3; }

/* Brödsmulor med pilar. Temat stylar bara .article-breadcrumbs p, så listan får sitt eget. */
.guide-crumbs ol {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.25rem;
  font-family: "IsidoraSans-SemiBold", sans-serif;
  font-size: 14px;
  line-height: 1.3;
}
.guide-crumbs li { display: flex; align-items: center; }
.guide-crumbs li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid #72053a;
  border-bottom: 2px solid #72053a;
  transform: rotate(-45deg);
  margin: 0 0.5rem 0 0.25rem;
  opacity: 0.7;
}
.guide-crumbs a { color: #72053a; }
.guide-crumbs [aria-current] { color: #343434; }

/* Brödsmulemenyn: sista smulan är sidan själv och fäller ut sidorna bredvid den.
   Uppmärkningen i partials/breadcrumb-current.njk, beteendet i site.js. */
.crumb-menu { display: inline-flex; vertical-align: baseline; }
.crumb-menu__trigger {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  font: inherit;
  color: #343434;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 4px;
  transition: color 0.15s;
}
.crumb-menu__trigger:hover,
.crumb-menu__trigger:focus-visible { color: #72053a; }
/* Pilen ned: samma vinkelhake som separatorn mellan smulorna, en kvarts varv vriden. */
.crumb-menu__caret {
  width: 5px;
  height: 5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.7;
  transition: transform 0.15s;
}
.crumb-menu[data-open] .crumb-menu__caret { transform: translateY(1px) rotate(-135deg); }

.crumb-menu__panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0;
  z-index: 40;
  display: block;
  min-width: 13rem;
  max-width: min(20rem, calc(100vw - 2.5rem));
  padding: 0.75rem 0.25rem 0.5rem;
  background: #fff;
  border: 1px solid #f2f2f2;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(114, 5, 58, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.12s, transform 0.12s, visibility 0.12s;
}
/* Brygga över glappet mellan smulan och panelen, så pekaren inte tappar menyn på vägen. */
.crumb-menu__panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.55rem;
  height: 0.55rem;
}
.crumb-menu[data-open] .crumb-menu__panel { opacity: 1; visibility: visible; transform: none; }
/* Två klasser för färgen: temat färgar varenda span i heron brand-dark
   (.module-alt-hero span), och rubriken ska vara det finstiltas grå. */
.crumb-menu .crumb-menu__heading {
  display: block;
  padding: 0 0.75rem 0.4rem;
  font-family: "IsidoraSans-SemiBold", sans-serif;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #5c5c60;
}
.crumb-menu__list { display: block; }
.crumb-menu__list [role="listitem"] { display: block; }
.crumb-menu__list a {
  display: block;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  font-family: "IsidoraSans-SemiBold", sans-serif;
  font-size: 15px;
  line-height: 1.35;
  color: #72053a;
  text-decoration: none;
}
.crumb-menu__list a:hover,
.crumb-menu__list a:focus-visible { background: #fff3f9; }

/* Stigen ligger i heron, och panelen ska ligga över sektionen under den. Den är också
   panelens fäste på smal skärm: en meny som hängde under smulan skulle hamna utanför
   kanten när stigen är lång. Från 48rem hänger den under smulan i stället. */
.article-breadcrumbs { position: relative; z-index: 5; }

@media screen and (min-width: 48rem) {
  .crumb-menu { position: relative; }
}

@media (prefers-reduced-motion: reduce) {
  .crumb-menu__panel, .crumb-menu__caret, .crumb-menu__trigger { transition: none; }
}

/* Metaraden: granskare, datum, lästid. */
.guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1.5rem;
  font-size: 14px;
  line-height: 1.4;
  color: #343434;
}
.guide-meta > span { display: inline-flex; align-items: center; gap: 0.4rem; }
/* Ikoner. Rubrikens ikon står i en ljusrosa ring; "inline" är den lilla varianten i metaraden. */
.guide-icon {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff3f9;
  color: #72053a;
  display: inline-grid;
  place-items: center;
}
/* Temat fyller svg med currentColor; de här är streckikoner, så fyllningen stängs av här. */
.guide-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; }
.guide-icon svg * { fill: none; }
.guide-icon--inline { flex-basis: 16px; width: 16px; height: 16px; background: none; }
.guide-icon--inline svg { width: 16px; height: 16px; }

/* Mobil: sidans avsnitt som kapslar, fast under sidhuvudet. Borta från 64rem, där spalten tar över. */
.guide-chips {
  position: sticky;
  top: 60px;
  z-index: 45;
  background: #fff;
  border-top: 1px solid rgba(114, 5, 58, 0.08);
  border-bottom: 1px solid rgba(114, 5, 58, 0.08);
}
.guide-chips__scroller {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.6rem 20px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.guide-chips__scroller::-webkit-scrollbar { display: none; }
.guide-chips a {
  flex: 0 0 auto;
  font-family: "IsidoraSans-SemiBold", sans-serif;
  font-size: 14px;
  color: #343434;
  background: #f5f6f7;
  padding: 0.45rem 0.9rem;
  border-radius: 100px;
  white-space: nowrap;
  text-decoration: none;
}
.guide-chips a.is-active { background: #72053a; color: #fff; }
@media screen and (min-width: 64rem) {
  .guide-chips { display: none; }
}

/* Kroppen: spalt + lässpalt. Temat sätter overflow: hidden på .site-main, vilket tar död på
   position: sticky för allt inuti — spalten och kapselraden. På guidesidan finns inget som
   sticker ut i sidled (tabellerna skrollar för sig), så där släpps det. */
.site-main:has(.guide-grid) { overflow: visible; }
.guide-body { padding: 1.5rem 0 3rem; }
.guide-grid { display: grid; gap: 2.5rem; }
@media screen and (min-width: 64rem) {
  .guide-body { padding: 2.5rem 0 5rem; }
  .guide-grid { grid-template-columns: 272px minmax(0, 1fr); gap: 4rem; }
}
@media screen and (min-width: 87.5rem) {
  .guide-grid { gap: 5.5rem; }
}

/* Spalten. Finns bara från 64rem; följer med när sidan skrollas. */
.guide-rail { display: none; }
@media screen and (min-width: 64rem) {
  .guide-rail { display: block; }
  .guide-rail__sticky {
    position: sticky;
    top: calc(85px + 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    max-height: calc(100vh - 85px - 3rem);
    overflow-y: auto;
    padding-right: 0.25rem;
    /* Spalten är längre än en låg skärm; den skrollar för sig, utan synlig list (allt i
       den finns också på sidan). */
    scrollbar-width: none;
  }
  .guide-rail__sticky::-webkit-scrollbar { display: none; }
}
.guide-rail nav ul { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.guide-rail nav li a {
  display: block;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  color: #343434;
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
}
.guide-rail nav li a:hover { background: #f5f6f7; }
.guide-cluster__root {
  display: block;
  padding: 0 0.75rem 0.25rem;
  font-family: "IsidoraSans-Bold", sans-serif;
  font-size: 15px;
  color: #101011;
}
.guide-cluster__root--link { color: #72053a; }
.guide-cluster li.is-current > a { background: #fff3f9; color: #72053a; font-family: "IsidoraSans-SemiBold", sans-serif; }
.guide-cluster ul ul { margin: 0.15rem 0 0.35rem 0.9rem; border-left: 2px solid rgba(114, 5, 58, 0.14); }
.guide-cluster ul ul a { font-size: 14px; padding: 0.3rem 0.75rem; }
.guide-label {
  display: block;
  font-family: "IsidoraSans-SemiBold", sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #72053a;
  margin: 0;
  line-height: 1.4;
}
.guide-toc li a { border-left: 2px solid rgba(114, 5, 58, 0.08); border-radius: 0 8px 8px 0; padding-left: 0.85rem; }
.guide-toc li a.is-active { border-left-color: #72053a; color: #72053a; font-family: "IsidoraSans-SemiBold", sans-serif; }

/* CTA-kortet i spalten. Texten kommer från guide.cta i site.json. */
.guide-cta { background: #fff3f9; border-radius: 12px; padding: 1.25rem; }
.guide-cta__title { font-family: "IsidoraSans-Black", sans-serif; font-size: 18px; color: #72053a; margin: 0 0 0.25rem; line-height: 1.2; }
.guide-cta__price { font-family: "IsidoraSans-Black", sans-serif; font-size: 28px; color: #101011; line-height: 1; margin: 0.6rem 0 0.15rem; }
.guide-cta__price small { font-family: "Geist-Medium", sans-serif; font-size: 14px; color: #343434; }
.guide-cta__text { margin: 0.4rem 0 0.9rem; font-size: 14px; line-height: 1.5; }
.guide-cta .button { display: block; text-align: center; }
.guide-cta__trust { display: flex; gap: 0.4rem; align-items: center; font-size: 13px; margin: 0.75rem 0 0; }
.guide-stars { color: #f8b526; letter-spacing: 1px; font-size: 15px; line-height: 1; }
.guide-cta__alt { display: block; text-align: center; font-size: 14px; margin-top: 0.6rem; font-family: "IsidoraSans-SemiBold", sans-serif; }

/* Lässpalten. Texten håller ett läsmått; tabeller, kort och rutnät får hela spalten. */
.guide-main { min-width: 0; }
.guide-section { padding: 0.5rem 0 2.5rem; scroll-margin-top: calc(60px + 4rem); }
.guide-section + .guide-section { border-top: 1px solid rgba(114, 5, 58, 0.08); padding-top: 2.5rem; }
@media screen and (min-width: 64rem) {
  .guide-section { scroll-margin-top: calc(85px + 1.5rem); }
}
.guide-section > p,
.guide-section > ul,
.guide-section > ol,
.guide-section > h3,
.guide-section > blockquote,
.guide-aside,
.guide-faq,
.guide-sources { max-width: 70ch; }
.guide-h2 {
  font-family: "IsidoraSans-Black", sans-serif;
  color: #72053a;
  font-size: 26px;
  line-height: 1.15;
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin: 0 0 0.75rem;
  text-align: left;
}
.guide-h2 > span:last-child { padding-top: 0.35rem; }
@media screen and (min-width: 64rem) {
  .guide-h2 { font-size: 32px; }
  .guide-h2 > span:last-child { padding-top: 0.3rem; }
}
.guide-h2--small { font-size: 20px; color: #101011; }
.guide-lead { font-size: 1.15em; line-height: 1.55; color: #2d2d2f; margin: 0 0 1rem; }
.guide-main h3 { font-family: "IsidoraSans-Bold", sans-serif; font-size: 22px; color: #101011; margin: 2em 0 0.5em; line-height: 1.2; }
.guide-main h4 { font-family: "IsidoraSans-Bold", sans-serif; font-size: 18px; margin: 1.5em 0 0.4em; }
.guide-main p { color: #2d2d2f; }
.guide-main ul, .guide-main ol { margin: 1rem 0; padding-left: 1.25rem; }
.guide-main li + li { margin-top: 0.4rem; }
.guide-main li::marker { color: #72053a; }

/* Tabeller får hela spalten och en ram; första kolumnen sitter fast när man svajpar. */
.guide-main .table-scroll {
  margin: 1.5rem 0;
  border: 1px solid rgba(114, 5, 58, 0.08);
  border-radius: 12px;
}
.guide-main .data-table { font-size: 15px; min-width: 44rem; }
.guide-main .data-table th, .guide-main .data-table td { padding: 0.75rem 0.9rem; }
.guide-main .data-table thead th { background: #fff3f9; border-bottom: 1px solid #72053a; white-space: nowrap; }
.guide-main .data-table tbody tr:last-child td { border-bottom: 0; }
.guide-main .data-table tbody td:first-child { font-family: "IsidoraSans-SemiBold", sans-serif; color: #101011; }
.guide-main .data-table th:first-child,
.guide-main .data-table td:first-child { position: sticky; left: 0; background: #fff; box-shadow: 1px 0 0 rgba(114, 5, 58, 0.08); }
.guide-main .data-table thead th:first-child { background: #fff3f9; }

/* Faktarutor: ::: ruta rosa|gul|grön|blå i markdown. */
.guide-aside { border-radius: 12px; padding: 1.25rem 1.5rem; margin: 1.5rem 0; }
.guide-aside--pink { background: #fff3f9; }
.guide-aside--yellow { background: #ffedb9; }
.guide-aside--green { background: #d6e9d8; color: #143328; }
.guide-aside--blue { background: #dee9f8; color: #182337; }
.guide-main .guide-aside__title { margin: 0 0 0.5rem; font-size: 18px; }
.guide-aside--pink .guide-aside__title { color: #72053a; }
.guide-aside--green .guide-aside__title { color: #143328; }
.guide-aside--blue .guide-aside__title { color: #182337; }
.guide-aside p { margin: 0.5rem 0; font-size: 16px; }
.guide-aside > :last-child { margin-bottom: 0; }
.guide-aside ul, .guide-aside ol { margin: 0.5rem 0 0; font-size: 16px; }
.guide-aside--green p, .guide-aside--green li { color: #143328; }
.guide-aside--blue p, .guide-aside--blue li { color: #182337; }

/* Parallella alternativ som kort (grid: true). H3-rubrikerna är kvar som H3. */
.guide-factors { display: grid; gap: 1rem; margin: 1.5rem 0; }
@media screen and (min-width: 35rem) {
  .guide-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.guide-factor { border: 1px solid rgba(114, 5, 58, 0.14); border-radius: 12px; padding: 1.25rem; }
.guide-main .guide-factor h3 { font-size: 18px; margin: 0 0 0.4rem; }
.guide-factor p { margin: 0; font-size: 15px; line-height: 1.55; }
.guide-factor p + p { margin-top: 0.6rem; }

/* Bild vid texten (image: på en sektion). Under 48rem ligger bilden ovanför texten i full
   bredd. Från 48rem flyter den till höger: på en bred skärm hamnar den i marginalen bredvid
   läsmåttet, på en smalare bryter texten runt den. flow-root så sektionen omsluter bilden. */
.guide-section { display: flow-root; }
.guide-figure { margin: 0.25rem 0 1.25rem; }
/* Samma rundning som hero-bilden (12px, temats .article img). Sätts på både ramen och
   bilden så hörnen håller oavsett vad webbläsaren gör med <picture>. */
.guide-figure picture { display: block; border-radius: 12px; overflow: hidden; }
.guide-figure img { display: block; width: 100%; height: auto; border-radius: 12px; }
/* Bildtexten: mindre och en aning ljusare än brödtexten. Ingen ny färg — brödtextens
   #343434 tonad med opacitet, vilket håller kontrasten över 4,5:1 mot vitt. */
.guide-figure figcaption { font-size: 13px; line-height: 1.45; color: #343434; opacity: 0.72; margin-top: 0.5rem; }
@media screen and (min-width: 48rem) {
  .guide-figure { float: right; width: 38%; max-width: 22rem; margin: 0.25rem 0 1rem 1.75rem; }
}

/* Kort: undersidor (cards: children) och Läs vidare (related). */
.guide-children { margin: 1.5rem 0 0; }
.guide-cards { list-style: none; display: grid; gap: 1rem; margin: 0.75rem 0 0; padding: 0; }
.guide-cards li + li { margin-top: 0; }
@media screen and (min-width: 35rem) {
  .guide-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (min-width: 48rem) {
  .guide-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.guide-card {
  background: #f8fafb;
  border: 1px solid rgba(114, 5, 58, 0.08);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.guide-card--pink { background: #fff3f9; border-color: transparent; }
/* Miniatyr överst i ett kort — målsidans hero-bild, eller den bild kortet fått. Dras ut till
   kortets kanter och beskärs till 16:9 så en rad kort får samma höjd. */
.guide-card__thumb { margin: -1.25rem -1.25rem 0.5rem; border-radius: 11px 11px 0 0; overflow: hidden; aspect-ratio: 16 / 9; background: #dee9f8; }
.guide-card__thumb picture, .guide-card__thumb img { display: block; width: 100%; height: 100%; }
.guide-card__thumb img { object-fit: cover; }
/* .guide-main h3 ovan sätter 2em ovanför varje h3; korten och rutnätet ska inte ha det. */
.guide-main .guide-card__title { font-family: "IsidoraSans-Bold", sans-serif; font-size: 19px; margin: 0; line-height: 1.25; hyphens: auto; overflow-wrap: break-word; }
.guide-card__title a { color: #101011; text-decoration: none; }
.guide-card__title a:hover { color: #72053a; }
.guide-card p { margin: 0; font-size: 15px; line-height: 1.5; color: #343434; }
.guide-card__more {
  margin-top: auto;
  padding-top: 0.25rem;
  font-family: "IsidoraSans-SemiBold", sans-serif;
  font-size: 15px;
  color: #72053a;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}
.guide-card__more::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

/* CTA-bandet (type: band). Samma blå som live-sajtens "Vi finns här för dig". */
.guide-band { background: #dee9f8; color: #182337; border-radius: 12px; padding: 2.25rem 1.75rem; }
@media screen and (min-width: 48rem) {
  .guide-band { padding: 2.75rem 3rem; }
}
.guide-band__title { font-family: "IsidoraSans-Black", sans-serif; color: #182337; font-size: 24px; line-height: 1.15; margin: 0 0 0.5rem; }
@media screen and (min-width: 64rem) {
  .guide-band__title { font-size: 30px; }
}
.guide-band p { color: #182337; max-width: 56ch; }
.guide-band p:last-child { margin-bottom: 0; }
.guide-band .button { margin-top: 0.5rem; }

/* Frågorna i lässpalten: temats .faq-item, utan modulen runt om. */
.guide-faq .faq-item { background: #f5f6f7; border-radius: 10px; margin-bottom: 0.6rem; }
.guide-faq .faq-item__question { padding: 1rem 3rem 1rem 1.25rem; font-size: 17px; color: #101011; position: relative; }
.guide-faq .faq-item__arrow { position: absolute; right: 1.25rem; top: 50%; margin: -10px 0 0; }
.guide-faq .faq-item__answer { border-top: 0; padding: 0 1.25rem 1rem; }
.guide-faq .faq-item__answer a:not(.button) { color: #72053a; }

/* Källorna hopfällda: de finns för granskaren, inte för att fylla en skärm. */
.guide-sources summary {
  cursor: pointer;
  font-family: "IsidoraSans-SemiBold", sans-serif;
  color: #72053a;
  font-size: 16px;
  padding: 0.25rem 0;
}
.guide-sources p, .guide-sources li { font-size: 14px; color: #343434; }
.guide-sources li + li { margin-top: 0.4rem; }
.guide-sources a { overflow-wrap: anywhere; }
/* The source links leave the site and open in a new tab. This line says so once, instead
   of a marker beside each of a dozen references. Written by the external-links transform
   in eleventy.config.js, and only into a list that actually got such a link. */
p.guide-sources__note {
  margin: 0.5rem 0 0.9rem;
  color: #6b6b6b;
  font-size: 13px;
}

/* Granskad/uppdaterad upprepas sist, och Läs vidare. */
.guide-reviewed {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 14px;
  padding: 1.25rem 0 0;
  border-top: 1px solid rgba(114, 5, 58, 0.08);
  margin: 0 0 1rem;
}
.guide-related, .guide-cluster-mobile { padding-top: 2rem; }
.guide-related + .guide-cluster-mobile { border-top: 1px solid rgba(114, 5, 58, 0.08); }
@media screen and (min-width: 64rem) {
  .guide-cluster-mobile { display: none; }
}

/* Mobil: bottenlisten. Följer med tills spalten tar över vid 64rem. */
.guide-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 48;
  background: #fff;
  border-top: 1px solid rgba(114, 5, 58, 0.14);
  padding: 0.6rem 16px calc(0.6rem + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 -6px 20px rgba(114, 5, 58, 0.08);
}
.guide-bar__text { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.3; color: #343434; }
.guide-bar__text strong { display: block; font-family: "IsidoraSans-Bold", sans-serif; font-size: 14px; color: #101011; }
.guide-bar .button { padding: 10.5px 18px 9.5px; font-size: 15px; white-space: nowrap; }
.guide-bar-spacer { height: 84px; }
@media screen and (min-width: 64rem) {
  .guide-bar, .guide-bar-spacer { display: none; }
}

/*
 * ── Hubbsidan (layouts/hub.njk) ─────────────────────────────────────────
 * Navsidan för ett kluster: hero med priskort, navkort till undersidorna, korta sektioner i
 * vitt och rosa om vartannat, CTA-band och bottenlisten på mobil. Det som guidesidan redan
 * har återanvänds som det är (guide-h2, guide-icon, guide-lead, guide-aside, guide-factors,
 * guide-cta, guide-band, guide-bar, guide-card__more); här står bara det som är navsidans
 * eget. Samma tokens som allt annat: brand-dark, brand-light, blue, light-color, radien 12px
 * och brytpunkterna 35/48/64/76rem. Se "Hubbsidan" i .claude/design-system.md.
 */

/* Hero: text till vänster, priskortet till höger från 64rem. Temats hero ger avståndet till
   det fasta sidhuvudet; 6rem under är mer än navkorten behöver, så mindre här. */
.hub-hero .module-alt-hero__wrapper { min-height: 0; }
.module-alt-hero.hub-hero { padding-bottom: 2.5rem; }
@media screen and (min-width: 64rem) {
  .module-alt-hero.hub-hero { padding-bottom: 3.5rem; }
}
.hub-hero__grid { width: 100%; display: grid; gap: 2rem; align-items: start; }
@media screen and (min-width: 64rem) {
  .hub-hero__grid--card { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; }
}
.hub-hero__text { max-width: 44rem; }
.hub-hero__intro p:last-child { margin-bottom: 0; }

/* Förtroenderaden: stjärnor, betyg, recensioner, patienter, vårdgivare. Punkter emellan. */
.hub-trust {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  font-family: "IsidoraSans-SemiBold", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #343434;
}
.hub-trust li { display: inline-flex; align-items: center; gap: 0.4rem; }
.hub-trust li + li::before { content: "·"; color: #72053a; margin-right: 0.6rem; }

/* Priskortet i heron: guidesidans CTA-kort, en storlek större. */
/* Fullbredd på mobil; först när kortet står bredvid texten får det en största bredd. */
.hub-hero__card { width: 100%; padding: 1.75rem; box-shadow: 0 6px 20px rgba(114, 5, 58, 0.08); }
@media screen and (min-width: 64rem) {
  .hub-hero__card { max-width: 24rem; justify-self: end; }
}
.hub-hero__card .guide-cta__title { font-size: 20px; }
.hub-hero__card .guide-cta__price { font-size: 40px; margin-top: 0.75rem; }
.hub-hero__card .guide-cta__text { font-size: 15px; margin-bottom: 1.25rem; }

/* Sektionerna: band i vitt och rosa, med temats wrapper. */
.hub-section { padding: 3rem 0; scroll-margin-top: 60px; }
@media screen and (min-width: 48rem) {
  .hub-section { padding: 4.5rem 0; }
}
@media screen and (min-width: 64rem) {
  .hub-section { scroll-margin-top: 85px; }
}
.hub-section--white { background: #fff; }
.hub-section--pink { background: #fff3f9; }
.hub-section--band { padding-top: 1rem; }
.hub-section--cards { padding-top: 2.5rem; padding-bottom: 2.5rem; }

/* Navkorten: en undersida per kort, hela kortet klickbart. Rad med ikon till vänster på
   mobil, ikon ovanför texten från 48rem; tre i bredd från 48rem, fem från 76rem. */
.hub-cards__title { margin-bottom: 0.25rem; }
.hub-cards { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
@media screen and (min-width: 48rem) {
  .hub-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}
@media screen and (min-width: 76rem) {
  .hub-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.hub-card__link {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  height: 100%;
  box-sizing: border-box;
  padding: 1.1rem 1.25rem;
  background: #fff;
  border: 1px solid rgba(114, 5, 58, 0.1);
  border-radius: 12px;
  color: #101011;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hub-section--white .hub-card__link { background: #f8fafb; }
.hub-card__link:hover, .hub-card__link:focus-visible { border-color: #72053a; box-shadow: 0 6px 20px rgba(114, 5, 58, 0.08); }
.hub-card__link .guide-icon { flex-basis: 40px; width: 40px; height: 40px; }
.hub-card__link .guide-icon svg { width: 20px; height: 20px; }
@media screen and (min-width: 48rem) {
  .hub-card__link { flex-direction: column; gap: 0.9rem; padding: 1.25rem; }
}
.hub-card__body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.hub-card__title {
  font-family: "IsidoraSans-Bold", sans-serif;
  font-size: 17px;
  line-height: 1.25;
  color: #101011;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  hyphens: auto;
  overflow-wrap: break-word;
}
/* Samma pil som guide-card__more, så korten pekar likadant överallt. */
.hub-card__title::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-right: 2px solid #72053a;
  border-top: 2px solid #72053a;
  transform: rotate(45deg);
}
.hub-card__link:hover .hub-card__title { color: #72053a; }
.hub-card__text { font-size: 14px; line-height: 1.5; color: #343434; }

/* Textsektionerna: läsmått på texten, sidokortet till höger från 64rem, länken sist. */
.hub-section__grid { display: grid; gap: 1.5rem; }
@media screen and (min-width: 64rem) {
  .hub-section__grid--aside {
    grid-template-columns: minmax(0, 1fr) 22rem;
    grid-template-areas: "text aside" "more aside";
    column-gap: 4rem;
    align-items: start;
  }
  .hub-section__grid--aside .hub-section__text { grid-area: text; }
  .hub-section__grid--aside .hub-price,
  .hub-section__grid--aside .hub-aside { grid-area: aside; }
  .hub-section__grid--aside .hub-more { grid-area: more; }
}
.hub-section__text > p,
.hub-section__text > ul,
.hub-section__text > ol,
.hub-section__text > h3,
.hub-section__text > .guide-aside { max-width: 70ch; }
.hub-section__text p { color: #2d2d2f; }
.hub-section__text ul, .hub-section__text ol { margin: 1rem 0; padding-left: 1.25rem; }
.hub-section__text li + li { margin-top: 0.4rem; }
.hub-section__text li::marker { color: #72053a; }
.hub-section__text a:not(.button) { color: #72053a; }
.hub-section__text h3 { font-family: "IsidoraSans-Bold", sans-serif; font-size: 22px; color: #101011; margin: 2em 0 0.5em; line-height: 1.2; }
.hub-section__text .guide-factor h3 { font-size: 18px; margin: 0 0 0.4rem; }
.hub-section__text .guide-factors { max-width: none; }
@media screen and (min-width: 64rem) {
  .hub-section__text .guide-factors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Fem kort — de fem läkemedlen — får en rad, så inget kort blir ensamt på en andra rad. */
  .hub-section__text .guide-factors:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.hub-section__text .guide-aside__title { margin: 0 0 0.5rem; font-size: 18px; }
.hub-more { margin: 0.5rem 0 0; }
.hub-more .guide-card__more { font-size: 17px; }

/* Frågeflödet i en sektion: temats 15 %-indrag är för .module-content, inte hit. */
@media screen and (min-width: 64rem) {
  .hub-section .sf { padding: 0; }
}

/* Stegen: temats module-columns__content som en lista. Temat har den som divar med -20px
   i sidled och 18px/22px-text; radhöjden lättas till brödtextens. */
.hub-steps { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.hub-steps .column { padding: 0 20px; }
.hub-steps .number { margin: 0 0 0.75rem; }
.hub-steps h3 { margin: 0 0 0.5rem; }
.hub-steps p { line-height: 1.5; color: #2d2d2f; }
.hub-steps p:last-child { margin-bottom: 0; }
.hub-steps a { color: #72053a; }
.module-columns__content.hub-steps { margin-bottom: 0; }

/* Priskortet bredvid "Vad det kostar". */
.hub-price {
  background: #fff;
  border: 1px solid rgba(114, 5, 58, 0.1);
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: 0 6px 20px rgba(114, 5, 58, 0.08);
}
.hub-section--white .hub-price { background: #fff3f9; border-color: transparent; box-shadow: none; }
.hub-price__amount { font-family: "IsidoraSans-Black", sans-serif; font-size: 40px; line-height: 1; color: #72053a; margin: 0; }
.hub-price__amount small { display: block; font-family: "Geist-Medium", sans-serif; font-size: 14px; line-height: 1.4; color: #343434; margin-top: 0.4rem; }
.hub-price__list { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.hub-price__list li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 15px; line-height: 1.45; color: #2d2d2f; }
.hub-price__list li + li { margin-top: 0.45rem; }
.hub-price__list .guide-icon { margin-top: 0.15rem; }
.hub-price__fine { font-size: 13px; line-height: 1.45; color: #343434; opacity: 0.8; margin: 1rem 0 0; }
.hub-price .button { display: block; text-align: center; margin-top: 1.25rem; }

/* Siffrorna och citatet bredvid "Resultat". Tre i rad på mobil, på höjden i sidokolumnen. */
.hub-aside { display: flex; flex-direction: column; gap: 1rem; }
.hub-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0; }
@media screen and (min-width: 64rem) {
  .hub-stats { grid-template-columns: 1fr; }
}
.hub-stat { background: #fff; border: 1px solid rgba(114, 5, 58, 0.1); border-radius: 12px; padding: 1rem; text-align: center; display: flex; flex-direction: column-reverse; }
.hub-section--pink .hub-stat { border-color: transparent; }
.hub-section--white .hub-stat { background: #fff3f9; border-color: transparent; }
.hub-stat dd { margin: 0; font-family: "IsidoraSans-Black", sans-serif; font-size: 26px; line-height: 1; color: #72053a; }
@media screen and (min-width: 48rem) {
  .hub-stat dd { font-size: 34px; }
}
.hub-stat dt { margin: 0.35rem 0 0; font-size: 13px; line-height: 1.35; color: #343434; }
.hub-quote { margin: 0; padding: 1.25rem 1.5rem; background: #dee9f8; color: #182337; border-radius: 12px; }
.hub-quote p { margin: 0; font-size: 16px; line-height: 1.5; color: #182337; font-style: italic; }
.hub-quote p::before { content: "”"; }
.hub-quote p::after { content: "”"; }
.hub-quote footer { margin-top: 0.75rem; font-family: "IsidoraSans-SemiBold", sans-serif; font-size: 14px; color: #182337; }
.hub-quote footer::before { content: "— "; }

/*
 * ── Prissidan: byggstenar i hubbsidan ────────────────────────────────────
 * Det en prissida behöver utöver navsidans egna: kostnadsöversikten i heron (rader i
 * stället för ett belopp), pristrappan (ett kort per steg), räknekortet (poster, streck,
 * summa) och listorna över vad som ingår och inte. Samma tokens som resten: brand-dark,
 * brand-light, brand-green, light-color, radien 12px, knappens 100px, skuggan från
 * bottenlisten. Se "Hubbsidan" i .claude/design-system.md.
 */

/* Rader med post till vänster och belopp till höger — i heron, i räknekortet. */
.hub-rows { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.hub-rows li,
.hub-ledger__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(114, 5, 58, 0.12);
  font-size: 15px;
  line-height: 1.4;
  color: #2d2d2f;
}
.hub-rows li:first-child { border-top: 0; }
.hub-rows__label { min-width: 0; }
.hub-rows__label small { display: block; font-size: 13px; line-height: 1.4; color: #343434; opacity: 0.8; margin-top: 0.1rem; }
.hub-rows__value { flex: none; font-family: "IsidoraSans-Bold", sans-serif; color: #101011; white-space: nowrap; }

/* Kostnadsöversikten i heron: priskortets ram, men raderna bär svaret. */
.hub-hero__card--rows .guide-cta__title { margin-bottom: 0.5rem; }
.hub-hero__card--rows .hub-rows { margin: 0.25rem 0 1.25rem; }
.hub-hero__card--rows .hub-rows li { padding: 0.7rem 0; }
.hub-hero__card--rows .hub-rows__value { font-size: 17px; }
.hub-hero__card--rows .guide-cta__text { margin-top: 0; }
@media screen and (min-width: 64rem) {
  .hub-hero__card--rows { max-width: 26rem; }
}

/* Tre navkort får tre spalter, inte fem med två tomma. */
@media screen and (min-width: 76rem) {
  .hub-cards:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Pristrappan: ett kort per steg, beloppet stort. Rutan med siffran är temats large-numbers
   i mindre format. Måtten är designöverlämningens (radie 16, 26px padding, 34px belopp). */
.hub-ladder { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 18px; }
@media screen and (min-width: 48rem) {
  .hub-ladder { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2rem; }
}
.hub-ladder__step {
  background: #f8fafb;
  border-radius: 16px;
  padding: 26px;
}
.hub-section--pink .hub-ladder__step { background: #fff; }
.hub-ladder__index {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #72053a;
  color: #fff;
  font-family: "IsidoraSans-Bold", sans-serif;
  font-size: 15px;
  line-height: 1;
}
.hub-ladder__title { font-family: "IsidoraSans-Bold", sans-serif; font-size: 18px; line-height: 1.2; color: #101011; margin: 16px 0 0; }
.hub-ladder__amount { font-family: "IsidoraSans-Black", sans-serif; font-size: 34px; line-height: 1; color: #72053a; margin: 10px 0 12px; }
.hub-ladder__amount small { display: block; font-family: "Geist-Medium", sans-serif; font-size: 13px; line-height: 1.4; color: #343434; margin-top: 6px; }
.hub-ladder__text { font-size: 14px; line-height: 1.55; color: #343434; margin: 0; }
.hub-ladder__text a { color: #72053a; }
.hub-section__after { margin-top: 0.5rem; }

/* Räknekortet bredvid texten: poster, ett streck, summan stor — som ett kvitto. */
.hub-ledger {
  background: #fff;
  border: 1px solid rgba(114, 5, 58, 0.1);
  border-radius: 12px;
  padding: 1.75rem;
  box-shadow: 0 6px 20px rgba(114, 5, 58, 0.08);
}
.hub-section--white .hub-ledger { background: #fff3f9; border-color: transparent; box-shadow: none; }
.hub-ledger__title { font-family: "IsidoraSans-Bold", sans-serif; font-size: 16px; line-height: 1.3; color: #101011; margin: 0 0 0.5rem; }
.hub-ledger .hub-rows { margin-top: 0; }
.hub-ledger__total { margin: 0.25rem 0 0; padding-top: 0.9rem; border-top: 2px solid #72053a; }
.hub-ledger__total .hub-rows__label { font-family: "IsidoraSans-Bold", sans-serif; color: #101011; }
.hub-ledger__total .hub-rows__value { font-family: "IsidoraSans-Black", sans-serif; font-size: 28px; line-height: 1; color: #72053a; }
.hub-ledger__fine { font-size: 13px; line-height: 1.45; color: #343434; opacity: 0.8; margin: 1rem 0 0; }
.hub-ledger .button { display: block; text-align: center; margin-top: 1.25rem; }

/* Etiketten ovanför en rubrik: "Ingår i månadsavgiften". Grön som temats gröna band. */
.hub-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #d6e9d8;
  color: #143328;
  font-family: "IsidoraSans-SemiBold", sans-serif;
  font-size: 13px;
  line-height: 1;
  padding: 0.45rem 0.75rem 0.4rem;
  border-radius: 100px;
  margin: 0 0 1rem;
}
.hub-badge .guide-icon { color: #143328; }

/* Bocklistan (det som ingår) och krysslistan (det som inte ingår). Markeringen är en
   20px-cirkel: mörkgrön med ljusgrön bock, ljusrosa med vinrött kryss. */
.hub-check { border-radius: 16px; padding: 26px; margin: 1.5rem 0; max-width: 70ch; }
.hub-check--yes { background: #d6e9d8; color: #143328; }
.hub-check--no { background: #f8fafb; }
.hub-section--pink .hub-check--no { background: #fff; }
.hub-check__title, .hub-section__text .hub-check__title { font-family: "IsidoraSans-Bold", sans-serif; font-size: 19px; line-height: 1.2; margin: 0 0 16px; color: #101011; }
.hub-check--yes .hub-check__title { color: #143328; }
.hub-check ul, .hub-section__text .hub-check ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.hub-check li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; line-height: 1.5; color: #2d2d2f; }
.hub-check li + li, .hub-section__text .hub-check li + li { margin-top: 0; }
.hub-check--yes li { color: #143328; }
.hub-check li strong { font-family: "IsidoraSans-Bold", sans-serif; color: #101011; }
.hub-check__mark {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: #fff3f9;
  color: #72053a;
}
.hub-check__mark .guide-icon { width: 12px; height: 12px; flex-basis: 12px; }
.hub-check__mark .guide-icon svg { width: 12px; height: 12px; stroke-width: 3; }
.hub-check--yes .hub-check__mark { background: #143328; color: #d6e9d8; }
/* .guide-icon sätter egen färg (brand-dark); i den gröna rutan ska bocken vara ljusgrön. */
.hub-check--yes .hub-check__mark .guide-icon { color: #d6e9d8; }
.hub-check--no .hub-check__mark .guide-icon { color: #72053a; }
.hub-check__note { font-size: 14px; line-height: 1.55; color: #343434; margin: 18px 0 0; }

/* Finstilt sist: datum, ansvarig, länken till facit. */
.hub-section--meta { padding: 1rem 0 3rem; }
.hub-meta p { font-size: 14px; line-height: 1.5; color: #343434; max-width: 70ch; margin: 0.5rem 0; }
.hub-meta a { color: #72053a; }

/*
 * ── Prissidan, formen från designöverlämningen (2026-09-08) ──
 * Heron med foto och överlappande kostnadskort, avsnittsmenyn som följer med, kalkylatorn,
 * ingår/ingår inte som två kort, det blå bandet med kvitto, frågorna i två spalter och det
 * vinröda avslutet. Tokens utöver designsystemets lista, alla från överlämningen och
 * antecknade i .claude/design-system.md: knapphover #710c39 (var #4d0227 tills knappen blev
 * #a61154), herons gradient via #fff8fb,
 * swatchkanten #b9cdec, radierna 14/16/20 och de två skuggorna.
 */

/* Egna knappar där temats .button inte räcker: konturknappen i heron och den vita i avslutet.
   Samma mått som .button — 100px radie, IsidoraSans-Bold 16px — så de står i par. */
.hub-btn {
  display: inline-block;
  /* Halva pixeln, se "Optisk centrering av knapptexten" ovan. */
  padding: 12.5px 24px 11.5px;
  border-radius: 100px;
  font-family: "IsidoraSans-Bold", sans-serif;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}
.hub-btn--ghost { background: #fff; color: #72053a; border: 1px solid rgba(114, 5, 58, 0.22); }
.hub-btn--ghost:hover, .hub-btn--ghost:focus-visible { border-color: #72053a; background: #fff3f9; color: #72053a; }
.hub-btn--white { background: #fff; color: #72053a; font-size: 17px; padding: 16.5px 32px 15.5px; white-space: nowrap; }
.hub-btn--white:hover, .hub-btn--white:focus-visible { background: #fff3f9; color: #72053a; }
.hub .button:hover, .hub-hero .button:hover { background-color: #710c39; }

/* Synlig fokusring på allt man kan klicka på — tillgänglighetsredogörelsen kräver det. */
.hub :is(a, button, input, summary):focus-visible,
.hub-hero :is(a, button):focus-visible,
.hub-nav a:focus-visible { outline: 2px solid #72053a; outline-offset: 2px; }

/* Heron med foto: gradient ner mot vitt, texten till vänster, fotot med kortet över till höger. */
.module-alt-hero.hub-hero--photo { background: linear-gradient(180deg, #fff3f9 0%, #fff8fb 62%, #ffffff 100%); padding-bottom: 2.5rem; }
.hub-hero--photo .module-alt-hero__title { text-wrap: pretty; }
/* Raden sträcker båda knapparna till den högsta av dem — konturknappen, som har en ram
   och en luftigare radhöjd. Temats .button är ett block och lägger då sin text i överkant
   i stället för i mitten, så de två etiketterna hamnade på olika höjd. Att centrera
   innehållet i stället för att ge knapparna olika höjd håller ihop paret. */
.hub-hero__buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.5rem 0 0; }
.hub-hero__buttons .button { display: inline-flex; align-items: center; justify-content: center; }
.hub-hero__buttons + .hub-trust { margin-top: 1.5rem; }
.hub-hero__side { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
@media screen and (min-width: 64rem) {
  .hub-hero--photo .hub-hero__grid--card { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px; }
  /* Utan foto står kortet ensamt i kolumnen och ska ligga till höger, som förut. */
  .hub-hero__side { max-width: none; justify-self: stretch; align-items: flex-end; }
  .hub-hero--photo .hub-hero__side { align-items: stretch; }
}
.hub-hero__figure {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: #fff3f9;
}
.hub-hero__figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Platshållaren tills fotot finns: bara på testsajten, säger vad som ska stå där. */
.hub-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  text-align: center;
  font-family: "IsidoraSans-SemiBold", sans-serif;
  font-size: 14px;
  color: #72053a;
  opacity: 0.7;
  border: 2px dashed rgba(114, 5, 58, 0.25);
  border-radius: 16px;
}
/* Kortet lägger sig över fotots nederkant. Skuggan måste få plats — figuren klipper inget utanför sig. */
.hub-hero__card--overlap { position: relative; margin: -56px 16px 0; max-width: none !important; width: auto; background: #fff; border-radius: 16px; padding: 24px; box-shadow: 0 18px 44px rgba(114, 5, 58, 0.14); }
.hub-hero__card--rows .hub-rows li { padding: 11px 0; }
.hub-hero__card--rows .guide-cta__text { font-size: 13px; line-height: 1.5; margin: 14px 0 0; color: #343434; }
.hub-hero__card--rows .guide-cta__text + .button { margin-top: 1rem; }
.hub-pill { font-family: "IsidoraSans-Bold", sans-serif; color: #143328 !important; background: #d6e9d8; padding: 2px 10px; border-radius: 100px; }

/* Avsnittsmenyn: fast under sidhuvudet (60px, 85px från 64rem), svajpbar på smala skärmar.
   Temat sätter overflow: hidden på .site-main, vilket dödar position: sticky — släpps här,
   som för guidesidan. Inget på sidan sticker ut i sidled; tabellen skrollar i sin egen ram. */
.site-main:has(.hub-nav) { overflow: visible; }
.hub-nav {
  position: sticky;
  top: 60px;
  z-index: 55;
  background: #fff;
  border-top: 1px solid rgba(114, 5, 58, 0.08);
  border-bottom: 1px solid rgba(114, 5, 58, 0.08);
}
@media screen and (min-width: 64rem) {
  .hub-nav { top: 85px; }
}
.hub-nav__scroller {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.hub-nav__scroller::-webkit-scrollbar { display: none; }
.hub-nav a {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 12px 0;
  font-family: "IsidoraSans-SemiBold", sans-serif;
  font-size: 14px;
  line-height: 1.3;
  color: #72053a;
  text-decoration: none;
  white-space: nowrap;
}
/* Länkarna i vinrött, den aktiva i knappfärgen och fet — artikelsidans form från
   överlämningen, och en och samma i alla layouter: prissidan, artikel-, guide- och standardsidan. */
.hub-nav a::after { content: ""; display: block; height: 3px; border-radius: 2px 2px 0 0; background: #a61154; opacity: 0; transition: opacity 0.2s; }
.hub-nav a:hover { color: #a61154; }
.hub-nav a.is-active { color: #a61154; font-family: "IsidoraSans-Bold", sans-serif; }
.hub-nav a.is-active::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html:has(.hub-nav) { scroll-behavior: smooth; }
}
/* Sektionerna ska stanna under menyn när man hoppar dit. Standardsidan
   (layouts/page.njk) har samma meny, men temats egna moduler som sektioner — bara
   marginalen skiljer. */
.hub--nav .hub-section { scroll-margin-top: 120px; padding: 64px 0; }
.site-main:has(.hub-nav) .module-content[id],
.site-main:has(.hub-nav) .module-faq[id] { scroll-margin-top: 120px; }
@media screen and (min-width: 64rem) {
  .hub--nav .hub-section { scroll-margin-top: 150px; }
  .site-main:has(.hub-nav) .module-content[id],
  .site-main:has(.hub-nav) .module-faq[id] { scroll-margin-top: 150px; }
}
/* Guidesidan med avsnittsmenyn (sectionNav: true): menyn ersätter kapselraden och spaltens
   lista, så sektionerna ska stanna under menyn när man hoppar dit, och spalten börja under
   den. Menyraden är ~40px hög. */
.site-main:has(.hub-nav) .guide-section { scroll-margin-top: 120px; }
@media screen and (min-width: 64rem) {
  .site-main:has(.hub-nav) .guide-section { scroll-margin-top: 150px; }
  .site-main:has(.hub-nav) .guide-rail__sticky {
    top: calc(85px + 40px + 1.5rem);
    max-height: calc(100vh - 85px - 40px - 3rem);
  }
}

.hub--nav .hub-section--band { padding: 0 0 64px; }
.hub--nav .hub-section--meta { padding: 1.5rem 0 3rem; }

/* Rubrikerna i den här formen: etikett i versaler ovanför, rubriken mörk och tätare. */
.hub-eyebrow { margin: 0 0 10px; }
.hub-eyebrow.guide-label { font-family: "IsidoraSans-Bold", sans-serif; }
.hub--nav .guide-h2 { color: #101011; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 12px; }
.hub--nav .guide-h2 > span:last-child { padding-top: 0; }
.hub--nav .guide-lead { font-size: 17px; line-height: 1.6; max-width: 56ch; text-wrap: pretty; }

/* Kalkylatorn: reglagen till vänster, resultatet till höger från 64rem. */
.hub-calc { display: grid; gap: 24px; align-items: start; margin-top: 2rem; }
@media screen and (min-width: 64rem) {
  .hub-calc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hub-calc__controls, .hub-calc__result { background: #fff; border-radius: 16px; padding: 26px; }
.hub-section--white .hub-calc__controls, .hub-section--white .hub-calc__result { background: #f8fafb; }
.hub-calc__result { box-shadow: 0 14px 36px rgba(114, 5, 58, 0.10); }
.hub-section--white .hub-calc__result { background: #fff; }
.hub-calc__step { font-family: "IsidoraSans-Bold", sans-serif; font-size: 14px; line-height: 1.3; color: #101011; margin: 0 0 12px; }
.hub-calc__step--range { margin: 26px 0 4px; }
.hub-calc__help { font-size: 13px; line-height: 1.5; color: #343434; margin: 0 0 10px; }
.hub-calc__meds { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media screen and (min-width: 35rem) and (max-width: 63.99rem) {
  .hub-calc__meds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.hub-calc__med {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 13px 15px;
  border: 1px solid rgba(114, 5, 58, 0.14);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: "Geist-Medium", sans-serif;
  color: #101011;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.hub-calc__med:hover { border-color: #72053a; }
.hub-calc__med.is-selected { border-color: #72053a; box-shadow: inset 0 0 0 1px #72053a; background: rgba(114, 5, 58, 0.04); }
.hub-calc__med-name { font-family: "IsidoraSans-Bold", sans-serif; font-size: 15px; line-height: 1.2; color: #101011; }
.hub-calc__med-note { font-size: 12px; line-height: 1.3; color: #343434; }
.hub-calc__range { display: block; width: 100%; height: 30px; margin: 0; accent-color: #72053a; cursor: pointer; }
.hub-calc__bounds { display: flex; justify-content: space-between; font-size: 13px; color: #343434; }
.hub-calc__rows { margin-top: 0; }
.hub-calc__rows li { padding: 10px 0; }
.hub-calc__rows .hub-rows__label { display: inline-flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.hub-calc__rows .hub-rows__label small { display: inline; margin: 0; }
.hub-swatch { flex: none; width: 10px; height: 10px; border-radius: 3px; align-self: center; }
.hub-swatch--med { background: #72053a; }
.hub-swatch--fee { background: #dee9f8; border: 1px solid #b9cdec; }
.hub-calc__bar { display: flex; height: 14px; border-radius: 100px; overflow: hidden; background: #f5f6f7; margin: 16px 0 18px; }
.hub-calc__bar span { display: block; height: 100%; transition: width 0.25s; }
.hub-calc__bar-med { background: #72053a; }
.hub-calc__bar-fee { background: #dee9f8; }
.hub-calc__total { margin-top: 0; }
.hub-calc__total .hub-rows__value { font-size: clamp(28px, 4vw, 36px); }

/* Den hopfällda pristabellen under kalkylatorn. */
.hub-details { margin-top: 22px; background: #fff; border-radius: 16px; padding: 6px 22px; }
.hub-section--white .hub-details { background: #f8fafb; }
.hub-details summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  font-family: "IsidoraSans-Bold", sans-serif;
  font-size: 16px;
  line-height: 1.3;
  color: #72053a;
}
.hub-details summary::-webkit-details-marker { display: none; }
.hub-details__plus {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff3f9;
  color: #72053a;
  font-size: 15px;
  line-height: 1;
  transition: transform 0.2s;
}
.hub-details[open] .hub-details__plus { transform: rotate(45deg); }
.hub-details__body { padding-bottom: 20px; }
.hub-details__body .table-scroll { margin: 0; }
.hub-details__body .data-table { min-width: 36rem; }
.hub-details__body .data-table td small { display: block; font-size: 13px; color: #343434; }
.hub-details__body .data-table td .hub-pill { display: inline-block; font-family: "Geist-Medium", sans-serif; padding: 2px 10px; }
.hub-details__body p { font-size: 14px; line-height: 1.55; color: #343434; max-width: 70ch; margin: 16px 0 0; }
.hub-details__body a { color: #72053a; }

/* Ingår / ingår inte som två kort bredvid varandra. */
.hub-compare { display: grid; gap: 20px; margin-top: 2rem; }
@media screen and (min-width: 48rem) {
  .hub-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hub-compare .hub-check { margin: 0; max-width: none; }

/* Det blå bandet med kvittot: text till vänster, vitt kort till höger. */
.hub--nav .guide-band { border-radius: 20px; padding: 34px; }
.guide-band--split { display: grid; gap: 28px; align-items: center; }
@media screen and (min-width: 48rem) {
  .guide-band--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.guide-band .hub-eyebrow { color: #182337; opacity: 0.75; }
.hub--nav .guide-band__title { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.12; margin-bottom: 12px; }
.guide-band__text p { margin: 0 0 18px; max-width: 48ch; font-size: 16px; line-height: 1.6; }
.guide-band__link { font-family: "IsidoraSans-Bold", sans-serif; font-size: 16px; color: #182337; text-decoration: none; border-bottom: 2px solid #182337; padding-bottom: 2px; }
.guide-band__link:hover { color: #182337; opacity: 0.8; }
.hub-band__ledger { background: #fff; border-radius: 14px; padding: 20px; margin: 0; }
.hub-band__ledger li { border-top-color: rgba(24, 35, 55, 0.12); gap: 14px; padding: 10px 0; }
.hub-band__ledger li:first-child { border-top: 0; }

/* Frågorna: text och bild till vänster, dragspelet till höger. Frågemarkupen är temats
   .faq-item (så verify kan läsa den), här som vita kort med rundade hörn. */
.hub-faq { display: grid; gap: 40px; align-items: start; }
@media screen and (min-width: 64rem) {
  .hub-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hub-faq__intro > p { font-size: 16px; line-height: 1.6; color: #2d2d2f; max-width: 44ch; margin: 0 0 22px; }
.hub-faq__figure { position: relative; margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: #fff; }
.hub-faq__figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hub-faq__list { display: flex; flex-direction: column; gap: 10px; }
.hub-faq__list .faq-item { background: #fff; border-radius: 12px; padding: 2px 20px; margin: 0; border: 0; }
.hub-section--white .hub-faq__list .faq-item { background: #f8fafb; }
.hub-faq__list .faq-item__question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  font-family: "IsidoraSans-Bold", sans-serif;
  font-size: 17px;
  line-height: 1.3;
  color: #101011;
  cursor: pointer;
  background: none;
}
.hub-faq__list .faq-item__answer { padding: 0 0 18px; }
.hub-faq__list .faq-item__answer p { font-size: 15px; line-height: 1.6; color: #2d2d2f; margin: 0 0 10px; }
.hub-faq__list .faq-item__answer p:last-child { margin-bottom: 0; }
.hub-faq__list .faq-item__answer a { font-family: "IsidoraSans-SemiBold", sans-serif; font-size: 15px; color: #72053a; }

/* Avslutet: vinrött i full bredd, rubrik och text till vänster, vit knapp till höger. */
.hub-section--dark { background: #72053a; padding: 56px 0 !important; }
.hub-cta { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.hub-cta__text { max-width: 52ch; }
.hub-cta__title { font-family: "IsidoraSans-Black", sans-serif; font-size: clamp(24px, 3vw, 34px); line-height: 1.12; color: #fff; margin: 0 0 10px; }
.hub-cta__text p { font-size: 16px; line-height: 1.6; color: #fff; margin: 0; }

/*
 * Sidöversikten (/oversikt/, content/oversikt.njk) — tabellen innehållspersoner läser för
 * att se status, godkännande och längd per sida. Bara på testsajten. Färgerna är temats:
 * grön/grön-mörk, gul-ljus, rosa-ljus/brand-mörk, mid-color — se Colours i designsystemet.
 */
/* Temats 15 %-indrag gäller brödtext; tabellen behöver hela bredden och rullar i sidled på små skärmar. */
.oversikt .table-scroll {
  padding: 0;
}
.oversikt .data-table {
  min-width: 76rem;
  font-size: 15px;
}
.oversikt .data-table td {
  vertical-align: top;
}
.oversikt__date {
  white-space: nowrap;
}
.oversikt__page a {
  font-family: "IsidoraSans-SemiBold", sans-serif;
  color: #72053a;
  text-decoration: none;
}
.oversikt__page a:hover {
  text-decoration: underline;
}
.oversikt__row--depth-2 .oversikt__page {
  padding-left: 2rem;
}
.oversikt__row--depth-3 .oversikt__page {
  padding-left: 3.5rem;
}
.oversikt__url,
.oversikt__note {
  display: block;
  margin-top: 0.2rem;
  font-family: "Geist-Medium", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #999999;
}
.oversikt__words {
  white-space: nowrap;
}
.oversikt-mark {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-family: "IsidoraSans-SemiBold", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
}
.oversikt-mark--ok {
  background: #d6e9d8;
  color: #143328;
}
.oversikt-mark--warn {
  background: #ffedb9;
  color: #343434;
}
.oversikt-mark--none,
.oversikt-mark--draft {
  background: #f5f6f7;
  color: #343434;
}
.oversikt-mark--published {
  background: #fff3f9;
  color: #72053a;
}
/*
 * Granskningskolumnen: en tagg per granskningstyp — typnamnet i mörkt till vänster, läget
 * till höger i den färg läget har. Alla typer i en kolumn i stället för en kolumn per typ,
 * så tabellen inte växer med registret. Taggen bär datumet, som är det man jämför när man
 * läser en kolumn av dem; namnet står på noteringsraden under.
 */
.oversikt__reviews {
  width: 14rem;
}
.oversikt-tag {
  /* Egen rad per tagg: flex + fit-content, så bredden följer texten och taggarna staplas. */
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 0 0.25rem;
  border-radius: 999px;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
}
.oversikt-tag__type {
  padding: 0.15rem 0.55rem;
  background: #343434;
  color: #ffffff;
  font-family: "IsidoraSans-SemiBold", sans-serif;
}
.oversikt-tag__state {
  /* Ingen platta på den som väntar: bara de lägen som betyder något får en färg. */
  padding: 0.15rem 0.6rem;
  font-family: "Geist-Medium", sans-serif;
  color: #343434;
}
.oversikt-tag--ok .oversikt-tag__state {
  background: #d6e9d8;
  color: #143328;
}
.oversikt-tag--warn .oversikt-tag__state {
  background: #ffedb9;
  color: #343434;
}
/* Frivillig granskning som ingen gjort: taggen tonas ned, den är inget att göra. */
.oversikt-tag--off {
  opacity: 0.5;
}
/*
 * "Så granskar du en sida" — meningen man säger och taggen den ger, en rad per
 * granskningstyp. Samma tagg som i tabellen, utan lägeshalva, så det syns vilken kolumnrad
 * en mening leder till.
 */
.oversikt-how__heading {
  margin: 2rem 0 0.6rem;
  font-family: "IsidoraSans-SemiBold", sans-serif;
  font-size: 18px;
  line-height: 1.3;
  color: #72053a;
}
.oversikt-how {
  margin: 0.6rem 0 1.2rem;
  padding: 0;
  list-style: none;
}
.oversikt-how li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
}
.oversikt-how .oversikt-tag {
  margin: 0;
}
.oversikt-how__say {
  font-family: "IsidoraSans-SemiBold", sans-serif;
  color: #72053a;
}
.oversikt-how__arrow {
  color: #999999;
}
.oversikt .oversikt__issues ul {
  margin: 0;
  padding: 0 0 0 1rem;
  font-family: "Geist-Medium", sans-serif;
  font-size: 14px;
  line-height: 1.4;
}
.oversikt .oversikt__issues li {
  margin: 0 0 0.2rem;
}
/* Länkarna sidan bär: en numrerad lista att gå igenom klick för klick inför ett godkännande. */
.oversikt .oversikt__links ol {
  margin: 0;
  padding: 0 0 0 1.2rem;
  font-family: "Geist-Medium", sans-serif;
  font-size: 14px;
  line-height: 1.4;
}
.oversikt .oversikt__links li {
  margin: 0 0 0.3rem;
}
.oversikt .oversikt__links a {
  color: #72053a;
}
/* Sidorna som pekar hit: en punkt per sida, eftersom listan ofta är lång. */
.oversikt .oversikt__from ul {
  margin: 0.15rem 0 0;
  padding: 0 0 0 1.1rem;
  font-family: "Geist-Medium", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #999999;
}
.oversikt .oversikt__from li {
  margin: 0 0 0.15rem;
}
/* Sidans egen anteckning till den som arbetar med den — note: i dess frontmatter. */
.oversikt__flag {
  display: block;
  margin-top: 0.4rem;
  padding: 0.4rem 0.6rem;
  border-left: 3px solid #ffedb9;
  background: #fffaeb;
  font-family: "Geist-Medium", sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: #343434;
}
.oversikt__footnote {
  font-size: 15px;
  color: #999999;
}

/*
 * ── Artikelsidan (layouts/article.njk) ──────────────────────────────────
 * De långa textsidorna satta i kapitelband — formen från designöverlämningen 2026-09-16
 * (handover/design_handoff_artikel_layout/), ritad för /overvikt-obesitas/behandling/ och
 * buren över till varje artikelsida. Varje H2 är ett band i vitt eller rosa, och texten i
 * det tar en form: kort, kriterielista med bock och kryss, numrerad trappa, blå panel,
 * definitionsrader, det vinröda avslutet och en öppen källista. Vilken form ett avsnitt
 * tar avgörs i tools/article.mjs; här står bara utseendet.
 *
 * Det som prissidan redan har återanvänds som det är: heron (.module-alt-hero), brödsmulorna
 * (.guide-crumbs), avsnittsmenyn (.hub-nav), förtroenderaden (.hub-trust), frågorna
 * (.hub-faq__list), pilen (.guide-card__more), ikonerna (.guide-icon). Tokens ur
 * designsystemet: brand-dark, brand-button, brand-light, blue/blue-dark, green/green-dark,
 * light-color, radierna 12/16/20/24, knappens 100px och prissidans skuggor. Överlämningen
 * lade till två värden som bara gäller här: #f7dde9 (texten på det vinröda bandet och
 * knappens hover där) och #f3d9e5 (plattan bakom krysset). Inga media queries där ett
 * auto-fit-rutnät räcker; min(…, 100%) i varje minmax så inget spränger en smal skärm.
 * Se "Artikelsidan" i .claude/design-system.md.
 */

.art { color: #343434; }
.art h1, .art h2, .art h3 { -webkit-hyphens: auto; hyphens: auto; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6; hyphenate-limit-chars: 14 6 6; overflow-wrap: break-word; text-wrap: pretty; }
.art a:not(.button) { color: #72053a; }
.art a:not(.button):hover { color: #a61154; }
.art :is(a, button, summary):focus-visible { outline: 2px solid #72053a; outline-offset: 2px; }
/* Temats 15 %-indrag för frågeflödet gäller .module-content, inte hit. */
@media screen and (min-width: 64rem) {
  .art .sf { padding: 0; }
}

/* Hero: rosa som tonar mot vitt, texten till vänster, fotot eller BMI-kalkylatorn till höger.
   Temats .module-alt-hero ger avståndet till det fasta sidhuvudet, så rubriken står på samma
   höjd som på de andra sidorna — se "Rubriken står lika långt ner" i designsystemet. */
.module-alt-hero.art-hero { background: linear-gradient(180deg, #fff3f9 0%, #fff3f9 74%, #ffffff 100%); padding-bottom: clamp(40px, 5vw, 72px); }
.art-hero .module-alt-hero__wrapper { min-height: 0; }
.art-hero__grid { width: 100%; display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
.art-hero__text { max-width: 44rem; min-width: 0; }
@media screen and (min-width: 64rem) {
  .art-hero__grid--photo { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
  .art-hero__grid--aside { grid-template-columns: minmax(0, 1fr) 480px; }
}
.art-hero .module-alt-hero__title {
  font-family: "IsidoraSans-Bold", sans-serif;
  font-size: clamp(36px, 5.2vw, 58px);
  line-height: 1.02;
  letter-spacing: -1.6px;
  color: #101011;
  margin: 0 0 22px;
}
.art-hero__intro p { font-size: 18px; line-height: 1.6; color: #2d2d2f; margin: 0 0 1rem; }
.art-hero__intro p:first-child { font-size: clamp(18px, 2.1vw, 21px); line-height: 1.56; max-width: 34em; }
.art-hero__intro p:last-child { margin-bottom: 0; }
.art-hero__intro .button { margin-top: 0.5rem; }
.art-hero .hub-trust { margin-top: 1.5rem; }
/* Läkargranskningen under ingressen: sköldikonen och namnet, som guidesidans metarad. Två
   klasser för färgen — temat färgar varje span i heron brand-dark. Samma rad i hubbens hero
   (prissidan). */
.art-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 1.25rem 0 0; font-size: 14px; line-height: 1.4; }
.art-hero .art-meta__item, .hub-hero .art-meta__item { display: inline-flex; align-items: center; gap: 0.4rem; color: #343434; font-family: "IsidoraSans-SemiBold", sans-serif; }
/* Granskarens porträtt i stället för skölden, när content/_data/reviewers.json har ett: en
   rund bild i radens höjd, med lite mer luft till namnet än ikonen behöver. */
.art-meta__avatar, .guide-meta__avatar { display: inline-flex; flex: 0 0 32px; width: 32px; height: 32px; margin-right: 0.15rem; }
.art-meta__avatar img, .guide-meta__avatar img { display: block; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.art-hero__figure { margin: 0; min-width: 0; }
.art-hero__figure picture, .art-hero__figure img { display: block; width: 100%; }
.art-hero__figure img { height: clamp(260px, 32vw, 420px); object-fit: cover; border-radius: 24px; box-shadow: 0 22px 50px rgba(114, 5, 58, 0.18); }
.art-hero__aside { display: flex; justify-content: center; min-width: 0; }
@media screen and (min-width: 64rem) {
  .art-hero__aside { justify-content: flex-end; }
}

/* Banden. Sektionerna stannar under sidhuvud och meny när man hoppar dit (60/85px + ~40px). */
.art-section { padding: clamp(56px, 7vw, 96px) 0; scroll-margin-top: 120px; }
@media screen and (min-width: 64rem) {
  .art-section { scroll-margin-top: 150px; }
}
.art-section--white { background: #fff; }
.art-section--pink { background: #fff3f9; }
.art-section--dark { background: #72053a; padding: clamp(56px, 7vw, 88px) 0; }
.art-section--panel { padding-top: 0; }
.art-section--sources { padding: clamp(44px, 5vw, 72px) 0 clamp(56px, 7vw, 88px); }
.art-section--related { padding: clamp(40px, 5vw, 64px) 0; }

/* Rubriken och svarsstycket sida vid sida — en spalt när det inte får plats. */
.art-head { display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; margin-bottom: clamp(32px, 4vw, 48px); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.art-h2 {
  font-family: "IsidoraSans-Black", sans-serif;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.8px;
  color: #101011;
  margin: 0;
}
.art-h2--full { margin-bottom: clamp(28px, 3.5vw, 40px); }
.art-h3 { font-family: "IsidoraSans-Bold", sans-serif; font-size: 22px; line-height: 1.25; color: #101011; margin: 0 0 20px; }
.art-lead p { font-size: clamp(17px, 1.9vw, 19px); line-height: 1.62; color: #2d2d2f; margin: 0 0 14px; }
.art-lead > :last-child { margin-bottom: 0; }

/* Löpande text: stycken, listor, underrubriker. */
.art-text p, .art-text li { font-size: 18px; line-height: 1.66; color: #343434; }
.art-text p { margin: 0 0 18px; }
.art-text ul, .art-text ol { margin: 0 0 18px; padding-left: 1.25rem; }
.art-text li + li { margin-top: 0.4rem; }
.art-text li::marker { color: #72053a; }
.art-text h3 { font-family: "IsidoraSans-Bold", sans-serif; font-size: 22px; line-height: 1.25; color: #101011; margin: 1.6em 0 0.6em; }
.art-text h3:first-child { margin-top: 0; }
.art-text h4 { font-family: "IsidoraSans-Bold", sans-serif; font-size: 18px; margin: 1.2em 0 0.4em; }
.art-text > :last-child { margin-bottom: 0; }
.art-before { margin-bottom: clamp(28px, 3.5vw, 40px); }
.art-before p { max-width: 70ch; }

/* Prose: rubriken i vänsterspalten, svarsstycket och texten i högerspalten. Ett rutnät där
   rubriken har sin plats och varje stycke går in i spalt två; tabeller och råmarkup får hela
   bredden. Så håller texten sitt läsmått och tabellen får plats. */
.art-prose { display: grid; gap: 18px clamp(24px, 4vw, 56px); align-items: start; }
.art-prose > .art-h2 { margin-bottom: 8px; }
.art-prose > p, .art-prose > ul, .art-prose > ol, .art-prose > blockquote { margin: 0; font-size: 18px; line-height: 1.66; color: #343434; max-width: 70ch; }
.art-prose > ul, .art-prose > ol { padding-left: 1.25rem; }
.art-prose > li + li, .art-prose li + li { margin-top: 0.4rem; }
.art-prose li::marker { color: #72053a; }
.art-prose > h3 { font-family: "IsidoraSans-Bold", sans-serif; font-size: 22px; line-height: 1.25; color: #101011; margin: 22px 0 -4px; }
.art-prose > h4 { font-family: "IsidoraSans-Bold", sans-serif; font-size: 18px; margin: 12px 0 -6px; }
.art-prose > .art-lead { margin-bottom: 6px; }
/* Ett stycke som bara är ett kursivt citat sätts som ett: större, med ett streck i knappfärgen. */
.art-prose > p:has(> em:only-child) { font-size: 20px; line-height: 1.5; color: #101011; padding-left: 1rem; border-left: 3px solid #a61154; }
@media screen and (min-width: 48rem) {
  .art-prose { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .art-prose > .art-h2 { grid-column: 1; grid-row: 1; margin: 0; }
  .art-prose > :not(.art-h2) { grid-column: 2; }
  .art-prose > .table-scroll, .art-prose > .team-leads, .art-prose > .art-feature { grid-column: 1 / -1; }
}

/* Rutnät av kort: så många i bredd som får plats, minst tre kort brett på en skrivbordsskärm.
   Fyra kort står två och två så inget kort blir ensamt på en andra rad; sju eller fler får
   vara något smalare. Långa sammansättningar avstavas i korten, som i rubrikerna. */
.art-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
@media screen and (min-width: 48rem) {
  .art-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.art-cards { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.art-cards:has(> :nth-child(7)) { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.art-card p, .art-card li, .art-check__text p { -webkit-hyphens: auto; hyphens: auto; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 6; hyphenate-limit-chars: 14 6 6; overflow-wrap: break-word; }
.art-card { background: #fff; border-radius: 16px; padding: clamp(24px, 3vw, 30px); box-shadow: 0 14px 36px rgba(114, 5, 58, 0.10); min-width: 0; }
.art-section--white .art-card { box-shadow: 0 18px 44px rgba(114, 5, 58, 0.14); }
.art-cards--flat .art-card, .art-card--green { box-shadow: none; }
.art-card--green { background: #d6e9d8; color: #143328; }
.art-card--tall { grid-row: span 2; }
.art-card__title { font-family: "IsidoraSans-Bold", sans-serif; font-size: 20px; line-height: 1.2; color: #72053a; margin: 0 0 12px; }
.art-card p, .art-card li { font-size: 17px; line-height: 1.64; color: #343434; }
.art-card p { margin: 0 0 16px; }
.art-card ul, .art-card ol { margin: 0 0 16px; padding-left: 1.2rem; }
.art-card li + li { margin-top: 0.45rem; }
.art-card li::marker { color: #72053a; }
.art-card > :last-child { margin-bottom: 0; }
.art-card--green .art-card__title, .art-card--green p, .art-card--green li { color: #143328; }
.art-card--green li::marker { color: #143328; }
.art-card--green a:not(.button) { color: #143328; text-decoration: underline; text-underline-offset: 3px; }
/* Ett fetstilt inledande stycke i ett grönt kort är kortets rubrik. */
.art-card--callout p > strong:first-child { display: block; margin-bottom: 10px; font-family: "IsidoraSans-Bold", sans-serif; font-size: 19px; line-height: 1.35; }

/* Kriterielistan: ett kort per fetstilt stycke, med bock (grönt) eller kryss (vitt). Utan
   markering (items) står det fetstilta som kortets rubrik. */
.art-checks { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); margin-bottom: clamp(36px, 4vw, 52px); }
.art-checks:last-child { margin-bottom: 0; }
.art-check { display: flex; gap: 14px; align-items: flex-start; border-radius: 16px; padding: 24px; background: #fff; min-width: 0; }
.art-section--white .art-check { background: #f8fafb; }
.art-checks--bock .art-check { background: #d6e9d8; color: #143328; padding: 26px; }
.art-check__text { min-width: 0; }
.art-check__text p { margin: 0 0 12px; font-size: 17px; line-height: 1.6; color: #343434; }
.art-check__text > :last-child { margin-bottom: 0; }
.art-check__text strong { font-family: "IsidoraSans-Bold", sans-serif; color: #101011; }
.art-checks--bock .art-check__text p, .art-checks--bock .art-check__text strong { color: #143328; }
.art-checks--bock .art-check__text a { color: #143328; text-decoration: underline; text-underline-offset: 3px; }
.art-checks--plain .art-check__text p > strong:first-child { display: block; margin-bottom: 8px; font-size: 19px; line-height: 1.3; }
.art-mark { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; margin-top: 3px; display: inline-grid; place-items: center; background: #f3d9e5; color: #72053a; }
.art-checks--bock .art-mark { background: #143328; color: #d6e9d8; }
/* .guide-icon sätter egen färg (brand-dark); här följer den plattan. */
.art-mark .guide-icon { flex-basis: 13px; width: 13px; height: 13px; color: inherit; background: none; }
.art-mark .guide-icon svg { width: 13px; height: 13px; stroke-width: 3; }

/* Den avslutande texten efter korten, med den blå rutan bredvid när avsnittet har en. */
.art-close { display: grid; gap: clamp(24px, 3vw, 40px); align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); margin-top: clamp(28px, 3.5vw, 40px); }
.art-checks + .art-close, .art-quotes + .art-close { margin-top: 0; }
.art-checks:not(:last-child) + .art-close { margin-top: 0; }
.art-aside { background: #dee9f8; color: #182337; border-radius: 16px; padding: clamp(24px, 3vw, 30px); }
.art-aside p { margin: 0 0 14px; font-size: 17px; line-height: 1.66; color: #182337; }
.art-aside > :last-child { margin-bottom: 0; }
.art-aside a { color: #182337; text-decoration: underline; text-underline-offset: 3px; }

/* Trappan: ett steg per rad, siffran i temats vinröda ruta. Tabellen i ett steg får ett vitt skal. */
.art-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.art-step { background: #f8fafb; border-radius: 16px; padding: clamp(24px, 3vw, 32px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; }
.art-section--pink .art-step { background: #fff; }
.art-step__index { width: 44px; height: 44px; border-radius: 12px; background: #72053a; color: #fff; display: grid; place-items: center; font-family: "IsidoraSans-Bold", sans-serif; font-size: 17px; line-height: 1; }
.art-step__title { font-family: "IsidoraSans-Bold", sans-serif; font-size: 22px; line-height: 1.25; color: #101011; margin: 0 0 12px; }
.art-step__body p, .art-step__body li { font-size: 18px; line-height: 1.66; color: #343434; }
.art-step__body p { margin: 0 0 22px; }
.art-step__body ul, .art-step__body ol { margin: 0 0 22px; padding-left: 1.25rem; }
.art-step__body > :last-child { margin-bottom: 0; }
.art-step__body a { font-family: "IsidoraSans-SemiBold", sans-serif; }

/* Tabeller får överlämningens vita skal med skugga, var de än står. */
.art .table-scroll { margin: 0 0 22px; background: #fff; border-radius: 16px; padding: clamp(14px, 2vw, 22px); box-shadow: 0 18px 44px rgba(114, 5, 58, 0.10); }
.art .table-scroll:last-child { margin-bottom: 0; }
.art .data-table { min-width: 420px; font-size: 16px; }
.art .data-table th, .art .data-table td { border-bottom: 1px solid rgba(114, 5, 58, 0.12); }
.art .data-table thead th { padding: 10px 16px; color: #72053a; font-family: "IsidoraSans-Bold", sans-serif; border-bottom: 2px solid #72053a; }
.art .data-table td { padding: 14px 16px; line-height: 1.5; color: #343434; }
.art .data-table tbody td:first-child { color: #101011; }
.art .data-table tbody tr:last-child td, .art .data-table tbody tr:last-child th { border-bottom: 0; }

/* Definitionsraderna: rubrik med punkt till vänster, texten till höger, linje mellan raderna. */
.art-rows { display: grid; border-top: 1px solid rgba(114, 5, 58, 0.16); }
.art-row { display: grid; gap: clamp(12px, 3vw, 40px); padding: clamp(24px, 3vw, 32px) 0; border-bottom: 1px solid rgba(114, 5, 58, 0.16); align-items: start; }
@media screen and (min-width: 48rem) {
  .art-row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
.art-row__title { margin: 0; display: flex; gap: 12px; align-items: flex-start; font-family: "IsidoraSans-Bold", sans-serif; font-size: 21px; line-height: 1.3; color: #72053a; }
.art-row__dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: #a61154; margin-top: 9px; }
.art-row__body { min-width: 0; }
.art-row__body p { margin: 0 0 16px; }

/* Panelen: rubriken inuti, texten i två spalter, en avslutande rad med länk. */
.art-panel { border-radius: 20px; padding: clamp(28px, 4vw, 44px); }
.art-panel--blue { background: #dee9f8; color: #182337; }
.art-panel--green { background: #d6e9d8; color: #143328; }
.art-panel--pink { background: #fff3f9; color: #343434; }
.art-panel__title { font-size: clamp(26px, 3.2vw, 34px); letter-spacing: -0.6px; line-height: 1.1; margin: 0 0 24px; color: inherit; }
.art-panel__grid { display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.art-panel .art-text p, .art-panel .art-text li { color: inherit; font-size: 17px; line-height: 1.68; }
.art-panel .art-text p { margin: 0 0 16px; }
.art-panel .art-text li::marker { color: inherit; }
.art-panel a:not(.button) { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.art-panel--pink a:not(.button) { color: #72053a; }
.art-panel__closing { margin-top: clamp(24px, 3vw, 32px); }
.art-panel__closing p { margin: 0; font-size: 17px; line-height: 1.6; color: inherit; }
.art-panel__closing a:not(.button) { font-family: "IsidoraSans-SemiBold", sans-serif; text-decoration: none; border-bottom: 1px solid rgba(24, 35, 55, 0.4); padding-bottom: 2px; }
.art-panel .button { margin-top: 8px; }

/* Spalterna: texten till vänster, korten till höger. */
.art-columns { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.art-columns__text p { max-width: 70ch; }
.art-columns__side { display: grid; gap: 20px; min-width: 0; align-content: start; }

/* Det breda vita kortet efter svarsstycket, och det vinröda bandet med avsnittets sista stycke. */
.art-feature { background: #fff; border-radius: 20px; padding: clamp(26px, 3.5vw, 40px); box-shadow: 0 18px 44px rgba(114, 5, 58, 0.12); margin-bottom: clamp(28px, 3.5vw, 40px); }
.art-feature p { margin: 0 0 14px; max-width: 70ch; font-size: 18px; line-height: 1.7; color: #343434; }
.art-feature > :last-child { margin-bottom: 0; }
.art-prose > .art-feature { margin-bottom: 0; }
.art-highlight { background: #72053a; border-radius: 20px; padding: clamp(28px, 4vw, 44px); margin-top: clamp(28px, 3.5vw, 40px); }
.art-highlight p { margin: 0; max-width: 24em; font-family: "IsidoraSans-Bold", sans-serif; font-size: clamp(22px, 2.8vw, 30px); line-height: 1.25; letter-spacing: -0.4px; color: #fff; }
.art-highlight a { color: #fff; }

/* Citatkorten: det kursiva stycket som citat, den fetstilta raden under som avsändare. */
.art-quotes { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.art-quote { margin: 0; background: #fff; border-radius: 16px; padding: clamp(24px, 3vw, 30px); box-shadow: 0 14px 36px rgba(114, 5, 58, 0.10); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.art-section--white .art-quote { background: #fff3f9; box-shadow: none; }
.art-quote blockquote { margin: 0; }
.art-quote blockquote p { margin: 0; font-size: 18px; line-height: 1.6; color: #101011; }
.art-quote figcaption { margin-top: auto; }
.art-quote figcaption p { margin: 0; font-family: "IsidoraSans-SemiBold", sans-serif; font-size: 15px; color: #72053a; }
.art-quote figcaption strong { font-family: inherit; }

/* Avslutet: vinrött band, rubrik och text till vänster, den vita knappen till höger. */
.art-cta { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.art-cta__title { color: #fff; font-size: clamp(28px, 3.6vw, 40px); margin: 0 0 18px; }
.art-cta__text p { font-size: clamp(17px, 1.9vw, 19px); line-height: 1.62; color: #f7dde9; margin: 0 0 14px; }
.art-cta__text > :last-child { margin-bottom: 0; }
.art-cta__text a:not(.button) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.art-cta__text a:not(.button):hover { color: #f7dde9; }
.art-cta__action { display: flex; justify-content: flex-start; min-width: 0; }
.art .art-cta .button {
  display: inline-flex;
  align-items: center;
  /* Temat sätter knappens vita text med !important; på det vinröda bandet är knappen vit
     och texten vinröd, samma sak som prissidans .hub-btn--white. */
  background: #fff !important;
  color: #72053a !important;
  border-radius: 100px;
  /* Halva pixeln, se "Optisk centrering av knapptexten" ovan. */
  padding: 19.5px 36px 18.5px;
  font-size: 18px;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}
.art .art-cta .button:hover, .art .art-cta .button:focus-visible { background: #f7dde9 !important; color: #72053a !important; }

/* Källorna: öppna, rubriken och raden om ny flik till vänster, listan till höger. */
.art-sources { display: grid; gap: clamp(20px, 3vw, 48px); align-items: start; border-top: 1px solid rgba(114, 5, 58, 0.16); padding-top: clamp(28px, 3.5vw, 40px); }
@media screen and (min-width: 48rem) {
  .art-sources { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
.art-sources__title { font-family: "IsidoraSans-Bold", sans-serif; font-size: 22px; line-height: 1.2; letter-spacing: -0.2px; color: #101011; margin: 0 0 8px; }
.art-sources__head p, .art-sources__head p.guide-sources__note { margin: 0; font-size: 14px; line-height: 1.5; color: #2d2d2f; }
.art-sources__list { min-width: 0; }
.art-sources__list ul, .art-sources__list ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.art-sources__list li { font-size: 15px; line-height: 1.6; color: #343434; }
.art-sources__list li + li { margin-top: 0; }
.art-sources__list li ol, .art-sources__list li ul { margin-top: 6px; }
.art-sources__list p { font-size: 15px; line-height: 1.6; color: #343434; margin: 12px 0 0; }
.art-sources__list a { color: #72053a; overflow-wrap: anywhere; }

/* Länkkorten: undersidorna under ett avsnitt, och Läs vidare sist på sidan. */
.art-children { margin-top: clamp(28px, 3.5vw, 40px); }
.art-children .guide-label, .art-section--related .guide-label { margin-bottom: 0.25rem; }
.art-linkcards { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.art-linkcard { background: #fff; border-radius: 16px; padding: clamp(22px, 3vw, 28px); box-shadow: 0 14px 36px rgba(114, 5, 58, 0.10); display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.art-section--white .art-linkcard { background: #f8fafb; box-shadow: none; }
.art-linkcard__title { font-family: "IsidoraSans-Bold", sans-serif; font-size: 19px; line-height: 1.25; margin: 0; }
.art .art-linkcard__title a { color: #101011; text-decoration: none; }
.art .art-linkcard__title a:hover { color: #72053a; }
.art-linkcard p { margin: 0; font-size: 15px; line-height: 1.5; color: #343434; }
.art-linkcard .guide-card__more { margin-top: auto; padding-top: 0.25rem; }

/* Faktarutor (::: ruta) i den här formen: kortens radie, och en rosa ruta på ett rosa band blir vit. */
.art .guide-aside { border-radius: 16px; padding: clamp(22px, 3vw, 28px); margin: 0; max-width: none; }
.art-section--pink .guide-aside--pink { background: #fff; box-shadow: 0 14px 36px rgba(114, 5, 58, 0.10); }
.art .guide-aside p, .art .guide-aside li { font-size: 17px; line-height: 1.6; }
.art-text .guide-aside { margin-bottom: 18px; }

/* Frågorna: rubriken till vänster, dragspelet (prissidans vita kort) till höger. */
.art-faq { display: grid; gap: 40px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.art-section--white .hub-faq__list .faq-item { background: #f8fafb; }

/* BMI-kalkylatorn i ett avsnitt. */
.art-widget { margin-top: clamp(28px, 3.5vw, 40px); display: flex; justify-content: center; }