/*
 * 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; }

/*
 * Friskas logga i sidhuvudet och sidfoten — bara på testsajten (friskaBrand i site.json; live-bygget
 * har alltid Blodtrycksdoktorns). Samma höjd som temats logga på varje brytpunkt: 20px på de
 * minsta skärmarna, 25px, 36px från 64rem och 30px i sidfoten. Bredden följer Friska-loggans
 * proportioner (108 × 32). Den vita varianten är den temat byter till när mobilmenyn är öppen
 * (.white-logo, site.js).
 */
.site-header__logo--friska,
.site-footer__logo--friska { background-image: url(img/friska-logo.svg); background-size: contain; background-repeat: no-repeat; background-position: left center; }
.site-header__logo--friska { width: 84px; }
.site-header__logo--friska.white-logo { background-image: url(img/friska-logo-negativ.svg); background-size: contain; }
.site-footer__logo--friska { width: 101px; }
@media screen and (max-width: 25rem) {
  .site-header__logo--friska { width: 68px; }
}
@media screen and (min-width: 64rem) {
  .site-header__logo--friska { width: 122px; }
}

/*
 * Toppbannern — notice i content/_data/site.json, partials/notice.njk. Temat har ingen
 * banner överst, så den är vår. Formen kommer från Figma (Friska Webb, nod 220:2006): 52px
 * hög, texten centrerad i IsidoraSans-SemiBold 18px i #101011, det framhävda ordet i Bold och
 * länken understruken i samma färg. Bakgrunden #fdf1d1 (light) finns bara i Figma och bara
 * här. brand och yellow är bannern längst ners två färger, kvar som val. Under 64rem är texten
 * 16px och får radbryta; sidmarginalerna är bannern längst ners.
 *
 * Sidhuvudet är position: fixed i temat och skulle lägga sig över bannern. När bannern
 * står före det blir sidhuvudet sticky i stället: det ligger under bannern tills bannern
 * rullat ur bild och stannar sedan överst, precis som annars. Den negativa marginalen är
 * sidhuvudets egen höjd (60px, 85px från 64rem), så att det inte tar plats i flödet — allt
 * under det hamnar där det alltid har hamnat, bara bannerns höjd längre ner. Allt som
 * räknar med sidhuvudets höjd (avsnittsmenyn, spalten, hopp till rubriker) stämmer
 * fortfarande, för när det händer har bannern redan rullat bort.
 */
