/* overrides.css är sedan 2026-08-19 en ren vidarepekare — designen bor i
   stira-manifest.php (no-store; underfiler filnamnsbustas). */
@import url("/assets/css/stira-manifest.php");

/* berit-base */
:root{--color-on-primary:#ffffff;--page-width:1200px;--section-py:80px;--section-density:120px;--radius-xl:16px;}
/* end berit-base */

/* block:blk_berit_btn-ghost */
/**
 * Ghost-knappar — bordered / naken / accent ghost
 *
 * Genererad från Berit-template `btn-ghost`.
 *
 * Brand-tokens (färger / font / radius) injiceras automatiskt av Berit
 * baserat på aktiv kund. Allt scoped till `.peys-btn-ghost` så det inte
 * påverkar resten av Bosse-projektet.
 *
 * Konvention:
 *   - Knappar grupperas i en flex-wrap-rad (ej full bredd)
 *   - Färger enbart via tokens + color-mix
 *   - Inga skuggor — borders och bg-kontrast för djup
 */

/* @brand-tokens-start
   Detta block ersätts av Berit-generatorn med aktiv kunds värden
   när du kopierar CSS:en. Default-värden nedan = Peys-brand. */
.peys-btn-ghost {
    --color-primary: #fd96a9;
    --color-primary-dark: #e6788b;
    --color-primary-light: #fcb6c5;
    --color-on-primary: #1a1817;
    --color-background: #fdfaf2;
    --color-foreground: #1a1817;
    --color-gray-50: #ffffff;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e5e5e5;
    --color-gray-300: #d4d4d4;
    --color-gray-400: #a3a3a3;
    --color-gray-500: #737373;
    --color-gray-600: #525252;
    --font-heading: 'Outfit', sans-serif;
    --font-primary: 'Outfit', sans-serif;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    --section-density: 120px;
}
/* @brand-tokens-end */

/* ============================================================
   ROT — flex-rad med knappar
============================================================ */

.peys-btn-ghost {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-primary);
    color: var(--color-foreground);
}

.peys-btn-ghost *,
.peys-btn-ghost *::before,
.peys-btn-ghost *::after {
    box-sizing: border-box;
}

/* ============================================================
   KNAPP — bas
============================================================ */

.peys-btn-ghost__btn {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-lg);
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

/* ============================================================
   VARIANT — bordered
============================================================ */

.peys-btn-ghost__btn--bordered {
    border: 1px solid color-mix(in oklab, var(--color-foreground) 7%, transparent);
    color: var(--color-foreground);
}

.peys-btn-ghost__btn--bordered:hover {
    background: var(--color-gray-50);
}

/* ============================================================
   VARIANT — naken
============================================================ */

.peys-btn-ghost__btn--naked {
    color: color-mix(in oklab, var(--color-foreground) 55%, transparent);
}

.peys-btn-ghost__btn--naked:hover {
    color: var(--color-foreground);
    background: var(--color-gray-50);
}

/* ============================================================
   VARIANT — accent
============================================================ */

.peys-btn-ghost__btn--accent {
    border: 1px solid color-mix(in oklab, var(--color-primary) 40%, transparent);
    color: var(--color-primary);
}

.peys-btn-ghost__btn--accent:hover {
    background: color-mix(in oklab, var(--color-primary) 10%, transparent);
}
/* end block:blk_berit_btn-ghost */

/* block:blk_berit_hero-centered */
/**
 * Hero (centrerad) — full-bredd hero-sektion med centrerat innehåll
 *
 * Genererad från Berit-template `hero-centered`.
 *
 * Brand-tokens (färger / font / radius / section-density) injiceras
 * automatiskt av Berit baserat på aktiv kund. Allt scoped till
 * `.peys-hero-centered` så det inte påverkar resten av Bosse-projektet.
 *
 * Konvention:
 *   - Hero spänner full bredd; innehållet centreras i en max-width-container
 *   - Top/bottom-padding styrs av --section-density
 *   - Inga skuggor — kontrast och färg för djup
 */

/* ============================================================
   HERO — full bredd, centrerat innehåll
   Speglar Berit-mallen (HeroCentered.jsx) 1:1: sektionen bär padding,
   innehållet centreras i 48rem (max-w-3xl).
============================================================ */

