/* ========================================================================
   Startprogrammens landningssidor — [sp_program_landning] (v5.564.0)

   Egen fil, inte startprogram.css: den senare är medlemsvyns CSS och köas
   bara på programsidorna (sp_startprogram_renders). Landningssidan är
   publik och ska inte dra in hela medlemsvyn.

   Följer landningssidestandarden från /veckomenyer/: full-bleed band kant
   till kant, växelvis vitt och #f9f9f9 (INTE mallens #F0F2F2 — för mörk),
   96px sektionsluft på desktop och 56px på mobil, kortanatomi med #ece6db-
   kant och radie 16. Heron och slut-CTA kommer från de delade
   komponenterna (global.css §29 och §30) och stylas inte här.

   Sektioner:
     1. Sidan och banden
     2. Rubriker och brödtext
     3. Punktkort (fördelar + så kommer du i gång)
     4. Smakprov ur vecka 1
     5. Omdömen
     6. Mobil
   ======================================================================== */


/* === 1. SIDAN OCH BANDEN ============================================== */

/* Mallens padding nollas så banden går kant till kant. Samma mönster som
   sp-vml-page och sp-hp-page. */
body.sp-pl-page main.sp-fullwidth-page {
    padding: 0;
    background: #fff;
}

/* FOUC-skyddet: wrappern renderas med opacity:0 i HTML och tänds här
   (ux-conventions §1). */
.sp-pl {
    opacity: 1 !important;
    transition: opacity 0.15s ease;
}

.sp-pl-sektion {
    padding: 96px 20px;
    background: #fff;
}

/* Växelvis bakgrund, vitt/grått varannat band räknat uppifrån:
   intro(V) vad_ar(G) fordelar(V) sa_borjar_du(G) maten(V) omdomen(G)
   avslutning(V) slut(varmvitt). Rytmen måste räknas om när en sektion läggs
   till eller tas bort — annars hamnar två lika band intill varandra och
   luften mellan dem läser som ett tomt utrymme i stället för en gräns.
   Slut-CTA:n bär sin egen bakgrund. Rytmen är densamma för alla program:
   avslutsbandet finns alltid, och det är innehållet i det som varierar. */
.sp-pl-sektion--vad_ar,
.sp-pl-sektion--sa_borjar_du,
.sp-pl-sektion--omdomen {
    background: #f9f9f9;
}

/* Friskrivningen under omdömena: ska läsas, men inte konkurrera med citaten.
   Egen rad under listan, inte en fotnot i kanten. Explicit font enligt
   husregeln – ärv aldrig. */
.sp-pl-friskrivning {
    max-width: 720px;
    margin: 22px auto 0;
    font-family: 'Proxima Nova Regular', proxima_nova_regular, 'Proxima Nova', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #6b6558;
    text-align: center;
}

/* AVSLUTSBANDET – "Helt ny till …?", "Viktigt att veta", "Har du frågor".
   Tre fotnoter låg tidigare i var sitt band och tog 1 033 px för 663 tecken,
   mer höjd än sidans tyngsta sektion. Ett band med hårfina avdelare i
   stället, som den gamla Elementor-sidan hade det: läsaren ska kunna se på
   ytan att det här är upplysningar och inte säljargument.
   Bandet är lättare än de andra, därför mindre luft. */
.sp-pl-sektion--avslutning {
    padding: 80px 20px;
}

.sp-pl-avslut {
    max-width: 760px;
    margin: 0 auto;
}

.sp-pl-avslut__block + .sp-pl-avslut__block {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #ece6db;
}

/* BÅDA klasserna i selektorn: .sp-pl-rubrik definieras LÄNGRE NER i filen med
   samma vikt, och hade annars vunnit på ordningen och satt tillbaka 32px
   centrerat. Vänsterställt är avsiktligt – sidans övriga rubriker är
   centrerade, och skillnaden är det som gör blocken underordnade. */
.sp-pl-rubrik.sp-pl-avslut__rubrik {
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 600;
    text-align: left;
}

.sp-pl-text.sp-pl-avslut__text {
    max-width: none;
}

.sp-pl-text.sp-pl-avslut__text p {
    margin-bottom: 14px;
    font-size: 17px;
}

/* Avlastningsventilen ("Helt ny till …?") behåller brödtextens storlek –
   den ska läsas. De två upplysningarna under tonas ner. */
.sp-pl-avslut__block--viktigt .sp-pl-text.sp-pl-avslut__text p,
.sp-pl-avslut__block--fragor .sp-pl-text.sp-pl-avslut__text p {
    font-size: 16px;
    color: #6b6558;
}

/* Slutbandet bär sin egen luft, ram och bakgrund (.sp-lc i global.css §30)
   och ska gå kant till kant — därför nollas både sektionens padding och
   innerkolumnens maxbredd, annars klipps bandet till 860px. */
.sp-pl-sektion--slut_cta {
    padding: 0;
    background: none;
}

.sp-pl-sektion--slut_cta .sp-pl-inner {
    max-width: none;
}

.sp-pl-inner {
    max-width: 860px;
    margin: 0 auto;
}

/* Bredare kolumn där innehållet är kort i stället för löptext. */
.sp-pl-sektion--fordelar .sp-pl-inner,
.sp-pl-sektion--sa_borjar_du .sp-pl-inner,
.sp-pl-sektion--maten .sp-pl-inner,
.sp-pl-sektion--omdomen .sp-pl-inner {
    max-width: 1060px;
}


/* === 2. RUBRIKER OCH BRÖDTEXT ========================================= */

.sp-pl-rubrik {
    margin: 0 0 20px;
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    color: #2c2c2c;
    text-align: center;
}