.site-notice { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0.625rem 20px; font-family: "IsidoraSans-SemiBold", sans-serif; font-size: 16px; line-height: normal; text-align: center; }
.site-notice__text { max-width: 1600px; margin: 0; }
.site-notice strong { font-family: "IsidoraSans-Bold", sans-serif; font-weight: normal; }
.site-notice a { color: inherit; text-decoration: underline; text-underline-position: from-font; }
.site-notice--light { background-color: #fdf1d1; color: #101011; }
.site-notice--brand { background-color: #72053a; color: #fff; }
.site-notice--yellow { background-color: #f8b526; color: #101011; }
.site-notice + .site-header { position: sticky; margin-bottom: -60px; }
@media screen and (min-width: 64rem) {
  .site-notice { padding-left: 40px; padding-right: 40px; font-size: 18px; }
  .site-notice + .site-header { margin-bottom: -85px; }
}

/*
 * 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 {
  color: #202020;
  font-family: "IsidoraSans-Bold", sans-serif;
  font-size: 26px;
  line-height: 30px;
  letter-spacing: -0.26px;
  margin-bottom: 12px;
}

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

.sf-card {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  flex: 1;
  min-height: 0;
}

.sf-card__body {
  color: #242424;
  font-feature-settings: 'ss08' on;
  font-family: "Geist-Medium", sans-serif;
  font-size: 15px;
  line-height: 140%;
  letter-spacing: -0.16px;
  margin-bottom: 20px;
}

.sf-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: auto;
  padding-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;
}

/* ── Viktkurvan ───────────────────────────────────────────────────────────
   Bilden på resultatkortet: när en hälsosammare vikt kan vara nådd. Formen kommer från
   web-onboardings WeightMotivationStep. The marker is moved from script instead of by
   GSAP; the pin and the figure drop in with the CSS animations below. */

/* Indraget och överhänget är web-onboardings, men kurvan är smalare än kortet nu, så den
   centreras i stället för att ligga kvar mot vänsterkanten. */
/* Kurvan håller samma kant som texten. Bredden kom tidigare från ett eget tak, satt när
   rutan var bredare än den är nu; nu är det skärmens sidopadding som bestämmer. */
.wm__chart {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.wm__chart svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Kurvan är en linje, inte en yta. fill="none" står i markupen men en presentationsattribut
   viker för vilken regel som helst, så den sägs här där ingenting kan gå före. Utan den
   fylls ytan mellan banan och dess korda helt svart. */
.wm__chart svg > path {
  fill: none;
}

/* Texten i kurvan ärver inget: ett SVG-element går till webbläsarens standardfamilj, som är
   en antikva. Sätts här i stället för som attribut, så den följer temat. */
.wm text {
  font-family: "Geist-Medium", system-ui, sans-serif;
}

.wm__pill {
  position: relative;
  top: 3px;
  width: fit-content;
  color: #cb3c29;
  background: #fff;
  border-radius: 30px;
  padding: 8px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(20, 12, 16, 0.1);
}

/* The marker is moved from script in WeightMotivation.jsx, not by CSS offset-path, which
   Safari resolves against the wrong box on an SVG element. It stops at 80.9% of the
   path's length — (306, 168) in viewBox coordinates, where the pin and the figure are placed
   outright. The pin's shadow is an SVG filter there too: Safari ignores a CSS filter on an
   SVG element, and the pin is white on white without it. */

/* Nålen hänger ovanför markören med sin linje ned till den; siffran står ovanför nålen.
   Båda kommer först när markören är framme. */
.wm__pin,
.wm__reduction {
  opacity: 0;
}

.wm__pin {
  animation: wm-drop 0.4s ease-out 2s forwards;
}

.wm__reduction {
  animation: wm-rise 0.4s ease-out 2.2s forwards;
}

@keyframes wm-drop {
  from {
    opacity: 0;
    transform: translate(306px, -3px);
  }
  to {
    opacity: 1;
    transform: translate(306px, 27px);
  }
}

@keyframes wm-rise {
  from {
    opacity: 0;
    transform: translate(306px, -35px);
  }
  to {
    opacity: 1;
    transform: translate(306px, -5px);
  }
}

/* Den som har bett om mindre rörelse får bilden färdig i stället för ingen bild alls. */
@media (prefers-reduced-motion: reduce) {
  .wm__pin,
  .wm__reduction {
    animation: none;
    opacity: 1;
  }

  .wm__pin {
    transform: translate(306px, 27px);
  }

  .wm__reduction {
    transform: translate(306px, -5px);
  }
}

/* Kurvans slutläge ligger lågt i rutan, så texten börjar långt ned. På en bred skärm är
   avståndet större, precis som i web-onboarding. */
.wm__info {
  margin-top: 30px;
}

@media screen and (min-width: 48rem) {
  .wm__info {
    margin-top: 150px;
  }
}

.wm__info h3 {
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0 0 0.5em;
}

.wm sup {
  font-size: 0.6em;
}

.wm__disclaimer {
  color: hsl(0, 0%, 37%);
  font-weight: 400;
  font-size: 0.75rem;
  margin-top: 1.25rem;
}

/* Sista skärmen: butikslänkarna. På en telefon står bara den butik enheten har, på en
   dator båda — den som sitter vid en dator vet själv vilken telefon hen har. */
.sf-bankid-mark {
  flex: 0 0 auto;
  margin-right: 0.5rem;
  vertical-align: -0.25em;
}

/* Vägen tillbaka står där vägen ut stod — uppe till vänster, som en pil. Det är samma
   plats i flödet: det som tar dig ur den här skärmen. Krysset viker för den när den finns,
   så det aldrig står två saker på samma plats. */
/* Samma plats som stängknappen, som den byter av. Den ligger ovanpå stängknappens ruta,
   och den rutan står kvar osynlig så att innehållet under står still. */
.sf-back {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.06), 0 4px 48px 0 rgba(0, 0, 0, 0.15);
  font-size: 0;
  cursor: pointer;
}

/* Pilen: ett streck med en spets, som i formgivningen — inte bara ett hörn. */
.sf-back::before {
  content: "";
  width: 30px;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M13.812 21.812L7.524 15L13.812 8.18796M7.524 15H23.9844' stroke='%23202020' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 30px 30px;
}

:root {
  --sf-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E");
}

.sf-back:hover {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 48px 0 rgba(0, 0, 0, 0.2);
}

.sf-popup__panel:has(.sf-back) .sf-popup__close {
  visibility: hidden;
}

/* Knappen tar hela bredden och texten står mitt i, som i formgivningen. */
.sf-card__actions .button {
  display: flex;
  height: 52px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  width: 100%;
  padding: 0;
  color: #fff;
  text-align: center;
  gap: 12px;
  font-feature-settings: 'ss08' on;
  font-family: "Geist-SemiBold", sans-serif;
  font-size: 16px;
  /* Temats .button sätter 600. Vikten sitter i filen, så ett tal ovanpå den ber webbläsaren
     räkna fram en fetare variant av en redan halvfet skärning. */
  font-weight: normal;
  line-height: 16px;
}

/* Kurvan slutar lågt, och rubriken ska inte ligga i markörens knä. */
.wm + .sf-section .sf-card__title,
.wm + * .sf-card__title {
  margin-top: 1.75rem;
}

.sf-card__fineprint {
  margin-top: 1.25rem;
  color: #5C5C60;
  text-align: center;
  text-wrap-style: pretty;
  font-feature-settings: 'ss04' on, 'ss08' on;
  font-family: "Geist-Medium", sans-serif;
  font-size: 12px;
  line-height: 130%;
  letter-spacing: -0.12px;
}

.sf-handover {
  display: flex;
  flex: 1 0 0;
  align-self: stretch;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 80px;
  padding: 0 40px;
}

.sf-handover__text {
  text-align: center;
}

.sf-handover__icon {
  display: block;
  width: 120px;
  height: auto;
  margin: 0 auto 60px;
}

.sf-handover__text .sf-card__body {
  margin-bottom: 0;
}

.sf-handover__stores {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.sf-handover__store {
  display: inline-flex;
  text-decoration: none;
}

.sf-handover__store img {
  display: block;
  height: 48px;
  width: auto;
}

.sf-handover__store:hover img {
  opacity: 0.85;
}

/* ── Rutan ovanpå sidan ───────────────────────────────────────────────────
   Flödet när sektionen bär frageflodePopup. Startknappen står kvar i sidan; det är
   testet som flyttar hit.

   <dialog> sköter fokus, Esc och bakgrunden själv — här står bara formen. På en telefon
   täcker rutan hela skärmen: ett flöde som delar skärm med sidan under sig blir inget att
   göra klart, och tangentbordet tar halva ytan ändå. Från 48rem och upp står den som en
   ruta mitt på, med sidan synlig runt om. */

.sf-popup {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sf-popup::backdrop {
  background: rgba(20, 12, 16, 0.55);
}

/* Figma ritar text med gråskaleutjämning. macOS gör subpixelutjämning som standard, vilket
   lägger på en halv pixel åt sidorna och får varje skärning att se en vikt tyngre ut än den
   är. Bara flödet, inte hela sidan — resten av sidan är ritad mot den utjämning den har. */
.sf-popup {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* En stängd dialog är gömd av webbläsaren själv, och den gömningen är ett display: none
   som vilken egen display som helst slår ut. Rutan får sin därför först när den är öppen,
   annars står ett tomt kort mitt i sidan. */
.sf-popup[open] {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  flex: 1;
  min-height: 0;
}

/* Flödets rot står mellan rutan och kortet. Utan att den sträcker sig och fyller når ingen
   höjd ner till kortet, och allt som vill centrera sig i rutan lägger sig överst i stället. */
.sf {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  flex: 1;
  min-height: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sf-popup__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.sf-popup__panel::-webkit-scrollbar {
  display: none;
}

/* Skärmen är en kolumn med knappen i botten: innehållet står överst, handlingen sist, och
   luften däremellan växer med rutan i stället för att samlas under texten. */
.sf-popup__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1;
  min-height: 0;
  padding: 16px 28px 24px;
}

/* Stängknappen ligger kvar medan innehållet rullar under den — ett långt flöde ska inte
   kräva att man rullar tillbaka upp för att komma ur rutan. */
.sf-popup__close {
  position: sticky;
  top: 0;
  align-self: flex-start;
  margin: 0.75rem 0 0 0.75rem;
  z-index: 1;
  display: flex;
  width: 44px;
  height: 44px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border: 0;
  border-radius: 22px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M8 8L22 22' stroke='%23202020' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 8L8 22' stroke='%23202020' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 30px 30px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.06), 0 4px 48px 0 rgba(0, 0, 0, 0.15);
  font-size: 0;
  line-height: 1;
  cursor: pointer;
}

.sf-popup__close:hover {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 48px 0 rgba(0, 0, 0, 0.2);
}

@media screen and (min-width: 48rem) {
  /* The dialog keeps the whole viewport and centres the panel inside it. Shrinking the
     dialog itself does not centre it: the modal default pins all four insets, so an auto
     width fills that box instead of collapsing to the panel. */
  .sf-popup[open] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
  }

  /* Rutans mått kommer från designen. Höjden är ett tak snarare än ett löfte: en skärm som
     inte rymmer 840px ska krympa rutan, inte skjuta knappen utanför. */
  .sf-popup__panel {
    width: 480px;
    max-width: 100%;
    height: 840px;
    max-height: calc(100vh - 4rem);
    border: 2px solid #ededed;
    border-radius: 28px;
    overflow-y: auto;
    scrollbar-width: none;
  }

  /* Rullningen finns kvar, listen syns inte — den delar kortet på mitten för de få pixlar
     innehållet går över. */
  .sf-popup__panel::-webkit-scrollbar {
    display: none;
  }

  .sf-popup__body {
    padding: 16px 28px 24px;
  }
}

.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-card:has(.sf-bankid) .sf-section,
.sf-card:has(.sf-bankid) .sf-card__title {
  display: none;
}

.sf-bankid {
  display: flex;
  flex: 1 0 0;
  align-self: stretch;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 40px;
}

.sf-bankid__status,
.sf-loading__status {
  margin: 0;
  color: #242424;
  text-align: center;
  font-feature-settings: 'ss08' on;
  font-family: "Geist-Medium", sans-serif;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: -0.16px;
}

/*
 * 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.
 */
/* Väntan: snurra, vad som händer, och vägen ur. Samma mitt-i-kortet som koden, så att de
   två lägena inte hoppar när det ena blir det andra. */
.sf-bankid__waiting,
.sf-bankid__scan,
.sf-loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  gap: 20px;
  padding: 0 40px;
  text-align: center;
}

/* Startväntan står för sig själv och inte i ett kort. Den tar hela ytan flödet får, så
   snurran hamnar mitt i den i stället för överst i en rad som är en textrad hög. */
.sf-loading {
  flex: 1;
}

.sf-bankid__waiting .sf-bankid__status,
.sf-loading__status {
  max-width: 22rem;
  margin: 0;
  color: #343434;
}

.sf-bankid__cancel {
  color: #a61e5a;
  font-weight: 600;
}

/* Samma färg som Avbryt. Ingen font-weight: sajten namnger tecknitten per vikt och en
   syntetisk fetstil ser inte ut som den riktiga. */
.sf-bankid__qrtoggle {
  color: #a61e5a;
}

/* En båge som snurrar — hellre än en hel ring, för då syns det att den rör sig. */
.sf-spinner {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid transparent;
  border-top-color: #a61e5a;
  border-radius: 50%;
  animation: sf-spin 0.9s linear infinite;
}

@keyframes sf-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sf-spinner {
    animation-duration: 3s;
  }
}

/* Koden mitt i kortet, med gott om luft runt. Skärmen har en enda uppgift — att bli
   avläst — och allt annat på den drar bara uppmärksamhet från den. */
.sf-bankid__qrframe {
  padding: 12px;
  background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 16px;
  /* Ett långt tryck på koden får inte bli en markering eller en snabbmeny på vägen. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.sf-bankid__qr {
  display: block;
  width: 196px;
  height: 196px;
}

.sf-bankid__failed {
  margin: auto 0;
  text-align: center;
}

.sf-bankid__failed-title {
  font-family: "IsidoraSans-Bold", sans-serif;
  font-size: 20px;
  color: #202020;
}

.sf-bankid__failed .sf-card__actions {
  margin-top: 0;
  padding-top: 1.5rem;
}

/* ── 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;
}

/* Bilden är en rubrikbild, inte en illustration att fördjupa sig i: den får bredden men en
   begränsad höjd, och beskärs på mitten där formatet inte räcker till. */
.sf-section__image {
  width: 100%;
  max-width: 100%;
  height: 160px;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  margin: 0 0 24px;
}

/* Raderna bär ingen egen luft längre, så avståndet mellan dem står på ett ställe. */
.sf-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

/* En avbockad punkt är en rad, inte en post: bocken bredvid texten, ingen linje under, och
   samma storlek som brödtexten. Bocken ritas här så att innehållet bara är text — en bock
   skriven i Contentful vore en bock att stava fel. */
.sf-list__item--checked {
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  padding: 0;
  border-bottom: 0;
  color: #242424;
  font-feature-settings: 'ss08' on;
  font-family: "Geist-Medium", sans-serif;
  font-size: 15px;
  line-height: 140%;
  letter-spacing: -0.16px;
}

.sf-list__item--checked::before {
  content: "";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background: no-repeat center / 24px 24px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath stroke='%23169248' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='m17.8 9.8-6.6 6.6-3.3-3.3'/%3E%3C/svg%3E");
}

/* ── 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--ready {
  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; }

/*
 * ── Listsidan (layouts/article-list.njk) ────────────────────────────────
 * Temats egen artikellista (template-article-list.php), som /halsa-och-livsstil/ på
 * live-sajten. Allt utseende kommer ur theme.css: .page-intro--pink, .article-module,
 * .article-list, .category-tag. Det enda som står här är bilden på korten: temat lägger
 * den som bakgrund på .article__thumbnail, vi lägger en <img loading="lazy"> i samma ruta
 * och beskär den likadant (cover, 35 % uppifrån). Se "Listsidan" i .claude/design-system.md.
 */
.article__thumbnail { position: relative; }
.article__thumbnail img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 35%; object-position: 50% 35%; }

/*
 * ── Blogginlägget (layouts/post.njk) ────────────────────────────────────
 * Temats single-post.php. Allt utseende kommer ur theme.css (.single-article,
 * .main-article-intro, .article.full-article, .article-aside, .get-started). Temat ger
 * "Liknande artiklar" sitt avstånd genom body-klassen .single, som WordPress sätter på
 * ett inlägg; här har <body> ingen klass, så samma två regler hängs på .single-article i
 * stället. Utan dem drar temats -8rem upp rubriken under rutan ovanför.
 */
.single-article .article-module { margin: 30px 0 0; }
.single-article .article-list { margin: 0; }
/* En video i texten fyller spalten, som WordPress blockbibliotek gör (.wp-block-video video). */
.single-article .wp-block-video { margin: 0 0 1em; }
.single-article .wp-block-video video { width: 100%; height: auto; vertical-align: middle; }


/*
 * ── Elementor-sidorna (layouts/elementor.njk) ───────────────────────────
 * Startsidan och /priser/ på blodtrycksdoktorn.se är byggda i Elementor, och Elementors
 * utseende finns inte i theme.css. Här är det återskapat, med måtten ur Elementors stilmall
 * för varje sida (post-14999.css, post-14795.css) och det som mättes på live-sidorna
 * 2026-09-30, i 1440 och 390 pixlars bredd. Typsnitten är temats och de som gäller för alla sidor vi bygger: Isidora Sans
 * Bold i rubrikerna och knapparna, som sajtens egen CSS tvingar på Elementor, och
 * Geist-Medium i brödtexten. Färgerna är designsystemets, utom de tre Elementor tar med
 * sig: sektionernas grå #f5f5f5, betygsrutans #f4f4f4 och kortens kant #e7e2e2, som alla
 * står på live-sidan. Brytpunkterna är Elementors: surfplatta upp till 1024px, mobil upp
 * till 767px. Se "Elementor-sidorna" i .claude/design-system.md.
 *
 * Två saker i Elementor som styr måtten: varje ruta har 10px luft runt sig, och rutorna är
 * flexboxar, så ett styckes marginal stannar i sin ruta i stället för att slås ihop med
 * rubrikens. Därför är textblocken display: flow-root och avstånden gap, inte marginaler.
 */
.el { color: #000; overflow-x: clip; }
.el h1,
.el h2,
.el h3 { font-family: "IsidoraSans-Bold", sans-serif; color: #000; }
.el .button { font-family: "IsidoraSans-Bold", sans-serif; font-size: 15px; line-height: 15px; }
.el img { max-width: 100%; height: auto; }
.el picture { display: block; }
.el-body { display: flow-root; }
.el-wrap { display: flex; flex-direction: column; gap: 20px; max-width: 1140px; margin: 0 auto; padding: 10px; }
.el-title { font-size: 28px; line-height: 1; text-align: center; margin: 0; }
/* Rubrikerna som saknar egen storlek i Elementor får dess standard, 20px, på mobilen. */
.el-text .el-title,
.el-image .el-title,
.el-why .el-title,
.el-faq .el-title { font-size: 20px; }
.el-title--left { text-align: left; }
/* Knappen i en egen flexrad, så att styckets radhöjd inte lägger luft ovanför den. */
.el-button { display: flex; margin: 0; }
.el-button--center { justify-content: center; }
@media screen and (min-width: 48rem) {
  .el-title { font-size: 30px; }
}

/* Heron och de två delarna med en telefon: text till vänster, bild till höger. */
.el-split { display: flex; flex-direction: column; align-items: center; gap: 80px; margin: 0 auto; padding: 30px 8px; }
.el-hero { gap: 0; }
.el-split__text { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; padding: 0 15px; }
.el-hero .el-split__text { gap: 0; padding: 0 10px; }
.el-split__media { display: flex; justify-content: center; width: 100%; padding: 10px; }
.el-split__media--phone img { width: 312px; }
.el-hero__title,
.el-split__title { font-size: 31px; line-height: 1; margin: 0; text-align: center; }
.el-hero__points,
.el-split__body { font-size: 17px; line-height: 1.5; }
.el-hero__points { margin: 1em 0; padding-left: 40px; }
.el-split__body { display: flow-root; width: 100%; }
.el-split__body ul { margin: 1em 0; padding-left: 40px; }
.el-hero .el-button { padding: 0; }
.el-hero .button { padding: 20px 27px 19px; }
.el-hero__helped { display: flow-root; font-size: 16px; text-align: center; }
.el-rating { display: flex; flex-direction: column; align-items: center; }
.el-rating__pill { display: flex; align-items: center; justify-content: center; gap: 12px; width: 180px; min-height: 57px; margin: 10px 0; padding: 0 14px; border-radius: 999px; background: #f4f4f4; }
.el-rating__score { font-size: 12px; letter-spacing: 1px; white-space: nowrap; margin: 1rem 0; }
.el-rating__reviews { font-size: 16px; text-align: center; margin: 1rem 0; }
.el-stars { display: inline-flex; line-height: 0; }

@media screen and (min-width: 48rem) {
  .el-split { margin: 50px 20px 10px; padding: 100px 70px 90px; gap: 80px; }
  .el-split__text,
  .el-hero .el-split__text { gap: 20px; padding: 10px; }
  .el-split__media { padding: 20px; }
  .el-hero .button { padding: 12.5px 24px 11.5px; }
  .el-hero__title { font-size: 70px; }
  .el-split__title { font-size: 60px; }
  .el-hero__points,
  .el-split__body { font-size: 22px; line-height: 1.66; }
  .el-hero .el-button { padding: 20px; }
  .el-hero__helped,
  .el-rating__reviews { font-size: 14px; }
  .el-rating { flex-direction: row; gap: 20px; padding: 10px; }
  /* Rutan står i en 200px bred ruta i Elementor, därav luften till höger om den. */
  .el-rating__pill { width: auto; min-width: 178px; margin-right: 22px; }
  .el-rating__score { font-size: 15px; }
  .el-rating__reviews { padding: 10px; margin: 16px 0; }
}

@media screen and (min-width: 64.0625rem) {
  /* Elementor ger sektionen 20px marginal till vänster men låter den gå ut till höger, så
     innehållet står 20px till höger om mitten — så även här. */
  .el-split { flex-direction: row; justify-content: space-between; max-width: 1340px; margin: 50px auto 10px; padding: 100px 50px 90px 90px; }
  .el-split__text { flex: 0 1 620px; align-items: flex-start; }
  .el-hero .el-split__text { flex-basis: 602px; }
  .el-split__media { flex: 0 1 500px; }
  .el-hero__media { flex-basis: 518px; align-self: flex-start; }
  .el-hero__title,
  .el-split__title { text-align: left; }
  .el-hero__helped { padding-left: 22px; text-align: left; }
  .el-rating__reviews { text-align: left; }
}

/* BMI-kalkylatorn och texten bredvid, på grå botten. */
.el-band { background: #f5f5f5; }
.el-bmi { padding: 10px 0; }
.el-bmi .el-wrap { padding: 20px; }
.el-bmi .el-title { padding: 20px 0; }
.el-bmi__grid { display: flex; flex-direction: column; gap: 20px; padding: 10px; }
.el-bmi__calculator,
.el-bmi__text { flex: 1 1 0; padding: 20px; }
/* I Elementor är de två styckena två textrutor med 20px mellan, och marginalerna möts inte. */
.el-bmi__text p + p { margin-top: calc(2rem + 20px); }
@media screen and (min-width: 48rem) {
  .el-bmi .el-title { margin: 20px; padding: 20px; }
  .el-bmi__grid { flex-direction: row; }
}

/* Rubrik över text: evidensen. */
.el-text { padding: 0 15px; }
@media screen and (min-width: 48rem) {
  .el-text { margin-top: 20px; padding: 10px; }
}

/* Korten med ikon: hur behandlingen går till. */
.el-steps { display: flex; flex-direction: column; gap: 80px; padding: 80px 20px 90px; }
.el-steps__group { font-size: 22px; line-height: 1; margin: 0; text-align: left; }
.el-steps__cards { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 10px; }
.el-card { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 18px; width: 100%; min-height: 200px; padding: 24px; border: 2px solid #e7e2e2; border-radius: 14px; background: #fff; }
.el-card__icon { width: 150px; height: 150px; }
.el-card__title { font-size: 20px; line-height: 1; margin: 0; text-align: center; }
.el-card__text { align-self: stretch; }
@media screen and (min-width: 48rem) {
  .el-card { width: 75%; }
  .el-card__title { font-size: 30px; }
}
@media screen and (min-width: 64.0625rem) {
  .el-steps__group { text-align: center; }
  .el-steps__cards { flex-direction: row; justify-content: center; align-items: center; width: 100%; max-width: 1160px; margin: 0 auto; }
  /* Utan grupprubrik sträcks korten till samma höjd, med dem centreras de. */
  .el-title + .el-steps__cards { align-items: stretch; }
  .el-title + .el-steps__cards .el-card { flex: 1 1 0; width: auto; }
  .el-steps__group + .el-steps__cards--2 .el-card { width: 338px; }
  .el-steps__group + .el-steps__cards--3 .el-card { width: 325px; }
}

/* Citatet från en patient bredvid en bild. */
.el-quote { margin-top: 20px; padding: 0 10px 10px; }
.el-quote .el-wrap { gap: 0; padding: 0; }
.el-quote .el-title { margin: 20px 10px 30px; padding-top: 30px; }
.el-quote__grid { display: flex; flex-direction: column; }
.el-quote__image,
.el-quote__body { flex: 1 1 0; padding: 10px; margin: 0; }
.el-quote__image img { display: block; width: 100%; }
.el-quote__body { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.el-quote__text { font-size: 16px; line-height: 1.66; margin: 0; padding-left: 20px; }
.el-quote__meta { display: flex; align-items: center; gap: 15px; margin: 0 0 0 20px; }
.el-quote__portrait { width: 60px; height: 60px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; }
.el-quote__name { font-family: "IsidoraSans-Bold", sans-serif; color: #72053a; }
.el-quote .el-button { align-self: center; }
@media screen and (min-width: 48rem) {
  .el-quote__grid { flex-direction: row; }
  .el-quote__text { font-size: 1.3em; }
  .el-quote .el-button { align-self: flex-start; margin-left: 10px; }
}

.el-reviews { padding: 10px; }

/* Rubrik över en bild: WHO:s tabell. */
.el-image { margin: 30px 0 50px; padding: 10px; text-align: center; }
.el-image picture { padding-top: 30px; }

/* Vårdteamet. */
.el-team { padding: 10px; }
.el-team .el-title { margin-top: 30px; }
.el-team__people { display: flex; flex-direction: column; padding: 10px; }
.el-person { display: flex; flex-direction: column; align-items: center; gap: 20px; flex: 1 1 0; padding: 10px; text-align: center; }
.el-person__image { width: 200px; height: 200px; }
.el-person .el-body { align-self: stretch; }
@media screen and (min-width: 48rem) {
  .el-team__people { flex-direction: row; justify-content: space-between; gap: 20px; }
}

/* Därför ska du välja …: punkter med bock och en knapp, på grå botten. */
.el-why { padding: 20px 30px; }
.el-why .el-wrap { padding: 0; }
.el-why__points { list-style: none; margin: 0; padding: 0; color: #343434; }
.el-why__points li { display: flex; align-items: center; gap: 4px; }
.el-why__points svg { flex: none; width: 18px; color: #72053a; }
.el-why .el-button { justify-content: center; }
@media screen and (min-width: 48rem) {
  .el-why { padding: 50px; }
  .el-why .el-button { justify-content: flex-start; }
  .el-text .el-title,
  .el-image .el-title,
  .el-why .el-title,
  .el-faq .el-title { font-size: 30px; }
}
@media screen and (min-width: 64.0625rem) {
  .el-why { margin-top: 40px; padding: 60px 0; }
}

/*
 * /priser/: det rosa bandet med sidans rubrik, en smal inledning, de ljusbeige rutorna med
 * priskort, frågorna och en bild med knapp. Sidan är byggd av Elementors äldre sektioner och
 * spalter, som har 10px luft i varje spalt och 20px mellan delarna, och står i temats
 * .elementor-content, som ger 8rem luft ovanför på större skärmar. Ljusbeige #f9f6f2, kortens
 * skugga och det grå strecket #c7c7c7 och den grå noten #979797 står på live-sidan.
 */
.el-titleband { padding: 25px; background: #fae9ee; }
.el-titleband__title { font-size: 38px; line-height: 1; text-align: center; color: #72053a !important; margin: 0; }
.el-intro { padding: 10px; }
/* Överst en tom Elementor-ruta: 6px på mobilen, 31px på större skärmar, och 20px till rubriken. */
.el-intro__column { display: flex; flex-direction: column; gap: 20px; max-width: 900px; margin: 0 auto; padding: 26px 10px 0; }
.el-intro__title { font-size: 20px; line-height: 1; margin: 0; }
.el-intro__text { font-size: 20px; line-height: 1.66; }
.el-prices { padding: 10px; }
.el-prices__box { max-width: 1200px; margin: 0 auto; padding: 10px; border-radius: 10px; background: #f9f6f2; }
.el-prices__title { font-size: 24px; line-height: 1; margin: 10px 0 20px; }
.el-prices__cards { display: flex; flex-direction: column; align-items: stretch; }
.el-price { display: flex; flex-direction: column; gap: 20px; margin: 10px; padding: 20px; border-radius: 10px; background: #fff; box-shadow: 0 0 10px 0 rgba(175, 175, 175, .5); }
.el-price__label { font-size: 16px; line-height: 1; margin: 0; }
.el-price__price { font-family: "IsidoraSans-Bold", sans-serif; font-size: 30px; line-height: 1; margin: 0; }
.el-prices:not(.el-prices--even) .el-price__price { margin-top: 10px; }
/* Temat döljer <hr> (display: none) och gör det genomskinligt; här är det Elementors streck. */
.el-price__rule,
.el-divider hr { display: block; width: 100%; opacity: 1; border: 0; }
.el-price__rule { margin: 15px 0; border-top: 2px solid #c7c7c7; }
.el-price__rest { display: flex; flex-direction: column; gap: 20px; flex: 1 1 auto; }
.el-price__text { font-size: 15px; line-height: 1.66; }
/* Som i de flesta av sidans textrutor: ingen marginal under sista stycket eller listan. */
.el-price__text > :last-child { margin-bottom: 0; }
.el-price__note { font-size: 12px; line-height: 1.66; color: #979797; }
/* Elementor tar bort marginalen under notens stycken, inte den ovanför. */
.el-price__note p { margin-bottom: 0; }
.el-prices--even .el-price { min-height: 340px; }
.el-prices--even .el-price .el-button { margin-top: auto; }
.el-prices--even .button,
.el-cta .button { font-size: 14px; line-height: 14px; border-radius: 17px; text-shadow: 0 0 10px rgba(0, 0, 0, .3); }
.el-divider { padding: 10px; }
.el-divider hr { max-width: 1140px; margin: 15px auto; border-top: 1px solid #000; }
.el-faq { padding: 10px; }
.el-faq .el-wrap { padding: 20px; }
/* 16px på mobil, som på live-sidorna (/priser/ och /fortsatt-hos-oss/, uppmätt 2026-10-01). */
.el-faq .el-body { font-size: 16px; line-height: 1.66; }
.el-cta { margin-top: 20px; padding: 10px 10px 60px; }
.el-cta__grid { display: flex; flex-direction: column; max-width: 888px; margin: 0 auto; }
.el-cta__image,
.el-cta__text { flex: 1 1 0; padding: 10px; }
.el-cta__image img { display: block; transform: scaleX(-1); }
.el-cta__image picture { width: calc(100% - 10px); }
.el-cta__text { display: flex; flex-direction: column; gap: 20px; }
.el-cta__title { font-size: 30px; line-height: 1; margin: 0; }
.el-cta .el-body { font-size: 14px; line-height: 1.66; }
@media screen and (min-width: 48rem) {
  .el-titleband { padding: 35px; }
  .el-titleband__title { font-size: 80px; }
  .el-faq .el-body { font-size: 20px; }
  .el-intro__column { padding-top: 51px; }
  .el-intro__title { font-size: 30px; }
  .el-prices { padding: 50px; }
  .el-prices__title { margin: 10px 0 20px 20px; }
  .el-prices__cards { flex-direction: row; align-items: flex-start; }
  .el-prices--even .el-prices__cards { align-items: stretch; max-width: 1140px; margin: 0 auto; }
  .el-price { flex: 1 1 0; min-width: 0; }
  .el-prices--even .el-price { min-height: 590px; }
  .el-cta__grid { flex-direction: row; }
}
@media screen and (min-width: 64.0625rem) {
  .el-price__label { min-height: calc(var(--label-rows) * 16px); }
}

/*
 * The newsletter form ([nyhetsbrev], newsletterForm in tools/post.mjs). theme.css draws
 * Gravity Forms' classes — the field, the floating label, the inset inside .module-content —
 * so only what Gravity Forms' own stylesheet added on blodtrycksdoktorn.se is here: the
 * consent text as a block beside its box, the gap above the policy link, and room around
 * the messages.
 */
.newsletter .gfield_consent_label { display: block; }
.newsletter .gfield_consent_description { margin-top: .5rem; }
.newsletter .validation_error { margin-bottom: 1rem; }
.newsletter .validation_message[hidden],
.newsletter .validation_error[hidden] { display: none; }
/* Testsajtens rad under tacket: där skickas ingen anmälan (newsletterSends i tools/post.mjs). */
.newsletter__test,
.nl-popup__test { display: block; margin-top: 1rem; font-family: "IsidoraSans-SemiBold", sans-serif; color: #a61154; }

/*
 * Nyhetsbrevsrutan (newsletterPopup i tools/post.mjs, öppnas av site.js efter tre minuter).
 * Designen är "Nyhetsbrev popup" i artikelredesignen: en vit ruta med rosa huvud, fältet och
 * samtycket under, knappen i full bredd. Tokens ur designsystemet — brand-dark, brand-button,
 * brand-light, light-color, black-text-color, dark-text, dark-color, radierna 12/16/24 och
 * knappens 100px — plus #f7dde9, stängknappens hover, som artikelsidans överlämning redan
 * lade till. Skicka-knappen är brand-button som varje fylld knapp här (designen ritar den i
 * brand-dark och blekare tills formuläret är ifyllt; se "Knappfärgen" i designsystemet).
 *
 * <dialog> med showModal() sköter fokus, Esc och bakgrunden. Dialogen fyller skärmen och
 * centrerar rutan i sig, som frågeflödets ruta ovan; ett klick på dialogen själv är ett
 * klick bredvid rutan och stänger den (site.js).
 */
.nl-popup {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: #343434;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.nl-popup::backdrop { background: rgba(16, 16, 17, 0.45); }
.nl-popup[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
}
.nl-popup__panel {
  width: 100%;
  max-width: 540px;
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 28px 70px rgba(114, 5, 58, 0.28);
}
.nl-popup [hidden] { display: none; }

.nl-popup__head {
  position: relative;
  background: #fff3f9;
  padding: clamp(28px, 5vw, 40px) clamp(24px, 5vw, 40px) clamp(24px, 4vw, 32px);
}
.nl-popup__close {
  position: absolute;
  top: 18px;
  right: 18px;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  cursor: pointer;
  background: #fff;
  color: #72053a;
  border-radius: 100px;
  padding: 9px 16px;
  font-family: "IsidoraSans-SemiBold", sans-serif;
  font-size: 14px;
  line-height: 1.2;
  box-shadow: 0 6px 16px rgba(114, 5, 58, 0.12);
  transition: background 0.15s;
}
.nl-popup__close:hover { background: #f7dde9; }
.nl-popup__title {
  margin: 0 0 14px;
  padding-right: 80px;
  font-family: "IsidoraSans-Black", sans-serif;
  font-size: clamp(30px, 5vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.8px;
  color: #101011;
}
.nl-popup__intro {
  margin: 0;
  font-family: "Geist-Medium", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #2d2d2f;
  text-wrap: pretty;
}

.nl-popup__form,
.nl-popup__done {
  padding: clamp(24px, 5vw, 36px) clamp(24px, 5vw, 40px) clamp(28px, 5vw, 40px);
}
.nl-popup__form { display: grid; gap: 22px; }
.nl-popup__field { display: grid; gap: 8px; }
.nl-popup__label {
  font-family: "IsidoraSans-Bold", sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: #101011;
}
.nl-popup .nl-popup__input {
  width: 100%;
  height: 54px;
  padding: 0 18px;
  border-radius: 12px;
  border: 2px solid rgba(114, 5, 58, 0.18);
  background: #fff;
  font-family: "Geist-Medium", sans-serif;
  font-size: 17px;
  color: #101011;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nl-popup .nl-popup__input:focus {
  border: 2px solid #72053a;
  box-shadow: 0 0 0 4px rgba(114, 5, 58, 0.1);
}
.nl-popup__field.is-invalid .nl-popup__input { border-color: #a61154; }

.nl-popup__consent {
  display: grid;
  gap: 14px;
  background: #f8fafb;
  border-radius: 16px;
  padding: 20px;
}
.nl-popup__legend {
  font-family: "IsidoraSans-Bold", sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: #72053a;
}
.nl-popup__check {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  cursor: pointer;
}
.nl-popup__check input {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.nl-popup__box {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 7px;
  border: 2px solid #72053a;
  background: #fff;
  transition: background 0.15s;
}
.nl-popup__check input:checked + .nl-popup__box { background: #72053a; }
.nl-popup__check input:checked + .nl-popup__box::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}
.nl-popup__check input:focus-visible + .nl-popup__box { outline: 2px solid #72053a; outline-offset: 2px; }
.nl-popup__consent.is-invalid .nl-popup__box {
  border-color: #a61154;
  box-shadow: 0 0 0 4px rgba(166, 17, 84, 0.14);
}
.nl-popup__check-text {
  min-width: 0;
  font-family: "Geist-Medium", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #343434;
}
.nl-popup__policy {
  justify-self: start;
  color: #72053a;
  font-family: "IsidoraSans-SemiBold", sans-serif;
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid rgba(114, 5, 58, 0.35);
  padding-bottom: 2px;
}
.nl-popup__policy:hover { color: #a61154; }

.nl-popup__error,
.nl-popup__failure {
  margin: 0;
  font-family: "IsidoraSans-SemiBold", sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: #a61154;
}
.nl-popup__submit {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  cursor: pointer;
  width: 100%;
  border-radius: 100px;
  padding: 18px 28px;
  background: #a61154;
  color: #fff;
  font-family: "IsidoraSans-Bold", sans-serif;
  font-size: 17px;
  line-height: 1.2;
  box-shadow: 0 14px 30px rgba(114, 5, 58, 0.28);
  transition: background 0.15s, box-shadow 0.15s;
}
.nl-popup__submit:hover { background: #710c39; }
.nl-popup__submit:disabled { cursor: progress; box-shadow: none; }
.nl-popup :is(button, a):focus-visible { outline: 2px solid #72053a; outline-offset: 2px; }
.nl-popup__done {
  margin: 0;
  font-family: "Geist-Medium", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #2d2d2f;
  outline: none;
}

/*
 * En medarbetares sida (type: bio) — /om-ghassan-darwiche/, /om-mia-matthed/ och
 * /om-vasiliki-karagianni/, mätta på live-sidorna 2026-10-01. Texten står först i koden och
 * till höger på datorn (Elementors row-reverse); på mobil kommer bilden, namnet och titeln
 * först. På datorn är spalten med bilden 338px och bilden 298px kvadratisk, med Elementors
 * två lager om 10px luft runt varje spalt och två runt raden. Strecket som följer står 20px
 * nedanför raden, i samma ruta som på live-sidan.
 */
.el-bio { padding: 10px 10px 0; }
.el-bio__grid { display: flex; flex-direction: column-reverse; gap: 40px; max-width: 1140px; margin: 0 auto; padding: 10px 10px 30px; }
.el-bio__profile { display: flex; flex-direction: column; gap: 20px; }
.el-bio__profile img { display: block; width: 100%; }
.el-bio__name { font-size: 20px; line-height: 1; margin: 0; }
.el-bio .el-body { font-size: 16px; line-height: 1.66; }

/* Vägen till appen (type: app): butikslänkarna upp till 1024px, QR-koden därifrån. */
.el-app { padding: 20px; }
.el-app .el-body { font-size: 16px; line-height: 1.66; }

/* Bandet byggt som Elementors äldre sektion (/fortsatt-hos-oss/): sektionens, spaltens och
   rubrikens luft lagt ihop, 20px på mobil och 50px på datorn, mot containerns 25 och 35. */
.el-titleband--section { padding: 20px; }
.el-app__desktop { display: none; }

@media screen and (min-width: 48rem) {
  .el-bio .el-body,
  .el-app .el-body { font-size: 20px; }
  .el-bio__name { font-size: 30px; }
  .el-titleband--section { padding: 50px; }
}

@media screen and (min-width: 64.0625rem) {
  /* 100px från sidans överkant till rutan, och 20px luft i den runt spalterna, som live. */
  .el-bio { padding-top: 100px; }
  .el-bio__grid { flex-direction: row-reverse; gap: 20px; padding: 20px; }
  .el-bio__profile { flex: 0 0 338px; padding: 20px; }
  .el-bio__text { flex: 1 1 0; min-width: 0; padding: 20px; }
  .el-app { padding: 10px; }
  .el-app__mobile { display: none; }
  .el-app__desktop { display: flow-root; }
}