/* ==========================================================================
   STARTSIDAN – VERSION 2 (versioner/version-2.php, v5.983.0–v5.986.0)
   Laddas bara när Version 2 visas (versioner.php §2, prioritet 60).
   Byggd efter skissen i claude.ai Design (ritytan "Version 3"). Allt ligger
   under .sp-start2 med egna s2-klasser. Version 1:s regler i global.css
   §30–32b rörs aldrig härifrån. Heron är v1:s frysta sp-hp-hero-stil.
   Brytpunkter: 1000 px (surfplatta) och 700 px (mobil), som i skissen.
   ========================================================================== */

/* === 1. GRUND: typsnitt, återställning, layout === */
/* Figtree (ägarbeslut 2026-11-03): renderas skarpare än Proxima Nova i små
   fetstilta texter på datorskärmar, likvärdigt i mobilen. Egen kopia (OFL),
   ingen Google-förfrågan. Variabel vikt 400–600, latin (å, ä, ö ingår). */
@font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('../fonts/figtree-latin.woff2') format('woff2');
}

/* Heron (v1:s stil) och det inbäddade quizet har egna Proxima-regler.
   Montserrat-texterna (etiketten överst, receptkortens titlar) behåller sitt
   typsnitt som i Version 1 (v5.991.5). */
.sp-start2 :is(.sp-hp-hero, .sp-hp-quiz-embed) :is(p, li, span, a, div, button, label, small):not(h1 *, h2 *, h3 *, .sp-hp-hero-eyebrow, .sp-hp-hero-eyebrow *, .sp-hp-hv-title, .sp-hp-hv-title *, .sp-cta-btn, .sp-cta-btn *) {
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Uteslutningen ovan räcker inte: grundregeln .sp-start2 p (§1) ger
   etikettens p Figtree, och titlarna ärver från roten. Sätts därför
   uttryckligen till Version 1:s Montserrat (v5.991.6). */
.sp-start2 .sp-hp-hero :is(.sp-hp-hero-eyebrow, .sp-hp-hero-eyebrow span, .sp-hp-hv-title) {
    font-family: 'Montserrat', sans-serif !important;
}

/* Brickorna (AIP/Paleo på korten, remsans piller) var Proxima Nova Semibold,
   ett eget fetare typsnitt med vikten 400. I Figtree blir 400 tunnare, så de
   får 600 för samma tyngd som i Version 1 (v5.991.5). */
.sp-start2 .sp-hp-hero :is(.sp-hp-hv-badge, .sp-hp-hv-strip-pill) {
    font-weight: 600 !important;
}

/* Köpknappen (.sp-cta-btn) följer sajten (Montserrat 700, global stil):
   samma knapp överallt från startsidan till programsidan och kassan
   (ägaren 2026-11-03, v5.991.7). Utesluten från Figtree-regeln ovan. */

.sp-start2 {
    --s2-gron: #3D5F42;
    --s2-gron-mork: #2F4A33;
    --s2-ljusgron: #EAF0E5;
    --s2-text: #4D524D;
    --s2-rubrik: #2c2c2c;
    --s2-gra-text: #6b6558;
    --s2-linje: #e3ddd1;
    --s2-yta-gra: #FAF9F6;
    color: var(--s2-text);
    -webkit-font-smoothing: antialiased;
}

.sp-start2,
.sp-start2 p,
.sp-start2 li {
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.sp-start2 h2,
.sp-start2 h3 {
    margin: 0;
    font-family: 'Montserrat', 'Figtree', sans-serif !important;
    font-weight: 600;
    color: var(--s2-rubrik);
    letter-spacing: -0.01em;
    text-transform: none;
}

/* :where() håller återställningen svag, så egna klasser och inbäddade
   moduler (quizet) vinner med sina marginaler. */
.sp-start2 :where(.s2-band, .s2-press) p {
    margin: 0;
}

.sp-start2 :where(.s2-band) :where(ol, ul):not(.sp-quiz-wrap *) {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-start2 .s2-in {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    box-sizing: border-box;
}

.sp-start2 .s2-band {
    padding: 104px 0;
    background: #fff;
}

.sp-start2 .s2-band--gra {
    background: var(--s2-yta-gra);
}

.sp-start2 .s2-stapel {
    display: flex;
    flex-direction: column;
}

.sp-start2 .s2-stapel--32 { gap: 32px; }
.sp-start2 .s2-stapel--48 { gap: 48px; }

.sp-start2 .s2-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Mjuk skrollning till ankarlänkarna (Välj hur du vill börja, quizet). */
@media (prefers-reduced-motion: no-preference) {
    html:has(.sp-start2) {
        scroll-behavior: smooth;
    }
}

/* === 2. SEKTIONSHUVUD, TEXTER, LÄNKAR, BRICKOR === */
.sp-start2 .s2-huvud {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 720px;
}

.sp-start2 .s2-huvud--center {
    align-items: center;
    margin: 0 auto;
    text-align: center;
}

.sp-start2 .s2-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--s2-gron);
    /* Aldrig två rader: Safari på iPhone bröt "Vad du kan förvänta dig" före
       "dig" (2026-11-03). Längsta etiketten är 248 px, minsta mobilen ger 273. */
    white-space: nowrap;
}

.sp-start2 .s2-kicker::before {
    content: "";
    flex: 0 0 24px;
    height: 2px;
    border-radius: 2px;
    background: #7A9E4E;
}

.sp-start2 .s2-h2 {
    font-size: 32px;
    line-height: 1.25;
}

.sp-start2 .s2-lead {
    font-size: 19px;
    line-height: 1.55;
    color: var(--s2-text);
}

.sp-start2 .s2-not {
    font-size: 15px;
    line-height: 1.5;
    color: var(--s2-gra-text);
}

/* Fristående textlänk med pil. Höjden 44 px ger en träffyta som räcker även
   på mobil utan att länken ser större ut. */
.sp-start2 .s2-lank {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--s2-gron);
    text-decoration: none;
}