.peys-hero-centered {
    width: 100%;
    background: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-primary);
    line-height: 1.5;
    text-align: center;
    padding: var(--section-py, 80px) 1.5rem;
}

.peys-hero-centered,
.peys-hero-centered *,
.peys-hero-centered *::before,
.peys-hero-centered *::after {
    box-sizing: border-box;
}

.peys-hero-centered__inner {
    max-width: 48rem;
    margin: 0 auto;
}

/* ============================================================
   EYEBROW — text-[10px] uppercase tracking-[0.22em] text-accent mb-4
============================================================ */

.peys-hero-centered__eyebrow {
    display: inline-block;
    font-size: 0.625rem;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--color-primary);
    margin: 0 0 1rem;
}

/* ============================================================
   TITLE — text-display tracking-tight leading-[1.05]
   Sajtens typography.css sätter h1 till bold + egen storlek; allt sätts
   därför explicit så rubriken ser ut som i Berit (weight inherit = 400).
============================================================ */

.peys-hero-centered__title {
    font-family: var(--font-heading);
    font-size: var(--type-display, clamp(2.25rem, 5vw, 4rem));
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--color-foreground);
    margin: 0;
}

/* ============================================================
   TEXT — mt-5 text-lg text-fg-muted max-w-xl mx-auto
============================================================ */

.peys-hero-centered__text {
    margin: 1.25rem auto 0;
    max-width: 36rem;
    font-size: 1.125rem;
    line-height: 1.5556;
    color: color-mix(in oklab, var(--color-foreground) 55%, transparent);
}

/* ============================================================
   ACTIONS — mt-8 flex items-center justify-center gap-3
============================================================ */

.peys-hero-centered__actions {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

/* Primär: px-5 py-2.5 rounded-xl bg-accent text-accent-fg font-medium hover:opacity-90.
   Färgen upprepas på :hover — sajtens `a:hover { color: var(--color-primary-dark) }`
   vinner annars över klassen och knapptexten byter färg. */
.peys-hero-centered__cta {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-xl);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 500;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.peys-hero-centered__cta:hover {
    opacity: 0.9;
    color: var(--color-on-primary);
}

/* Sekundär: px-5 py-2.5 rounded-xl border border-border text-fg hover:bg-surface
   (ingen font-medium i Berit — vikten ärvs). */
.peys-hero-centered__secondary {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-xl);
    border: 1px solid color-mix(in oklab, var(--color-foreground) 7%, transparent);
    background: transparent;
    color: var(--color-foreground);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.peys-hero-centered__secondary:hover {
    background: var(--color-gray-50);
    color: var(--color-foreground);
}
/* end block:blk_berit_hero-centered */

/* block:blk_berit_sec-cta */
/**
 * CTA-banner — full-bredds sektion med centrerad banner-yta och knapp
 *
 * Genererad från Berit-template `sec-cta`.
 *
 * Brand-tokens (färger / font / radius) injiceras automatiskt av Berit
 * baserat på aktiv kund. Allt scoped till `.peys-sec-cta` så det inte
 * påverkar resten av Bosse-projektet.
 *
 * Konvention:
 *   - Sektionen spänner full bredd; banner-ytan centreras i en max-width-container
 *   - Gradient-bakgrund byggs av brand-tokens via color-mix
 *   - Inga skuggor — borders och bg-kontrast för djup
 */

/* @brand-tokens-start
   Detta block ersätts av Berit-generatorn med aktiv kunds värden
   när du kopierar CSS:en. Default-värden nedan = Peys-brand. */
.peys-sec-cta {
    --color-primary: #fd96a9;
    --color-primary-dark: #e6788b;
    --color-primary-light: #fcb6c5;
    --color-on-primary: #1a1817;
    --color-background: #fdfaf2;
    --color-foreground: #1a1817;
    --color-gray-50: #ffffff;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #e5e5e5;
    --color-gray-300: #d4d4d4;
    --color-gray-400: #a3a3a3;
    --color-gray-500: #737373;
    --color-gray-600: #525252;
    --font-heading: 'Outfit', sans-serif;
    --font-primary: 'Outfit', sans-serif;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    --section-density: 120px;
}
/* @brand-tokens-end */

/* ============================================================
   SEKTION — full bredd
============================================================ */

.peys-sec-cta {
    width: 100%;
    padding: var(--section-py, 80px) 1.5rem;
    font-family: var(--font-primary);
    color: var(--color-foreground);
}

.peys-sec-cta *,
.peys-sec-cta *::before,
.peys-sec-cta *::after {
    box-sizing: border-box;
}

.peys-sec-cta__inner {
    max-width: var(--page-width, 1280px);
    margin: 0 auto;
}

/* ============================================================
   BANNER — gradient-yta med innehåll + CTA
============================================================ */

.peys-sec-cta__banner {
    border: 1px solid color-mix(in oklab, var(--color-foreground) 7%, transparent);
    border-radius: var(--radius-2xl);
    padding: 2rem;
    background: linear-gradient(135deg,
        color-mix(in oklab, var(--color-primary) 15%, var(--color-gray-50)) 0%,
        var(--color-gray-50) 55%,
        var(--color-background) 100%);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
}

@media (min-width: 768px) {
    .peys-sec-cta__banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 3rem;
    }
}

