/* ==========================================================================
   STARTPROGRAMMENS LANDNINGSSIDOR – VERSION 2 (landning-v2.php, v5.992.0)
   Laddas bara när Version 2 visas, efter startsidans version-2.css, som
   står för typsnitt, färger och delarna (.sp-start2 .s2-…). Här ligger bara
   det som är unikt för programsidan (prefix s2-pl).
   Bandrytm: hero (heronas grå), För vem vitt, Så fungerar grått, Maten vitt,
   Om AIP grått, Berättelser vitt, Frågor vitt med linje, Avslut ljust.
   ========================================================================== */

/* === 1. SIDAN === */
body.sp-pl2-page main.sp-fullwidth-page {
    padding: 0;
    background: #fff;
}

/* === 1b. PROGRAMMETS ACCENTFÄRG (v5.992.5) ===
   En färg per program ur startsidans brickfärger: AIP grönt, Paleo sand,
   Mjukstart salvia, IBS terrakotta. Syns i etikettens streck, formen bakom
   heronas bild, förloppsremsorna och brickan "Dag 1 av 28". AIP har samma
   värden som förut. Programmet väljer med 'accent' i landning-v2.php. */
.sp-start2.sp-pl2 {
    --s2-pl-accent: #7A9E4E;
    --s2-pl-accent-ljus: #EAF0E5;
    --s2-pl-accent-mellan: #C9DABB;
    --s2-pl-accent-mork: #2e4a32;
}

.sp-start2.s2-pl-accent--paleo {
    --s2-pl-accent: #B98B4E;
    --s2-pl-accent-ljus: #F5ECDD;
    --s2-pl-accent-mellan: #EAD3AE;
    --s2-pl-accent-mork: #6E5226;
}

.sp-start2.s2-pl-accent--mjukstart {
    --s2-pl-accent: #6F9C93;
    --s2-pl-accent-ljus: #E4EFEC;
    --s2-pl-accent-mellan: #C3DBD5;
    --s2-pl-accent-mork: #2F5249;
}

.sp-start2.s2-pl-accent--ibs {
    --s2-pl-accent: #C0846F;
    --s2-pl-accent-ljus: #F6E6DF;
    --s2-pl-accent-mellan: #EDC9BB;
    --s2-pl-accent-mork: #6F3F2F;
}

.sp-start2.sp-pl2 .s2-kicker::before {
    background: var(--s2-pl-accent);
}

/* Illustrationerna och listbockarna är gröna på alla programsidor
   (v5.992.42, ägaren: brunt på stora ytor läste som gammalt). Programmen
   skiljer sig i bildernas innehåll; accentfärgen bara i detaljerna ovan.
   Illustrationerna har klasserna .pl-yta, .pl-mellan-f, .pl-mellan-s och
   .pl-bock om ett program någon gång ska färga dem (variabeln
   --s2-pl-accent-mellan finns per program). */

/* === 2. HERON === */
.sp-start2 .s2-pl-hero {
    overflow-x: clip;
    padding: 72px 0 80px;
    background: #F2F2EF;
}

.sp-start2 .s2-pl-hero-g {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 56px;
    align-items: center;
}

.sp-start2 .s2-pl-hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    max-width: 600px;
}

.sp-start2 .s2-pl-h1 {
    margin: 0;
    font-family: 'Montserrat', 'Figtree', sans-serif !important;
    font-weight: 700;
    font-size: 46px;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--s2-rubrik);
}

.sp-start2 .s2-pl-hero .s2-lead {
    font-size: 19px;
}

.sp-start2 .s2-pl-hero-knapp {
    margin-top: 8px;
}

.sp-start2 .s2-pl-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;
}

/* Heronas dagkort (v5.992.3): en guidad dag i programmet, i kod. Ett
   sammanhållet kort på startsidans ljusgröna form. Förloppsremsan är samma
   som veckokortens, med första veckan påbörjad (dag 1 av 7). */
.sp-start2 .s2-pl-komp {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 32px 0;
}

.sp-start2 .s2-pl-komp::before {
    content: "";
    position: absolute;
    left: -8%;
    right: -8%;
    top: 4%;
    bottom: 4%;
    z-index: 0;
    border-radius: 48% 52% 46% 54% / 56% 44% 56% 44%;
    background: var(--s2-pl-accent-ljus);
}