.sp-start2 .s2-pil {
    flex: 0 0 auto;
}

@media (hover: hover) {
    .sp-start2 .s2-lank:hover {
        color: var(--s2-gron-mork);
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

.sp-start2 a:focus-visible {
    outline: 2px solid var(--s2-gron);
    outline-offset: 3px;
    border-radius: 6px;
}

.sp-start2 .s2-chip {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #F4F1EA;
    color: var(--s2-gra-text);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.sp-start2 .s2-chip--aip {
    background: rgba(61, 95, 66, 0.10);
    color: var(--s2-gron);
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
}

.sp-start2 .s2-chip--paleo {
    background: #F3E9DA;
    color: #7A5A2B;
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
}

/* === 3. HERON (v1:s stil; bara quizlänken är ny) === */
.sp-start2 .s2-hero-quiz {
    margin-top: 10px;
}

/* Pressraden hör till heron (samma färg), så heronas egen luft nedtill
   minskas: loggorna syns i första vyn på en vanlig datorskärm och blocket
   får inget tomt glapp (ägaren 2026-11-03, v5.991.9). */
.sp-start2 .sp-hp-hero.sp-hp-hero {
    padding-bottom: 48px;
}

/* === 4. PRESSRADEN === */
/* Pressraden i heronas färg, som en del av första blocket. Därefter
   växlar sektionerna vitt/ljust så att Vanliga frågor blir vit och
   avslutningen får sin egen tonade färg (ägaren 2026-11-03, v5.991.8). */
.sp-start2 .s2-press {
    padding: 36px 0 40px;
    background: #F2F2EF;
}

.sp-start2 .s2-press-etikett {
    margin: 0 0 18px;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    color: #6b6b6b;
}

.sp-start2 .s2-press-rad {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px 44px;
}

.sp-start2 .s2-press-rad img {
    display: block;
    width: auto;
    max-width: 100%;
    opacity: 0.62;
    filter: grayscale(1);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

@media (hover: hover) {
    .sp-start2 .s2-press-rad img:hover {
        opacity: 1;
        filter: none;
    }
}

/* === 5. SÅ KAN DIN RESA SE UT === */
.sp-start2 .s2-tl {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* Linjen genom siffrornas mitt: illustration 130 + 18 marginal + 8 gap + 23. */
.sp-start2 .s2-tl::before {
    content: "";
    position: absolute;
    top: 178px;
    left: 16.66%;
    right: 16.66%;
    height: 2px;
    background: #d9e5d6;
}

.sp-start2 .s2-tl-steg {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    text-align: center;
}

.sp-start2 .s2-tl-ill {
    display: block;
    width: 150px;
    height: 130px;
    margin-bottom: 18px;
}

.sp-start2 .s2-tl-nr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 12px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--s2-ljusgron);
    border: 1.5px solid #A9C48F;
    box-shadow: 0 0 0 8px #fff;
    color: var(--s2-gron);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 17px;
}

.sp-start2 .s2-tl-titel {
    font-size: 21px;
    line-height: 1.3;
}

.sp-start2 .s2-tl-tid {
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--s2-gron);
}

.sp-start2 .s2-tl-text {
    max-width: 320px;
    font-size: 17px;
    line-height: 1.6;
    text-wrap: pretty;
}

.sp-start2 .s2-tl-fot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

/* === 6. VÄLJ HUR DU VILL BÖRJA === */
.sp-start2 .s2-program {
    overflow-x: clip;
    scroll-margin-top: 24px;
}

.sp-start2 .s2-g-prog {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 48px;
    align-items: center;
}

.sp-start2 .s2-p3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--s2-linje);
    border-bottom: 1px solid var(--s2-linje);
}

.sp-start2 .s2-p3-kol {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 26px 22px 20px;
}

.sp-start2 .s2-p3-kol + .s2-p3-kol {
    border-left: 1px solid var(--s2-linje);
}

.sp-start2 .s2-p3-kol:first-child { padding-left: 0; }
.sp-start2 .s2-p3-kol:last-child { padding-right: 0; }

