/* Priopti v2 — extra-klasser som inte finns i Webflow-priopti.css.
   Bygger PÅ Webflow-färgerna och typsnittet. Håll dessa minimala — använd
   Webflow-klasser där det går. */

/* ===== Navbar — enhetlig storlek på alla pills ===== */
.nav-menu .nav-link,
.nav-menu .nav-link.w--current,
.nav-menu .w-nav-link {
    padding: 8px 18px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    height: 36px !important;
    min-height: 36px !important;
    box-sizing: border-box !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
    vertical-align: middle !important;
}
.nav-menu .nav-link.flag-link,
.nav-menu .nav-link.flag-link.w--current {
    padding: 4px 14px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    height: 36px !important;
    min-height: 36px !important;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    letter-spacing: 0 !important;
}

/* ===== Feature-bildkort ("Upptäck kraften av datadrivet ledarskap") — kompakt, cross-browser ===== */
.feature-image-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-column-gap: 24px !important;
    grid-row-gap: 24px !important;
    align-items: stretch !important;
    max-width: 960px !important;
    margin: 0 auto !important;
}
@media (max-width: 700px) {
    .feature-image-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
.feature-image-card {
    min-width: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e8e8ed !important;
    border-radius: 16px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    transition: transform 0.25s, box-shadow 0.25s;
}
.feature-image-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(30,58,95,0.08);
}
.feature-image-card .feature-card-content {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    width: 100% !important;
    gap: 10px !important;
}
.feature-image-wrapper {
    position: relative !important;
    width: 100% !important;
    padding-top: 56% !important; /* 16:9 ungefär — kompakt format */
    height: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: transparent !important;
    margin: 0 !important;
    border: 0 !important;
}
.feature-image-wrapper img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* hela bilden syns, ingen beskärning */
    display: block !important;
    max-width: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Kort-padding: minska för att inte ta extra plats runt bilden */
.feature-image-card {
    padding: 12px !important;
}
.feature-image-card h3,
.feature-image-card .heading-style-h6 {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 4px 0 0 0 !important;
    color: #1E3A5F;
}
.feature-image-card p {
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: #555 !important;
    margin: 0 !important;
}

/* ===== "Hur det funkar" — kompaktare avstånd mellan steg-punkter ===== */
.how-it-works-right {
    grid-row-gap: 6px !important;
    grid-template-rows: auto !important;
    grid-auto-rows: auto !important;
    height: auto !important;
}
.how-it-works-process-item {
    align-items: flex-start !important;
}
.how-it-works-process-conuter-line {
    min-height: 24px !important;
    flex: 1 !important;
}

/* ===== HERO-tillägg ===== */
.hero-eyebrow-pill {
    display: inline-block;
    padding: 8px 18px;
    margin-bottom: 18px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 999px;
    background: #fbfbfd;
    font-size: 14px;
    font-weight: 500;
    color: #555;
    letter-spacing: -0.005em;
    line-height: 1.5;
    max-width: 640px;
}
@media (max-width: 768px) {
    .hero-eyebrow-pill { font-size: 13px; padding: 6px 14px; }
}

.hero-claim {
    margin-top: 24px;
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.018em;
    color: #1a1a1a;
}
@media (max-width: 768px) {
    .hero-claim { font-size: 19px; margin-top: 20px; }
}

/* (.cta-pair definieras nedan med no-wrap default) */

/* ===== Accent-färg ===== */
.accent-coral {
    color: #F4A89A;
}

/* ===== Eyebrow ===== */
.text-eyebrow {
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2A628C;
    margin-bottom: 12px;
}

/* ===== Sektion grey bakgrund ===== */
.section-grey-bg {
    background: #f8f8fa;
}

/* ===== 3-grid-variant av feature-grid ===== */
.feature-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
@media (max-width: 880px) {
    .feature-grid-3 { grid-template-columns: 1fr; }
}

