/*
    ENTERPRISE PAGE — page-specific styles for /enterprise.

    Scope: every selector lives under a .ent-* root so this file cannot leak
    into other pages even if loaded globally. Layout is flexbox-only.
    Spacing uses 10/25/50px increments only. Backgrounds alternate strictly:
    light-blue (.ent-replace) → white (.ent-operation) → dark
    (.ent-timeline) → light-blue (.ent-trust).
*/


/* ===================================================================
   SECTION 1 — REPLACE
   "Old world alternatives" vs "the new world"
   Background: light blue (#dbeafe) with wave divider above
=================================================================== */

.ent-replace {
    background: #dbeafe;
    position: relative;
    z-index: 1;
}

.ent-replace::before {
    content: "";
    position: absolute;
    top: -79px;
    left: 0;
    width: 100%;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,80 720,0 1080,40 C1260,60 1380,30 1440,40 L1440,80 L0,80 Z' fill='%23dbeafe'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
}

.ent-replace .content-inner {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.ent-replace .ent-replace__layout {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.ent-replace .ent-replace__before {
    flex: 1 1 600px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.ent-replace .ent-replace__after {
    flex: 1 1 360px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.ent-replace .ent-replace__arrow {
    flex: 0 0 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    opacity: 0.6;
}

.ent-replace .ent-replace__arrow svg {
    width: 50px;
    height: 50px;
}

.ent-replace .ent-replace__eyebrow {
    display: inline-block;
    align-self: flex-start;
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ent-replace .ent-replace__eyebrow--before {
    background: rgba(15, 23, 42, 0.1);
    color: #475569;
}

.ent-replace .ent-replace__eyebrow--after {
    background: var(--color-primary);
    color: #ffffff;
}

.ent-replace .ent-replace__before-cards {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.ent-replace .ent-replace__before-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 25px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0.8;
}

.ent-replace .ent-replace__before-card .ent-replace__before-card-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.ent-replace .ent-replace__before-card .ent-replace__before-card-header .ent-replace__before-icon {
    flex: 0 0 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    color: #94a3b8;
}

.ent-replace .ent-replace__before-card .ent-replace__before-card-header .ent-replace__before-icon svg {
    width: 25px;
    height: 25px;
}

.ent-replace .ent-replace__before-card .ent-replace__before-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-ink);
    text-decoration: line-through;
    text-decoration-color: rgba(15, 23, 42, 0.3);
}

.ent-replace .ent-replace__before-card .ent-replace__before-card-tagline {
    margin: 0;
    font-size: 14px;
    color: var(--color-muted);
    font-style: italic;
}

.ent-replace .ent-replace__before-card .ent-replace__before-card-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ent-replace .ent-replace__before-card .ent-replace__before-card-list li {
    font-size: 14px;
    color: #475569;
    padding-left: 25px;
    position: relative;
}

.ent-replace .ent-replace__before-card .ent-replace__before-card-list li::before {
    content: "—";
    position: absolute;
    left: 0;
    top: 0;
    color: #94a3b8;
}

.ent-replace .ent-replace__after-card {
    background: var(--color-ink);
    border-radius: 25px;
    padding: 50px 25px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    box-shadow: 0 25px 50px rgba(28, 145, 228, 0.25);
    position: relative;
    overflow: hidden;
}

.ent-replace .ent-replace__after-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-accent));
}

.ent-replace .ent-replace__after-card .ent-replace__after-card-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.ent-replace .ent-replace__after-card .ent-replace__after-card-title {
    margin: 0;
    font-size: 25px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
}

.ent-replace .ent-replace__after-card .ent-replace__after-card-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ent-replace .ent-replace__after-card .ent-replace__after-card-list li {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

.ent-replace .ent-replace__after-card .ent-replace__after-card-list li .ent-replace__after-icon {
    flex: 0 0 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    color: var(--color-secondary);
    margin-top: 0;
}

.ent-replace .ent-replace__after-card .ent-replace__after-card-list li .ent-replace__after-icon svg {
    width: 25px;
    height: 25px;
}


/* ===================================================================
   SECTION 2 — OPERATION
   "What's included" 8-deliverable grid
   Background: white (#ffffff)
=================================================================== */

.ent-operation {
    background: var(--color-surface);
    position: relative;
    z-index: 1;
}

.ent-operation::before {
    content: "";
    position: absolute;
    top: -79px;
    left: 0;
    width: 100%;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,80 720,0 1080,40 C1260,60 1380,30 1440,40 L1440,80 L0,80 Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
}

.ent-operation .content-inner {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.ent-operation .ent-operation__grid {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 25px;
}

.ent-operation .ent-operation__grid .ent-operation__item {
    flex: 1 1 280px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 25px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 25px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ent-operation .ent-operation__grid .ent-operation__item:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.08);
}

.ent-operation .ent-operation__grid .ent-operation__item .ent-operation__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
}