/* Mjukare kort (v5.992.17): omslagsbild överst, innehållet i .s2-pl-dk-inne. */
.sp-start2 .s2-pl-dagkort {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ece6db;
    border-radius: 24px;
    box-shadow: 0 34px 64px -34px rgba(31, 36, 32, 0.4);
}

.sp-start2 .s2-pl-dk-foto img {
    display: block;
    width: 100%;
    height: 96px;
    object-fit: cover;
}

.sp-start2 .s2-pl-dk-inne {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px 18px;
}

/* Förhandsvariant: kortet i en surfplatta (&sp_pl2_dagkort=platta). */
.sp-start2 .s2-pl-platta {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 404px;
    box-sizing: border-box;
    padding: 12px;
    background: #1f2420;
    border-radius: 34px;
    box-shadow: 0 34px 64px -30px rgba(31, 36, 32, 0.55);
}

.sp-start2 .s2-pl-platta .s2-pl-dagkort {
    max-width: none;
    border: 0;
    border-radius: 22px;
    box-shadow: none;
}

.sp-start2 .s2-pl-dk-topp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.sp-start2 .s2-pl-dk-titel {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    gap: 2px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--s2-rubrik);
}

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

.sp-start2 .s2-pl-dk-bricka {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--s2-pl-accent-ljus);
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--s2-pl-accent-mork);
    white-space: nowrap;
}

.sp-start2 .s2-pl-komp-prick {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--s2-pl-accent);
}

.sp-start2 .s2-pl-dk-remsa > span {
    position: relative;
    overflow: hidden;
}

.sp-start2 .s2-pl-remsa .s2-pl-dk-fyllning {
    position: absolute;
    left: 0;
    top: 0;
    width: 14.3%;
    border-radius: 3px;
    background: var(--s2-pl-accent);
}

.sp-start2 .s2-pl-dk-etikett {
    margin-top: 2px !important;
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--s2-gron);
}

.sp-start2 .s2-pl-dk-rader {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: -4px;
}

/* Lugn checklista (v5.992.17): ljus yta i stället för ram, inga egna bilder. */
.sp-start2 .s2-pl-dk-rad {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #FAF9F6;
    border: 0;
    border-radius: 12px;
}

/* Nästa måltid (v5.992.19): samma rätt som omslagsbilden, lätt markerad. */
.sp-start2 .s2-pl-dk-rad.is-nasta {
    background: var(--s2-pl-accent-ljus);
}

.sp-start2 .s2-pl-dk-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    height: 22px;
    box-sizing: border-box;
    border: 1.5px solid #c9c2b4;
    border-radius: 6px;
    color: #fff;
}

.sp-start2 .s2-pl-dk-rad.is-klar .s2-pl-dk-box {
    background: var(--s2-pl-accent);
    border-color: var(--s2-pl-accent);
}

.sp-start2 .s2-pl-dk-rad img {
    flex: 0 0 64px;
    width: 64px;
    height: 48px;
    border-radius: 9px;
    object-fit: cover;
}

.sp-start2 .s2-pl-dk-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

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

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

.sp-start2 .s2-pl-dk-rad.is-klar .s2-pl-dk-ratt {
    color: var(--s2-gra-text);
}

.sp-start2 .s2-pl-dk-not {
    margin-top: 2px;
    font-size: 13px;
    color: var(--s2-gra-text);
}

.sp-start2 .s2-pl-dk-fot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Heronas illustration (standard sedan v5.992.20; har egen ljusgrön form,
   så komp-formen bakom stängs av). */
.sp-start2 .s2-pl-komp--ill {
    padding: 0;
}

.sp-start2 .s2-pl-komp--ill::before {
    display: none;
}

.sp-start2 .s2-pl-ill {
    display: block;
    width: 100%;
    max-width: 440px;
    height: auto;
    margin: 0 auto;
}

/* === 3. PASSAR DIG SOM === */
/* Vänsterställt i linje med heron (v5.992.9): rubrik, punkterna direkt
   efter (de fortsätter rubrikens mening) och hänvisningarna. */
.sp-start2 .s2-pl-smal {
    max-width: 760px;
}

.sp-start2 .s2-pl-for-vem {
    gap: 24px;
}

/* Växelmönster (v5.992.22): korgen till vänster, texten till höger, så
   sektionen inte upprepar herons text vänster / bild höger. */
.sp-start2 .s2-pl-for-vem-g {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 700px);
    gap: 64px;
    align-items: center;
}

.sp-start2 .s2-pl-for-vem-ill {
    order: -1;
}

