/* -------------------------------------------------
AppVault Onboarding page
------------------------------------------------- */

.onboarding-page {
    overflow-x: hidden;
}

/* -------------------------------------------------
Hero
------------------------------------------------- */

.section--hero {
    display: flex;
    align-items: center;
    min-height: clamp( 42rem, calc(100vh - var(--header-height)), 54rem );
    padding-block: clamp(4.5rem, 7vw, 7rem);
    background: radial-gradient( circle at 82% 24%, rgba(78, 145, 208, 0.18), transparent 28rem ), radial-gradient( circle at 12% 72%, rgba(49, 86, 170, 0.08), transparent 24rem ), var(--gradient-brand-soft);
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(26rem, 0.97fr);
    gap: clamp(3rem, 7vw, 6.5rem);
    align-items: center;
}

.hero__content {
    position: relative;
    z-index: 2;
    max-width: 44rem;
}

    .hero__content h1 {
        max-width: 13ch;
        margin-bottom: var(--space-6);
    }

.hero__lead {
    max-width: 40rem;
    font-size: clamp(1.1rem, 1.7vw, 1.3rem);
    line-height: 1.6;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

.hero__summary {
    margin-top: var(--space-7);
    color: var(--color-slate-700);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.hero__visual {
    position: relative;
}

    .hero__visual::before {
        content: "";
        position: absolute;
        inset: 8% -8% -8% 12%;
        z-index: -1;
        border-radius: 50%;
        background: rgba(78, 145, 208, 0.13);
        filter: blur(3rem);
    }

/* -------------------------------------------------
Product positioning
------------------------------------------------- */

.section--positioning {
    background: var(--color-white);
}

    .section--positioning .section-heading {
        max-width: 56rem;
    }

.value-chain {
    position: relative;
}

.reopen-note {
    position: relative;
}

/* -------------------------------------------------
Independent processes
------------------------------------------------- */

.process-grid__intro {
    position: relative;
    z-index: 2;
    width: fit-content;
    margin: 0 auto var(--space-8);
    padding-inline: var(--space-4);
    background: var(--color-background-muted);
    color: var(--color-brand-blue-700);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    letter-spacing: var(--letter-spacing-wide);
    text-align: center;
    text-transform: uppercase;
}

.process-grid {
    position: relative;
}

    .process-grid::after {
        content: "";
        position: absolute;
        top: -0.75rem;
        right: 11%;
        left: 11%;
        z-index: 0;
        height: 1px;
        background: linear-gradient( 90deg, transparent, var(--color-brand-blue-300) 15%, var(--color-brand-blue-300) 85%, transparent );
    }

.process-card {
    z-index: 1;
}

/* -------------------------------------------------
Core value
------------------------------------------------- */

#benefits .section-heading {
    max-width: 54rem;
}

    #benefits .section-heading h2 {
        max-width: 18ch;
    }

/* -------------------------------------------------
Re-open section
------------------------------------------------- */

.section--reopen {
    overflow: hidden;
    background: radial-gradient( circle at 85% 50%, rgba(78, 145, 208, 0.15), transparent 28rem ), var(--color-brand-blue-50);
}

    .section--reopen::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 1px;
        background: linear-gradient( 90deg, transparent, var(--color-brand-blue-200), transparent );
    }

.reopen-section {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(25rem, 1.08fr);
    gap: clamp(3rem, 8vw, 7rem);
    align-items: center;
}

.reopen-section__content {
    max-width: 38rem;
}

    .reopen-section__content h2 {
        margin-bottom: var(--space-6);
    }

    .reopen-section__content p + p {
        margin-top: var(--space-5);
    }

/* -------------------------------------------------
Enterprise implementation
------------------------------------------------- */

.enterprise-section {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.95fr);
    gap: clamp(3rem, 8vw, 7rem);
    align-items: start;
}

    .enterprise-section h2 {
        max-width: 16ch;
    }

.enterprise-section__content {
    padding: var(--space-8);
    border: var(--border-standard);
    border-radius: var(--radius-xl);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

    .enterprise-section__content > p {
        color: var(--color-slate-700);
        font-size: var(--font-size-md);
    }

/* -------------------------------------------------
Integrations
------------------------------------------------- */

.integration-section {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: center;
}

    .integration-section > * {
        min-width: 0;
    }
.integration-section__content {
    max-width: 40rem;
}

    .integration-section__content h2 {
        margin-bottom: var(--space-6);
    }

    .integration-section__content p + p {
        margin-top: var(--space-5);
    }

/* -------------------------------------------------
Security
------------------------------------------------- */

.section--security {
    overflow: hidden;
    background: radial-gradient( circle at 15% 20%, rgba(78, 145, 208, 0.2), transparent 24rem ), var(--gradient-dark);
}

    .section--security::after {
        content: "";
        position: absolute;
        right: -10rem;
        bottom: -14rem;
        width: 34rem;
        height: 34rem;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 50%;
    }

.security-section {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(2.5rem, 7vw, 6rem);
    align-items: center;
    max-width: 62rem;
}

.security-section__content {
    max-width: 46rem;
}

    .security-section__content h2 {
        margin-bottom: var(--space-6);
        color: var(--color-white);
    }

    .security-section__content p {
        color: rgba(255, 255, 255, 0.74);
        font-size: var(--font-size-md);
    }

        .security-section__content p + p {
            margin-top: var(--space-5);
        }

    .security-section__content .text-link {
        margin-top: var(--space-7);
    }

/* -------------------------------------------------
CTA
------------------------------------------------- */

.section--cta {
    padding-top: var(--section-spacing-small);
    padding-bottom: var(--section-spacing);
    background: var(--color-white);
}

/* -------------------------------------------------
Section rhythm
------------------------------------------------- */

.section--muted + .section,
.section + .section--muted {
    border-top: 1px solid rgba(223, 229, 239, 0.7);
}

/* -------------------------------------------------
Responsive
------------------------------------------------- */

@media (max-width: 72rem) {
    .hero__grid {
        grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.85fr);
        gap: var(--space-12);
    }

    .site-navigation {
        gap: var(--space-4);
    }

    .site-header__actions .product-switch {
        display: none;
    }
}