.sp-start2 .s2-p3-topp {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sp-start2 .s2-p3-meta {
    font-size: 15px;
    color: var(--s2-gra-text);
}

.sp-start2 .s2-p3-namn {
    font-size: 19px;
    line-height: 1.3;
}

.sp-start2 .s2-p3-text {
    font-size: 16px;
    line-height: 1.55;
}

.sp-start2 .s2-p3-lank {
    margin-top: auto;
}

.sp-start2 .s2-p3-quiz {
    font-size: 17px;
    line-height: 1.55;
}

.sp-start2 .s2-p3-quiz a {
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
    color: var(--s2-gron);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Telefonerna. Den främre ligger i flödet; de bakre är absolut placerade
   kring den, förskjutna med --dx, vridna med --rot och nedskalade. */
.sp-start2 .s2-tel-yta {
    position: relative;
    left: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
}

.sp-start2 .s2-tel-yta::before {
    content: "";
    position: absolute;
    left: -15%;
    right: -20%;
    top: 16%;
    bottom: 16%;
    z-index: 0;
    border-radius: 48% 52% 46% 54% / 56% 44% 56% 44%;
    background: var(--s2-ljusgron);
}

.sp-start2 .s2-tel {
    position: relative;
    width: 196px;
    aspect-ratio: 376 / 780;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 33px;
    background: #1f2420;
    box-shadow: 0 30px 60px -30px rgba(31, 36, 32, 0.55);
}

.sp-start2 .s2-tel-fram {
    z-index: 3;
}

.sp-start2 .s2-tel-foto {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 26px;
}

.sp-start2 .s2-tel-notch {
    position: absolute;
    top: 14px;
    left: 50%;
    z-index: 2;
    width: 70px;
    height: 18px;
    margin-left: -35px;
    border-radius: 12px;
    background: #1f2420;
}

.sp-start2 .s2-tel-bak {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    margin: 0;
    transform: translate(-50%, -50%) translateX(var(--dx)) rotate(var(--rot)) scale(0.84);
    box-shadow: 0 24px 44px -26px rgba(31, 36, 32, 0.5);
}

.sp-start2 .s2-tel-v { --dx: -126px; --rot: -5deg; }
.sp-start2 .s2-tel-h { --dx: 126px; --rot: 5deg; }

.sp-start2 .s2-tel-skarm {
    position: absolute;
    inset: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 26px;
    background: #fff;
    color: var(--s2-rubrik);
}

.sp-start2 .s2-tel-skarm-in {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
}

.sp-start2 .s2-tel-skarm-in--lista {
    padding-top: 38px;
}

.sp-start2 .s2-ts-bild {
    display: block;
    width: 100%;
    height: 38%;
    object-fit: cover;
}

.sp-start2 .s2-ts-chips {
    display: flex;
    gap: 6px;
}

.sp-start2 .s2-ts-chips .s2-chip {
    height: 18px;
    padding: 0 7px;
    font-size: 9px;
}

.sp-start2 .s2-ts-titel {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 1.25;
}

.sp-start2 .s2-ts-sub {
    font-size: 10px;
    color: var(--s2-gra-text);
}

.sp-start2 .s2-ts-etikett {
    margin-top: 5px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 8px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--s2-gron);
}

.sp-start2 .s2-ts-rad {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 4px 0;
    border-bottom: 1px solid #f0ece4;
    font-size: 10px;
    white-space: nowrap;
}

.sp-start2 .s2-ts-ingr {
    font-size: 10px;
}

.sp-start2 .s2-ts-box {
    flex: 0 0 11px;
    height: 11px;
    box-sizing: border-box;
    border-radius: 3px;
    border: 1.5px solid #c9c2b4;
}

.sp-start2 .s2-ts-klar {
    color: #9a9488;
    text-decoration: line-through;
}

.sp-start2 .s2-ts-klar .s2-ts-box {
    background: #7A9E4E;
    border-color: #7A9E4E;
}

/* === 7. TVÅ SPALTER, KANTKNAPP, BOCKLISTA (delas av sektionerna nedan) === */
.sp-start2 .s2-g-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center;
}

.sp-start2 .s2-g-split--ensam {
    grid-template-columns: minmax(0, 720px);
}

.sp-start2 .s2-knapp-kant {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 22px;
    box-sizing: border-box;
    border-radius: 999px;
    border: 1.5px solid var(--s2-gron);
    color: var(--s2-gron);
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.2s ease;
}

@media (hover: hover) {
    /* Mjuk hovring (ägaren 2026-11-03): ljusgrön yta, kant och text kvar i
       mörkgrönt. Ingen helfylld mörkgrön yta. */
    .sp-start2 .s2-knapp-kant:hover {
        background: var(--s2-ljusgron);
        color: var(--s2-gron);
    }
}

.sp-start2 .s2-bocklista {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 6px !important;
    font-size: 17px;
    line-height: 1.5;
}

.sp-start2 .s2-bocklista li {
    display: flex;
    gap: 12px;
}

.sp-start2 .s2-bock {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    height: 26px;
    margin-top: 1px;
    border-radius: 50%;
    background: rgba(61, 95, 66, 0.12);
    color: var(--s2-gron);
}

.sp-start2 .s2-chip--kant {
    background: #fff;
    border: 1px solid #e7e1d4;
}

/* === 8. VECKOMENYERNA === */
.sp-start2 .s2-vm-text {
    gap: 18px;
}

.sp-start2 .s2-vm-knapp {
    margin-top: 10px !important;
}

.sp-start2 .s2-vm-kort {
    padding: 24px;
    background: #fff;
    border: 1px solid #ece6db;
    border-radius: 18px;
}

.sp-start2 .s2-vm-kort-topp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.sp-start2 .s2-vm-kort-titel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: var(--s2-rubrik);
}

.sp-start2 .s2-vm-kort-dag {
    font-family: 'Figtree', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: var(--s2-gra-text);
}

.sp-start2 .s2-vm-flikar {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
}

/* Dagarna är flikar (v5.991.16): vald dag markerad, de andra grå text utan
   ram som tonas vid hovring. Knappens egna stilar från temat nollställs. */