/* ============================================================
   INNEHÅLL
============================================================ */

.peys-sec-cta__title {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 4vw, 1.875rem);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-foreground);
    margin: 0;
}

.peys-sec-cta__text {
    margin: 0.5rem 0 0;
    font-size: 1rem;
    line-height: 1.6;
    color: color-mix(in oklab, var(--color-foreground) 55%, transparent);
}

/* ============================================================
   CTA
============================================================ */

.peys-sec-cta__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: var(--radius-xl);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 0.875rem;
    font-weight: 500;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.peys-sec-cta__cta:hover {
    background: var(--color-primary-dark);
}
/* end block:blk_berit_sec-cta */

/* block:blk_berit_sec-landing-hero */
/**
 * Landing-hero — rubrik, undertext och primärknapp på grå yta. Speglar
 * React-mallen LandingHero.jsx 1:1 (display-rubrik, lead-text i dämpad
 * färg, pillerknapp i accent). Allt scoped till `.peys-sec-landing-hero`.
 * Inga skuggor.
 */

/* ============================================================
   SEKTION  (React: section.px-6.section-y.bg-surface)
============================================================ */

.peys-sec-landing-hero {
    width: 100%;
    box-sizing: border-box;
    padding: var(--section-py, 80px) 1.5rem;
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.5;
    background: var(--color-gray-50);
    color: var(--color-foreground);
}

.peys-sec-landing-hero *,
.peys-sec-landing-hero *::before,
.peys-sec-landing-hero *::after {
    box-sizing: border-box;
}

/* React: .page-container (olagrad → vinner över max-w-3xl, dvs full sidbredd) */
.peys-sec-landing-hero__inner {
    width: 100%;
    max-width: var(--page-width, 1280px);
    margin: 0 auto;
}

/* ============================================================
   INNEHÅLL
============================================================ */

/* React: h1.text-display.tracking-tight.text-fg
   (en avvikande `size` från Berit sätts inline av editable_heading) */
.peys-sec-landing-hero__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--type-display, clamp(2.25rem, 5vw, 4rem));
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.025em;
    color: var(--color-foreground);
}

/* React: p.mt-4.text-lg.text-fg-muted */
.peys-sec-landing-hero__subtitle {
    margin: 1rem 0 0;
    font-size: 1.125rem;
    line-height: 1.75rem;
    color: color-mix(in oklab, var(--color-foreground) 55%, transparent);
}

/* React: a.inline-block.mt-8.px-7.py-3.rounded-full.bg-accent.text-accent-fg
          .font-medium.hover:opacity-90.transition-opacity */