.ent-operation .ent-operation__grid .ent-operation__item .ent-operation__item-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-ink);
}

.ent-operation .ent-operation__grid .ent-operation__item .ent-operation__item-description {
    margin: 0;
    font-size: 14px;
    color: var(--color-muted);
    line-height: 1.6;
}


/* ===================================================================
   SECTION 3 — TIMELINE
   "From zero to first meeting in 14 days"
   Background: dark ink (#0f172a)
=================================================================== */

.ent-timeline {
    background: var(--color-ink);
    position: relative;
    z-index: 1;
}

.ent-timeline::before {
    content: "";
    position: absolute;
    top: -79px;
    left: 0;
    width: 100%;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,80 720,0 1080,40 C1260,60 1380,30 1440,40 L1440,80 L0,80 Z' fill='%230f172a'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
}

.ent-timeline .content-inner {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.ent-timeline .ent-timeline__track {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 25px;
    position: relative;
}

.ent-timeline .ent-timeline__track .ent-timeline__step {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 25px;
    background: #1e293b;
    border: 1px solid rgba(28, 145, 228, 0.15);
    border-radius: 25px;
    position: relative;
}

.ent-timeline .ent-timeline__track .ent-timeline__step--milestone {
    background: linear-gradient(135deg, rgba(28, 145, 228, 0.2), rgba(79, 190, 254, 0.1));
    border-color: var(--color-secondary);
}

.ent-timeline .ent-timeline__track .ent-timeline__step .ent-timeline__day {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-secondary);
}

.ent-timeline .ent-timeline__track .ent-timeline__step--milestone .ent-timeline__day {
    color: var(--color-accent);
}

.ent-timeline .ent-timeline__track .ent-timeline__step .ent-timeline__dot {
    width: 10px;
    height: 10px;
    border-radius: 50px;
    background: var(--color-secondary);
    margin-bottom: 10px;
}

.ent-timeline .ent-timeline__track .ent-timeline__step--milestone .ent-timeline__dot {
    background: var(--color-accent);
    box-shadow: 0 0 25px rgba(255, 111, 60, 0.6);
}

.ent-timeline .ent-timeline__track .ent-timeline__step .ent-timeline__step-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
}

.ent-timeline .ent-timeline__track .ent-timeline__step .ent-timeline__step-description {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.ent-timeline .ent-timeline__cta-wrap {
    display: flex;
    justify-content: center;
}


/* ===================================================================
   SECTION 4 — TRUST
   "Built for enterprise" 6-item trust grid
   Background: light blue (#dbeafe)
=================================================================== */

.ent-trust {
    background: #dbeafe;
    position: relative;
    z-index: 1;
}

.ent-trust::before {
    content: "";
    position: absolute;
    top: -79px;
    left: 0;
    width: 100%;
    height: 80px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,80 720,0 1080,40 C1260,60 1380,30 1440,40 L1440,80 L0,80 Z' fill='%23dbeafe'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 2;
}

.ent-trust .content-inner {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.ent-trust .ent-trust__grid {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 25px;
}

.ent-trust .ent-trust__grid .ent-trust__item {
    flex: 1 1 280px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 25px;
    background: #ffffff;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.ent-trust .ent-trust__grid .ent-trust__item .ent-trust__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background: rgba(28, 145, 228, 0.1);
    color: var(--color-primary);
}

.ent-trust .ent-trust__grid .ent-trust__item .ent-trust__icon svg {
    width: 25px;
    height: 25px;
}

.ent-trust .ent-trust__grid .ent-trust__item .ent-trust__item-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-ink);
}

.ent-trust .ent-trust__grid .ent-trust__item .ent-trust__item-description {
    margin: 0;
    font-size: 14px;
    color: var(--color-muted);
    line-height: 1.6;
}


/* ===================================================================
   RESPONSIVE — mobile and tablet
=================================================================== */

@media (max-width: 900px) {

    .ent-replace .ent-replace__layout {
        flex-direction: column;
        align-items: stretch;
    }

    .ent-replace .ent-replace__arrow {
        flex: 0 0 auto;
        transform: rotate(90deg);
    }

    .ent-replace .ent-replace__after-card .ent-replace__after-card-title {
        font-size: 22px;
    }

    .ent-operation .ent-operation__grid .ent-operation__item {
        flex: 1 1 100%;
    }

    .ent-timeline .ent-timeline__track .ent-timeline__step {
        flex: 1 1 100%;
    }

    .ent-trust .ent-trust__grid .ent-trust__item {
        flex: 1 1 100%;
    }

}