/* ===== PPM-jämförelse-kort ===== */
.compare-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 22px;
    padding: 32px;
    transition: all 0.3s;
}
.compare-card:hover {
    transform: translateY(-2px);
    border-color: #1E3A5F;
}
.compare-card.priopti-highlight {
    background: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%);
    border-color: #1E3A5F;
    border-width: 2px;
}
.compare-card-tag {
    font-family: var(--mono, "DM Mono", monospace);
    font-size: 11px;
    color: #6e6e73;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.compare-card-tag.priopti {
    color: #1E3A5F;
    font-weight: 700;
}
.compare-card-example {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e8e8ed;
    font-size: 13px;
    color: #6e6e73;
    font-style: italic;
}
.compare-list {
    margin: 12px 0 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 16px;
    font-size: 14px;
    line-height: 1.5;
}
.compare-list dt {
    font-weight: 600;
    color: #2A628C;
    margin: 0;
}
.compare-list dd {
    margin: 0;
    color: #333;
}

/* ===== Personas (chefer) ===== */
.role-card-v2 {
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 22px;
    padding: 28px 32px;
    transition: all 0.3s;
}
.role-card-v2:hover {
    transform: translateY(-2px);
    border-color: #1E3A5F;
}
.role-tag-v2 {
    display: inline-block;
    padding: 5px 12px;
    margin-bottom: 16px;
    border-radius: 100px;
    background: #1E3A5F;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.role-pain-v2 {
    margin: 16px 0;
    padding: 12px 16px;
    background: #f8f8fa;
    border-left: 3px solid #F4A89A;
    border-radius: 6px;
    font-size: 14px;
    font-style: italic;
    color: #555;
    line-height: 1.5;
}
.role-value-list-v2 {
    margin: 16px 0 0 0;
    padding: 0;
    list-style: none;
}
.role-value-list-v2 li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}
.role-value-list-v2 li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #1E6B5A;
    font-weight: 700;
}

/* ===== Plattforms-claim mellan-sektion ===== */
.platform-claim h3 {
    font-family: "Be Vietnam Pro", sans-serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #1a1a1a;
    margin-bottom: 16px;
}
@media (max-width: 768px) {
    .platform-claim h3 { font-size: 26px; }
}

/* ===== Heading H3 (för platform-claim) ===== */
.heading-style-h3 {
    font-family: "Be Vietnam Pro", sans-serif;
    font-weight: 600;
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #1a1a1a;
}

/* ===== Dimensions-kort (6 dimensioner) ===== */
.dimension-card {
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 22px;
    padding: 28px 32px;
    transition: all 0.3s;
}
.dimension-card:hover {
    transform: translateY(-2px);
    border-color: #1E3A5F;
}
.dimension-num {
    font-family: var(--mono, "DM Mono", monospace);
    font-size: 12px;
    font-weight: 600;
    color: #2A628C;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

/* ===== AI-block ===== */
.ai-block {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}
.ai-block h2 {
    margin-bottom: 24px;
}

/* ===== EU-banner ===== */
.eu-banner {
    padding: 20px 0;
    background: #eef2f7;
    border-top: 1px solid #d8e0ea;
    border-bottom: 1px solid #d8e0ea;
}
.eu-banner-inner {
    display: flex;
    gap: 16px;
    align-items: center;
    max-width: 880px;
    margin: 0 auto;
}
.eu-banner-flag {
    font-size: 28px;
    flex-shrink: 0;
}
.eu-banner-text {
    font-size: 14px;
    color: #444;
    line-height: 1.5;
}

/* ===== CTA-block (whitepaper) ===== */
.cta-block {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.cta-block h2 {
    margin-bottom: 16px;
}
.cta-block .button {
    margin-top: 28px;
}

/* ===== Primär + sekundär knapp — samma metrics, alignar vertikalt ===== */
a.button,
.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 26px !important;
    border: 2px solid transparent !important;
    border-radius: 999px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    vertical-align: middle !important;
}
a.button-secondary,
.button-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 26px !important;
    border-radius: 999px !important;
    border: 2px solid #1E3A5F !important;
    background: transparent !important;
    color: #1E3A5F !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    vertical-align: middle !important;
}
.button > div,
.button-secondary > div,
.button > *,
.button-secondary > * {
    text-decoration: none !important;
    border-bottom: 0 !important;
    line-height: 1 !important;
}
a.button-secondary:hover,
.button-secondary:hover {
    background: #1E3A5F !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* CTA-pair: säkerställ vertikal centrering */
.cta-pair {
    align-items: center !important;
}

/* ===== Utilities ===== */
.max-w-720 {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.text-align-center {
    text-align: center;
}

/* ===== Price grid 4 cards — 4 i bredd, 2x2 på tablet, 1 på mobil ===== */
.price-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    align-items: stretch !important;
}
@media (max-width: 1100px) {
    .price-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
    .price-grid-4 { grid-template-columns: 1fr !important; }
}

/* ===== Price card (pris.html) — alla kort lika höga, knapp i botten ===== */
.price-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    background: #ffffff !important;
    border: 2px solid #1E3A5F !important;
    border-radius: 20px !important;
    padding: 28px 24px !important;
    transition: transform 0.25s, box-shadow 0.25s !important;
    box-shadow: 0 1px 3px rgba(30,58,95,0.06);
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.price-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(30,58,95,0.12);
}
.price-card.priopti-highlight {
    box-shadow: 0 4px 14px rgba(30,58,95,0.14);
}