.peys-sec-landing-hero__button {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 500;
    text-decoration: none;
    border: 0;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.peys-sec-landing-hero__button:hover {
    opacity: 0.9;
    color: var(--color-on-primary);
}
/* end block:blk_berit_sec-landing-hero */

/* block:blk_berit_sec-html */
/* @brand-tokens-start
   Injicerat av Berit från aktiv kund: Stira */
.archipro-page {
    /* Brand-färger från kunden (samma källa som payloadens colors-block) */
    --color-primary: #2563EB;
    --color-primary-dark: #1f54c8;
    --color-primary-light: #467aee;
    --color-secondary: #0B1220;
    --color-secondary-dark: #090f1b;
    --color-accent: #2563EB;
    --color-on-primary: #FFFFFF;
    --color-background: #FFFFFF;
    --color-foreground: #111827;

    /* Surface/neutrals härledda från kundens fg */
    --color-gray-50: #F4F7FB;
    --color-gray-100: #ecedee;
    --color-gray-200: #dbdcdf;
    --color-gray-300: #b8babe;
    --color-gray-400: #888c93;
    --color-gray-500: #585d68;
    --color-gray-600: #353b47;

    /* Typografi från kunden — rubrik + brödtext kan vara olika fonter */
    --font-heading: 'Raleway', sans-serif;
    --font-primary: 'DM Sans', sans-serif;

    /* Radius från kunden */
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* Section-padding-density (80 / 120 / 150 = compact / normal / roomy) */
    --section-density: 120px;

    /* Innehållsbredd — matchar kundens befintliga webb. Alla block delar denna. */
    --page-width: 1200px;

    /* Vertikal sektions-padding — matchar kundens webb. Alla body-block delar denna. */
    --section-py: 80px;
    /* Logo för ljus bakgrund — ersätter text-/symbol-märket på ljusa ytor. */
    --customer-logo: url("/assets/images/logo-dark.webp");
    --customer-logo-show: inline-block;
    --customer-fallback-show: none;
    /* Logo för mörk bakgrund — ersätter märket på mörka ytor (hero/footer/overlay). */
    --customer-logo-dark: url("/uploads/STIRA-VIT.png");
    --customer-logo-dark-show: inline-block;
    --customer-fallback-dark-show: none;
}
/* @brand-tokens-end */


/* Ingen egen CSS — sektionen återanvänder sajtens landing-klasser. */
/* end block:blk_berit_sec-html */

/* block:blk_berit_sec-related-pages */
/**
 * Relaterade sidor — grid med länk-kort. Speglar React-mallen
 * RelatedPages.jsx 1:1 (grid 1 → 2 → 3 kolumner, kort med ram som får
 * accent-ram vid hover, grå eller vit sektions-/kortyta).
 * Allt scoped till `.peys-sec-related-pages`. Inga skuggor.
 */

/* ============================================================
   SEKTION  (React: section.px-6.section-y[.bg-surface])
============================================================ */

.peys-sec-related-pages {
    width: 100%;
    box-sizing: border-box;
    padding: var(--section-py, 80px) 1.5rem;
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-foreground);
}

/* bg = gray (default) → React: .bg-surface */
.peys-sec-related-pages--gray {
    background: var(--color-gray-50);
}

.peys-sec-related-pages *,
.peys-sec-related-pages *::before,
.peys-sec-related-pages *::after {
    box-sizing: border-box;
}

/* React: .page-container */
.peys-sec-related-pages__inner {
    width: 100%;
    max-width: var(--page-width, 1280px);
    margin: 0 auto;
}

/* ============================================================
   RUBRIK  (React: .text-center.max-w-2xl.mx-auto.mb-10)
============================================================ */

.peys-sec-related-pages__header {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 2.5rem;
}

/* React: h2.text-2xl.md:text-3xl.tracking-tight.text-fg
   (mallen använder fasta steg här, inte --type-h2 — speglas exakt) */
.peys-sec-related-pages__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 400;
    letter-spacing: -0.025em;
    color: var(--color-foreground);
}

@media (min-width: 768px) {
    .peys-sec-related-pages__heading {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
}

/* React: p.mt-2.text-fg-muted */
.peys-sec-related-pages__subheading {
    margin: 0.5rem 0 0;
    color: color-mix(in oklab, var(--color-foreground) 55%, transparent);
}

/* ============================================================
   GRID + KORT  (React: .grid.grid-cols-1.sm:grid-cols-2.lg:grid-cols-3.gap-5)
============================================================ */

.peys-sec-related-pages__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .peys-sec-related-pages__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .peys-sec-related-pages__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* React: a.block.rounded-2xl.border.border-border.p-6.transition-colors
          .hover:border-accent/50 (.bg-surface | .bg-bg) */
.peys-sec-related-pages__card {
    display: block;
    border: 1px solid color-mix(in oklab, var(--color-foreground) 7%, transparent);
    border-radius: var(--radius-2xl);
    background: var(--color-gray-50);
    padding: 1.5rem;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.peys-sec-related-pages__card:hover {
    border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
    color: inherit;
}

/* linkStyle = white → React: .bg-bg */
.peys-sec-related-pages__card--light {
    background: var(--color-background);
}

/* React: h3.text-base.font-semibold.text-fg */
.peys-sec-related-pages__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--color-foreground);
}