@media (max-width: 64rem) {
    .process-system-map__connector {
        width: min(90%, 32rem);
    }

    .process-system-map__targets {
        gap: var(--space-4);
    }

    .process-profile-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .process-profile-panel__heading {
        grid-template-columns: 1fr;
        gap: var(--space-5);
        align-items: start;
    }

    .process-grid--single {
        grid-template-columns: minmax(0, 32rem);
    }

    .process-grid--medium,
    .process-grid--large,
    .process-grid--chambers {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .section--hero {
        min-height: auto;
        padding-block: var(--section-spacing);
    }

    .hero__grid,
    .reopen-section,
    .enterprise-section,
    .integration-section {
        grid-template-columns: 1fr;
    }

    .hero__content {
        max-width: 48rem;
    }

        .hero__content h1 {
            max-width: 15ch;
        }

    .hero__visual {
        width: min(100%, 40rem);
        margin-inline: auto;
    }

    .reopen-section__content,
    .integration-section__content {
        max-width: 48rem;
    }

    .enterprise-section__content {
        max-width: 42rem;
    }

    .integration-diagram {
        min-height: 15rem;
    }

    .value-chain,
    .value-chain--combined {
        grid-template-columns: 1fr;
        max-width: 38rem;
        margin-inline: auto;
    }

    .value-chain__arrow {
        min-height: 2rem;
        transform: rotate(90deg);
    }

    .value-chain__combined-steps {
        grid-template-columns: 1fr;
    }

    .value-chain__combined-step {
        min-height: 5.75rem;
    }

    .value-chain__combined-arrow {
        min-height: 1.75rem;
        transform: rotate(90deg);
    }


        .process-grid::before,
        .process-grid::after {
            display: none;
        }

    .site-navigation,
    .site-header__actions {
        display: none;
    }

    .navigation-toggle {
        display: block;
        margin-left: auto;
    }
}

@media (max-width: 48rem) {
    .process-card__badges {
        align-items: flex-start;
        flex-direction: column;
    }

    .process-badge {
        white-space: normal;
    }

    .process-system-map {
        margin-top: var(--space-8);
    }

    .process-system-map__connector {
        width: 1px;
        height: 3rem;
        border-top: 0;
        background: var(--color-brand-blue-300);
    }

        .process-system-map__connector::before,
        .process-system-map__connector::after {
            display: none;
        }

    .process-system-map__target {
        width: 100%;
        min-width: 0;
    }

    .process-system-map--distributed {
        padding-top: 0;
    }

    .process-system-map__distributed-lines {
        display: none;
    }

    .process-system-map__targets {
        grid-template-columns: 1fr;
    }

    .process-profile-selector {
        padding: var(--space-4);
    }

    .process-profile-tabs {
        grid-template-columns: 1fr;
    }

    .process-profile-tab {
        min-height: 4.5rem;
    }

    .process-profile-panel__heading > p {
        font-size: var(--font-size-base);
    }

    .process-grid--single,
    .process-grid--medium,
    .process-grid--large,
    .process-grid--chambers {
        grid-template-columns: 1fr;
    }

    .section--hero {
        padding-top: var(--space-16);
    }

    .hero__lead {
        font-size: var(--font-size-md);
    }

    .hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

        .hero__actions .button {
            width: 100%;
        }

    .hero__summary {
        max-width: 22rem;
    }

    .process-grid__intro {
        width: auto;
        margin-bottom: var(--space-6);
        padding-inline: 0;
        text-align: left;
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .process-card,
    .feature-card {
        min-height: auto;
    }

    .reopen-note {
        grid-template-columns: 1fr;
    }

    .reopen-note__icon {
        width: 2.75rem;
        height: 2.75rem;
    }

    .revision-history__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .enterprise-section__content {
        padding: var(--space-6);
    }

    .integration-diagram {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: var(--space-4);
        padding: var(--space-6);
    }

    .integration-system,
    .integration-system--primary {
        width: 100%;
        min-width: 0;
    }

    .integration-connector {
        transform: rotate(90deg);
    }

    .security-section {
        grid-template-columns: 1fr;
    }

    .security-section__icon {
        width: 7.5rem;
        height: 7.5rem;
    }

        .security-section__icon img {
            width: 3.75rem;
        }

    .cta-panel {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .cta-panel__actions {
        align-items: stretch;
        flex-direction: column;
    }

        .cta-panel__actions .button {
            width: 100%;
        }

    .site-footer__top {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    .site-footer__links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 32rem) {
    .site-brand__logo {
        height: 2.35rem;
    }

    .process-preview__header,
    .process-preview__steps {
        padding-right: var(--space-4);
        padding-left: var(--space-4);
    }

        .process-preview__steps li {
            grid-template-columns: 2.25rem 1fr;
            gap: var(--space-3);
        }

    .process-preview__number {
        width: 2.25rem;
        height: 2.25rem;
    }

    .site-footer__links {
        grid-template-columns: 1fr;
    }
}