.sp-start2 .s2-vm-flik {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 40px;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    font-family: 'Figtree', sans-serif;
    font-weight: 500;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    color: var(--s2-gra-text);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.15s ease;
}

.sp-start2 .s2-vm-flik:disabled {
    color: #b9b4aa;
    cursor: default;
}

.sp-start2 .s2-vm-flik:focus {
    outline: none;
}

.sp-start2 .s2-vm-flik:focus-visible {
    outline: 2px solid var(--s2-gron);
    outline-offset: 2px;
}

@media (hover: hover) {
    .sp-start2 .s2-vm-flik:not(.is-aktiv):not(:disabled):hover {
        background: #f3f5ef;
        color: var(--s2-rubrik);
    }
}

/* Vald dag i ljusgrönt med mellangrön kant (v5.991.15), som vald flik i
   medlemmarnas veckomeny och på Mina sidor; ingen helfylld mörkgrön. */
.sp-start2 .s2-vm-flik.is-aktiv {
    background: var(--s2-ljusgron);
    border-color: #9dbea1;
    color: #2e4a32;
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
}

.sp-start2 .s2-vm-maltider {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sp-start2 .s2-vm-maltider[hidden] {
    display: none;
}

/* Måltidsraden länkar till veckomenysidan (v5.991.16). */
.sp-start2 .s2-vm-maltid {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    border: 1px solid #ece6db;
    border-radius: 14px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.sp-start2 .s2-vm-maltid:focus-visible {
    outline: 2px solid var(--s2-gron);
    outline-offset: 2px;
}

@media (hover: hover) {
    .sp-start2 .s2-vm-maltid:hover {
        border-color: #9dbea1;
    }
}

.sp-start2 .s2-vm-maltid img {
    flex: 0 0 76px;
    width: 76px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
}

.sp-start2 .s2-vm-maltid-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sp-start2 .s2-vm-etikett {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--s2-gron);
}

.sp-start2 .s2-vm-ratt {
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.35;
    color: var(--s2-rubrik);
}

/* === 9. QUIZET (quizmodulens egen stil, .sp-hp-quiz-embed i quiz.css §11) === */
.sp-start2 .s2-quiz {
    scroll-margin-top: 24px;
}

/* Läsbara storlekar (v5.991.17): quiz.css §11 gör quizet till en kompakt
   miniwidget med 13 px svar, för litet för målgruppen och mindre än sidans
   övriga text. Bara på Version 2; quizsidan och v1 rörs inte. Mobil i §22. */
.sp-start2 .s2-quiz-kort .sp-quiz-progress-text {
    font-size: 13px;
}

.sp-start2 .s2-quiz-kort .sp-quiz-question {
    font-size: 20px;
    line-height: 1.3;
}

.sp-start2 .s2-quiz-kort .sp-quiz-hint {
    font-size: 14px;
}

.sp-start2 .s2-quiz-kort .sp-quiz-answer-card {
    padding: 14px 16px;
    gap: 14px;
    font-size: 16px;
}

.sp-start2 .s2-quiz-kort .sp-quiz-answer-label {
    line-height: 1.35;
}

.sp-start2 .s2-quiz-kort .sp-quiz-answer-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
}

.sp-start2 .s2-quiz-kort .sp-quiz-answer-icon .sp-quiz-icon,
.sp-start2 .s2-quiz-kort .sp-quiz-answer-icon .sp-quiz-icon svg {
    width: 18px;
    height: 18px;
}

.sp-start2 .s2-quiz-kort .sp-quiz-continue-btn {
    font-size: 16px;
}

.sp-start2 .s2-quiz-kort .sp-quiz-loader-text {
    font-size: 16px;
}

/* Resultatet */
.sp-start2 .s2-quiz-kort .sp-quiz-result-badge {
    font-size: 12px;
}

.sp-start2 .s2-quiz-kort .sp-quiz-result-title {
    font-size: 24px;
}

.sp-start2 .s2-quiz-kort .sp-quiz-result-subtitle,
.sp-start2 .s2-quiz-kort .sp-quiz-speglar-lista li,
.sp-start2 .s2-quiz-kort .sp-quiz-program-desc {
    font-size: 16px;
}

.sp-start2 .s2-quiz-kort .sp-quiz-program-name {
    font-size: 19px;
}

.sp-start2 .s2-quiz-kort .sp-quiz-program-reason,
.sp-start2 .s2-quiz-kort .sp-quiz-lead-capture p {
    font-size: 14px;
}

.sp-start2 .s2-quiz-kort .sp-quiz-cta-primary,
.sp-start2 .s2-quiz-kort .sp-quiz-cta-secondary,
.sp-start2 .s2-quiz-kort .sp-quiz-lead-input {
    font-size: 16px;
}

.sp-start2 .s2-quiz-kort .sp-quiz-lead-capture h3 {
    font-size: 17px;
}

.sp-start2 .s2-quiz-kort .sp-quiz-lead-btn,
.sp-start2 .s2-quiz-kort .sp-quiz-retake-btn {
    font-size: 15px;
}

.sp-start2 .s2-quiz-kort.sp-hp-quiz-embed {
    border: 1px solid #ece6db;
    border-radius: 18px;
    box-shadow: 0 20px 44px -28px rgba(70, 58, 44, 0.35);
}

/* === 10. AIP ELLER PALEO === */
.sp-start2 .s2-k2-stapel {
    gap: 36px;
}

.sp-start2 .s2-k2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--s2-linje);
    border-bottom: 1px solid var(--s2-linje);
}