/* React: p.mt-1.5.text-sm.text-fg-muted */
.peys-sec-related-pages__text {
    margin: 0.375rem 0 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: color-mix(in oklab, var(--color-foreground) 55%, transparent);
}
/* end block:blk_berit_sec-related-pages */

/* block:blk_berit_sec-landing-cta */
/**
 * Landing-CTA — mörk avslutande banner. Speglar React-mallen LandingCta.jsx
 * 1:1 (förgrundsfärg som yta, bakgrundsfärg som text, centrerat innehåll,
 * pillerknapp i accent). Allt scoped till `.peys-sec-landing-cta`.
 * Inga skuggor.
 */

/* ============================================================
   SEKTION  (React: section.px-6.section-y.bg-fg.text-bg)
============================================================ */

.peys-sec-landing-cta {
    width: 100%;
    box-sizing: border-box;
    padding: var(--section-py, 80px) 1.5rem;
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.5;
    background: var(--color-foreground);
    color: var(--color-background);
}

.peys-sec-landing-cta *,
.peys-sec-landing-cta *::before,
.peys-sec-landing-cta *::after {
    box-sizing: border-box;
}

/* React: .page-container.text-center (olagrad → vinner över max-w-2xl) */
.peys-sec-landing-cta__inner {
    width: 100%;
    max-width: var(--page-width, 1280px);
    margin: 0 auto;
    text-align: center;
}

/* ============================================================
   INNEHÅLL
============================================================ */

/* React: h2.text-h2.tracking-tight (ärver sektionens textfärg) */
.peys-sec-landing-cta__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--type-h2, clamp(1.625rem, 3vw, 2.25rem));
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.025em;
    color: inherit;
}

/* React: p.mt-3.opacity-80 */
.peys-sec-landing-cta__text {
    margin: 0.75rem 0 0;
    opacity: 0.8;
    color: inherit;
}

/* React: a.inline-block.mt-6.px-7.py-3.rounded-full.bg-accent.text-accent-fg
          .font-medium.hover:opacity-90.transition-opacity */
.peys-sec-landing-cta__button {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 500;
    text-decoration: none;
    border: 0;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.peys-sec-landing-cta__button:hover {
    opacity: 0.9;
    color: var(--color-on-primary);
}
/* end block:blk_berit_sec-landing-cta */

/* block:blk_berit_sec-numbered-cards */
/**
 * Numrerade kort (4). Speglar React-mallen NumberedCards.jsx 1:1 (grid
 * 1 → 2 → 4 kolumner, kort på bakgrundsfärgen, accent-nummer eller emoji,
 * valfri grå sektionsyta). Allt scoped till `.peys-sec-numbered-cards`.
 * Inga skuggor.
 */

/* ============================================================
   SEKTION  (React: section.px-6.section-y[.bg-surface])
============================================================ */

.peys-sec-numbered-cards {
    width: 100%;
    box-sizing: border-box;
    padding: var(--section-py, 80px) 1.5rem;
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-foreground);
}

/* bg = gray → React: .bg-surface */
.peys-sec-numbered-cards--gray {
    background: var(--color-gray-50);
}

.peys-sec-numbered-cards *,
.peys-sec-numbered-cards *::before,
.peys-sec-numbered-cards *::after {
    box-sizing: border-box;
}

/* React: .page-container */
.peys-sec-numbered-cards__inner {
    width: 100%;
    max-width: var(--page-width, 1280px);
    margin: 0 auto;
}

/* ============================================================
   RUBRIK  (React: .text-center.max-w-2xl.mx-auto.mb-10)
============================================================ */

.peys-sec-numbered-cards__header {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 2.5rem;
}

/* React: h2.text-h2.tracking-tight.text-fg */
.peys-sec-numbered-cards__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--type-h2, clamp(1.625rem, 3vw, 2.25rem));
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.025em;
    color: var(--color-foreground);
}