/* Inre wrapper sträcker sig hela höjden så knapp kan tryckas till botten */
.price-card .feature-card-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    gap: 0 !important;
}

/* Pill-tag — centrerad, fast typografi */
.price-tag {
    align-self: flex-start;
    display: inline-block;
    padding: 6px 14px;
    margin: 0 0 14px 0;
    border-radius: 999px;
    background: #f0f4f8;
    color: #1E3A5F;
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
}
.price-tag.priopti {
    background: #1E3A5F;
    color: #ffffff;
}

/* Användartal — tydlig sub-rubrik */
.price-user-count {
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1E3A5F;
    margin: 0 0 18px 0;
    line-height: 1.35;
    letter-spacing: -0.01em;
    min-height: 44px;
}

/* Feature-lista — fyller utrymmet ovanför knappen */
.price-list {
    flex: 1 1 auto;
    margin: 0 0 22px 0 !important;
    padding: 16px 0 0 0 !important;
    border-top: 1px solid #eef0f3;
    list-style: none;
}
.price-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 11px;
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 14.5px;
    color: #333;
    line-height: 1.5;
}
.price-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #1E6B5A;
    font-weight: 700;
    font-size: 15px;
}

/* Knappen — alltid längst ner, hel bredd, samma stil oavsett primary/secondary */
.price-card .button,
.price-card .button-secondary {
    margin-top: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 12px 20px !important;
    border-radius: 999px !important;
    font-family: "Be Vietnam Pro", sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
}
.price-card .button-secondary {
    background: transparent !important;
    color: #1E3A5F !important;
    border: 1.5px solid #1E3A5F !important;
}
.price-card .button-secondary:hover {
    background: #1E3A5F !important;
    color: #ffffff !important;
}
.price-card .button {
    background: #1E3A5F !important;
    color: #ffffff !important;
    border: 1.5px solid #1E3A5F !important;
}
.price-card .button:hover {
    background: #2c5282 !important;
    border-color: #2c5282 !important;
}
.price-card .button > div,
.price-card .button-secondary > div {
    display: inline;
}