/* Korgen mindre än heronas kalender (v5.992.32), en accent och inte en
   andra huvudbild; närmare texten. */
.sp-start2 .s2-pl-for-vem-ill .s2-pl-ill {
    max-width: 280px;
    margin: 0 48px 0 auto;
}

.sp-start2 .s2-pl-noter {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid #ece6db;
}

/* Hänvisningarna (v5.992.36): hela raden är länken. På dator en textrad
   med understruken länk, på mobil en tryckbar rad i en ljus ruta. */
.sp-start2 a.s2-pl-not {
    display: block;
    font-size: 17px;
    line-height: 1.55;
    color: var(--s2-text);
    text-decoration: none !important;
}

.sp-start2 a.s2-pl-not .s2-pl-not-pil {
    display: none;
}

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

.sp-start2 a.s2-pl-not .s2-pl-not-lank,
.sp-start2 .s2-pl-band-linje .s2-faq p a {
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
    color: var(--s2-gron);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* === 3b. VECKA FÖR VECKA (programsidans egen del, v5.992.1) ===
   Ett kort per vecka. Förloppsremsan (fyllda segment upp till veckan) är
   sidans kännetecken i stället för startsidans växter. */
.sp-start2 .s2-pl-fore {
    max-width: 720px;
    margin: -8px auto 0 !important;
    font-size: 17px;
    line-height: 1.55;
    text-align: center;
}

.sp-start2 .s2-pl-fore strong {
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
    color: var(--s2-rubrik);
}

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

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

.sp-start2 .s2-pl-vecka-topp {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

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

.sp-start2 .s2-pl-vecka-dagar {
    font-size: 14px;
    color: var(--s2-gra-text);
}

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

/* Fem veckor (Mjukstarten, v5.992.46): fem kort i rad på dator, remsan
   med fem delar. Surfplatta och mobil följer de vanliga reglerna nedan. */
.sp-start2 .s2-pl-veckor--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.sp-start2 .s2-pl-veckor--5 .s2-pl-vecka {
    padding: 22px 20px;
}

.sp-start2 .s2-pl-veckor--5 .s2-pl-remsa {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* Veckokortets listor (Mjukstarten, v5.992.51): kryss för det som plockas
   bort, bock för det du kan prova. Samma ikoner och färger som /vad-ar-aip/. */
.sp-start2 .s2-pl-vecka-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-start2 .s2-pl-vecka-rad {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--s2-text);
}

.sp-start2 .s2-pl-vecka-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    height: 24px;
    border-radius: 50%;
}

.sp-start2 .s2-pl-vecka-rad--ut .s2-pl-vecka-ikon {
    background: rgba(204, 102, 102, 0.12);
    color: #b85757;
}

.sp-start2 .s2-pl-vecka-rad--in .s2-pl-vecka-ikon {
    background: rgba(107, 142, 107, 0.14);
    color: #4f7350;
}

.sp-start2 .s2-pl-remsa span {
    height: 6px;
    border-radius: 3px;
    background: #ece6db;
}

.sp-start2 .s2-pl-remsa span.is-fylld {
    background: var(--s2-pl-accent);
}

.sp-start2 .s2-pl-vecka-titel {
    font-size: 20px;
    line-height: 1.3;
}

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

/* === 4. MATEN === */
/* Text och punkter till vänster, rätterna som liggande kort under varandra till höger. */
.sp-start2 .s2-pl-maten-g {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 72px;
    align-items: center;
}

.sp-start2 .s2-pl-maten-g .s2-huvud {
    margin-bottom: 28px;
}

.sp-start2 .s2-pl-maten-g .s2-bocklista {
    margin: 0;
}

/* Etiketten ovanför korten (v5.992.27): fri kursiv rad med en tunn
   handritad pil ner mot korten, som en anteckning i marginalen. Visar att
   rätterna är exempel utan bricka eller ram. */
.sp-start2 .s2-pl-ratter-etikett {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin: 0 0 12px 2px !important;
    font-family: 'Figtree', sans-serif !important;
    font-style: italic;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.3;
    color: var(--s2-pl-accent-mork);
}

.sp-start2 .s2-pl-ratter-pil {
    flex: 0 0 auto;
    color: var(--s2-pl-accent);
    transform: translateY(8px);
}

.sp-start2 .s2-pl-ratter {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.sp-start2 .s2-pl-ratter .s2-rec {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    align-items: center;
}

.sp-start2 .s2-pl-ratter .s2-rec img {
    height: 112px;
}

.sp-start2 .s2-pl-ratter .s2-rec-text {
    padding: 14px 20px;
}

/* === 4b. VÄGEN EFTER KICKSTARTEN (IBS, v5.992.55) ===
   Fyra steg på en rad med en tunn linje mellan siffrorna; sista steget är
   målet och ifyllt. Under varandra med linjen till vänster under 1000 px. */
.sp-start2 .s2-pl-vag {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-start2 .s2-pl-vag-steg {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
}

.sp-start2 .s2-pl-vag-steg:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 21px;
    left: 54px;
    right: -18px;
    height: 2px;
    border-radius: 1px;
    background: #ece6db;
}

.sp-start2 .s2-pl-vag-nr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
    box-sizing: border-box;
    border: 2px solid var(--s2-pl-accent);
    border-radius: 50%;
    background: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--s2-pl-accent-mork);
}