/* React: p.mt-2.text-fg-muted */
.peys-sec-numbered-cards__subheading {
    margin: 0.5rem 0 0;
    color: color-mix(in oklab, var(--color-foreground) 55%, transparent);
}

/* ============================================================
   GRID + KORT  (React: .grid.grid-cols-1.sm:grid-cols-2.lg:grid-cols-4.gap-6)
============================================================ */

.peys-sec-numbered-cards__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .peys-sec-numbered-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .peys-sec-numbered-cards__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* React: .rounded-2xl.border.border-border.bg-bg.p-8 */
.peys-sec-numbered-cards__card {
    border: 1px solid color-mix(in oklab, var(--color-foreground) 7%, transparent);
    border-radius: var(--radius-2xl);
    background: var(--color-background);
    padding: 2rem;
}

/* React: .text-3xl.font-semibold.text-accent.mb-3 */
.peys-sec-numbered-cards__number {
    margin: 0 0 0.75rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* React: .text-3xl.mb-3 */
.peys-sec-numbered-cards__emoji {
    margin: 0 0 0.75rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
}

/* React: h4.text-base.font-semibold.text-fg */
.peys-sec-numbered-cards__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--color-foreground);
}

/* React: p.mt-2.text-sm.text-fg-muted */
.peys-sec-numbered-cards__text {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: color-mix(in oklab, var(--color-foreground) 55%, transparent);
}
/* end block:blk_berit_sec-numbered-cards */

/* block:blk_berit_sec-feature-grid-2 */
/* Ingen egen CSS — sektionen återanvänder sajtens landing-klasser
   (section--key-features, key-features-grid, key-feature-item m.fl.). */
/* end block:blk_berit_sec-feature-grid-2 */

/* block:blk_berit_sec-feature-grid-3 */
/* Ingen egen CSS — sektionen återanvänder sajtens landing-klasser
   (section--key-features, key-features-grid, key-feature-item m.fl.). */
/* end block:blk_berit_sec-feature-grid-3 */

/* block:blk_berit_sec-steps */
/**
 * Steg (3) — tre numrerade steg-cirklar med rubrik och text.
 * Speglar React-mallen Steps.jsx 1:1 (grid 1 → 3 kolumner vid 640px, kort med
 * ram + yta, accent-cirkel). Allt scoped till `.peys-sec-steps`. Inga skuggor.
 */

/* ============================================================
   SEKTION  (React: section.px-6.section-y)
============================================================ */

.peys-sec-steps {
    width: 100%;
    box-sizing: border-box;
    padding: var(--section-py, 80px) 1.5rem;
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-foreground);
}

.peys-sec-steps *,
.peys-sec-steps *::before,
.peys-sec-steps *::after {
    box-sizing: border-box;
}

/* React: .page-container */
.peys-sec-steps__inner {
    width: 100%;
    max-width: var(--page-width, 1280px);
    margin: 0 auto;
}

/* ============================================================
   RUBRIK  (React: .text-center.max-w-2xl.mx-auto.mb-10)
============================================================ */

.peys-sec-steps__header {
    text-align: center;
    max-width: 42rem;
    margin: 0 auto 2.5rem;
}

/* React: h2.text-h2.tracking-tight.text-fg */
.peys-sec-steps__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--type-h2, clamp(1.625rem, 3vw, 2.25rem));
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.025em;
    color: var(--color-foreground);
}

/* React: p.mt-2.text-fg-muted */
.peys-sec-steps__subheading {
    margin: 0.5rem 0 0;
    color: color-mix(in oklab, var(--color-foreground) 55%, transparent);
}

/* ============================================================
   GRID + KORT  (React: .grid.grid-cols-1.sm:grid-cols-3.gap-8)
============================================================ */

.peys-sec-steps__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
}

@media (min-width: 640px) {
    .peys-sec-steps__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* React: .text-center.rounded-2xl.border.border-border.bg-surface.px-8.py-12 */
.peys-sec-steps__card {
    text-align: center;
    border: 1px solid color-mix(in oklab, var(--color-foreground) 7%, transparent);
    border-radius: var(--radius-2xl);
    background: var(--color-gray-50);
    padding: 3rem 2rem;
}

/* React: .w-14.h-14.mx-auto.mb-5.rounded-full.bg-accent.text-accent-fg
          .grid.place-items-center.text-xl.font-semibold */
.peys-sec-steps__circle {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1.25rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-primary);
    color: var(--color-on-primary);
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 600;
}