/* ===== Capability card (formagor.html) ===== */
.capability-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 22px;
    padding: 32px;
    transition: all 0.3s;
}
.capability-card:hover {
    transform: translateY(-2px);
    border-color: #1E3A5F;
}
.capability-num {
    font-family: var(--mono, "DM Mono", monospace);
    font-size: 12px;
    font-weight: 600;
    color: #2A628C;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}
.capability-tagline {
    font-style: italic;
    color: #6e6e73;
    font-size: 14px;
    margin-bottom: 12px;
}

/* ===== Integration card (integrationer.html) ===== */
.integration-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 22px;
    padding: 32px;
    transition: all 0.3s;
}
.integration-card:hover {
    transform: translateY(-2px);
    border-color: #1E3A5F;
}
.integration-tag {
    font-family: var(--mono, "DM Mono", monospace);
    font-size: 11px;
    color: #6e6e73;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
    font-weight: 600;
}
.integration-status {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e8e8ed;
    font-size: 13px;
    color: #1E6B5A;
    font-weight: 600;
}
.integration-status.coming {
    color: #d97706;
}

/* ===== Hook-banner (Spårbar logik på articles.html) — REWRITTEN ===== */
.hook-banner-section {
    width: 100%;
    background: #1E3A5F;
    padding: 64px 24px;
    box-sizing: border-box;
}
.hook-banner-content {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}
.hook-banner-title {
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 20px 0;
}
.hook-accent {
    color: #F4A89A;
}
.hook-banner-text {
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255,255,255,0.85);
    max-width: 720px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .hook-banner-section { padding: 48px 20px; }
    .hook-banner-title { font-size: 26px; }
    .hook-banner-text { font-size: 15px; }
}

/* Variant: hook-banner placerat i botten av artiklar — ärver sidans bakgrund */
.hook-banner-bottom {
    background: #fbfbfd;
    border-top: 1px solid #e8e8ed;
    padding: 56px 24px 72px 24px;
}
.hook-banner-bottom .hook-banner-title {
    color: #1E3A5F;
}
.hook-banner-bottom .hook-accent {
    color: #E07856;
}
.hook-banner-bottom .hook-banner-text {
    color: #555;
}

/* ===== Footer — kompakt och städad ===== */
.footer-top-inner {
    grid-column-gap: 60px !important;
    grid-row-gap: 32px !important;
    margin-top: 48px !important;
    padding: 40px 48px !important;
    background-color: #1E3A5F !important;
    border-radius: 24px 24px 0 0;
    grid-template-columns: 1fr 1.5fr !important;
    align-items: start;
}
@media (max-width: 768px) {
    .footer-top-inner {
        padding: 32px 24px !important;
        grid-template-columns: 1fr !important;
        border-radius: 16px 16px 0 0;
    }
}

.footer-top-left {
    grid-column-gap: 16px !important;
    grid-row-gap: 16px !important;
    margin-left: 0 !important;
    color: #ffffff;
}
.footer-top-left .footer-logo-wrap {
    max-width: 160px;
    margin-bottom: 8px !important;
    background: #ffffff;
    padding: 12px 16px;
    border-radius: 12px;
    display: inline-block;
}
.footer-top-left .footer-logo-wrap img {
    display: block;
    width: 100%;
    height: auto;
}
.footer-text {
    margin: 0 !important;
    line-height: 1.6 !important;
    font-size: 14px !important;
    color: rgba(255,255,255,0.85) !important;
}
.footer-text strong {
    color: #ffffff;
    font-weight: 600;
}
.footer-top-left .div-block {
    grid-column-gap: 12px !important;
    margin-top: 4px;
}
.footer-top-left .div-block a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    transition: background 0.2s;
}
.footer-top-left .div-block a:hover {
    background: rgba(255,255,255,0.2);
}
.footer-top-left .div-block img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
}

.footer-top-right {
    grid-column-gap: 20px !important;
    grid-row-gap: 14px !important;
    grid-template-columns: repeat(6, auto) !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    flex-wrap: wrap !important;
}
@media (max-width: 1100px) {
    .footer-top-right {
        grid-template-columns: repeat(3, auto) !important;
    }
}
@media (max-width: 600px) {
    .footer-top-right {
        grid-template-columns: 1fr 1fr !important;
        justify-content: flex-start !important;
    }
}
.footer-link-column {
    padding: 0 !important;
    font-size: 0 !important;
}
.footer-link-large {
    font-family: "Be Vietnam Pro", sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.85) !important;
    text-decoration: none !important;
    padding: 6px 0 !important;
    transition: color 0.2s !important;
    border-bottom: 1px solid transparent;
}
.footer-link-large:hover {
    color: #ffffff !important;
    border-bottom-color: #F4A89A;
}
.footer-link-large.w--current {
    color: #ffffff !important;
}