.sp-start2 .s2-k2-kol {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 32px 40px 24px 0;
}

.sp-start2 .s2-k2-kol + .s2-k2-kol {
    padding: 32px 0 24px 40px;
    border-left: 1px solid var(--s2-linje);
}

.sp-start2 .s2-k2-hd {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: -12px;
}

.sp-start2 .s2-k2-hd-txt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.sp-start2 .s2-k2-ill {
    display: block;
    flex: 0 0 auto;
    width: 120px;
    height: 105px;
}

.sp-start2 .s2-k2-titel {
    font-size: 24px;
    line-height: 1.3;
}

.sp-start2 .s2-k2-for {
    font-size: 17px;
    line-height: 1.55;
    color: var(--s2-rubrik);
}

.sp-start2 .s2-k2-text {
    width: 100%;
    padding-top: 14px;
    border-top: 1px solid #ece6db;
    font-size: 17px;
    line-height: 1.65;
}

.sp-start2 .s2-k2-lank {
    margin-top: auto;
}

.sp-start2 .s2-k2-studier {
    max-width: 760px;
    font-size: 17px;
    line-height: 1.65;
}

.sp-start2 .s2-k2-studier a {
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
    color: var(--s2-gron);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* === 11. HJÄLPKLASSER: mobil/dator, huvudrad, mellanrum === */
.sp-start2 .s2-bara-mobil {
    display: none !important;
}

.sp-start2 .s2-stapel--28 { gap: 28px; }
.sp-start2 .s2-stapel--40 { gap: 40px; }

/* Rubrik till vänster, "Se alla …" i nederkant till höger. */
.sp-start2 .s2-huvudrad {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
}

/* === 12. VAD VÅRA MEDLEMMAR SÄGER === */
.sp-start2 .s2-g3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.sp-start2 .s2-rost {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 30px;
    background: #fff;
    border: 1px solid #ece6db;
    border-radius: 18px;
}

.sp-start2 .s2-rost-tecken {
    display: block;
    height: 30px;
    margin: -6px 0 -10px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 60px;
    line-height: 1;
    color: #7A9E4E;
}

/* Temat stylar alla blockquote (grönt streck, kursiv, bakgrund) med högre
   specificitet, därav !important här. */
.sp-start2 .s2-rost-citat {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    font-family: 'Figtree', sans-serif !important;
    font-style: normal !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: var(--s2-rubrik) !important;
    quotes: none;
}

.sp-start2 .s2-rost-citat::before,
.sp-start2 .s2-rost-citat::after {
    content: none;
}

.sp-start2 .s2-rost-fot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.sp-start2 .s2-rost-namn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: var(--s2-rubrik);
}

.sp-start2 .s2-rost-namn::before {
    content: "";
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: #7A9E4E;
}

.sp-start2 .s2-rost-fotrad {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

/* === 13. NYTT I RECEPTBANKEN === */
.sp-start2 .s2-filterrad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: -8px;
}

.sp-start2 .s2-filterrad-text {
    font-size: 16px;
    color: var(--s2-gra-text);
}

.sp-start2 .s2-filterlista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Etiketter, inte knappar: platt ton utan kant så de inte ser klickbara ut. */
.sp-start2 .s2-filteretikett {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background: #EFECE4;
    color: #4a463d;
    font-size: 15px;
}

.sp-start2 .s2-g-rec {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.sp-start2 .s2-rec {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ece6db;
    border-radius: 18px;
    color: inherit;
    text-decoration: none;
}

.sp-start2 .s2-rec img {
    display: block;
    width: 100%;
    height: 150px;
    object-fit: cover;
    object-position: 50% 55%;
}

.sp-start2 .s2-rec-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 16px;
}

.sp-start2 .s2-rec-kost {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sp-start2 .s2-rec-medlem {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 7px;
    box-sizing: border-box;
    border: 1px solid #d9d5ce;
    border-radius: 5px;
    background: #fff;
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--s2-gra-text);
}

.sp-start2 .s2-rec-titel {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.35;
    color: var(--s2-rubrik);
}

@media (hover: hover) {
    .sp-start2 .s2-rec,
    .sp-start2 .s2-art {
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .sp-start2 .s2-rec:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px -14px rgba(70, 58, 44, 0.28);
        border-color: #dcd4c4;
    }

    .sp-start2 .s2-art:hover .s2-art-titel {
        color: var(--s2-gron);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-start2 .s2-rec:hover {
        transform: none;
    }
}

/* === 14. CECILIA OCH BOKEN === */
.sp-start2 .s2-g-cecilia {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 72px;
    align-items: center;
}

.sp-start2 .s2-cecilia-foto {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 30%;
    border-radius: 22px;
}

.sp-start2 .s2-cecilia-text {
    gap: 18px;
}

.sp-start2 .s2-cecilia-titel {
    margin-top: -8px !important;
    font-size: 16px;
    color: var(--s2-gra-text);
}

.sp-start2 .s2-bok {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid #ece6db;
    border-radius: 18px;
}

.sp-start2 .s2-bok img {
    flex: 0 0 84px;
    width: 84px;
    height: auto;
    mix-blend-mode: multiply;
}

.sp-start2 .s2-bok-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.sp-start2 .s2-bok-etikett {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--s2-gron);
}

.sp-start2 .s2-bok-titel {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--s2-rubrik);
}