.sp-pl-text {
    max-width: 760px;
    margin: 0 auto;
}

.sp-pl-text p {
    margin: 0 0 20px;
    font-family: 'Proxima Nova Regular', proxima_nova_regular, 'Proxima Nova', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: #4D524D;
}

.sp-pl-text p:last-child {
    margin-bottom: 0;
}

.sp-pl-text a {
    color: #3D5F42;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sp-pl-text a:hover,
.sp-pl-text a:focus {
    color: #2e4a32;
}

/* Sektioner som inleds med text före rubrikens lista. */
.sp-pl-sektion .sp-pl-text + .sp-pl-punkter,
.sp-pl-sektion .sp-pl-text + .sp-pl-smakprov,
.sp-pl-sektion .sp-pl-text + .sp-pl-omdomen {
    margin-top: 40px;
}


/* === 3. PUNKTKORT ===================================================== */

.sp-pl-punkter {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

/* Bricka ÖVER texten, inte bredvid: med badgen som flex-syskon sköts hela
   brödtexten in 60px från vänsterkanten och kortet läste som högerställt
   (ägarens iakttagelse 2026-09-21). Samma lösning som /veckomenyer/
   funktionskort – .sp-vml-funktion-ikon har margin-bottom och texten får
   kortets fulla bredd. Sida vid sida är där reserverat för det breda
   bannerkortet som spänner över hela raden. */
.sp-pl-punkt {
    padding: 24px 26px;
    background: #fff;
    border: 1px solid #ece6db;
    border-radius: 16px;
    box-shadow: 0 3px 14px rgba(70, 58, 44, 0.09);
}

/* Korten i vita band får den varmare tonen, annars försvinner de i
   bakgrunden. I de grå banden står de vita korten redan ut. */
.sp-pl-sektion--fordelar .sp-pl-punkt {
    background: #FAF9F6;
}

/* Stegens bricka: fylld cirkel, samma mått som /veckomenyer/ steg (44px,
   Montserrat 19/700). Fylld cirkel mot fördelarnas ljusa fyrkant – två olika
   former, så sektionerna intill varandra inte läser som samma brickor. */
.sp-pl-punkt-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: #3D5F42;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
}

/* Ikonplattan på fördelskorten. Husets anatomi för dekorativa kortikoner
   (samma som .sp-hp2-ikon i global.css och .sp-vml-funktion-ikon):
   rundad kvadrat, grön 8 %-platta, 24px outline i currentColor. Formen är
   medvetet en annan än stegkortens fyllda cirkel ovan. */
.sp-pl-punkt-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: rgba(61, 95, 66, 0.08);
    color: #3D5F42;
}

.sp-pl-punkt-ikon svg {
    display: block;
    width: 24px;
    height: 24px;
}

.sp-pl-punkt-rubrik {
    margin: 0 0 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: #2c2c2c;
}

.sp-pl-punkt p {
    margin: 0;
    font-family: 'Proxima Nova Regular', proxima_nova_regular, 'Proxima Nova', sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    color: #4D524D;
}


/* === 4. SMAKPROV UR VECKA 1 =========================================== */

.sp-pl-smakprov {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.sp-pl-smak {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-pl-smak-bild {
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: #ece6db;
    aspect-ratio: 4 / 3;
}

.sp-pl-smak-bild img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sp-pl-smak-titel {
    font-family: 'Proxima Nova Semibold', proxima_nova_semibold, 'Proxima Nova', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #2c2c2c;
}


/* === 5. OMDÖMEN ======================================================= */

.sp-pl-omdomen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}

.sp-pl-omdome {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 26px 28px;
    background: #fff;
    border: 1px solid #ece6db;
    border-radius: 16px;
    box-shadow: 0 3px 14px rgba(70, 58, 44, 0.09);
}

.sp-pl-stjarnor {
    display: inline-flex;
    gap: 3px;
    color: #E0A32E;
}

.sp-pl-stjarnor svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

/* global.css har en generell blockquote-regel med !important på allt (grön
   platta, vänsterkant, kursiv). Den måste nollas med egna !important, annars
   får omdömena quote-plattan. Läxan från prissidan. */
.sp-pl-omdome-text,
blockquote.sp-pl-omdome-text {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    font-style: normal !important;
    quotes: none !important;
}

.sp-pl-omdome-text::before,
.sp-pl-omdome-text::after {
    content: none !important;
}

.sp-pl-omdome-text p {
    margin: 0 !important;
    font-family: 'Proxima Nova Regular', proxima_nova_regular, 'Proxima Nova', sans-serif !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1.6 !important;
    color: #4D524D !important;
}

.sp-pl-omdome-namn {
    margin: 0;
    font-family: 'Proxima Nova Semibold', proxima_nova_semibold, 'Proxima Nova', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #2c2c2c;
}


/* === 6. MOBIL ========================================================= */

@media only screen and (max-width: 767px) {

    .sp-pl-sektion {
        padding: 56px 16px;
    }

    /* Måste upprepas här: regeln ovan har samma specificitet och ligger
       senare i filen, så utan den här raden får slutbandet 16px sidmarginal
       och 56px extra luft ovanpå sin egen – det slutade gå kant till kant
       på mobil (uppmätt 2026-09-21). */
    .sp-pl-sektion--slut_cta {
        padding: 0;
    }

    .sp-pl-rubrik {
        font-size: 26px;
    }

    .sp-pl-text p {
        font-size: 17px;
    }

    .sp-pl-punkter,
    .sp-pl-smakprov,
    .sp-pl-omdomen {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .sp-pl-punkt {
        padding: 20px 20px;
    }

    .sp-pl-omdome {
        padding: 22px 20px;
    }
}