.sp-start2 .s2-pl-vag-steg.is-mal .s2-pl-vag-nr {
    background: var(--s2-pl-accent);
    color: #fff;
}

.sp-start2 .s2-pl-vag-titel {
    margin: 0;
    font-size: 19px;
    line-height: 1.3;
}

.sp-start2 .s2-pl-vag-tid {
    margin: 0 !important;
    font-size: 14px;
    color: var(--s2-gra-text);
}

.sp-start2 .s2-pl-vag-text {
    margin: 2px 0 0 !important;
    font-size: 16px;
    line-height: 1.55;
}

/* === 5. OM AIP === */
/* Ren textsektion (v5.992.30), vänsterställd i linje med övriga rubriker. */
.sp-start2 .s2-pl-om {
    max-width: 760px;
}

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

.sp-start2 .s2-pl-stycke {
    font-size: 18px;
    line-height: 1.65;
}

/* Faktakortet (v5.992.36): rekommendationen och avsändaren som två rader
   med ikon i ett vitt kort, så att löptexten inte står på grått. */
.sp-start2 .s2-pl-fakta {
    display: flex;
    flex-direction: column;
    margin: 8px 0 4px;
    padding: 6px 24px;
    background: #fff;
    border: 1px solid #ece6db;
    border-radius: 18px;
}

.sp-start2 .s2-pl-fakta-rad {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    padding: 18px 0;
}

.sp-start2 .s2-pl-fakta-rad + .s2-pl-fakta-rad {
    border-top: 1px solid #ece6db;
}

.sp-start2 .s2-pl-fakta-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--s2-pl-accent-ljus);
    color: var(--s2-pl-accent-mork);
}

.sp-start2 .s2-pl-fakta-rad p {
    margin: 0 !important;
    font-size: 16px;
    line-height: 1.55;
    color: var(--s2-text);
}

.sp-start2 .s2-pl-fakta-rad strong {
    font-family: 'Figtree', sans-serif;
    font-weight: 600;
    color: var(--s2-rubrik);
}

.sp-start2 .s2-pl-lankar {
    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
}

/* === 6. FRÅGOR === */
.sp-start2 .s2-pl-band-linje {
    border-top: 1px solid #ece6db;
}

.sp-start2 .s2-pl-viktigt {
    margin-top: 22px !important;
}

