/* Heimdall Studio v0.18.9
   Restore a balanced Dutch OdoBuddy hero and rebuild the final
   availability/development section as a proper card. */

/* -------------------------------------------------------------------------
   Dutch hero: undo the oversized v0.18.8 treatment
   ------------------------------------------------------------------------- */

html[lang="nl"] .software-hero-copy h1 {
    font-size: clamp(3.15rem, 4.7vw, 5rem) !important;
    line-height: 1.01 !important;
    max-width: 14.5ch !important;
}

/* Give the Dutch text column a bit more usable width so the title wraps
   in roughly 2–3 substantial lines instead of 4–5 narrow ones. */
html[lang="nl"] .software-hero-grid {
    grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr) !important;
}

html[lang="nl"] .software-hero-copy {
    padding-top: clamp(2.5rem, 4vw, 4rem) !important;
    padding-bottom: clamp(2.5rem, 4vw, 4rem) !important;
}

html[lang="nl"] .software-hero-copy > p:not(.eyebrow):not(.odobuddy-hero-status) {
    max-width: 47rem !important;
    margin-top: clamp(1rem, 1.5vw, 1.35rem) !important;
}

html[lang="nl"] .odobuddy-hero-status {
    position: relative !important;
    z-index: 3 !important;
    margin-top: clamp(1rem, 1.5vw, 1.35rem) !important;
    margin-bottom: 0 !important;
}

/* -------------------------------------------------------------------------
   Final OdoBuddy availability/development block
   ------------------------------------------------------------------------- */

.development-section {
    margin-top: clamp(-1.25rem, -1.5vw, -0.5rem) !important;
    padding: 0 0 clamp(3rem, 4.5vw, 4.5rem) !important;
}

/* Turn the existing development-grid itself into the card. */
.development-section .development-grid {
    background: rgba(239, 248, 253, 0.92) !important;
    border: 1px solid rgba(86, 169, 222, 0.24) !important;
    border-radius: 30px !important;
    box-shadow: 0 18px 50px rgba(33, 76, 110, 0.08) !important;
    padding: clamp(2.75rem, 5vw, 4.5rem) !important;
    align-items: center !important;
    gap: clamp(2.5rem, 5vw, 5rem) !important;
}

/* Vertically center both columns now that the eyebrow is gone. */
.development-section .development-grid > div:first-child,
.development-section .development-copy {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.development-section .development-grid h2 {
    margin: 0 !important;
}

.development-section .development-copy p:first-child {
    margin-top: 0 !important;
}

.development-section .development-copy p:last-child {
    margin-bottom: 0 !important;
}

/* Responsive safety */
@media (max-width: 900px) {
    html[lang="nl"] .software-hero-grid {
        grid-template-columns: 1fr !important;
    }

    html[lang="nl"] .software-hero-copy h1 {
        font-size: clamp(2.8rem, 9vw, 4.25rem) !important;
        max-width: 13ch !important;
    }

    .development-section {
        margin-top: 0 !important;
    }

    .development-section .development-grid {
        border-radius: 24px !important;
        padding: 2.25rem !important;
        gap: 2rem !important;
    }
}