/* React: h3.text-lg.font-semibold.text-fg */
.peys-sec-steps__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: var(--color-foreground);
}

/* React: p.mt-3.text-sm.text-fg-muted */
.peys-sec-steps__text {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: color-mix(in oklab, var(--color-foreground) 55%, transparent);
}
/* end block:blk_berit_sec-steps */

/* block:blk_berit_sec-feature-grid-4 */
/* Ingen egen CSS — sektionen återanvänder sajtens landing-klasser
   (section--key-features, key-features-grid, key-feature-item m.fl.). */
/* end block:blk_berit_sec-feature-grid-4 */

/* block:blk_berit_sec-solution-features */
/* Ingen egen CSS — sektionen återanvänder sajtens landing-klasser. */
/* end block:blk_berit_sec-solution-features */

/* block:blk_berit_sec-problem-cards */
/**
 * Problemkort — rad med numrerade kort. Speglar React-mallen ProblemCards.jsx
 * 1:1 (grid 1 → 2 → 4 kolumner, kort med ram + yta, accent-nummer).
 * Allt scoped till `.peys-sec-problem-cards`. Inga skuggor.
 */

/* ============================================================
   SEKTION  (React: section.px-6.section-y)
============================================================ */

.peys-sec-problem-cards {
    width: 100%;
    box-sizing: border-box;
    padding: var(--section-py, 80px) 1.5rem;
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-foreground);
}

.peys-sec-problem-cards *,
.peys-sec-problem-cards *::before,
.peys-sec-problem-cards *::after {
    box-sizing: border-box;
}

/* React: .page-container.grid.grid-cols-1.sm:grid-cols-2.lg:grid-cols-4.gap-6 */
.peys-sec-problem-cards__grid {
    width: 100%;
    max-width: var(--page-width, 1280px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 640px) {
    .peys-sec-problem-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .peys-sec-problem-cards__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ============================================================
   KORT  (React: .rounded-2xl.border.border-border.bg-surface.p-8)
============================================================ */

.peys-sec-problem-cards__card {
    border: 1px solid color-mix(in oklab, var(--color-foreground) 7%, transparent);
    border-radius: var(--radius-2xl);
    background: var(--color-gray-50);
    padding: 2rem;
}

/* React: .text-3xl.font-semibold.text-accent/80.mb-3 */
.peys-sec-problem-cards__number {
    margin: 0 0 0.75rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 600;
    color: color-mix(in oklab, var(--color-primary) 80%, transparent);
}

/* React: h3.text-lg.font-semibold.text-fg */
.peys-sec-problem-cards__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: var(--color-foreground);
}

/* React: p.mt-2.text-sm.text-fg-muted */
.peys-sec-problem-cards__text {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: color-mix(in oklab, var(--color-foreground) 55%, transparent);
}
/* end block:blk_berit_sec-problem-cards */

/* block:blk_berit_sec-stats-3 */
/* Ingen egen CSS — sektionen återanvänder sajtens landing-klasser. */
/* end block:blk_berit_sec-stats-3 */

/* block:blk_berit_sec-answer */
/**
 * Svarssektion — rubrik + textstycken + valfri knapp. Speglar React-mallen
 * Answer.jsx 1:1 (ytvarianter, centrering, stycken i text-lg, pillerknapp).
 * Allt scoped till `.peys-sec-answer`. Inga skuggor.
 */

/* ============================================================
   SEKTION  (React: section.px-6.section-y + BG_PREVIEW-klass)
============================================================ */

.peys-sec-answer {
    width: 100%;
    box-sizing: border-box;
    padding: var(--section-py, 80px) 1.5rem;
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-foreground);
}

/* bg = dark | ctadark → React: .bg-fg.text-bg */
.peys-sec-answer--dark {
    background: var(--color-foreground);
    color: var(--color-background);
}

/* bg = soft | gray → React: .bg-surface */
.peys-sec-answer--soft {
    background: var(--color-gray-50);
}