.sp-start2 .s2-bok-besk {
    font-size: 15px;
    line-height: 1.5;
}

/* === 15. AIP-SKOLAN === */
.sp-start2 .s2-g-skola {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: center;
}

.sp-start2 .s2-skola-text {
    gap: 16px;
}

.sp-start2 .s2-skola-knapp {
    margin-top: 8px !important;
}

.sp-start2 .s2-skola-toc {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    column-gap: 40px;
}

.sp-start2 .s2-skola-toc li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid #ece6db;
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--s2-rubrik);
}

.sp-start2 .s2-skola-nr {
    flex: 0 0 28px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #7A9E4E;
}

.sp-start2 .s2-skola-fler {
    margin-top: 12px !important;
    font-size: 16px;
    color: var(--s2-gra-text);
}

/* === 16. SENASTE ARTIKLARNA === */
.sp-start2 .s2-artiklar {
    border-bottom: 1px solid #ece6db;
}

.sp-start2 .s2-art {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) 28px;
    gap: 24px;
    align-items: center;
    padding: 22px 0;
    border-top: 1px solid #ece6db;
    color: var(--s2-gron);
    text-decoration: none;
}

.sp-start2 .s2-art img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 10px;
}

.sp-start2 .s2-art-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-start2 .s2-art-kat {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--s2-gron);
}

.sp-start2 .s2-art-titel {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    color: var(--s2-rubrik);
    transition: color 0.2s ease;
}

/* === 17. VANLIGA FRÅGOR === */
.sp-start2 .s2-g-faq {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: 72px;
    align-items: start;
}

.sp-start2 .s2-faq-vanster {
    gap: 20px;
}

.sp-start2 .s2-faq-lista {
    border-top: 1px solid #ece6db;
}

.sp-start2 .s2-faq {
    border-bottom: 1px solid #ece6db;
}

.sp-start2 .s2-faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 64px;
    padding: 8px 0;
    box-sizing: border-box;
    list-style: none;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.4;
    color: var(--s2-rubrik);
}

.sp-start2 .s2-faq summary::-webkit-details-marker {
    display: none;
}

.sp-start2 .s2-faq summary:focus-visible {
    outline: 2px solid var(--s2-gron);
    outline-offset: 2px;
    border-radius: 6px;
}

.sp-start2 .s2-faq-ikon {
    position: relative;
    flex: 0 0 24px;
    height: 24px;
}

.sp-start2 .s2-faq-ikon::before,
.sp-start2 .s2-faq-ikon::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 11px;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--s2-gron);
    transition: transform 0.2s ease;
}

.sp-start2 .s2-faq-ikon::after {
    transform: rotate(90deg);
}

.sp-start2 .s2-faq[open] .s2-faq-ikon::after {
    transform: rotate(0deg);
}

.sp-start2 .s2-faq p {
    padding: 0 0 22px;
    font-size: 17px;
    line-height: 1.6;
}