/* === 7. SURFPLATTA (≤ 1000 px) === */
@media (max-width: 1000px) {
    .sp-start2 .s2-pl-hero-g {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

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

    .sp-start2 .s2-pl-veckor {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sp-start2 .s2-pl-for-vem-g {
        grid-template-columns: minmax(0, 1fr);
    }

    .sp-start2 .s2-pl-for-vem-ill {
        display: none;
    }

    /* Vägen under varandra, linjen till vänster mellan siffrorna. */
    .sp-start2 .s2-pl-vag {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        max-width: 560px;
        margin: 0 auto;
    }

    .sp-start2 .s2-pl-vag-steg {
        padding: 0 0 26px 62px;
    }

    .sp-start2 .s2-pl-vag-steg:last-child {
        padding-bottom: 0;
    }

    .sp-start2 .s2-pl-vag-nr {
        position: absolute;
        top: -8px;
        left: 0;
        margin: 0;
    }

    .sp-start2 .s2-pl-vag-steg:not(:last-child)::after {
        top: 40px;
        bottom: 0;
        left: 21px;
        right: auto;
        width: 2px;
        height: auto;
    }
}

/* === 8. MOBIL (≤ 700 px) === */
@media (max-width: 700px) {
    /* Lika mycket luft överst som startsidans hero (v5.992.35), så att
       etiketten inte hamnar tätt under loggan. */
    .sp-start2 .s2-pl-hero {
        padding: 64px 0 48px;
    }

    .sp-start2 .s2-pl-h1 {
        font-size: 34px;
    }

    .sp-start2 .s2-pl-hero .s2-lead {
        font-size: 17px;
    }

    /* Hänvisningarna som tryckbara rader i en ljus ruta (v5.992.36). */
    .sp-start2 .s2-pl-noter {
        gap: 0;
        margin-top: 4px;
        padding: 4px 18px;
        border: 1px solid #ece6db;
        border-radius: 16px;
        background: #FAF9F6;
    }

    .sp-start2 a.s2-pl-not {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 12px;
        min-height: 44px;
        padding: 14px 0;
        font-size: 16px;
    }

    .sp-start2 a.s2-pl-not + a.s2-pl-not {
        border-top: 1px solid #ece6db;
    }

    .sp-start2 a.s2-pl-not .s2-pl-not-fraga {
        grid-column: 1;
        display: block;
        font-size: 14px;
        line-height: 1.4;
        color: var(--s2-gra-text);
    }

    .sp-start2 a.s2-pl-not .s2-pl-not-lank {
        grid-column: 1;
        display: block;
        margin-top: 2px;
        line-height: 1.35;
        text-decoration: none;
    }

    .sp-start2 a.s2-pl-not .s2-pl-not-pil {
        display: flex;
        grid-column: 2;
        grid-row: 1 / span 2;
        color: var(--s2-gron);
    }

    .sp-start2 .s2-pl-fakta {
        padding: 4px 18px;
    }

    .sp-start2 .s2-pl-fakta-rad {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 14px;
        padding: 16px 0;
    }

    .sp-start2 .s2-pl-fakta-ikon {
        width: 36px;
        height: 36px;
    }

    .sp-start2 .s2-pl-fakta-rad p {
        font-size: 15px;
    }

    /* Heronas illustration mindre i mobilen (v5.992.34), så att heron blir
       kortare och nästa sektion syns tidigare. */
    .sp-start2 .s2-pl-hero .s2-pl-komp--ill .s2-pl-ill {
        max-width: 280px;
    }

    /* Dagkortets mobilutfyllnad (20 px) gäller inte illustrationen, som har
       luft i sin egen form; tätare mellan texten och bilden. */
    .sp-start2 .s2-pl-hero .s2-pl-komp--ill {
        padding: 0;
    }

    .sp-start2 .s2-pl-hero-g {
        gap: 32px;
    }

    /* Dagkortet i full bredd, formen bakom smalare. */
    .sp-start2 .s2-pl-komp {
        padding: 20px 0;
    }

    .sp-start2 .s2-pl-komp::before {
        left: -4%;
        right: -4%;
    }

    .sp-start2 .s2-pl-dk-inne {
        padding: 16px;
    }

    .sp-start2 .s2-pl-dk-foto img {
        height: 96px;
    }

    /* Veckorna under varandra, texten vänster som resten av mobilen. */
    .sp-start2 .s2-pl-fore {
        margin: -8px 0 0 !important;
        font-size: 16px;
        text-align: left;
    }

    /* Veckorna under varandra (v5.992.7): korta kort, ingen svepning. */
    .sp-start2 .s2-pl-veckor {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .sp-start2 .s2-pl-vecka {
        gap: 10px;
        padding: 18px 20px;
    }

    .sp-start2 .s2-pl-vecka-titel {
        font-size: 18px;
    }

    /* Rätterna som rader: bild till vänster, titel till höger. */
    .sp-start2 .s2-pl-ratter {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .sp-start2 .s2-pl-ratter .s2-rec {
        display: grid;
        grid-template-columns: 116px minmax(0, 1fr);
        align-items: center;
    }

    .sp-start2 .s2-pl-ratter .s2-rec img {
        height: 100%;
        min-height: 96px;
    }

    .sp-start2 .s2-pl-ratter .s2-rec-text {
        padding: 10px 14px;
    }

    .sp-start2 .s2-pl-ratter .s2-rec-titel {
        font-size: 15px;
    }

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

    .sp-start2 .s2-pl-lankar {
        flex-direction: column;
    }

    .sp-start2 .s2-pl-vag {
        margin: 0;
    }
}