.peys-sec-answer *,
.peys-sec-answer *::before,
.peys-sec-answer *::after {
    box-sizing: border-box;
}

/* React: .page-container (olagrad → vinner över max-w-3xl, dvs full sidbredd) */
.peys-sec-answer__inner {
    width: 100%;
    max-width: var(--page-width, 1280px);
    margin: 0 auto;
}

/* centered → React: .text-center.mx-auto */
.peys-sec-answer__inner--centered {
    text-align: center;
}

/* ============================================================
   INNEHÅLL
============================================================ */

/* React: h2.text-h2.tracking-tight (ärver sektionens textfärg) */
.peys-sec-answer__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--type-h2, clamp(1.625rem, 3vw, 2.25rem));
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.025em;
    color: inherit;
}

/* React: .mt-4.space-y-4.text-lg.opacity-90 */
.peys-sec-answer__body {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    opacity: 0.9;
}

.peys-sec-answer__paragraph {
    margin: 0;
    color: inherit;
}

/* Inline-länkar i styckena ärver textfärgen (sajtens a-regel målar annars
   primärfärg — i Berit finns ingen länkfärg). */
.peys-sec-answer__paragraph a {
    color: inherit;
}

/* React: a.inline-block.mt-6.px-7.py-3.rounded-full.bg-accent.text-accent-fg
          .font-medium.hover:opacity-90.transition-opacity */
.peys-sec-answer__link {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 0.75rem 1.75rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-primary);
    color: var(--color-on-primary);
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 500;
    text-decoration: none;
    border: 0;
    transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.peys-sec-answer__link:hover {
    opacity: 0.9;
    color: var(--color-on-primary);
}
/* end block:blk_berit_sec-answer */

/* block:blk_berit_sec-faq */
/**
 * FAQ — mörk sektion med utfällbara frågor/svar. Speglar React-mallen
 * Faq.jsx 1:1 (förgrundsfärg som yta, bakgrundsfärg som text, translucenta
 * details-kort). Allt scoped till `.peys-sec-faq`. Inga skuggor.
 */

/* ============================================================
   SEKTION  (React: section.px-6.section-y.bg-fg.text-bg)
============================================================ */

.peys-sec-faq {
    width: 100%;
    box-sizing: border-box;
    padding: var(--section-py, 80px) 1.5rem;
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.5;
    background: var(--color-foreground);
    color: var(--color-background);
}

.peys-sec-faq *,
.peys-sec-faq *::before,
.peys-sec-faq *::after {
    box-sizing: border-box;
}

/* React: .page-container (olagrad → vinner över max-w-3xl, dvs full sidbredd) */
.peys-sec-faq__inner {
    width: 100%;
    max-width: var(--page-width, 1280px);
    margin: 0 auto;
}

/* React: h2.text-h2.tracking-tight (ärver sektionens textfärg) */
.peys-sec-faq__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--type-h2, clamp(1.625rem, 3vw, 2.25rem));
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.025em;
    color: inherit;
}

/* ============================================================
   LISTA  (React: .mt-6.space-y-3)
============================================================ */

.peys-sec-faq__list {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* React: details.rounded-xl.border.border-bg/20.bg-bg/5.px-5.py-3 */
.peys-sec-faq__item {
    border: 1px solid color-mix(in oklab, var(--color-background) 20%, transparent);
    border-radius: var(--radius-xl);
    background: color-mix(in oklab, var(--color-background) 5%, transparent);
    padding: 0.75rem 1.25rem;
    margin: 0;
}

/* React: summary.cursor-pointer.font-medium (list-item = native markör) */
.peys-sec-faq__question {
    display: list-item;
    cursor: pointer;
    font-weight: 500;
    color: inherit;
}

/* React: p.mt-2.opacity-80 */
.peys-sec-faq__answer {
    margin: 0.5rem 0 0;
    opacity: 0.8;
    color: inherit;
}
/* end block:blk_berit_sec-faq */

/* block:blk_berit_sec-card-grid */
/* Ingen egen CSS — sektionen återanvänder sajtens landing-klasser. */
/* end block:blk_berit_sec-card-grid */

/* block:blk_berit_sec-table */
/* Ingen egen CSS — sektionen återanvänder sajtens landing-klasser. */
/* end block:blk_berit_sec-table */