.text-block-2 {
    grid-column: 1 / -1;
    height: auto !important;
    margin: 16px 0 0 0 !important;
    padding: 16px 0 0 0 !important;
    border-top: 1px solid rgba(255,255,255,0.2);
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left;
    align-self: stretch !important;
    letter-spacing: 0.01em;
}
@media (max-width: 768px) {
    .text-block-2 {
        text-align: center;
    }
}

/* ===== CTA-pair: tvinga horisontell layout, ingen wrap förrän riktigt smalt ===== */
.cta-pair {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 16px;
    align-items: center;
}
@media (max-width: 480px) {
    .cta-pair { flex-wrap: wrap; }
}

/* ===== Chefer-callout-sektion på index ===== */
.problem-callout {
    background: linear-gradient(180deg, #1E3A5F 0%, #2c5282 100%);
    color: #ffffff;
    text-align: center;
}
.problem-callout-inner {
    max-width: 880px;
    margin: 0 auto;
    padding: 24px 0;
}
.problem-callout h2 {
    color: #ffffff !important;
    margin-bottom: 24px;
}
.problem-callout h2 .accent-coral { color: #F4A89A; }
.problem-callout p {
    font-size: 18px;
    line-height: 1.5;
    color: rgba(255,255,255,0.92);
    max-width: 720px;
    margin: 0 auto 28px;
}

/* ===== Contact form: tvinga full bredd på inputs OCH submit ===== */
.contact-form-block .contact-form .input,
.contact-form-block .contact-form input,
.contact-form-block .contact-form textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}
.contact-form-block .contact-form .contact-field-wrapper {
    width: 100% !important;
}
.contact-form-block .contact-form button[type="submit"],
.contact-form-block .contact-form .button {
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* ===== About-sektion: minska gap mellan rubrik och team ===== */
/* Krymp section-header generellt (alla sidor) */
body .section-header {
    padding-top: 2.5rem !important;
    padding-bottom: 1rem !important;
}
body .section-header .header-component {
    padding-top: 16px !important;
    padding-bottom: 0 !important;
}
body .section-header .header-top-content-wrapper {
    padding-bottom: 8px !important;
    grid-row-gap: 1rem !important;
}
/* Team-sektion direkt efter header */
.section-header + .section-team,
body .section-team {
    padding-top: 0 !important;
}
body .section-team .padding-section-medium {
    padding-top: 0 !important;
    padding-bottom: 24px !important;
}
body .section-team .team-wrapper {
    margin-top: 0 !important;
    grid-row-gap: 20px !important;
}
.section-team {
    margin-top: 0;
}

/* Team card — kompaktare horisontell layout */
body .section-team .team-card-wrapper {
    position: relative;
    padding: 20px !important;
    padding-right: 64px !important;
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
body .section-team .team-card-wrapper:hover {
    border-color: #1E3A5F;
    box-shadow: 0 6px 18px rgba(30,58,95,0.08);
}
body .section-team .team-card-wrapper .image-wrapper {
    flex: 0 0 auto;
}
body .section-team .team-card-wrapper .card-text-wrapper {
    gap: 6px !important;
}
body .section-team .team-card-wrapper p {
    margin: 4px 0 8px 0 !important;
    line-height: 1.5;
}
body .section-team .team-member-name {
    margin: 0 !important;
}

/* LinkedIn-ikon — placerad i övre högra hörnet */
.team-linkedin-link {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f0f4f8;
    transition: background 0.2s;
    z-index: 2;
}
.team-linkedin-link:hover {
    background: #1E3A5F;
}
.team-linkedin-link img {
    width: 16px;
    height: 16px;
    transition: filter 0.2s;
}
.team-linkedin-link:hover img {
    filter: brightness(0) invert(1);
}

/* ===== Article cards (på articles.html-översikt) ===== */
.article-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e8e8ed;
    border-radius: 22px;
    padding: 32px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s;
}
.article-card:hover {
    transform: translateY(-2px);
    border-color: #1E3A5F;
}
.article-tag {
    font-family: var(--mono, "DM Mono", monospace);
    font-size: 11px;
    color: #6e6e73;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
    font-weight: 600;
}
.article-meta {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e8e8ed;
    font-size: 13px;
    color: #6e6e73;
}
.article-action {
    color: #1E3A5F;
    font-weight: 600;
}

/* ===== Gate-modal ===== */
.gate-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.gate-modal-overlay.active { display: flex; }
.gate-modal {
    background: #ffffff;
    border-radius: 20px;
    padding: 48px 40px;
    max-width: 480px;
    width: 100%;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}
.gate-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: #6e6e73;
    border-radius: 100px;
}
.gate-modal-close:hover {
    color: #1a1a1a;
    background: #f0f0f4;
}
.gate-modal h3 {
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #1E3A5F;
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
}
.gate-modal p {
    font-size: 15px;
    color: #555;
    margin: 0 0 24px 0;
    line-height: 1.5;
}
.gate-modal input {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #e8e8ed;
    border-radius: 12px;
    font-size: 15px;
    margin-bottom: 12px;
    font-family: inherit;
    box-sizing: border-box;
    background: #ffffff;
    color: #1a1a1a;
}
.gate-modal input:focus {
    outline: none;
    border-color: #1E3A5F;
}
.gate-modal button[type="submit"] {
    width: 100%;
    padding: 14px;
    background: #1E3A5F;
    color: #ffffff;
    border: none;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 4px;
    font-family: inherit;
    transition: background 0.2s;
}
.gate-modal button[type="submit"]:hover {
    background: #2c5282;
}
.gate-modal button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.gate-modal-fineprint {
    font-size: 11px !important;
    color: #6e6e73 !important;
    margin: 16px 0 0 0 !important;
    line-height: 1.5 !important;
}

/* ===== Manifest-tagline (mellan hero och Upptäck kraften-sektionen) ===== */
.manifesto {
    background: transparent;
    padding: 6rem 1.5rem;
    text-align: center;
}
.manifesto h2 {
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #1E3A5F;
    max-width: 900px;
    margin: 0 auto;
}
.manifesto-emphasis {
    color: #F4A89A;
}
@media (max-width: 768px) {
    .manifesto { padding: 4rem 1.25rem; }
}

/* Manifest inline-variant (placerad inne i hero, mellan text och bild) */
.manifesto-inline {
    padding: 2.5rem 1rem 2rem !important;
}
@media (max-width: 768px) {
    .manifesto-inline { padding: 2rem 1rem 1.5rem !important; }
}

/* === Mobil-nav fix ===========================================================
   Webflow-exporten saknar hamburger-knapp (w-nav-button) + webflow.js, så
   .w-nav-menu döljs på <=991px utan något sätt att öppnas → nav-länkarna
   försvann på mobil. Lösning utan JS: visa länkarna alltid på mobil som en
   centrerad, radbruten rad under loggan. Gäller alla Webflow-sidor (delad CSS).
*/
@media screen and (max-width: 991px) {
    .navbar.w-nav .nav-container {
        flex-wrap: wrap;
    }
    .navbar.w-nav .nav-menu-wrapper {
        width: 100%;
        flex: 0 0 100%;
    }
    .navbar.w-nav .nav-menu.w-nav-menu {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 2px 14px;
        width: 100%;
        padding: 8px 0 2px;
    }
    .navbar.w-nav .nav-menu .nav-link.w-nav-link {
        padding: 6px 6px;
    }
}