.sp-start2 .s2-faq p a {
    color: var(--s2-gron);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sp-start2 .s2-kontaktkort {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px;
    background: #fff;
    border: 1px solid #ece6db;
    border-radius: 18px;
}

.sp-start2 .s2-kontaktkort-rubrik {
    font-size: 18px;
}

.sp-start2 .s2-kontaktkort p {
    font-size: 16px;
    line-height: 1.6;
}

/* === 18. AVSLUT === */
/* Samma ljusa ton som de andra ljusa sektionerna (v5.991.10); heronas
   gråare ton hörde inte hemma längst ner ovanför sidfotens gröna. */
.sp-start2 .s2-avslut {
    padding: 92px 0 116px; /* optisk mitt: lite mer luft under (v5.991.11) */
    background: var(--s2-yta-gra);
}

.sp-start2 .s2-avslut-in {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: 720px;
    text-align: center;
}

.sp-start2 .s2-avslut-ill {
    display: block;
    width: 150px;
    height: 131px;
    margin-bottom: 2px;
}

.sp-start2 .s2-avslut-rubrik {
    font-size: 34px;
    line-height: 1.2;
}

.sp-start2 .s2-avslut .sp-cta-btn {
    margin-top: 8px;
}

.sp-start2 .s2-avslut-pris {
    font-size: 16px;
    line-height: 1.55;
}

.sp-start2 .s2-avslut-logga a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 16px;
    color: var(--s2-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* === 19. MJUK ENTRÉ (korten tonar in en gång när de kommer i bild) ===
   assets/js/version-2.js sätter .s2-anim på roten och .s2-vant på kort som
   ännu inte syns, och .s2-syns när de kommer i bild; klasserna tas bort när
   animationen är klar så hovringens egna övergångar gäller igen. Utan skript
   (WP Rocket skjuter upp det, fel, gammal webbläsare) syns allt som vanligt.
   Heron och quizet rörs inte. "Minska rörelse" = ingen animation alls.
   Egenskapen translate (inte transform) så hovringslyften inte krockar. */
@media screen and (prefers-reduced-motion: no-preference) {
    .sp-start2.s2-anim .s2-vant {
        opacity: 0;
        translate: 0 24px;
    }

    .sp-start2.s2-anim .s2-vant.s2-syns {
        opacity: 1;
        translate: 0 0;
        transition: opacity 0.6s ease-out, translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
        transition-delay: var(--s2-fordrojning, 0s);
    }
}

/* === 20. STORA SKÄRMAR (≥ 1440 px) ===
   Hela sidan växer i små steg med skärmen, upp till 10 % vid 1920 px, i samma
   proportioner (text, bredd, bilder, luft). Ägaren 2026-11-03: skissen kändes
   tydligare på breda skärmar. Stegen (2–3 %) märks inte; varje skärmstorlek
   får en passande storlek. Radlängderna blir desamma. zoom stöds i alla
   moderna webbläsare (Firefox sedan 126). Helt flytande skala (clamp per
   värde) byggs när landningssidorna får ett gemensamt system. */
@media (min-width: 1440px) {
    .sp-start2 { zoom: 1.03; }
}

@media (min-width: 1600px) {
    .sp-start2 { zoom: 1.06; }
}

@media (min-width: 1760px) {
    .sp-start2 { zoom: 1.08; }
}

@media (min-width: 1920px) {
    .sp-start2 { zoom: 1.1; }
}

/* === 21. SURFPLATTA (≤ 1000 px) === */
@media (max-width: 1000px) {
    .sp-start2 .s2-g-rec {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sp-start2 .s2-g-cecilia,
    .sp-start2 .s2-g-faq {
        gap: 48px;
    }

    .sp-start2 .s2-g-split {
        gap: 48px;
    }

    .sp-start2 .s2-g-prog {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .sp-start2 .s2-tel-yta {
        left: 0;
    }
}

/* === 22. MOBIL (≤ 700 px) === */
@media (max-width: 700px) {
    .sp-start2 .s2-in {
        padding: 0 16px;
    }

    .sp-start2 .s2-band {
        padding: 64px 0;
    }

    .sp-start2 .s2-h2 {
        font-size: 26px;
    }

    .sp-start2 .s2-lead {
        font-size: 16px;
    }

    .sp-start2 .s2-huvud--center {
        align-items: flex-start;
        margin: 0;
        text-align: left;
    }

    /* Press: 3 + 3 i rutnät, de minst kända dolda. */
    .sp-start2 .s2-press-rad {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-items: center;
        gap: 18px 12px;
    }

    .sp-start2 .s2-press-rad img {
        transform: scale(0.8);
    }

    .sp-start2 .s2-dold-mobil {
        display: none !important;
    }

    /* Tidslinjen lodrät: siffran i vänsterkanten i höjd med rubriken. */
    .sp-start2 .s2-tl {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .sp-start2 .s2-tl::before {
        top: 24px;
        bottom: 22px;
        left: 22px;
        right: auto;
        width: 2px;
        height: auto;
    }

    /* Siffra | rubrik + tid | liten illustration på en rad, texten under
       (v5.991.13): illustrationen på egen rad gav ett tomrum under rubriken. */
    .sp-start2 .s2-tl-steg {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr) 64px;
        column-gap: 8px;
        row-gap: 2px;
        align-items: center;
        padding: 0;
        text-align: left;
    }

    .sp-start2 .s2-tl-nr {
        grid-column: 1;
        grid-row: 1 / span 2;
        margin: 0 12px 0 0;
    }

    .sp-start2 .s2-tl-titel {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        font-size: 20px;
    }

    .sp-start2 .s2-tl-tid {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
    }

    .sp-start2 .s2-tl-ill {
        grid-column: 3;
        grid-row: 1 / span 2;
        width: 64px;
        height: 56px;
        margin: 0;
    }

    .sp-start2 .s2-tl-text {
        grid-column: 2 / -1;
        margin-top: 6px;
    }

    .sp-start2 .s2-tl-fot {
        align-items: flex-start;
        text-align: left;
    }

    /* Quizet: samma storlek som sidans brödtext (v5.991.17). */
    .sp-start2 .s2-quiz-kort .sp-quiz-question {
        font-size: 18px;
    }

    .sp-start2 .s2-quiz-kort .sp-quiz-answer-card {
        padding: 14px;
        font-size: 15px;
    }

    .sp-start2 .s2-quiz-kort .sp-quiz-result-title {
        font-size: 22px;
    }

    /* Programmen under varandra. */
    .sp-start2 .s2-p3 {
        grid-template-columns: minmax(0, 1fr);
        border-bottom: 0;
    }

    .sp-start2 .s2-p3-kol,
    .sp-start2 .s2-p3-kol + .s2-p3-kol {
        padding: 20px 0 12px;
        border-left: 0;
        border-bottom: 1px solid var(--s2-linje);
    }

    .sp-start2 .s2-p3-namn {
        font-size: 18px;
    }

    .sp-start2 .s2-tel-yta {
        padding: 8px 0 0;
    }

    .sp-start2 .s2-tel-yta::before {
        left: -2%;
        right: -2%;
        top: 10%;
        bottom: 10%;
    }

    .sp-start2 .s2-tel {
        width: 166px;
        padding: 7px;
        border-radius: 28px;
    }

    .sp-start2 .s2-tel-skarm {
        inset: 7px;
        border-radius: 22px;
    }

    .sp-start2 .s2-tel-foto {
        border-radius: 22px;
    }

    .sp-start2 .s2-tel-v { --dx: -88px; }
    .sp-start2 .s2-tel-h { --dx: 88px; }


    /* Två spalter blir en; veckomenyernas text före kortet. */
    .sp-start2 .s2-g-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    /* Mobil (v5.991.15): rubrik, punktlista, kortet och sist knappen. Textens
       delar blir egna rader i rutnätet så kortet kan ligga före knappen. */
    .sp-start2 .s2-g-split.s2-vm {
        gap: 18px;
    }

    .sp-start2 .s2-vm .s2-vm-text {
        display: contents;
    }

    .sp-start2 .s2-vm .s2-huvud { order: 1; }
    .sp-start2 .s2-vm .s2-bocklista { order: 2; }

    .sp-start2 .s2-vm-kort {
        order: 3;
        margin-top: 10px;
        padding: 20px;
    }

    /* Dagflikarna 44 px höga för fingret; sju i bredd ger smalare flikar. */
    .sp-start2 .s2-vm-flikar {
        gap: 4px;
    }

    .sp-start2 .s2-vm-flik {
        height: 44px;
    }

    .sp-start2 .s2-vm .s2-vm-knapp {
        order: 4;
        margin-top: 10px !important;
    }

    .sp-start2 .s2-bocklista {
        font-size: 16px;
    }

    .sp-start2 .s2-k2 {
        grid-template-columns: minmax(0, 1fr);
        border-bottom: 0;
    }

    .sp-start2 .s2-k2-kol,
    .sp-start2 .s2-k2-kol + .s2-k2-kol {
        padding: 26px 0;
        border-left: 0;
        border-bottom: 1px solid var(--s2-linje);
    }

    .sp-start2 .s2-k2-hd {
        gap: 12px;
        margin: 0 0 8px -8px;
    }

    .sp-start2 .s2-k2-ill {
        width: 88px;
        height: 77px;
    }

    .sp-start2 .s2-k2-titel {
        font-size: 21px;
    }

    .sp-start2 .s2-bara-mobil {
        display: block !important;
    }

    .sp-start2 a.s2-bara-mobil.s2-lank {
        display: inline-flex !important;
    }

    .sp-start2 .s2-huvudrad {
        display: block;
    }

    .sp-start2 .s2-g3 {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .sp-start2 .s2-rost {
        padding: 24px;
    }

    .sp-start2 .s2-rost-citat {
        font-size: 17px !important;
    }

    /* Filterraden (v5.991.18): "Filtrera bland annat på" på egen rad med lite
       mer luft till texten ovanför, etiketterna under. */
    .sp-start2 .s2-filterrad {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-top: -4px;
    }

    .sp-start2 .s2-filterrad-text {
        font-size: 15px;
    }

    /* Tre etiketter på en rad från 375 px. */
    .sp-start2 .s2-filteretikett {
        height: 28px;
        padding: 0 10px;
        font-size: 14px;
    }

    .sp-start2 .s2-filteretikett:nth-child(n+4) {
        display: none;
    }

    .sp-start2 .s2-rost-fotrad {
        align-items: flex-start;
        text-align: left;
    }

    /* Recepten i två kolumner; "Medlemsrecept" under brickan om det inte ryms. */
    .sp-start2 .s2-g-rec {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .sp-start2 .s2-rec img {
        height: 110px;
    }

    .sp-start2 .s2-rec-text {
        gap: 6px;
        padding: 10px 12px 12px;
    }

    .sp-start2 .s2-rec-kost {
        gap: 6px;
    }

    .sp-start2 .s2-rec-kost .s2-chip {
        height: 22px;
        padding: 0 8px;
        font-size: 12px;
    }

    .sp-start2 .s2-rec-medlem {
        padding: 0 5px;
        letter-spacing: 0.02em;
    }

    .sp-start2 .s2-rec-titel {
        font-size: 14px;
    }

    .sp-start2 .s2-g-cecilia,
    .sp-start2 .s2-g-skola,
    .sp-start2 .s2-g-faq {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    /* Kvadratisk bild i full bredd (v5.991.19): den smala stående bilden med
       luft på sidorna såg hemmabyggd ut. Beskärningen tar skåpen ovanför och
       lite av bänken, Cecilia är fortfarande utzoomad i köket. */
    .sp-start2 .s2-cecilia-bild.s2-bara-mobil {
        width: auto;
        margin: 4px 0 8px;
    }

    .sp-start2 .s2-cecilia-bild.s2-bara-mobil .s2-cecilia-foto {
        aspect-ratio: 1 / 1;
        object-position: 50% 70%;
    }

    /* Större omslag, kortare text och tajtare ram (v5.991.20): boken fyller
       drygt 80 % av rutans höjd i stället för 40 %. */
    .sp-start2 .s2-bok {
        gap: 14px;
        padding: 14px 16px;
    }

    .sp-start2 .s2-bok img {
        flex-basis: 96px;
        width: 96px;
    }

    .sp-start2 .s2-skola-toc {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-flow: row;
    }

    .sp-start2 .s2-skola-toc li {
        padding: 12px 0;
    }

    .sp-start2 .s2-skola-toc li:nth-child(n+6) {
        display: none;
    }

    .sp-start2 .s2-art {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 14px;
    }

    .sp-start2 .s2-art > .s2-pil {
        display: none;
    }

    .sp-start2 .s2-art-titel {
        font-size: 17px;
    }

    .sp-start2 .s2-faq summary {
        font-size: 16px;
    }

    .sp-start2 .s2-kontaktkort {
        padding: 20px;
        gap: 14px;
    }

    .sp-start2 .s2-avslut {
        padding: 56px 0 72px;
    }

    .sp-start2 .s2-avslut-rubrik {
        font-size: 28px;
    }

    .sp-start2 .s2-avslut-ill {
        width: 120px;
        height: 105px;
    }
}